@extends('layouts.dashboard.inface', ['section' => 'contracts'])

@section('extra-styles')
    <style>
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }

        .contract-variable {
            background-color: #e0e7ff;
            color: #4338ca;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: monospace;
            font-weight: 600;
            border: 1px solid #c7d2fe;
            display: inline-block;
        }

        .contract-editor strong>.contract-variable,
        .contract-editor b>.contract-variable {
            font-weight: 700;
        }

        .contract-editor em>.contract-variable,
        .contract-editor i>.contract-variable {
            font-style: italic;
        }

        .contract-editor u>.contract-variable {
            text-decoration: underline;
        }

        .contract-editor {
            outline: none;
            color: #111318;
            font-size: 0.95rem;
            line-height: 1.6;
        }

        .contract-editor:empty::before {
            content: attr(data-placeholder);
            color: #94a3b8;
        }

        .contract-editor p,
        .contract-editor ul,
        .contract-editor ol,
        .contract-editor blockquote,
        .contract-editor table {
            margin: 0 0 16px;
        }

        .contract-editor h1,
        .contract-editor h2,
        .contract-editor h3,
        .contract-editor h4,
        .contract-editor h5,
        .contract-editor h6 {
            margin: 0 0 16px;
            font-weight: 700;
            line-height: 1.3;
        }

        .contract-editor h1 {
            font-size: 1.85rem;
        }

        .contract-editor h2 {
            font-size: 1.45rem;
        }

        .contract-editor h3 {
            font-size: 1.2rem;
        }

        .contract-editor ul,
        .contract-editor ol {
            padding-left: 1.5rem;
        }

        .contract-editor > :last-child {
            margin-bottom: 0;
        }

        .contract-toolbar-button {
            border-radius: 0.5rem;
            padding: 0.375rem;
            color: #111318;
            transition: background-color 150ms ease, color 150ms ease;
        }

        .contract-toolbar-button:hover {
            background-color: #f0f2f4;
        }

        .contract-toolbar-button.is-active {
            background-color: rgba(37, 99, 235, 0.12);
            color: rgb(37 99 235);
        }

        .contract-toolbar-select {
            border-radius: 0.5rem;
            border: 1px solid transparent;
            background-color: transparent;
            padding: 0.375rem 0.625rem;
            font-size: 0.75rem;
            font-weight: 600;
            color: #111318;
            transition: background-color 150ms ease, border-color 150ms ease;
        }

        .contract-toolbar-select:hover {
            background-color: #f0f2f4;
        }

        .contract-toolbar-select:focus {
            border-color: rgba(37, 99, 235, 0.35);
            outline: none;
            box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.2);
        }

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

@section('navbar-buttons')
    <div class="flex items-center gap-3">
        <button id="open-contract-history" type="button"
            class="flex items-center gap-2 rounded-lg bg-[#f0f2f4] px-3 py-1.5 text-sm font-medium text-[#111318] hover:bg-[#e5e7eb] disabled:cursor-not-allowed disabled:opacity-50"
            @disabled(!$selectedTemplate)>
            <span class="material-symbols-outlined text-[18px]">history</span>
            Historial de Versiones
        </button>

        @if ($selectedTemplate)
            <button form="contract-preview-form"
                class="flex items-center gap-2 rounded-lg bg-[#f0f2f4] px-3 py-1.5 text-sm font-medium text-[#111318] hover:bg-[#e5e7eb]">
                <span class="material-symbols-outlined text-[18px]">picture_as_pdf</span>
                Vista Previa PDF
            </button>
        @else
            <button type="button"
                class="flex items-center gap-2 rounded-lg bg-[#f0f2f4] px-3 py-1.5 text-sm font-medium text-[#111318] opacity-50"
                disabled>
                <span class="material-symbols-outlined text-[18px]">picture_as_pdf</span>
                Vista Previa PDF
            </button>
        @endif

        <button form="contract-editor-form"
            class="rounded-lg bg-primary px-4 py-1.5 text-sm font-bold text-white shadow-sm hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50"
            @disabled(!$selectedTemplate)>
            Guardar Plantilla
        </button>
    </div>
@endsection

@section('content')
    @php
        $editorName = old('name', $selectedTemplate['name'] ?? '');
        $editorContent = old('content', $selectedTemplate['content'] ?? '');
        $selectedDevelopmentName = collect($developmentOptions)->firstWhere('id', $selectedDevelopmentId)['name'] ?? null;
        $selectedContractId = $selectedTemplate['id'] ?? null;
        $autoGenerateOnSale = (bool) ($automationSettings['auto_generate_on_sale'] ?? false);
    @endphp

    <div class="flex flex-1 overflow-hidden">
        <div class="w-80 border-r border-[#dbdfe6] bg-white flex flex-col">
            <div class="border-b border-[#dbdfe6] p-4">
                <div class="mb-3 flex items-center justify-between">
                    <h3 class="text-sm font-bold">Variables Dinamicas</h3>
                    <span class="material-symbols-outlined cursor-help text-[#616f89]"
                        title="Haz clic en una variable para insertarla en el documento">info</span>
                </div>
                <form action="{{ route('realEstate.contracts') }}" method="GET" class="mb-3">
                    <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-[#616f89]">
                        Fraccionamiento
                    </label>
                    <select name="development_id"
                        class="w-full rounded-lg border border-[#dbdfe6] bg-[#f0f2f4] px-3 py-2 text-xs focus:border-primary focus:ring-1 focus:ring-primary"
                        onchange="this.form.submit()">
                        @forelse ($developmentOptions as $development)
                            <option value="{{ $development['id'] }}" @selected($development['id'] === $selectedDevelopmentId)>
                                {{ $development['name'] }}
                            </option>
                        @empty
                            <option value="">Sin fraccionamientos</option>
                        @endforelse
                    </select>
                    @if ($selectedContractId)
                        <input type="hidden" name="contract_id" value="{{ $selectedContractId }}">
                    @endif
                </form>
                <div class="relative">
                    <span
                        class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-sm text-[#616f89]">search</span>
                    <input id="contract-variable-search"
                        class="w-full rounded-lg border-none bg-[#f0f2f4] py-1.5 pl-9 text-xs focus:ring-1 focus:ring-primary"
                        placeholder="Buscar variable..." type="text" />
                </div>
            </div>

            <div class="flex-1 overflow-y-auto p-4 flex flex-col gap-6">
                @forelse ($variableGroups as $group)
                    <div class="contract-variable-group">
                        <div class="mb-2 flex items-center gap-2 text-[#616f89]">
                            <span class="material-symbols-outlined text-xs">{{ $group['icon'] }}</span>
                            <span class="text-[10px] font-bold uppercase tracking-widest">{{ $group['title'] }}</span>
                        </div>
                        <div class="flex flex-col gap-2">
                            @foreach ($group['items'] as $item)
                                <button type="button"
                                    class="contract-variable-item group flex items-center justify-between rounded border border-dashed border-[#dbdfe6] bg-[#f6f6f8] p-2 text-left hover:border-primary/50 disabled:cursor-not-allowed disabled:opacity-50"
                                    data-token="{{ $item['token'] }}" data-label="{{ $item['label'] }}"
                                    @disabled(!$selectedTemplate)>
                                    <div class="min-w-0">
                                        <span class="block truncate text-xs font-mono font-medium text-indigo-700">
                                            {{ $item['token'] }}
                                        </span>
                                        <span class="block truncate text-[10px] text-[#616f89]">
                                            {{ $item['label'] }}
                                        </span>
                                    </div>
                                    <span
                                        class="material-symbols-outlined text-sm text-[#616f89] opacity-0 group-hover:opacity-100">add</span>
                                </button>
                            @endforeach
                        </div>
                    </div>
                @empty
                    <div class="rounded-xl border border-dashed border-[#dbdfe6] bg-[#f6f6f8] p-4 text-xs text-[#616f89]">
                        No hay variables configuradas.
                    </div>
                @endforelse
            </div>
        </div>

        <div class="flex-1 overflow-y-auto bg-background-light dark:bg-[#1a212e]">
            <div class="mx-auto max-w-4xl px-8 py-12">
                @if (session('success'))
                    <div class="mb-6 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700">
                        {{ session('success') }}
                    </div>
                @endif

                @if ($errors->any())
                    <div class="mb-6 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
                        {{ $errors->first() }}
                    </div>
                @endif

                @if ($selectedDevelopmentId)
                    <div class="mb-6 rounded-xl border border-[#dbdfe6] bg-white p-4 shadow-sm">
                        <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
                            <div class="max-w-2xl">
                                <p class="text-sm font-semibold text-[#111318]">Generar contrato al crear la venta</p>
                                <p class="mt-1 text-sm text-[#616f89]">
                                    Cuando esta opcion esta habilitada, cada venta nueva guarda un snapshot del contrato disponible para {{ $selectedDevelopmentName }}.
                                </p>
                                <p class="mt-2 text-xs text-[#616f89]">
                                    Ese snapshot se conserva aunque despues edites o archives la plantilla activa del fraccionamiento.
                                </p>
                            </div>

                            <form action="{{ route('realEstate.contracts.settings') }}" method="POST"
                                class="flex items-center gap-3 self-start md:self-center">
                                @csrf
                                <input type="hidden" name="development_id" value="{{ $selectedDevelopmentId }}">
                                @if ($selectedContractId)
                                    <input type="hidden" name="contract_id" value="{{ $selectedContractId }}">
                                @endif
                                <input type="hidden" name="auto_generate_on_sale" value="0">

                                <span
                                    class="rounded-full px-3 py-1 text-[11px] font-bold uppercase tracking-widest {{ $autoGenerateOnSale ? 'bg-emerald-100 text-emerald-700' : 'bg-[#f0f2f4] text-[#616f89]' }}">
                                    {{ $autoGenerateOnSale ? 'Habilitado' : 'Deshabilitado' }}
                                </span>

                                <label class="relative inline-flex cursor-pointer items-center">
                                    <input type="checkbox" name="auto_generate_on_sale" value="1"
                                        class="peer sr-only" onchange="this.form.submit()" @checked($autoGenerateOnSale)>
                                    <span
                                        class="h-7 w-12 rounded-full bg-[#d4dbe6] transition peer-checked:bg-primary"></span>
                                    <span
                                        class="absolute left-1 h-5 w-5 rounded-full bg-white shadow transition peer-checked:translate-x-5"></span>
                                </label>
                            </form>
                        </div>
                    </div>
                @endif

                @if (!$selectedDevelopmentId)
                    <div class="rounded-2xl border border-dashed border-[#dbdfe6] bg-white p-12 text-center shadow-sm">
                        <p class="text-sm font-semibold text-[#111318]">No hay fraccionamientos disponibles</p>
                        <p class="mt-2 text-sm text-[#616f89]">Crea primero un fraccionamiento para administrar plantillas de contrato.</p>
                    </div>
                @elseif (!$selectedTemplate)
                    <div class="rounded-2xl border border-dashed border-[#dbdfe6] bg-white p-12 text-center shadow-sm">
                        <p class="text-sm font-semibold text-[#111318]">Aun no existen plantillas para {{ $selectedDevelopmentName }}</p>
                        <p class="mt-2 text-sm text-[#616f89]">Crea una plantilla base y comienza a editarla desde este panel.</p>
                        <form action="{{ route('realEstate.contracts.store') }}" method="POST" enctype="multipart/form-data"
                            class="mt-6 mx-auto max-w-lg text-left">
                            @csrf
                            <input type="hidden" name="development_id" value="{{ $selectedDevelopmentId }}">
                            <div class="grid gap-4">
                                <div>
                                    <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-[#616f89]">
                                        Nombre de la plantilla
                                    </label>
                                    <input name="name"
                                        class="w-full rounded-lg border border-[#dbdfe6] px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-primary"
                                        placeholder="Contrato base de compraventa" value="{{ old('name') }}" />
                                </div>
                                <div>
                                    <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-[#616f89]">
                                        Importar archivo DOCX
                                    </label>
                                    <input name="template_file" type="file"
                                        accept=".docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                                        class="w-full rounded-lg border border-[#dbdfe6] bg-white px-3 py-2 text-sm file:mr-3 file:rounded-md file:border-0 file:bg-primary/10 file:px-3 file:py-2 file:text-xs file:font-semibold file:text-primary focus:border-primary focus:ring-1 focus:ring-primary" />
                                    <p class="mt-2 text-xs text-[#616f89]">
                                        Opcional. Si cargas un Word, la plantilla se crea con el formato del documento.
                                    </p>
                                </div>
                                <button
                                    class="inline-flex items-center justify-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-bold text-white shadow-sm hover:bg-primary/90">
                                    <span class="material-symbols-outlined text-[18px]">add_circle</span>
                                    Crear primera plantilla
                                </button>
                            </div>
                        </form>
                    </div>
                @else
                    <form id="contract-editor-form"
                        action="{{ route('realEstate.contracts.update', ['contract' => $selectedTemplate['id']]) }}"
                        method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <div class="mb-4 rounded-xl border border-[#dbdfe6] bg-white p-4 shadow-sm">
                            <div class="grid gap-4 md:grid-cols-[minmax(0,1fr)_220px]">
                                <div>
                                    <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-[#616f89]">
                                        Nombre de la plantilla
                                    </label>
                                    <input name="name"
                                        class="w-full rounded-lg border border-[#dbdfe6] px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-primary"
                                        value="{{ $editorName }}" />
                                </div>
                                <div>
                                    <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-[#616f89]">
                                        Fraccionamiento
                                    </label>
                                    <div class="rounded-lg border border-[#dbdfe6] bg-[#f6f6f8] px-3 py-2 text-sm text-[#111318]">
                                        {{ $selectedDevelopmentName }}
                                    </div>
                                </div>
                            </div>
                            <div class="mt-4 grid gap-4 md:grid-cols-[minmax(0,1fr)_minmax(260px,320px)]">
                                <div class="rounded-xl border border-primary/15 bg-primary/5 px-4 py-3 text-xs text-[#42526b]">
                                    <p class="font-semibold text-[#111318]">Importar desde DOCX</p>
                                    <p class="mt-1">
                                        Si cargas un Word y guardas, el contenido actual se reemplaza usando el formato del documento.
                                    </p>
                                    @if (($selectedTemplate['source_type'] ?? null) === 'docx' && !empty($selectedTemplate['source_name']))
                                        <p class="mt-2 font-medium text-primary">
                                            Ultimo DOCX importado: {{ $selectedTemplate['source_name'] }}
                                        </p>
                                    @endif
                                </div>
                                <div>
                                    <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-[#616f89]">
                                        Reemplazar con archivo DOCX
                                    </label>
                                    <input name="template_file" type="file"
                                        accept=".docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                                        class="w-full rounded-lg border border-[#dbdfe6] bg-white px-3 py-2 text-sm file:mr-3 file:rounded-md file:border-0 file:bg-primary/10 file:px-3 file:py-2 file:text-xs file:font-semibold file:text-primary focus:border-primary focus:ring-1 focus:ring-primary" />
                                    <p class="mt-2 text-[11px] text-[#616f89]">
                                        Se aceptan plantillas Word .docx y se conservan alineaciones, estilos y tablas compatibles.
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div
                            class="sticky top-0 z-10 mb-6 flex flex-wrap items-center gap-1 rounded-lg border border-[#dbdfe6] bg-white p-1.5 shadow-sm">
                            <button type="button" data-command="bold"
                                class="contract-toolbar-button" title="Negritas" aria-label="Aplicar negritas">
                                <span class="material-symbols-outlined">format_bold</span>
                            </button>
                            <button type="button" data-command="italic"
                                class="contract-toolbar-button" title="Cursiva" aria-label="Aplicar cursiva">
                                <span class="material-symbols-outlined">format_italic</span>
                            </button>
                            <button type="button" data-command="underline"
                                class="contract-toolbar-button" title="Subrayado" aria-label="Aplicar subrayado">
                                <span class="material-symbols-outlined">format_underlined</span>
                            </button>
                            <div class="mx-1 h-6 w-px bg-[#dbdfe6]"></div>
                            <button type="button" data-align="left"
                                class="contract-toolbar-button" title="Alinear a la izquierda"
                                aria-label="Alinear a la izquierda">
                                <span class="material-symbols-outlined">format_align_left</span>
                            </button>
                            <button type="button" data-align="center"
                                class="contract-toolbar-button" title="Centrar" aria-label="Centrar texto">
                                <span class="material-symbols-outlined">format_align_center</span>
                            </button>
                            <button type="button" data-align="right"
                                class="contract-toolbar-button" title="Alinear a la derecha"
                                aria-label="Alinear a la derecha">
                                <span class="material-symbols-outlined">format_align_right</span>
                            </button>
                            <button type="button" data-align="justify" title="Justificar"
                                aria-label="Justificar parrafo"
                                class="contract-toolbar-button">
                                <span class="material-symbols-outlined">format_align_justify</span>
                            </button>
                            <button type="button" data-command="insertUnorderedList"
                                class="contract-toolbar-button" title="Lista con viñetas"
                                aria-label="Insertar lista con viñetas">
                                <span class="material-symbols-outlined">format_list_bulleted</span>
                            </button>
                            <button type="button" data-command="insertOrderedList"
                                class="contract-toolbar-button" title="Lista numerada"
                                aria-label="Insertar lista numerada">
                                <span class="material-symbols-outlined">format_list_numbered</span>
                            </button>
                            <div class="mx-1 h-6 w-px bg-[#dbdfe6]"></div>
                            <select id="contract-font-family" title="Fuente"
                                aria-label="Seleccionar fuente"
                                class="contract-toolbar-select">
                                <option value="">Tipo de letra</option>
                                <option value="Arial">Arial</option>
                                <option value="Helvetica">Helvetica</option>
                                <option value="Georgia">Georgia</option>
                                <option value="Times New Roman">Times New Roman</option>
                                <option value="Garamond">Garamond</option>
                                <option value="Verdana">Verdana</option>
                                <option value="Courier New">Courier New</option>
                            </select>
                            <select id="contract-block-format"
                                class="contract-toolbar-select" title="Tipo de bloque"
                                aria-label="Seleccionar tipo de bloque">
                                <option value="p">Normal</option>
                                <option value="h1">Titulo principal</option>
                                <option value="h2">Titulo</option>
                                <option value="h3">Subtitulo</option>
                            </select>
                            <select id="contract-line-height"
                                class="contract-toolbar-select" title="Interlineado"
                                aria-label="Seleccionar interlineado">
                                <option value="">Interlineado</option>
                                <option value="1">Sencillo</option>
                                <option value="1.15">1.15</option>
                                <option value="1.5">1.5</option>
                                <option value="2">Doble</option>
                            </select>
                            <select id="contract-paragraph-spacing"
                                class="contract-toolbar-select" title="Espacio entre parrafos"
                                aria-label="Seleccionar espacio entre parrafos">
                                <option value="">Espacio parrafo</option>
                                <option value="0">Sin espacio</option>
                                <option value="8">Compacto</option>
                                <option value="16">Normal</option>
                                <option value="24">Amplio</option>
                                <option value="32">Muy amplio</option>
                            </select>
                        </div>

                        <div class="rounded-sm border border-[#dbdfe6] bg-white p-20 shadow-xl">
                            <div id="contract-editor" class="contract-editor min-h-[1056px]"
                                contenteditable="true"
                                data-placeholder="Escribe aqui la plantilla del contrato o inserta variables desde la barra lateral.">{!! $editorContent !!}</div>
                        </div>

                        <textarea id="contract-editor-content" name="content" class="hidden">{{ $editorContent }}</textarea>
                    </form>

                    <form id="contract-preview-form"
                        action="{{ route('realEstate.contracts.preview', ['contract' => $selectedTemplate['id']]) }}"
                        method="POST" target="_blank" class="hidden">
                        @csrf
                        <input id="contract-preview-name" name="name" type="hidden" value="{{ $editorName }}">
                        <textarea id="contract-preview-content" name="content" class="hidden">{{ $editorContent }}</textarea>
                    </form>
                @endif
            </div>
        </div>

        <div class="w-72 shrink-0 border-l border-[#dbdfe6] bg-white flex flex-col">
            <div class="flex items-center justify-between border-b border-[#dbdfe6] p-4">
                <h3 class="text-sm font-bold">Mis Plantillas</h3>
                <form action="{{ route('realEstate.contracts.store') }}" method="POST">
                    @csrf
                    <input type="hidden" name="development_id" value="{{ $selectedDevelopmentId }}">
                    <button class="rounded p-1 text-primary hover:bg-primary/10 disabled:cursor-not-allowed disabled:opacity-50"
                        @disabled(!$selectedDevelopmentId)>
                        <span class="material-symbols-outlined text-lg">add_circle</span>
                    </button>
                </form>
            </div>

            <div class="flex-1 overflow-y-auto">
                @forelse ($templates as $template)
                    @php
                        $statusClass = match ($template['status_tone']) {
                            'success' => 'bg-green-100 text-green-700',
                            'warning' => 'bg-amber-100 text-amber-700',
                            default => 'bg-[#f0f2f4] text-[#616f89]',
                        };
                    @endphp
                    <div
                        class="{{ $template['selected'] ? 'border-l-4 border-primary bg-primary/5' : 'border-b border-[#dbdfe6] hover:bg-[#f6f6f8]' }} p-4">
                        <a class="block" href="{{ route('realEstate.contracts', ['development_id' => $selectedDevelopmentId, 'contract_id' => $template['id']]) }}">
                            <div class="mb-1 flex items-start justify-between gap-3">
                                <span class="text-xs font-bold text-[#111318]">{{ $template['name'] }}</span>
                                <span class="{{ $statusClass }} rounded px-1.5 py-0.5 text-[10px] font-bold uppercase">
                                    {{ $template['status_label'] }}
                                </span>
                            </div>
                            <p class="mb-2 text-[11px] text-[#616f89]">
                                Ultima edicion: {{ $template['updated_label'] ?? 'Sin cambios' }}
                            </p>
                            <p class="text-[11px] text-[#616f89]">{{ $template['excerpt'] ?: 'Sin resumen disponible.' }}</p>
                        </a>
                        <div class="mt-3 flex gap-3">
                            <form action="{{ route('realEstate.contracts.duplicate', ['contract' => $template['id']]) }}" method="POST">
                                @csrf
                                <button class="text-[10px] font-bold text-primary hover:underline">Duplicar</button>
                            </form>
                            <form action="{{ route('realEstate.contracts.archive', ['contract' => $template['id']]) }}" method="POST"
                                onsubmit="return confirm('Esta accion archivara la plantilla seleccionada.');">
                                @csrf
                                @method('DELETE')
                                <button class="text-[10px] font-bold text-red-600 hover:underline">Archivar</button>
                            </form>
                        </div>
                    </div>
                @empty
                    <div class="p-6 text-sm text-[#616f89]">
                        No hay plantillas registradas para este fraccionamiento.
                    </div>
                @endforelse
            </div>

            <div class="border-t border-[#dbdfe6] bg-[#f0f2f4] p-4">
                <div class="flex items-center gap-3">
                    <div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary">
                        <span class="material-symbols-outlined text-lg">description</span>
                    </div>
                    <div class="flex flex-col">
                        <p class="text-xs font-bold">Editor de Contratos</p>
                        <p class="text-[10px] text-[#616f89]">Plantillas por fraccionamiento</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="contract-history-modal"
        class="fixed inset-0 z-50 hidden items-center justify-center bg-slate-950/40 px-4 py-10">
        <div class="w-full max-w-3xl rounded-2xl bg-white shadow-2xl">
            <div class="flex items-center justify-between border-b border-[#dbdfe6] px-6 py-4">
                <div>
                    <h3 class="text-base font-bold text-[#111318]">Historial de Versiones</h3>
                    <p class="text-sm text-[#616f89]">Snapshots guardados de la plantilla seleccionada.</p>
                </div>
                <button id="close-contract-history" type="button"
                    class="rounded p-1 text-[#616f89] hover:bg-[#f0f2f4]">
                    <span class="material-symbols-outlined">close</span>
                </button>
            </div>
            <div class="max-h-[70vh] overflow-y-auto p-6">
                @forelse ($versionHistory as $version)
                    <div class="flex items-start justify-between gap-4 rounded-xl border border-[#dbdfe6] p-4 {{ !$loop->first ? 'mt-3' : '' }}">
                        <div class="min-w-0">
                            <div class="flex items-center gap-2">
                                <span class="rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-bold uppercase text-primary">
                                    {{ $version['action_label'] }}
                                </span>
                                <span class="text-[11px] text-[#616f89]">{{ $version['saved_at_label'] }}</span>
                            </div>
                            <p class="mt-2 text-sm font-semibold text-[#111318]">{{ $version['name'] }}</p>
                            <p class="mt-1 text-xs text-[#616f89]">Guardado por {{ $version['saved_by'] }}</p>
                            <p class="mt-2 text-sm text-[#616f89]">{{ $version['excerpt'] ?: 'Sin resumen disponible.' }}</p>
                        </div>
                        @if ($selectedTemplate)
                            <form action="{{ route('realEstate.contracts.restore', ['contract' => $selectedTemplate['id'], 'versionId' => $version['id']]) }}"
                                method="POST">
                                @csrf
                                <button class="rounded-lg border border-[#dbdfe6] px-3 py-2 text-xs font-bold text-[#111318] hover:bg-[#f6f6f8]">
                                    Restaurar
                                </button>
                            </form>
                        @endif
                    </div>
                @empty
                    <div class="rounded-xl border border-dashed border-[#dbdfe6] bg-[#f6f6f8] p-6 text-sm text-[#616f89]">
                        Aun no hay versiones guardadas para esta plantilla.
                    </div>
                @endforelse
            </div>
        </div>
    </div>
@endsection

@section('extra-scripts')
    <script>
        (() => {
            const editor = document.getElementById('contract-editor');
            const hiddenContent = document.getElementById('contract-editor-content');
            const editorForm = document.getElementById('contract-editor-form');
            const previewForm = document.getElementById('contract-preview-form');
            const previewName = document.getElementById('contract-preview-name');
            const previewContent = document.getElementById('contract-preview-content');
            const nameInput = editorForm?.querySelector('input[name="name"]');
            const searchInput = document.getElementById('contract-variable-search');
            const variableButtons = Array.from(document.querySelectorAll('.contract-variable-item'));
            const toolbarButtons = Array.from(document.querySelectorAll('[data-command]'));
            const alignButtons = Array.from(document.querySelectorAll('[data-align]'));
            const fontFamily = document.getElementById('contract-font-family');
            const blockFormat = document.getElementById('contract-block-format');
            const lineHeight = document.getElementById('contract-line-height');
            const paragraphSpacing = document.getElementById('contract-paragraph-spacing');
            const openHistory = document.getElementById('open-contract-history');
            const closeHistory = document.getElementById('close-contract-history');
            const historyModal = document.getElementById('contract-history-modal');
            const blockSelector = 'p,h1,h2,h3,h4,h5,h6,blockquote,li,td,th';
            const inlineCommandTags = {
                bold: 'strong',
                italic: 'em',
                underline: 'u',
            };
            let savedRange = null;

            const escapeHtml = (value) => value
                .replaceAll('&', '&amp;')
                .replaceAll('<', '&lt;')
                .replaceAll('>', '&gt;')
                .replaceAll('"', '&quot;')
                .replaceAll("'", '&#039;');

            const resolveNode = (node) => {
                if (!(node instanceof Node)) {
                    return null;
                }

                return node.nodeType === Node.TEXT_NODE ? node.parentNode : node;
            };

            const isNodeInsideEditor = (node) => {
                if (!editor) {
                    return false;
                }

                const resolvedNode = resolveNode(node);

                return resolvedNode === editor || editor.contains(resolvedNode);
            };

            const getCurrentRange = () => {
                const selection = window.getSelection();

                if (!selection || selection.rangeCount === 0) {
                    return null;
                }

                const range = selection.getRangeAt(0);

                return isNodeInsideEditor(range.commonAncestorContainer) ? range : null;
            };

            const saveSelection = () => {
                const range = getCurrentRange();

                if (!range) {
                    return;
                }

                savedRange = range.cloneRange();
            };

            const ensureCssCommands = () => {
                if (typeof document.execCommand !== 'function') {
                    return;
                }

                try {
                    document.execCommand('styleWithCSS', false, true);
                } catch (error) {
                    // ignored
                }
            };

            const normalizeFontName = (value) => {
                return String(value || '')
                    .split(',')[0]
                    .replaceAll('"', '')
                    .replaceAll("'", '')
                    .trim()
                    .toLowerCase();
            };

            const restoreSelection = () => {
                if (!editor) {
                    return null;
                }

                const selection = window.getSelection();

                if (!selection) {
                    return null;
                }

                editor.focus();

                if (!savedRange) {
                    return getCurrentRange();
                }

                try {
                    selection.removeAllRanges();
                    selection.addRange(savedRange);
                } catch (error) {
                    savedRange = null;

                    return getCurrentRange();
                }

                return savedRange;
            };

            const selectNode = (node) => {
                if (!editor || !(node instanceof Node)) {
                    return;
                }

                const selection = window.getSelection();

                if (!selection) {
                    return;
                }

                const range = document.createRange();
                range.selectNode(node);
                selection.removeAllRanges();
                selection.addRange(range);
                savedRange = range.cloneRange();
            };

            const replaceElement = (original, replacement) => {
                if (!(original instanceof HTMLElement) || !(replacement instanceof HTMLElement)) {
                    return;
                }

                Array.from(original.attributes).forEach((attribute) => {
                    if (attribute.name === 'face') {
                        return;
                    }

                    if (!replacement.hasAttribute(attribute.name)) {
                        replacement.setAttribute(attribute.name, attribute.value);
                    }
                });

                while (original.firstChild) {
                    replacement.appendChild(original.firstChild);
                }

                original.replaceWith(replacement);
            };

            const normalizeEditorMarkup = () => {
                if (!editor) {
                    return;
                }

                editor.querySelectorAll('font').forEach((node) => {
                    if (!(node instanceof HTMLElement)) {
                        return;
                    }

                    const span = document.createElement('span');
                    const face = node.getAttribute('face');
                    const color = node.getAttribute('color');

                    if (face) {
                        span.style.fontFamily = face;
                    }

                    if (color) {
                        span.style.color = color;
                    }

                    replaceElement(node, span);
                });

                editor.querySelectorAll('.contract-variable').forEach((node) => {
                    if (!(node instanceof HTMLElement)) {
                        return;
                    }

                    node.setAttribute('contenteditable', 'false');
                    node.classList.add('contract-variable');
                });
            };

            const getSelectedVariableNodes = (range = getCurrentRange()) => {
                if (!editor || !range) {
                    return [];
                }

                return Array.from(editor.querySelectorAll('.contract-variable')).filter((node) => {
                    try {
                        return range.intersectsNode(node);
                    } catch (error) {
                        return false;
                    }
                });
            };

            const hasInlineFormat = (node, command) => {
                if (!(node instanceof HTMLElement) || !editor) {
                    return false;
                }

                const tagName = inlineCommandTags[command]?.toUpperCase();
                const alternateTagName = ({
                    bold: 'B',
                    italic: 'I',
                    underline: 'U',
                })[command];

                let current = node.parentElement;

                while (current && current !== editor) {
                    if (current.tagName === tagName || current.tagName === alternateTagName) {
                        return true;
                    }

                    current = current.parentElement;
                }

                return false;
            };

            const wrapVariableNode = (node, tagName) => {
                if (!(node instanceof HTMLElement) || !node.parentNode) {
                    return;
                }

                const wrapper = document.createElement(tagName);
                node.parentNode.insertBefore(wrapper, node);
                wrapper.appendChild(node);
            };

            const unwrapVariableNode = (node, tagName) => {
                if (!(node instanceof HTMLElement) || !editor) {
                    return;
                }

                const resolvedTagName = tagName.toUpperCase();
                let current = node.parentElement;

                while (current && current !== editor) {
                    if (current.tagName === resolvedTagName) {
                        if (current.childNodes.length === 1 && current.firstChild === node && current.parentNode) {
                            current.parentNode.insertBefore(node, current);
                            current.remove();
                        }

                        return;
                    }

                    current = current.parentElement;
                }
            };

            const applyInlineFormatToVariables = (variables, command) => {
                const tagName = inlineCommandTags[command];

                if (!tagName || variables.length === 0) {
                    return;
                }

                const shouldRemove = variables.every((node) => hasInlineFormat(node, command));

                variables.forEach((node) => {
                    if (!(node instanceof HTMLElement)) {
                        return;
                    }

                    if (shouldRemove) {
                        unwrapVariableNode(node, tagName);
                        return;
                    }

                    if (hasInlineFormat(node, command) || !node.parentNode) {
                        return;
                    }

                    wrapVariableNode(node, tagName);
                });
            };

            const applyFontFamilyToVariables = (variables, family) => {
                const resolvedFamily = family.trim();

                if (variables.length === 0 || resolvedFamily === '') {
                    return;
                }

                variables.forEach((node) => {
                    if (!(node instanceof HTMLElement)) {
                        return;
                    }

                    node.style.fontFamily = resolvedFamily;
                });
            };

            const getClosestBlock = (node) => {
                const resolvedNode = resolveNode(node);

                if (!(resolvedNode instanceof Element) || !editor) {
                    return null;
                }

                const block = resolvedNode.closest(blockSelector);

                return block && editor.contains(block) ? block : null;
            };

            const getSelectedBlocks = (range = getCurrentRange()) => {
                if (!editor || !range) {
                    return [];
                }

                const blocks = new Set();
                const currentBlock = getClosestBlock(range.startContainer);

                if (currentBlock) {
                    blocks.add(currentBlock);
                }

                editor.querySelectorAll(blockSelector).forEach((block) => {
                    try {
                        if (range.intersectsNode(block)) {
                            blocks.add(block);
                        }
                    } catch (error) {
                        // ignored
                    }
                });

                return Array.from(blocks).filter((block) => block instanceof HTMLElement);
            };

            const applyStyleToBlocks = (styleName, value) => {
                const restoredRange = restoreSelection();
                const blocks = getSelectedBlocks(restoredRange);

                if (blocks.length === 0) {
                    return;
                }

                blocks.forEach((block) => {
                    if (!(block instanceof HTMLElement)) {
                        return;
                    }

                    if (value === null || value === '') {
                        block.style.removeProperty(styleName);
                    } else {
                        block.style.setProperty(styleName, value);
                    }
                });

                syncContent();
                saveSelection();
                refreshToolbarState();
            };

            const alignToCssValue = {
                left: 'left',
                center: 'center',
                right: 'right',
                justify: 'justify',
            };

            const applyTextAlignment = (alignment) => {
                const cssValue = alignToCssValue[alignment] ?? 'left';
                applyStyleToBlocks('text-align', cssValue);
            };

            const syncContent = () => {
                if (!editor || !hiddenContent) {
                    return;
                }

                normalizeEditorMarkup();

                const content = editor.innerHTML.trim();

                hiddenContent.value = content;

                if (previewContent) {
                    previewContent.value = content;
                }

                if (previewName && nameInput) {
                    previewName.value = nameInput.value.trim();
                }
            };

            const insertToken = (token) => {
                if (!editor) {
                    return;
                }

                restoreSelection();

                const html = `<span class="contract-variable" data-token="${escapeHtml(token)}" contenteditable="false">${escapeHtml(token)}</span>&nbsp;`;

                if (document.queryCommandSupported?.('insertHTML')) {
                    document.execCommand('insertHTML', false, html);
                } else {
                    editor.insertAdjacentHTML('beforeend', html);
                }

                normalizeEditorMarkup();
                syncContent();
                saveSelection();
                refreshToolbarState();
            };

            toolbarButtons.forEach((button) => {
                button.addEventListener('mousedown', (event) => {
                    event.preventDefault();
                });

                button.addEventListener('click', () => {
                    if (!editor) {
                        return;
                    }

                    const command = button.dataset.command;
                    const restoredRange = restoreSelection();
                    const selectedVariables = getSelectedVariableNodes(restoredRange);

                    ensureCssCommands();
                    document.execCommand(command, false, null);
                    applyInlineFormatToVariables(selectedVariables, command);
                    normalizeEditorMarkup();
                    syncContent();
                    saveSelection();
                    refreshToolbarState();
                });
            });

            alignButtons.forEach((button) => {
                button.addEventListener('mousedown', (event) => {
                    event.preventDefault();
                });

                button.addEventListener('click', () => {
                    applyTextAlignment(button.dataset.align || 'left');
                });
            });

            blockFormat?.addEventListener('change', (event) => {
                if (!editor) {
                    return;
                }

                restoreSelection();
                document.execCommand('formatBlock', false, `<${event.target.value}>`);
                normalizeEditorMarkup();
                syncContent();
                saveSelection();
                refreshToolbarState();
            });

            fontFamily?.addEventListener('change', (event) => {
                if (!editor) {
                    return;
                }

                const selectedFamily = event.target.value?.trim() ?? '';

                if (selectedFamily === '') {
                    return;
                }

                const restoredRange = restoreSelection();
                const selectedVariables = getSelectedVariableNodes(restoredRange);

                ensureCssCommands();
                document.execCommand('fontName', false, selectedFamily);
                applyFontFamilyToVariables(selectedVariables, selectedFamily);
                normalizeEditorMarkup();
                syncContent();
                saveSelection();
                refreshToolbarState();
            });

            lineHeight?.addEventListener('change', (event) => {
                const selectedValue = event.target.value?.trim() ?? '';

                if (selectedValue === '') {
                    return;
                }

                applyStyleToBlocks('line-height', selectedValue);
            });

            paragraphSpacing?.addEventListener('change', (event) => {
                const selectedValue = event.target.value?.trim() ?? '';

                if (selectedValue === '') {
                    return;
                }

                applyStyleToBlocks('margin-bottom', `${selectedValue}px`);
            });

            variableButtons.forEach((button) => {
                button.addEventListener('mousedown', (event) => {
                    event.preventDefault();
                });

                button.addEventListener('click', () => insertToken(button.dataset.token || ''));
            });

            searchInput?.addEventListener('input', () => {
                const term = searchInput.value.trim().toLowerCase();

                variableButtons.forEach((button) => {
                    const haystack = `${button.dataset.token || ''} ${button.dataset.label || ''}`.toLowerCase();
                    button.classList.toggle('hidden', term !== '' && !haystack.includes(term));
                });

                document.querySelectorAll('.contract-variable-group').forEach((group) => {
                    const visibleItems = group.querySelectorAll('.contract-variable-item:not(.hidden)');
                    group.classList.toggle('hidden', visibleItems.length === 0);
                });
            });

            editor?.addEventListener('click', (event) => {
                const variable = event.target instanceof Element ? event.target.closest('.contract-variable') : null;

                if (variable) {
                    selectNode(variable);
                    return;
                }

                saveSelection();
            });

            const getCurrentComputedStyle = () => {
                const range = getCurrentRange() ?? savedRange;

                if (!range) {
                    return null;
                }

                const resolvedNode = resolveNode(range.startContainer);
                const element = resolvedNode instanceof Element ? resolvedNode : resolvedNode?.parentElement;

                if (!(element instanceof Element) || !editor || !editor.contains(element)) {
                    return null;
                }

                return window.getComputedStyle(element);
            };

            const resolveSelectValue = (select, value, normalizer = (candidate) => candidate) => {
                if (!(select instanceof HTMLSelectElement)) {
                    return;
                }

                const normalizedValue = normalizer(value ?? '');
                const matchingOption = Array.from(select.options).find((option) => {
                    return normalizer(option.value) === normalizedValue;
                });

                select.value = matchingOption?.value ?? '';
            };

            const refreshToolbarState = () => {
                if (!editor) {
                    return;
                }

                toolbarButtons.forEach((button) => {
                    const command = button.dataset.command;
                    const isActive = ['bold', 'italic', 'underline', 'insertUnorderedList', 'insertOrderedList'].includes(command)
                        ? document.queryCommandState?.(command) ?? false
                        : false;

                    button.classList.toggle('is-active', Boolean(isActive));
                });

                const currentStyle = getCurrentComputedStyle();
                const activeAlignment = currentStyle?.textAlign || 'left';
                const currentBlock = getClosestBlock((getCurrentRange() ?? savedRange)?.startContainer);
                const currentBlockStyle = currentBlock instanceof HTMLElement ? currentBlock.style : null;

                alignButtons.forEach((button) => {
                    const buttonAlignment = button.dataset.align || 'left';
                    const isActive = buttonAlignment === activeAlignment
                        || (buttonAlignment === 'left' && ['start', 'initial'].includes(activeAlignment));

                    button.classList.toggle('is-active', isActive);
                });

                const currentTag = currentBlock?.tagName?.toLowerCase() ?? '';

                if (blockFormat instanceof HTMLSelectElement) {
                    blockFormat.value = ['p', 'h1', 'h2', 'h3'].includes(currentTag) ? currentTag : 'p';
                }

                resolveSelectValue(fontFamily, currentStyle?.fontFamily ?? '', normalizeFontName);
                resolveSelectValue(
                    lineHeight,
                    currentBlockStyle?.lineHeight || currentStyle?.lineHeight || '',
                    (candidate) => {
                        const rawValue = String(candidate).trim();

                        if (rawValue.endsWith('px') && currentStyle?.fontSize) {
                            const lineHeightPixels = parseFloat(rawValue);
                            const fontSizePixels = parseFloat(currentStyle.fontSize);

                            if (Number.isFinite(lineHeightPixels) && Number.isFinite(fontSizePixels) && fontSizePixels > 0) {
                                return Number((lineHeightPixels / fontSizePixels).toFixed(2)).toString();
                            }
                        }

                        return rawValue;
                    }
                );
                resolveSelectValue(paragraphSpacing, currentBlockStyle?.marginBottom || currentStyle?.marginBottom || '', (candidate) => {
                    return String(candidate).replace('px', '').trim();
                });
            };

            editor?.addEventListener('mouseup', saveSelection);
            editor?.addEventListener('keyup', saveSelection);
            editor?.addEventListener('input', () => {
                syncContent();
                saveSelection();
                refreshToolbarState();
            });
            nameInput?.addEventListener('input', syncContent);
            editorForm?.addEventListener('submit', syncContent);
            previewForm?.addEventListener('submit', syncContent);

            document.addEventListener('selectionchange', () => {
                saveSelection();
                refreshToolbarState();
            });

            const closeModal = () => historyModal?.classList.add('hidden');
            const openModal = () => historyModal?.classList.remove('hidden');

            openHistory?.addEventListener('click', openModal);
            closeHistory?.addEventListener('click', closeModal);
            historyModal?.addEventListener('click', (event) => {
                if (event.target === historyModal) {
                    closeModal();
                }
            });

            document.addEventListener('keydown', (event) => {
                if (event.key === 'Escape') {
                    closeModal();
                }
            });

            ensureCssCommands();
            normalizeEditorMarkup();
            syncContent();
            refreshToolbarState();
        })();
    </script>
@endsection