@extends('layouts.app')
@section('titulo', 'Dashboard')
@section('content')
@section('css')
<link rel="stylesheet" href="{{ asset('assets/css/subsidio.css') }}">
@endsection
<div class="row">
    <div class="col-md-12">
        <h5 class="page-title pull-center pt-3 mt-3">PROYECCIÓN DE PAQUETES PARA  <strong>{{ $textoDepto }} </strong>PERIODO <strong>
            {{ $tipoPeriodoSeleccionado == 1 ? 'PRENATAL/LACTANCIA' : 'UNIVERSAL' }}
        </strong> PERIODO <strong>
            {{ $tipoPeriodoSeleccionado == 1 ? 'MENSUAL' : 'SEMANAL' }}
        </strong></h5>
    </div>
</div>

<div class="row align-items-center mb-3" style="border-bottom: 2px solid #dee2e6; padding-bottom: 10px; ">
        <div class="row mt-2">
            <div class="col-4 ">
                <h5 for="mes" class="mt-2">DEPARTAMENTO:</h5>
                <select name="departamento" id="departamento" class="form-control">
                    <option value="0" {{ $departamentoSeleccionado == '0' ? 'selected' : '' }}>NACIONAL</option>
                    <option value="1" {{ $departamentoSeleccionado == '1' ? 'selected' : '' }}>CHUQUISACA</option>
                    <option value="2" {{ $departamentoSeleccionado == '2' ? 'selected' : '' }}>LA PAZ</option>
                    <option value="3" {{ $departamentoSeleccionado == '3' ? 'selected' : '' }}>COCHABAMBA</option>
                    <option value="4" {{ $departamentoSeleccionado == '4' ? 'selected' : '' }}>ORURO</option>
                    <option value="5" {{ $departamentoSeleccionado == '5' ? 'selected' : '' }}>POTOSI</option>
                    <option value="6" {{ $departamentoSeleccionado == '6' ? 'selected' : '' }}>TARIJA</option>
                    <option value="7" {{ $departamentoSeleccionado == '7' ? 'selected' : '' }}>SANTA CRUZ</option>
                    <option value="8" {{ $departamentoSeleccionado == '8' ? 'selected' : '' }}>BENI</option>
                    <option value="9" {{ $departamentoSeleccionado == '9' ? 'selected' : '' }}>PANDO</option>
                </select>
            </div>
        
            <div class="col-md-4 ">
                <h5>TIPO SUBSIDIO:</h5>
                <select name="tipoSubsidio" id="tipoSubsidio" class="form-control">
                    <option value="1" {{ $tipoSubsidioSeleccionado == '1' ? 'selected' : '' }}>PRENATAL/LACTANCIA</option>
                    <option value="2" {{ $tipoSubsidioSeleccionado == '2' ? 'selected' : '' }}>UNIVERSAL</option>
                </select>
            </div>
            
            <div class="col-md-4 ">
                <h5>TIPO PERIODO:</h5>
                <select name="tipoPeriodo" id="tipoPeriodo" class="form-control">
                    <option value="1" {{ $tipoPeriodoSeleccionado == '1' ? 'selected' : '' }}>MENSUAL</option>
                    <option value="2" {{ $tipoPeriodoSeleccionado == '2' ? 'selected' : '' }}>SEMANAL</option>
                </select>
            </div>
            
        </div>
</div>

<div class="row">
    @foreach($agrupados as $sucursal => $paquetes)
        <div class="col-4">
            <div class="card mb-4 p-3 shadow-sm">
                <h5 class="fw-bold text-primary">🏢 {{ $sucursal }}</h5>
                <div id="grafico_{{ Str::slug($sucursal, '_') }}" style="height: 400px;"></div>
                @if(!empty($productosEnTransito[$sucursal]))
                    <p class="mb-1"><strong class="text-success">🚚 Productos en tránsito:</strong></p>
                    <ul class="text-muted">
                        @foreach($productosEnTransito[$sucursal] as $producto)
                            <li class="text-success small"><small>{{ $producto }}</small></li>
                        @endforeach
                    </ul>
                @endif
                @foreach($paquetes as $tipoPaquete => $areas)
                    <div class="row">
                        @foreach($areas as $area => $info)
                            @if(!empty($info['productos_insuficientes']))
                                <div class="col-6">
                                    <div class="ms-3 mb-3 border-start border-2 ps-3">
                                        <h6 class="fw-semibold small">
                                            📦 {{ $tipoPaquete }} - {{ $area }}
                                        </h6>
                                        @if(!empty($info['productos_insuficientes']))
                                            <small class="mb-1"><strong class="text-danger">Productos insuficientes:</strong></small>
                                            <ul class="text-muted small">
                                                @foreach($info['productos_insuficientes'] as $producto)
                                                    <li><small>{{ $producto }}</small></li>
                                                @endforeach
                                            </ul>
                                        @endif
                                    </div>
                                </div>
                            @endif
                        @endforeach
                    </div>
                @endforeach
            </div>
        </div>
    @endforeach
    <div id="loaderOverlay">
        <div class="spinner"></div>
        <p>Cargando, por favor espere...</p>
    </div>
</div>
@endsection
@section('scripts')

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/non-cartesian-zoom.js"></script>
<script src="https://code.highcharts.com/modules/mouse-wheel-zoom.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!-- DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.bootstrap5.min.css">

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<script>
    function mostrarLoader() {
    document.getElementById('loaderOverlay').style.display = 'flex';
    }

    function ocultarLoader() {
        document.getElementById('loaderOverlay').style.display = 'none';
    }
    document.addEventListener('DOMContentLoaded', function() {
        // const mesInput = document.getElementById('mesSeleccionado');
        const departamentoSelect = document.getElementById('departamento');
        const tipoSubsidioSelect = document.getElementById('tipoSubsidio');
        const tipoPeriodoSelect = document.getElementById('tipoPeriodo');

        function actualizarPagina() {
            mostrarLoader();
            const departamento = departamentoSelect.value; // valor numérico o vacío
            const tipoSubsidio = tipoSubsidioSelect.value;
            const tipoPeriodo = tipoPeriodoSelect.value;
            // construimos la URL enviando ambos parámetros
            let url = "{{ route('subsidios.index') }}" + `?tipoSubsidio=${tipoSubsidio}&departamento=${departamento}&tipoPeriodo=${tipoPeriodo}`;

            window.location.href = url;
        }

        // mesInput.addEventListener('change', actualizarPagina);
        departamentoSelect.addEventListener('change', actualizarPagina);
        tipoSubsidioSelect.addEventListener('change', actualizarPagina);
        tipoPeriodoSelect.addEventListener('change', actualizarPagina);
    });
</script>

<script>
    const colorByTipoPaquete = {
        'URBANO - Proy': '#E7180B',
        'URBANO - Posibles': '#2B7FFF',
        'RURAL - Proy': '#FF8904',
        'RURAL - Posibles': '#05DF72',
        // Agrega todos los tipos que existan
    };
    function getColorByTipo(tipo) {
        console.log('Buscando color para tipo:', tipo);
        return colorByTipoPaquete[tipo] || '#666666';
    }
document.addEventListener('DOMContentLoaded', function () {

    @foreach($agrupados as $sucursal => $tiposPaquete)
        (function() {
            const containerId = 'grafico_{{ Str::slug($sucursal, '_') }}';

            // Categorías = tipos de paquete
            const categorias = {!! json_encode($tiposPaquete->keys()->toArray()) !!};

            // Identificar todas las áreas que existen dentro de esta sucursal
            const todasAreas = [];
            @foreach($tiposPaquete as $tipoPaquete => $areas)
                @foreach($areas as $area => $valores)
                    if (!todasAreas.includes('{{ $area }}')) todasAreas.push('{{ $area }}');
                @endforeach
            @endforeach

            // Crear series para cada área (dos valores por tipoPaquete)
            const series = [];
            @foreach($tiposPaquete as $tipoPaquete => $areas)
                @foreach($areas as $area => $valores)
                    // Buscar la serie existente o crearla
                    var serieMaxIndex = series.findIndex(s => s.name === '{{ $area }} - Proy');
                    if (serieMaxIndex === -1) {
                        // series.push({ name: '{{ $area }} - Proy', data: [] });
                        series.push({
                            name: '{{ $area }} - Proy',
                            data: [],
                            color: getColorByTipo('{{ $area }} - Proy')
                        });
                        serieMaxIndex = series.length - 1;
                    }

                    var serieMinIndex = series.findIndex(s => s.name === '{{ $area }} - Posibles');
                    if (serieMinIndex === -1) {
                        // series.push({ name: '{{ $area }} - Posibles', data: [] });
                        series.push({
                            name: '{{ $area }} - Posibles',
                            data: [],
                            // Mismo color pero ligeramente más oscuro
                            color: Highcharts.color(getColorByTipo('{{ $area }} - Posibles')).brighten(-0.3).get()
                        });
                        serieMinIndex = series.length - 1;
                    }

                    // Agregar valores en el índice correcto según la categoría
                    var indexCat = categorias.indexOf('{{ $tipoPaquete }}');
                    series[serieMaxIndex].data[indexCat] = {{ $valores['max_cantidadProyectada'] ?? 0 }};
                    series[serieMinIndex].data[indexCat] = {{ $valores['min_maxPaquetesPosibles'] ?? 0 }};
                @endforeach
            @endforeach

            // Reemplazar undefined por 0 en caso de faltantes
            series.forEach(s => {
                for (let i = 0; i < categorias.length; i++) {
                    if (s.data[i] === undefined) s.data[i] = 0;
                }
            });

            Highcharts.chart(containerId, {
                chart: { type: 'column' },
                title: { text: 'Proyectado Vs Posibles por Tipo de Paquete y Área' },
                xAxis: {
                    categories: categorias,
                    title: { text: 'Tipo de Paquete' },
                    crosshair: true
                },
                yAxis: {
                    min: 0,
                    title: { text: 'Cantidad' }
                },
                tooltip: {
                    shared: true,
                    valueSuffix: ' Paquetes'
                },
                plotOptions: {
                    column: { pointPadding: 0.1, borderWidth: 0 }
                },
                series: series
            });
        })();
    @endforeach
ocultarLoader();
});

</script>


@endsection