@extends('adminlte::page')

@section('content_header')
<h1><b>Bienvenido</b></h1>
<hr>
@stop

@section('content')

<div class="row">
    <div class="col-md-12">
        <div class="card card-outline card-primary">
            <div class="card-header">
                <h3 class="card-title">Filtrar por rango de fechas</h3>
            </div>
            <div class="card-body">
                <form id="filtroFechasForm">
                    <div class="row">
                        <div class="col-md-3">
                            <label for="fecha_inicio">Fecha de inicio</label>
                            <input type="date" id="fecha_inicio" name="fecha_inicio" class="form-control">
                        </div>
                        <div class="col-md-3">
                            <label for="fecha_fin">Fecha de fin</label>
                            <input type="date" id="fecha_fin" name="fecha_fin" class="form-control">
                        </div>
                        <div class="col-md-3">
                            <button type="submit" class="btn btn-primary" style="margin-top: 30px;">
                                Filtrar
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<div class="row">
    <div class="col-md-6">
        <div class="card card-outline card-primary">
            <div class="card-header">
                <h3 class="card-title">Departamento y tipo</h3>
            </div>
            <div class="card-body">
                <div>
                    <canvas id="myChart2"></canvas>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card card-outline card-primary">
            <div class="card-header">
                <h3 class="card-title">Distribución por tipo</h3>
            </div>
            <div class="card-body">
                <div>
                    <canvas id="myChartTorta"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>
@stop

@section('css')
@stop
@section('js')
@php
    // Preparar los datos para la gráfica de torta
    $tipos_solicitudes_torta = [];
    $cantidades_torta = [];

    foreach ($solicitudes_por_tipo as $solicitud) {
        $tipos_solicitudes_torta[] = $solicitud->tipo; // Lista de tipos de solicitudes
        $cantidades_torta[] = $solicitud->total; // Cantidades de cada tipo de solicitud
    }

    // Preparar los datos para el gráfico de barras
    $departamentos = [];
    $tipos_solicitudes = [];
    $datos_grafica = [];

    foreach ($solicitudes_por_departamento as $departamento => $solicitudes) {
        $departamentos[] = $departamento; // Lista de departamentos
        foreach ($solicitudes as $solicitud) {
            if (!in_array($solicitud->tipo, $tipos_solicitudes)) {
                $tipos_solicitudes[] = $solicitud->tipo; // Lista de tipos de solicitudes
            }
            $datos_grafica[$departamento][$solicitud->tipo] = $solicitud->total; // Datos organizados
        }
    }
@endphp

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<script>
    // Función para actualizar las gráficas
    function actualizarGraficas(fecha_inicio, fecha_fin) {
        $.ajax({
            url: "{{ route('admin.filtrar.fechas4') }}", // Ruta para filtrar por fechas
            method: 'GET',
            data: {
                fecha_inicio: fecha_inicio,
                fecha_fin: fecha_fin
            },
            success: function(response) {
                // Actualizar la gráfica de barras
                actualizarGraficaBarras(response.solicitudes_por_departamento);

                // Actualizar la gráfica de torta
                actualizarGraficaTorta(response.solicitudes_por_tipo);
            },
            error: function(xhr) {
                console.error('Error al filtrar por fechas');
            }
        });
    }

    // Función para actualizar la gráfica de barras
    function actualizarGraficaBarras(solicitudes_por_departamento) {
        var departamentos = Object.keys(solicitudes_por_departamento);
        var tipos_solicitudes = [];
        var datasets = [];

        // Obtener todos los tipos de solicitudes únicos
        departamentos.forEach(function(departamento) {
            solicitudes_por_departamento[departamento].forEach(function(solicitud) {
                if (!tipos_solicitudes.includes(solicitud.tipo)) {
                    tipos_solicitudes.push(solicitud.tipo);
                }
            });
        });

        // Preparar los datasets para Chart.js
        tipos_solicitudes.forEach(function(tipo) {
            var data = departamentos.map(function(departamento) {
                var solicitud = solicitudes_por_departamento[departamento].find(function(s) {
                    return s.tipo === tipo;
                });
                return solicitud ? solicitud.total : 0;
            });
            datasets.push({
                label: tipo,
                data: data,
                backgroundColor: getRandomColor(),
                borderWidth: 1
            });
        });

        // Actualizar la gráfica de barras
        if (window.graficaBarras) {
            window.graficaBarras.destroy(); // Destruir la gráfica anterior si existe
        }
        const ctx = document.getElementById('myChart2').getContext('2d');
        window.graficaBarras = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: departamentos,
                datasets: datasets
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Número de Indicadores'
                        }
                    },
                    x: {
                        title: {
                            display: true,
                            text: 'Departamentos'
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: true,
                        position: 'top'
                    }
                }
            }
        });
    }

    // Función para actualizar la gráfica de torta
    function actualizarGraficaTorta(solicitudes_por_tipo) {
        var tipos_solicitudes = solicitudes_por_tipo.map(function(solicitud) {
            return solicitud.tipo;
        });
        var cantidades = solicitudes_por_tipo.map(function(solicitud) {
            return solicitud.total;
        });

        // Actualizar la gráfica de torta
        if (window.graficaTorta) {
            window.graficaTorta.destroy(); // Destruir la gráfica anterior si existe
        }
        const ctxTorta = document.getElementById('myChartTorta').getContext('2d');
        window.graficaTorta = new Chart(ctxTorta, {
            type: 'pie',
            data: {
                labels: tipos_solicitudes,
                datasets: [{
                    label: 'tipo',
                    data: cantidades,
                    backgroundColor: [
                        '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF',
                        '#FF9F40', '#E7E9ED', '#8C9EFF', '#00CC99', '#FF99CC'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top'
                    },
                    tooltip: {
                        enabled: true
                    },
                    datalabels: {
                        color: '#000', // Color del texto
                        font: {
                            weight: 'bold', // Negrita
                            size: 14 // Tamaño de la fuente
                        },
                        formatter: function(value, context) {
                            return value; // Muestra el valor exacto
                        }
                    }
                }
            },
            plugins: [ChartDataLabels] // Activa el plugin
        });
    }

    // Función para generar colores aleatorios
    function getRandomColor() {
        var letters = '0123456789ABCDEF';
        var color = '#';
        for (var i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }

    // Enviar el formulario con AJAX
    $('#filtroFechasForm').on('submit', function(e) {
        e.preventDefault(); // Evitar que el formulario se envíe normalmente

        var fecha_inicio = $('#fecha_inicio').val();
        var fecha_fin = $('#fecha_fin').val();

        if (fecha_inicio && fecha_fin) {
            actualizarGraficas(fecha_inicio, fecha_fin);
        } else {
            alert('Por favor, selecciona un rango de fechas válido.');
        }
    });
</script>
@stop