{% 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="#">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 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">
                    <button type="submit" class="btn btn-primary">Consultar Estado de Cuenta</button>
                    <button class="btn btn-default float-sm-right mt-1 mt-sm-0">Imprimir Estado de Cuenta</button>
                </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="table-responsive p-2">
                        <table class="table table-bordered table-hover">
                            <thead class="text-white" style="background-color: #A3B0C7 !important;">
                                <tr>
                                    <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>
                        </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>Los intereses se calculan sobre el saldo promedio mensual</li>
                                <li>El pago mínimo corresponde al todavia no</li>
                                <li>Fecha límite de pago: <span data-id="fecha_pago"></span></li>
                            </ul>
                        </div>
                        <div class="col-md-6 text-right">
                            <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><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_DISPONIBLE: 'SALDO DISPONIBLE'
        , 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_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 i_saldo_anterior = $('#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 EG = {};
    let MES_ACTUAL = GET_ACTUAL_ANIO_MES();

    let i_tabla = i_card_movimientos.find('table').DataTable({
        order: [],
        // data: data_rows,
        columns: [
            {
                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_DISPONIBLE || data.concepto === subrows.INTERES_SOBREGIRO || data.concepto === subrows.INTERES_MORATORIO) {
                $(row).addClass('table-active 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) {
                    EG = response.result;

                    SELECT2_NOAJAX('periodo_corte', {
                        opt_list: EG.meses_gastos_json,
                        map: (row) => ({ id: row, text: row }),
                        selected_id: MES_ACTUAL
                    });


                    i_fecha_corte_container.show();
                    load_estado_cuenta(MES_ACTUAL);
                }


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

<script>
    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(EC.credito_disponible_nacional, MONEDA_NACIONAL));
        // i_pago_minimo.text(DINERO(EC.pago_minimo, MONEDA_NACIONAL));
        // i_saldo_anterior.text(DINERO(EC.saldo_anterior, MONEDA_NACIONAL));
        // i_total_cargos.text(DINERO(EC.id_tarjetas_gastos_sum, MONEDA_NACIONAL));
        // i_total_abonos.text(DINERO(EC.id_tarjetas_pagos_sum, MONEDA_NACIONAL));
        // i_credito_final.text(DINERO(EC.credito_final, 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_DISPONIBLE,
            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.clear();
        i_tabla.rows.add(data_rows).draw();


        i_estado_cuenta.show();
        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 %}