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

{% block title %}Reporte de Gastos{% endblock %}

{% block content %}
<style>
    .chart-container-small {
        position: relative;
        width: 100%;
        max-width: 450px;
        height: 450px;
        margin: 0 auto;
    }

    /* Estilos básicos para la paginación */
    .js-pagination {
        display: flex;
        justify-content: center;
        list-style: none;
        padding: 0;
        margin-top: 1rem;
    }

    .js-pagination .number,
    .js-pagination .prev,
    .js-pagination .next {
        padding: 5px 10px;
        margin: 0 3px;
        cursor: pointer;
        border: 1px solid #ddd;
        background: #fff;
        border-radius: 3px;
    }

    .js-pagination .number.active {
        background: #007bff;
        color: #fff;
        border-color: #007bff;
    }

    .js-pagination .prev:disabled,
    .js-pagination .next:disabled {
        cursor: not-allowed;
        opacity: 0.5;
    }
</style>

<!-- Content Header -->
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Reporte de Gastos</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 active">Reporte de Gastos</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<!-- Main content -->
<section class="content">
    <div class="container-fluid">

        <!-- Selector de Tarjeta -->
        <div class="card card-primary mb-3">
            <div class="card-header">
                <h3 class="card-title">Seleccionar Tarjeta</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="id_tarjeta">Tarjeta:</label>
                            <select id="id_tarjeta" name="id_tarjeta" class="form-control select2bs4"></select>
                        </div>
                    </div>
                    <div class="col-md-6 display-none" id="mes_corte_container">
                        <div class="form-group">
                            <label for="mes_corte">Mes Corte:</label>
                            <select name="mes_corte" class="form-control select2bs4"></select>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Filtros y búsqueda -->
        <div id="filtros_gastos" class="d-none mb-3">
            <div class="row">
                <div class="col-md-4">
                    <input type="text" id="search_gastos" class="form-control" placeholder="Buscar descripción...">
                </div>
                <div class="col-md-8 text-right">
                    <div id="buttons_categorias" class="btn-group flex-nowrap overflow-auto py-2" style="max-width: 100%;">
                        <!-- Botones de categoría -->
                    </div>
                </div>
            </div>
        </div>

        <!-- Contenedor de Cards + Paginación -->
        <div id="cards_gastos_wrapper">
            <div id="cards_gastos" class="row">
                <!-- Aquí se inyectarán las tarjetas de gasto -->
            </div>
            <ul id="pagination_gastos" class="js-pagination"></ul>
        </div>

        <!-- Gráfico -->
        <div id="grafico_gastos" class="card card-info d-none">
            <div class="card-header">
                <h3 class="card-title">Distribución por Categoría</h3>
            </div>
            <div class="card-body">
                <div class="chart-container-small">
                    <canvas id="chartGastos"></canvas>
                </div>
            </div>
        </div>

    </div>
</section>
{% endblock %}

{% block scripts %}
<script>
    let chartGastos = null;

    $(function () {
        // Inicializa Select2 de tarjetas
        SELECT2_TARJETAS('id_tarjeta', {
            placeholder: 'Seleccione una tarjeta',
            allowClear: true,
            onchange(e) {
                $('#mes_corte_container').hide();
                $('[name="mes_corte"]').off('change');

                let id = $(e.target).val();
                id ? fetchMeses(id) : resetView();
            }
        });
    });

    function fetchMeses(id_tarjeta) {

        AJAX_REQUEST("{% url 'tarjetas:get_tarjetas_gastos_reportes' %}", 'GET', { id_tarjeta }, resp => {
            if (resp.save !== 1) return Swal.fire("Error", resp.result, "error");
            let data = resp.result;

            if (!data.meses_gastos_json.length) {
                Swal.fire("¡Tarjeta sin gastos!", "Esta tarjeta no tiene gastos.", "info");
                return resetView();
            }

            SELECT2_NOAJAX('mes_corte', {
                opt_list: data.meses_gastos_json,
                selected_id: data.mes_actual,
                allowClear: false,
                map: (row) => ({ id: row.mes, text: row.mes }),
                onmiloaded: function (e) {
                    $('#mes_corte_container').show();
                },
                onchange: function (e) {
                    let sel = $(e.target);
                    fetchGastos(id_tarjeta, sel.val());
                }
            })
        });
    }

    function fetchGastos(id_tarjeta, mesCorte = undefined) {
        AJAX_REQUEST("{% url 'tarjetas:get_tarjetas_gastos' %}", 'GET', { id_tarjeta }, resp => {
            if (resp.save !== 1) return Swal.fire("Error", resp.result, "error");

            let GASTOS = resp.result;

            if (mesCorte) {
                GASTOS = GASTOS.filter(g => g.mes_corte === mesCorte);
            }

            if (!GASTOS.length) {
                Swal.fire("¡Sin gastos este corte!", "Esta tarjeta no tiene gastos en el corte seleccionado.", "success");
                return resetView();
            }

            renderFilters(GASTOS);
            renderCards(GASTOS);
            renderChart(GASTOS);

            // Pagina 9 ítems por página
            generatePagination(
                '#pagination_gastos',
                '.js-pagination-item',
                6,
                'Anterior',
                'Siguiente'
            );

            $('#buttons_categorias, #filtros_gastos, #grafico_gastos').removeClass('d-none');
        });
    }

    function resetView() {
        $('#cards_gastos').empty();
        $('#pagination_gastos').empty();
        $('#buttons_categorias, #filtros_gastos, #grafico_gastos').addClass('d-none');
        if (chartGastos) {
            chartGastos.destroy(); chartGastos = null;
        }
    }

    function renderFilters(data) {
        let cats = [...new Set(data.map(g => g.id_tarjeta_gasto_categoria_json.nombre))];
        let $btns = $('#buttons_categorias').empty();
        $btns.append(`<button class="btn btn-info active" data-cat="">TODAS</button>`);
        cats.forEach(cat => $btns.append(`<button class="btn btn-info text-nowrap" data-cat="${cat}">${cat}</button>`));
        $btns.find('button').click(function () {
            $btns.find('button').removeClass('active');
            $(this).addClass('active');
            filterCards($(this).data('cat'), $('#search_gastos').val().toLowerCase());
        });
        $('#search_gastos').off('input').on('input', function () {
            filterCards($btns.find('.active').data('cat'), $(this).val().toLowerCase());
        });
    }

    function renderCards(data) {
        let $row = $('#cards_gastos').empty();
        data.forEach(g => {
            //     let html = `
            //   <div class="col-md-4 col-sm-6 js-pagination-item gasto-item"
            //        data-cat="${g.id_tarjeta_gasto_categoria_json.nombre}">
            //     <div class="card shadow-sm">
            //       <div class="card-body">
            //         <h5 class="card-title">${VB.tarjetas_gastos.simple(g)}</h5>
            //         <p class="card-text">${g.descripcion || ''}</p>
            //         <p class="card-text text-right">
            //           <span class="text-danger">- ${DINERO(g.monto, g.moneda)}</span>
            //         </p>
            //         <small class="text-muted">${FECHA_VERBOSED(g.fecha_gasto)}</small>
            //       </div>
            //     </div>
            //   </div>`;

            let html = `
          <div class="col-md-4 col-sm-6 js-pagination-item gasto-item"
               data-cat="${g.id_tarjeta_gasto_categoria_json.nombre}">
            <div class="card shadow-sm">
              <div class="card-body">
                <h5 class="card-title text-bold">${VB.tarjetas_gastos_categorias.vb(g.id_tarjeta_gasto_categoria_json)}</h5>
                <p class="card-text">${VB.comercios.vb(g.id_comercio_json, 'Sin comercio definido')}</p>
                <p class="card-text text-right">
                  <span class="text-danger">- ${DINERO(g.monto, g.moneda)}</span>
                </p>
                <small class="text-muted">${FECHA_VERBOSED(g.fecha_gasto)}</small>
              </div>
            </div>
          </div>`;

            $row.append(html);
        });
    }

    function filterCards(categoria, termino) {
        const palabras = termino.trim().split(/\s+/).filter(Boolean);
        $('.gasto-item').each(function () {
            let $it = $(this),
                matchCat = !categoria || $it.data('cat') === categoria,
                texto = $it.find('.card-body').text().toLowerCase(),
                matchText = !palabras.length || palabras.every(p => texto.includes(p));

            if (matchCat && matchText) {
                $it.addClass('js-pagination-item');
                $it.toggle(true);
            } else {
                $it.removeClass('js-pagination-item');
                $it.toggle(false);
            }
        });
        // Re-genera la paginación tras filtrar
        $('#pagination_gastos').empty();
        generatePagination('#pagination_gastos', '.js-pagination-item', 6, 'Anterior', 'Siguiente');
    }

    function renderChart(data) {
        Chart.Legend.prototype.afterFit = function () {
            // Verifica si el gráfico es un gráfico de tipo 'pie'
            if (this.chart.config.type === 'pie') {
                this.height = this.height + 25;
            }

            // Verifica si el gráfico es un gráfico de tipo 'pie'
            if (this.chart.config.type === 'bar') {
                this.height = this.height + 25;
            }
        };

        // Agrupa por categoría
        const sums = {};
        data.forEach(g => {
            const cat = g.id_tarjeta_gasto_categoria_json.nombre;
            sums[cat] = (sums[cat] || 0) + parseFloat(g.monto);
        });
        const labels = Object.keys(sums);
        const values = labels.map(l => sums[l]);

        // Paleta de colores propia (uno distinto por etiqueta)
        const palette = [
            '#007bff', '#28a745', '#17a2b8',
            '#ffc107', '#dc3545', '#6f42c1',
            '#e83e8c', '#fd7e14', '#20c997',
            '#6610f2'
        ];
        const backgroundColor = labels.map((_, i) => palette[i % palette.length]);

        // Asegúrate de que el contenedor sea pequeño:
        // <div class="chart-container-small"><canvas id="chartGastos"></canvas></div>
        if (chartGastos) chartGastos.destroy();
        const ctx = document.getElementById('chartGastos').getContext('2d');
        chartGastos = new Chart(ctx, {
            type: 'pie',
            data: {
                labels,
                datasets: [{
                    data: values,
                    backgroundColor,
                    borderColor: '#fff',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                legend: {
                    position: 'top',
                    display: true,
                    labels: {
                        boxWidth: 10,
                        padding: 12,
                        font: {
                            size: 14,      // un poco más grande
                            weight: 'bold' // negrita
                        }
                    }
                },
                layout: {
                    padding: {
                        bottom: 20,
                        top: 20,
                        // left: 80,
                        // right: 80
                    }
                },
                plugins: {
                    // datalabels: {
                    //     formatter: v => DINERO(v),
                    //     color: '#212529',
                    //     anchor: 'center',
                    //     align: 'center',
                    //     font: {
                    //         size: 14,      // un poco más grande
                    //         weight: 'bold' // negrita
                    //     }
                    // }
                    datalabels: {
                        formatter: v => DINERO(v, 'HNL'),
                        color: 'white', // Color blanco para los textos dentro del gráfico
                        anchor: 'center',
                        align: 'center',
                        // align: 'end', // Mueve las etiquetas fuera de la gráfica
                        // anchor: 'end', // Ancla las etiquetas fuera del segmento
                        font: {
                            size: 14,
                            weight: 'bold'
                        }
                    }
                },
                tooltips: {
                    callbacks: {
                        // Título personalizado
                        title: function (tooltipItem, data) {
                            // Obtiene el nombre del movimiento
                            let gasto = data.labels[tooltipItem[0].index];
                            return `${gasto}`; // Muestra el nombre del movimiento como título
                        },
                        // Etiqueta personalizada
                        label: function (tooltipItem, data) {
                            let dataset = data.datasets[tooltipItem.datasetIndex];
                            let value = dataset.data[tooltipItem.index];

                            
                            return ` Total: ${DINERO(value, 'HNL')}`;
                        }
                        , footer: function (tooltipItems, data) {
                            let item = tooltipItems[0];                            // <— ojo, [0]
                            let dataset = data.datasets[item.datasetIndex];
                            let value = dataset.data[item.index];

                            // Calcula el total de votos
                            let total = dataset.data.reduce((a, b) => a + b, 0);

                            // Calcula el porcentaje
                            let percentage = ((value / total) * 100).toFixed(2) + "%";

                            // Retorna el label con el valor y porcentaje
                            return `Porcentaje: ${percentage}`;
                        }
                    }
                    // callbacks: {
                    //     // Título personalizado
                    //     title: function (tooltipItem, data) {
                    //         // Obtiene el nombre del movimiento
                    //         let gasto = data.labels[tooltipItem[0].index];
                    //         return `${gasto}`; // Muestra el nombre del movimiento como título
                    //     },
                    //     // Etiqueta personalizada
                    //     label: function (tooltipItem, data) {
                    //         let dataset = data.datasets[tooltipItem.datasetIndex];
                    //         let value = dataset.data[tooltipItem.index];

                    //         // Calcula el total de votos
                    //         let total = dataset.data.reduce((a, b) => a + b, 0);

                    //         // Calcula el porcentaje
                    //         let percentage = ((value / total) * 100).toFixed(2) + "%";

                    //         // Retorna el label con el valor y porcentaje
                    //         return ` Porcentaje: ${percentage}`;
                    //         // return [
                    //         //     `Porcentaje: ${percentage}`,
                    //         //     `Total: ${DINERO(value, 'HNL')}`
                    //         // ];
                    //     }
                    //     , footer: function (tooltipItems, data) {
                    //         const item = tooltipItems[0];                            // <— ojo, [0]
                    //         const ds = data.datasets[item.datasetIndex];
                    //         const val = ds.data[item.index];
                    //         return `Total: ${DINERO(val, 'HNL')}`;
                    //     }
                    // }
                },
            }
        });
    }
</script>
{% endblock %}