@extends('layouts.panel')
@section('content')
<div><h2 class="text-4xl text-[#041627]">{{ isset($article) ? 'Manage Article' : 'Submit Article' }}</h2></div>
@if($errors->any())
<div class="bg-[#ffdad6] border border-[#ba1a1a] text-[#93000a] p-4 rounded">
  <p class="font-semibold mb-2">Please fix the following:</p>
  <ul class="list-disc pl-5 text-sm">
    @foreach($errors->all() as $error)
      <li>{{ $error }}</li>
    @endforeach
  </ul>
</div>
@endif
<form method="post" enctype="multipart/form-data" action="{{ isset($article)?route('articles.update',$article):route('articles.store') }}" class="bg-white border border-[#aeb6bf] p-6 space-y-6">@csrf @if(isset($article)) @method('put') @endif

  <section class="grid md:grid-cols-2 gap-4">
    <div class="md:col-span-2"><label class="text-sm font-semibold">Article Title</label><input name="title" value="{{ old('title',$article->title ?? '') }}" maxlength="255" required class="mt-1 border border-[#aeb6bf] p-2 w-full bg-[#f7fafc]"></div>
    @if(auth()->user()->role === 'admin')
    <div class="md:col-span-2"><label class="text-sm font-semibold">Author</label><select name="author_id" required class="mt-1 border border-[#aeb6bf] p-2 w-full bg-[#f7fafc]"><option value="">Select author</option>@foreach($authors ?? [] as $author)<option value="{{ $author->id }}" @selected((string) old('author_id',$article->author_id ?? '') === (string) $author->id)>{{ $author->name }} ({{ $author->email }})</option>@endforeach</select></div>
    @endif
    <div class="md:col-span-2"><label class="text-sm font-semibold">Synopsis</label><textarea name="synopsis" rows="8" class="rte mt-1 border border-[#aeb6bf] p-2 w-full bg-[#f7fafc]">{{ old('synopsis',$article->synopsis ?? '') }}</textarea></div>
    <div><label class="text-sm font-semibold">Category</label><select name="category_id" class="mt-1 border border-[#aeb6bf] p-2 w-full bg-[#f7fafc]"><option value="">Select category</option>@foreach($categories as $c)<option value="{{ $c->id }}" @selected(old('category_id',$article->category_id ?? '')==$c->id)>{{ $c->name }}</option>@endforeach</select></div>
    <div><label class="text-sm font-semibold">Keywords (comma separated)</label><input name="keywords" value="{{ old('keywords',$article->keywords ?? '') }}" class="mt-1 border border-[#aeb6bf] p-2 w-full bg-[#f7fafc]"></div>
    <div>
      <label class="text-sm font-semibold">Thumbnail</label>
      <input type="file" name="thumbnail" accept="image/*" data-max-kb="2048" class="mt-1 border border-[#aeb6bf] p-2 w-full bg-[#f7fafc]">
      @if(isset($article) && $article->thumbnail)
        <p class="mt-1 text-xs text-[#44474c]">Current: <a class="underline" target="_blank" href="{{ asset('storage/'.$article->thumbnail) }}">{{ basename($article->thumbnail) }}</a></p>
      @endif
    </div>
  </section>

  <section>
    <h3 class="text-xl font-semibold text-[#041627] mb-3">Submission Files</h3>
    <div class="grid md:grid-cols-2 gap-4">
      <div>
        <label class="text-sm font-semibold">Main Article File (.pdf/.docx)</label>
        <input type="file" name="main_file" accept=".pdf,.doc,.docx,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" data-max-kb="10240" class="mt-1 border border-[#aeb6bf] p-2 w-full bg-[#f7fafc]" @if(!isset($article)) required @endif>
        @if(isset($article) && $article->main_file)
          <p class="mt-1 text-xs text-[#44474c]">Current: <a class="underline" target="_blank" href="{{ asset('storage/'.$article->main_file) }}">{{ basename($article->main_file) }}</a></p>
        @endif
      </div>
      <div>
        <label class="text-sm font-semibold">Supplementary File</label>
        <input type="file" name="supplementary_file" data-max-kb="10240" class="mt-1 border border-[#aeb6bf] p-2 w-full bg-[#f7fafc]">
        @if(isset($article) && $article->supplementary_file)
          <p class="mt-1 text-xs text-[#44474c]">Current: <a class="underline" target="_blank" href="{{ asset('storage/'.$article->supplementary_file) }}">{{ basename($article->supplementary_file) }}</a></p>
        @endif
      </div>
      <div>
        <label class="text-sm font-semibold">Copyright Certificate</label>
        <input type="file" name="copyright_certificate" data-max-kb="10240" class="mt-1 border border-[#aeb6bf] p-2 w-full bg-[#f7fafc]">
        @if(isset($article) && $article->copyright_certificate)
          <p class="mt-1 text-xs text-[#44474c]">Current: <a class="underline" target="_blank" href="{{ asset('storage/'.$article->copyright_certificate) }}">{{ basename($article->copyright_certificate) }}</a></p>
        @endif
      </div>
      <div>
        <label class="text-sm font-semibold">Ethical Clearance</label>
        <input type="file" name="ethical_clearance" data-max-kb="10240" class="mt-1 border border-[#aeb6bf] p-2 w-full bg-[#f7fafc]">
        @if(isset($article) && $article->ethical_clearance)
          <p class="mt-1 text-xs text-[#44474c]">Current: <a class="underline" target="_blank" href="{{ asset('storage/'.$article->ethical_clearance) }}">{{ basename($article->ethical_clearance) }}</a></p>
        @endif
      </div>
    </div>
  </section>

  @if(in_array(auth()->user()->role, ['author', 'admin'], true))
  <section>
    <div class="mb-3 flex flex-wrap items-center justify-between gap-2">
      <h3 class="text-xl font-semibold text-[#041627]">Co-Authors</h3>
      <button type="button" data-add-co-author class="inline-flex items-center gap-1 border border-[#041627] px-3 py-2 text-sm font-semibold text-[#041627]">
        <span class="material-symbols-outlined text-[18px]">add</span>
        Add
      </button>
    </div>
    @php($coRows = old('co_authors', isset($article) ? $article->coAuthors->toArray() : [[]]))
    <div data-co-authors class="space-y-2">
    @for($i=0; $i<max(1,count($coRows)); $i++)
      <div class="grid md:grid-cols-[repeat(4,minmax(0,1fr))_auto] gap-2" data-co-author-row>
        <input name="co_authors[{{ $i }}][full_name]" value="{{ $coRows[$i]['full_name'] ?? '' }}" placeholder="Full Name" maxlength="255" class="border border-[#aeb6bf] p-2 bg-[#f7fafc]">
        <input type="email" name="co_authors[{{ $i }}][email]" value="{{ $coRows[$i]['email'] ?? '' }}" placeholder="Email" maxlength="255" class="border border-[#aeb6bf] p-2 bg-[#f7fafc]">
        <input name="co_authors[{{ $i }}][designation]" value="{{ $coRows[$i]['designation'] ?? '' }}" placeholder="Designation" maxlength="255" class="border border-[#aeb6bf] p-2 bg-[#f7fafc]">
        <input name="co_authors[{{ $i }}][affiliation]" value="{{ $coRows[$i]['affiliation'] ?? '' }}" placeholder="Affiliation" maxlength="255" class="border border-[#aeb6bf] p-2 bg-[#f7fafc]">
        <button type="button" data-remove-co-author class="border border-[#ba1a1a] px-3 py-2 text-sm font-semibold text-[#ba1a1a]">Remove</button>
      </div>
    @endfor
    </div>
  </section>
  @endif

  <section>
    <h3 class="text-xl font-semibold text-[#041627] mb-3">SEO</h3>
    <div class="grid md:grid-cols-2 gap-4">
      <div><label class="text-sm font-semibold">Meta Title</label><input name="meta_title" value="{{ old('meta_title',$article->meta_title ?? '') }}" maxlength="255" class="mt-1 border border-[#aeb6bf] p-2 w-full bg-[#f7fafc]"></div>
      <div><label class="text-sm font-semibold">Meta Keywords</label><input name="meta_keywords" value="{{ old('meta_keywords',$article->meta_keywords ?? '') }}" class="mt-1 border border-[#aeb6bf] p-2 w-full bg-[#f7fafc]"></div>
      <div class="md:col-span-2"><label class="text-sm font-semibold">Meta Description</label><textarea name="meta_description" rows="3" class="mt-1 border border-[#aeb6bf] p-2 w-full bg-[#f7fafc]">{{ old('meta_description',$article->meta_description ?? '') }}</textarea></div>
    </div>
  </section>

  @if(auth()->user()->role !== 'author')
  <section>
    <h3 class="text-xl font-semibold text-[#041627] mb-3">Editorial Controls</h3>
      <div class="grid md:grid-cols-2 gap-4">
      <div><label class="text-sm font-semibold">Status</label><input name="status" value="{{ old('status',$article->status ?? 'submitted') }}" maxlength="255" class="mt-1 border border-[#aeb6bf] p-2 w-full bg-[#f7fafc]"></div>
      <div>
        <label class="text-sm font-semibold">Formatted PDF</label>
        <input type="file" name="formatted_pdf" accept=".pdf,application/pdf" data-max-kb="10240" class="mt-1 border border-[#aeb6bf] p-2 w-full bg-[#f7fafc]">
        @if(isset($article) && $article->formatted_pdf)
          <p class="mt-1 text-xs text-[#44474c]">Current: <a class="underline" target="_blank" href="{{ asset('storage/'.$article->formatted_pdf) }}">{{ basename($article->formatted_pdf) }}</a></p>
        @endif
      </div>
      <div>
        <label class="text-sm font-semibold">ePub File</label>
        <input type="file" name="epub_file" accept=".epub,application/epub+zip" data-max-kb="10240" class="mt-1 border border-[#aeb6bf] p-2 w-full bg-[#f7fafc]">
        @if(isset($article) && $article->epub_file)
          <p class="mt-1 text-xs text-[#44474c]">Current: <a class="underline" target="_blank" href="{{ asset('storage/'.$article->epub_file) }}">{{ basename($article->epub_file) }}</a></p>
        @endif
      </div>
      <div>
        <label class="text-sm font-semibold">XML File</label>
        <input type="file" name="xml_file" accept=".xml,application/xml,text/xml" data-max-kb="10240" class="mt-1 border border-[#aeb6bf] p-2 w-full bg-[#f7fafc]">
        @if(isset($article) && $article->xml_file)
          <p class="mt-1 text-xs text-[#44474c]">Current: <a class="underline" target="_blank" href="{{ asset('storage/'.$article->xml_file) }}">{{ basename($article->xml_file) }}</a></p>
        @endif
      </div>
    </div>

    <div class="mt-4">
      <h4 class="font-semibold mb-2">Additional Download Files</h4>
      @for($i=0; $i<2; $i++)
      <div class="grid md:grid-cols-2 gap-2 mb-2">
        <input name="extra_file_label[{{ $i }}]" placeholder="Label (e.g. Dataset)" maxlength="100" class="border border-[#aeb6bf] p-2 bg-[#f7fafc]">
        <input type="file" name="extra_file_upload[{{ $i }}]" data-max-kb="10240" class="border border-[#aeb6bf] p-2 bg-[#f7fafc]">
      </div>
      @endfor
      @if(isset($article) && $article->extraFiles->count())
      <ul class="text-sm text-[#44474c] mt-2">@foreach($article->extraFiles as $f)<li>{{ $f->label }} - {{ $f->file_path }}</li>@endforeach</ul>
      @endif
    </div>
  </section>
  @endif

  <button class="bg-[#041627] text-white px-5 py-2 text-sm font-semibold">Save</button>
</form>
<script>
(() => {
  const container = document.querySelector('[data-co-authors]');
  const addButton = document.querySelector('[data-add-co-author]');

  if (!container || !addButton) {
    return;
  }

  const reindexRows = () => {
    container.querySelectorAll('[data-co-author-row]').forEach((row, index) => {
      row.querySelectorAll('input').forEach((input) => {
        input.name = input.name.replace(/co_authors\[\d+\]/, `co_authors[${index}]`);
      });
    });
  };

  const createRow = () => {
    const index = container.querySelectorAll('[data-co-author-row]').length;
    const row = document.createElement('div');
    row.className = 'grid md:grid-cols-[repeat(4,minmax(0,1fr))_auto] gap-2';
    row.dataset.coAuthorRow = 'true';
    row.innerHTML = `
      <input name="co_authors[${index}][full_name]" placeholder="Full Name" maxlength="255" class="border border-[#aeb6bf] p-2 bg-[#f7fafc]">
      <input type="email" name="co_authors[${index}][email]" placeholder="Email" maxlength="255" class="border border-[#aeb6bf] p-2 bg-[#f7fafc]">
      <input name="co_authors[${index}][designation]" placeholder="Designation" maxlength="255" class="border border-[#aeb6bf] p-2 bg-[#f7fafc]">
      <input name="co_authors[${index}][affiliation]" placeholder="Affiliation" maxlength="255" class="border border-[#aeb6bf] p-2 bg-[#f7fafc]">
      <button type="button" data-remove-co-author class="border border-[#ba1a1a] px-3 py-2 text-sm font-semibold text-[#ba1a1a]">Remove</button>
    `;
    return row;
  };

  addButton.addEventListener('click', () => {
    container.appendChild(createRow());
  });

  container.addEventListener('click', (event) => {
    const button = event.target.closest('[data-remove-co-author]');
    if (!button) {
      return;
    }

    const row = button.closest('[data-co-author-row]');
    if (row && container.querySelectorAll('[data-co-author-row]').length > 1) {
      row.remove();
      reindexRows();
    } else if (row) {
      row.querySelectorAll('input').forEach((input) => {
        input.value = '';
      });
    }
  });
})();
</script>
<script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/classic/ckeditor.js"></script>
<style>
.ck-content .image.image_resized {
  box-sizing: border-box;
  display: block;
  max-width: 100%;
}

.ck-content .image.image_resized:not(.image-style-side):not(.image-style-align-right):not(.image-style-align-center) {
  clear: none;
  float: left;
  margin: .25rem 1rem 1rem 0;
}

.ck-content .image.image_resized.image-style-side,
.ck-content .image.image_resized.image-style-align-right {
  clear: none;
  float: right;
  margin: .25rem 0 1rem 1rem;
}

.ck-content .image.image_resized.image-style-align-center {
  clear: both;
  float: none;
  margin-left: auto;
  margin-right: auto;
}

.ck-content::after {
  clear: both;
  content: "";
  display: block;
}

.ck-content .image.image_resized img {
  width: 100%;
}

.ck-content .image.image_resized > figcaption {
  display: block;
}
</style>
<script>
class LocalImageUploadAdapter {
  constructor(loader) {
    this.loader = loader;
    this.controller = new AbortController();
  }

  upload() {
    return this.loader.file.then((file) => {
      const data = new FormData();
      data.append('upload', file);

      return fetch('{{ route('articles.inline-image') }}', {
        method: 'POST',
        headers: {
          'X-CSRF-TOKEN': '{{ csrf_token() }}',
        },
        body: data,
        signal: this.controller.signal,
      }).then(async (response) => {
        const payload = await response.json().catch(() => ({}));
        if (!response.ok || !payload.url) {
          throw new Error(payload.message || 'Image upload failed.');
        }

        return { default: payload.url };
      });
    });
  }

  abort() {
    this.controller.abort();
  }
}

function LocalImageUploadPlugin(editor) {
  editor.plugins.get('FileRepository').createUploadAdapter = (loader) => new LocalImageUploadAdapter(loader);
}

function addImageResizeControls(editor) {
  const toolbar = editor.ui.view.toolbar.element;
  const resizeCommand = editor.commands.get('resizeImage');
  const editableElement = editor.ui.getEditableElement();
  const editableWrapper = editableElement ? editableElement.parentElement : null;
  const wrapper = editableWrapper || (toolbar ? toolbar.parentElement : null);
  let lastSelectedImage = null;
  let lastSelectedImageWidth = null;
  let isReapplyingImageWidth = false;
  const imageWidths = new WeakMap();
  const imageWidthsBySrc = new Map();
  let reapplyTimer = null;

  if (!wrapper || wrapper.querySelector('.ck-image-resize-toolbar')) {
    return;
  }

  const controls = document.createElement('div');
  controls.className = 'ck-image-resize-toolbar';
  controls.style.alignItems = 'center';
  controls.style.background = '#f8fafc';
  controls.style.border = '1px solid var(--ck-color-toolbar-border)';
  controls.style.borderTop = '0';
  controls.style.display = 'flex';
  controls.style.gap = '6px';
  controls.style.padding = '8px';
  controls.innerHTML = `
    <span data-image-resize-status style="font-size:12px;font-weight:600;margin-right:4px;">Image size</span>
    <button type="button" data-image-resize-value="" style="border:1px solid #cbd5e1;padding:4px 8px;background:#fff;">Original</button>
    <button type="button" data-image-resize-value="25%" style="border:1px solid #cbd5e1;padding:4px 8px;background:#fff;">25%</button>
    <button type="button" data-image-resize-value="50%" style="border:1px solid #cbd5e1;padding:4px 8px;background:#fff;">50%</button>
    <button type="button" data-image-resize-value="75%" style="border:1px solid #cbd5e1;padding:4px 8px;background:#fff;">75%</button>
    <button type="button" data-image-resize-value="100%" style="border:1px solid #cbd5e1;padding:4px 8px;background:#fff;">100%</button>
  `;

  if (editableElement && editableElement.parentElement === wrapper) {
    wrapper.insertBefore(controls, editableElement);
  } else if (toolbar && toolbar.parentElement === wrapper) {
    wrapper.insertBefore(controls, toolbar.nextSibling);
  } else {
    wrapper.prepend(controls);
  }

  const buttons = controls.querySelectorAll('[data-image-resize-value]');
  const getSelectedDomImage = () => {
    if (!editableElement) {
      return null;
    }

    const selectedWidget = editableElement.querySelector('.ck-widget_selected');
    return selectedWidget ? selectedWidget.closest('figure.image, span.image-inline, .ck-widget') : null;
  };

  const getModelImageFromDom = () => {
    const domImage = getSelectedDomImage();

    if (!domImage) {
      return null;
    }

    const viewElement = editor.editing.view.domConverter.mapDomToView(domImage);
    const modelElement = viewElement ? editor.editing.mapper.toModelElement(viewElement) : null;

    if (modelElement && (modelElement.is('element', 'imageBlock') || modelElement.is('element', 'imageInline'))) {
      lastSelectedImage = modelElement;
      return modelElement;
    }

    return null;
  };

  const getSelectedImage = () => {
    const selection = editor.model.document.selection;
    const selectedElement = selection.getSelectedElement();

    if (selectedElement && (selectedElement.is('element', 'imageBlock') || selectedElement.is('element', 'imageInline'))) {
      lastSelectedImage = selectedElement;
      return selectedElement;
    }

    return getModelImageFromDom() || lastSelectedImage;
  };

  const getDomImageForModel = (image) => {
    if (!image) {
      return null;
    }

    const viewElement = editor.editing.mapper.toViewElement(image);
    const domElement = viewElement ? editor.editing.view.domConverter.mapViewToDom(viewElement) : null;

    return domElement ? domElement.closest('figure.image, span.image-inline, .ck-widget') : null;
  };

  const applyWidthToDomImage = (domImage, width) => {
    if (!domImage) {
      return;
    }

    const nextWidth = width || '';
    const shouldBeResized = !!width;

    if (domImage.style.width !== nextWidth) {
      domImage.style.width = nextWidth;
    }

    if (domImage.classList.contains('image_resized') !== shouldBeResized) {
      domImage.classList.toggle('image_resized', shouldBeResized);
    }
  };

  const getImageSrc = (domImage, image) => {
    const modelSrc = image ? image.getAttribute('src') : null;
    const imageElement = domImage ? domImage.querySelector('img') : null;
    const domSrc = imageElement ? imageElement.getAttribute('src') : null;

    return modelSrc || domSrc || null;
  };

  const applyWidthToModelImage = (image, width) => {
    if (!image) {
      return;
    }

    const currentWidth = image.getAttribute('resizedWidth') || null;
    if (currentWidth === width) {
      return;
    }

    editor.model.change((writer) => {
      if (width) {
        writer.setAttribute('resizedWidth', width, image);
      } else {
        writer.removeAttribute('resizedWidth', image);
      }
    });
  };

  const reapplyStoredImageWidth = () => {
    if (isReapplyingImageWidth) {
      return;
    }

    const image = getSelectedImage();

    if (!image) {
      return;
    }

    const width = imageWidths.has(image) ? imageWidths.get(image) : lastSelectedImageWidth;
    const domImage = getDomImageForModel(image) || getSelectedDomImage();
    const imageSrc = getImageSrc(domImage, image);
    const storedWidth = imageSrc && imageWidthsBySrc.has(imageSrc) ? imageWidthsBySrc.get(imageSrc) : width;

    isReapplyingImageWidth = true;
    applyWidthToModelImage(image, storedWidth);
    applyWidthToDomImage(domImage, storedWidth);
    isReapplyingImageWidth = false;
  };

  const reapplyAllStoredImageWidths = () => {
    if (!editableElement) {
      return;
    }

    editableElement.querySelectorAll('figure.image, span.image-inline, .ck-widget').forEach((domImage) => {
      const imageSrc = getImageSrc(domImage, null);

      if (imageSrc && imageWidthsBySrc.has(imageSrc)) {
        applyWidthToDomImage(domImage, imageWidthsBySrc.get(imageSrc));
      }
    });
  };

  const scheduleReapplyStoredWidths = () => {
    clearTimeout(reapplyTimer);
    reapplyTimer = setTimeout(() => {
      reapplyStoredImageWidth();
      reapplyAllStoredImageWidths();
    }, 0);
  };

  const updateState = () => {
    const hasImage = !!getSelectedImage();

    buttons.forEach((button) => {
      button.disabled = false;
      button.style.opacity = hasImage ? '1' : '0.45';
      button.style.cursor = 'pointer';
    });
  };

  buttons.forEach((button) => {
    const resizeSelectedImage = (event) => {
      event.preventDefault();
      event.stopPropagation();

      const domImage = getSelectedDomImage();
      const image = getSelectedImage();

      if (!image) {
        if (domImage) {
          const width = button.dataset.imageResizeValue || null;
          const imageSrc = getImageSrc(domImage, null);

          if (imageSrc) {
            imageWidthsBySrc.set(imageSrc, width);
          }

          applyWidthToDomImage(domImage, width);
          scheduleReapplyStoredWidths();
        }
        return;
      }

      const width = button.dataset.imageResizeValue || null;
      lastSelectedImage = image;
      lastSelectedImageWidth = width;
      imageWidths.set(image, width);

      const imageSrc = getImageSrc(domImage || getDomImageForModel(image), image);
      if (imageSrc) {
        imageWidthsBySrc.set(imageSrc, width);
      }

      editor.model.change((writer) => {
        writer.setSelection(image, 'on');
      });

      if (resizeCommand) {
        try {
          editor.execute('resizeImage', { width });
        } catch (error) {
          console.warn('CKEditor resize command failed, applying width directly.', error);
        }
      }

      applyWidthToModelImage(image, width);
      applyWidthToDomImage(domImage || getDomImageForModel(image), width);

      editor.editing.view.focus();
      updateState();
      scheduleReapplyStoredWidths();
    };

    button.addEventListener('pointerdown', resizeSelectedImage);
    button.addEventListener('mousedown', resizeSelectedImage);
  });

  if (resizeCommand) {
    resizeCommand.on('change:isEnabled', updateState);
  }
  editor.model.document.selection.on('change:range', () => {
    updateState();
    scheduleReapplyStoredWidths();
  });
  editor.model.document.on('change:data', () => {
    if (!isReapplyingImageWidth) {
      scheduleReapplyStoredWidths();
    }
  });

  if (editableElement) {
    editableElement.addEventListener('click', scheduleReapplyStoredWidths);
    editableElement.addEventListener('keyup', scheduleReapplyStoredWidths);

    new MutationObserver(scheduleReapplyStoredWidths).observe(editableElement, {
      attributes: true,
      childList: true,
      subtree: true,
    });
  }

  updateState();
}

document.querySelectorAll('textarea.rte').forEach((el) => {
  ClassicEditor.create(el, {
    extraPlugins: [LocalImageUploadPlugin],
    toolbar: ['undo', 'redo', '|', 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', '|', 'insertTable', 'uploadImage', 'blockQuote'],
    image: {
      resizeOptions: [
        { name: 'resizeImage:original', label: 'Original', value: null },
        { name: 'resizeImage:25', label: '25%', value: '25' },
        { name: 'resizeImage:50', label: '50%', value: '50' },
        { name: 'resizeImage:75', label: '75%', value: '75' },
        { name: 'resizeImage:100', label: '100%', value: '100' }
      ],
      toolbar: [
        'imageTextAlternative',
        'toggleImageCaption',
        '|',
        'imageStyle:inline',
        'imageStyle:block',
        'imageStyle:side',
      ]
    }
  }).then((editor) => {
    editor.editing.view.change((writer) => {
      writer.setStyle('min-height', '320px', editor.editing.view.document.getRoot());
    });
    addImageResizeControls(editor);
  }).catch((error) => {
    console.error(error);
  });
});
</script>
@endsection