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

{% 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 d-flex align-items-center">
            <h3 class="card-title"><b>Votaciones Internas Honduras 2025</b> - Formulario de registro de acta electoral</h3>
            <button id="btnActualizar" class="btn btn-primary btn-sm ml-auto">
                <i class="fas fa-sync-alt mr-1"></i> Actualizar Estado de las Actas
            </button>
        </div>

        <div class="card-body">
            <!-- <form method="post">
                {% csrf_token %}
                <div class="row">
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label for="pk_proceso">Proceso Electoral</label>
                            <select class="form-control select2bs4" id="pk_proceso" name="pk_proceso"></select>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label for="pk_partido">Partido Político</label>
                            <select class="form-control select2bs4" id="pk_partido" name="pk_partido"></select>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label for="pk_jrv">Junta Receptora de Votos (JRV)</label>
                            <select class="form-control select2bs4" id="pk_jrv" name="pk_jrv"></select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <div class="form-group">
                            <label for="pk_tipo">Tipo de Acta Electoral</label>
                            <select class="form-control select2bs4" id="pk_tipo" name="pk_tipo"></select>
                        </div>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">Guardar</button>
            </form> -->

            <form method="post" class="d-none" id="form_acta">
                {% csrf_token %}
                <input type="hidden" name="pk_proceso">
                <input type="hidden" name="pk_partido">
                <input type="hidden" name="pk_jrv">
                <input type="hidden" name="pk_tipo">
            </form>

            <div class="table-responsive">
                <table class="table table-hover table-sm align-middle table-borderless rounded-3" style="width: 100%;">
                    <thead class="text-white" style="background-color: #A3B0C7 !important;">
                        <tr>
                            <th>#</th>
                            <th>Junta Receptora de Votos (JRV)</th>
                            <th>Acta Presidencial</th>
                            <th>Acta Diputados</th>
                            <th>Acta Municipal</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                    <tfoot>
                        <tr>
                            <th>#</th>
                            <th>Junta Receptora de Votos (JRV)</th>
                            <th>Acta Presidencial</th>
                            <th>Acta Diputados</th>
                            <th>Acta Municipal</th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </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>
    SELECT2_ELECCIONES_PROCESO('pk_proceso', PK_ELECCIONES_PROCESO_DEFAULT);
    SELECT2_PARTIDOS('pk_partido', PK_PARTIDO_DEFAULT);
    SELECT2_JRV('pk_jrv');
    SELECT2_ELECCIONES_PROCESO_ACTA_TIPO('pk_tipo');

    $('section.content form').validate({
        rules: {
            pk_proceso: {
                required: true,
            },
            pk_partido: {
                required: true,
            },
            pk_jrv: {
                required: true,
            },
            pk_tipo: {
                required: true,
            },
        },
        messages: {
            pk_proceso: {
                required: REQUIRED_MESSAGE,
            },
            pk_partido: {
                required: REQUIRED_MESSAGE,
            },
            pk_jrv: {
                required: REQUIRED_MESSAGE,
            },
            pk_tipo: {
                required: REQUIRED_MESSAGE,
            },
        },
        submitHandler: function (form) {
            form.submit();
            // AJAX_FORM(form, '{% url "save_elecciones_proceso_acta" %}', '{% url "listar_elecciones_proceso_acta" %}', pk_acta == null ? 1 : 2);
        }
    });
</script> -->

<script>
    let tabla = null;

    function crear_acta(pk_jrv, pk_tipo) {
        AJAX_REQUEST('{% url "validar_elecciones_proceso_acta" %}', 'POST', {
            pk_proceso: PK_ELECCIONES_PROCESO_DEFAULT,
            pk_partido: PK_PARTIDO_DEFAULT,
            pk_jrv: pk_jrv,
            pk_tipo: pk_tipo
        }, function (response) {
            console.log(response);
            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: 1 // 1 es tomar el cupo
            }, function (response) {
                $('[name="pk_proceso"]').val(PK_ELECCIONES_PROCESO_DEFAULT);
                $('[name="pk_partido"]').val(PK_PARTIDO_DEFAULT);
                $('[name="pk_jrv"]').val(pk_jrv);
                $('[name="pk_tipo"]').val(pk_tipo);
                $('#form_acta').submit();
            });
        }, function (response) {
            tabla.clear().draw(); // Limpia la tabla y la redibuja sin datos
            tabla.ajax.reload(null, false); // Recarga los datos sin reiniciar la paginación
        });
    }

    $(document).ready(function () {
        tabla = $('section.content table').DataTable({
            ajax: {
                url: '{% url "list_jrv" %}',
                type: "GET",
                dataSrc: "result"
            },
            autoWidth: false,
            scrollX: true,
            scrollY: '300px',
            scrollCollapse: true,
            pageLength: 50,
            dom: 'ftip',  // Aquí eliminamos la 'B' para quitar los botones
            orderCellsTop: true,  // Permite filtros en el `tfoot`
            initComplete: function () {
                // **Filtros en el tfoot**
                this.api().columns().every(function () {
                    var column = this;
                    var title = $(column.footer()).text().trim();

                    if (title !== "Acciones" && title !== "") {  // Evita filtros en la columna de Acciones
                        var input = $('<input class="form-control form-control-sm filterControl" type="text" placeholder="Filtrar ' + title + '" />')
                            .appendTo($(column.footer()).empty())
                            .on("keyup change clear", function () {
                                if (column.search() !== this.value) {
                                    column.search(this.value).draw();
                                }
                            });
                    }
                });
            },

            columns: [
                {
                    data: null,
                    render: function (data, type, row, meta) {
                        return meta.row + 1;
                    }
                },
                {
                    data: null,
                    render: function (data, type, row) {
                        return `${row.codigo} - ${row.ubicacion}`;
                    }
                },
                {
                    data: null,
                    render: function (data, type, row) {
                        return row.pk_acta_presidencial
                            ? `<a title="Ver Acta" href="{% url 'crear_elecciones_proceso_acta' %}?pk_acta=${row.pk_acta_presidencial}&opc=4" class="btn btn-sm btn-success w-100"> <i class="fas fa-check mr-2"></i>Acta Presidencial</button>`
                            : `<button onclick="crear_acta(${row.id}, 1)" class="btn btn-sm border border-success w-100">Crear Acta Presidencial</button>`;
                    }
                },
                {
                    data: null,
                    render: function (data, type, row) {
                        return row.pk_acta_diputados
                            ? `<a title="Ver Acta" href="{% url 'crear_elecciones_proceso_acta' %}?pk_acta=${row.pk_acta_diputados}&opc=4" class="btn btn-sm btn-success w-100"> <i class="fas fa-check mr-2"></i>Acta Diputados</button>`
                            : `<button onclick="crear_acta(${row.id}, 2)" class="btn btn-sm border border-success w-100">Crear Acta Diputados</button>`;
                    }
                },
                {
                    data: null,
                    render: function (data, type, row) {
                        return row.pk_acta_municipal
                            ? `<a title="Ver Acta" href="{% url 'crear_elecciones_proceso_acta' %}?pk_acta=${row.pk_acta_municipal}&opc=4" class="btn btn-sm btn-success w-100"> <i class="fas fa-check mr-2"></i>Acta Municipal</button>`
                            : `<button onclick="crear_acta(${row.id}, 3)" class="btn btn-sm border border-success w-100">Crear Acta Municipal</button>`;
                    }
                },
            ]
        });

        $('#btnActualizar').click(function () {
            tabla.clear().draw(); // Limpia la tabla y la redibuja sin datos
            tabla.ajax.reload(null, false); // Recarga los datos sin reiniciar la paginación
        });

    });

</script>
{% endblock %}