@extends('masushuaia.plantilla')
@section('titulo', 'Estadísticas')
@section('scripts')
<link href="{{ asset('css/datatables.min.css') }}" rel="stylesheet">
<script src="{{ asset('js/datatables.min.js') }}"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
{{-- <script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBj0fAQJIlC4Q3uBBmkQFmEUuAVK6-uPVU&callback=initMap&libraries=visualization">
</script> --}}
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    globalId = '0';
        contSucursales = '0';
    </script>
@endsection
@section('breadcrumb')
<div class="row">
    <div class="col-6 text-left form-group pt-3">
        <label class="periodo" for="txtFechaDesdeEstadistica">Período desde</label>
        <input type="date" class="form-control" id="txtFechaDesdeEstadistica" name="txtFechaDesdeEstadistica" onchange="fTraerSegunFechas()" value="2024-12-01">
    </div>
    <div class="col-6 text-left form-group pt-3">
        <label class="periodo" for="txtFechaHastaEstadistica">Período hasta</label>
        <input type="date" class="form-control" id="txtFechaHastaEstadistica" name="txtFechaHastaEstadistica" onchange="fTraerSegunFechas()" value="2025-12-31">
    </div>
    <div class="col-12">
        <div id="btnGuardar" class="d-inline-block">
            <a title="Guardar" href="#" class="btn btn-blue py-1 px-4" aria-hidden="true" onclick="exportarExcel();">Exportar Excel</a>
        </div>
        <div class="d-inline-block">
            <a title="Guardar" href="#" class="btn btn-blue py-1 px-4" aria-hidden="true" onclick="exportarExcelTurista();">Exportar consumos turistas</a>
        </div>
    </div>
</div>
@endsection
@section('breadcrumb-list')
<ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/">Inicio</a></li>
    <li class="breadcrumb-item active">Estadísticas</li>
</ol>
@endsection
@section('contenido')
<div class="row">
    <div id="msg"></div>
    </div>
<div class="row mb-3">
    <div class="col-12 col-sm-4 text-center">
        <div class="card-estadisticas reporte1 p-4">
            <h2 id="cantidadBeneficiarios">{{ $cantidad_beneficiarios }}</h2>
            <span>Beneficiarios inscriptos</span>
        </div>
    </div>
    <div class="col-12 col-sm-4 text-center">
        <div class="card-estadisticas reporte2 p-4">
            <h2 id="cantidadCupones">{{ $cantidad_cupones }}</h2>
            <span>Descuentos obtenidos</span>
        </div>
    </div>
    <div class="col-12 col-sm-4 text-center">
        <div class="card-estadisticas reporte3 p-4">
            <h2 id="cantidadComercios">{{ $cantidad_comercios }}</h2>
            <span>COMERCIOS ADHERIDOS</span>
        </div>
    </div>
</div>
<div class="row mb-3">
        <div class="col-12 @if (!Patente::autorizarOperacion('TURISTACONSULTA')){{ 'col-sm-6' }}@else{{ 'col-sm-4' }}@endif text-center">
            <div class="card-estadisticas reporte1 p-4">
                <h2 id="cantidadBeneficiariosInscriptos">
                    {{ isset($cantidad_beneficiarios_inscriptos) ? $cantidad_beneficiarios_inscriptos : '' }}</h2>
                <span>Total inscriptos</span>
            </div>
        </div>
        @if (Patente::autorizarOperacion('TURISTACONSULTA'))
            <div class="col-12 col-sm-4 text-center">
                <div class="card-estadisticas reporte1 p-4">
                    <h2 id="cantidadBeneficiariosInscriptos">
                        {{ isset($cantidadBeneficiariosInscriptos) ? $cantidadBeneficiariosInscriptos : 0 }}</h2>
                    <span>Total turistas</span>
                </div>
            </div>
        @endif
        <div class="col-12 @if (!Patente::autorizarOperacion('TURISTACONSULTA')){{ 'col-sm-6' }}@else{{ 'col-sm-4' }}@endif text-center">
            <div class="card-estadisticas reporte2 p-4">
                <h2 id="cantidadBeneficiariosActivos">
                    {{ isset($cantidad_beneficiarios_activos) ? $cantidad_beneficiarios_activos : '' }}</h2>
                <span>Total activos</span>
            </div>
        </div>
    </div>


    <div class="row mb-3">
    
        <div class="col-12 @if (!Patente::autorizarOperacion('TURISTACONSULTA')){{ 'col-sm-6' }}@else{{ 'col-sm-4' }}@endif text-center">
            <div class="card-estadisticas reporte2 p-4">
                <h2 id="cantidadBeneficiariosActivos">
                    {{ isset($cantidad_beneficiaros_ushuaria) ? $cantidad_beneficiaros_ushuaria : '' }}</h2>
                <span>Total Ushuaia</span>
            </div>
        </div>
        
        <div class="col-12 @if (!Patente::autorizarOperacion('TURISTACONSULTA')){{ 'col-sm-6' }}@else{{ 'col-sm-4' }}@endif text-center">
            <div class="card-estadisticas reporte2 p-4">
                <h2 id="cantidadBeneficiariosActivos">
                    {{ isset($cantidad_beneficiaros_RioGrande) ? $cantidad_beneficiaros_RioGrande : '' }}</h2>
                <span>Total Río grande</span>
            </div>
        </div>
        
        <div class="col-12 @if (!Patente::autorizarOperacion('TURISTACONSULTA')){{ 'col-sm-6' }}@else{{ 'col-sm-4' }}@endif text-center">
            <div class="card-estadisticas reporte2 p-4">
                <h2 id="cantidadBeneficiariosActivos">
                    {{ isset($cantidad_beneficiaros_Tolhuin) ? $cantidad_beneficiaros_Tolhuin : '' }}</h2>
                <span>Total Tolhuin</span>
            </div>
        </div>

    </div>

      <div class="row mb-3">
    
        <div class="col-12 @if (!Patente::autorizarOperacion('TURISTACONSULTA')){{ 'col-sm-6' }}@else{{ 'col-sm-4' }}@endif text-center">
            <div class="card-estadisticas reporte2 p-4">
                <h2 id="cantidadBeneficiariosActivos">
                    {{ isset($cantidad_beneficiaros_CABA) ? $cantidad_beneficiaros_CABA : '' }}</h2>
                <span>Total Buenos Aires</span>
            </div>
        </div>

    </div>

<div class="row mt-5">
    <div class="col-sm-8 col-12">

        <div class="card mb-3">
            <div class="card-header font-weight-bold text-uppercase">
                Historial de cupones
            </div>
            <div class="panel-body p-2">
                <table id="grilla" class="display" style="width:98%">
                    <thead>
                        <tr>
                            <th>Fecha</th>
                            <th>Cupon</th>
                            <th>Beneficiario</th>
                            <th>Edad</th>
                            <th>Comercio</th>
                            <th>Rubro</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold">Consumo por rubro</h6>
            </div>
            <div id="card-body" class="card-body">
            </div>
        </div>
    </div>
    <div class="col-sm-4 col-12">
        <div class="card shadow mb-4">
            <!-- Card Header - Dropdown -->
            <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                <h6 class="m-0 font-weight-bold">BENEFICIARIOS POR GÉNERO</h6>
            </div>
            <!-- Card Body -->
            <div class="card-body">
                <div class="chart-pie pt-4 pb-2">
                    <canvas id="myPieChart"></canvas>
                </div>
                <div class="mt-4 text-center small">
                    <span class="mr-2">
                        <i class="fas fa-circle text-1"></i> Hombres <span id="cantidadHombres"></span>
                    </span>
                    <span class="mr-2">
                        <i class="fas fa-circle text-2"></i> Mujeres <span id="cantidadMujeres"></span>
                    </span>
                </div>
            </div>
        </div>
        <div class="card shadow mb-4">
            <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                <h6 class="m-0 font-weight-bold">RANGOS ETARIOS DE CONSUMO</h6>
            </div>
            <div class="card-body">
                <div class="edades18-25 py-3 px-5 mb-3">
                    <p class="mb-0">18-25 años - <span id="18-25-anios"></span> persona(s)</p>
                </div>
                <div class="edades25-30 py-3 px-5 mb-3">
                    <p class="mb-0">25-30 años - <span id="25-30-anios"></span> persona(s)</p>
                </div>
                <div class="edades30-45 py-3 px-5 mb-3">
                    <p class="mb-0">30-45 años - <span id="30-45-anios"></span> persona(s)</p>
                </div>
                <div class="edades45-60 py-3 px-5 mb-3">
                    <p class="mb-0">45-60 años - <span id="45-60-anios"></span> persona(s)</p>
                </div>
                <div class="edades60mas py-3 px-5 mb-3">
                    <p class="mb-0">60+ años - <span id="60-mas-anios"></span> persona(s)</p>
                </div>
                <div class="edades25-30 py-3 px-5">
                    <p class="mb-0">Sin rango de edad - <span id="sin-anios"></span> persona(s)</p>
                </div>
            </div>

        </div>

    </div>
</div>

<div class="row">
    <div class="col-sm-12 col-12">
        <div class="card shadow mb-4">
            <!-- Card Header - Dropdown -->
            <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                <h6 class="m-0 font-weight-bold">ZONAS DE CONSUMO</h6>
            </div>
            <!-- Card Body -->
            <div class="card-body">
                <div id="map"></div>
            </div>
        </div>

    </div>
</div>



<script src="{{ asset('js/sb-admin-2.min.js') }}"></script>
<script src="{{ asset('js/jquery.easing.min.js') }}"></script>
<script>
    function exportarExcel() {
        location.href =
            `/estadisticas/exportar-excel?fecha-desde=${$('#txtFechaDesdeEstadistica').val()}&fecha-hasta=${$('#txtFechaHastaEstadistica').val()}`;
        console.log('aca');
    }

    function exportarExcelTurista() {
        location.href =
            `/estadisticas/exportar-excel-turistas?fecha-desde=${$('#txtFechaDesdeEstadistica').val()}&fecha-hasta=${$('#txtFechaHastaEstadistica').val()}`;
        console.log('aca');
    }

    function cargarGrillaCuponesHistorial() {
        $('#grilla').dataTable().fnClearTable();
        $('#grilla').dataTable().fnDestroy();
        var dataTable = $('#grilla').DataTable({
            "processing": true,
            "serverSide": true,
            "bFilter": true,
            "bInfo": true,
            "bSearchable": true,
            "pageLength": 25,
            "order": [
                [0, "desc"]
            ],
            "ajax": "{{ route('cuponesHistorial.cargarGrilla') }}?fechaDesde=" + $(
                "#txtFechaDesdeEstadistica").val() + "&fechaHasta=" + $("#txtFechaHastaEstadistica").val()
        });
    }

    window.onload = cargarGrillaCuponesHistorial();
    window.onload = fTraerSegunFechas();

    function actualizarChart(cantHombres, cantMujeres) {
        var ctx = document.getElementById("myPieChart");
        var myPieChart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: ["Hombres", "Mujeres"],
                datasets: [{
                    data: [cantHombres, cantMujeres],
                    backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc'],
                    hoverBackgroundColor: ['#4e73df', '#1cc88a', '#36b9cc'],
                    hoverBorderColor: "rgba(234, 236, 244, 1)",
                }],
            },
            options: {
                maintainAspectRatio: false,
                tooltips: {
                    backgroundColor: "rgb(255,255,255)",
                    bodyFontColor: "#858796",
                    borderColor: '#dddfeb',
                    borderWidth: 1,
                    xPadding: 15,
                    yPadding: 15,
                    displayColors: false,
                    caretPadding: 10,
                },
                legend: {
                    display: false
                },
                cutoutPercentage: 80,
            },
        });
    }

    function calcularRangosEdades(aAniosNacimiento) {
        var rango1825 = 0;
        var rango2530 = 0;
        var rango3045 = 0;
        var rango4560 = 0;
        var rango60mas = 0;
        var sinRango = 0;
        var anioActual = new Date().getFullYear();
        var edades = [];
        aAniosNacimiento.forEach(s => {
            if (s.anios == null)
                sinRango++
            else
                edades.push(anioActual - s.anios);
        });
        for (var i = 0; i < edades.length; i++) {
            var edad = edades[i];
            if (edad > 18 && edad <= 25) {
                rango1825++;
            } else if (edad > 25 && edad <= 30) {
                rango2530++;
            } else if (edad > 30 && edad <= 45) {
                rango3045++;
            } else if (edad > 45 && edad <= 60) {
                rango4560++;
            } else if (edad > 60) {
                rango60mas++;
            }
        }
        $("#18-25-anios").html(rango1825);
        $("#25-30-anios").html(rango2530);
        $("#30-45-anios").html(rango3045);
        $("#45-60-anios").html(rango4560);
        $("#60-mas-anios").html(rango60mas);
        $("#sin-anios").html(sinRango);
    }

    function calcularPorcentaje(cantCuponesRubro, totalCupones) {
        var resultado = (cantCuponesRubro * 100) / totalCupones;
        return Math.round(resultado);
    }

    function calcularConsumoRubro(aConsumo) {
        var target = document.getElementById("card-body");
        var html = "";
        var cantCuponesTotal = 0;
        var cantComercios = aConsumo.length;
        var porcentajePorRubro = [];

        for (var i = 0; i < aConsumo.length; i++) {
            cantCuponesTotal = cantCuponesTotal + aConsumo[i].cupones_consumidos;
        }

        for (var i = 0; i < aConsumo.length; i++) {
            var nombreRubro = aConsumo[i].rubro;
            var cantidadCupones = aConsumo[i].cupones_consumidos;
            var porcentaje = calcularPorcentaje(cantidadCupones, cantCuponesTotal);
            porcentajePorRubro.push({
                "rubro": nombreRubro,
                "porcentaje": porcentaje
            });
        }

        for (var i = 0; i < porcentajePorRubro.length; i++) {
            html += "<h4 class='small font-weight-bold'>" + porcentajePorRubro[i].rubro + "<span class='float-right'>" +
                porcentajePorRubro[i].porcentaje + "%</span></h4>";
            html += "<div class='progress mb-4'>";
            html += "<div class='progress-bar bg-1' role='progressbar' style='width: " + porcentajePorRubro[i]
                .porcentaje + "%' aria-valuenow='" + porcentajePorRubro[i].porcentaje +
                "%' aria-valuemin='0' aria-valuemax='100'></div>";
            html += "</div>";
        }
        target.innerHTML = html;
    }

    let map, heatmap;

    function initMap() {
        map = new google.maps.Map(document.getElementById("map"), {
            zoom: 15,
            center: {
                lat: -54.805236,
                lng: -68.307451
            }
        });
    }

    function obtenerLatLong(aDirecciones) {
        const aCoordenadas = [];
        for (var i = 0; i < aDirecciones.length; i++) {
            $.ajax({
                url: "https://maps.googleapis.com/maps/api/geocode/json?address=" + aDirecciones[i] +
                    "&key=AIzaSyBj0fAQJIlC4Q3uBBmkQFmEUuAVK6-uPVU",
                type: 'GET',
                async: false,
                success: function(data) {
                    if (data.status === "OK") {
                        let coordenada = {
                            lat: data.results[0].geometry.location.lat,
                            lng: data.results[0].geometry.location.lng
                        };
                        aCoordenadas.push(coordenada);
                    }
                },
                error: function(error) {
                    console.log("Oh no, ha ocurrido un error: " + error);
                }
            });
        }
        setHeatmap(aCoordenadas);
    }

    function setHeatmap(aCoordenadas) {
        const heatmapData = [];
        for (var i = 0; i < aCoordenadas.length; i++) {
            heatmapData.push(
                new google.maps.LatLng(aCoordenadas[i].lat, aCoordenadas[i].lng)
            );
        }
        if (heatmapData.length > 0) {
            heatmap = new google.maps.visualization.HeatmapLayer({
                data: heatmapData,
                map: map
            });
        } else {
            heatmap.setMap(null);
        }

    }

    function fTraerSegunFechas() {
        fechaDesde = $("#txtFechaDesdeEstadistica").val();
        fechaHasta = $("#txtFechaHastaEstadistica").val();
        $.ajax({
            type: "GET",
            url: "{{ asset('/estadisticas/filtroFechas') }}",
            data: {
                fechaDesde: fechaDesde,
                fechaHasta: fechaHasta
            },
            async: true,
            dataType: "json",
            success: function(data) {
                let total = data.hombres + data.mujeres;
                let porcentajeHombres = data.hombres / total;
                let porcentajeMujeres = data.mujeres / total;

                $("#cantidadBeneficiarios").html(data.beneficiarios);
                $("#cantidadCupones").html(data.cupones);
                $("#cantidadComercios").html(data.comercos);
                $("#cantidadHombres").html(new Intl.NumberFormat('es-AR', {
                    style: 'percent',
                    maximumFractionDigits: 2
                }).format(porcentajeHombres));
                $("#cantidadMujeres").html(new Intl.NumberFormat('es-AR', {
                    style: 'percent',
                    maximumFractionDigits: 2
                }).format(porcentajeMujeres));

                actualizarChart(data.hombres, data.mujeres);
                calcularRangosEdades(data.anios_nacimiento);
                calcularConsumoRubro(data.consumo_rubro);
                //obtenerLatLong(data.direcciones_consumos);
            }
        });
        cargarGrillaCuponesHistorial();
    }
</script>
@endsection