@extends('layouts.app')
@section('title','Inicio')
@section('content')
<style>
.main-content{
    height: 100vh;
    width: 100%;
}
.h-80{
    height: 65vh;
}
.h-10{
    height: 10vh;
}
.h-20{
    height: 20vh;
}
.h-30{
    height: 25vh;}
.h-70{
    height: 60vh;
}
.h-40{
    height: 35vh;
}
h6{
    font-size: 1rem;
    font-weight: bold;
    color: #333;
    text-align: center;
}
.card {
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    /* width: 100%; */
    margin: 5px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-bottom: 0.5rem;
    padding-top: 0;
}
/* Responsive para pantallas pequeñas */
@media (max-width: 768px) {
    .container-fluid {
        padding: 5px;
    }
    .card-body {
        padding: 0.5rem !important;
    }
    h6{
        font-size: 0.9rem;
        font-weight: bold;}

}
@media (max-width: 576px) {
    .h-sm-100 {
        height: 100%;
    }
    .main-content{
        background-color: #fff;
        font-size: 12px;
    }
}

@media (min-width: 992px) {
    .h-42 {
        height: 42vh;
    }
}

.titulo{
    font-size: 1rem;
    font-weight: bold;
    color: #333;
    text-align: center;
}
.card-body{
    height: 100%;
    padding: 0px 20px 5px 20px;
}
.card-header{
    padding-top: 5px;
}
.pl-1{
    padding-left: 0.25rem !important;
}
.pr-1{
    padding-right: 0.25rem !important;
}
.pl-2{
    padding-left: 0.5rem !important;
}
.pr-2{
    padding-right: 0.5rem !important;
}
.pr-3{
    padding-right: 1rem !important;
}
.pl-3{
    padding-left: 1rem !important;
}
.pt-0{
    padding-top: 0 !important;
}
.pl-0{
    padding-left: 0 !important;
}
.pr-0{
    padding-right: 0 !important;
}
.pr-4{
    padding-right: 1.25rem !important;
}
.pl-4{
    padding-left: 1.25rem !important;
}
.pl-5{
    padding-left: 2.5rem
}
.pr-5{
    padding-right: 2.5rem
}
.pb-5{
    padding-bottom: 2.5rem
}
.fecha-actualizacion{
    font-weight: bold;
    font-size: 0.95rem;
    color: #000;
}
</style>

<div class="row align-items-center">
    <div class="col-sm-6">
        <div class="breadcrumbs-area clearfix">
            <h4 class="page-title pull-left">REPORTE DIARIO CARTONBOL <span id="fecha-actualizacion-cartonbol" class="fecha-actualizacion"></span></h4>
        </div>
    </div>
    <div class="col-sm-6 ">
        <div class="row m-1">
            <h4 for="mes" class="col-md-2 mt-2">Mes:</h4>
            <div class="col-md-4">
                <select name="mesCartonbol" id="mesCartonbol" class="form-control form-control-lg" required onchange="cargarDiasCartonbol(this.value);
                generarGraficoInventarioMateriaPrimaCartonbol(this.value,1,1);
                generarGraficoConsumoServiciosCartonbol(this.value,1,5);
                generarGraficoHorasConsumidasCartonbol(this.value,1,5);
                generarGraficoProduccionCartonbol(this.value,1,5,'cartonbolContenedorGraficoProduccionTotal','16,17,18,19');
                generarGraficoProduccionAcumuladaMesCartonbol(this.value,1,5,1,4,'#5CB338');
                generarGraficoProduccionTotalCartonbol(this.value,1,7,6,9,'cartonbolContenedorGraficoLaminas','Laminas de Carton');
                generarGraficoProduccionTotalCartonbol(this.value,1,7,6,8,'cartonbolContenedorGraficoCajas','Cajas industriales');
                generarGraficoVentasMesCartonbol(this.value,3,11,'Areas Apiladas');
                generarGraficoInventarioProductoCartonbol(this.value,1,1,'INVENTARIO DE MATERIA PRIMA');
                ">
                    <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="diaCartonbol" id="diaCartonbol" class="form-control form-control-lg" required 
                onchange="generarInventarioMateriaPrimaTotalDiaCartonbol(this.value,1,1,2);
                generarConsumoServiciosTotalDiaCartonbol(this.value,1,5);
                generarHorasProducidasTotalDiaCartonbol(this.value,1,5);
                generarGraficoCapacidadDiaCartonbol(this.value,3,9);
                "></select>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-3">
        <div class="row h-70 pl-2">
            <div class="card">
                <div class="card-header">
                    <h4 class="titulo">INVENTARIO DE MATERIA PRIMA</h4>
                </div>
                <div class="card-body">
                    <div class="row h-100">
                        <div class="col-8 ">
                            <div class="row h-100">
                                {{-- INVENTARIO --}}
                                @foreach($itemsInventarioCartonbol as $i)
                                    <div class=" col-12 p-0 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 id="cartonbolTotalInventario_1_1_{{ $i->idpar_item }}"></div>
                                            <small>{{ $i->nombre }} ({{ $i->unidad_medida }})</small>
                                        </div>
                                        <div id="cartonbolContenedorGraficoTotalInventario_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 ">
                            <div class="row h-100 ">
                                @foreach($itemsInventarioCartonbol as $i)
                                <div class="col-12 p-0 d-flex flex-column align-items-center justify-content-center  border" style="">
                                    <div class="text-center mb-1 mt-2">
                                        <div id="cartonbolTotalUso_1_2_{{ $i->idpar_item }}"></div>
                                        <small >{{ $i->nombre }} ({{ $i->unidad_medida }})</small>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row h-30 pl-2">
            <div class="card h-100">
                <div class="card-header">
                    <h4 class="titulo">CONSUMO DE ENERGIA ELECTRICA Y HORAS TRABAJADAS</h4>
                </div>
                <div class="card-body h-100">
                    <div class="row h-100">
                        <div class="col-md-6 col-sm-12 h-100">
                            <div class="row h-100">
                                @foreach($itemEnergiaCartonbol as $s)
                                    <div class="col-12  border" style="position: relative;">
                                        <div class="text-center mt-2" style="position: absolute; z-index: 2; width: 100%; top: 0; left: 0;">
                                            <div id="cartonbolTotalConsumo_1_5_{{ $s->idpar_item }}"></div>
                                            <small>{{ $s->nombre }} ({{ $s->unidad_medida }})</small>
                                        </div>
                                        <div id="cartonbolContenedorGraficoConsumo_1_5_{{ $s->idpar_item }}" class="w-100 h-100" style="position: absolute; top: 0; left: 0; z-index: 1;"></div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-12 h-100">
                            <div class="row h-100">
                                @foreach($itemHorasProducidasCartonbol as $hp)
                                    <div class="col-12  border" style="position: relative;">
                                        <div class="text-center mt-2" style="position: absolute; z-index: 2; width: 100%; top: 0; left: 0;">
                                            <div id="cartonbolTotalHorasProducidas_1_5_{{ $hp->idpar_item }}"></div>
                                            <small>{{ $hp->nombre }}</small>
                                        </div>
                                        <div id="cartonbolContenedorGraficoHorasProducidas_1_5_{{ $hp->idpar_item }}" class="w-100 h-100" style="position: absolute; top: 0; left: 0; z-index: 1;"></div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="row h-30 pr-2 pl-2">
            <div class="card">
                <div class="card-header">
                    <h4 class="titulo">CAPACIDAD DE PRODUCCION</h4>
                </div>
                <div class="card-body">
                    <div class="row h-100">
                        @foreach($itemCapacidadCartonbol as $c)
                        <div class=" col-6 p-0 border" style="position: relative;">
                            <div class="text-center"><small>USO DIA {{ $c->nombre }}</small></div>
                            <div id="cartonbolContenedorGraficoCapacidadTotal_1_{{ $c->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>
        </div>
        <div class="row h-70 pr-2 pl-2">
            <div class="card">
                <div class="card-header">
                    <h4 class="titulo">PRODUCCIÓN (TN)</h4>
                </div>
                <div class="card-body">
                    <div class="row h-10 ">
                        @foreach($itemProduccionCartonbol as $p)
                            <div class="col-md-3 p-0 h-100 border" style="position: relative;">
                                
                                <div class="text-center ml-2 mb-1 mt-2" style="position: absolute; z-index: 2; align-items: center; top: 20px; left: 0; width: 100%;">
                                    <div id="cartonbolTotalProduccionAcumulada_1_5_{{ $p->idpar_item }}"></div>
                                    <div id="cartonbolTotalProgramacionAcumulada_1_5_{{ $p->idpar_item }}"></div>
                                    <div id="cartonbolTotalPorcentajeAcumulado_1_5_{{ $p->idpar_item }}"></div>
                                </div>
                                <div id="cartonbolContenedorGraficoProduccionAcumulada_1_5_{{ $p->idpar_item }}" class="h-100"></div>
                            </div>
                        @endforeach
                    </div>
                    <div class="row h-20">
                        <div class="col-md-12 border">
                            <div id="cartonbolContenedorGraficoProduccionTotal" class="m-0 p-0 h-100 w-100"></div>
                        </div>
                    </div>
                    <div class="row h-30">
                        <div class="col-md-6 col-sm-12 h-100 border" style="position: relative;">
                            <div id="cartonbolContenedorGraficoLaminas" 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="cartonbolContenedorGraficoCajas" class="w-100 h-100" style="position: absolute; top: 0; left: 0; z-index: 1;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="row h-50 pr-2">
            <div class="card">
                <div class="card-header">
                    <h4 class="titulo">VENTAS</h4>
                </div>
                <div class="card-body">
                    <div class="row h-100">
                        <div class="col-md-12 p-0 border" style="position: relative;">
                            <div id="cartonbolContenedorGraficoVentas_3_11" class="m-0 p-0 h-100 w-100" style="position: absolute; top: 0; left: 0; z-index: 1;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row h-50 pr-2">
            <div class="card">
                <div class="card-header">
                    <h4 class="titulo">INVENTARIO DE MATERIA PRIMA</h4>
                </div>
                <div class="card-body">
                    <div class="row h-100">
                        <div class="col-md-12 p-0 border" style="position: relative;">
                            <div class="text-center"><small></small></div>
                            <div id="cartonbolContenedorGraficoInventarioProducto_1_1" class="m-0 p-0 h-100 w-100" style="position: absolute; top: 0; left: 0; z-index: 1;"></div>
                        </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>
    window.csrfToken = "{{ csrf_token() }}";
    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),
    };
    setInterval(function() {
        cargarGraficosCartonbol();
    }, 60000); 
</script>
<script src="{{ asset('assets/js/emp/car.js') }}"></script>

@endsection