@extends("layout.base")

@section("styles")
    <title>ARB | Reporte Gastos</title>
@endsection

@section("header")
    <h5 class="text-dark font-weight-bold mt-2 mb-2 mr-5">Reportes</h5>
    <div class="subheader-separator subheader-separator-ver mt-2 mb-2 mr-4 bg-gray-200"></div>
    <span class="text-danger font-weight-bold mr-4">Gastos</span>
@endsection

@section("content")
    <div class="card card-custom">
        <div class="card-header">
            <div class="card-title">
                <h3 class="card-label">Gráfica de gastos</h3>
            </div>
            <form class="col-md-4 mt-5">
                <div class="input-group">
                    <div class="input-group-prepend"><span class="input-group-text">Rango fechas</span></div>
                    <input type="text" id="fechas" class="form-control" readonly="" value="" placeholder="Seleccionar fechas">
                    <div class="input-group-append"><button class="btn btn-icon btn-primary" id="btnBuscar"><i class="fas fa-search"></i></button></div>
                </div>
            </form>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-4" >
                    <div class="card card-flush bgi-no-repeat bgi-size-contain bgi-position-x-end h-xl-100 bg-danger">
                        <div class="card-header pt-5 mb-3 d-flex flex-center">
                            <div class="d-flex flex-center rounded-circle h-80px w-80px bg-danger">
                                <i class="fas fa-cash-register text-white fa-2x lh-0"></i>
                            </div>
                        </div>
                        <div class="card-body  mb-0 pt-0" >
                            <div class="text-center" >
                                <small class="text-white mb-4">Total gastos </small><br>
                                <small class="text-white mb-4"><span class="inicio">2026-01-01</span> al <span class="fin">2026-01-31</span></small>
                                <h4 class="text-white text-center">$ <label id="totalGasto"></label> </h4>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4" >
                    <div class="card card-flush bgi-no-repeat bgi-size-contain bgi-position-x-end h-xl-100 bg-danger">
                        <div class="card-header pt-5 mb-3 d-flex flex-center">
                            <div class="d-flex flex-center rounded-circle h-80px w-80px bg-danger">
                                <i class="fas fa-calculator text-white fa-2x lh-0"></i>
                            </div>
                        </div>
                        <div class="card-body  mb-0 pt-0" >
                            <div class="text-center" >
                                <small class="text-white mb-4">Cantidad gastos </small><br>
                                <small class="text-white mb-4"><span class="inicio">2026-01-01</span> al <span class="fin">2026-01-31</span></small>
                                <h4 class="text-white text-center"><label id="cantidadGasto"></label></h4>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4" >
                    <div class="card card-flush bgi-no-repeat bgi-size-contain bgi-position-x-end h-xl-100 bg-dark">
                        <div class="card-header pt-5 mb-3 d-flex flex-center">
                            <div class="d-flex flex-center rounded-circle h-80px w-80px bg-dark">
                                <i class="fas fa-calendar text-white fa-2x lh-0"></i>
                            </div>
                        </div>
                        <div class="card-body  mb-0 pt-0" >
                            <div class="text-center" >
                                <small class="text-white mb-4">Comparación periodos </small><br>
                                <small class="text-white mb-4"><span id="aumento"></span></small>
                                <h4 class="text-white text-center"> <i id="icono"></i>$ <label id="diferencia"></label></h4>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12">
                    <!--begin::Card-->
                    <div class="card card-custom gutter-b">
                        <div class="card-header">
                            <div class="card-title">
                                <h3 class="card-label">Total de gastos por categoría</h3>
                                <small>Durante <span class="inicio">2026-01-01</span> y <span class="fin">2026-01-31</span></small>
                            </div>
                        </div>
                        <div class="card-body">
                            <!--begin::Chart-->
                            <div id="montos_categorias"></div>
                            <!--end::Chart-->
                        </div>
                    </div>
                    <!--end::Card-->
                </div>
            </div>
        </div>
    </div>
@endsection

@section("scripts")
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://npmcdn.com/flatpickr/dist/l10n/es.js"></script>
    <script>
        // Shared Colors Definition
        const A = '#7cb5ec';
        const B = '#1BC5BD';
        const C = '#FFA800';
        const D = '#ffff00';
        const E = '#165b9c';
        const F = '#ffccff';
        const G = '#ffd480';
        const H = '#da0b20';
        const I = '#ff66ff';
        const J = '#0f706b';
        const K = '#ccff99';
        const L = '#F64E60';
        const M = '#eeccff';
        const N = '#910815';
        const O = '#d3e7f8';
        const P = '#4be7df';
        const Q = '#ffd480';
        const R = '#cc6699';
        const S = '#ff9999';
        const T = '#800080';
        let chart;

        function graficaLineal(listaSeries) {
            let options = {
                series: listaSeries,
                chart: {
                    type: 'bar',
                    height: 350
                },
                plotOptions: {
                    bar: {
                        horizontal: false,
                        columnWidth: '55%',
                        endingShape: 'rounded'
                    },
                },
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    show: true,
                    width: 2,
                    colors: ['transparent']
                },
                yaxis: {
                    title: {
                        text: 'Monto total gasto'
                    },
                    labels: {
                        formatter: function (value) {
                            return "$"+formatNumber(value);
                        }
                    }
                },
                fill: {
                    opacity: 1
                },
                colors: [N]
            };
            if(chart != undefined)
                chart.destroy();
            chart = new ApexCharts(document.querySelector("#montos_categorias"), options);
            chart.render();
        }


        function cargarData() {
            $('form :submit').attr('disabled', true);
            $('form :submit').addClass('spinner spinner-white spinner-left');
            $('button').attr('disabled', true);
            fecha_inicio = tomarFechaInicio($("#fechas").val());
            fecha_fin = tomarFechaFin($("#fechas").val());

            $(".inicio").html(fecha_inicio);
            $(".fin").html(fecha_fin);
            $.ajax({
                "url": "{{route('gasto.dataReporte')}}?fecha_inicio="+fecha_inicio+"&fecha_fin="+fecha_fin,
                "method": "get",
                "dataType": "json"
            })
                .done(function (response) {
                    seriesPorCategoria = [{
                        name: 'Total categoría',
                        data: response.montosCategorias
                    }];
                    graficaLineal(seriesPorCategoria);

                    $("#totalGasto").text(response.totalGasto);
                    $("#cantidadGasto").text(response.cantidadGasto);

                    //comparación
                    $("#diferencia").text(response.diferencia);
                    $("#fecha_inicio_a").text(response.fecha_inicio_a);
                    $("#fecha_inicio_f").text(response.fecha_inicio_f);
                    if(parseInt(response.diferenciaSF)<0){
                        $("#icono").html('<i class="fas fa-arrow-up text-danger"></i> ');
                        $("#aumento").addClass("text-danger").removeClass("text-success").text('Aumento');
                    }else{
                        $("#icono").html('<i class="fas fa-arrow-down text-success"></i> ');
                        $("#aumento").addClass("text-success").removeClass("text-danger").text('Disminuyo');
                    }

                })
                .fail(function (error) {
                    Swal.fire({icon: 'error', title: 'Algo salio mal ' + error, showConfirmButton: true,})
                })
                .always(function () {
                    $('form :submit').attr('disabled', false);
                    $('form :submit').removeClass('spinner spinner-white spinner-left');
                    $('button').attr('disabled', false);
                });
        }

        $( document ).ready(function() {
            $("#fechas").flatpickr({
                locale: "es",
                mode: "range",
                altInput: true,
                altFormat: "d/m/Y",
                defaultDate: ['{{date("Y/m/01")}}', '{{date("Y/m/t")}}']
            });
            $("form").on("submit", function (e) {
                e.preventDefault();
                cargarData();
            });
            $("#btnBuscar").click();
        });
    </script>
@endsection