@extends('layouts.app')

@section('title', 'Declaración SARLAFT e Integridad')

@section('content')
<div class="row justify-content-center">
<div class="col-12 col-lg-9 col-xl-8">

    {{-- Card principal --}}
    <div class="card card-form mb-4">
        <div class="card-header">
            <div class="d-flex align-items-start gap-3">
                <div class="bg-white bg-opacity-25 rounded-3 p-2 mt-1">
                    <i class="bi bi-file-earmark-text text-white fs-4"></i>
                </div>
                <div>
                    <h4>Declaración de Entendimiento y Compromiso</h4>
                    <p>con la Política SARLAFT y de Integridad &mdash; Diligencia el formulario para generar tu documento</p>
                </div>
            </div>
        </div>

        <div class="card-body p-4">

            {{-- Box informativo --}}
            <div class="info-box mb-4">
                <i class="bi bi-info-circle-fill me-2"></i>
                <strong>¿Para qué es este formulario?</strong><br>
                Al completarlo se generará un PDF oficial con tu declaración, que será enviado al correo institucional y al tuyo.
                Los campos marcados con <span class="text-danger fw-bold">*</span> son obligatorios.
            </div>

            {{-- Errores de validación --}}
            @if($errors->any())
            <div class="alert alert-danger mb-4">
                <i class="bi bi-exclamation-triangle-fill me-2"></i>
                <strong>Por favor corrige los siguientes errores:</strong>
                <ul class="mb-0 mt-2">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            @endif

            {{-- FORMULARIO --}}
            <form id="sarlaftForm" action="{{ route('declaracion.store') }}" method="POST" novalidate>
                @csrf

                {{-- ══════════════════════════════════════════
                     SECCIÓN 1: Datos del declarante
                ══════════════════════════════════════════ --}}
                <div class="mb-4">
                    <div class="section-badge"><i class="bi bi-person-fill"></i> Sección 1</div>
                    <div class="section-title">Datos del Declarante</div>

                    <div class="row g-3">

                        {{-- Nombre completo --}}
                        <div class="col-12">
                            <label class="form-label">Nombre completo <span class="required">*</span></label>
                            <input type="text"
                                   name="nombre_completo"
                                   class="form-control @error('nombre_completo') is-invalid @enderror"
                                   value="{{ old('nombre_completo') }}"
                                   placeholder="Ej: María Fernanda López Gómez"
                                   required>
                            @error('nombre_completo')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Tipo de documento --}}
                        <div class="col-12 col-md-5">
                            <label class="form-label">Tipo de documento <span class="required">*</span></label>
                            <select name="tipo_documento"
                                    class="form-select @error('tipo_documento') is-invalid @enderror"
                                    id="tipoDocumento"
                                    required>
                                <option value="">Seleccione...</option>
                                <option value="CC"  {{ old('tipo_documento') == 'CC'  ? 'selected' : '' }}>Cédula de ciudadanía</option>
                                <option value="CE"  {{ old('tipo_documento') == 'CE'  ? 'selected' : '' }}>Cédula de extranjería</option>
                                <option value="NIT" {{ old('tipo_documento') == 'NIT' ? 'selected' : '' }}>NIT</option>
                            </select>
                            @error('tipo_documento')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Número de documento --}}
                        <div class="col-12 col-md-7">
                            <label class="form-label">Número de documento <span class="required">*</span></label>
                            <input type="text"
                                   name="numero_documento"
                                   class="form-control @error('numero_documento') is-invalid @enderror"
                                   value="{{ old('numero_documento') }}"
                                   placeholder="Ej: 1094123456"
                                   required>
                            @error('numero_documento')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Calidad en que actúa --}}
                        <div class="col-12">
                            <label class="form-label">Actúa en calidad de <span class="required">*</span></label>
                            <div class="row g-2">
                                <div class="col-12 col-sm-6">
                                    <label class="check-card w-100" id="label-natural">
                                        <input class="form-check-input m-0" type="radio"
                                               name="calidad" value="natural"
                                               {{ old('calidad','natural') == 'natural' ? 'checked' : '' }}
                                               onchange="togglePersonaJuridica(this)">
                                        <i class="bi bi-person text-primary"></i>
                                        <span>Persona natural</span>
                                    </label>
                                </div>
                                <div class="col-12 col-sm-6">
                                    <label class="check-card w-100" id="label-juridica">
                                        <input class="form-check-input m-0" type="radio"
                                               name="calidad" value="juridica"
                                               {{ old('calidad') == 'juridica' ? 'checked' : '' }}
                                               onchange="togglePersonaJuridica(this)">
                                        <i class="bi bi-building text-primary"></i>
                                        <span>Representante legal de persona jurídica</span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        {{-- Nombre empresa (solo si es jurídica) --}}
                        <div class="col-12" id="empresa-block"
                             style="{{ old('calidad') == 'juridica' ? '' : 'display:none' }}">
                            <label class="form-label">Razón social / Nombre de la empresa <span class="required">*</span></label>
                            <input type="text"
                                   name="nombre_empresa"
                                   id="nombre_empresa"
                                   class="form-control @error('nombre_empresa') is-invalid @enderror"
                                   value="{{ old('nombre_empresa') }}"
                                   placeholder="Ej: Servicios Médicos S.A.S.">
                            @error('nombre_empresa')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                    </div>
                </div>

                <hr class="my-4">

                {{-- ══════════════════════════════════════════
                     SECCIÓN 2: Información de contacto
                ══════════════════════════════════════════ --}}
                <div class="mb-4">
                    <div class="section-badge"><i class="bi bi-envelope-fill"></i> Sección 2</div>
                    <div class="section-title">Información de Contacto</div>

                    <div class="row g-3">

                        <div class="col-12 col-md-6">
                            <label class="form-label">Correo electrónico <span class="required">*</span></label>
                            <div class="input-group">
                                <span class="input-group-text bg-light"><i class="bi bi-envelope"></i></span>
                                <input type="email"
                                       name="email"
                                       class="form-control @error('email') is-invalid @enderror"
                                       value="{{ old('email') }}"
                                       placeholder="correo@ejemplo.com"
                                       required>
                                @error('email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-12 col-md-6">
                            <label class="form-label">Teléfono / Celular</label>
                            <div class="input-group">
                                <span class="input-group-text bg-light"><i class="bi bi-telephone"></i></span>
                                <input type="tel"
                                       name="telefono"
                                       class="form-control @error('telefono') is-invalid @enderror"
                                       value="{{ old('telefono') }}"
                                       placeholder="Ej: 3001234567">
                            </div>
                        </div>

                        <div class="col-12 col-md-8">
                            <label class="form-label">Ciudad <span class="required">*</span></label>
                            <input type="text"
                                   name="ciudad"
                                   class="form-control @error('ciudad') is-invalid @enderror"
                                   value="{{ old('ciudad', 'Armenia') }}"
                                   placeholder="Ej: Armenia"
                                   required>
                            @error('ciudad')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12 col-md-4">
                            <label class="form-label">Fecha <span class="required">*</span></label>
                            <input type="date"
                                   name="fecha"
                                   class="form-control @error('fecha') is-invalid @enderror"
                                   value="{{ old('fecha', date('Y-m-d')) }}"
                                   required>
                            @error('fecha')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                    </div>
                </div>

                <hr class="my-4">

                {{-- ══════════════════════════════════════════
                     SECCIÓN 3: Conflictos de interés
                ══════════════════════════════════════════ --}}
                <div class="mb-4">
                    <div class="section-badge"><i class="bi bi-shield-exclamation"></i> Sección 3</div>
                    <div class="section-title">Declaración de Conflictos de Interés</div>

                    <div class="warn-box mb-3">
                        <i class="bi bi-exclamation-triangle-fill text-warning me-2"></i>
                        <strong>Recuerda:</strong> Declarar un conflicto <strong>NO</strong> es una falta. Ocultarlo sí puede serlo.
                    </div>

                    <div class="mb-3">
                        <label class="form-label">¿Tiene algún conflicto de interés con el hospital? <span class="required">*</span></label>
                        <div class="row g-2">
                            <div class="col-12 col-sm-6">
                                <label class="check-card w-100">
                                    <input class="form-check-input m-0" type="radio"
                                           name="tiene_conflicto" value="no"
                                           {{ old('tiene_conflicto','no') == 'no' ? 'checked' : '' }}
                                           onchange="toggleConflicto(this)">
                                    <i class="bi bi-check-circle text-success"></i>
                                    <span>No, no tengo conflictos de interés</span>
                                </label>
                            </div>
                            <div class="col-12 col-sm-6">
                                <label class="check-card w-100">
                                    <input class="form-check-input m-0" type="radio"
                                           name="tiene_conflicto" value="si"
                                           {{ old('tiene_conflicto') == 'si' ? 'checked' : '' }}
                                           onchange="toggleConflicto(this)">
                                    <i class="bi bi-exclamation-circle text-warning"></i>
                                    <span>Sí, tengo algo que declarar</span>
                                </label>
                            </div>
                        </div>
                    </div>

                    <div id="conflicto-block" style="{{ old('tiene_conflicto') == 'si' ? '' : 'display:none' }}">
                        <label class="form-label">Describa el conflicto de interés <span class="required">*</span></label>
                        <textarea name="descripcion_conflicto"
                                  id="descripcion_conflicto"
                                  class="form-control @error('descripcion_conflicto') is-invalid @enderror"
                                  rows="3"
                                  placeholder="Ej: Soy familiar en segundo grado del Jefe de Contratación...">{{ old('descripcion_conflicto') }}</textarea>
                        @error('descripcion_conflicto')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <hr class="my-4">

                {{-- ══════════════════════════════════════════
                     SECCIÓN 4: PEP
                ══════════════════════════════════════════ --}}
                <div class="mb-4">
                    <div class="section-badge"><i class="bi bi-person-badge-fill"></i> Sección 4</div>
                    <div class="section-title">Persona Expuesta Políticamente (PEP)</div>

                    <div class="info-box mb-3">
                        <i class="bi bi-info-circle-fill me-2"></i>
                        Es PEP quien ocupa o ha ocupado cargos públicos relevantes (últimos 2 años), o tiene relación cercana con alguien que los ocupa. Informarlo no impide contratar, pero implica mayor control.
                    </div>

                    <div class="row g-2">
                        <div class="col-12 col-sm-6">
                            <label class="check-card w-100">
                                <input class="form-check-input m-0" type="radio"
                                       name="es_pep" value="no"
                                       {{ old('es_pep','no') == 'no' ? 'checked' : '' }}
                                       onchange="togglePep(this)">
                                <i class="bi bi-x-circle text-secondary"></i>
                                <span>No soy / No tengo vínculo con PEP</span>
                            </label>
                        </div>
                        <div class="col-12 col-sm-6">
                            <label class="check-card w-100">
                                <input class="form-check-input m-0" type="radio"
                                       name="es_pep" value="si"
                                       {{ old('es_pep') == 'si' ? 'checked' : '' }}
                                       onchange="togglePep(this)">
                                <i class="bi bi-person-badge text-warning"></i>
                                <span>Soy PEP o tengo vínculo con uno</span>
                            </label>
                        </div>
                    </div>

                    <div id="pep-block" class="mt-3" style="{{ old('es_pep') == 'si' ? '' : 'display:none' }}">
                        <label class="form-label">Describa el vínculo o cargo <span class="required">*</span></label>
                        <textarea name="descripcion_pep"
                                  id="descripcion_pep"
                                  class="form-control @error('descripcion_pep') is-invalid @enderror"
                                  rows="3"
                                  placeholder="Ej: Soy Concejal del municipio de Armenia...">{{ old('descripcion_pep') }}</textarea>
                        @error('descripcion_pep')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <hr class="my-4">

                {{-- ══════════════════════════════════════════
                     SECCIÓN 5: Firma digital
                ══════════════════════════════════════════ --}}
                <div class="mb-4">
                    <div class="section-badge"><i class="bi bi-pen-fill"></i> Sección 5</div>
                    <div class="section-title">Firma Digital</div>

                    <p class="text-muted small mb-3">
                        Dibuja tu firma en el recuadro. Esta se incluirá en el documento PDF generado.
                    </p>

                    <canvas id="signature-pad" height="160"></canvas>
                    <input type="hidden" name="firma_data" id="firma_data" value="{{ old('firma_data') }}">

                    <div class="d-flex gap-2 mt-2">
                        <button type="button" class="btn btn-sm btn-outline-secondary" onclick="clearSignature()">
                            <i class="bi bi-eraser me-1"></i> Limpiar firma
                        </button>
                        <span id="firma-status" class="text-muted small align-self-center">
                            <i class="bi bi-pencil me-1"></i> Sin firma aún
                        </span>
                    </div>
                </div>

                <hr class="my-4">

                {{-- ══════════════════════════════════════════
                     SECCIÓN 6: Aceptación
                ══════════════════════════════════════════ --}}
                <div class="mb-4">
                    <div class="section-badge"><i class="bi bi-check2-circle"></i> Sección 6</div>
                    <div class="section-title">Aceptación y Envío</div>

                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="acepta_politica" name="acepta_politica" value="1"
                               {{ old('acepta_politica') ? 'checked' : '' }} required>
                        <label class="form-check-label" for="acepta_politica">
                            He leído y comprendido la Política SARLAFT y de Integridad de la E.S.E. Hospital San Juan de Dios del Quindío. <span class="required">*</span>
                        </label>
                    </div>

                    <div class="form-check mb-4">
                        <input class="form-check-input" type="checkbox" id="acepta_veracidad" name="acepta_veracidad" value="1"
                               {{ old('acepta_veracidad') ? 'checked' : '' }} required>
                        <label class="form-check-label" for="acepta_veracidad">
                            Declaro bajo la gravedad del juramento que la información suministrada es veraz y actualizada. <span class="required">*</span>
                        </label>
                    </div>

                    <div class="d-flex flex-column flex-sm-row gap-2">
                        <button type="button" class="btn btn-outline-secondary" onclick="previewDocument()">
                            <i class="bi bi-eye me-1"></i> Vista previa
                        </button>
                        <button type="submit" class="btn btn-husda flex-sm-grow-1" id="btnSubmit">
                            <i class="bi bi-send-fill me-2"></i>
                            Generar PDF y Enviar al correo
                        </button>
                    </div>

                </div>

            </form>
        </div>
    </div>

</div>
</div>

{{-- ═══════════════════════════════════════════════════════════
     MODAL: Vista previa del documento
═══════════════════════════════════════════════════════════ --}}
<div class="modal fade" id="previewModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content" style="border-radius:16px; overflow:hidden">
            <div class="modal-header" style="background:var(--husda-blue); color:#fff">
                <h5 class="modal-title fw-bold">
                    <i class="bi bi-file-earmark-text me-2"></i>Vista previa del documento
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-4">
                <div class="document-preview" id="previewContent">
                    {{-- Se llena con JS --}}
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-husda" onclick="submitFromPreview()">
                    <i class="bi bi-send-fill me-1"></i> Generar y Enviar
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// ── Persona jurídica toggle ──────────────────────────────────
function togglePersonaJuridica(radio) {
    const block = document.getElementById('empresa-block');
    const input = document.getElementById('nombre_empresa');
    if (radio.value === 'juridica') {
        block.style.display = '';
        input.setAttribute('required', '');
    } else {
        block.style.display = 'none';
        input.removeAttribute('required');
    }
}

// ── Conflicto toggle ────────────────────────────────────────
function toggleConflicto(radio) {
    const block = document.getElementById('conflicto-block');
    const ta    = document.getElementById('descripcion_conflicto');
    if (radio.value === 'si') {
        block.style.display = '';
        ta.setAttribute('required', '');
    } else {
        block.style.display = 'none';
        ta.removeAttribute('required');
    }
}

// ── PEP toggle ──────────────────────────────────────────────
function togglePep(radio) {
    const block = document.getElementById('pep-block');
    const ta    = document.getElementById('descripcion_pep');
    if (radio.value === 'si') {
        block.style.display = '';
        ta.setAttribute('required', '');
    } else {
        block.style.display = 'none';
        ta.removeAttribute('required');
    }
}

// ══════════════════════════════════════════════════════════════
// FIRMA DIGITAL (canvas)
// ══════════════════════════════════════════════════════════════
const canvas  = document.getElementById('signature-pad');
const ctx     = canvas.getContext('2d');
let drawing   = false;
let hasSigned = false;

function resizeCanvas() {
    const ratio = Math.max(window.devicePixelRatio || 1, 1);
    const w = canvas.offsetWidth;
    const h = 160;
    canvas.width  = w * ratio;
    canvas.height = h * ratio;
    canvas.style.height = h + 'px';
    ctx.scale(ratio, ratio);
    ctx.strokeStyle = '#003d7a';
    ctx.lineWidth   = 2;
    ctx.lineCap     = 'round';
    ctx.lineJoin    = 'round';
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);

function getPos(e) {
    const r = canvas.getBoundingClientRect();
    const ratio = Math.max(window.devicePixelRatio || 1, 1);
    if (e.touches) {
        return {
            x: (e.touches[0].clientX - r.left),
            y: (e.touches[0].clientY - r.top)
        };
    }
    return { x: e.clientX - r.left, y: e.clientY - r.top };
}

canvas.addEventListener('mousedown',  e => { drawing = true; ctx.beginPath(); ctx.moveTo(...Object.values(getPos(e))); });
canvas.addEventListener('mousemove',  e => { if (!drawing) return; const p = getPos(e); ctx.lineTo(p.x, p.y); ctx.stroke(); });
canvas.addEventListener('mouseup',    () => { drawing = false; saveSig(); });
canvas.addEventListener('mouseleave', () => { drawing = false; });

canvas.addEventListener('touchstart',  e => { e.preventDefault(); drawing = true; ctx.beginPath(); ctx.moveTo(...Object.values(getPos(e))); }, { passive: false });
canvas.addEventListener('touchmove',   e => { e.preventDefault(); if (!drawing) return; const p = getPos(e); ctx.lineTo(p.x, p.y); ctx.stroke(); }, { passive: false });
canvas.addEventListener('touchend',    e => { e.preventDefault(); drawing = false; saveSig(); });

function saveSig() {
    hasSigned = true;
    document.getElementById('firma_data').value = canvas.toDataURL('image/png');
    canvas.classList.add('signed');
    document.getElementById('firma-status').innerHTML = '<i class="bi bi-check-circle-fill text-success me-1"></i><span class="text-success">Firma capturada</span>';
}

function clearSignature() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    hasSigned = false;
    canvas.classList.remove('signed');
    document.getElementById('firma_data').value = '';
    document.getElementById('firma-status').innerHTML = '<i class="bi bi-pencil me-1"></i> Sin firma aún';
}

// ══════════════════════════════════════════════════════════════
// VISTA PREVIA
// ══════════════════════════════════════════════════════════════
function previewDocument() {
    const f   = document.getElementById('sarlaftForm');
    const get = name => { const el = f.querySelector(`[name="${name}"]`); return el ? el.value : ''; };
    const rad = name => { const el = f.querySelector(`[name="${name}"]:checked`); return el ? el.value : ''; };

    const nombre   = get('nombre_completo')  || '______________________';
    const tipDoc   = { CC:'Cédula de ciudadanía', CE:'Cédula de extranjería', NIT:'NIT' }[get('tipo_documento')] || '______';
    const numDoc   = get('numero_documento') || '______________________';
    const calidad  = rad('calidad') === 'juridica' ? 'Representante legal de la persona jurídica' : 'Persona natural';
    const empresa  = get('nombre_empresa')   || '';
    const ciudad   = get('ciudad')           || '______________________';
    const fecha    = get('fecha')            ? new Date(get('fecha') + 'T12:00:00').toLocaleDateString('es-CO', { day:'2-digit', month:'long', year:'numeric' }) : '______';
    const conflicto= rad('tiene_conflicto') === 'si' ? ('<br><em>Conflicto declarado:</em> ' + (get('descripcion_conflicto') || '---')) : 'No declara conflictos de interés.';
    const pep      = rad('es_pep') === 'si' ? ('<br><em>Vínculo PEP:</em> ' + (get('descripcion_pep') || '---')) : 'No es PEP ni tiene vínculos con PEP.';

    const html = `
        <div class="doc-title">
            DECLARACIÓN DE ENTENDIMIENTO Y COMPROMISO<br>
            CON LA POLÍTICA SARLAFT Y DE INTEGRIDAD
        </div>
        <p>Yo, <strong>${nombre}</strong>, identificado(a) con ${tipDoc} No. <strong>${numDoc}</strong>,
        en calidad de ${calidad}${empresa ? ' de <strong>' + empresa + '</strong>' : ''},
        quien pretende celebrar o ha celebrado contrato con la <strong>E.S.E. Hospital Departamental Universitario del Quindío San Juan de Dios</strong>,
        de manera libre y voluntaria manifiesto que:</p>

        <div class="clause"><strong>PRIMERO. Conocimiento de la política</strong><br>
        Declaro que he recibido, leído y comprendido la Política Institucional del Sistema de Administración del Riesgo de Lavado de Activos, Financiación del Terrorismo y/o de la Proliferación de Armas de Destrucción Masiva (SARLAFT), así como los principios de integridad, transparencia y ética adoptados por la Entidad.</div>

        <div class="clause"><strong>SEGUNDO. Entendimiento del alcance</strong><br>
        Reconozco que la política tiene como finalidad prevenir y mitigar riesgos asociados a LA/FT/FPADM, así como promover una cultura de integridad en las relaciones contractuales.</div>

        <div class="clause"><strong>TERCERO. Compromiso de actuación</strong><br>
        Me comprometo a actuar conforme a los principios de legalidad, transparencia e integridad, y a abstenerme de realizar conductas relacionadas con actividades ilegales.</div>

        <div class="clause"><strong>CUARTO. Canales de reporte</strong><br>
        Declaro conocer la existencia de los canales institucionales de denuncia y reporte establecidos en la página web e intranet institucional.</div>

        <div class="clause"><strong>QUINTO. Alcance de la declaración</strong><br>
        Entiendo que la presente declaración tiene carácter pedagógico, preventivo y de compromiso ético.</div>

        <div class="clause"><strong>SEXTO. Aceptación</strong><br>
        La presente declaración se firma como evidencia del proceso de divulgación y entendimiento de la Política SARLAFT y de Integridad de la Entidad.</div>

        <div class="clause"><strong>Declaración de conflictos de interés:</strong> ${conflicto}</div>
        <div class="clause"><strong>Información PEP:</strong> ${pep}</div>

        <hr>
        <table class="table table-sm table-borderless" style="font-size:.85rem">
            <tr><td><strong>Nombre:</strong></td><td>${nombre}</td></tr>
            <tr><td><strong>Documento:</strong></td><td>${numDoc}</td></tr>
            <tr><td><strong>Fecha:</strong></td><td>${fecha}</td></tr>
            <tr><td><strong>Lugar:</strong></td><td>${ciudad}</td></tr>
        </table>
        ${hasSigned ? '<p class="text-success"><i class="bi bi-check-circle-fill me-1"></i>Firma digital capturada ✓</p>' : '<p class="text-warning"><i class="bi bi-exclamation-triangle me-1"></i>Sin firma aún</p>'}
    `;

    document.getElementById('previewContent').innerHTML = html;
    new bootstrap.Modal(document.getElementById('previewModal')).show();
}

function submitFromPreview() {
    bootstrap.Modal.getInstance(document.getElementById('previewModal')).hide();
    document.getElementById('sarlaftForm').submit();
}

// ── Loading en submit ─────────────────────────────────────────
document.getElementById('sarlaftForm').addEventListener('submit', () => {
    const btn = document.getElementById('btnSubmit');
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Generando PDF...';
});
</script>
@endpush