<?php
// FORMULARIO DE CONSENTIMIENTOS Y AUTORIZACIONES (GDPR) - MEDICINA OCUPACIONAL
?>
<div id="femo-legal-container" class="premium-form">
    <div class="form-header-premium mb-4">
        <h3 class="text-gradient"><i class="fa fa-file-contract me-2"></i>Autorizaciones y Consentimientos</h3>
        <p class="text-muted small">Cumplimiento LOPDP (Ley Orgánica de Protección de Datos Personales - Ecuador)</p>
    </div>

    <div class="card card-premium mb-4">
        <div class="card-body">
            <div class="form-check mb-3">
                <input class="form-check-input" type="checkbox" id="check_consentimiento" name="femo_check_consent" checked>
                <label class="form-check-label fw-bold" for="check_consentimiento">
                    1. Consentimiento Informado para Evaluación Médica
                </label>
                <p class="small text-muted ms-4">Autorizo la realización de los exámenes físicos y complementarios necesarios para determinar mi aptitud laboral.</p>
            </div>

            <hr>

            <div class="form-check mb-3">
                <input class="form-check-input" type="checkbox" id="check_datos" name="femo_check_datos" checked>
                <label class="form-check-label fw-bold" for="check_datos">
                    2. Autorización de Tratamiento de Datos Personales (LOPDP)
                </label>
                <p class="small text-muted ms-4">Autorizo la recolección y custodia de mis datos clínicos sensibles bajo estrictas normas de confidencialidad.</p>
            </div>

            <hr>

            <div class="form-check mb-3">
                <input class="form-check-input" type="checkbox" id="check_confidencial" name="femo_check_confidencial" checked>
                <label class="form-check-label fw-bold" for="check_confidencial">
                    3. Acuerdo de Confidencialidad Paciente-Médico
                </label>
                <p class="small text-muted ms-4">Acepto los términos de custodia y acceso restringido a mi información clínica.</p>
            </div>
        </div>
    </div>

    <div class="card card-premium bg-light border-0">
        <div class="card-body text-center py-4">
            <div class="mb-3 text-primary"><i class="fa fa-signature fa-3x"></i></div>
            <h5 class="mb-3">Panel de Firma del Trabajador</h5>
            <canvas id="femo_legal_signature" class="border rounded bg-white shadow-sm" width="500" height="150" style="touch-action: none; cursor: crosshair;"></canvas>
            <div class="mt-2">
                <button type="button" class="btn btn-sm btn-link text-danger" onclick="clearFemoLegalSignature()">
                    <i class="fa fa-eraser"></i> Limpiar Firma
                </button>
            </div>
        </div>
    </div>

    <div class="mt-4 text-end">
        <button type="button" class="btn btn-primary btn-lg px-5 shadow" onclick="finalizarFemoLegal()">
            <i class="fa fa-check-circle me-2"></i> Confirmar y Guardar Documentos Legales
        </button>
    </div>
</div>

<script>
function clearFemoLegalSignature() {
    const canvas = document.getElementById('femo_legal_signature');
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function finalizarFemoLegal() {
    // Aquí iría la lógica para guardar via AJAX
    bootbox.confirm("¿Desea finalizar y generar los documentos legales firmados?", function(res){
        if(res){
            // Guardar...
            alert("Documentos legales procesados correctamente.");
        }
    });
}
</script>
