{{-- Template Form Partial - With Quill.js Rich Text Editor --}}

{{-- Quill CSS --}}
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet">
<style>
    .ql-editor { min-height: 420px; font-family: 'DM Sans', sans-serif; font-size: 14px; line-height: 1.7; color: #334155; }
    .ql-editor p { margin-bottom: 0.75em; }
    .ql-toolbar.ql-snow { border-radius: 8px 8px 0 0; border-color: #CBD5E1; background: #F8FAFC; }
    .ql-container.ql-snow { border-radius: 0 0 8px 8px; border-color: #CBD5E1; }
    .ql-editor.ql-blank::before { color: #94A3B8; font-style: normal; }
    /* Image resize styles */
    .ql-editor img { cursor: pointer; max-width: 100%; }
    .ql-editor img.selected-image { outline: 2px solid #2563EB; outline-offset: 2px; }
    .image-resize-bar { position: absolute; z-index: 10; background: white; border: 1px solid #E2E8F0; border-radius: 8px; padding: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); display: flex; gap: 2px; }
    .image-resize-bar button { padding: 4px 10px; font-size: 11px; border-radius: 4px; border: 1px solid #E2E8F0; background: white; cursor: pointer; font-family: 'DM Sans', sans-serif; color: #475569; transition: all 0.15s; }
    .image-resize-bar button:hover { background: #EFF6FF; color: #2563EB; border-color: #2563EB; }
    .image-resize-bar button.active { background: #2563EB; color: white; border-color: #2563EB; }
</style>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6" x-data="templateEditor()" x-init="initQuill()">
    {{-- Left: Form Fields + Editor --}}
    <div class="lg:col-span-2 space-y-5">

        {{-- Top Bar: Category, Name, Preview Button --}}
        <div class="flex items-end gap-4 flex-wrap">
            <div class="flex-1 min-w-[180px]">
                <label class="form-label">Category <span class="text-danger-500">*</span></label>
                <select name="category" class="form-select" required>
                    <option value="">Select category...</option>
                    @foreach($categories as $key => $label)
                    <option value="{{ $key }}" {{ old('category', $template->category ?? '') === $key ? 'selected' : '' }}>
                        {{ $label }}
                    </option>
                    @endforeach
                </select>
                @error('category') <p class="form-error">{{ $message }}</p> @enderror
            </div>
            <div class="flex-1 min-w-[180px]">
                <label class="form-label">Template Name <span class="text-danger-500">*</span></label>
                <input type="text" name="name" class="form-input" placeholder="e.g., Standard Offer Letter"
                       value="{{ old('name', $template->name ?? '') }}" required>
                @error('name') <p class="form-error">{{ $message }}</p> @enderror
            </div>
            <div class="shrink-0">
                <button type="button" @click="openPreview()" class="btn-secondary h-[42px]">
                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                    Preview
                </button>
            </div>
        </div>

        {{-- Company Assignment (Super Admin Only) --}}
        @if(auth()->user()->role === 'super_admin')
        <div>
            <label class="form-label">Assign To</label>
            <select name="company_id" class="form-select">
                <option value="">Global (All Companies)</option>
                @foreach(\App\Models\Company::where('status', 'active')->orderBy('name')->get() as $company)
                <option value="{{ $company->id }}" {{ old('company_id', $template->company_id ?? '') == $company->id ? 'selected' : '' }}>
                    {{ $company->name }}
                </option>
                @endforeach
            </select>
            <p class="text-xs text-gray-400 mt-1">Leave as "Global" to make available to all companies, or select a specific company.</p>
            @error('company_id') <p class="form-error">{{ $message }}</p> @enderror
        </div>
        @endif

        {{-- Quill Rich Text Editor --}}
        <div class="relative">
            <label class="form-label">Template Content <span class="text-danger-500">*</span></label>
            <p class="text-xs text-gray-400 mb-2">Use the formatting toolbar and insert variables from the panel on the right. Click any image to resize it.</p>

            <div id="quillEditorWrap" style="position:relative;">
                <div id="quillEditor">{!! old('content', $template->content ?? '') !!}</div>
                {{-- Image resize toolbar (shown when image is clicked) --}}
                <div id="imageResizeBar" class="image-resize-bar" style="display:none;">
                    <button type="button" onclick="resizeSelectedImage('25%')">25%</button>
                    <button type="button" onclick="resizeSelectedImage('50%')">50%</button>
                    <button type="button" onclick="resizeSelectedImage('75%')">75%</button>
                    <button type="button" onclick="resizeSelectedImage('100%')">100%</button>
                    <button type="button" onclick="resizeSelectedImage('200px')">Small</button>
                    <button type="button" onclick="resizeSelectedImage('400px')">Medium</button>
                </div>
            </div>
            <textarea name="content" id="templateContent" class="hidden" required>{{ old('content', $template->content ?? '') }}</textarea>
            @error('content') <p class="form-error">{{ $message }}</p> @enderror
        </div>

        {{-- Active Toggle --}}
        @if(isset($template))
        <label class="flex items-center gap-2">
            <input type="checkbox" name="is_active" value="1"
                   {{ old('is_active', $template->is_active) ? 'checked' : '' }}
                   class="w-4 h-4 rounded border-gray-300 text-primary-600 focus:ring-primary-600">
            <span class="text-sm text-gray-700">Template is active</span>
        </label>
        @endif
    </div>

    {{-- Right: Variable Toolbar --}}
    <div class="space-y-4">
        <div class="card sticky top-5">
            <div class="card-header">
                <h3 class="card-header-title text-base">Insert Variable</h3>
            </div>
            <div class="card-body p-0">
                @foreach($variables as $group => $vars)
                <div x-data="{ open: {{ $loop->first ? 'true' : 'false' }} }" class="border-b border-gray-100 last:border-b-0">
                    <button @click="open = !open" type="button"
                            class="w-full flex items-center justify-between px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50">
                        <span class="capitalize">{{ $group }}</span>
                        <svg :class="open ? 'rotate-180' : ''" class="w-4 h-4 text-gray-400 transition-transform" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
                    </button>
                    <div x-show="open" x-collapse class="px-4 pb-3">
                        <div class="space-y-1">
                            @foreach($vars as $key => $label)
                            <button type="button"
                                    @click="insertVariable('{{ $key }}')"
                                    class="w-full text-left px-2.5 py-1.5 text-xs rounded-md hover:bg-primary-50 hover:text-primary-600 transition-colors group flex items-center justify-between">
                                <span class="text-gray-600 group-hover:text-primary-600">{{ $label }}</span>
                                <code class="text-xxs text-gray-400 group-hover:text-primary-500 font-mono">&#123;&#123;{{ $key }}&#125;&#125;</code>
                            </button>
                            @endforeach
                        </div>
                    </div>
                </div>
                @endforeach

                {{-- Custom Variable --}}
                <div class="px-4 py-3 bg-gray-50">
                    <p class="text-xs font-medium text-gray-600 mb-2">Custom Variable</p>
                    <div class="flex gap-2">
                        <input type="text" x-model="customVar" placeholder="e.g., purpose"
                               class="form-input text-xs py-1.5" @keydown.enter.prevent="insertCustomVariable()">
                        <button type="button" @click="insertCustomVariable()" class="btn-secondary text-xs py-1.5 px-3">Add</button>
                    </div>
                    <p class="text-xxs text-gray-400 mt-1">Custom variables will be filled at generation time.</p>
                </div>
            </div>
        </div>

        {{-- Tips --}}
        <div class="card">
            <div class="card-body">
                <h4 class="text-xs font-semibold text-gray-700 mb-2">Tips</h4>
                <ul class="text-xs text-gray-500 space-y-1.5">
                    <li class="flex items-start gap-1.5">
                        <svg class="w-3.5 h-3.5 text-primary-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                        Click variables on the right to insert at cursor
                    </li>
                    <li class="flex items-start gap-1.5">
                        <svg class="w-3.5 h-3.5 text-primary-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                        Use toolbar for headings, bold, lists, alignment
                    </li>
                    <li class="flex items-start gap-1.5">
                        <svg class="w-3.5 h-3.5 text-primary-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                        Click an image to show the resize toolbar
                    </li>
                    <li class="flex items-start gap-1.5">
                        <svg class="w-3.5 h-3.5 text-primary-500 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                        Preview button shows variables filled with sample data
                    </li>
                </ul>
            </div>
        </div>
    </div>

    {{-- ══ Preview Modal ══ --}}
    <div x-show="showPreview" x-cloak class="modal-backdrop" @click.self="showPreview = false" @keydown.escape.window="showPreview = false" style="z-index:60;">
        <div class="bg-white rounded-2xl w-[95%] max-w-3xl max-h-[90vh] shadow-xl animate-modal-in flex flex-col">
            {{-- Modal Header --}}
            <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between shrink-0">
                <div>
                    <h2 class="font-display text-lg font-semibold text-gray-900">Template Preview</h2>
                    <p class="text-xs text-gray-500 mt-0.5">Variables are filled with sample data</p>
                </div>
                <button type="button" @click="showPreview = false" class="btn-icon">
                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
            </div>
            {{-- Modal Body --}}
            <div class="px-6 py-5 overflow-y-auto flex-1">
                {{-- Legend --}}
                <div class="flex items-center gap-4 mb-4 pb-4 border-b border-gray-100">
                    <span class="flex items-center gap-1.5 text-xs text-gray-500">
                        <span style="background:#DBEAFE;color:#1D4ED8;padding:1px 6px;border-radius:3px;font-size:11px;">Resolved</span>
                        Filled with sample data
                    </span>
                    <span class="flex items-center gap-1.5 text-xs text-gray-500">
                        <span style="background:#FEF3C7;color:#B45309;padding:1px 6px;border-radius:3px;font-size:11px;">Unresolved</span>
                        Unknown / custom variable
                    </span>
                </div>
                {{-- Rendered Content --}}
                <div class="prose prose-sm max-w-none text-gray-700" x-html="previewContent"></div>
            </div>
            {{-- Modal Footer --}}
            <div class="px-6 py-4 border-t border-gray-100 flex justify-end shrink-0">
                <button type="button" @click="showPreview = false" class="btn-secondary">Close Preview</button>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
<script>
var _quill = null;
var _selectedImage = null;

// ── Image Resize Functions ──
function resizeSelectedImage(size) {
    if (!_selectedImage) return;
    _selectedImage.style.width = size;
    _selectedImage.style.height = 'auto';
    // Update active button
    document.querySelectorAll('#imageResizeBar button').forEach(function(btn) {
        btn.classList.remove('active');
        if (btn.textContent.trim() === size || (btn.textContent.trim() === 'Small' && size === '200px') || (btn.textContent.trim() === 'Medium' && size === '400px')) {
            btn.classList.add('active');
        }
    });
    // Sync to textarea
    document.getElementById('templateContent').value = _quill.root.innerHTML;
}

function showImageResizeBar(img) {
    // Deselect previous
    if (_selectedImage) _selectedImage.classList.remove('selected-image');
    _selectedImage = img;
    img.classList.add('selected-image');

    var bar = document.getElementById('imageResizeBar');
    var wrap = document.getElementById('quillEditorWrap');
    var wrapRect = wrap.getBoundingClientRect();
    var imgRect = img.getBoundingClientRect();

    bar.style.display = 'flex';
    bar.style.top = (imgRect.top - wrapRect.top - 40) + 'px';
    bar.style.left = (imgRect.left - wrapRect.left) + 'px';
}

function hideImageResizeBar() {
    var bar = document.getElementById('imageResizeBar');
    bar.style.display = 'none';
    if (_selectedImage) {
        _selectedImage.classList.remove('selected-image');
        _selectedImage = null;
    }
}

// ── Main Editor ──
function templateEditor() {
    return {
        customVar: '',
        showPreview: false,
        previewContent: '',
        sampleData: @json($sampleData),

        initQuill() {
            _quill = new Quill('#quillEditor', {
                theme: 'snow',
                placeholder: 'Write your letter template here...',
                modules: {
                    toolbar: [
                        [{ 'header': [1, 2, 3, false] }],
                        ['bold', 'italic', 'underline', 'strike'],
                        [{ 'color': [] }, { 'background': [] }],
                        [{ 'align': [] }],
                        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                        [{ 'indent': '-1'}, { 'indent': '+1' }],
                        ['blockquote'],
                        ['link', 'image'],
                        [{ 'direction': 'rtl' }],
                        ['clean']
                    ]
                }
            });

            // Sync to hidden textarea
            _quill.on('text-change', function() {
                document.getElementById('templateContent').value = _quill.root.innerHTML;
            });

            // Image click handler for resize
            _quill.root.addEventListener('click', function(e) {
                if (e.target.tagName === 'IMG') {
                    e.preventDefault();
                    e.stopPropagation();
                    showImageResizeBar(e.target);
                } else {
                    hideImageResizeBar();
                }
            });

            // Hide resize bar when clicking outside editor
            document.addEventListener('click', function(e) {
                if (!e.target.closest('#quillEditorWrap') && !e.target.closest('#imageResizeBar')) {
                    hideImageResizeBar();
                }
            });

            // Sync before form submit
            var form = document.querySelector('form');
            if (form) {
                form.addEventListener('submit', function() {
                    document.getElementById('templateContent').value = _quill.root.innerHTML;
                });
            }
        },

        insertVariable(key) {
            if (!_quill) return;
            var range = _quill.getSelection(true);
            var varText = '{{' + key + '}}';
            _quill.insertText(range.index, varText, {
                'color': '#2563EB',
                'background': '#EFF6FF'
            });
            _quill.setSelection(range.index + varText.length);
            document.getElementById('templateContent').value = _quill.root.innerHTML;
        },

        insertCustomVariable() {
            if (!this.customVar.trim()) return;
            var key = 'custom.' + this.customVar.trim().replace(/\s+/g, '_').toLowerCase();
            this.insertVariable(key);
            this.customVar = '';
        },

        openPreview() {
            this.updatePreview();
            this.showPreview = true;
        },

        updatePreview() {
            if (!_quill) return;
            var content = _quill.root.innerHTML;
            var self = this;
            Object.keys(this.sampleData).forEach(function(key) {
                var escaped = key.replace(/\./g, '\\.');
                var re = new RegExp('\\{\\{' + escaped + '\\}\\}', 'g');
                content = content.replace(re, '<mark style="background:#DBEAFE;color:#1D4ED8;padding:1px 6px;border-radius:4px;font-size:13px;">' + self.sampleData[key] + '</mark>');
            });
            content = content.replace(/\{\{([^}]+)\}\}/g, '<mark style="background:#FEF3C7;color:#B45309;padding:1px 6px;border-radius:4px;font-size:13px;">$1</mark>');
            this.previewContent = content;
        }
    }
}
</script>