@extends('layouts.backend')

@section('css_after')
    <link rel="stylesheet" href="{{asset('css\vendor\buttons.bootstrap5.css') }}">
    <style>
        body[data-leftbar-compact-mode="condensed"]:not(.authentication-bg){
            min-height: 0 !important;
        }
        .boton-blue{
            background-color: #2874A6 !important;
            border-color: #2874A6 !important;
            box-shadow: none !important;
        }
        .boton-blue:hover{
            background-color: #0B5F96 !important;
            border-color: #0B5F96 !important;
        }
        .boton2{
            background-color: #00a65a !important;
        }
        .boton2:hover{
            background-color: #008d4c !important;
        }
        .max-width{
            max-width: 200px;
        }
        .w-90{
            width: 90% !important;
        } 
        .col.col-md-2{
            padding: 0px 35px 5px 0px;
        }
        .tooltiptext{
            display: none;
            position: absolute;
            width: 140px;
            margin-top: 12px;
            transform: translate(45px, 5px);
            color: white;
            background-color: black;
            border-radius: 20px;
            padding: 10px;
        }
        .fa-sort-up{
            display: none;
            position: absolute;
            margin-top: 12px;
            transform: translate(-23px, 0px);
            color: black;
        }
    </style>
@endsection
@section('content')
    <!-- Hero -->
    @php
        $cliente = config('app.CLIENTE');
        $usuario = auth()->user();
        //Estas listas la intención es que tengan los valores que se estimen necesarios, ojalá que puedan ser definidas en el controller

        $titulo = __('messages.cubo-title');

        if($codigo == 'OSA'){
            $titulo = __('messages.cubo/OSA-titulo');
            //$salida = ['osa' => 'OSA', '' => 'Stock Sala', '' => 'Stock CD', '' => 'Transito', '' =>  'Ventas 7', '' =>  'Ventas 14', '' =>  'Ventas 30', '' => 'Venta Perdida ($)', '' => 'Venta Perdida (U)'];
            //$salida = [];
            /*$salidaStock = ['dias_inv' => "DOH", 'osa' => 'OSA', 'stock'=>__('messages.stock-unidades'), '51' => 'Stock CD', '53' => __('messages.transito'), 
                            '55' => __('messages.ventas_7'), '56' => __('messages.ventas_14'), '57' => __('messages.ventas_30'), 
                            ];*/

            $salidaStock = ['dias_inv' => "DOH", '900' => 'Instock', '901' => 'OSA', 'stock'=>__('messages.stock-unidades'), '51' => 'Stock CD', '53' => __('messages.transito'), 
                            '55' => __('messages.ventas_7'), '56' => __('messages.ventas_14'), '57' => __('messages.ventas_30'), '83' => 'Venta Perdida ($)', '84' => 'Venta Perdida (U)',
                            ]; 
            if($cliente == 'mdlzchile'){
                $salidaStock = ['dias_inv' => "DOH", '901' => 'OSA', 'stock'=>__('messages.stock-unidades'), '51' => 'Stock CD', '53' => __('messages.transito'), 
                            '55' => __('messages.ventas_7'), '56' => __('messages.ventas_14'), '57' => __('messages.ventas_30'), '83' => 'Venta Perdida ($)', '84' => 'Venta Perdida (U)',
                            '67' => __('messages.entregado'), '68' => __('messages.ordenado'), ' fillrate-inv' => __('messages.fillrate'), '69' => __('messages.forecast'), 
                            ]; 
            }

            $periodo = json_encode(['dia' => __('messages.dias'), 'sem' => __('messages.semanas'), 'mes' => __('messages.meses')]);
            $filtrosInv = ['cat' => __('messages.stock-catalogado'), 'pareto' => __('messages.selector-generico-texto-pareto').' 80/20'];
        }else if($codigo == 'ecomCubo'){
            $titulo = __('messages.cubo-ecom-titulo');

            $periodo = json_encode(['dia' => __('messages.dias'), 'sem' => __('messages.semanas'), 'mes' => __('messages.meses'), 'ytd' => 'YTD']);
            $salida = ['451' => __('messages.sell-out-precio'), '452' => __('messages.sell-out-unidades'), '453' =>__('messages.costo-ventas')];

            if($cliente == 'clorox'){
                $salida = ['451' => __('messages.ventas_sin_iva'), '457' => __('messages.ventas_con_iva'), '452' => __('messages.unidades'), '453' => __('messages.costo'), '455' => __('messages.sc'), '456' => __('messages.ac')];
            }
        }else if($codigo == 'foundrateCubo'){
            $titulo = __('messages.cubo-foundrate-titulo');

            $periodo = json_encode(['dia' => __('messages.dias'), 'sem' => __('messages.semanas'), 'mes' => __('messages.meses'), 'ytd' => 'YTD']);
            $salida = ['foundrate_u' => __('messages.foundrate-calculado').' (U)', '501' => __('messages.solicitado-venta'), '502' =>__('messages.solicitado-unidades'), '503' => __('messages.encontrado-venta'), '504' => __('messages.encontrado-unidades')];
        }else if($codigo == 'tradCubo'){
            $titulo = __('messages.cubo-trad-titulo');

            $periodo = json_encode(['dia' => __('messages.dias'), 'sem' => __('messages.semanas'), 'mes' => __('messages.meses'), 'ytd' => 'YTD']);
            $salida = ['351' => __('messages.ventas_sin_iva'), '357' => __('messages.ventas_con_iva'), '352' => __('messages.unidades'), '353' => __('messages.costo'), '355' => __('messages.sc'), '356' => __('messages.ac')];
            $salidaCobertura = ['cobertura-clorox' => __('messages.cobertura')];
            $salidaStock = ['stock-trad'=>__('messages.stock-unidades'), 
                            //'51' => 'Stock CD', '53' => __('messages.transito'), 
                            //'55' => __('messages.ventas_7'), '56' => __('messages.ventas_14'), 
                            //'57' => __('messages.ventas_30'), '83' => 'Venta Perdida ($)', '84' => 'Venta Perdida (U)',
                            ]; 
        }else if($codigo == 'cuboSI'){
            $titulo = __('messages.cuboIn/cuboSI-titulo');

            $periodo = json_encode(['dia' => __('messages.dias'), 'sem' => __('messages.semanas'), 'mes' => __('messages.meses'), 'ytd' => 'YTD']);
            $salida=['251' => 'Ventas ($)', '252' => 'Unidades (U)'];
        }else{
            $periodo = json_encode(['dia' => __('messages.dias'), 'sem' => __('messages.semanas'), 'mes' => __('messages.meses'), 'ytd' => 'YTD']);
            $salidaStock = ['50' =>__('messages.stock-unidades'), 'val' => __('messages.stock-valorado')];
            $salida=['2' => __('messages.sell-out-precio'), '1' => __('messages.sell-out-unidades'), '3' =>__('messages.costo-ventas')];
            $filtrosInv = ['cat' => __('messages.stock-catalogado'), 'pareto' => __('messages.selector-generico-texto-pareto').' 80/20'];

            if($cliente == 'siksa'){
                $salida = ['2' =>__ ('messages.sell-out-precio'), '1' => __('messages.sell-out-unidades'), '3' => __('messages.costo-ventas'), '10' => 'Kilos (Kg)'];
                $salidaStock = ['50' => __('messages.stock-unidades'), 'val' => __('messages.stock-valorado'), 'cat' => __('messages.stock-catalogado'), '555' => 'Peso Stock (Kg)'];
            }if($cliente == 'comarsa'){
                $salida = ['2' =>__ ('messages.sell-out-precio'), '1' => __('messages.sell-out-unidades'), '3' => __('messages.costo-ventas'), '10' => 'Cajas'];
            }else if($cliente == 'ducasse'){
                $salida=['30' => __('messages.sell-out-precio'), '1001' => __('messages.sell-out-unidades'), '301' => __('messages.costo-ventas')];
            }else if(in_array($cliente, ['maisa'])){
                $salida=['2' => 'Ventas c/IVA ($)', '1' => __('messages.sell-out-unidades'), '3' =>__('messages.costo-ventas'), '30' => 'Ventas s/IVA ($)'];
            }else if(in_array($cliente, ['clorox'])){
                $periodo = json_encode(['dia' => __('messages.dias'), 'sem' => __('messages.semanas'), 'mes' => __('messages.meses'), 'ytd' => 'YTD', 'ytdf' => 'YTD (Fiscal)']);
                $salida=['2' => __('messages.ventas_sin_iva'), '33' => __('messages.ventas_con_iva'), '1' => __('messages.unidades'), '3' => __('messages.costo'), '10' => __('messages.sc'), '15' => __('messages.ac')];
                $salidaStock = ['50' =>__('messages.stock-unidades'), 'val' => __('messages.stock-valorado'), 'doh_total_30' => 'DOH (Sala+CD+Tránsito)', 'dias_inv' => 'DOH Sala', '53' => __('messages.transito'), 'psa_porc' => 'PSA', '55' => __('messages.ventas_7'), '56' => __('messages.ventas_14'), '57' => __('messages.ventas_30')];
            }else if($cliente == 'legrand'){
                $salida=['2' => __('messages.sell-out-precio'), '1' => __('messages.sell-out-unidades'), '3' =>__('messages.costo-ventas'), 'margen-so' => 'Margen (%)'];
            }else if(in_array($cliente, ['gama'])){
                $salida = ['2' => __('messages.ventas_sin_iva'), '33' => __('messages.ventas_con_iva'), '1' => __('messages.unidades'), '3' => __('messages.costo')];
                $periodo = json_encode(['dia' => __('messages.dias'), 'sem' => __('messages.semanas'), 'semx' => 'Semanas SRX', 'mes' => __('messages.meses'), 'mesx' => 'Meses SRX', 'ytd' => 'YTD']);
            }else if(in_array($cliente, ['canontex'])){
                $salida=['2' => __('messages.sell-out-precio'), '1' => __('messages.sell-out-unidades'), '3' =>__('messages.costo-ventas'), '15' => 'Costo Canontex'];
            }else if($cliente == 'genomma'){
                $salida = ['30' => 'Ventas CUF ($)' ,'2' => __('messages.ventas'), '1' => __('messages.unidades'), '3' => __('messages.costo')];
            }else if($cliente == 'cintaazul'){
                $salida = ['2' => __('messages.ventas'), '10' => __('messages.unidades'), '15' => __('messages.costo'), '8' => __('messages.cajas')];
            }else if($cliente == 'cintaazul'){
                $salida = ['2' => __('messages.ventas')." Sell out", '1' => __('messages.unidades'), '3' => __('messages.costo')." Sell In", '15' => 'Costo PvP','10' => 'Unidades Convertidas'];
            }

            if($cliente == 'marvest')
                $salida['800'] = 'Margen';
            if($cliente == "unibag")
                $salida['6000'] = 'Metas ($)';
        }
        
        $favoritosFinal=['' => __('messages.cubo-select-favorite')];
        $formato = json_encode(['excel' => 'Excel', 'csv' => 'CSV']);
        if($cliente == 'siksa'){
            $formato = json_encode(['csv' => 'CSV']);
        }
        foreach($favoritos as $valor){
            $favoritosFinal += [$valor->id => $valor->nombre];
        }
        $favoritosFinal = json_encode($favoritosFinal);
        $favoritosDatos=[];
        foreach($favoritos as $valor){
            $favoritosDatos += [$valor->id => $valor->datos];
        }
        $favoritosDatos=json_encode($favoritosDatos);

        $periodocomp = json_encode(['sem' => __('messages.semanas'), 'mes' => __('messages.meses')]);
        $tipo_periodo = json_encode(['evo' => 'Evolutivo', 'comp' => 'Comparativo']);
    @endphp
    <div class="bg-body-light" style="margin-bottom: 40px">
        <div class="content content-full">
            <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center">
                <h3 class="flex-sm-fill font-size-h2 font-w400 mt-2 mb-0 mb-sm-2 text-center" style="font-weight: 400!important;">{{$titulo}}</h3>
                <nav class="flex-sm-00-auto ml-sm-3" aria-label="breadcrumb">
                    
                </nav>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col col-md-2">
            <div class="bg-white w-100 h-100 shadow-sm d-flex flex-column" style="margin-right: 5px; border-radius: 0px 0px 15px 15px !important;">
                <div class="text-white text-center" style="background-color: #00a65a; padding: 5px 0px;">
                    <h4 class="fw-normal d-inline-block" style="padding-left: 10px;">{{__('messages.cubo-output-values')}}</h4>
                </div>
                <div id="salida" class="overflow-auto flex-fill" style="margin-top: 50px;">
                    @if(isset($salida) && count($salida) > 0)
                    <div id="sellout">
                        @foreach ($salida as $key => $item)
                            <div class="form-check" style="margin-bottom: 15px; margin-left: 30px;">
                                <input class="form-check-input shadow-sm" type="checkbox" value="{{$key}}" id="{{$key}}">
                                <label class="form-check-label" for="{{$key}}">{{$item}}</label>
                            </div>
                        @endforeach
                    </div>
                    @endif
                    @if(isset($salidaStock) && count($salidaStock) > 0)
                    <hr style="border-top: 1px solid #C0C0C0; margin: 5px 20px;">
                    <div id="stock">
                        @foreach ($salidaStock as $key => $item)
                        <div class="form-check" style="margin-bottom: 15px; margin-left: 30px;">
                            <input class="form-check-input shadow-sm" type="checkbox" value="{{$key}}" id="{{$key}}">
                            <label class="form-check-label" for="{{$key}}">{{$item}}</label>
                        </div>
                        @endforeach
                    </div>
                    @endif
                    @if(isset($salidaCobertura) && count($salidaCobertura) > 0)
                    <hr style="border-top: 1px solid #C0C0C0; margin: 5px 20px;">
                    <div id="cobertura">
                        @foreach ($salidaCobertura as $key => $item)
                        <div class="form-check" style="margin-bottom: 15px; margin-left: 30px;">
                            <input class="form-check-input shadow-sm" type="checkbox" value="{{$key}}" id="{{$key}}">
                            <label class="form-check-label" for="{{$key}}">{{$item}}</label>
                        </div>
                        @endforeach
                    </div>
                    @endif
                    @if(isset($filtrosInv) && count($filtrosInv) > 0)
                    <hr style="border-top: 1px solid #C0C0C0; margin: 5px 20px;">
                    <div style="width: 100%" class="d-flex flex-row-reverse">
                        <i class="fas fa-info-circle" style="margin-right: 20px" onmouseover="MessageIn(this)" onmouseout="MessageOut(this)"></i>
                        <i class="fas fa-sort-up"></i>
                        <span class="tooltiptext">Estas no son opciones de salidas, sino que filtros de catalogado/pareto</span>
                    </div>
                    <div id="filtrosInv">
                        @foreach ($filtrosInv as $key => $item)
                        <div class="form-check" style="margin-bottom: 15px; margin-left: 30px;">
                            <input class="form-check-input shadow-sm" type="checkbox" value="{{$key}}" id="{{$key}}">
                            <label class="form-check-label" for="{{$key}}">{{$item}}</label>
                        </div>
                        @endforeach
                    </div>
                    @endif
                </div>
            </div>
        </div>
        <div class="col col-md-2">
            <div class="bg-white w-100 h-100 shadow-sm d-flex flex-column" style="margin-right: 5px; border-radius: 0px 0px 15px 15px !important;">
                <div class="text-white text-center bg-secondary" style="padding: 5px 0px;">
                    <h4 class="fw-normal d-inline-block" style="margin-left: 5px">
                        {{__('messages.cubo-period-time')}}
                    </h4>
                </div>
                <div id="cubo" class="overflow-auto flex-fill d-flex flex-column align-items-center" style="margin-top: 25px;">
                    <x-selector-generico id="f_tipo_cubo2" idselect="f_tipo_cubo" 
                    :salida="$tipo_periodo"  class="selector-generico max-width w-90" style=" width: 100%!important; margin-top: 10px; " selected="evo">
                        <x-slot name="texto">
                            Tipo de Reporte
                        </x-slot>
                    </x-selector-generico>

                    <div id="bloque_evo" style="width:100% !important" class="col col-md-12 selector-generico  max-width w-90">
                        <x-selector-generico id="f_tmp_cubo2" idselect="f_tmp_cubo" 
                        :salida="$periodo"  class="selector-generico max-width w-90" style=" width: 100%!important; margin-top: 10px; " selected="mes">
                            <x-slot name="texto">
                                {{__('messages.selector-generico-texto-periodo')}}
                            </x-slot>
                        </x-selector-generico>
                        <x-selector-dias idpadre="cubo" style="display:none; width: 90% !important; max-width: 200px;" />
                        <!--SEMANA-->
                        <x-selector-semanas id="fltr_sem_cubo" idselect="f_sem_cubo_ini" :semanas="$semanas"  class="fltr_periodo_cubo" style="display: none; max-width: 200px; width: 90%!important;" style2="width: 100%">
                            <x-slot name="texto">
                                {{__('messages.selector-semanas-meses-texto-desde')}}
                            </x-slot>
                        </x-selector-semanas>
                        <x-selector-semanas id="fltr_sem_cubo2" idselect="f_sem_cubo_fin" :semanas="$semanas" class="fltr_periodo_cubo" style="display: none; max-width: 200px; width: 90%!important;" style2="width: 100%">
                            <x-slot name="texto">
                                {{__('messages.selector-semanas-meses-texto-hasta')}}
                            </x-slot>
                        </x-selector-semanas>

                        <x-selector-semanas id="fltr_semx_cubo" idselect="f_semx_cubo_ini" :semanas="$semanas"  class="fltr_periodo_cubo" style="display: none; max-width: 200px; width: 90%!important;" style2="width: 100%">
                            <x-slot name="texto">
                                {{__('messages.selector-semanas-meses-texto-desde')}}
                            </x-slot>
                        </x-selector-semanas>
                        <x-selector-semanas id="fltr_semx_cubo2" idselect="f_semx_cubo_fin" :semanas="$semanas" class="fltr_periodo_cubo" style="display: none; max-width: 200px; width: 90%!important;" style2="width: 100%">
                            <x-slot name="texto">
                                {{__('messages.selector-semanas-meses-texto-hasta')}}
                            </x-slot>
                        </x-selector-semanas>
                        <!--MES-->
                        <x-selector-meses id="fltr_mes_cubo" idselect="f_mes_cubo_ini" :meses="$meses" class="fltr_periodo_cubo" style=" max-width: 200px; width: 90%!important;" style2="width: 100%">
                            <x-slot name="texto">
                                {{__('messages.selector-semanas-meses-texto-desde')}}
                            </x-slot>
                        </x-selector-meses>
                        <x-selector-meses id="fltr_mes_cubo2" idselect="f_mes_cubo_fin" :meses="$meses" class="fltr_periodo_cubo" style=" max-width: 200px; width: 90%!important;" style2="width: 100%">
                            <x-slot name="texto">
                                {{__('messages.selector-semanas-meses-texto-hasta')}}
                            </x-slot>
                        </x-selector-meses>

                        <x-selector-meses id="fltr_mesx_cubo" idselect="f_mesx_cubo_ini" :meses="$meses" class="fltr_periodo_cubo" style="display: none; max-width: 200px; width: 90%!important;" style2="width: 100%">
                            <x-slot name="texto">
                                {{__('messages.selector-semanas-meses-texto-desde')}}
                            </x-slot>
                        </x-selector-meses>
                        <x-selector-meses id="fltr_mesx_cubo2" idselect="f_mesx_cubo_fin" :meses="$meses" class="fltr_periodo_cubo" style="display: none; max-width: 200px; width: 90%!important;" style2="width: 100%">
                            <x-slot name="texto">
                                {{__('messages.selector-semanas-meses-texto-hasta')}}
                            </x-slot>
                        </x-selector-meses>
                    </div>

                    <div id="bloque_comp" style="width:100% !important;display:none" class="col col-md-12 selector-generico  max-width w-90">
                        <x-selector-generico id="f_tmpcomp_cubo2" idselect="f_tmpcomp_cubo"
                        :salida="$periodocomp"  class="selector-generico max-width w-90" style=" width: 100%!important;" selected="mes">
                            <x-slot name="texto">
                                {{__('messages.selector-generico-texto-periodo')}}
                            </x-slot>
                        </x-selector-generico>
                        <div style="margin-top:10px;"></div>
                        @if($meses_jstree)
                            <div id="f_mescomp_cubo" class="fltr_periodocomp_cubo">
                                <x-jstree id="mescomp" :datos="$meses_jstree" nivel="1"></x-jstree>
                            </div>
                        @endif
                        @if(isset($semanas_jstree))
                            <div id="f_semcomp_cubo" class="fltr_periodocomp_cubo" style="display:none;">
                                <x-jstree id="semcomp" :datos="$semanas_jstree" nivel="1" class="d-none" style="display:none"></x-jstree>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        <div class="col col-md-2 h-100">
            <div class="bg-white w-100 h-100 shadow-sm" style="margin-right: 5px; border-radius: 0px 0px 15px 15px !important;">
                <div class="bg-info text-white text-center"  style="padding: 5px 0px;">
                    <h4 class="fw-normal d-inline-block" style="margin-left: 5px">
                        {{__('messages.cubo-product-attributes')}}
                    </h4>
                </div>
                <div id="productos" class="overflow-auto" style="padding-top: 50px; height: 435px; padding-left: 30px;">
                    @foreach ($variables[__('messages.variable-producto')] as $codigo => $nombre_cliente)
                        <div id="parent_{{$nombre_cliente}}">
                            <div class="d-flex align-items-center">
                                <i id="{{$nombre_cliente}}" class="fas fa-caret-right d-inline-flex" style="padding-right: 5px;"
                                onclick="mostrar('{{$nombre_cliente}}', 'productos')"></i>
                                <div class="form-check d-inline-flex">
                                    <input class="form-check-input shadow-sm input" parent="parent_{{$nombre_cliente}}" type="checkbox" value="{{$codigo}}" id="{{$codigo}}">
                                    <label class="form-check-label label" for="{{$codigo}}" style="padding-left: 5px">{{mb_strtoupper($nombre_cliente)}}</label>
                                </div>
                            </div>
                            <div class="d-none {{$codigo}}">
                                <input class="form-control" type="text" required="" placeholder="{{__('messages.busqueda')}}" name="busqueda">
                                @if (array_key_exists($codigo, $data))
                                    @foreach ($data[$codigo] as $item)
                                        <div class="form-check" style="margin-left: 25px;">
                                            @if (str_contains($item, ' - '))
                                                @if ($codigo == '1-18')
                                                    <input class="form-check-input shadow-sm" type="checkbox" value="{{explode(' - ',$item)[1]}}" id="{{$codigo}}-{{$item}}">
                                                @else
                                                    <input class="form-check-input shadow-sm" type="checkbox" value="{{explode(' - ',$item)[0]}}" id="{{$codigo}}-{{$item}}">
                                                @endif
                                            @else
                                                <input class="form-check-input shadow-sm" type="checkbox" value="{{$item}}" id="{{$codigo}}-{{$item}}">
                                            @endif
                                            <label class="form-check-label" for="{{$codigo}}-{{$item}}">{{$item}}</label>
                                        </div>
                                    @endforeach
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
        <div class="col col-md-2">
            <div class="w-100 h-100" style="margin-right: 5px;">
                <div class="shadow-sm bg-white h-100" style="border-radius: 0px 0px 15px 15px !important;">
                    <div class="bg-info text-white text-center" style="padding: 5px 0px;">
                        <h4 class="fw-normal d-inline-block" style="margin-left: 5px">
                            {{__('messages.cubo-local-attributes')}}
                        </h4>
                    </div>
                    <div id="locales" class="overflow-auto" style="padding-top: 50px; padding-left: 30px; height: 435px;">
                        @foreach ($variables[__('messages.variable-local')] as $codigo => $nombre_cliente)
                            <div id="parent_{{str_replace('/', '-', $nombre_cliente)}}">
                                <div class="d-flex align-items-center">
                                    <i id="{{$nombre_cliente}}" class="fas fa-caret-right d-inline-flex" style="padding-right: 5px"
                                    onclick="mostrar('{{$nombre_cliente}}', 'locales')"></i>
                                    <div class="form-check d-inline-flex">
                                        <input class="form-check-input shadow-sm input" parent="parent_{{str_replace('/', '-', $nombre_cliente)}}" type="checkbox" value="{{$codigo}}" id="{{$codigo}}">
                                        <label class="form-check-label label" for="{{$codigo}}" style="padding-left: 5px">{{mb_strtoupper($nombre_cliente)}}</label>
                                    </div>
                                </div>
                                <div style="margin-left: 25px;" class="d-none {{$codigo}}">
                                    <input class="form-control" type="text" required="" placeholder="{{__('messages.busqueda')}}" name="busqueda">
                                    @if (array_key_exists($codigo, $data))
                                        @foreach ($data[$codigo] as $item)
                                            <div class="form-check">
                                                <input class="form-check-input shadow-sm" type="checkbox" value="{{$item}}" id="{{$codigo}}-{{$item}}">
                                                <label class="form-check-label" for="{{$codigo}}-{{$item}}">{{$item}}</label>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        <div class="col col-md-2">
            <div class="w-100 h-100" style="margin-right: 5px;">
                <div class="shadow-sm bg-white h-100 d-flex flex-column" style="border-radius: 0px 0px 15px 15px !important;">
                    <div class="bg-secondary text-white text-center" style="padding: 5px 0px;">
                        <h4 class="fw-normal d-inline-block" style="margin-left: 5px">
                            {{__('messages.cubo-file-download')}}
                        </h4>
                    </div>
                    <div class="d-flex justify-content-center flex-column flex-grow-1 justify-content-evenly" style="padding: 0px 15px;">
                        <x-selector-generico id="formato2" idselect="formato" 
                        :salida="$formato"  class="selector-generico w-100" style=" width: 100%!important; margin-top: 10px;">
                            <x-slot name="texto">
                                {{__('messages.cubo-format')}}
                            </x-slot>
                        </x-selector-generico>
                        <button type="button" class="btn btn-primary boton-blue" onclick="getCubo('{{$cliente}}')">
                            {{__('messages.cubo-generate-file')}}
                        </button>
                        <button type="button" class="btn btn-secondary" onclick="resetParameters()">
                            {{__('messages.cubo-parameter-reset')}}
                        </button>
                        <button type="button" class="btn text-white" disabled>
                            {{__('messages.cubo-file-download')}}
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-2" style="padding-bottom: 5px">
            <div class="w-100 h-100" style="margin-right: 5px;">
                <div class="shadow-sm bg-white h-100 d-flex flex-column" style="border-radius: 0px 0px 15px 15px !important;">
                    <div class="text-white text-center" style="padding: 5px 0px; background-color: #00a65a;">
                        <h4 class="fw-normal d-inline-block">
                            {{__('messages.cubo-favorites')}}
                        </h4>
                    </div>
                    <x-selector-generico id="selector_favoritos2" idselect="selector_favoritos" :salida="$favoritosFinal"  class="selector-generico" style="width: 100%; margin-top: 10px; padding: 0px 5px;">
                        <x-slot name="texto">
                        </x-slot>
                    </x-selector-generico>
                    <div class="d-flex flex-column flex-grow-1" style="padding: 0px 15px 30px;">
                        <button id="updatefav" type="button" class="btn btn-secondary d-none" style="margin-bottom: 5px" onclick="updateFavoritos(this)">
                            {{__('messages.cubo-update-favorite')}}
                        </button>
                        <button type="button" class="btn btn-secondary mt-auto" style="margin-bottom: 5px" onclick="saveFavoritos(this)">
                            {{__('messages.cubo-save-favorite')}}
                        </button>
                        <input type="text" id="save_fav">
                        <button type="button" class="btn btn-secondary" style="margin-top: 20%; margin-bottom: 5px" onclick="deleteFavoritos(this)">
                            {{__('messages.cubo-delete-favorite')}}
                        </button>
                        <x-selector-generico id="selector_eliminar_favoritos2" idselect="selector_eliminar_favoritos" :salida="$favoritosFinal"  class="selector-generico" style="width: 100%; margin-top: 10px; padding: 0px 5px;">
                            <x-slot name="texto">
                            </x-slot>
                        </x-selector-generico>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- END Hero -->
@endsection
@section('js_after')
    <script src="{{asset('config/datatables.locale.spanish.js')}}"></script>
    <script src="{{asset("js/custom/utilidades.js")}}"></script>
    <script src="{{asset("js/custom/reporteriaGetter.js")}}"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
    <script>
        $('#f_mes_cubo_ini').val("{{date('Ym')}}").change();
        $('#f_mes_cubo_fin').val("{{date('Ym')}}").change();

        $('.jstree').jstree({
            "checkbox" : {
                "keep_selected_style" : false
            },
            "plugins" : [ "checkbox" ],
            "core" : {
                "themes" : {
                    "icons" : false
                },
                "force_text" : true,
            }
        });

        let mes = $("#f_tmp_cubo option[value='mes']").text();
        let arr_comp = [];
        var datos = ;
        let predeterminado = [$('#f_tmp_cubo').val(), $('#f_mes_cubo_ini').val(), $('#f_mes_cubo_fin').val(), $('#formato').val()];
        for (const [key, value] of Object.entries(datos)) {
            datos[key]=JSON.parse(value);
        }

        $('#f_tmp_cubo').change(function(elem){
            if(elem.target.value == "mes"){
                $("#6000").prop("disabled", false);
            }else{
                $("#6000").prop("checked", false);
                $("#6000").prop("disabled", true);
            }
        });

        $('select[id^="f_tmp_"]').change(function(elem){
            let aux = elem.target.id.split("_");
            let macroTmp = aux[aux.length - 1];
            let tmp = $("#f_tmp_" + macroTmp).find('option:selected').val();
            $(".fltr_periodo_" + macroTmp).css("display","none");
            $("#fltr_"+tmp+"_" + macroTmp).css("display","inline-block");
            $("#fltr_"+tmp+"_" + macroTmp + "2").css("display","inline-block");
            $("#fltr_"+tmp+"_" + macroTmp + "3").css("display","inline-block");
        });
        $('select[id^="f_tmpcomp_cubo"]').change(function(elem){
            let aux = elem.target.id.split("_");
            let macroTmp = aux[aux.length - 1];
            let tmp = $("#f_tmpcomp_" + macroTmp).find('option:selected').val();
            $(".fltr_periodocomp_" + macroTmp).css("display","none");
            $("#f_"+tmp+"comp_" + macroTmp).css("display","inline-block");
        });
        $('select[id^="f_tipo_cubo"]').change(function(elem){
            let tipo = $("#f_tipo_cubo").find('option:selected').val();
            if(tipo == 'comp'){
                $('#bloque_comp').css("display", "inline-block");
                $('#bloque_evo').css("display", "none");
            }else{
                $('#bloque_comp').css("display", "none");
                $('#bloque_evo').css("display", "inline-block");
            }
        });
        $('.jstree').on("changed.jstree", function (e, data) {
            arr_comp = data.selected;
            arr_comp = arr_comp.filter(function (item) {
                return item.indexOf("j") !== 0;
            });
        });
        let ahora = new Date();
        let congifDate = {
            ...("{{config('app.locale')}}" == "es") && {
                locale: {
                    format: 'YYYY/MM/DD',
                    daysOfWeek: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa"],
                    monthNames: ["Enero", "Febrero", "Marzo", "Abril",
                                "Mayo", "Junio", "Julio", "Agosto",
                                "Septiembre", "Octubre", "Noviembre", "Diciembre"],
                    applyLabel: "Aplicar",
                    cancelLabel: "Cancelar",
                    firstDay: 1
                }
            },
                maxDate: moment(ahora),
                startDate: moment((new Date()).setDate(ahora.getDate()-21)),
                endDate: ahora
        };
        $("#f_dia_cubo_ini").daterangepicker(congifDate);
        function mostrar(id, tipo) {
            var parent = document.getElementById("parent_"+id.replace('/','-'));
            var elementos = parent.getElementsByClassName("d-none");
            var selector = document.getElementById(id);
            var selectores = document.getElementById(tipo).getElementsByTagName("i");
            if(elementos.length>0){
                selectores.forEach(element => {
                    element.classList.remove("fa-caret-down");
                    element.classList.add("fa-caret-right");
                });
                selector.classList.remove("fa-caret-right");
                selector.classList.add("fa-caret-down");
                document.getElementById(tipo).getElementsByClassName("d-block").forEach(element => {
                    element.classList.remove("d-block");
                    element.classList.add("d-none");
                });
                elementos.forEach(element => {
                    element.classList.remove("d-none");
                    element.classList.add("d-block");
                });
            }else{
                selector.classList.remove("fa-caret-down");
                selector.classList.add("fa-caret-right");
                document.getElementById(tipo).getElementsByClassName("d-block").forEach(element => {
                    element.classList.remove("d-block");
                    element.classList.add("d-none");
                });
            }
        }
        $("#stock input").map(function(i, element) {
            element.addEventListener('change', (event) => {
                if (event.currentTarget.checked) {
                    if($("#f_tmp_cubo option[value='mes']").length){
                        // $("#f_tmp_cubo option[value='mes']").remove();
                        // $('#f_tmp_cubo').trigger('change');
                    }
                } else {
                    var bool = true;
                    $("#stock input").map(function(i, elem) {
                        if(elem.checked){
                            bool = false;
                        }
                    });
                    if(bool){
                        var newOption = new Option(mes, "mes", false, false);
                        $('#f_tmp_cubo').append(newOption);
                        $('#f_tmp_cubo').trigger('change');
                    }
                }
            });
        });
        function inputs(i, element){
            element.addEventListener('change', (event) => {
                $('#'+event.currentTarget.getAttribute("parent").replaceAll('/','-')+" .form-check-input").map(function(i, elem){
                    if (!event.currentTarget.checked) {
                        elem.checked = false;
                    }
                });
            });
            $('.'+element.value+" .form-check").map(function(i, elem){
                $(elem).find("input")[0].addEventListener('change', (event) => {
                    if (event.currentTarget.checked) {
                        element.checked = true;
                    }
                });
            });
            $('.'+element.value+" input[type=text]").keyup(function(event) {
                $('.'+element.value+" label").map(function(i, elem){
                    if(!$(elem).text().toLowerCase().includes(event.currentTarget.value.toLowerCase())){
                        elem.parentElement.style.display = "none";
                    }else{
                        elem.parentElement.style.display = "block";
                    }
                });
            });
        }
        $('#locales .input').map(function(i, element) {
            inputs(i,element);
        });
        $('#productos .input').map(function(i, element) {
            inputs(i,element);
        });
        function saveFavoritos(boton){
            let nombre=$("#save_fav").val();
            var salidas = [];
            let tmp = document.getElementById("f_tmp_cubo").value;
            var elementos = [];
            var valores = {};
            if(nombre!=""){
                $("#salida input").map(function(i, element){
                    if(element.checked){
                        salidas.push(element.value);
                    }
                });
                function encontrarValores (i, element){
                    var siAgregar = false;
                    if($(element).find(".input")[0].checked){
                        siAgregar = true;
                    }
                    var count = 0;
                    $(element).find("input[type=checkbox]").map(function (i, elem){
                        if(elem.checked){
                            siAgregar = false;
                            count++;
                        }
                    });
                    if($(element).find("input[type=checkbox]").length == count || count == 1){
                        siAgregar = true;
                    }
                    if(siAgregar){
                        elementos.push($(element).find(".input").val());
                    }else{
                        $('.'+$(element).find(".input").val()+' input[type=checkbox]').map(function (i, elem){
                            if(elem.checked){
                                if(!($(element).find(".input").val() in valores)){
                                    valores[$(element).find(".input").val()] = [];
                                }
                                valores[$(element).find(".input").val()].push(elem.value);
                            }
                        });
                    }
                }
                $("#productos > div").map(function (i, element){
                    encontrarValores (i, element);
                });
                $("#locales > div").map(function (i, element){
                    encontrarValores (i, element);
                });
                if(salidas.length > 0 && (elementos.length + Object.keys(valores).length > 0)){
                    let [ini , fin] = getDate(tmp, "#f_"+tmp+"_cubo_ini");
                    let savejson = {'salidas': salidas, 'elementos': elementos, 'valores': valores, 'tmp': tmp, 
                    'ini': ini, 'fin': fin};
                    $.ajax({
                        url: "/savefav",
                        method: "post",
                        dataType: "html",
                        crossDomain: false,
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        data: {
                            nombre: nombre,
                            salida: JSON.stringify(savejson),
                        },
                    }).done(function (data) {
                        data = JSON.parse(data);
                        alert(data[1].replaceAll(",", ""));
                        if(data[0]){
                            var datas = {
                                id: data[0][0],
                                text: data[0][1]
                            };
                            var newOption = new Option(datas.text, datas.id, false, false);
                            var newOption2 = new Option(datas.text, datas.id, false, false);
                            $('#selector_eliminar_favoritos').append(newOption);
                            $('#selector_favoritos').append(newOption2);
                            $('#selector_eliminar_favoritos').trigger('change');
                            $('#selector_favoritos').trigger('change');
                            datos[data[0][0]]=savejson;
                        }
                    });
                }else{
                    alert("{{__('messages.cubo-missing-data')}}");
                }
            }else{
                alert("{{__('messages.cubo-enter-name')}}");
            }
        }
        function updateFavoritos(boton){
            let nombre=$("#save_fav").val();
            var salidas = [];
            let tmp = document.getElementById("f_tmp_cubo").value;
            var elementos = [];
            var valores = {};
            if(nombre!=""){
                $("#salida input").map(function(i, element){
                    if(element.checked){
                        salidas.push(element.value);
                    }
                });
                function encontrarValores (i, element){
                    var siAgregar = false;
                    if($(element).find(".input")[0].checked){
                        siAgregar = true;
                    }
                    var count = 0;
                    $(element).find("input[type=checkbox]").map(function (i, elem){
                        if(elem.checked){
                            siAgregar = false;
                            count++;
                        }
                    });
                    if($(element).find("input[type=checkbox]").length == count || count == 1){
                        siAgregar = true;
                    }
                    if(siAgregar){
                        elementos.push($(element).find(".input").val());
                    }else{
                        $('.'+$(element).find(".input").val()+' input[type=checkbox]').map(function (i, elem){
                            if(elem.checked){
                                if(!($(element).find(".input").val() in valores)){
                                    valores[$(element).find(".input").val()] = [];
                                }
                                valores[$(element).find(".input").val()].push(elem.value);
                            }
                        });
                    }
                }
                $("#productos > div").map(function (i, element){
                    encontrarValores (i, element);
                });
                $("#locales > div").map(function (i, element){
                    encontrarValores (i, element);
                });
                if(salidas.length > 0 && (elementos.length + Object.keys(valores).length > 0)){
                    let [ini , fin] = getDate(tmp, "#f_"+tmp+"_cubo_ini");
                    let savejson = {'salidas': salidas, 'elementos': elementos, 'valores': valores, 'tmp': tmp, 
                    'ini': ini, 'fin': fin};
                    $.ajax({
                        url: "/updatefav",
                        method: "post",
                        dataType: "html",
                        crossDomain: false,
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        data: {
                            nombre: nombre,
                            salida: JSON.stringify(savejson),
                        },
                    }).done(function (data) {
                        data = JSON.parse(data);
                        alert(data[1].replaceAll(",", ""));
                        if(data[0]){
                            var datas = {
                                id: data[0][0],
                                text: data[0][1]
                            };
                            var newOption = new Option(datas.text, datas.id, false, false);
                            var newOption2 = new Option(datas.text, datas.id, false, false);
                            $('#selector_eliminar_favoritos').append(newOption);
                            $('#selector_favoritos').append(newOption2);
                            $('#selector_eliminar_favoritos').trigger('change');
                            $('#selector_favoritos').trigger('change');
                            datos[data[0][0]]=savejson;
                        }
                    });
                }else{
                    alert("{{__('messages.cubo-missing-data')}}");
                }
            }else{
                alert("{{__('messages.cubo-enter-name')}}");
            }
        }
        function deleteFavoritos(boton){
            let id=document.getElementById("selector_eliminar_favoritos").value;
            if(id!=""){
                    $.ajax({
                    url: "/deletefav",
                    method: "post",
                    dataType: "html",
                    crossDomain: false,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        id: id
                    },
                }).done(function (data) {
                    data = JSON.parse(data);
                    alert(data[1].replace(",", ""));
                    if(data[0]){
                        $("#selector_eliminar_favoritos option[value='"+data[0]+"']").remove();
                        $("#selector_favoritos option[value='"+data[0]+"']").remove();
                        $('#selector_eliminar_favoritos').trigger('change');
                        $('#selector_favoritos').trigger('change');
                        delete datos[data[0]];
                    }
                });
            }
        }
        $('#selector_favoritos').on("select2:select", function(event) {
            var value = $(event.currentTarget).find("option:selected").val();
            if(value!=""){
                // console.log(value);
                $("#salida input[type=checkbox]").map(function (i, elem){
                    if(datos[value]["salidas"].includes(elem.value)){
                        elem.checked = true;
                    }else{
                        elem.checked = false;
                    }
                });
                $("#productos .input").map(function (i, elem){
                    if(datos[value]["elementos"].includes(elem.value)){
                        elem.checked = true;
                    }else{
                        elem.checked = false;
                        $('.'+elem.value+' input[type=checkbox]').map(function (i, el){
                            el.checked = false;
                        });
                    }
                });

                $("#locales .input").map(function (i, elem){
                    if(datos[value]["elementos"].includes(elem.value)){
                        elem.checked = true;
                    }else{
                        elem.checked = false;
                        $('.'+elem.value+' input[type=checkbox]').map(function (i, el){
                            el.checked = false;
                        });
                    }
                });
                
                for (const [key, val] of Object.entries(datos[value]["valores"])) {
                    var bool = true;
                    $('.'+key+' input[type=checkbox]').map(function (i, elem){
                        if(val.includes(elem.value)){
                            $('.input').map(function (i,el){
                                if(el.value == key){
                                    el.checked = true;
                                }
                            });
                            elem.checked = true;
                            bool = false;
                        }else{
                            elem.checked = false;
                        }
                        if(bool){
                            $('.input').map(function (i,el){
                                if(el.value == key){
                                    el.checked = false;
                                }
                            });
                        }
                    });
                }
                let tmp = datos[value]['tmp'];
                if(tmp=="mes" && $("#f_tmp_cubo option[value='mes']").length==0){
                    var newOption = new Option(mes, "mes", false, false);
                    $('#f_tmp_cubo').append(newOption);
                    $('#f_tmp_cubo').trigger('change');
                }
                $('#f_tmp_cubo').val(tmp);
                $('#f_tmp_cubo').trigger('change');
                if(tmp=="dia"){
                    $('#f_'+tmp+'_cubo_ini').data('daterangepicker').setStartDate(datos[value]['ini']);
                    $('#f_'+tmp+'_cubo_ini').data('daterangepicker').setEndDate(datos[value]['fin']);
                }else{
                    $('#f_'+tmp+'_cubo_ini').val(datos[value]['ini']);
                    $('#f_'+tmp+'_cubo_ini').trigger('change');
                    $('#f_'+tmp+'_cubo_fin').val(datos[value]['fin']);
                    $('#f_'+tmp+'_cubo_fin').trigger('change');
                }
                $("#updatefav").removeClass("d-none");
            }else{
                $("#updatefav").addClass("d-none");
            }
            
        });
        function MessageIn(icon){
            $('.tooltiptext').fadeIn(200);
            $('.fa-sort-up').fadeIn(200);
        }
        function MessageOut(icon){
            $('.tooltiptext').fadeOut(200);
            $('.fa-sort-up').fadeOut(200);
        }
        function resetParameters(){
            $('input[type=checkbox]').map(function (i,el){
                el.checked = false;
            });
            
            $('#f_tmp_cubo').val(predeterminado[0]);
            $('#f_tmp_cubo').trigger('change');
            $('#f_'+$('#f_tmp_cubo').val()+'_cubo_ini').val(predeterminado[1]);
            $('#f_'+$('#f_tmp_cubo').val()+'_cubo_ini').trigger('change');
            $('#f_'+$('#f_tmp_cubo').val()+'_cubo_fin').val(predeterminado[2]);
            $('#f_'+$('#f_tmp_cubo').val()+'_cubo_fin').trigger('change');
            $('#formato').val(predeterminado[3]);
            $('#formato').trigger('change');
        }

        
    </script>
    <script src="{{asset('js\vendor\bootstrap-datepicker.min.js')}}"></script>
    <script src="{{mix('/js/app.js')}}"></script>
@endsection