<style>
    [x-cloak] { display: none !important; }
</style>

<textarea name="{{ widget.name }}" id="editor-textarea" class="hidden" hidden>{{ widget.value }}</textarea>
<!-- Editorium -->

<div x-cloak x-data="{ showLinkInsertModal: false }">
    <div class="editorium-wrapper bg-white border border-gray-300 rounded-md shadow-sm overflow-hidden">

        <!-- Toolbar -->
        <div class="toolbar flex flex-wrap gap-2 p-3 border-b border-gray-200 bg-gray-50">
            <!-- Text Styles -->
            <button type="button" onclick="format('bold')" class="px-3 py-1.5 text-sm bg-white border border-gray-300 rounded hover:bg-gray-100 transition" title="Bold">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h1a3 3 0 100-6H9v12h4a3 3 0 000-6z" />
                </svg>
            </button>
            <button type="button" onclick="format('italic')" class="italic px-3 py-1.5 text-sm bg-white border border-gray-300 rounded hover:bg-gray-100 transition" title="Italic">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 4h4m-2 0v16m2-16h4" />
                </svg>
            </button>
            <button type="button" onclick="format('underline')" class="underline px-3 py-1.5 text-sm bg-white border border-gray-300 rounded hover:bg-gray-100 transition" title="Underline">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 20h12M12 4v12a4 4 0 01-4 4h0a4 4 0 01-4-4V4" />
                </svg>
            </button>
    
            <!-- Headings -->
            <div class="flex gap-2 items-center border-l pl-4">
                <button type="button" onclick="formatBlock('h1')" class="px-3 py-1.5 text-sm bg-white border border-gray-300 rounded hover:bg-gray-100 transition">H1</button>
                <button type="button" onclick="formatBlock('h2')" class="px-3 py-1.5 text-sm bg-white border border-gray-300 rounded hover:bg-gray-100 transition">H2</button>
                <button type="button" onclick="formatBlock('h3')" class="px-3 py-1.5 text-sm bg-white border border-gray-300 rounded hover:bg-gray-100 transition">H3</button>
                <button type="button" onclick="formatBlock('h4')" class="px-3 py-1.5 text-sm bg-white border border-gray-300 rounded hover:bg-gray-100 transition">H4</button>
                <button type="button" onclick="formatBlock('p')" class="px-3 py-1.5 text-sm bg-white border border-gray-300 rounded hover:bg-gray-100 transition">P</button>
            </div>
    
            <!-- Lists -->
            <div class="flex gap-2 items-center border-l pl-4">
                <button type="button" onclick="formatList('ul')" class="px-3 py-1.5 text-sm bg-white border border-gray-300 rounded hover:bg-gray-100 transition" title="Unordered List">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
                    </svg>
                </button>
                <button type="button" onclick="formatList('ol')" class="px-3 py-1.5 text-sm bg-white border border-gray-300 rounded hover:bg-gray-100 transition" title="Ordered List">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M8.242 5.992h12m-12 6.003H20.24m-12 5.999h12M4.117 7.495v-3.75H2.99m1.125 3.75H2.99m1.125 0H5.24m-1.92 2.577a1.125 1.125 0 1 1 1.591 1.59l-1.83 1.83h2.16M2.99 15.745h1.125a1.125 1.125 0 0 1 0 2.25H3.74m0-.002h.375a1.125 1.125 0 0 1 0 2.25H2.99" />
                    </svg>
                </button>
            </div>

            <!-- Insert Link Modal Button -->
            <div class="flex gap-2 items-center border-l pl-4">
                <button type="button" 
                @click="
                        const selection = window.getSelection();
                        if (selection.rangeCount > 0) {
                            window.savedRange = selection.getRangeAt(0);
                        }
                        showLinkInsertModal = true;
                        " 
                class="px-3 py-1.5 text-sm bg-white border border-gray-300 rounded hover:bg-gray-100 transition" title="Insert Link">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 13a5 5 0 007.07 0l1.42-1.42a5 5 0 00-7.07-7.07l-1.42 1.42M14 11a5 5 0 00-7.07 0l-1.42 1.42a5 5 0 007.07 7.07l1.42-1.42" />
                    </svg>
                </button>
            </div>
        </div>
    
        <!-- Editor -->
        <div id="editor" contenteditable="true"
            class="min-h-[300px] p-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
            {{ widget.value|default_if_none:""|safe }}
        </div>

        <div x-show="showLinkInsertModal" @click.outside="showLinkInsertModal = false" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
            <div class="bg-white p-4 rounded-md w-full max-w-lg">
                <div class="flex gap-2 items-center mb-2">
                    <div class="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 13a5 5 0 007.07 0l1.42-1.42a5 5 0 00-7.07-7.07l-1.42 1.42M14 11a5 5 0 00-7.07 0l-1.42 1.42a5 5 0 007.07 7.07l1.42-1.42" />
                        </svg>
                    </div>
                    <div>
                        <p class="text-gray-500">Insert the Link</p>
                    </div>
                </div>
                <div class="mb-2">
                    <input class="w-full border border-gray-300 rounded px-3 py-2 mb-4 focus:outline-none focus:ring-2 focus:ring-blue-500" type="url" name="" id="linkInput" placeholder="Ex - https://www.google.com">
                </div>
                <div class="flex justify-end">
                    <div class="flex gap-2">
                        <button type="button" @click="showLinkInsertModal = false" class="px-3 py-2 rounded-lg bg-gray-600 hover:bg-gray-700 text-white font-semibold text-sm hover:cursor-pointer">Cancel</button>
                        <button type="button" onclick="insertLinkFromModal()" class="px-3 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-semibold text-sm hover:cursor-pointer">Insert</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>


<!-- JavaScript -->

<script>
  function insertLinkFromModal() {
    const url = document.getElementById('linkInput').value.trim();
    if (!url || !window.savedRange) return;

    const selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(window.savedRange);

    const anchor = document.createElement('a');
    anchor.href = url;
    anchor.textContent = window.savedRange.toString() || url;
    anchor.target = '_blank';
    anchor.rel = 'noopener noreferrer';

    window.savedRange.deleteContents();
    window.savedRange.insertNode(anchor);

    // Reset modal state
    window.savedRange = null;
    document.getElementById('linkInput').value = '';
    document.getElementById('linkInput').blur(); // optional UX touch
    document.querySelector('[x-show="showLinkInsertModal"]').style.display = 'none';
  }

  // To make the a links functional inside of the editor.   
  document.getElementById('editor').addEventListener('click', function (e) {
    const target = e.target;
    if (target.tagName === 'A') {
      const href = target.getAttribute('href');
      if (href && (e.ctrlKey || e.metaKey)) {
        // Open in new tab only if Ctrl or Cmd is pressed
        window.open(href, '_blank', 'noopener,noreferrer');
        e.preventDefault(); // Prevent default browser behavior
      }
    }
  });

</script>

<!-- New script to sync editor content -->
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const editor = document.getElementById('editor');
    const textarea = document.getElementById('editor-textarea');
    const form = textarea.closest('form');

    if (form && editor && textarea) {
      form.addEventListener('submit', function () {
        textarea.value = editor.innerHTML;
      });
    }
  });
</script>