@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 ENVIBOL <span id="fecha-actualizacion-envibol" 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="mesEnvibol" id="mesEnvibol" class="form-control form-control-lg" required onchange="cargarDiasEnvibol(this.value);
                generarGraficoInventarioMateriaPrimaEnvibol(this.value,1,1);
                generarGraficoConsumoServiciosEnvibol(this.value,5,6);
                generarGraficoHorasConsumidasEnvibol(this.value,5,6);
                generarGraficoCapacidadUtilizadaEnvibol(this.value);
                generarGraficoProduccionEnvibol(this.value,1,18,19);generarGraficoProduccionEnvibol(this.value,2,20,21);
                generarGraficoReprocesoMesEnvibol(this.value);
                generarGraficoProduccionTotalEnvibol(this.value);
                generarGraficoVentasMesEnvibol(this.value);
                generarGraficoInventarioProductoEnvibol(this.value);
                generarGraficoProduccionAcumuladaMesEnvibol(this.value);
                generarInventarioMateriaPrimaEnvibol($('#diaEnvibol').val(),1,1,3);
                generarConsumoServiciosTotalDiaEnvibol($('#diaEnvibol').val(),5,6);
                generarHorasProducidasTotalDiaEnvibol($('#diaEnvibol').val(),5,6);
                generarGraficoCapacidadUtilizadaDiaEnvibol($('#diaEnvibol').val());
                generarDatosProduccionDiaEnvibol($('#diaEnvibol').val(),1,18,19);
                generarDatosProduccionDiaEnvibol($('#diaEnvibol').val(),2,20,21);
                generarInventarioProductoTotalDiaEnvibol($('#diaEnvibol').val(),3,13);
                produccionAcumuladaDiaEnvibol($('#diaEnvibol').val());
                ">
                    <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="diaEnvibol" id="diaEnvibol" class="form-control form-control-lg" required 
                onchange="generarInventarioMateriaPrimaEnvibol(this.value,1,1,3);
                generarConsumoServiciosTotalDiaEnvibol(this.value,5,6);
                generarHorasProducidasTotalDiaEnvibol(this.value,5,6);
                generarGraficoCapacidadUtilizadaDiaEnvibol(this.value);
                generarDatosProduccionDiaEnvibol(this.value,1,18,19);
                generarDatosProduccionDiaEnvibol(this.value,2,20,21);
                generarInventarioProductoTotalDiaEnvibol(this.value,3,13);
                produccionAcumuladaDiaEnvibol(this.value);"></select>
            </div>
        </div>
    </div>
</div>
<div class="row mb-0 h-100 pl-2 pr-2 pt-0 pb-0" >
    <div class="col-md-3 col-sm-12 mb-2 ">
        <div class="row h-sm-100" style="height: 50vh;">
            <div class="col-12 h-100 pl-1 pr-1">
                <div class="card h-100 p-1 mb-0">
                    <div class="card-body pt-1 pr-4 pl-4 pb-3">
                        <h6 class="titulo">INVENTARIO DE MATERIA PRIMA</h6>
                        <div class="row h-100 pr-4 pl-4 pb-3">
                            <div class="col-8 p-0">
                                <div class="row h-100 w-100 pl-2">
                                    @foreach($itemsInventarioEnvibol as $i)
                                        <div class=" col-12 p-0 border w-100" style="position: relative;">
                                            <div class="text-center mb-1 mt-2" style="position: absolute; z-index: 2; align-items: center; width: 100%; top: 0; left: 0;">
                                                <div id="envibolTotalInventario_1_1_{{ $i->idpar_item }}"></div>
                                                <small>{{ $i->nombre }} ({{ $i->unidad_medida }})</small>
                                            </div>
                                            <div id="envibolContenedorGraficoTotalInventario_1_1_{{ $i->idpar_item }}" class="m-0 p-0 h-100 w-100" style="position: absolute; top: 0; left: 0; z-index: 1;"></div>
                                        </div>
                                    @endforeach
                                </div> 
                            </div>
                            <div class="col-4 p-0">
                                <div class="row h-100 pr-2">
                                    @foreach($itemsInventarioEnvibol as $i)
                                    <div class="col-12 p-0 d-flex flex-column align-items-center justify-content-center  border w-100" style="">
                                        <div class="text-center mb-1 mt-2">
                                            <div id="envibolTotalUso_1_3_{{ $i->idpar_item }}"></div>
                                            <small >{{ $i->nombre }} ({{ $i->unidad_medida }})</small>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-2 h-sm-100" style="height: 34vh;">
            <div class="col-12 h-100 pl-1 pr-1">
                <div class="card h-100">
                    <div class="card-body pt-1 pr-1 pl-1 pb-2 h-100">
                        <div class="row h-100">
                            <div class="col-md-6 col-sm-12 h-100">
                                <h6 class="titulo">CONSUMO SERVICIOS</h6>
                                <div class="row h-100 pl-4">
                                    @foreach($itemsServiciosEnvibol as $s)
                                        <div class="col-12 p-0 border" style="position: relative;">
                                            <div class="text-center mt-2" style="position: absolute; z-index: 2; width: 100%; top: 0; left: 0;">
                                                <div id="envibolTotalConsumo_5_6_{{ $s->idpar_item }}"></div>
                                                <small>{{ $s->nombre }} ({{ $s->unidad_medida }})</small>
                                            </div>
                                            <div id="envibolContenedorGraficoConsumo_5_6_{{ $s->idpar_item }}" class="w-100 h-100" style="position: absolute; z-index: 1;"></div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-12 h-100">
                                <h6 class="titulo">HORAS PRODUCIDAS</h6>
                                <div style="position: relative;" class="border h-100">
                                    <div class="text-center mb-1 mt-2" style="position: absolute; z-index: 2; align-items: center; width: 100%; top: 0; left: 0;">
                                        <div id="envibolTotalHorasProducidas_5_6_{{ $itemHorasProducidasEnvibol[0]->idpar_item }}"></div>
                                        <small>{{ $itemHorasProducidasEnvibol[0]->nombre }} ()</small>
                                    </div>
                                    <div id="envibolContenedorGraficoHorasProducidas_5_6_{{ $itemHorasProducidasEnvibol[0]->idpar_item }}" class="w-100 h-100" style="position: absolute; z-index: 1;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-sm-12 mb-2 ">
        <div class="row h-sm-100" style="height: 42vh;">
            <div class="col-12 h-100 pl-1 pr-1">
                <div class="card h-100">
                    <div class="card-body pt-1 h-100">
                        <h6 class="titulo">PRODUCCIÓN POR LÍNEAS</h6>
                        <div class="row h-100">
                            <div class="col-md-6 col-sm-12 h-100">
                                <div class="row h-50">
                                    <div class="col-md-6 p-0 h-100 border">
                                        <div class="text-left ml-4 mb-4 mt-4 pl-4" style="position: absolute; z-index: 2; align-items: center; width: 100%; top: 1rem; left: 2rem;">
                                            <div id="envibolTotalProduccionAcumulada"></div>
                                            <div id="envibolTotalProgramacionAcumulada"></div>
                                            <div id="envibolTotalPorcentajeAcumulado"></div>
                                        </div>
                                        <div id="envibolContenedorGraficoProduccionAcumulada" class="w-100 h-100"></div>
                                    </div>
                                    <div class="col-md-6 p-0 h-100 border">
                                        <div id="envibolContenedorGraficoCapacidadUtilizada" class="w-100 h-100"></div>
                                    </div>
                                </div>
                                <div class="row h-50">
                                    <div class="col-12 p-0 h-100 border">
                                        <div id="envibolContenedorGraficoCapacidadUtilizadaDia" class="w-100 h-100"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-12 h-100">
                                <div class="row h-50 h-sm-100">
                                    <div class="col-12 h-100 border p-0" style="position: relative;">
                                        <div class="text-center mb-1 mt-2" style="position: absolute; z-index: 2; align-items: center; width: 100%; top: 0; left: 0;">
                                            <div class="row w-100">
                                                <div class="col-md-8">
                                                    <div id="envibolTotalProduccion_1"></div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div id="envibolTotalPorcentaje_1"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="envibolContenedorGraficoLinea_1" class="w-100 h-100" style="position: absolute; top: 0; left: 0; z-index: 1;"></div>
                                    </div>
                                </div>
                                <div class="row h-50 h-sm-100">
                                    <div class="col-12 h-100 border" style="position: relative;">
                                        <div class="text-center mb-1 mt-2" style="position: absolute; z-index: 2; align-items: center; width: 100%; top: 0; left: 0;">
                                            <div class="row w-100">
                                                <div class="col-md-8 ">
                                                    <div id="envibolTotalProduccion_2"></div>
                                                </div>
                                                <div class="col-md-4 ">
                                                    <div id="envibolTotalPorcentaje_2"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="envibolContenedorGraficoLinea_2" class="w-100 h-100" style="position: absolute; top: 0; left: 0; z-index: 1;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-2 h-sm-100" style="height: 42vh;">
            <div class="col-12 h-100 pl-1 pr-1">
                <div class="card h-100">
                    <div class="card-body h-100 pt-2 pb-2">
                        <div class="row h-100">
                            <div class="col-md-6 col-sm-12 h-100 border" style="position: relative;">
                                <div id="envibolContenedorGraficoReproceso" class="w-100 h-100" style="position: absolute; top: 0; left: 0; z-index: 1;"></div>
                            </div>
                            <div class="col-md-6 col-sm-12 h-100 border" style="position: relative;">
                                <div id="envibolContenedorGraficoProduccionTotal" class="w-100 h-100" style="position: absolute; top: 0; left: 0; z-index: 1;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-12">
        <div class="row h-sm-100" style="height:42vh;">
            <div class="col-12 h-100 pl-1 pr-1">
                <div class="card h-100 border">
                    <div class="card-body h-100 ">
                        <h6 class="titulo">VENTAS</h6>
                        <div id="envibolContenedorGraficoVentas" class="w-100 h-100" style="position: absolute; top: 0; left: 0; z-index: 1;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-2 h-sm-100" style="height:42vh;">
            <div class="col-12 h-100 pl-1 pr-1">
                <div class="card h-100 p-1">
                    <div class="card-body h-100 ">
                        <h6 class="titulo">INVENTARIO DE PRODUCTO</h6>
                        <div class="row h-100">
                            <div class="col-md-8 col-sm-12 h-100" style="border: 1px solid #ddd;">
                                <div id="envibolContenedorGraficoInventarioProducto" class="w-100 h-100" style="position: relative; top: 0; left: 0; z-index: 1;"></div>
                            </div>
                            <div class="col-md-4 col-sm-12 h-100 border" style="position: relative;">
                                <div class="row h-100">
                                    @foreach($itemsInventarioProductoEnvibol as $i)
                                        <div class="col-12 d-flex flex-column align-items-center justify-content-center  border" style="">
                                            <div class="text-center mb-1 mt-2">
                                                <div id="envibolTotalInventarioProducto_3_13_{{ $i->idpar_item }}"></div>
                                                <small >{{ $i->nombre }} ({{ $i->unidad_medida }})</small>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </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>
<script>
    window.csrfToken = "{{ csrf_token() }}";
    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),
    };
    setInterval(function() {
        recargarEnvibol();
    }, 60000); 
</script>
<script src="{{ asset('assets/js/emp/env.js') }}"></script>

@endsection