@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" required>
                        </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" required>
                        </div>
                        <div class="col-md-3">
                            <button type="submit" class="btn btn-primary" style="margin-top: 30px;" id="filterButton">
                                <span id="filterText">Filtrar</span>
                                <span id="filterSpinner" class="spinner-border spinner-border-sm d-none"></span>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="card card-outline card-primary">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h3 class="card-title">Distribución de Actividades por Indicadores en grafica de barra</h3>
                <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="maximize">
                        <i class="fas fa-expand"></i>
                    </button>
                </div>
            </div>
            <div class="card-body" style="position: relative; height: 60vh;">
                <div class="chart-container" style="width: 100%; height: 100%;">
                    <canvas id="myChart2" aria-label="Gráfico de fallas por departamento y tipo" role="img"></canvas>
                </div>
                <div id="graficaBarrasVacia" class="text-center" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
                    <i class="fas fa-chart-bar fa-5x text-muted"></i>
                    <p class="mt-3 text-muted">Seleccione un rango de fechas para visualizar los datos</p>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-12">
        <div class="card card-outline card-primary">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h3 class="card-title">Distribución por Indicadores en grafico circular</h3>
                <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="maximize">
                        <i class="fas fa-expand"></i>
                    </button>
                </div>
            </div>
            <div class="card-body" style="position: relative; height: 60vh;">
                <div class="chart-container" style="width: 100%; height: 100%;">
                    <canvas id="myChartTorta" aria-label="Gráfico de distribución de fallas por tipo" role="img"></canvas>
                </div>
                <div id="graficaTortaVacia" class="text-center" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
                    <i class="fas fa-chart-pie fa-5x text-muted"></i>
                    <p class="mt-3 text-muted">Seleccione un rango de fechas para visualizar los datos</p>
                </div>
            </div>
        </div>
    </div>
</div>
@stop

@section('css')
@stop

@section('js')
<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>
    // Variables globales para las gráficas
    let graficaBarras = null;
    let graficaTorta = null;
    
    // Paleta de colores consistente
    const backgroundColors = [
        'rgba(54, 162, 235, 0.7)',
        'rgba(255, 99, 132, 0.7)',
        'rgba(75, 192, 192, 0.7)',
        'rgba(255, 159, 64, 0.7)',
        'rgba(153, 102, 255, 0.7)',
        'rgba(255, 206, 86, 0.7)',
        'rgba(231, 233, 237, 0.7)',
        'rgba(201, 203, 207, 0.7)',
        'rgba(102, 204, 153, 0.7)',
        'rgba(204, 153, 255, 0.7)'
    ];

    // Función para mostrar/ocultar el spinner de carga
    function toggleLoading(show) {
        $('#filterText').toggleClass('d-none', show);
        $('#filterSpinner').toggleClass('d-none', !show);
        $('#filterButton').prop('disabled', show);
    }

    // Función para validar fechas
    function validateDates(start, end) {
        if (!start || !end) {
            alert('Por favor, seleccione un rango de fechas válido.');
            return false;
        }
        
        if (new Date(start) > new Date(end)) {
            alert('La fecha de inicio no puede ser mayor a la fecha de fin');
            return false;
        }
        
        return true;
    }

    // Función para actualizar las gráficas
    function actualizarGraficas(fecha_inicio, fecha_fin) {
        toggleLoading(true);
        
        $.ajax({
            url: "{{ route('admin.filtrar.fechas2') }}",
            method: 'GET',
            data: {
                fecha_inicio: fecha_inicio,
                fecha_fin: fecha_fin
            },
            success: function(response) {
                // Ocultar mensajes de gráfica vacía
                $('#graficaBarrasVacia').hide();
                $('#graficaTortaVacia').hide();
                
                // Actualizar gráficas con los nuevos datos
                actualizarGraficaBarras(response.fallas_por_departamento);
                actualizarGraficaTorta(response.fallas_por_tipo);
            },
            error: function(xhr) {
                console.error('Error al filtrar por fechas', xhr);
                alert('Ocurrió un error al obtener los datos. Por favor, intente nuevamente.');
            },
            complete: function() {
                toggleLoading(false);
            }
        });
    }

    // 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, index) {
            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: backgroundColors[index % backgroundColors.length],
                borderColor: backgroundColors[index % backgroundColors.length].replace('0.7', '1'),
                borderWidth: 1,
                borderRadius: 4,
                barPercentage: 0.8,
                categoryPercentage: 0.8
            });
        });

        // Calcular el total general
        const totalGeneral = datasets.reduce((total, dataset) => {
            return total + dataset.data.reduce((sum, value) => sum + value, 0);
        }, 0);

        // Destruir la gráfica anterior si existe
        if (graficaBarras) {
            graficaBarras.destroy();
        }

        const ctx = document.getElementById('myChart2').getContext('2d');
        graficaBarras = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: departamentos,
                datasets: datasets
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    title: {
                        display: true,
                        text: `Total General: ${totalGeneral}`,
                        font: {
                            size: 16,
                            weight: 'bold'
                        },
                        // Añade estas propiedades para posicionamiento
            position: 'top',
            align: 'start',
            padding: {
                top: 10,
                bottom: 30  // Más espacio entre título y gráfica
            }
                    },
                    legend: {
                        position: 'bottom',
                        align: 'center',
                        labels: {
                            boxWidth: 12,
                            padding: 10,
                            font: {
                                size: 12
                            },
                            usePointStyle: true,
                            pointStyle: 'circle'
                        }
                    },
                    tooltip: {
                        callbacks: {
                            afterBody: function(tooltipItems) {
                                let departamentoTotal = 0;
                                tooltipItems[0].chart.data.datasets.forEach(dataset => {
                                    departamentoTotal += dataset.data[tooltipItems[0].dataIndex];
                                });
                                return `Total departamento: ${departamentoTotal}`;
                            }
                        }
                    },
                    datalabels: {
                        display: function(context) {
                            return context.dataset.data[context.dataIndex] > 0;
                        },
                        color: '#000',
                        anchor: 'end',
                        align: 'top',
                        offset: 2,
                        font: {
                            weight: 'bold',
                            size: 10
                        },
                        formatter: function(value) {
                            return value > 0 ? value : '';
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Número de Fallas',
                            font: {
                                weight: 'bold',
                                size: 14
                            }
                        },
                        ticks: {
                            stepSize: 1,
                            precision: 0
                        }
                    },
                    x: {
                        title: {
                            display: true,
                            text: 'Actvidades',
                            font: {
                                weight: 'bold',
                                size: 14
                            }
                        }
                    }
                }
            },
            plugins: [ChartDataLabels]
        });
    }

    // Función para actualizar la gráfica de torta
    function actualizarGraficaTorta(fallas_por_tipo) {
        // Preparar datos
        const labels = fallas_por_tipo.map(item => item.tipofalla);
        const data = fallas_por_tipo.map(item => item.total);
        const total = data.reduce((a, b) => a + b, 0);

        // Destruir gráfica anterior si existe
        if (graficaTorta) {
            graficaTorta.destroy();
        }

        const ctx = document.getElementById('myChartTorta').getContext('2d');
        graficaTorta = new Chart(ctx, {
            type: 'pie',
            data: {
                labels: labels,
                datasets: [{
                    data: data,
                    backgroundColor: backgroundColors,
                    borderColor: '#fff',
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    title: {
                        display: true,
                        text: `Total General: ${total}`,
                        font: {
                            size: 16,
                            weight: 'bold'
                        }
                    },
                    legend: {
                        position: 'right',
                        labels: {
                            boxWidth: 16,
                            padding: 12,
                            font: {
                                size: 12
                            },
                            usePointStyle: true
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const label = context.label || '';
                                const value = context.raw || 0;
                                const percentage = Math.round((value / total) * 100);
                                return `${label}: ${value} (${percentage}%)`;
                            },
                            footer: function() {
                                return `Total: ${total}`;
                            }
                        }
                    },
                    datalabels: {
                        formatter: (value) => {
                            return `${value}`;
                        },
                        color: '#333',
                        font: {
                            weight: 'bold',
                            size: 11
                        }
                    }
                }
            },
            plugins: [ChartDataLabels]
        });
    }

    // Enviar el formulario con AJAX
    $('#filtroFechasForm').on('submit', function(e) {
        e.preventDefault();

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

        if (validateDates(fecha_inicio, fecha_fin)) {
            actualizarGraficas(fecha_inicio, fecha_fin);
        }
    });

    // Inicialización - No cargar gráficas al inicio
    $(document).ready(function() {
        // Mostrar mensajes de gráfica vacía inicialmente
        $('#graficaBarrasVacia').show();
        $('#graficaTortaVacia').show();
        
        // Inicializar gráficas vacías
        const ctxBarras = document.getElementById('myChart2').getContext('2d');
        graficaBarras = new Chart(ctxBarras, {
            type: 'bar',
            data: {
                labels: [],
                datasets: []
            },
            options: {
                responsive: true,
                maintainAspectRatio: false
            }
        });

        const ctxTorta = document.getElementById('myChartTorta').getContext('2d');
        graficaTorta = new Chart(ctxTorta, {
            type: 'pie',
            data: {
                labels: [],
                datasets: []
            },
            options: {
                responsive: true,
                maintainAspectRatio: false
            }
        });
    });
</script>
@stop