@extends('layouts.app')
@section('titulo', 'Dashboard')
@section('css')
<link rel="stylesheet" href="{{ asset('assets/css/subsidio.css') }}">
@endsection
@section('content')

<div class="pt-2">
    <h2 class="text-center fw-bold mb-1 mt-3">📦 Resumen de información mensual</h2>

    {{-- Selector de mes --}}
    <div class="row mb-4">
        {{-- <div >
            <label class="me-2 fw-semibold">Seleccionar mes:</label>
            <input type="month" id="mesSeleccionado" name="mesSeleccionado" value="{{ now()->format('Y-m') }}" class="form-control" style="width:200px;">
        </div> --}}
        <div class="col-md-3"></div>
        <div class="col-md-2">
            <label class="me-2 fw-semibold">Departamento:</label>
                <select name="departamento" id="departamento" class="form-control">
                    <option value="0">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-2">
            <label for="">Tipo Subsidio</label>
            <select name="tipoSubsidio" id="tipoSubsidio" class="form-control">
                <option value="1" {{ $tipoSubsidio == '1' ? 'selected' : '' }}>PRENATAL/LACTANCIA</option>
                <option value="2" {{ $tipoSubsidio == '2' ? 'selected' : '' }}>UNIVERSAL</option>
            </select>
        </div>
        <div class="col-md-3"></div>
        <div class="col-md-2">
            <div class="card text-center shadow-sm border-0 mb-0 bg-warning text-white">
                <div class="card-body p-1">
                    <h6 class="card-title text-white">REZAGADOS {{ $textoDeptoSeleccionado }}</h6>
                    <h5 class="text-white mb-0">{{ number_format($totalRezagados) }} PQ</h5>
                    <h5 id="totalNacional" class="text-white fw-bold">{{ number_format($totalRezagadosBs/1000000,2) }} mill Bs.</h5>
                    <p class="text-white mb-0">(A la fecha)</p>
                </div>
            </div>
        </div>
    </div>

    {{-- Total nacional --}}
     <div class="row g-4">
        

    {{-- Gráficos --}}
        <div class="col-md-2"></div>
        <div class="col-md-4">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-light fw-semibold d-flex justify-content-between align-items-center pt-2 pb-2">
                    <span>DISTRIBUCIÓN DE PAQUETES {{ $textoDeptoSeleccionado }}</span>
                    <div>
                        <label class="me-2 fw-semibold">Mes:</label>
                        <input type="month" id="mesPaquetes" name="mesPaquetes" value="{{ now()->format('Y-m') }}" class="form-control form-control-sm d-inline-block" style="width:150px;">
                    </div>
                </div>
                <div class="card-body pt-1">
                    <div id="graficoDepartamentos"></div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-light fw-semibold d-flex justify-content-between align-items-center pt-2 pb-2">
                    <span>PAGO A PROVEEDORES {{ $textoDeptoSeleccionado }}</span>
                    <div>
                        <label class="me-2 fw-semibold">Mes:</label>
                        <input type="month" id="mesProveedores" name="mesProveedores" value="{{ now()->format('Y-m') }}" class="form-control form-control-sm d-inline-block" style="width:150px;">
                    </div>
                </div>
                <div class="card-body pt-1">
                    <div id="graficoPagosProveedores"></div>
                </div>
            </div>
        </div>
        <div class="col-md-2"></div>
    </div>
</div>

<div class="row">
    <div class="col-4">
        <div class="card shadow-sm border-0 mb-4">
            <div class="card-header bg-primary text-white fw-semibold pt-2 pb-2">
                🚚 Productos en tránsito @if($departamentoSeleccionado != 0) del departamento {{ $topTransito[0]['departamento'] }} @else Nacional @endif
                <br>Subsidio:{{ $tipoSubsidio==1 ? 'PRENATAL/LACTANCIA' : 'UNIVERSAL' }}
            </div>
            <div class="card-body p-0">
                <div class="tabla-scroll">
                    <table class="table table-striped table-hover align-middle mb-0 table-sm">
                        <thead class="table-light">
                            <tr>
                                <th>#</th>
                                <th>Producto</th>
                                @if($departamentoSeleccionado == 0)
                                <th>Departamento</th>
                                @endif
                                <th class="text-end">Cantidad</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($topTransito as $i => $item)
                            <tr>
                                <td class="small">{{ $i + 1 }}</td>
                                <td class="small">{{ $item['producto'] }}</td>
                                @if($departamentoSeleccionado == 0)
                                <td class="small">{{ $item['departamento'] }}</td>
                                @endif
                                <td class="text-end fw-semibold">{{ number_format($item['cantidadSolicitud']) }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    
    {{-- Top 10 productos próximos a vencer --}}
    <div class="col-4">
        <div class="card shadow-sm border-0 mb-5">
            <div class="card-header bg-danger text-white fw-semibold table-sm pt-2 pb-2">
                ⏳ Productos próximos a vencer @if($departamentoSeleccionado != 0) del departamento {{ $topVencer[0]['departamento'] }} @else Nacional @endif
                <br>Subsidio:{{ $tipoSubsidio==1 ? 'PRENATAL/LACTANCIA' : 'UNIVERSAL' }}
            </div>
            <div class="card-body p-0">
                <div class="tabla-scroll">
                    <table class="table table-striped table-hover align-middle mb-0 table-sm">
                        <thead class="table-light">
                            <tr>
                                <th>#</th>
                                <th>Producto</th>
                                <th>Vencimiento</th>
                                <th>Alerta</th>
                                @if($departamentoSeleccionado == 0)
                                <th>Departamento</th>
                                @endif
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($topVencer as $i => $item)
                            @php
                                $color = $item['dias'] <= 15 ? 'danger' : ($item['dias'] <= 30 ? 'warning' : 'success');
                            @endphp
                            <tr>
                                <td class="small">{{ $i + 1 }}</td>
                                <td class="small">{{ $item['producto'] }} ({{ $item['existencias'] }}) <br>
                                    <small>{{ $item['sucursal'] }}</small></td>
                                <td class="small text-center">{{ $item['dias'] }} días <br>
                                    <small>({{ $item['vencimiento'] }})</small>
                                </td>
                                <td class="small">
                                    <div class="progress" style="height: 8px;">
                                        <div class="progress-bar bg-{{ $color }}" style="width: {{ max(0, (30 - $item['dias'])) * 2.5 }}%"></div>
                                    </div>
                                </td>
                                @if($departamentoSeleccionado == 0)
                                <td class="small">{{ $item['departamento'] }}</td>
                                @endif
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="col-4">
        <div class="card shadow-sm border-0 mb-5">
            <div class="card-header bg-success text-white fw-semibold table-sm pt-2 pb-2">
                ⏳ Productos poco stock @if($departamentoSeleccionado != 0) del departamento {{ $topSinStock[0]['departamento'] }} @else Nacional @endif
                <br>Subsidio:{{ $tipoSubsidio==1 ? 'PRENATAL/LACTANCIA' : 'UNIVERSAL' }}
            </div>
            <div class="card-body p-0">
                <div class="tabla-scroll">
                    <table class="table table-striped table-hover align-middle mb-0 table-sm">
                        <thead class="table-light">
                            <tr>
                                <th>#</th>
                                <th>Producto</th>
                                <th>Stock</th>
                                @if($departamentoSeleccionado == 0)
                                <th>Departamento</th>
                                @endif
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($topSinStock as $i => $item)
                            <tr>
                                <td class="small">{{ $i + 1 }}</td>
                                <td class="small">{{ $item['producto'] }} <br>
                                    <small>{{ $item['sucursal'] }}</small>
                                </td>
                                <td class="small" text-center>{{ $item['existencias'] }}</td>
                                @if($departamentoSeleccionado == 0)
                                <td class="small">{{ $item['departamento'] }}</td>
                                @endif
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div id="loaderOverlay">
        <div class="spinner"></div>
        <p>Cargando, por favor espere...</p>
    </div>
</div>
@endsection
@section('scripts')
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<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 departamentoSelect = document.getElementById('departamento');
        const tipoSubsidioSelect = document.getElementById('tipoSubsidio');
        departamentoSelect.addEventListener('change', actualizarPagina);
        tipoSubsidioSelect.addEventListener('change', actualizarPagina);

        function actualizarPagina() {
            mostrarLoader();
            const departamento = departamentoSelect.value; // valor numérico o vacío
            const tipoSubsidio = tipoSubsidioSelect.value;
            let url = "{{ route('subsidios.general') }}" + `?tipoSubsidio=${tipoSubsidio}&departamento=${departamento}`;
            window.location.href = url;
        }

        const categorias = Object.values(@json($categoriasPaquetes)); 
        const valores = @json($valoresPaquetes);
        const titulo = @json($tituloPaquetes);
        const departamentoSeleccionado = "{{ $departamentoSeleccionado }}";
        const esDeptoGeneral = departamentoSeleccionado === 0;

        actualizarGraficoPaquetes(categorias, valores, titulo);

        function actualizarGraficoPaquetes(categoriasGrafico, valoresGrafico, tituloGrafico) {
            Highcharts.chart('graficoDepartamentos', {
                chart: { type: 'column', backgroundColor: 'transparent' },
                title: { text: tituloGrafico },
                xAxis: {
                    categories: categoriasGrafico,
                    title: { text: 'Departamentos / Sucursales' },
                    labels: { style: { fontSize: '13px' } }
                },
                yAxis: {
                    min: 0,
                    title: { text: 'Cantidad de Paquetes' },
                    labels: { style: { fontSize: '12px' } }
                },
                tooltip: { pointFormat: '<b>{point.y} paquetes</b>' },
                plotOptions: {
                    column: {
                        borderRadius: 4,
                        colorByPoint: true,
                        dataLabels: {
                            enabled: true,
                            format: '{point.y}',
                            style: {
                                fontWeight: 'bold',
                                color: '#000',
                                textOutline: 'none',
                                fontSize: '13px'
                            },
                            y: -10
                        }
                    }
                },
                series: [{ name: 'Paquetes', data: valoresGrafico }],
                credits: { enabled: false },
            });
        }
        
        document.getElementById('mesPaquetes').addEventListener('change', function() {
            const mesSeleccionado = this.value;
            
            // Mostrar loading
            document.getElementById('graficoDepartamentos').innerHTML = '<div class="text-center py-5"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Cargando...</span></div></div>';
    
            // Petición AJAX
            $.ajax({
                url: "{{ route('paquetes.filtrar') }}",
                method: 'GET',
                data: { mes: mesSeleccionado, departamento: departamentoSeleccionado },
                dataType: 'json',
                success: function(data) {
                    actualizarGraficoPaquetes(data.categoriasPaquetes, data.valoresPaquetes, data.tituloPaquetes);
                },
                error: function(xhr, status, error) {
                    console.error('Error:', error);
                    document.getElementById('graficoDepartamentos').innerHTML = '<div class="alert alert-danger">Error al cargar datos</div>';
                }
            })
        });
    });
</script>

<script>
    let chartProveedores;
    const departamentoSeleccionado = "{{ $departamentoSeleccionado }}";
    const esDeptoGeneral = departamentoSeleccionado === 0;
    // Función para crear/actualizar el gráfico
    function actualizarGraficoProveedores(datos, totalPago,titulo) {
        const categorias = datos.map(item => esDeptoGeneral ? item.departamento : item.empresaProveedor);
        const montos = datos.map(item => item.montoTotal / 1000000);
    
        chartProveedores = Highcharts.chart('graficoPagosProveedores', {
            chart: {
                type: 'bar',
                backgroundColor: '#f8f9fa'
            },
            title: {
                text: titulo
            },
            xAxis: {
                categories: categorias,
                title: { text: esDeptoGeneral ? 'Departamento' : 'Proveedor' }
            },
            yAxis: {
                title: { text: 'Monto (Millones Bs)' },
                labels: {
                    formatter: function() {
                        return Highcharts.numberFormat(this.value, 0, ',', '.');
                    }
                }
            },
            tooltip: {
                pointFormat: '<b>{point.y:,.2f} Millones Bs</b>'
            },
            plotOptions: {
                series: {
                    dataLabels: {
                        enabled: true,
                        format: '{y:,.2f}'
                    },
                    colorByPoint: true
                }
            },
            series: [{
                name: 'Monto',
                data: montos
            }],
            credits: { enabled: false }
        });
    }

    // Inicializar con datos actuales
    const datosIniciales = @json($pagos_proveedores);
    const totalInicial = {{ $totalPagoProveedores }};
    const tituloProveedores = @json($tituloProveedores);
    actualizarGraficoProveedores(datosIniciales, totalInicial, tituloProveedores);

    // Evento change del input de mes
    document.getElementById('mesProveedores').addEventListener('change', function() {
        const mesSeleccionado = this.value;
        
        // Mostrar loading
        document.getElementById('graficoPagosProveedores').innerHTML = '<div class="text-center py-5"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Cargando...</span></div></div>';

        // Petición AJAX
        $.ajax({
            url: "{{ route('proveedores.filtrar') }}",
            method: 'GET',
            data: { mes: mesSeleccionado, departamento: departamentoSeleccionado },
            dataType: 'json',
            success: function(data) {
                console.log('proveedores '+data.pagos_proveedores);
                actualizarGraficoProveedores(data.pagos_proveedores, data.totalPagoProveedores, data.tituloProveedores);
            },
            error: function(xhr, status, error) {
                console.error('Error:', error);
                document.getElementById('graficoPagosProveedores').innerHTML = '<div class="alert alert-danger">Error al cargar datos</div>';
            }
        })
    });



</script>
@endsection