@extends('layouts.panel')
@section('content')
<div><h2 class="text-3xl sm:text-4xl text-[#041627]">Edit Static Page</h2><p class="text-[#44474c]">{{ $item->title }}</p></div>
<form method="post" action="{{ route('admin.content.pages.update',$item) }}" class="bg-white border border-[#aeb6bf] p-4 sm:p-6 space-y-4">@csrf @method('put')
  <div><label class="text-sm font-semibold">Title</label><input name="title" value="{{ old('title',$item->title) }}" required class="mt-1 border border-[#aeb6bf] p-2 w-full bg-[#f7fafc]"></div>
  <div><label class="text-sm font-semibold">Content</label><textarea name="content" rows="12" class="rte mt-1 border border-[#aeb6bf] p-2 w-full bg-[#f7fafc]">{{ old('content',$item->content) }}</textarea></div>
  <div><label class="text-sm font-semibold">Meta Title</label><input name="meta_title" value="{{ old('meta_title',$item->meta_title) }}" class="mt-1 border border-[#aeb6bf] p-2 w-full bg-[#f7fafc]"></div>
  <div><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',$item->meta_description) }}</textarea></div>
  <button class="w-full bg-[#041627] text-white px-4 py-2 text-sm font-semibold sm:w-auto">Save</button>
</form>
<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;
}

.ck.ck-editor__main > .ck-editor__editable {
  max-width: 100%;
}

.ck-image-resize-toolbar {
  flex-wrap: wrap;
}
</style>
<script>
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, {
    toolbar: ['undo', 'redo', '|', 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', '|', 'insertTable', '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', '420px', editor.editing.view.document.getRoot());
    });
    addImageResizeControls(editor);
  }).catch((error) => {
    console.error(error);
  });
});
</script>
@endsection