{% extends 'base.html' %}

{% block title %}Miembros Refieren{% endblock %}
{% block active %}sidebar_reportes_personas_refiere{% 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 de Miembros Refiere</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> Miembros Refiere</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

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

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

            <table id="miembrosTable" class="table table-striped table-bordered mb-0 table-sm rounded-4 table-hover"
                style="width: 100%;">
                <thead>
                    <tr>
                        <th>DNI Miembro</th>
                        <th>Nombre Miembro</th>
                        <th>DNI Refiere</th>
                        <th>Nombre Refiere</th>
                        <th>Tipo Miembro</th>
                        <th>Codigo Categoria Confianza</th>
                        <th>Categoria Confianza</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </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}}";

        miembrosTable = $("#miembrosTable").DataTable({
            autoWidth: false,
            scrollX: true,
            scrollY: '500px',
            scrollCollapse: true,
            pageLength: 50,
            dom: 'Blrftip',
            ajax: {
                url: `{% url 'dataMiembrosRefiereConfianza' %}`,
                type: "POST",
                dataScr: 'data',
                data: {
                    empresa: empresa,
                    opc: opc,
                    csrfmiddlewaretoken: csrfToken
                },
            },
            colReorder: {
                realtime: false,
            },
            buttons: [
                {
                    extend: 'excel',
                    text: '<i class="fas fa-file-excel"></i>',
                    titleAttr: 'Excel',
                    className: 'btn btn-success',
                },
                {
                    extend: 'pdf',
                    text: '<i class="fas fa-file-pdf"></i>',
                    titleAttr: 'PDF',
                    className: 'btn btn-danger',
                },
                {
                    extend: 'print',
                    text: '<i class="fas fa-print"></i>',
                    titleAttr: 'Imprimir',
                    className: 'btn btn-null',
                    orientation: 'landscape'
                }
            ],
            columns: [
                {
                    data: 'dni_miembro'
                },
                {
                    data: 'nombre_miembro',
                    className: 'text-wrap'
                },
                {
                    data: 'dni_referente'
                },
                {
                    data: 'nombre_referente',
                    className: 'text-wrap'
                },
                {
                    data: 'tipo_miembro',
                    className: 'text-wrap'
                },
                {
                    data: 'valor_categoria',
                    className: 'text-wrap'
                },
                {
                    data: 'nombre_categoria',
                    className: 'text-wrap'
                },

            ],
        });


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