@extends('layouts.app')
@section('titulo', 'Dashboard')
@section('css')
<link rel="stylesheet" href="{{ asset('assets/css/graficos.css') }}">
@endsection
@section('content')
    <div class="row align-items-center">
        <div class="col-sm-8">
            <div class="breadcrumbs-area clearfix">
                <h4 class="page-title pull-left">REPORTE DIARIO ECEBOL <span id="fecha-actualizacion-ecebol" class="fecha-actualizacion"></span></h4>
            </div>
        </div>
        <div class="col-sm-4 ">
            <div class="row m-1">
                <h4 for="mes" class="col-md-2 mt-2">Mes:</h4>
                <div class="col-md-4">
                    <select name="mesEcebol" id="mesEcebol" class="form-control form-control-lg" required onchange="cargarDiasEcebol(this.value);
                    generarGraficoConsumoServiciosEcebol(this.value,6,5);
                    generarGraficoProduccionVentasEcebol(this.value,6,5);
                    generarGraficoProduccionVentasEcebol(this.value,8,9);
                    generarDatosProduccionEcebol(this.value,6,5,4);
                    generarDatosSalidasDiaEcebol($('#diaEcebol').val(),6,3);
                    generarCapacidadProductivaDiaEcebol($('#diaEcebol').val(),6,1);generarGraficoConsumoServiciosTotalDiaEcebol($('#diaEcebol').val(),6,5);generarGraficoAlmacenamientoDiaEcebol($('#diaEcebol').val(),7,7)
                    ">
                        <option value="1">Enero</option>
                        <option value="2">Febrero</option>
                        <option value="3">Marzo</option>
                        <option value="4">Abril</option>
                        <option value="5">Mayo</option>
                        <option value="6">Junio</option>
                        <option value="7">Julio</option>
                        <option value="8">Agosto</option>
                        <option value="9">Septiembre</option>
                        <option value="10">Octubre</option>
                        <option value="11">Noviembre</option>
                        <option value="12">Diciembre</option>
                    </select>
                </div>
                <h4 for="dia" class="col-md-2 mt-2">Día:</h4>
                <div class="col-md-4">
                    <select name="diaEcebol" id="diaEcebol" class="form-control form-control-lg" required onchange="generarDatosSalidasDiaEcebol(this.value,6,3);
                    generarCapacidadProductivaDiaEcebol(this.value,6,1);generarGraficoConsumoServiciosTotalDiaEcebol(this.value,6,5);generarGraficoAlmacenamientoDiaEcebol(this.value,7,7)"></select>
                </div>
            </div>
        </div>
    </div>

     <!-- Primer Row - 50% de la altura de la pantalla -->
    <div class="row mb-1 h-42 h-sm-100 pl-2 pr-2 pt-0 pb-0" >
        <!-- Salidas de Materia Prima - 25% del ancho -->
        <div class="col-md-3 col-sm-12 h-100 mb-2 p-1">
            <div class="card h-100">
                <div class="card-body pt-2 pr-4 pl-4 pb-3">
                    <h6 class="mb-0 titulo">SALIDAS DE MATERIA PRIMA</h6>
                    <div class="row pt-1 pr-4 pl-4 pb-2" style="height: 100%;">
                        @foreach($itemsEcebol as $item)
                            <div class="col-md-4 col-sm-6 p-1 d-flex flex-column align-items-center justify-content-center" style="border: 1px solid #ddd; "> 
                                <div id="ecebolTotalSalidas_6_3_{{ $item->idpar_item }}" class="text-center mb-1 "></div>
                                <span class="text-primary small text-center">{{ $item->nombre }} ({{ $item->unidad_medida }})</span>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        <!-- Uso de Capacidad Productiva - 25% del ancho -->
        <div class="col-md-3 col-sm-12 h-100 mb-2 p-1">
            <div class="card h-100">
                <div class="card-body pt-2 pb-1 mb-0 h-100">
                    <h6 class="mb-0 titulo">USO DE LA CAPACIDAD PRODUCTIVA</h6>
                    <div class="row pt-2 pl-3 pr-3" style="height: 60%;">
                        <div class="col-md-8 p-0" style="border: 1px solid #ddd; ">
                            <div id="ecebolContenedorGraficoCapacidad_total" class="w-100 h-100 p-0 m-0"></div>
                        </div>
                        <div class="col-md-4 h-100">
                            <div class="row h-100">
                                @foreach($itemsCapacidadEcebol1 as $capacidad1)
                                    <div class="col-12 h-50 p-0" style="border: 1px solid #ddd;">
                                        <div id="ecebolContenedorGraficoCapacidad_6_1_{{ $capacidad1->idpar_item }}" class="p-0 m-0 w-100 h-100"></div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <div class="row pl-3 pr-3 pb-0" style="height: 35%;">
                        @foreach($itemsCapacidadEcebol2 as $capacidad2)
                            <div class="col-md-4 p-0 h-100" style="border: 1px solid #ddd;">
                                <div id="ecebolContenedorGraficoCapacidad_6_1_{{ $capacidad2->idpar_item }}" class="p-0 m-0 w-100 h-100"></div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        <!-- Producción por Día - 50% del ancho -->
        <div class="col-md-6 col-sm-12 mb-2 p-1" style="height: 100%;">
            <div class="card h-100">
                <div class="card-body h-100 pt-2 pr-4 pl-4 pb-1">
                    <h6 class="mb-0 titulo">PRODUCCIÓN POR DÍA DEL MES</h6>
                    <div class="row pt-1 pb-3 h-100">
                        <div class="col-md-9 border p-0 h-100">
                            <div id="ecebolContenedorGrafico_6_5" class="h-100"></div>
                        </div>
                        <div class="col-md-3 h-100 p-0">
                            <div class="row h-100">
                                @foreach ($itemsProduccionEcebol as $i)
                                    <div class="col-12 p-1 border text-center d-flex flex-column align-items-center justify-content-center">
                                        <div class="text-primary small"><strong>{{ $i->nombre }}</strong></div>
                                        <div id="ecebolTotalProduccionDia_6_5_{{ $i->idpar_item }}"></div>
                                        <div id="ecebolTotalProduccionProgramada_6_5_{{ $i->idpar_item }}"></div>
                                        <div id="ecebolTotalProduccionEjecutado_6_5_{{ $i->idpar_item }}" class="small"></div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Segundo Row - 50% de la altura de la pantalla -->
    <div class="row h-42 h-sm-100 pl-2 pr-2 pt-0 pb-0">
        <!-- Consumo de Energía - 25% del ancho -->
        <div class="col-md-3 h-100 mb-2 p-1">
            <div class="card h-100">
                <div class="card-body h-100 p-2">
                    <h6 class="mb-0 titulo">CONSUMO DE ENERGÍA</h6>
                    <div class="row h-100 pt-1 pr-4 pl-4 pb-2">
                        @foreach ($itemsServiciosEcebol as $i)
                            <div class="col-6 border" style="position: relative;">
                                <div class="text-center mt-2" style="position: absolute; z-index: 2; width: 100%; top: 0; left: 0;">
                                    <div id="ecebolTotalConsumo_6_5_{{ $i->idpar_item }}"></div>
                                    <small>{{ $i->nombre }} ({{ $i->unidad_medida }})</small>
                                </div>
                                <div id="ecebolContenedorGraficoConsumo_6_5_{{ $i->idpar_item }}" class="w-100 h-100" style="position: absolute; top: 0; left: 0; z-index: 1;"></div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        <!-- Almacenamiento de Producto - 25% del ancho -->
        <div class="col-md-3 h-100 mb-2 p-1">
            <div class="card h-100">
                <div class="card-body p-2 h-100">
                    <h6 class="mb-0 titulo">ALMACENAMIENTO DE PRODUCTO</h6>
                    <div class="row pt-1 pr-4 pl-4 pb-2 h-100">
                        @foreach($itemsAlmacenamientoEcebol as $a)
                            <div class="col-md-6 col-6 h-50 p-0" style="border: 1px solid #ddd;">
                                <div id="ecebolContenedorGraficoAlmacenamiento_7_7_{{ $a->idpar_item }}" class="h-100 w-100 m-0 p-0"></div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        <!-- Ventas por Día - 50% del ancho -->
        <div class="col-md-6 h-100 mb-2 p-1">
            <div class="card h-100">
                <div class="card-body p-2 h-100">
                    <h6 class="mb-0 titulo">VENTAS POR DÍA DEL MES</h6>
                    <div class="row h-100 pt-1 pr-4 pl-4 pb-2">
                        <div class="col-md-12 border">
                            <div id="ecebolContenedorGrafico_8_9" class="h-100"></div>
                        </div> 
                    </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 src="{{asset('assets/js/pages/graficos.js')}}"></script> --}}
<script src="{{ asset('assets/js/apexcharts.min.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),
    };
    setInterval(function() {
        recargarEcebol();
    }, 60000); 
</script>
<script src="{{ asset('assets/js/emp/ece.js') }}"></script>

@endsection