{% 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="row" id="cardContainerPagos">
    <!-- Aquí se insertarán las tarjetas dinámicamente -->
</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
        });


        function renderPagosCards(dataArray) {
            var html = "";

            dataArray.forEach(function (row, index) {
                let estadoClass = "badge bg-secondary";
                if (row.estado_pago == 1) estadoClass = "badge bg-primary";
                else if (row.estado_pago == 2) estadoClass = "badge bg-success";
                else if (row.estado_pago == 3) estadoClass = "badge bg-danger";
                else if (row.estado_pago == 4) estadoClass = "badge bg-dark";

                html += `
                <div class="col-12 col-md-6 col-lg-4 mb-4">
                    <div class="card shadow-lg border-0 w-100 h-100">
                        <div class="card-body">
                            <h5 class="card-title text-muted fw-bold mb-1">#${row.pk_pago}</h5>
                            <h6 class="card-subtitle mb-2 text-dark">${row.mes_pago} ${row.anio}</h6>
                            <p class="card-text text-muted mb-2">Monto: <strong>${row.valor != null ? row.valor + ' LPS' : '0.00'}</strong></p>
                            <p class="mb-2">Estado: <span class="${estadoClass}">${row.estado_pago_verbosed}</span></p>

                            <div class="d-flex justify-content-end gap-2">
                                <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>
                    </div>
                </div>`;
            });

            $('#cardContainerPagos').html((html) ? html : `<span class="badge bg-warning text-dark">No hay Pagos Disponibles!</span>`);
        }

        // 🚀 Cargar desde AJAX
        function fetchPagosData() {
            $.ajax({
                url: `{% url 'control_list_pagos_x_negocio' %}`,
                type: "POST",
                data: {
                    csrfmiddlewaretoken: "{{ csrf_token }}"
                },
                beforeSend: function () {
                    $('#loading').show();
                },
                success: function (data) {
                    renderPagosCards(data.data);
                },
                complete: function () {
                    $('#loading').hide();
                }
            });
        }

        // Ejecutar al cargar
        $(document).ready(function () {
            fetchPagosData();
        });

        // Eventos
        $(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 %}