{% extends 'TARJETAS/templates/base.html' %}
{% load static %}

{% block title %}Estado de Cuenta - Tarjeta{% 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>Estado de Cuenta</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{% url 'tarjetas:screen_dashboard' %}">Inicio</a></li>
                    <li class="breadcrumb-item"><a href="{% url 'tarjetas:screen_tarjetas' %}">Tarjetas</a></li>
                    <li class="breadcrumb-item active">Estado de Cuenta</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <!-- Periodo Selector -->
        <div class="card card-primary mb-0">
            <div class="card-header">
                <h3 class="card-title">Seleccionar Periodo</h3>
            </div>
            <form method="post" action="{% url 'tarjetas:get_tarjetas_estados_cuentas'%}">
                {% csrf_token %}

                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-0">
                                <label>Tarjeta:</label>
                                <select class="form-control select2bs4" name="id_tarjeta"></select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-0 mt-3 mt-sm-0 display-none">
                                <label>Periodo de Corte:<span id="fecha_corte" class="d-none">(no ha seleccionado ninguna tarjeta):</span></label>
                                <select class="form-control select2" name="periodo_corte">
                                    <!-- Años 2025 -->
                                    <!-- <option value="2025-12">Diciembre 2025</option>
                                    <option value="2025-11">Noviembre 2025</option>
                                    <option value="2025-10">Octubre 2025</option>
                                    <option value="2025-09">Septiembre 2025</option>
                                    <option value="2025-08">Agosto 2025</option>
                                    <option value="2025-07">Julio 2025</option>
                                    <option value="2025-06">Junio 2025</option> -->
                                    <!-- <option value="2025-05">Mayo 2025</option>
                                    <option value="2025-04">Abril 2025</option>
                                    <option value="2025-03">Marzo 2025</option>
                                    <option value="2025-02">Febrero 2025</option>
                                    <option value="2025-01">Enero 2025</option>

                                    <!- Años 2024 ->
                                    <option value="2024-12">Diciembre 2024</option>
                                    <option value="2024-11">Noviembre 2024</option>
                                    <option value="2024-10">Octubre 2024</option>
                                    <option value="2024-09">Septiembre 2024</option>
                                    <option value="2024-08">Agosto 2024</option>
                                    <option value="2024-07">Julio 2024</option>
                                    <option value="2024-06">Junio 2024</option>
                                    <option value="2024-05">Mayo 2024</option>
                                    <option value="2024-04">Abril 2024</option>
                                    <option value="2024-03">Marzo 2024</option>
                                    <option value="2024-02">Febrero 2024</option>
                                    <option value="2024-01">Enero 2024</option> -->
                                </select>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="card-footer">
                    <div class="row">
                        <div class="col-sm d-flex d-sm-block">
                            <button class="btn btn-primary flex-grow-1 flex-sm-grow-0" type="submit"><i class="fas fa-search"></i> Consultar Estado de Cuenta</button>

                        </div>
                        <div class="col-sm d-flex d-sm-block">
                            <button class="btn btn-default flex-grow-1 flex-sm-grow-0 float-sm-right mt-2 mt-sm-0"><i class="fas fa-file-pdf"></i> Imprimir Estado de Cuenta</button>

                        </div>
                    </div>
                </div>
            </form>
        </div>

        <div id="estado_cuenta" class="display-none mt-3">
            <!-- Resumen General -->
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">Resumen del Periodo <span data-id="fecha_corte"></span></h3>
                </div>
                <div class="card-body">
                    <div class="title-info mb-2">
                        <span class="text-bold"><i class="fas fa-info-circle mr-2"></i>Detalles de la Tarjeta</span>
                    </div>

                    <div class="row">
                        <div class="col-md-3 col-sm-6">
                            <div class="info-box bg-light">
                                <span class="info-box-icon bg-info"><i class="fas fa-credit-card"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Número de la Tarjeta</span>
                                    <span class="info-box-number" id="tarjeta__numero">XXXX XXXX XXXX XXXX</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="info-box bg-light">
                                <span class="info-box-icon bg-info"><i class="fas fa-calendar-check"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Fecha de Corte</span>
                                    <span class="info-box-number" id="tarjeta__fecha_corte">--</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="info-box bg-light">
                                <span class="info-box-icon bg-info"><i class="fas fa-percentage"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">% Tasa de Interés Anual</span>
                                    <span class="info-box-number" id="tarjeta__tasa_interes_anual_nacional">0.00</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="info-box bg-light">
                                <span class="info-box-icon bg-info"><i class="fas fa-exclamation-circle"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">% Tasa de Interés Moratoria</span>
                                    <span class="info-box-number" id="tarjeta__tasa_interes_moratorio_anual">0.00</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="title-info mb-2">
                        <span class="text-bold"><i class="fas fa-info-circle mr-2"></i>Información del Corte</span>
                    </div>

                    <div class="row">
                        <div class="col-md-3 col-sm-6">
                            <div class="info-box bg-light mb-md-0">
                                <span class="info-box-icon bg-success"><i class="fas fa-wallet"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Límite de Crédito</span>
                                    <span class="info-box-number" id="tarjeta__limite_credito_nacional">0.00 ---</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="info-box bg-light mb-md-0">
                                <span class="info-box-icon bg-success"><i class="fas fa-hand-holding-usd"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Crédito Disponible</span>
                                    <span class="info-box-number" id="credito_disponible">0.00 ---</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="info-box bg-light mb-sm-0">
                                <span class="info-box-icon bg-success"><i class="fas fa-file-invoice-dollar"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Pago Mínimo</span>
                                    <span class="info-box-number" id="pago_minimo">0.00 ---</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="info-box bg-light mb-0">
                                <span class="info-box-icon bg-success"><i class="fas fa-calendar-day"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Fecha de Pago</span>
                                    <span class="info-box-number" data-id="fecha_pago">--</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Movimientos del Periodo -->
            <div id="card_movimientos" class="card">
                <div class="card-header">
                    <h3 class="card-title">Movimientos del Periodo</h3>
                </div>
                <div class="card-body p-0">
                    <div class="p-2">
                        <table class="table table-hover table-sm align-middle table-borderless rounded-3" style="width: 100%;">
                            <thead class="text-white">
                                <tr>
                                    <th>N°</th>
                                    <th>Fecha</th>
                                    <th>Concepto</th>
                                    <th>Referencia</th>
                                    <th>Cargos</th>
                                    <th>Abonos</th>
                                    <th>Saldo</th>
                                </tr>
                            </thead>
                            <tbody class="text-right">
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>N°</th>
                                    <th>Fecha</th>
                                    <th>Concepto</th>
                                    <th>Referencia</th>
                                    <th>Cargos</th>
                                    <th>Abonos</th>
                                    <th>Saldo</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
                <div class="card-footer">
                    <div class="row">
                        <div class="col-md-6">
                            <p class="text-muted"><strong>Notas:</strong></p>
                            <ul class="text-muted">
                                <li class="small">Los intereses se calculan sobre el saldo promedio mensual</li>
                                <li class="small">El pago mínimo corresponde al todavia no</li>
                                <li class="small">Fecha límite de pago: <span data-id="fecha_pago"></span></li>
                            </ul>
                        </div>
                        <div class="col-md-6 text-right">
                            <p><strong>Saldo Anterior:</strong> <span class="text-black" data-id="saldo_anterior"></span></p>
                            <p><strong>Total Cargos:</strong> <span class="text-danger" data-id="total_cargos"></span></p>
                            <p><strong>Total Abonos:</strong> <span class="text-success" data-id="total_abonos"></span></p>
                            <p><strong>Crédito Final:</strong> <span class="font-weight-bold" data-id="credito_final"></span></p>
                            <p class="d-none"><strong>Crédito Sobregirado:</strong> <span class="font-weight-bold" data-id="credito_sobregirado"></span></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block modals %}
<!-- Modal para detalles de movimiento -->
<div class="modal fade" id="modal-movimiento">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Detalles del Movimiento</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <dl class="row">
                    <dt class="col-sm-4">Fecha:</dt>
                    <dd class="col-sm-8">20/04/2023</dd>
                    <dt class="col-sm-4">Descripción:</dt>
                    <dd class="col-sm-8">Compra en Amazon</dd>
                    <dt class="col-sm-4">Referencia:</dt>
                    <dd class="col-sm-8">AMZN*MKTPLACE</dd>
                    <dt class="col-sm-4">Monto:</dt>
                    <dd class="col-sm-8">$1,250.00</dd>
                    <dt class="col-sm-4">Categoría:</dt>
                    <dd class="col-sm-8">Compras Online</dd>
                    <dt class="col-sm-4">Comercio:</dt>
                    <dd class="col-sm-8">Amazon México</dd>
                </dl>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary">Imprimir Comprobante</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    let subrows = {
        SALDO_ANTERIOR: 'SALDO ANTERIOR'
        , GASTO: 'GASTO'
        , PAGO: 'PAGO'
        , INTERES_MORATORIO: 'INTERÉS MORATORIO'
        , INTERES_SOBREGIRO: 'INTERÉS POR SOBREGIRO'
    }
</script>

<script>
    let i_fecha_corte = $('#fecha_corte');
    let i_fecha_corte_container = i_fecha_corte.parent().parent();
    let v_fecha_corte_text = $('#fecha_corte').text();
    let i_periodo_corte_select = $('[name="periodo_corte"]');

    let i_tarjeta__numero = $('#tarjeta__numero');
    let i_estado_cuenta = $('#estado_cuenta');
    let i_card_movimientos = $('#card_movimientos');

    let i_tarjeta__limite_credito_nacional = $('#tarjeta__limite_credito_nacional');
    let l_fecha_pago = $('[data-id="fecha_pago"]');
    let i_pago_minimo = $('#pago_minimo');
    let i_credito_disponible = $('#credito_disponible');
    let l_saldo_anterior = $('[data-id="saldo_anterior"]');

    let i_fecha_corte_verbosed = $('[data-id="fecha_corte"]');

    let i_total_cargos = $('[data-id="total_cargos"]');
    let i_total_abonos = $('[data-id="total_abonos"]');
    let i_credito_final = $('[data-id="credito_final"]');
    let i_credito_sobregirado = $('[data-id="credito_sobregirado"]');

    let i_tarjeta__fecha_corte = $('#tarjeta__fecha_corte');
    let i_tarjeta__tasa_interes_anual_nacional = $('#tarjeta__tasa_interes_anual_nacional');
    let i_tarjeta__tasa_interes_moratorio_anual = $('#tarjeta__tasa_interes_moratorio_anual');

    let EG = {};
    let MES_ACTUAL = GET_ACTUAL_ANIO_MES();

    let i_tabla = i_card_movimientos.find('table');
    i_tabla.DataTable({
        order: [],
        // responsive: true, // Habilita la respuesta en dispositivos pequeños
        autoWidth: false,
        scrollX: true,
        fixedColumns: {
            leftColumns: 1,     // 👈 ¡Importante! Evita que la primera quede fija
            rightColumns: 0     // 👉 Esto fija solo la última columna
        },
        scrollY: '350px',
        scrollCollapse: true,
        pageLength: 9,
        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();
                            }
                        });
                }
            });
        },
        // data: data_rows,
        columns: [
            {
                data: null,
                render: function (data, type, row, meta) {
                    return meta.row + 1;
                }
            },
            {
                data: null,
                render: function (data, type, row, meta) {
                    return DT.COL.handle_blank(FECHA_HORA(row.fecha_hora_creado, 3), '');
                }
            },
            {
                data: null,
                render: function (data, type, row) {
                    return DT.COL.handle_blank(row.concepto);
                }
            },
            {
                data: null,
                render: function (data, type, row) {
                    return DT.COL.handle_blank(row.referencia, '');
                }
            },
            {
                data: null,
                render: function (data, type, row) {
                    return `<span class="${row.cargo > 0 ? 'text-danger' : ''}">` + DINERO(row.cargo, row.moneda) + '</span>';
                }
            },
            {
                data: null,
                render: function (data, type, row) {
                    return `<span class="${row.abono > 0 ? 'text-success' : ''}">` + DINERO(row.abono, row.moneda) + '</span>';
                }
            },
            {
                data: null,
                render: function (data, type, row) {
                    let clase = 'text-success';

                    if (row.saldo < 0) {
                        clase = 'text-danger';
                    }

                    return `<span class="${clase}">${DINERO(row.saldo, row.moneda)}</span>`;
                }
            }
        ],
        rowCallback: function (row, data, index) {
            if (data.concepto === subrows.SALDO_ANTERIOR || data.concepto === subrows.INTERES_SOBREGIRO || data.concepto === subrows.INTERES_MORATORIO) {
                $(row).addClass('table-active text-bold');
            }
        },
        columnDefs: [
            {
                targets: [0, -1],            // índice de la primera columna
                // targets: -1,            // índice de la primera columna
                // targets: 0,            // índice de la primera columna
                // width: '30px',          // forzar ancho mínimo
                // width: '1px',          // forzar ancho mínimo
                className: 'text-bold text-nowrap'
            },
            // {
            //     targets: 1,
            //     className: 'text-bold'
            // }
        ],
    });


    $(document).ready(function () {
        SELECT2_TARJETAS('id_tarjeta', {
            onchange: function (e) {
                //
                let select = $(e.target); // el <select>
                let selectedOption = select.find('option:selected');
                let fechaCorte = selectedOption.data('fecha_corte');

                if (fechaCorte) {
                    i_fecha_corte.text(`(día ${fechaCorte}):`);
                } else {
                    i_fecha_corte.text(v_fecha_corte_text);
                }
            }
        });
    });

    $('.content form').validate({
        rules: {
            id_tarjeta: {
                required: true,
            },
            // periodo_corte: {
            //     required: true,
            // },
        },
        messages: {
            id_tarjeta: {
                required: REQUIRED_MESSAGE,
            },
            // periodo_corte: {
            //     required: REQUIRED_MESSAGE,
            // },
        },
        // Prevents submit del navegador
        submitHandler: function (form) {
            (async function () {
                let response = await sendFormAsAjax(form, { show_alert: false, as_crud_page: false });
                
                if (response.save == 1) {
                    i_fecha_corte_container.show();
                    EG = response.result;

                    SELECT2_NOAJAX('periodo_corte', {
                        opt_list: EG.meses_gastos_json,
                        map: (row) => ({ id: row, text: row }),
                        selected_id: EG.mes_actual,
                        onchange: function (e) {
                            i_estado_cuenta.hide();
                            let value = $(this).val();
                            
                            if(!value){
                                return;
                            }
                            
                            load_EG();
                            load_estado_cuenta(value);
                        }
                    });


                }


            })();
        }
    });
</script>

<script>
    function load_EG() {
        // console.log(EG);
        i_tarjeta__numero.text(EG.numero);
        i_tarjeta__fecha_corte.text(EG.fecha_corte);
        i_tarjeta__tasa_interes_anual_nacional.text(PORCENTAJE(EG.tasa_interes_anual_nacional))
        i_tarjeta__tasa_interes_moratorio_anual.text(PORCENTAJE(EG.tasa_interes_moratorio_anual))
        // i_tarjeta__limite_credito_nacional
        // i_credito_disponible
        // i_pago_minimo
        // l_fecha_pago
    }

    function load_estado_cuenta(mes) {
        let MONEDA = EG.moneda;
        let MONEDA_NACIONAL = EG.moneda_nacional;

        let EC = EG.estados_cuentas.find(ec => ec.mes === mes);

        i_tarjeta__limite_credito_nacional.text(DINERO(EG.limite_credito_nacional, MONEDA_NACIONAL));

        i_fecha_corte_verbosed.text(FECHA_VERBOSED(EC.fecha_corte));
        l_fecha_pago.text(FECHA_VERBOSED(EC.fecha_pago));
        i_credito_disponible.text(DINERO(parseFloat(EG.limite_credito_nacional) + parseFloat(EC.credito_disponible_nacional), MONEDA_NACIONAL));
        // i_pago_minimo.text(DINERO(EC.pago_minimo, MONEDA_NACIONAL));
        l_saldo_anterior.text(DINERO(EC.saldo_anterior, MONEDA_NACIONAL));
        i_total_cargos.text(DINERO(EC.gastos_sum, MONEDA_NACIONAL));
        i_total_abonos.text(DINERO(EC.pagos_sum, MONEDA_NACIONAL));
        i_credito_final.text(DINERO(EC.credito_disponible, MONEDA_NACIONAL));
        i_credito_sobregirado.text(DINERO(EC.credito_sobregirado, MONEDA_NACIONAL));

        //
        let data_rows = [];
        let saldo = EC.saldo_anterior || 0;

        // fecha
        // descripcion
        // referencia
        // cargos
        // abonos
        // saldo

        data_rows.push({
            fecha_hora_creado: undefined,
            concepto: subrows.SALDO_ANTERIOR,
            referencia: undefined,
            cargo: undefined,
            abono: undefined,
            saldo: saldo,
            moneda: MONEDA_NACIONAL
        });


        EC.gastos.forEach(obj => {
            // let gasto = obj.id_tarjeta_gasto_json;
            let gasto = obj;

            saldo -= gasto.monto;

            data_rows.push({
                fecha_hora_creado: gasto.fecha_hora_creado,
                concepto: subrows.GASTO,
                referencia: gasto.referencia,
                cargo: gasto.monto,
                abono: undefined,
                saldo: saldo,
                moneda: MONEDA_NACIONAL
            });
        });

        EC.pagos.forEach(obj => {
            // let pago = obj.id_tarjeta_pago_json;
            let pago = obj;

            saldo += pago.monto_pagado;

            data_rows.push({
                fecha_hora_creado: pago.fecha_hora_creado,
                concepto: subrows.PAGO,
                referencia: pago.referencia,
                cargo: undefined,
                abono: pago.monto_pagado,
                saldo: saldo,
                moneda: MONEDA_NACIONAL
            });
        });

        data_rows.push({
            fecha_hora_creado: undefined,
            concepto: subrows.INTERES_MORATORIO,
            referencia: undefined,
            cargo: undefined,
            abono: undefined,
            saldo: saldo,
            moneda: MONEDA_NACIONAL
        });

        data_rows.push({
            fecha_hora_creado: undefined,
            concepto: subrows.INTERES_SOBREGIRO,
            referencia: undefined,
            cargo: undefined,
            abono: undefined,
            saldo: saldo,
            moneda: MONEDA_NACIONAL
        });

        //
        // i_tabla.DataTable().clear();
        // i_tabla.DataTable().rows.add(data_rows)
        // .draw()
        // ;

        i_estado_cuenta.show();
        // i_tabla.DataTable().columns.adjust().draw();
        i_tabla.DataTable().clear();
        i_tabla.DataTable().rows.add(data_rows);
        i_tabla.DataTable().draw();
        i_tabla.DataTable().columns.adjust()
            // .responsive.recalc()
            ;

        SCROLL_TO(i_estado_cuenta);
    }

    $(function () {
        // DataTable para movimientos (si fuera necesario)
        // $('.table').DataTable({
        //     order: []
        // });

        // Ejemplo de manejo de clic en fila para mostrar modal
        $('table tbody tr').on('click', function () {
            $('#modal-movimiento').modal('show');
        });
    });
</script>
{% endblock %}