@extends('layouts.portal')

@section('title', 'Edit Template')
@section('page_title', 'Document Templates')
@section('page_subtitle', 'Edit: ' . $template->name)

@section('sidebar')
    @include('admin.partials.sidebar', ['active' => 'templates'])
@endsection

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.snow.css" rel="stylesheet">
<style>
    .section-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 16px; overflow: hidden; }
    .section-card-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #faf7f5; border-bottom: 1px solid #e5e7eb; }
    .drag-handle { cursor: grab; color: #9ca3af; padding: 4px; }
    .drag-handle:active { cursor: grabbing; }
    .section-card-body { padding: 16px; }
    .section-card.collapsed .section-card-body { display: none; }
    .ql-editor { min-height: 140px; font-family: 'Times New Roman', Times, serif; font-size: 12pt; }
    .sec-toolbar.ql-toolbar.ql-snow { border-radius: 8px 8px 0 0; background: #fafafa; }
    .sec-editor.ql-container.ql-snow { border-radius: 0 0 8px 8px; }
    .ql-insert-table, .ql-insert-pagebreak { width: 28px; }
    .placeholder-select { font-size: 12px; padding: 4px 8px; border: 1px solid #d1d5db; border-radius: 6px; max-width: 260px; }
    .style-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e5e7eb; }
    .style-row label { font-size: 11px; color: #6b7280; display: block; margin-bottom: 2px; }
    .style-row select, .style-row input { width: 100%; font-size: 12px; padding: 4px 6px; border: 1px solid #d1d5db; border-radius: 6px; }
</style>
@endpush

@section('content')
    <div class="mb-6 flex items-center justify-between flex-wrap gap-3">
        <div>
            <h2 class="text-xl font-bold text-gray-800">{{ $template->name }}</h2>
            <p class="text-sm text-gray-500">{{ \App\Models\WillTemplate::getTypes()[$template->type] ?? $template->type }} &middot; v{{ $template->version }}</p>
        </div>
        <div class="flex gap-2">
            <a href="{{ route('admin.templates.preview', $template) }}" target="_blank" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 text-sm font-medium">
                <i class="fas fa-eye mr-1"></i> Preview
            </a>
            <a href="{{ route('admin.templates') }}" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 text-sm font-medium">
                Back
            </a>
        </div>
    </div>

    @if(session('success'))
        <div class="mb-6 p-4 bg-green-50 border border-green-200 text-green-800 rounded-lg">{{ session('success') }}</div>
    @endif

    <form id="template-form" action="{{ route('admin.templates.update', $template) }}" method="POST">
        @csrf
        @method('PUT')

        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Template Name</label>
                    <input type="text" name="name" value="{{ $template->name }}" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#772B10] outline-none">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Description</label>
                    <input type="text" name="description" value="{{ $template->description }}" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#772B10] outline-none">
                </div>
            </div>
            <div class="flex gap-6">
                <label class="flex items-center text-sm text-gray-700">
                    <input type="checkbox" name="is_active" value="1" {{ $template->is_active ? 'checked' : '' }} class="mr-2"> Active
                </label>
                <label class="flex items-center text-sm text-gray-700">
                    <input type="checkbox" name="is_default" value="1" {{ $template->is_default ? 'checked' : '' }} class="mr-2">
                    Default (this is the version used to generate live documents of this type)
                </label>
            </div>

            <div class="style-row mt-4" style="grid-template-columns: repeat(4, 1fr);">
                <div>
                    <label>Page Font</label>
                    <select id="gs-font-family">
                        <option value="'Times New Roman', Times, serif" {{ ($template->global_styles['page_font_family'] ?? '') === "'Times New Roman', Times, serif" ? 'selected' : '' }}>Times New Roman</option>
                        <option value="Arial, sans-serif" {{ ($template->global_styles['page_font_family'] ?? '') === 'Arial, sans-serif' ? 'selected' : '' }}>Arial</option>
                        <option value="Georgia, serif" {{ ($template->global_styles['page_font_family'] ?? '') === 'Georgia, serif' ? 'selected' : '' }}>Georgia</option>
                    </select>
                </div>
                <div>
                    <label>Page Font Size</label>
                    <select id="gs-font-size">
                        @foreach(['10pt','11pt','12pt','13pt','14pt'] as $sz)
                            <option value="{{ $sz }}" {{ ($template->global_styles['page_font_size'] ?? '12pt') === $sz ? 'selected' : '' }}>{{ $sz }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label>Line Height</label>
                    <select id="gs-line-height">
                        @foreach(['1.5','1.8','2','2.2'] as $lh)
                            <option value="{{ $lh }}" {{ ($template->global_styles['line_height'] ?? '2') === $lh ? 'selected' : '' }}>{{ $lh }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label>Heading Color</label>
                    <input type="color" id="gs-heading-color" value="{{ $template->global_styles['heading_color'] ?? '#772B10' }}">
                </div>
            </div>
        </div>

        <div id="sections-list"></div>

        <button type="button" id="add-section-btn" class="w-full py-3 border-2 border-dashed border-gray-300 rounded-xl text-gray-500 hover:border-[#772B10] hover:text-[#772B10] font-medium mb-6">
            <i class="fas fa-plus mr-2"></i>Add Section
        </button>

        <input type="hidden" name="sections" id="sections-input">
        <input type="hidden" name="global_styles" id="global-styles-input">

        <div class="flex gap-4 sticky bottom-4">
            <button type="submit" class="bg-[#772B10] text-white px-8 py-3 rounded-lg font-medium hover:bg-[#8B3D15] shadow-lg">
                <i class="fas fa-save mr-2"></i> Save Template
            </button>
        </div>
    </form>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script>
<script>
(function () {
    const initialSections = @json($template->sections ?? []);
    const placeholders = @json($placeholders);
    const visibilityConditions = @json($visibilityConditions);

    // Use STYLE-based attributors (inline CSS) instead of Quill's default CSS-class
    // attributors for font/size/align/color/background. Class-based formats (ql-font-*,
    // ql-size-*, ql-align-*) only render correctly inside this editor page, which loads
    // Quill's stylesheet — the saved content_html is echoed on Admin/Staff/Lawyer/Agent/
    // Client pages and inside the PDF, none of which load Quill's CSS. Inline styles are
    // self-contained and render identically everywhere.
    const FontStyle = Quill.import('attributors/style/font');
    FontStyle.whitelist = ["Times New Roman", "Arial", "Georgia", "Courier New"];
    Quill.register(FontStyle, true);

    const SizeStyle = Quill.import('attributors/style/size');
    SizeStyle.whitelist = ['10pt', '11pt', '12pt', '14pt', '16pt', '18pt', '24pt'];
    Quill.register(SizeStyle, true);

    Quill.register(Quill.import('attributors/style/align'), true);
    Quill.register(Quill.import('attributors/style/color'), true);
    Quill.register(Quill.import('attributors/style/background'), true);

    const list = document.getElementById('sections-list');
    const quillInstances = {};
    let seq = 0;

    function visibilityLabel(v) {
        return v.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
    }

    function placeholderOptions() {
        let html = '<option value="">Insert placeholder&hellip;</option>';
        let group = null;
        placeholders.forEach(p => {
            if (p.group !== group) {
                if (group !== null) html += '</optgroup>';
                html += `<optgroup label="${p.group}">`;
                group = p.group;
            }
            html += `<option value="${p.token}">${p.label} (${p.token})</option>`;
        });
        if (group !== null) html += '</optgroup>';
        return html;
    }

    function addSectionCard(section, insertBefore = null) {
        seq++;
        const uid = 'q' + seq;
        const card = document.createElement('div');
        card.className = 'section-card';
        card.dataset.id = section.id;

        card.innerHTML = `
            <div class="section-card-header">
                <span class="drag-handle"><i class="fas fa-grip-vertical"></i></span>
                <input type="text" class="sec-title flex-1 px-2 py-1 border border-gray-200 rounded text-sm font-semibold" placeholder="Section heading (leave blank for none)" value="${(section.title || '').replace(/"/g, '&quot;')}">
                <label class="text-xs text-gray-500 flex items-center gap-1"><input type="checkbox" class="sec-show-title" ${section.show_title ? 'checked' : ''}> Show heading</label>
                <select class="sec-visibility text-xs border border-gray-200 rounded px-2 py-1">
                    <option value="">Always show</option>
                    ${visibilityConditions.map(v => `<option value="${v}" ${section.visibility_condition === v ? 'selected' : ''}>Show only if: ${visibilityLabel(v)}</option>`).join('')}
                </select>
                <select class="sec-placeholder placeholder-select">${placeholderOptions()}</select>
                <button type="button" class="collapse-btn text-gray-400 hover:text-gray-700 px-2"><i class="fas fa-chevron-up"></i></button>
                <button type="button" class="delete-btn text-red-400 hover:text-red-600 px-2"><i class="fas fa-trash"></i></button>
            </div>
            <div class="section-card-body">
                <div class="sec-toolbar"></div>
                <div class="sec-editor" id="editor-${uid}"></div>
                <div class="style-row">
                    <div>
                        <label>Alignment</label>
                        <select class="sec-align">
                            <option value="" ${!section.style?.align ? 'selected' : ''}>Default</option>
                            <option value="left" ${section.style?.align === 'left' ? 'selected' : ''}>Left</option>
                            <option value="justify" ${section.style?.align === 'justify' ? 'selected' : ''}>Justify</option>
                            <option value="center" ${section.style?.align === 'center' ? 'selected' : ''}>Center</option>
                        </select>
                    </div>
                    <div>
                        <label>Font Size</label>
                        <select class="sec-font-size">
                            <option value="" ${!section.style?.font_size ? 'selected' : ''}>Default</option>
                            ${['10pt','11pt','12pt','14pt','16pt'].map(s => `<option value="${s}" ${section.style?.font_size === s ? 'selected' : ''}>${s}</option>`).join('')}
                        </select>
                    </div>
                    <div>
                        <label>Text Color</label>
                        <input type="color" class="sec-color" value="${section.style?.text_color || '#000000'}">
                    </div>
                    <div>
                        <label>Section Type</label>
                        <select class="sec-type">
                            ${['clause','heading','paragraph','table','signature_block','page_break'].map(t => `<option value="${t}" ${section.type === t ? 'selected' : ''}>${t}</option>`).join('')}
                        </select>
                    </div>
                </div>
            </div>
        `;

        if (insertBefore) {
            list.insertBefore(card, insertBefore);
        } else {
            list.appendChild(card);
        }

        const toolbarId = 'toolbar-' + uid;
        const toolbarEl = card.querySelector('.sec-toolbar');
        toolbarEl.id = toolbarId;
        toolbarEl.innerHTML = `
            <select class="ql-font">
                <option value="Times New Roman" selected>Times New Roman</option>
                <option value="Arial">Arial</option>
                <option value="Georgia">Georgia</option>
                <option value="Courier New">Courier New</option>
            </select>
            <select class="ql-size">
                <option value="10pt">10pt</option>
                <option value="11pt">11pt</option>
                <option value="12pt" selected>12pt</option>
                <option value="14pt">14pt</option>
                <option value="16pt">16pt</option>
                <option value="18pt">18pt</option>
                <option value="24pt">24pt</option>
            </select>
            <select class="ql-header">
                <option value="">Paragraph</option>
                <option value="1">Heading 1</option>
                <option value="2">Heading 2</option>
                <option value="3">Heading 3</option>
            </select>
            <button class="ql-bold"></button>
            <button class="ql-italic"></button>
            <button class="ql-underline"></button>
            <button class="ql-strike"></button>
            <select class="ql-color"></select>
            <select class="ql-background"></select>
            <select class="ql-align"></select>
            <button class="ql-list" value="ordered"></button>
            <button class="ql-list" value="bullet"></button>
            <button class="ql-link"></button>
            <button class="ql-blockquote"></button>
            <button type="button" class="ql-insert-table" title="Insert table"><i class="fas fa-table"></i></button>
            <button type="button" class="ql-insert-pagebreak" title="Insert page break"><i class="fas fa-file-export"></i></button>
            <button class="ql-clean"></button>
        `;

        const quill = new Quill(card.querySelector('.sec-editor'), {
            theme: 'snow',
            modules: {
                toolbar: { container: '#' + toolbarId },
            },
        });
        // Must use dangerouslyPasteHTML (not quill.root.innerHTML = ...) to set initial
        // content: setting innerHTML directly bypasses Quill's Delta model, so its
        // background Scroll/optimize sync later overwrites the DOM back to whatever
        // (empty) Delta it still has internally, silently wiping content nobody clicked
        // into. dangerouslyPasteHTML runs the HTML through Quill's own parser so the
        // Delta and DOM stay in sync from the start.
        quill.clipboard.dangerouslyPasteHTML(section.content_html && section.content_html.trim() ? section.content_html : '<p><br></p>');
        quillInstances[section.id] = quill;

        toolbarEl.querySelector('.ql-insert-table').addEventListener('click', function () {
            quill.focus();
            const range = quill.getSelection(true) || { index: quill.getLength(), length: 0 };
            const tableHtml = '<table><tbody>'
                + Array.from({ length: 3 }).map(() => '<tr>' + Array.from({ length: 3 }).map(() => '<td>&nbsp;</td>').join('') + '</tr>').join('')
                + '</tbody></table><p><br></p>';
            quill.clipboard.dangerouslyPasteHTML(range.index, tableHtml);
        });

        toolbarEl.querySelector('.ql-insert-pagebreak').addEventListener('click', function () {
            const idx = Array.from(list.children).indexOf(card);
            addSectionCard({
                id: 'sec_new_' + Date.now(),
                order: 0,
                type: 'page_break',
                title: null,
                show_title: false,
                content_html: '',
                visibility_condition: null,
                style: {},
            }, card.nextSibling);
        });

        card.querySelector('.sec-placeholder').addEventListener('change', function () {
            const token = this.value;
            if (!token) return;
            quill.focus();
            const range = quill.getSelection(true) || { index: quill.getLength(), length: 0 };
            quill.insertText(range.index, token, token.startsWith('[[') ? { background: '#fff3cd' } : {});
            quill.setSelection(range.index + token.length, 0);
            this.value = '';
        });

        card.querySelector('.collapse-btn').addEventListener('click', function () {
            card.classList.toggle('collapsed');
            this.querySelector('i').classList.toggle('fa-chevron-up');
            this.querySelector('i').classList.toggle('fa-chevron-down');
        });

        card.querySelector('.delete-btn').addEventListener('click', function () {
            if (!confirm('Remove this section from the template?')) return;
            delete quillInstances[section.id];
            card.remove();
        });
    }

    initialSections.forEach(s => addSectionCard(s));

    document.getElementById('add-section-btn').addEventListener('click', function () {
        addSectionCard({
            id: 'sec_new_' + Date.now(),
            order: 0,
            type: 'clause',
            title: '',
            show_title: true,
            content_html: '<p></p>',
            visibility_condition: null,
            style: {},
        });
    });

    new Sortable(list, { handle: '.drag-handle', animation: 150 });

    document.getElementById('template-form').addEventListener('submit', function () {
        const sections = [];
        list.querySelectorAll('.section-card').forEach((card, index) => {
            const id = card.dataset.id;
            const quill = quillInstances[id];
            sections.push({
                id: id,
                order: index + 1,
                type: card.querySelector('.sec-type').value,
                title: card.querySelector('.sec-title').value,
                show_title: card.querySelector('.sec-show-title').checked,
                content_html: quill ? quill.root.innerHTML : '',
                visibility_condition: card.querySelector('.sec-visibility').value || null,
                style: {
                    align: card.querySelector('.sec-align').value || undefined,
                    font_size: card.querySelector('.sec-font-size').value || undefined,
                    text_color: card.querySelector('.sec-color').value || undefined,
                },
            });
        });
        document.getElementById('sections-input').value = JSON.stringify(sections);
        document.getElementById('global-styles-input').value = JSON.stringify({
            page_font_family: document.getElementById('gs-font-family').value,
            page_font_size: document.getElementById('gs-font-size').value,
            line_height: document.getElementById('gs-line-height').value,
            heading_color: document.getElementById('gs-heading-color').value,
        });
    });
})();
</script>
@endpush