@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;">
                                Filtrar
                            </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 gráfica 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: 80vh;">
                <div class="chart-container" style="width: 100%; height: calc(100% - 80px);">
                    <canvas id="myChart2"></canvas>
                </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 gráfico 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: 80vh;">
                <div class="chart-container" style="width: 100%; height: calc(100% - 80px);">
                    <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;
        $cantidades_torta[] = $solicitud->total;
    }

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

    foreach ($solicitudes_por_departamento as $departamento => $solicitudes) {
        $departamentos[] = $departamento;
        foreach ($solicitudes as $solicitud) {
            if (!in_array($solicitud->tipo, $tipos_solicitudes)) {
                $tipos_solicitudes[] = $solicitud->tipo;
            }
            $datos_grafica[$departamento][$solicitud->tipo] = $solicitud->total;
        }
    }
@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>
    // Variables globales para las gráficas
    let graficaBarras = null;
    let graficaTorta = null;

    // Función para actualizar las gráficas
    function actualizarGraficas(fecha_inicio, fecha_fin) {
        $.ajax({
            url: "{{ route('admin.filtrar.fechas3') }}",
            method: 'GET',
            data: {
                fecha_inicio: fecha_inicio,
                fecha_fin: fecha_fin
            },
            success: function(response) {
                actualizarGraficaBarras(response.solicitudes_por_departamento);
                actualizarGraficaTorta(response.solicitudes_por_tipo);
            },
            error: function(xhr) {
                console.error('Error al filtrar por fechas');
                alert('Ocurrió un error al obtener los datos. Por favor, intente nuevamente.');
            }
        });
    }

    // 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);
                }
            });
        });

        // Definir paleta de colores
        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)'
        ];

        // Preparar los datasets
        tipos_solicitudes.forEach(function(tipo, index) {
            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: 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: 'Cantidad de Solicitudes',
                            font: {
                                weight: 'bold',
                                size: 14
                            }
                        },
                        ticks: {
                            stepSize: 1,
                            precision: 0
                        }
                    },
                    x: {
                        title: {
                            display: true,
                            text: 'Indicadores',
                            font: {
                                weight: 'bold',
                                size: 14
                            }
                        },
                        ticks: {
                            callback: function(value, index, values) {
                                if (value === 'Gerencia') {
                                    return '';
                                }
                                return 'Actividades';
                            }
                        }
                    }
                }
            },
            plugins: [ChartDataLabels]
        });
    }

    function actualizarGraficaTorta(solicitudes_por_tipo) {
        // Preparar datos
        const labels = solicitudes_por_tipo.map(item => item.tipo);
        const data = solicitudes_por_tipo.map(item => item.total);
        const total = data.reduce((a, b) => a + b, 0);
        const backgroundColors = [
            '#4e79a7', '#f28e2b', '#e15759', '#76b7b2', '#59a14f',
            '#edc948', '#b07aa1', '#ff9da7', '#9c755f', '#bab0ac',
            '#8cd17d', '#499894', '#86bcb6', '#d4a6c8'
        ];

        // 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]
        });

        // Líneas guía y etiquetas externas (manteniendo tu implementación)
        setTimeout(() => {
            const chart = graficaTorta;
            const canvas = document.getElementById('myChartTorta');
            const ctx = canvas.getContext('2d');
            const meta = chart.getDatasetMeta(0);
            
            meta.data.forEach((element, index) => {
                if (element.hidden) return;
                
                const model = element;
                const startX = model.x;
                const startY = model.y;
                const endX = model.x + (model.outerRadius + 15) * Math.cos(model.angle);
                const endY = model.y + (model.outerRadius + 15) * Math.sin(model.angle);
                
                ctx.beginPath();
                ctx.moveTo(startX, startY);
                ctx.lineTo(endX, endY);
                ctx.strokeStyle = backgroundColors[index];
                ctx.lineWidth = 2;
                ctx.stroke();
                
                ctx.beginPath();
                ctx.arc(endX, endY, 3, 0, Math.PI * 2);
                ctx.fillStyle = backgroundColors[index];
                ctx.fill();
                
                const textX = endX + (endX > startX ? 10 : -10);
                const textY = endY;
                
                ctx.font = 'bold 12px Arial';
                ctx.fillStyle = '#333';
                ctx.textAlign = endX > startX ? 'left' : 'right';
                ctx.fillText(data[index], textX, textY + 4);
            });
        }, 500);
    }

    // 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 (fecha_inicio && fecha_fin) {
            if (new Date(fecha_inicio) > new Date(fecha_fin)) {
                alert('La fecha de inicio no puede ser mayor a la fecha de fin');
                return;
            }
            actualizarGraficas(fecha_inicio, fecha_fin);
        } else {
            alert('Por favor, seleccione un rango de fechas válido.');
        }
    });

    // Inicialización
    $(document).ready(function() {
        // Opcional: Cargar datos iniciales (último mes)
        // const hoy = new Date();
        // const haceUnMes = new Date();
        // haceUnMes.setMonth(hoy.getMonth() - 1);
        // 
        // $('#fecha_inicio').val(haceUnMes.toISOString().split('T')[0]);
        // $('#fecha_fin').val(hoy.toISOString().split('T')[0]);
        // actualizarGraficas(haceUnMes.toISOString().split('T')[0], hoy.toISOString().split('T')[0]);
    });
</script>
@stop