@props(['formId'])

<div class="modal-overlay" id="signatureModal" style="opacity: 0; visibility: hidden; display: flex; align-items: center; justify-content: center; z-index: 9999; transition: opacity 0.3s ease, visibility 0.3s ease; position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);">
    <div class="modal-content" style="max-width: 700px; width: 90%; background: var(--bg-card); position: relative; border-radius: var(--radius-lg); box-shadow: 0 10px 25px rgba(0,0,0,0.2);">
        <div class="modal-header">
            <h3>Firmar Reporte</h3>
            <button type="button" class="btn-close" onclick="closeSignatureModal()"><i class="ph ph-x"></i></button>
        </div>
        <div class="modal-body">
            <p class="text-sm text-gray" style="margin-bottom: 1rem;">Por favor, dibuja las firmas a continuación. Ambas firmas son <strong style="color: var(--danger);">obligatorias</strong> para generar el reporte.</p>
            
            <div id="sig-tabs" class="d-none-desktop" style="margin-bottom: 1rem; gap: 0.5rem; justify-content: center;">
                <button type="button" class="btn btn-sm btn-primary" onclick="switchSigTab('tech')" id="tab-tech">1. Firma Técnico</button>
                <button type="button" class="btn btn-sm btn-outline" onclick="switchSigTab('user')" id="tab-user">2. Firma Usuario</button>
            </div>
            
            <div class="sig-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;">
                
                <!-- Firma Técnico -->
                <div class="signature-container" id="container-tech">
                    <label class="form-label text-center" style="display:block;">Firma del Técnico (TI)</label>
                    <div style="border: 2px dashed var(--border-color); border-radius: var(--radius-md); background: white; margin-bottom: 0.5rem; position: relative;">
                        <canvas id="canvasTech" width="300" height="150" style="width: 100%; touch-action: none; cursor: crosshair;"></canvas>
                    </div>
                    <button type="button" class="btn btn-sm btn-outline" style="width: 100%;" onclick="clearPad('tech')">
                        <i class="ph ph-eraser"></i> Limpiar
                    </button>
                </div>

                <!-- Firma Usuario -->
                <div class="signature-container" id="container-user">
                    <label class="form-label text-center" style="display:block;">Firma del Usuario (Responsable)</label>
                    <div style="border: 2px dashed var(--border-color); border-radius: var(--radius-md); background: white; margin-bottom: 0.5rem; position: relative;">
                        <canvas id="canvasUser" width="300" height="150" style="width: 100%; touch-action: none; cursor: crosshair;"></canvas>
                    </div>
                    <button type="button" class="btn btn-sm btn-outline" style="width: 100%;" onclick="clearPad('user')">
                        <i class="ph ph-eraser"></i> Limpiar
                    </button>
                </div>

            </div>
            
            <div style="margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color); text-align: center;">
                <p class="text-muted text-sm">Al generar el reporte, serás redirigido al Visor donde podrás descargar, imprimir o enviar el documento por WhatsApp y Correo.</p>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-outline" onclick="closeSignatureModal()">Cancelar</button>
            <button type="button" class="btn btn-primary" onclick="submitWithSignatures()">Generar PDF con Firmas</button>
        </div>
    </div>
</div>

<style>
    @media (max-width: 768px) {
        .signature-container canvas {
            height: 250px !important;
        }
        .sig-grid {
            display: block !important;
        }
        .d-none-desktop {
            display: flex !important;
        }
        #container-user {
            display: none;
        }
    }
    @media (min-width: 769px) {
        .d-none-desktop {
            display: none !important;
        }
        #container-tech, #container-user {
            display: block !important;
        }
    }
</style>

<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.1.7/dist/signature_pad.umd.min.js"></script>
<script>
    let padTech = null;
    let padUser = null;
    const targetFormId = '{{ $formId }}';

    function initSignaturePads() {
        if (!padTech) {
            const canvasTech = document.getElementById('canvasTech');
            if(canvasTech) {
                padTech = new SignaturePad(canvasTech, { backgroundColor: 'rgb(255, 255, 255)' });
                resizeCanvas(canvasTech, padTech);
            }
        }
        if (!padUser) {
            const canvasUser = document.getElementById('canvasUser');
            if(canvasUser) {
                padUser = new SignaturePad(canvasUser, { backgroundColor: 'rgb(255, 255, 255)' });
                resizeCanvas(canvasUser, padUser);
            }
        }
    }

    function resizeCanvas(canvas, pad) {
        const ratio =  Math.max(window.devicePixelRatio || 1, 1);
        if(canvas.offsetWidth === 0) return;
        
        let data = null;
        if (pad && !pad.isEmpty()) {
            data = pad.toData();
        }

        canvas.width = canvas.offsetWidth * ratio;
        canvas.height = canvas.offsetHeight * ratio;
        canvas.getContext("2d").scale(ratio, ratio);
        
        if (pad && data) {
            pad.fromData(data);
        }
    }

    function switchSigTab(tab) {
        if(window.innerWidth > 768) return;
        const containerTech = document.getElementById('container-tech');
        const containerUser = document.getElementById('container-user');
        const btnTech = document.getElementById('tab-tech');
        const btnUser = document.getElementById('tab-user');

        if(tab === 'tech') {
            containerTech.style.display = 'block';
            containerUser.style.display = 'none';
            btnTech.className = 'btn btn-sm btn-primary';
            btnUser.className = 'btn btn-sm btn-outline';
            if (padTech) resizeCanvas(document.getElementById('canvasTech'), padTech);
        } else {
            containerTech.style.display = 'none';
            containerUser.style.display = 'block';
            btnTech.className = 'btn btn-sm btn-outline';
            btnUser.className = 'btn btn-sm btn-primary';
            
            if (padUser) resizeCanvas(document.getElementById('canvasUser'), padUser);
        }
    }

    function openSignatureModal() {
        const modal = document.getElementById('signatureModal');
        if (modal) {
            modal.style.visibility = 'visible';
            modal.style.opacity = '1';
            
            // Reset mobile tabs to first tab on open
            if(window.innerWidth <= 768) {
                switchSigTab('tech');
            }
            
            setTimeout(initSignaturePads, 100);
        }
    }

    function closeSignatureModal() {
        const modal = document.getElementById('signatureModal');
        if (modal) {
            modal.style.opacity = '0';
            setTimeout(() => { modal.style.visibility = 'hidden'; }, 300);
        }
    }

    function clearPad(type) {
        if (type === 'tech' && padTech) padTech.clear();
        if (type === 'user' && padUser) padUser.clear();
    }

    function submitWithSignatures() {
        const form = document.getElementById(targetFormId);
        if (!form) {
            console.error('No se encontró el formulario:', targetFormId);
            return;
        }
        
        if (!padTech || padTech.isEmpty()) {
            Swal.fire({ title: 'Atención', text: 'La firma del Técnico (TI) es obligatoria.', icon: 'warning', confirmButtonText: 'Entendido' });
            return;
        }
        if (!padUser || padUser.isEmpty()) {
            Swal.fire({ title: 'Atención', text: 'La firma del Usuario (Responsable) es obligatoria.', icon: 'warning', confirmButtonText: 'Entendido' });
            return;
        }
        // Add hidden inputs for signatures
        let techInput = form.querySelector('input[name="signature_tech"]');
        if (!techInput) {
            techInput = document.createElement('input');
            techInput.type = 'hidden';
            techInput.name = 'signature_tech';
            form.appendChild(techInput);
        }

        let userInput = form.querySelector('input[name="signature_user"]');
        if (!userInput) {
            userInput = document.createElement('input');
            userInput.type = 'hidden';
            userInput.name = 'signature_user';
            form.appendChild(userInput);
        }
        
        let downloadInput = form.querySelector('input[name="download_device"]');
        if (!downloadInput) {
            downloadInput = document.createElement('input');
            downloadInput.type = 'hidden';
            downloadInput.name = 'download_device';
            form.appendChild(downloadInput);
        }
        downloadInput.value = '1';

        // Only set data if not empty
        techInput.value = padTech && !padTech.isEmpty() ? padTech.toDataURL('image/png') : '';
        userInput.value = padUser && !padUser.isEmpty() ? padUser.toDataURL('image/png') : '';
        
        form.removeAttribute('target');

        // Submit form
        form.submit();
        
        // Close modal
        closeSignatureModal();
    }
</script>