@extends('layouts.app')
@section('titulo', 'Dashboard')
@section('css')
<link rel="stylesheet" href="{{ asset('assets/css/home.css') }}">
@endsection
@section('content')
    <div class="row justify-content-center h-90 mb-2 w-100">
        <div class="col-12">
            <div class="slider-container">
                <div class="slider" id="carouselExampleFade">
                    <div class="slide" data-empresa="ecebol">
                        <div class="slide-content">
                            @include('ecebol.solo_graficos')
                        </div>
                    </div>
                    <div class="slide" data-empresa="envibol">
                        <div class="slide-content">
                            @include('envibol.solo_graficos')
                        </div>
                    </div>
                    <div class="slide" data-empresa="papelbol">
                        <div class="slide-content">
                            @include('papelbol.solo_graficos')
                        </div>
                    </div>
                    <div class="slide" data-empresa="papelbol">
                        <div class="slide-content">
                            @include('cartonbol.solo_graficos')
                        </div>
                    </div>
                </div>
                <!-- Botones de navegación -->
                <button class="nav-btn prev-btn" onclick="prevSlide()">⟨</button>
                <button class="nav-btn next-btn" onclick="nextSlide()">⟩</button>

                <!-- Indicadores -->
                <div class="slide-indicators">
                    <div class="indicator active" onclick="goToSlide(0)"></div>
                    <div class="indicator" onclick="goToSlide(1)"></div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<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>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<script>
    window.csrfToken = "{{ csrf_token() }}";
    window.ecebolConfig = {
        routes: {
            ecebolObtenerUltimaFecha: "{{ route('ecebol.obtener.ultima.fecha') }}",
            obtenerDiasMes: "{{ route('ecebol.obtener.dias.mes') }}",
            graficoPorDiasMes: "{{ route('ecebol.grafico.por.dias.mes') }}",
            graficoSalidasDia: "{{ route('ecebol.grafico.salidas.dia') }}",
            graficoConsumoMes: "{{ route('ecebol.grafico.consumo.mes') }}",
            graficoConsumoDia: "{{ route('ecebol.grafico.consumo.dia') }}",
            graficoCapacidadProductivaDia: "{{ route('ecebol.grafico.capacidad.productiva.dia') }}",
            graficoCapacidadProductivaTotalDia: "{{ route('ecebol.grafico.capacidad.productiva.total.dia') }}",
            graficoAlmacenamientoDia: "{{ route('ecebol.grafico.almacenamiento.dia') }}",
            graficoProduccionProgramadoMes: "{{ route('ecebol.grafico.produccion.programado.mes') }}",
        },
        itemsEcebol: @json($itemsEcebol),
        itemsCapacidadEcebol1: @json($itemsCapacidadEcebol1),
        itemsCapacidadEcebol2: @json($itemsCapacidadEcebol2),
        itemsProduccionEcebol: @json($itemsProduccionEcebol),
        itemsServiciosEcebol: @json($itemsServiciosEcebol),
        itemsAlmacenamientoEcebol: @json($itemsAlmacenamientoEcebol),
    };
    window.envibolConfig = {
        routes: {
            envibolObtenerUltimaFecha: "{{ route('envibol.obtener.ultima.fecha') }}",
            envibolObtenerDiasMes: "{{ route('envibol.obtener.dias.mes') }}",
            envibolInventarioMateriaPrimaDia: "{{ route('envibol.inventario_materia_prima_dia') }}",
            envibolInventarioMateriaPrimaMensual: "{{ route('envibol.inventario_materia_prima_mensual') }}",
            envibolTotalConsumoDia: "{{ route('envibol.total.consumo.dia') }}",
            envibolGraficoConsumoMes: "{{ route('envibol.grafico.consumo.mes') }}",
            envibolHorasProducidasTotalDia: "{{ route('envibol.horas.producidas.total.dia') }}",
            envibolGraficoHorasProducidasMes: "{{ route('envibol.grafico.horas.producidas.mes') }}",
            envibolGraficoCapacidadUtilizadaMes: "{{ route('envibol.grafico.capacidad.utilizada.mes') }}",
            envibolGraficoCapacidadUtilizadaDia: "{{ route('envibol.grafico.capacidad.utilizada.dia') }}",
            envibolGraficoProduccionMes: "{{ route('envibol.grafico.produccion.mes') }}",
            envibolDatosProduccionDia: "{{ route('envibol.datos.produccion.dia') }}",
            envibolGraficoReprocesoMes: "{{ route('envibol.grafico.reproceso.mes') }}",
            envibolGraficoProduccionTotalMes: "{{ route('envibol.grafico.produccion.total.mes') }}",
            envibolGraficoVentasMes: "{{ route('envibol.grafico.ventas.mes') }}",
            envibolInventarioProductoDia: "{{ route('envibol.inventario.producto.dia') }}",
            envibolGraficoInventarioProductoMes: "{{ route('envibol.grafico.inventario.producto.mes') }}",
            envibolGraficoProduccionAcumuladaMes: "{{ route('envibol.grafico.produccion.acumulada.mes') }}",
            envibolProduccionAcumuladaDia: "{{ route('envibol.produccion.acumulada.dia') }}",
        },
        itemsInventarioEnvibol:@json($itemsInventarioEnvibol),
        itemsServiciosEnvibol:@json($itemsServiciosEnvibol),
        itemHorasProducidasEnvibol:@json($itemHorasProducidasEnvibol),
        itemsInventarioProductoEnvibol:@json($itemsInventarioProductoEnvibol),
    };
    window.papelbolConfig = {
        routes: {
            papelbolObtenerUltimaFecha: "{{ route('papelbol.obtener.ultima.fecha') }}",
            papelbolObtenerDiasMes: "{{ route('papelbol.obtener.dias.mes') }}",
            papelbolInventarioMateriaPrimaTotalDia: "{{ route('papelbol.inventario_materia_prima_total_dia') }}",
            papelbolInventarioMateriaPrimaTotalDia: "{{ route('papelbol.inventario_materia_prima_total_dia') }}",
            papelbolInventarioMateriaPrimaMensual: "{{ route('papelbol.inventario_materia_prima_mensual') }}",
            papelbolTotalConsumoDia: "{{ route('papelbol.total.consumo.dia') }}",
            papelbolGraficoConsumoMes: "{{ route('papelbol.grafico.consumo.mes') }}",
            papelbolGraficoCapacidadDia: "{{ route('papelbol.grafico_capacidad_dia') }}",
            papelbolGraficoProduccionMes: "{{ route('papelbol.grafico.produccion.mes') }}",
            papelbolGraficoProduccionAcumuladaMes: "{{ route('papelbol.grafico.produccion.acumulada.mes') }}",
            papelbolGraficoVentasMes: "{{ route('papelbol.grafico.ventas.mes') }}",
            papelbolGraficoInventarioProductoMes: "{{ route('papelbol.grafico.inventario.producto.mes') }}",
        },
        itemsInventarioVillaTunari:@json($itemsInventarioVillaTunari), 
        itemsInventarioSantivanez:@json($itemsInventarioSantivanez),
        itemEnergiaVT:@json($itemEnergiaVT), 
        itemEnergiaST:@json($itemEnergiaST),
        itemProduccionVT:@json($itemProduccionVT),
        itemProduccionST:@json($itemProduccionST)
    };
    window.cartonbolConfig = {
        routes: {
            cartonbolObtenerUltimaFecha: "{{ route('cartonbol.obtener.ultima.fecha') }}",
            cartonbolObtenerDiasMes: "{{ route('cartonbol.obtener.dias.mes') }}",
            cartonbolInventarioMateriaPrimaTotalDia: "{{ route('cartonbol.inventario_materia_prima_total_dia') }}",
            cartonbolInventarioMateriaPrimaMensual: "{{ route('cartonbol.inventario_materia_prima_mensual') }}",
            cartonbolTotalConsumoDia: "{{ route('cartonbol.total.consumo.dia') }}",
            cartonbolGraficoConsumoMes: "{{ route('cartonbol.grafico.consumo.mes') }}",
            cartonbolGraficoHorasProducidasMes: "{{ route('cartonbol.grafico.horas.producidas.mes') }}",
            cartonbolHorasProducidasTotalDia: "{{ route('cartonbol.horas.producidas.total.dia') }}",
            cartonbolGraficoCapacidadDia: "{{ route('cartonbol.grafico_capacidad_dia') }}",
            cartonbolGraficoProduccionAcumuladaMes: "{{ route('cartonbol.grafico.produccion.acumulada.mes') }}",
            cartonbolGraficoProduccionMes: "{{ route('cartonbol.grafico.produccion.mes') }}",
            cartonbolGraficoProduccionTotalMes: "{{ route('cartonbol.grafico.produccion.total.mes') }}",
            cartonbolGraficoVentasMes: "{{ route('cartonbol.grafico.ventas.mes') }}",
            cartonbolGraficoInventarioProductoMes: "{{ route('cartonbol.grafico.inventario.producto.mes') }}",
        },
        itemsInventarioCartonbol: @json($itemsInventarioCartonbol),
        itemEnergiaCartonbol: @json($itemEnergiaCartonbol),
        itemHorasProducidasCartonbol: @json($itemHorasProducidasCartonbol),
        itemCapacidadCartonbol: @json($itemCapacidadCartonbol),
        itemProduccionCartonbol: @json($itemProduccionCartonbol),
    };
</script>
<script src="{{ asset('assets/js/emp/ece.js') }}"></script>
<script src="{{ asset('assets/js/emp/env.js') }}"></script>
<script src="{{ asset('assets/js/emp/pap.js') }}"></script>
<script src="{{ asset('assets/js/emp/car.js') }}"></script>
<script>
    $(document).ready(function () {
        let currentIndex = 0;
        const totalSlides = $('.slide').length;
        const carusel = document.getElementById("carouselExampleFade");

        let intervalTime = parseInt($('#interval-time').val(), 10);
        let fechaActual = new Date().toDateString();
        let interval = null;
        let paused = false;

        function updateSlide() {
            carusel.style.transform = `translateX(-${currentIndex * 100}vw)`;

            const empresaActual = $('.slide').eq(currentIndex).data('empresa');
            
            switch (empresaActual) {
                case 'ecebol':
                    recargarEcebol();
                    break;
                case 'envibol':
                    recargarEnvibol();
                    break;
                case 'papelbol':
                    recargarGraficosPapelbol();
                    break;
                case 'cartonbol':
                    cargarGraficosCartonbol();
                    break;
                // case 'subsidio'
                //     //cargarGraficosSubsidio();
                //     break;
            }
        }

        function startSlider() {
            clearInterval(interval);
            interval = setInterval(() => {
                if (!paused) {
                    currentIndex = (currentIndex + 1) % totalSlides;
                    updateSlide();
                } else {
                    const empresaActual = $('.slide').eq(currentIndex).data('empresa');
                    switch (empresaActual) {
                        case 'ecebol':
                            recargarEcebol();
                            break;
                        case 'envibol':
                            recargarEnvibol();
                            break;
                        case 'papelbol':
                            recargarGraficosPapelbol();
                            break;
                        case 'cartonbol':
                            cargarGraficosCartonbol();
                            break;
                        // case 'subsidio'
                        //     //cargarGraficosSubsidio();
                        //     break;
                    }
                    
                }
                actualizarFecha();
                recargarSiCambioDia();
            }, intervalTime);
        }

        function stopSlider() {
            clearInterval(interval);
        }

        function actualizarFecha() {
            const ahora = new Date();
            const formato = ahora.toLocaleString('es-BO', {
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                day: '2-digit',
                month: '2-digit',
                year: 'numeric'
            });
            $('.fecha-actualizacion').text('Ultima actualización: ' + formato);
        }

        function recargarSiCambioDia() {
            const ahora = new Date().toDateString();
            if (ahora !== fechaActual) {
                fechaActual = ahora;
                location.reload();
            }
        }

        function setIntervalTime(value) {
            intervalTime = parseInt(value, 10);
            startSlider();
            recargarEnvibol();
            recargarEcebol();
            recargarGraficosPapelbol();
            cargarGraficosCartonbol();
        }

        // Botones de navegación
        $('.next-btn, .next-btn-mobile').on('click', function () {
            currentIndex = (currentIndex + 1) % totalSlides;
            updateSlide();
        });

        $('.prev-btn, .prev-btn-mobile').on('click', function () {
            currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
            updateSlide();
        });

        // Botón Pausar/Reanudar
        $('#pauseBtn').on('click', function () {
            paused = !paused;
            $(this).removeClass('blink');
            void this.offsetWidth; // reflow
            $(this).addClass('blink');

            if (paused) {
                $(this).text("Reanudar").css({ backgroundColor: "yellow", color: "black" });
            } else {
                $(this).text("Pausar").css({ backgroundColor: "orange", color: "white" });
            }
        });
        function nextSlide() {
            currentSlide = (currentSlide + 1) % totalSlides;
            updateSlider();
        }

        function prevSlide() {
            currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
            updateSlider();
        }
        // Iniciar todo
        actualizarFecha();
        startSlider();

        document.addEventListener('keydown', function(e) {
            if (e.key === 'ArrowLeft') {
                prevSlide();
            } else if (e.key === 'ArrowRight') {
                nextSlide();
            }
        });
        // Exponer setIntervalTime globalmente para el onchange del select
        window.setIntervalTime = setIntervalTime;
    });
    
</script>

@endsection