{% extends 'menu/menu.html' %}
{% load static %}


{% block title %} Mis Pagos de Suscripción {% endblock %}

{% block body %}

<h4 class=" mb-4 fw-bold text-center">Mis Pagos de Suscripción</h4>


<div class="d-flex justify-content-end d-none">
    <div class="col-sm-2">
        <a type="button" href="{% url 'mapsViewer' 0 0 %}" class="btn btn-sm btn-danger w-100">Nuevo</a>
    </div>
</div>

<br>

<div class="row">
    <div class="table-responsive">
        <table id="tablePagos" class="table table-striped table-bordered mb-0 table-sm rounded-4 table-hover align-middle" style="width: 100%;">
            <thead class="table-gradient text-dark">
                <tr>
                    <th>#</th>
                    <th>Mes de Pago</th>
                    <th>Monto Total</th>
                    <th>Estado</th> <!-- pagado o abierto -->
                    <th>Acciones</th>
                </tr>
            </thead>

            <tbody>

            </tbody>
        </table>
    </div>
</div>

{% endblock %}



{% block scripts %}


<script>
    $(document).ready(function () {
        var buttons = "frtlip";

        var maps_id = 0;
        var csrfToken = "{{ csrf_token }}";
        var user_id = "{{ user_id }}";
        var tipo_usuario = "{{ tipo_usuario }}";
        var userName = "{{ userName }}";

        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
        });


        let tableSuscripciones = $("#tablePagos").DataTable({
            scrollX: true,
            scrollCollapse: true,
            scrollY: '400px',
            pageLength: 50,
            initComplete: function () {

            },
            ajax: {
                beforeSend: function (xhr, type) {
                    // loading layer
                    $('#loading').show();

                    if (!type.crossDomain) {
                        xhr.setRequestHeader(
                            'X-CSRF-Token',
                            $(
                                'meta[name="csrf-token"]'
                            ).attr('content'));
                    }
                },
                url: `{% url 'control_list_pagos_x_negocio' %}`,
                type: "POST",
                dataSrc: 'data',
                data: {
                    csrfmiddlewaretoken: csrfToken
                },
                complete: function (data) {
                    // loading layer
                    $('#loading').hide();
                }
            },
            // data: [
            //     {
            //         pk_pago: 1,
            //         mes_pago: 'Noviembre',
            //         valor: 1300.00,
            //         estado_pago: 2
            //     },
            //     {
            //         pk_pago: 1,
            //         mes_pago: 'Diciembre',
            //         valor: 1820.15,
            //         estado_pago: 3
            //     },
            //     {
            //         pk_pago: 1,
            //         mes_pago: 'Enero',
            //         valor: 594.05,
            //         estado_pago: 1
            //     },
            // ],
            dom: buttons,
            language: {
                url: "//cdn.datatables.net/plug-ins/1.11.5/i18n/es-ES.json",
            },
            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: 'pk_pago'
                },
                {

                    data: null,
                    // className: 'text-center',
                    render: function (data, type, row) {
                        return row.mes_pago + ' ' + row.anio;
                    },
                    width: '60%'
                },
                {
                    data: 'valor',
                    className: 'text-center',
                    render: function (data, type, row) {
                        return data + ' LPS';
                    },
                }, {
                    data: 'estado_pago',
                    className: 'text-center',
                    render: function (data, type, row) {
                        var badge = "";
                        if (data == 1) {
                            badge +=
                                `<span class="badge bg-primary" style="font-size: 0.85rem;">${row.estado_pago_verbosed}</span>`;
                        } else if (data == 2) {
                            badge +=
                                `<span class="badge bg-success" style="font-size: 0.85rem;">${row.estado_pago_verbosed}</span>`;
                        } else if (data == 3) {
                            badge +=
                                `<span class="badge bg-danger" style="font-size: 0.85rem;">${row.estado_pago_verbosed}</span>`;
                        } else if (data == 4) {
                            badge +=
                                `<span class="badge bg-secondary" style="font-size: 0.85rem;">${row.estado_pago_verbosed}</span>`;
                        }

                        return badge;
                    },
                },
                {
                    data: null,
                    className: 'text-center',
                    render: function (data, type, row) {
                        return `<div class='text-center'>
                            <div class='btn-group'>
                                <button class='btn btn-sm btn-info btnViewPago'data-id='${row.pk_pago}' title='Inspeccionar el pago'><i class='material-icons'>visibility</i></button>
                                <button class='btn btn-sm btn-danger btnPrintPago'data-id='${row.pk_pago}' title='Reimprimir voucher'><i class='material-icons'>print</i></button>
                                ${row.estado_pago != 2 ? `<button class='btn btn-sm btn-success btnPayPago d-none' data-id='${row.pk_pago}' title='Pagar factura'><i class="material-icons">payment</i></button>` : ''}
                            </div>
                        </div>`;
                    },
                }
            ],
        });




        $(document).on('click', '.btnViewPago', function () {
            let pago_id = parseInt($(this).data('id'));

            window.location = "{% url 'control_suscripcion' 0 %}".replace("/0", `/${pago_id}`);
        });

        $(document).on('click', '.btnPrintPago', function () {
            let pago_id = parseInt($(this).data('id'));

            window.location = "{% url 'control_print_suscripcion' 0 %}".replace("/0", `/${pago_id}`);
        });



    });
</script>

<script>
    $(window).on("pageshow", function (event) {
        // Esto ocurre cuando se navega hacia atrás o hacia adelante (caché de sesión activado)
        if (event.originalEvent.persisted) {
            let tableSuscripciones = $("#tablePagos").DataTable();
            tableSuscripciones.ajax.reload(null, false); // Recarga los datos sin cambiar la página actual
        }
    });
</script>





{% endblock %}