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

{% block title %}JRV Carga Electoral{% endblock %}
{% block active %}sidebar_reportes_jrv_carga_electoral{% endblock %}

{% block content %}

<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-flag mr-1"></i> Listado JRV y su Carga 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-flag mr-1"></i> Listado JRV y su Carga
                        Electoral</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

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

    <div class="row">
        <div class="table-responsive">

            <table id="jrvTable" 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>Carga Electoral</th>
                        <th>JRV</th>
                        <th>Centro Votacion</th>
                        <th>CSE</th>
                        <th>Sector Electoral</th>
                        <th>Area</th>
                        <th>CM</th>
                        <th>Municipio</th>
                        <th>CD</th>
                        <th>Departamento</th>
                    </tr>
                </thead>
                <tbody class="small"></tbody>
                <tfoot>
                    <tr>
                        <th>Carga Electoral</th>
                        <th>JRV</th>
                        <th>Centro Votacion</th>
                        <th>CSE</th>
                        <th>Sector Electoral</th>
                        <th>Area</th>
                        <th>CM</th>
                        <th>Municipio</th>
                        <th>CD</th>
                        <th>Departamento</th>
                    </tr>
                </tfoot>
            </table>

        </div>
    </div>

</section>

{% endblock %}

{% block scripts %}
<script>
    $(document).ready(function () {
        var buttons = "Bfrtlip";

        var csrfToken = "{{ csrf_token }}";

        var toastMixin = Swal.mixin({
            toast: true,
            icon: 'success',
            title: 'General Title',
            animation: false,
            position: 'top-right',
            showConfirmButton: false,
            timer: 2000,
            timerProgressBar: true,
            didOpen: (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer)
                toast.addEventListener('mouseleave', Swal.resumeTimer)
            }
        });

        let dollarUSLocale = Intl.NumberFormat("en-US", {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });

        let intergerLocale = Intl.NumberFormat("en-US", {
            minimumFractionDigits: 0,
            maximumFractionDigits: 0
        });


        empresa = "{{empresa}}";
        opc = "{{opc}}";

        jrvTable = $("#jrvTable").DataTable({
            autoWidth: false,
            scrollX: true,
            scrollY: '300px',
            scrollCollapse: true,
            pageLength: 50,
            dom: 'Brftip',
            orderCellsTop: true,  // Permite filtros en el `tfoot`
            buttons: [
                { extend: 'copy', className: 'btn btn-secondary btn-sm', text: '<i class="fas fa-copy"></i>' },
                { extend: 'excel', className: 'btn btn-success btn-sm', text: '<i class="fas fa-file-excel"></i>', attr: { style: 'background-color: #218838; border-color: #218838;' } },
                { extend: 'pdf', className: 'btn btn-danger btn-sm', text: '<i class="fas fa-file-pdf"></i>' },
                { extend: 'print', className: 'btn btn-info btn-sm', text: '<i class="fas fa-print"></i>' },
                {
                    extend: 'colvis',
                    text: '<i class="fas fa-eye"></i>',
                    className: 'btn btn-primary btn-sm'
                }
            ],
            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();
                                }
                            });
                    }
                });
            },
            ajax: {
                url: `{% url 'dataJRVCargaElectoral' %}`,
                type: "POST",
                dataScr: 'data',
                data: {
                    empresa: empresa,
                    opc: opc,
                    csrfmiddlewaretoken: csrfToken
                },
            },
            columns: [
                {
                    data: 'carga'
                },
                {
                    data: 'JRV',
                    className: 'text-wrap'
                },
                {
                    data: 'centro_de_votacion',
                    className: 'text-wrap'
                },
                {
                    data: 'codigo_sector_electoral',
                    className: 'text-wrap'
                },
                {
                    data: 'sector_electoral',
                    className: 'text-wrap'
                },
                {
                    data: 'area',
                    className: 'text-wrap'
                },
                {
                    data: 'codigo_municipio',
                    className: 'text-wrap'
                },
                {
                    data: 'nombre_municipio',
                    className: 'text-wrap'
                },
                {
                    data: 'codigo_departamento',
                    className: 'text-wrap'
                },
                {
                    data: 'nombre_departamento',
                    className: 'text-wrap'
                },

            ],
        });


    });
</script>
{% endblock %}