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

{% block head %}
<script src="https://cdn.tailwindcss.com"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />

<!-- Incluir flatpickr CSS -->
<link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet">
<!-- Incluir flatpickr JS -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<!-- Incluir idioma español de flatpickr -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/es.js"></script>

<style>
    .bg-light {
        background-color: #C2C7CC;
    }
</style>
{% endblock %}

{% block title %}Crear Acta Electoral{% endblock %}
{% block active %}sidebar_elecciones_proceso_acta_crear{% endblock %}

{% block content %}
<!-- Content Header (Page header) -->
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1><i class="nav-icon fas fa-file-signature mr-1"></i> Crear Acta Electoral</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{% url 'dashboard_votaciones' %}">Inicio</a></li>
                    <li class="breadcrumb-item active"><i class="nav-icon fas fa-file-signature mr-1"></i> Crear Acta Electoral</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

<!-- Main content -->
<section class="content">

    <!-- block content -->
    <!-- Default box -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title"><b>Votaciones Internas Honduras 2025</b> - Formulario de registro de acta electoral</h3>
        </div>
        <div class="card-body">

            <div id="blocked" style="display: none;" class="alert alert-info alert-dismissible">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                <h5><i class="icon fas fa-info"></i> Alert!</h5>
                Esta página ya se ha mostrado antes. Si desea ver esta acta o editarla acceda a ella navegando desde la página que corresponda.
            </div>

            <form method="post" enctype="multipart/form-data">
                {% csrf_token %}
                <input type="hidden" name="pk_acta" value="">
                <input type="hidden" name="pk_proceso" value="{{pk_proceso}}">
                <input type="hidden" name="pk_partido" value="{{pk_partido}}">
                <input type="hidden" name="pk_jrv" value="{{pk_jrv}}">
                <input type="hidden" name="pk_tipo" value="{{pk_tipo}}">
                <input type="hidden" name="url_foto" value="">
                <input type="hidden" name="fecha_hora_inicio" value="">
                <input type="hidden" name="fecha_hora_finalizacion" value="">
                <input type="hidden" name="cantidad_papeletas_recibidas" value="">
                <input type="hidden" name="cantidad_papeletas_sobrantes" value="">
                <input type="hidden" name="cantidad_papeletas_utilizadas" value="">
                <input type="hidden" name="cantidad_votantes_ciudadanos" value="">
                <input type="hidden" name="cantidad_votantes_jrv" value="">
                <input type="hidden" name="cantidad_votantes_informaticos_electorales" value="">
                <input type="hidden" name="cantidad_votantes_total" value="">
                <input type="hidden" name="cantidad_votos_en_blanco" value="">
                <input type="hidden" name="cantidad_votos_nulos" value="">
                <input type="hidden" name="cantidad_votos_total" value="">
                <input type="hidden" name="cantidad_papeletas_validas" value="">
                <input type="hidden" name="cantidad_papeletas_en_blanco" value="">
                <input type="hidden" name="cantidad_papeletas_nulas" value="">

                <div class="d-none justify-content-between align-items-center mb-2">
                    <p class="text-muted mb-0">
                        <i class="fas fa-info-circle"></i> Mientras vea este mensaje, solo usted tiene permiso para editar esta acta. Nadie más podrá modificarla hasta que la libere.
                    </p>
                    <!-- Botón para liberar la edición alineado a la derecha -->
                    <button id="btn_liberar_acta" type="button" class="btn btn-danger" data-toggle="tooltip" title="Liberar este registro de la edición">
                        <i class="fas fa-lock-open"></i> Liberar Acta y Cancelar Edición
                    </button>
                </div>


                <!-- ACTA DE CIERRE DIPUTADOS -->
                <div class="bg-gray-100 p-4">
                    <div class="max-w-4xl mx-auto bg-white p-6 shadow-md">
                        <div class="flex justify-between items-stretch h-full">
                            <div class="w-2/12 h-full flex flex-col justify-between">
                                <img alt="Logo CNE" height="50" src="{% static 'img/cne_logo.png' %}" />
                                <br>
                                <img id="partido_foto" alt="Emblema Partido" height="100" src="https://placehold.co/100x100" width="100" />
                            </div>
                            <div class="text-center w-8/12">
                                <h1 class="text-xl font-bold">
                                    <div class="border border-black p-3 mb-1 inline-block">
                                        ACTA DE CIERRE DIPUTADOS
                                    </div>
                                </h1>
                                <p>
                                    <span id="departamento_nombre"></span>
                                </p>
                                <p>
                                    <span id="municipio_nombre"></span>
                                </p>
                                <p>
                                    <span id="area_nombre"></span>
                                </p>
                                <p>
                                    <span id="sector_nombre"></span>
                                </p>
                                <p>
                                    <span id="centrovotacion_nombre"></span>
                                </p>
                            </div>
                            <div class="w-2/12">
                                <img alt="Logo Elecciones Primarias 2025" height="50" src="{% static 'img/elecciones_primarias_2025.jpeg' %}" />
                                <div class="border border-black p-2 block ml-auto" style="width: 100px; height: 100px;">
                                    <!-- <img alt="QR Code" height="50" src="https://placehold.co/50x50" width="50" />     -->
                                </div>
                            </div>
                        </div>
                        <div class="flex justify-between items-center mb-4">
                            <div class="w-1/2">
                                <p class="text-lg text-bold">
                                    JRV N° <span id="jrv_codigo"></span>
                                </p>
                            </div>
                            <div class="w-1/2 text-right">
                                <p>
                                    CÓDIGO QR
                                </p>
                            </div>
                        </div>
                        <div class="mb-4">
                            <div class="flex justify-between items-center mb-2">
                                <div class="w-1/2">
                                    <p>
                                        INICIO DEL ESCRUTINIO
                                    </p>
                                    <div class="border border-black p-2 inline-block">
                                        <input placeholder="Seleccione una hora" type="text" id="fecha_hora_inicio"
                                            class="p-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
                                    </div>
                                </div>
                                <div class="w-1/2 text-right">
                                    <p>
                                        FINALIZACIÓN DEL ESCRUTINIO
                                    </p>
                                    <div class="border border-black p-2 inline-block">
                                        <input placeholder="Seleccione una hora" type="text" id="fecha_hora_finalizacion"
                                            class="p-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- SECCION I -->
                        <div class="mb-4 d-none">
                            <h2 class="text-lg font-bold mb-2">
                                I. BALANCE GENERAL
                            </h2>
                            <table class="w-full border-collapse border border-gray-400 mb-4">
                                <thead>
                                    <tr>
                                        <th class="border border-gray-400 p-1 text-center text-sm" style="width: 40%;">
                                            PAPELETAS
                                        </th>
                                        <th class="border border-gray-400 p-1 text-center text-sm" style="width: 30%;">
                                            EN NÚMEROS
                                        </th>
                                        <th class="border border-gray-400 p-1 text-center text-sm" style="width: 30%;">
                                            EN LETRAS
                                        </th>
                                    </tr>
                                </thead>
                                <tbody class="text-center">
                                    <tr id="papeletas_recibidas">
                                        <td class="bg-light border border-gray-400 p-1 text-sm text-end pr-3">
                                            RECIBIDAS SEGÚN ACTA DE APERTURA
                                        </td>
                                        <td class="border border-gray-400 p-1">
                                            <div class="grid grid-cols-3 gap-1">
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                            </div>
                                        </td>
                                        <td class="border border-gray-400 p-1">
                                            <div class="grid grid-cols-3 gap-1">
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr id="papeletas_sobrantes">
                                        <td class="bg-light border border-gray-400 p-1 text-sm text-end pr-3">
                                            <div class="float-start ml-3">(-)</div>
                                            <div class="float-end">NO UTILIZADAS / SOBRANTES</div>
                                        </td>
                                        <td class="border border-gray-400 p-1">
                                            <div class="grid grid-cols-3 gap-1">
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                            </div>
                                        </td>
                                        <td class="border border-gray-400 p-1">
                                            <div class="grid grid-cols-3 gap-1">
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr id="papeletas_utilizadas">
                                        <td class="bg-light border border-gray-400 p-1 text-sm text-end pr-3">
                                            UTILIZADAS
                                        </td>
                                        <td class="border border-gray-400 p-1">
                                            <div class="grid grid-cols-3 gap-1">
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                            </div>
                                        </td>
                                        <td class="border border-gray-400 p-1">
                                            <div class="grid grid-cols-3 gap-1">
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <table class="w-full border-collapse border border-gray-400">
                                <thead>
                                    <tr>
                                        <th class="border border-gray-400 p-1 text-center text-sm" style="width: 40%;">
                                            VOTANTES
                                        </th>
                                        <th class="border border-gray-400 p-1 text-center text-sm" style="width: 30%;">
                                            EN NÚMEROS
                                        </th>
                                        <th class="border border-gray-400 p-1 text-center text-sm" style="width: 30%;">
                                            EN LETRAS
                                        </th>
                                    </tr>
                                </thead>
                                <tbody class="text-center">
                                    <tr id="votantes_ciudadanos">
                                        <td class="bg-light border border-gray-400 p-1 text-sm text-end pr-3">
                                            CIUDADANOS QUE VOTARON SEGÚN CUADERNO DE VOTACIÓN
                                        </td>
                                        <td class="border border-gray-400 p-1">
                                            <div class="grid grid-cols-3 gap-1">
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                            </div>
                                        </td>
                                        <td class="border border-gray-400 p-1">
                                            <div class="grid grid-cols-3 gap-1">
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr id="votantes_jrv">
                                        <td class="bg-light border border-gray-400 p-1 text-sm text-end pr-3">
                                            <div class="float-start ml-3">(+)</div>
                                            <div class="float-end">MIEMBROS JRV</div>
                                        </td>
                                        <td class="border border-gray-400 p-1">
                                            <div class="grid grid-cols-3 gap-1">
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                            </div>
                                        </td>
                                        <td class="border border-gray-400 p-1">
                                            <div class="grid grid-cols-3 gap-1">
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr id="votantes_informaticos_electorales">
                                        <td class="bg-light border border-gray-400 p-1 text-sm text-end pr-3">
                                            <div class="float-start ml-3">(+)</div>
                                            <div class="float-end">CUSTODIOS INFORMÁTICOS ELECTORALES</div>
                                        </td>
                                        <td class="border border-gray-400 p-1">
                                            <div class="grid grid-cols-3 gap-1">
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                            </div>
                                        </td>
                                        <td class="border border-gray-400 p-1">
                                            <div class="grid grid-cols-3 gap-1">
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr id="votantes_total_DUPLICADO">
                                        <td class="bg-light border border-gray-400 p-1 text-bold text-sm text-end pr-3">
                                            TOTAL VOTANTES
                                        </td>
                                        <td class="border border-gray-400 p-1">
                                            <div class="grid grid-cols-3 gap-1">
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                            </div>
                                        </td>
                                        <td class="border border-gray-400 p-1">
                                            <div class="grid grid-cols-3 gap-1">
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>


                        <!-- SECCION II -->
                        <div class="mb-4">
                            <h2 class="text-lg font-bold mb-2 d-none">
                                II. RESULTADOS DEL ESCRUTINIO
                            </h2>
                            <table id="table_candidatos" class="w-full border-collapse border border-gray-400">
                                <thead>
                                    <tr>
                                        <th class="border border-gray-400 p-1 text-center text-sm" style="width: 40%;">
                                            VOTOS
                                        </th>
                                        <th class="border border-gray-400 p-1 text-center text-sm" style="width: 30%;">
                                            EN NÚMEROS
                                        </th>
                                        <th class="border border-gray-400 p-1 text-center text-sm" style="width: 30%;">
                                            EN LETRAS
                                        </th>
                                    </tr>
                                </thead>
                                <tbody class="text-center">
                                    <tr id="votos_en_blanco" class="d-none">
                                        <td class="bg-light border border-gray-400 p-1 text-bold text-sm text-end pr-3">
                                            <div class="float-start ml-3">(+)</div>
                                            <div class="float-end">VOTOS EN BLANCO</div>
                                        </td>
                                        <td class="border border-gray-400 p-1">
                                            <div class="grid grid-cols-3 gap-1">
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                            </div>
                                        </td>
                                        <td class="border border-gray-400 p-1">
                                            <div class="grid grid-cols-3 gap-1">
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr id="votos_nulos" class="d-none">
                                        <td class="bg-light border border-gray-400 p-1 text-bold text-sm text-end pr-3">
                                            <div class="float-start ml-3">(+)</div>
                                            <div class="float-end">VOTOS NULOS</div>
                                        </td>
                                        <td class="border border-gray-400 p-1">
                                            <div class="grid grid-cols-3 gap-1">
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                            </div>
                                        </td>
                                        <td class="border border-gray-400 p-1">
                                            <div class="grid grid-cols-3 gap-1">
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr id="votos_total" class="d-none">
                                        <td class="bg-light border border-gray-400 p-1 text-bold text-sm text-end pr-3">
                                            GRAN TOTAL
                                        </td>
                                        <td class="border border-gray-400 p-1">
                                            <div class="grid grid-cols-3 gap-1">
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                            </div>
                                        </td>
                                        <td class="border border-gray-400 p-1">
                                            <div class="grid grid-cols-3 gap-1">
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <!-- SECCION PAPELETAS -->
                        <div class="mb-4">
                            <h2 class="text-lg font-bold mb-2 d-none">
                                II. RESULTADOS DEL ESCRUTINIO
                            </h2>
                            <table id="table_papeletas" class="w-full border-collapse border border-gray-400">
                                <thead>
                                    <tr>
                                        <th class="border border-gray-400 p-1 text-center text-sm" style="width: 40%;">
                                            TÍTULO
                                        </th>
                                        <th class="border border-gray-400 p-1 text-center text-sm" style="width: 30%;">
                                            EN NÚMEROS
                                        </th>
                                        <th class="border border-gray-400 p-1 text-center text-sm" style="width: 30%;">
                                            EN LETRAS
                                        </th>
                                    </tr>
                                </thead>
                                <tbody class="text-center">
                                    <tr id="papeletas_nulas">
                                        <td class="bg-light border border-gray-400 p-1 text-bold text-sm text-end pr-3">
                                            <div class="float-start ml-3"></div>
                                            <div class="float-end">PAPELETAS NULAS</div>
                                        </td>
                                        <td class="border border-gray-400 p-1">
                                            <div class="grid grid-cols-3 gap-1">
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                            </div>
                                        </td>
                                        <td class="border border-gray-400 p-1">
                                            <div class="grid grid-cols-3 gap-1">
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr id="papeletas_en_blanco">
                                        <td class="bg-light border border-gray-400 p-1 text-bold text-sm text-end pr-3">
                                            <div class="float-start ml-3"></div>
                                            <div class="float-end">PAPELETAS EN BLANCO</div>
                                        </td>
                                        <td class="border border-gray-400 p-1">
                                            <div class="grid grid-cols-3 gap-1">
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                            </div>
                                        </td>
                                        <td class="border border-gray-400 p-1">
                                            <div class="grid grid-cols-3 gap-1">
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr id="papeletas_validas">
                                        <td class="bg-light border border-gray-400 p-1 text-bold text-sm text-end pr-3">
                                            PAPELETAS VÁLIDAS
                                        </td>
                                        <td class="border border-gray-400 p-1">
                                            <div class="grid grid-cols-3 gap-1">
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                            </div>
                                        </td>
                                        <td class="border border-gray-400 p-1">
                                            <div class="grid grid-cols-3 gap-1">
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr id="votantes_total">
                                        <td class="bg-light border border-gray-400 p-1 text-bold text-sm text-end pr-3">
                                            TOTAL DE VOTANTES
                                        </td>
                                        <td class="border border-gray-400 p-1">
                                            <div class="grid grid-cols-3 gap-1">
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                                </div>
                                            </div>
                                        </td>
                                        <td class="border border-gray-400 p-1">
                                            <div class="grid grid-cols-3 gap-1">
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                                <div class="border border-gray-400 p-1">
                                                    <span>CERO</span>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>


                        <!-- SECCION III -->
                        <div class="mb-4 mx-auto" style="width: 100%;">
                            <!-- <h2 class="text-lg font-bold mb-2">
                                III. CARGOS
                            </h2> -->
                            <table class="w-full border-collapse border border-gray-400">
                                <thead>
                                    <tr>
                                        <th class="border border-gray-400 p-2 text-center text-sm" style="width: 15% !important">
                                            CARGOS
                                        </th>
                                        <th class="border border-gray-400 p-2 text-center text-sm" style="width: 40% !important">
                                            NOMBRES Y APELLIDOS
                                        </th>
                                        <th class="border border-gray-400 p-2 text-center text-sm" style="width: 30% !important">
                                            NÚMERO DE DOCUMENTO NACIONAL DE IDENTIFICACIÓN
                                        </th>
                                        <th class="border border-gray-400 p-2 text-center text-sm" style="width: 15% !important">
                                            FIRMA
                                        </th>
                                    </tr>
                                </thead>
                                <tbody class="text-center">
                                    <tr>
                                        <td class="bg-light border border-gray-400 p-2 text-bold text-sm">
                                            PRESIDENTE <br>PROPIETARIO
                                        </td>
                                        <td class="border border-gray-400 p-2">
                                            <span id="presidente_nombre"></span>
                                        </td>
                                        <td class="border border-gray-400 p-2">
                                            <span id="presidente_identidad"></span>
                                        </td>
                                        <td class="border border-gray-400 p-2">
                                            <!-- <img class="mx-auto" alt="Firma de Kevin Rolando Perera Diaz" height="40" src="https://placehold.co/120x40" width="120" /> -->
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="bg-light border border-gray-400 p-2 text-sm">
                                            PRESIDENTE <br>SUPLENTE
                                        </td>
                                        <td class="border border-gray-400 p-2">
                                            <span id="presidente_suplente_nombre"></span>
                                        </td>
                                        <td class="border border-gray-400 p-2">
                                            <span id="presidente_suplente_identidad"></span>
                                        </td>
                                        <td class="border border-gray-400 p-2">
                                            <!-- <img class="mx-auto" alt="Firma de Emila Maribal Rios Lagos" height="40" src="https://placehold.co/120x40" width="120" /> -->
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="bg-light border border-gray-400 p-2 text-bold text-sm">
                                            SECRETARIO <br>PROPIETARIO
                                        </td>
                                        <td class="border border-gray-400 p-2">
                                            <span id="secretario_nombre"></span>
                                        </td>
                                        <td class="border border-gray-400 p-2">
                                            <span id="secretario_identidad"></span>
                                        </td>
                                        <td class="border border-gray-400 p-2">
                                            <!-- <img class="mx-auto" alt="Firma de Maira Lin Montenegro Bu" height="40" src="https://placehold.co/120x40" width="120" /> -->
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="bg-light border border-gray-400 p-2 text-sm">
                                            SECRETARIO <br>SUPLENTE
                                        </td>
                                        <td class="border border-gray-400 p-2">
                                            <span id="secretario_suplente_nombre"></span>
                                        </td>
                                        <td class="border border-gray-400 p-2">
                                            <span id="secretario_suplente_identidad"></span>
                                        </td>
                                        <td class="border border-gray-400 p-2">
                                            <!-- <img class="mx-auto" alt="Firma de Yolanda Ana Clemente Paz" height="40" src="https://placehold.co/120x40" width="120" /> -->
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="bg-light border border-gray-400 p-2 text-bold text-sm">
                                            ESCRUTADOR <br>PROPIETARIO
                                        </td>
                                        <td class="border border-gray-400 p-2">
                                            <span id="escrutador_nombre"></span>
                                        </td>
                                        <td class="border border-gray-400 p-2">
                                            <span id="escrutador_identidad"></span>
                                        </td>
                                        <td class="border border-gray-400 p-2">
                                            <!-- <img class="mx-auto" alt="Firma de Denis Esai Rosales Marin" height="40" src="https://placehold.co/120x40" width="120" /> -->
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="bg-light border border-gray-400 p-2 text-sm">
                                            ESCRUTADOR <br>SUPLENTE
                                        </td>
                                        <td class="border border-gray-400 p-2">
                                            <span id="escrutador_suplente_nombre"></span>
                                        </td>
                                        <td class="border border-gray-400 p-2">
                                            <span id="escrutador_suplente_identidad"></span>
                                        </td>
                                        <td class="border border-gray-400 p-2">
                                            <!-- <img class="mx-auto" alt="Firma de Maria Fernanda Lopez" height="40" src="https://placehold.co/120x40" width="120" /> -->
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="bg-light border border-gray-400 p-2 text-bold text-sm">
                                            VOCAL I <br>PROPIETARIO
                                        </td>
                                        <td class="border border-gray-400 p-2">
                                            <span id="vocal1_nombre"></span>
                                        </td>
                                        <td class="border border-gray-400 p-2">
                                            <span id="vocal1_identidad"></span>
                                        </td>
                                        <td class="border border-gray-400 p-2">
                                            <!-- <img class="mx-auto" alt="Firma de Juan Carlos Martinez" height="40" src="https://placehold.co/120x40" width="120" /> -->
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="bg-light border border-gray-400 p-2 text-sm">
                                            VOCAL I <br>SUPLENTE
                                        </td>
                                        <td class="border border-gray-400 p-2">
                                            <span id="vocal1_suplente_nombre"></span>
                                        </td>
                                        <td class="border border-gray-400 p-2">
                                            <span id="vocal1_suplente_identidad"></span>
                                        </td>
                                        <td class="border border-gray-400 p-2">
                                            <!-- <img class="mx-auto" alt="Firma de Ana Maria Gonzalez" height="40" src="https://placehold.co/120x40" width="120" /> -->
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="bg-light border border-gray-400 p-2 text-bold text-sm">
                                            VOCAL II <br>PROPIETARIO
                                        </td>
                                        <td class="border border-gray-400 p-2">
                                            <span id="vocal2_nombre"></span>
                                        </td>
                                        <td class="border border-gray-400 p-2">
                                            <span id="vocal2_identidad"></span>
                                        </td>
                                        <td class="border border-gray-400 p-2">
                                            <!-- <img class="mx-auto" alt="Firma de Luis Alberto Ramirez" height="40" src="https://placehold.co/120x40" width="120" /> -->
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="bg-light border border-gray-400 p-2 text-sm">
                                            VOCAL II <br>SUPLENTE
                                        </td>
                                        <td class="border border-gray-400 p-2">
                                            <span id="vocal2_suplente_nombre"></span>
                                        </td>
                                        <td class="border border-gray-400 p-2">
                                            <span id="vocal2_suplente_identidad"></span>
                                        </td>
                                        <td class="border border-gray-400 p-2">
                                            <!-- <img class="mx-auto" alt="Firma de Carmen Lucia Perez" height="40" src="https://placehold.co/120x40" width="120" /> -->
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <br>

                <div class="form-group border rounded border-gray-400 p-2 w-75 mx-auto">
                    <label for="foto">Foto</label>
                    <div class="mb-2">
                        <img id="foto_img" src="{% static 'img/no-image.jpg' %}" alt="Previsualización" class="img-fluid border rounded" style="max-height: 200px;">
                    </div>
                    <div class="input-group">
                        <input type="file" data-subir="1" class="form-control" id="foto" name="foto" accept="image/*">
                        <div class="input-group-append">
                            <span id="foto_tomar" class="input-group-text bg-primary" style="cursor: pointer;" title="Tomar fotografía"><i class="fas fa-camera"></i></span>
                        </div>
                        <div class="input-group-append">
                            <span id="foto_clear" class="input-group-text bg-danger" style="cursor: pointer;" title="Limpiar imagen"><i class="fas fa-trash"></i></span>
                        </div>
                    </div>
                </div>

                <button type="submit" class="btn btn-primary float-right">Guardar</button>

            </form>

        </div>
        <!-- /.card-body -->
        <div class="card-footer">
            <b>Votaciones Internas Honduras 2025</b> - Actas Electorales
        </div>
        <!-- /.card-footer-->
    </div>
    <!-- /.card -->

</section>
<!-- /.content -->
{% endblock %}

{% block scripts %}
<script>
    window.onpageshow = function () {
        if (history.state && history.state.paginaUnica) {
            // Esta es la misma página que ya estaba abierta
            $('form').hide();
            $('#blocked').show();
        } else {
            // Esta es una nueva instancia de la página
            history.replaceState({ paginaUnica: true }, "", location.href);
        }
    };
</script>

<script>
    $('#btn_liberar_acta').click(function () {
        AJAX_REQUEST('{% url "control_elecciones_proceso_acta" %}', 'POST', {
            pk_proceso: PK_ELECCIONES_PROCESO_DEFAULT,
            pk_partido: PK_PARTIDO_DEFAULT,
            pk_jrv: '{{pk_jrv}}',
            pk_tipo: '{{pk_tipo}}',
            opc: 2 // 2 es liberar
        }, function (response) {
            window.location.href = document.referrer + '?swalsuccess';
        });
    });


    let numerosEnTexto = ["CERO", "UNO", "DOS", "TRES", "CUATRO", "CINCO", "SEIS", "SIETE", "OCHO", "NUEVE"];

    function getSQLdatetime(id) {
        let fecha = $('#' + id).val();

        // Convierte la fecha en formato "d/m/Y - h:i K" a "YYYY-MM-DD HH:mm:ss"
        var partes = fecha.split(" - "); //  ['07/03/2025', '12:05 AM']
        var fechaPartes = partes[0].split("/"); // ['07', '03', '2025']
        var horaPartes = partes[1].split(":"); // ['12', '05 AM']

        var dia = fechaPartes[0];
        var mes = fechaPartes[1];
        var año = fechaPartes[2];

        var hora = horaPartes[0];
        var minuto = horaPartes[1].slice(0, 2);
        var ampm = partes[1].trim().slice(-2);

        if (ampm === "PM" && hora < 12) {
            hora = parseInt(hora) + 12;
        } else if (ampm === "AM" && hora == 12) {
            hora = 0;
        }

        if (hora.length == 1) hora = '0' + hora

        // Ajustamos el formato a "YYYY-MM-DD HH:mm:ss"
        var fechaFormateada = `${año}-${mes}-${dia} ${hora}:${minuto}:00`;

        return fechaFormateada;
    }

    function setSQLdatetime(valor) {
        if (!valor) return '';

        // Crear objeto Date desde el string
        let fecha = new Date(valor);

        // Obtener componentes de la fecha
        let dia = fecha.getDate().toString().padStart(2, '0');
        let mes = (fecha.getMonth() + 1).toString().padStart(2, '0'); // Los meses van de 0 a 11
        let año = fecha.getFullYear();

        // Obtener componentes de la hora
        let hora24 = fecha.getHours();
        let minuto = fecha.getMinutes().toString().padStart(2, '0');

        // Convertir a formato de 12 horas con AM/PM
        let ampm = hora24 >= 12 ? 'PM' : 'AM';
        let hora12 = hora24 % 12 || 12; // Convierte 0 en 12 para el formato AM/PM

        return `${dia}/${mes}/${año} - ${hora12}:${minuto} ${ampm}`;
    }

    function toFlatpickerTime(fechaISO) {
        // Crear un objeto Date con la fecha en formato ISO
        const fecha = new Date(fechaISO);

        // Obtener los valores de día, mes, año, horas, minutos y AM/PM
        const day = fecha.getDate();
        const month = fecha.getMonth() + 1; // Los meses en JavaScript empiezan desde 0
        const year = fecha.getFullYear();
        const hours = fecha.getHours();
        const minutes = fecha.getMinutes();
        const ampm = hours >= 12 ? 'PM' : 'AM';

        // Convertir las horas a formato de 12 horas
        const hours12 = hours % 12 || 12; // Convierte las horas a formato de 12 horas (12 en vez de 0)

        // Formatear minutos para que siempre tengan dos dígitos
        const minutesFormatted = minutes < 10 ? '0' + minutes : minutes;

        // Retornar la fecha en el formato deseado
        return `${day}/${month}/${year} - ${hours12}:${minutesFormatted} ${ampm}`;
    }

    function casillaToText(obj) {
        let value = obj.val(); // Obtener el valor del input
        let parentTd = obj.closest('td'); // Encontrar el <td> padre
        let index = parentTd.find('input[type="text"]').index(obj[0]); // Índice del input en su grupo

        // Buscar el <td> correspondiente en la misma fila y actualizar el <span>
        let correspondingSpan = parentTd.siblings().find('span').eq(index);
        correspondingSpan.text(value !== '' ? numerosEnTexto[parseInt(value)] : 'CERO'); // Convertir número a texto
    }

    function getConteoFila(id) {
        if ($('#' + id).length == 0) return null;

        // Obtener los valores de las papeletas utilizadas
        let centenas = $(`#${id} input`).eq(0).val() || 0;
        let decenas = $(`#${id} input`).eq(1).val() || 0;
        let unidades = $(`#${id} input`).eq(2).val() || 0;

        let total = (parseInt(centenas) * 100) + (parseInt(decenas) * 10) + parseInt(unidades);

        return total;
    }

    function setConteoFila(id, total) {
        let centenas = Math.floor(total / 100);
        let decenas = Math.floor((total % 100) / 10);
        let unidades = total % 10;

        $(`#${id} input`).eq(0).val(centenas);
        $(`#${id} input`).eq(1).val(decenas);
        $(`#${id} input`).eq(2).val(unidades);

        casillaToText($(`#${id} input`).eq(0));
        casillaToText($(`#${id} input`).eq(1));
        casillaToText($(`#${id} input`).eq(2));
    }


    function getConteoFilaTR(obj) {
        if (obj.length == 0) return null;

        // Obtener los valores de los inputs dentro de la fila (obj)
        let centenas = obj.find('input[type!="hidden"]').eq(0).val() || 0;
        let decenas = obj.find('input[type!="hidden"]').eq(1).val() || 0;
        let unidades = obj.find('input[type!="hidden"]').eq(2).val() || 0;

        let total = (parseInt(centenas) * 100) + (parseInt(decenas) * 10) + parseInt(unidades);

        return total;
    }

    function setConteoFilaTR(obj, total) {
        // Calculamos las centenas, decenas y unidades
        let centenas = Math.floor(total / 100);
        let decenas = Math.floor((total % 100) / 10);
        let unidades = total % 10;

        // Actualizamos los valores de los inputs en la fila del objeto
        obj.find('input[type!="hidden"]').eq(0).val(centenas);
        obj.find('input[type!="hidden"]').eq(1).val(decenas);
        obj.find('input[type!="hidden"]').eq(2).val(unidades);

        // Llamamos a la función casillaToText para cada input actualizado
        casillaToText(obj.find('input[type!="hidden"]').eq(0));
        casillaToText(obj.find('input[type!="hidden"]').eq(1));
        casillaToText(obj.find('input[type!="hidden"]').eq(2));
    }


</script>

<script>
    // READ
    if (new URLSearchParams(window.location.search).get('opc') == 4) $('section.content').find('button[type="submit"]').hide();
    // EDITAR
    if (new URLSearchParams(window.location.search).get('opc') == 2) $('#btn_liberar_acta').parent().removeClass('d-none').addClass('d-flex');

    let pk_acta = new URLSearchParams(window.location.search).get('pk_acta');

    if (pk_acta != null) {
        $('[name="pk_acta"]').val(pk_acta);
        AJAX_REQUEST('{% url "list_elecciones_proceso_acta" %}', 'GET', { id: pk_acta }, function (response) {
            // IF PK
            if (response.result.length != 0) {
                response = response.result[0];

                $('[name="fecha_hora_inicio"]').val(response.fecha_hora_inicio);
                $('[name="fecha_hora_finalizacion"]').val(response.fecha_hora_finalizacion);

                $('#fecha_hora_inicio')[0]._flatpickr.setDate(toFlatpickerTime(response.fecha_hora_inicio), false);
                $('#fecha_hora_finalizacion')[0]._flatpickr.setDate(toFlatpickerTime(response.fecha_hora_finalizacion), false);
                setConteoFila('papeletas_recibidas', response.cantidad_papeletas_recibidas);
                setConteoFila('papeletas_sobrantes', response.cantidad_papeletas_sobrantes);
                setConteoFila('papeletas_utilizadas', response.cantidad_papeletas_utilizadas);
                setConteoFila('votantes_ciudadanos', response.cantidad_votantes_ciudadanos);
                setConteoFila('votantes_jrv', response.cantidad_votantes_jrv);
                setConteoFila('votantes_informaticos_electorales', response.cantidad_votantes_informaticos_electorales);
                setConteoFila('votantes_total', response.cantidad_votantes_total);
                setConteoFila('votos_en_blanco', response.cantidad_votos_en_blanco);
                setConteoFila('votos_nulos', response.cantidad_votos_nulos);
                setConteoFila('votos_total', response.cantidad_votos_total);
                setConteoFila('papeletas_validas', response.cantidad_papeletas_validas);
                setConteoFila('papeletas_en_blanco', response.cantidad_papeletas_en_blanco);
                setConteoFila('papeletas_nulas', response.cantidad_papeletas_nulas);

                $('[name="url_foto"]').val(response.url_foto);
                FILE_LOAD('foto', response.url_foto);

            } else {
                // No deberia poder usar esta página (PK roto)
            }
        })
    }
    // CREATE
    else {
        $('#btn_liberar_acta').parent().removeClass('d-none').addClass('d-flex');
    }

    AJAX_REQUEST('{% url "list_jrv" %}', 'GET', { id: '{{pk_jrv}}' }, function (response) {
        if (response.result.length != 0) {
            response = response.result[0];

            $('#departamento_nombre').html(response.pk_departamento_nombre)
            $('#municipio_nombre').html(response.pk_municipio_nombre)
            $('#area_nombre').html(response.pk_sector_es_urbana ? 'AREA URBANA' : 'AREA RURAL')
            $('#sector_nombre').html(response.pk_sector_nombre)
            $('#centrovotacion_nombre').html(response.centro_votacion_nombre)
            $('#jrv_codigo').html(response.codigo);
        } else {
            // No deberia poder usar esta página (PK roto)
        }
    });

    AJAX_REQUEST('{% url "list_partidos" %}', 'GET', { id: '{{pk_partido}}' }, function (response) {
        if (response.result.length != 0) {
            response = response.result[0];

            if (response.url_foto) $('#partido_foto').attr('src', response.url_foto);
        } else {
            // No deberia poder usar esta página (PK roto)
        }
    });

    AJAX_REQUEST('{% url "list_candidatos_x_partido" %}', 'GET', {
        pk_proceso: '{{pk_proceso}}',
        pk_tipo: 2, // candidatos_tipo.pk_tipo
        pk_partido: '{{pk_partido}}',
        pk_acta: pk_acta,
        pk_jrv: '{{pk_jrv}}'
    }, function (response) {
        let tableBody = $("#table_candidatos tbody");

        if (response.result.length != 0) {
            let prevMovimiento = null; // Variable para almacenar el movimiento anterior

            response.result.forEach(function (item, index) {
                // Insertar separador si es el primer registro o el movimiento es diferente
                if (prevMovimiento !== null && prevMovimiento !== item.pk_movimiento) {
                    let separatorRow = `
                        <tr>
                            <td colspan="3" class="bg-gray-300 text-center font-bold p-2">
                                Movimiento: ${item.movimiento_nombre}
                            </td>
                        </tr>
                    `;
                    tableBody.append(separatorRow);
                }
                if (prevMovimiento === null) {
                    let separatorRow = `
                        <tr>
                            <td colspan="3" class="bg-gray-300 text-center font-bold p-2">
                                Movimiento: ${item.movimiento_nombre}
                            </td>
                        </tr>
                    `;
                    tableBody.append(separatorRow);
                }

                let newRow = `
                    <tr>
                        <input type="hidden" name="pk_candidato" value="${item.pk_candidato}">
                        <input type="hidden" name="pk_candidato_conteo" value="${item.votos}">
                        <td class="bg-light border border-gray-400 p-1 flex justify-between items-center text-sm">
                            <b class="text-left">${item.nombres} ${item.apellidos}</b>
                            <img alt="Logo Movimiento" src="${item.movimiento_url_foto || 'https://placehold.co/56x28'}" height="28" width="56" class="ml-auto mr-1" />
                            <div class="border border-black p-1 inline-block">
                                <b>${FILL_CEROS(item.casilla, 3)}</b>
                            </div>
                        </td>
                        <td class="border border-gray-400 p-1">
                            <div class="grid grid-cols-3 gap-1">
                                <div class="border border-gray-400 p-1">
                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                </div>
                                <div class="border border-gray-400 p-1">
                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                </div>
                                <div class="border border-gray-400 p-1">
                                    <input type="text" maxlength="1" placeholder="0" class="w-100 text-center" min="0">
                                </div>
                            </div>
                        </td>
                        <td class="border border-gray-400 p-1">
                            <div class="grid grid-cols-3 gap-1">
                                <div class="border border-gray-400 p-1">
                                    <span>CERO</span>
                                </div>
                                <div class="border border-gray-400 p-1">
                                    <span>CERO</span>
                                </div>
                                <div class="border border-gray-400 p-1">
                                    <span>CERO</span>
                                </div>
                            </div>
                        </td>
                    </tr>
                `;

                tableBody.append(newRow);

                // Actualizar el movimiento anterior para la siguiente iteración
                prevMovimiento = item.pk_movimiento;
            });
        } else {
            tableBody.empty();
            tableBody.append('<tr><td colspan="3" class="text-center p-2">No hay candidatos disponibles</td></tr>');
        }


        // ✅ EN ESTE PUNTO TODOS LOS INPUT ESTAN CARGADOS EN LA PÁGINA
        $('[name="pk_candidato"]').each(function (index, element) {
            let tr = $(element).parent();
            setConteoFilaTR(tr, tr.find('[name="pk_candidato_conteo"]').val());
        });

        $('input[type="text"]:not(#fecha_hora_inicio):not(#fecha_hora_finalizacion)')
            .inputmask({
                mask: '9', // Permite solo un dígito (0-9)
                showMaskOnHover: false, // Evita mostrar la máscara al pasar el cursor
                showMaskOnFocus: false // Evita mostrar la máscara al enfocar el input
            })
            .on('keydown', function (e) {
                // Si es un número (0-9), borra el valor actual para sobrescribirlo
                if (e.key >= '0' && e.key <= '9') {
                    $(this).val(''); // Borra el contenido antes de escribir el nuevo número
                }
            })
            .on('input', function () {
                casillaToText($(this));
                let value = $(this).val(); // Obtener el valor del input

                // Mover foco al siguiente input si ya ingresó un número
                if (value.length === 1) {
                    let inputs = $('input[type="text"]'); // Obtener todos los inputs en orden
                    let inputIndex = inputs.index(this); // Encontrar la posición del input actual

                    if (inputIndex < inputs.length - 1) {
                        inputs.eq(inputIndex + 1).focus(); // Mover el foco al siguiente input
                    }
                }
            });
    });

    AJAX_REQUEST('{% url "list_roles_x_jrv" %}', 'GET', { jrv_id: '{{pk_jrv}}' }, function (response) {
        if (response.result.length != 0) {
            response = response.result;

            // 1	Presidente
            // 2	Secretario
            // 3	Escrutador
            // 4	Vocal I
            // 5	Presidente Suplente
            // 6	Secretario Suplente
            // 7	Escrutador Suplente
            // 8	Vocal I Suplente

            let presidente = response.find(item => item.rol_jrv_id === 1)
            let presidente_suplente = response.find(item => item.rol_jrv_id === 5)
            let secretario = response.find(item => item.rol_jrv_id === 2)
            let secretario_suplente = response.find(item => item.rol_jrv_id === 6)
            let escrutador = response.find(item => item.rol_jrv_id === 3)
            let escrutador_suplente = response.find(item => item.rol_jrv_id === 7)
            let vocal1 = response.find(item => item.rol_jrv_id === 4)
            let vocal1_suplente = response.find(item => item.rol_jrv_id === 8)
            // let vocal2 = response.find(item => item.rol_jrv_id === 9)
            // let vocal2_suplente = response.find(item => item.rol_jrv_id === 10)


            let placeholder = '';

            $('#presidente_nombre').html(presidente ? presidente.Miembro : placeholder);
            $('#presidente_identidad').html(presidente ? presidente.MiembroDNI : placeholder);
            $('#presidente_suplente_nombre').html(presidente_suplente ? presidente_suplente.Miembro : placeholder);
            $('#presidente_suplente_identidad').html(presidente_suplente ? presidente_suplente.MiembroDNI : placeholder);
            $('#secretario_nombre').html(secretario ? secretario.Miembro : placeholder);
            $('#secretario_identidad').html(secretario ? secretario.MiembroDNI : placeholder);
            $('#secretario_suplente_nombre').html(secretario_suplente ? secretario_suplente.Miembro : placeholder);
            $('#secretario_suplente_identidad').html(secretario_suplente ? secretario_suplente.MiembroDNI : placeholder);
            $('#escrutador_nombre').html(escrutador ? escrutador.Miembro : placeholder);
            $('#escrutador_identidad').html(escrutador ? escrutador.MiembroDNI : placeholder);
            $('#escrutador_suplente_nombre').html(escrutador_suplente ? escrutador_suplente.Miembro : placeholder);
            $('#escrutador_suplente_identidad').html(escrutador_suplente ? escrutador_suplente.MiembroDNI : placeholder);
            $('#vocal1_nombre').html(vocal1 ? vocal1.Miembro : placeholder);
            $('#vocal1_identidad').html(vocal1 ? vocal1.MiembroDNI : placeholder);
            $('#vocal1_suplente_nombre').html(vocal1_suplente ? vocal1_suplente.Miembro : placeholder);
            $('#vocal1_suplente_identidad').html(vocal1_suplente ? vocal1_suplente.MiembroDNI : placeholder);
            // $('#vocal2_nombre').html(vocal2 ? vocal2.Miembro : placeholder);
            // $('#vocal2_identidad').html(vocal2 ? vocal2.MiembroDNI : placeholder);
            // $('#vocal2_suplente_nombre').html(vocal2_suplente ? vocal2_suplente.Miembro : placeholder);
            // $('#vocal2_suplente_identidad').html(vocal2_suplente ? vocal2_suplente.MiembroDNI : placeholder);
        } else {
            // No deberia poder usar esta página (PK roto)
        }
    });

    flatpickr("#fecha_hora_inicio, #fecha_hora_finalizacion", {
        enableTime: true,
        noCalendar: false,
        dateFormat: "d/m/Y - h:i K", // Formato con AM/PM (K es para AM/PM)
        time_24hr: false, // Desactiva el formato de 24 horas, activando el AM/PM
        locale: "es", // Configura el idioma a español
        minuteIncrement: 1,
    });

    // AÑadir evento
    FILE_ONCHANGE_SUBIBLE('foto');

    // Añadir evento
    FOTO_ONCHANGE_PREVIEW('foto', 'foto_img');

    // ON CLICK TOMAR FOTO
    $('#foto_tomar').on('click', function () {
        TOMAR_FOTO('foto', 'Tomar Fotografía del Acta Electoral');
    })

    // ON CLICK LIMPIAR
    $('#foto_clear').on('click', function () {
        $("[name='foto']").val('').trigger("change");
    })

    $('section.content form').submit(function (event) {
        event.preventDefault();

        if ($('#fecha_hora_inicio').val() == '') {
            Swal.fire('Todavía falta', 'Por favor ingrese la hora de inicio del escrutinio', 'warning');
            return;
        }
        if ($('#fecha_hora_finalizacion').val() == '') {
            Swal.fire('Todavía falta', 'Por favor ingrese la hora de finalización del escrutinio', 'warning');
            return;
        }

        $('[name="fecha_hora_inicio"]').val(getSQLdatetime('fecha_hora_inicio'));
        $('[name="fecha_hora_finalizacion"]').val(getSQLdatetime('fecha_hora_finalizacion'));
        $('[name="cantidad_papeletas_recibidas"]').val(getConteoFila('papeletas_recibidas'));
        $('[name="cantidad_papeletas_sobrantes"]').val(getConteoFila('papeletas_sobrantes'));
        $('[name="cantidad_papeletas_utilizadas"]').val(getConteoFila('papeletas_utilizadas'));
        $('[name="cantidad_votantes_ciudadanos"]').val(getConteoFila('votantes_ciudadanos'));
        $('[name="cantidad_votantes_jrv"]').val(getConteoFila('votantes_jrv'));
        $('[name="cantidad_votantes_informaticos_electorales"]').val(getConteoFila('votantes_informaticos_electorales'));
        $('[name="cantidad_votantes_total"]').val(getConteoFila('votantes_total'));
        $('[name="cantidad_votos_en_blanco"]').val(getConteoFila('votos_en_blanco'));
        $('[name="cantidad_votos_nulos"]').val(getConteoFila('votos_nulos'));
        $('[name="cantidad_votos_total"]').val(getConteoFila('votos_total'));
        $('[name="cantidad_papeletas_validas"]').val(getConteoFila('papeletas_validas'));
        $('[name="cantidad_papeletas_en_blanco"]').val(getConteoFila('papeletas_en_blanco'));
        $('[name="cantidad_papeletas_nulas"]').val(getConteoFila('papeletas_nulas'));

        $('[name="pk_candidato"]').each(function (index, element) {
            let tr = $(element).parent();
            tr.find('[name="pk_candidato_conteo"]').val(getConteoFilaTR(tr));
        });


        if ($('[name="foto"]').data('subir') == 1) $('[name="url_foto"]').val(null);

        AJAX_FORM(this, '{% url "save_elecciones_proceso_acta" %}', document.referrer, pk_acta == null ? 1 : 2);
    });
</script>
{% endblock %}