@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">Fallas por departamento y tipo de falla</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 de fallas 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_fallas_torta = [];
    $cantidades_torta = [];

    foreach ($fallas_por_tipo as $falla) {
        $tipos_fallas_torta[] = $falla->tipofalla; // Lista de tipos de fallas
        $cantidades_torta[] = $falla->total; // Cantidades de cada tipo de falla
    }
    // Preparar los datos para el gráfico
    $departamentos = [];
    $tipos_fallas = [];
    $datos_grafica = [];

    foreach ($fallas_por_departamento as $departamento => $fallas) {
        $departamentos[] = $departamento; // Lista de departamentos
        foreach ($fallas as $falla) {
            if (!in_array($falla->tipofalla, $tipos_fallas)) {
                $tipos_fallas[] = $falla->tipofalla; // Lista de tipos de fallas
            }
            $datos_grafica[$departamento][$falla->tipofalla] = $falla->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.fechas5') }}", // 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.fallas_por_departamento);

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

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

        // Obtener todos los tipos de fallas únicos
        departamentos.forEach(function(departamento) {
            fallas_por_departamento[departamento].forEach(function(falla) {
                if (!tipos_fallas.includes(falla.tipofalla)) {
                    tipos_fallas.push(falla.tipofalla);
                }
            });
        });

        // Preparar los datasets para Chart.js
        tipos_fallas.forEach(function(tipo) {
            var data = departamentos.map(function(departamento) {
                var falla = fallas_por_departamento[departamento].find(function(f) {
                    return f.tipofalla === tipo;
                });
                return falla ? falla.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 fallas'
                        }
                    },
                    x: {
                        title: {
                            display: true,
                            text: 'Departamentos'
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: true,
                        position: 'top'
                    }
                }
            }
        });
    }

    // Función para actualizar la gráfica de torta
    function actualizarGraficaTorta(fallas_por_tipo) {
        var tipos_fallas = fallas_por_tipo.map(function(falla) {
            return falla.tipofalla;
        });
        var cantidades = fallas_por_tipo.map(function(falla) {
            return falla.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_fallas,
                datasets: [{
                    label: 'Fallas por 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