{% extends 'home.html' %}
{% load static %}

{% block title %}Descargo de Responsabilidad{% endblock %}

{% block styles %}
    <link rel="stylesheet" href="{% static 'descargo_responsabilidad/css/mobile_form.css' %}">
    {% endblock %}

{% block content_user %}
<div 
  class="main-card" 
  id="descargo-form-container"
  data-url-buscar-usuario="{% url 'api-buscar-usuario' %}"
  data-url-buscar-zona="{% url 'api-buscar-zona' %}"
  data-url-procesar-ingreso="{% url 'api-procesar-ingreso' %}"
  data-url-dashboard="{% url 'dashboard' %}"
>
    
    <header class="header-descargo">
        <h2 class="page-title">Descargo de Responsabilidad y Registro de Ingreso</h2>
    </header>

    <div class="disclaimer-text">
        <p>
            En la <span id="qr-ciudad">[Ciudad por definir]</span>, y con el fin de ingresar a la zona crítica denominada 
            <span id="scan-trigger-zona" class="scan-trigger elemento-pulsante">[Toque aquí para escanear la zona]</span>,
            a fecha de <strong id="fecha-actual">{% now "d/m/Y" %}</strong>, yo, 
            <strong><span id="nombre-empleado">{{ user.first_name|default:user.username }}</span></strong>, mayor de edad, identificado(a) con 
            documento de identidad número <strong><span id="cedula-empleado">{{ user.numero_documento }}</span></strong>, 
            actuando en mi calidad de <strong><span id="cargo-empleado">{{ user.cargo.nombre|default:"Usuario" }}</span></strong> para la empresa 
            <strong><span id="nombre-empresa">{{ user.empresa.nombre_empresa|default:"Joli Foods" }}</span></strong>, declaro de manera libre y voluntaria que he leído, comprendido y aceptado los siguientes términos y condiciones para el acceso a las Zonas Críticas de <strong>JOLI FOODS S.A.S.</strong>:
        </p>
        
        <p>
            Comprendo que mi ingreso se realiza bajo la autorización y supervisión directa de un responsable de Jolifoods S.A.S., 
            identificado como <strong id="responsable-nombre">[Esperando responsable...]</strong>, con 
            cédula de ciudadanía número 
            <span id="responsable-cedula-container" class="input-interactivo elemento-pulsante">
                <span id="responsable-cedula-placeholder" class="placeholder-texto">
                    [Haga clic aquí para ingresar la cédula]
                    <i class="fas fa-pencil-alt fa-xs"></i>
                </span>
                <input type="number" id="responsable-cedula-input" class="input-oculto oculto" placeholder="Ingrese la cédula">
            </span>
            y cargo de <strong id="responsable-cargo">[Esperando responsable...]</strong>.
        </p>
        
        </div>

    <div class="grupo-aceptacion">
        <div class="grupo-checkbox">
            <input type="checkbox" id="check-acepta-descargo">
            <label for="check-acepta-descargo">He leído y acepto este descargo de responsabilidad.</label>
        </div>
        <div class="grupo-checkbox">
            <input type="checkbox" id="check-acepta-politicas">
            <label for="check-acepta-politicas">Acepto la política de tratamiento de datos.</label>
            <a href="https://jolifoods.com/wp-content/uploads/2025/09/Politica-de-tratamiento-de-Datos-Personales-Joli.pdf" target="_blank" class="btn-ver-politica">
                Ver Política <i class="fas fa-external-link-alt"></i>
            </a>
        </div>
    </div>

    <div id="seccion-firma-y-boton">
        <div class="firmas-container">
            <div class="firma-box">
                <label for="firma-visitante-canvas">Firma del Visitante</label>
                <div class="canvas-wrapper">
                    <canvas id="firma-visitante-canvas" class="firma-canvas"></canvas>
                    <button type="button" class="btn-clear-signature" data-canvas-id="firma-visitante-canvas" title="Limpiar firma">
                        <i class="fas fa-eraser"></i>
                    </button>
                </div>
            </div>
            <div class="firma-box">
                <label for="firma-responsable-canvas">Firma del Responsable (Jolifoods)</label>
                <div class="canvas-wrapper">
                    <canvas id="firma-responsable-canvas" class="firma-canvas"></canvas>
                    <button type="button" class="btn-clear-signature" data-canvas-id="firma-responsable-canvas" title="Limpiar firma">
                        <i class="fas fa-eraser"></i>
                    </button>
                </div>
            </div>
        </div>
        <footer class="form-actions">
            <button id="btn-siguiente" class="btn-primary">
                Aceptar y Siguiente <i class="fas fa-arrow-right"></i>
            </button>
            <div id="loading-spinner" class="spinner-container oculto">
                <div class="spinner"></div>
                <span>Procesando...</span>
            </div>
        </footer>
    </div>
</div>
{% endblock %}
{% block extras %}
    <div id="modal-firma" class="modal-overlay oculto">
        <div class="modal-contenido">
            <h3 class="modal-titulo">Por favor, firme en el recuadro</h3>
            <div class="modal-canvas-wrapper">
                <canvas id="modal-canvas-firma"></canvas>
            </div>
            <div class="modal-acciones">
                <button id="modal-btn-limpiar" class="btn-secondary">Limpiar</button>
                <button id="modal-btn-guardar" class="btn-primary">Guardar Firma</button>
            </div>
        </div>
    </div>
    
    <div id="scanner-modal" class="scanner-modal-overlay" style="display: none;">
        <div class="scanner-modal-content">
            <div class="scanner-header">
                <h3>Escanear Código de Zona</h3>
                <button id="scanner-close-btn" class="scanner-close-btn">&times;</button>
            </div>
            <div class="scanner-body">
                <div class="scanner-tabs">
                    <div class="scanner-tab active" data-tab="camera"><i class="fas fa-camera"></i> Cámara</div>
                    <div class="scanner-tab" data-tab="file"><i class="fas fa-image"></i> Archivo</div>
                </div>
                <div id="tab-content-camera" class="scanner-tab-content active">
                    <div id="qr-reader-camera"></div>
                </div>
                <div id="tab-content-file" class="scanner-tab-content">
                    <label for="qr-input-file" class="file-scanner-label"><i class="fas fa-upload"></i> Seleccionar Imagen</label>
                    <input type="file" id="qr-input-file" accept="image/*" style="display: none;">
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/signature_pad@4.1.7/dist/signature_pad.umd.min.js"></script>
    <script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>
    <script type="module" src="{% static 'descargo_responsabilidad/js/form_controller.js' %}"></script>
{% endblock %}