@once
    <!-- Google Fonts Link - Added via ViewField -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Allura&family=Arvo&family=Bebas+Neue&family=Bitter&family=Caveat&family=Cinzel&family=Covered+By+Your+Grace&family=Crimson+Text&family=Dancing+Script&family=EB+Garamond&family=Great+Vibes&family=Handlee&family=Indie+Flower&family=Inter&family=Lato&family=Lora&family=Merriweather&family=Montserrat&family=Nanum+Pen+Script&family=Open+Sans&family=Oswald&family=Pacifico&family=Playfair+Display&family=Poppins&family=Raleway&family=Roboto+Mono&family=Roboto&family=Sacramento&family=Satisfy&family=Shadows+Into+Light&family=Slabo+27px&family=Source+Code+Pro&family=Source+Sans+Pro&display=swap" rel="stylesheet">
    <!-- End Google Fonts Link -->
@endonce
@php
    //dd($this);
    $state = $this->form->getState();
    //dd($state);
    $bgImage = $state['bg_image'] ?? null;
    $templateContent = $state['template_content'] ?? [];
@endphp
<div id="editor-container"
    x-on:click.self="$wire.set('data.selected_item', null)"
    class="certificate-editor relative" style="
            background-image: url({{ $bgImage ? asset('storage/' . $bgImage) : '' }});
            width: 100%;overflow: hidden; display: flex;flex-direction: column;align-items: center;justify-content: center;
            aspect-ratio: 1.4142 / 1;background-size: cover;background-repeat: no-repeat;
            background-position: center;position: relative;border: 1px solid #ccc;position: relative;"
    >
    @foreach($templateContent as $index => $item)
        @if($item['type'] === 'p')
            <div 
                class="resize-drag draggable-only draggable resizable"
                style="position:absolute; transform: translate({{$item['style']['x']}}px, {{$item['style']['y']}}px); font-family:{{$item['style']['font_family']}}; font-size:{{$item['style']['font_size']}}rem; color:{{$item['style']['color']}}; text-align:{{$item['style']['text_align']}}; max-width:100%;"
                x-on:drag-ended="$wire.set('data.template_content.{{ $index }}.style.x', $event.detail.x); $wire.set('data.template_content.{{ $index }}.style.y', $event.detail.y);$wire.set('data.template_content.{{ $index }}.style.width', $event.detail.width); $wire.set('data.template_content.{{ $index }}.style.height', $event.detail.height);"
                x-on:resize-ended="$wire.set('data.template_content.{{ $index }}.style.x', $event.detail.x); $wire.set('data.template_content.{{ $index }}.style.y', $event.detail.y);$wire.set('data.template_content.{{ $index }}.style.width', $event.detail.width); $wire.set('data.template_content.{{ $index }}.style.height', $event.detail.height);"
                    
            >
                <p class="editable"
                    x-data="{ id: '{{ $item['id'] }}', editing:false}"
                    :class="{'no-drag': editing, 'selected-item': $wire.data.selected_item?.id === id, 'is-editing': editing}"
                    :contenteditable="editing ? 'true' : 'false'"
                    data-index="{{ $index }}"
                    x-on:contextmenu.prevent="if (editing) {$store.menu.show($event, $el)}"
                    x-on:blur="if(!$store.menu.visible){ editing = false; $wire.set('data.template_content.{{ $index }}.content', $el.innerText); $el.removeAttribute('contenteditable'); }"
                    x-on:click="
                                if (!editing) {
                                    const cleaned = { ...@js($item) };
                                    delete cleaned.src;       // important
                                    delete cleaned['src'];    // double guarantee
                                    $wire.set('data.selected_item', cleaned);
                                }
                                "
                    x-on:dblclick="editing = true"
                    data-x="{{ $item['style']['x'] }}"
                    data-y="{{ $item['style']['y'] }}"
                >
                    {!!  nl2br($item['content']) !!}
                </p>
            </div>
        @elseif($item['type'] === 'image')
            <img src="
                @if(is_array($item['src']) && isset($item['src'][0]))
                    {{ asset('storage/'.$item['src'][0]) }}
                @endif
                "
                class="resize-drag draggable resizable"
                x-data="{ id: '{{ $item['id'] }}'}"
                :class="{ 'selected-item': $wire.data.selected_item?.id === id }"
                style="position:absolute; transform: translate({{$item['style']['x']}}px, {{$item['style']['y']}}px); width:{{$item['style']['width']}}; height:{{$item['style']['height']}}; font-family:{{$item['style']['font_family']}}; font-size:{{$item['style']['font_size']}}rem; color:{{$item['style']['color']}}; text-align:{{$item['style']['text_align']}};"
                x-on:drag-ended="$wire.set('data.template_content.{{ $index }}.style.x', $event.detail.x); $wire.set('data.template_content.{{ $index }}.style.y', $event.detail.y);$wire.set('data.template_content.{{ $index }}.style.width', $event.detail.width); $wire.set('data.template_content.{{ $index }}.style.height', $event.detail.height);"
                x-on:resize-ended="$wire.set('data.template_content.{{ $index }}.style.x', $event.detail.x); $wire.set('data.template_content.{{ $index }}.style.y', $event.detail.y);$wire.set('data.template_content.{{ $index }}.style.width', $event.detail.width); $wire.set('data.template_content.{{ $index }}.style.height', $event.detail.height);"
                x-on:click="$wire.set('data.selected_item', @js($item)); $wire.call('$refresh')"
                data-x="{{ $item['style']['x'] }}"
                data-y="{{ $item['style']['y'] }}"
            >
        @elseif($item['type'] === 'hr')
            <hr class="resize-drag draggable-only draggable resizable"
                x-data="{ id: '{{ $item['id'] }}'}"
                :class="{ 'selected-item': $wire.data.selected_item?.id === id }"
                style="position:absolute; transform: translate({{$item['style']['x']}}px, {{$item['style']['y']}}px); width:{{$item['style']['width']}}; height:{{$item['style']['height']}}; font-family:{{$item['style']['font_family']}}; font-size:{{$item['style']['font_size']}}rem; color:{{$item['style']['color']}}; text-align:{{$item['style']['text_align']}};"
                x-on:drag-ended="$wire.set('data.template_content.{{ $index }}.style.x', $event.detail.x); $wire.set('data.template_content.{{ $index }}.style.y', $event.detail.y);$wire.set('data.template_content.{{ $index }}.style.width', $event.detail.width); $wire.set('data.template_content.{{ $index }}.style.height', $event.detail.height);"
                x-on:resize-ended="$wire.set('data.template_content.{{ $index }}.style.x', $event.detail.x); $wire.set('data.template_content.{{ $index }}.style.y', $event.detail.y);$wire.set('data.template_content.{{ $index }}.style.width', $event.detail.width); $wire.set('data.template_content.{{ $index }}.style.height', $event.detail.height);"
                x-on:click="$wire.set('data.selected_item', @js($item)); $wire.call('$refresh');"
                data-x="{{ $item['style']['x'] }}"
                data-y="{{ $item['style']['y'] }}"
            >
        @endif
    @endforeach
    <div
        x-show="$store.menu.visible"
        x-transition
        @click.away="$store.menu.hide()"
        @mousedown.prevent
        class="absolute z-[99999] bg-white border shadow rounded"
        :style="{ top: $store.menu.y + 'px', left: $store.menu.x + 'px' }"
        style="display:none"
    >
        <template x-for="item in $store.menu.items">
            <button 
                type="button"
                class="block w-full px-4 py-1 text-left hover:bg-gray-100 text-sm"
                @click.prevent="$store.menu.insert(item)"
            >
                <span x-text="item.label"></span>
            </button>
        </template>
    </div>

    <style>
        .selected-item {
            outline: 2px dashed #f59e0b;  /* amber border */
            outline-offset: 4px;

            /* Slight background overlay */
            background-color: rgba(255, 235, 205, 0.2); /* light amber overlay */

            /* Add a subtle shadow for depth */
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        /* Optional: show resize handles for resizable items */
        .selected-item::after {
            content: '';
            position: absolute;
            top: -4px;
            right: -4px;
            bottom: -4px;
            left: -4px;
            border: 1px dashed #f59e0b;
            pointer-events: none;
        }

        /* Optional: make it more obvious when editing */
        .is-editing.selected-item {
            background-color: rgba(255, 255, 255, 0.3);
            outline: 2px solid #f97316; /* brighter orange */
        }
        .resize-drag{
            padding: 12px;
            display: block;
            touch-action: none;
            pointer-events: auto;      /* enables clicks */
            user-select: none;         /* prevent text selection */
            -webkit-user-select: none; /* Safari/Chrome */
            -moz-user-select: none;    /* Firefox */
            -ms-user-select: none;     /* IE10+ */
        }
        .editable {user-select: none;display: inline-block;}
        
        .editable.is-editing {user-select: text;cursor: text;}
        .editable[contenteditable="true"] {
            outline: none !important;border: 2px solid #999;background: #fff;padding: 6px 8px;
            border-radius: 6px;box-sizing: content-box !important;box-shadow: 0 0 4px rgba(0,0,0,0.15);
            cursor: text;overflow: visible !important;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.store('menu', {
                visible: false,
                x: 0,
                y: 0,
                targetEl: null,
                sel: null,

                items: [
                    {label: 'Student Name', value: '{student_name}'},
                    {label: 'Course Title', value: '{course_title}'},
                    {label: 'Teacher Name', value: '{teacher_name}'},
                    {label: 'Date', value: '{date}'},
                ],

                show(event, el) {
                    event.preventDefault();
                    const editor = document.getElementById('editor-container');
                    const rect = editor.getBoundingClientRect();
                    // Compute POSITION RELATIVE TO EDITOR
                    this.x = event.clientX - rect.left;
                    this.y = event.clientY - rect.top;
                    this.visible = true;
                    this.targetEl = el;
                    this.sel = saveSelection();
                },

                hide() {
                    this.visible = false;
                    this.targetEl = null;
                },
                insert(item) {
                    if (!this.targetEl) return;

                    // keep editable
                    this.targetEl.setAttribute('contenteditable', 'true');
                    this.targetEl.focus();

                    const sel = window.getSelection();
                    if (!sel.rangeCount) return;
                    const range = sel.getRangeAt(0);
                    range.deleteContents();
                    const textNode = document.createTextNode(item.value);
                    range.insertNode(textNode);
                    range.setStartAfter(textNode);
                    range.collapse(true);
                    sel.removeAllRanges();
                    sel.addRange(range);
                    this.hide();
                }
            });
        });
        function saveSelection() {
            if (window.getSelection)
                return window.getSelection().getRangeAt(0);
            return null;
        }
        function restoreSelection(range) {
            if (!range) return;
            const selection = window.getSelection();
            selection.removeAllRanges();
            selection.addRange(range);
        }
        
        interact('.resize-drag')
        .resizable({
            ignoreFrom: '.no-drag, .draggable-only',
            listeners: {    
                move (event) {
                    var target = event.target
                    var x = (parseFloat(target.getAttribute('data-x')) || 0)
                    var y = (parseFloat(target.getAttribute('data-y')) || 0)
                    target.style.width = event.rect.width + 'px'
                    target.style.height = event.rect.height + 'px'
                    x += event.deltaRect.left
                    y += event.deltaRect.top
                    target.style.transform = 'translate(' + x + 'px,' + y + 'px)'
                    target.setAttribute('data-x', x)
                    target.setAttribute('data-y', y)
                },
                end(event) {
                    const el = event.target;
                    el.dispatchEvent(new CustomEvent('resize-ended', {
                        bubbles: true,
                        detail: {
                            x: el.getAttribute('data-x'),
                            y: el.getAttribute('data-y'),
                            width: el.style.width,
                            height: el.style.height,
                            id: el.id
                        }
                    }));
                }
            },
            modifiers: [
                interact.modifiers.restrictEdges({outer: 'parent'}),
                interact.modifiers.restrictSize({ max: 'parent' }),
            ],
            inertia: true,
            edges: { left: true, right: true, bottom: true, top: true },
        })
        .draggable({
            ignoreFrom: '.no-drag',
            listeners: { 
                move(event){
                    var target = event.target
                    var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
                    var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
                    target.style.transform = 'translate(' + x + 'px, ' + y + 'px)'
                    target.setAttribute('data-x', x)
                    target.setAttribute('data-y', y)
                },
                end(event) {
                const el = event.target;
                el.dispatchEvent(new CustomEvent('drag-ended', {
                    bubbles: true,
                    detail: {
                        x: el.getAttribute('data-x'),
                        y: el.getAttribute('data-y'),
                        width: el.style.width,
                        height: el.style.height,
                        id: el.id
                    }
                }));
            }
             },
             modifiers: [
                interact.modifiers.restrictRect({restriction: 'parent',}),
                interact.modifiers.restrictSize({ max: 'parent' }),
            ],
            inertia: true,
            edges: { left: true, right: true, bottom: true, top: true },
        })
    </script>
</div>