@extends('layouts.reporte')

@section('css_after')
<link rel="stylesheet" href="{{asset('css\vendor\dataTables.bootstrap5.css') }}">
<link rel="stylesheet" href="{{asset('css\vendor\buttons.bootstrap5.css') }}">

<link rel="stylesheet" href="{{asset('css/fixedColumns.bootstrap5.min.css')}}">
<link rel="stylesheet" href="{{asset('css/fixedHeader.bootstrap5.min.css')}}">
    <style>
        .instock_verde{
            background-color:#6BD796 !important;
            color:black;
        }

        .instock_rojo{
            background-color:#F15A5A !important;
            color:black;
        }
    </style>
@endsection

@section('php')
    @php
        $cliente = config('app.CLIENTE');

        $salida = json_encode([]);
        $periodo = json_encode([]);

        $pareto = json_encode(['100' => '100% de la Venta', '80' => '80% de la Venta']);
        $tipoStock = json_encode(['1' => __('messages.catalogado'), '0' => __('messages.no-catalogado'), '2' => __('messages.no-informado'), '' => __('messages.todos')]);
        $doh = json_encode(['1' => '1 DOH', '2' => '2 DOH', '3' => '3 DOH', '4' => '4 DOH', '5' => '5 DOH']);
        $instock_limite = json_encode(['100' => 'Mostrar Todos', '95' => '95%', '90' => '90%']);

        if($div_reportes != null) {
            $div = '<div style="padding: 5px 16px;overflow: hidden;background-color: lightblue;text-align: center;"><ul>';
            foreach ($div_reportes as $value) {
                $div.= '<li>'.$value->Descripcion.'</li>';
            }
            $div.= '</ul></div>';
        }else $div = '';


        $display_grafico = $display_tabla = '';
        $true = 'true';
    @endphp
@endsection
@section('div_reportes')
    @php echo $div; @endphp
@endsection

@if(count($selectores_grafico)>0)
@section('grafico')

@endsection
@endif

@if(count($selectores_tabla)>0)
@section('tabla')
    @if(isset($selectores_tabla['instockdia']))
        <x-tabla id="instockdia" style="height: 600px !important;  {{$display_tabla}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias"> 
            <x-selector-variable id="variables_instockdia" :lista='$variables' selected='2-5' />
          
            <x-selector-generico id="f_doh_instockdia2" idselect="f_doh_instockdia" :salida="$doh" class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    DOH
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="f_catalogado_instockdia2" idselect="f_catalogado_instockdia" :salida="$tipoStock"  class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    Tipo Stock
                </x-slot>
            </x-selector-generico>

            <x-selector-generico selected="80" id="f_pareto_instockdia2" idselect="f_pareto_instockdia" :salida="$pareto" 
            class="selector-generico" >
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-pareto')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-semanas id="fltr_sem_instockdia" idselect="f_sem_instockdia_ini" :semanas="$semanas"  class="fltr_periodo_instockdia" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_instockdia2" idselect="f_sem_instockdia_fin" :semanas="$semanas" class="fltr_periodo_instockdia" style="">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>
          
            <x-boton-actualizar onclick="getInstockDiaMdlz('{{$cliente}}', 'stocks')"/>

        </x-tabla>
        @php $display_tabla = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_tabla['instocksem']))
        <x-tabla id="instocksem" style="height: 600px !important;  {{$display_tabla}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias"> 
            <x-selector-variable id="variables_instocksem" :lista='$variables' selected='2-5' />

            <x-selector-generico id="f_catalogado_instocksem2" idselect="f_catalogado_instocksem" :salida="$tipoStock"  class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    Tipo Stock
                </x-slot>
            </x-selector-generico>

            <x-selector-generico selected="80" id="f_pareto_instocksem2" idselect="f_pareto_instocksem" :salida="$pareto" 
            class="selector-generico" >
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-pareto')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-meses id="fltr_mes_instocksem" idselect="f_mes_instocksem_ini" :meses="$meses" class="fltr_periodo_instocksem" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_instocksem2" idselect="f_mes_instocksem_fin" :meses="$meses" class="fltr_periodo_instocksem">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
          
            <x-boton-actualizar onclick="getInstockSemMdlz('{{$cliente}}', 'stocks')"/>

        </x-tabla>
        @php $display_tabla = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_tabla['estadocritico']))
        <x-tabla id="estadocritico" style="height: 600px !important;  {{$display_tabla}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias"> 
            <x-selector-variable id="variables_estadocritico" :lista='$variables' selected='2-5' />

            <x-selector-generico id="f_instock_instockdia2" idselect="f_instock_instockdia" :salida="$instock_limite" selected="95" class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    Instock Bajo
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="f_catalogado_estadocritico2" idselect="f_catalogado_estadocritico" :salida="$tipoStock"  class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    Tipo Stock
                </x-slot>
            </x-selector-generico>

            <x-selector-generico selected="80" id="f_pareto_estadocritico2" idselect="f_pareto_estadocritico" :salida="$pareto" 
            class="selector-generico" >
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-pareto')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-semanas id="fltr_sem_estadocritico" idselect="f_sem_estadocritico_ini" :semanas="$semanas"  class="fltr_periodo_estadocritico" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_estadocritico2" idselect="f_sem_estadocritico_fin" :semanas="$semanas" class="fltr_periodo_estadocritico" style="">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>
          
            <x-boton-actualizar onclick="getInstockEstadoCriticoMdlz('{{$cliente}}', 'stocks')"/>

        </x-tabla>
        @php $display_tabla = 'display: none;'; @endphp
    @endif
@endsection
@endif

@section('js_aft')
    <script>
        var cliente_ = "{{$cliente}}";

        ids = ['instockdia', 'instocksem', 'estadocritico'];

        $(document).ready(() => {
            ids.forEach(function(item){
                if($('#'+item).length > 0 && $('#f_favoritos_'+item).length > 0) cargarFavoritos(item);
            });
            
            let filtros = ['clientes', 'categorias', 'kam', 'subcategoria', 'producto_sku_prov'];
            for(let filtro of filtros) {
                for(let id of ids) {
                    multiSelect(filtro, id, "{{__('messages.seleccionar')}}");
                }
            }

            ['#variables_instockdia', '#variables_instocksem', '#variables_estadocritico'].forEach(function(element){
                $(element).select2MultiCheckboxes({
                    placeholder: "{{__('messages.elegir-variables')}}",
                    width: "auto",
                    templateSelection: function(selected, total) {
                        return selected.length + " de " + total + " total";
                    }
                });
            });

            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: moment((new Date()).setDate(ahora.getDate()-1))
            };

            [].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate);
            });

            $('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");
            });

            $('#variables_instocksem').val(['3-6', '1-2']).change();
            //$('#variables_estadocritico').val(['2-5', '2-8', '3-5', '1-15']).change();
            $('#variables_estadocritico').val(['2-5', '1-15']).change();
        });

        var filtrosPromise = getFiltrosAv('{{$cliente}}', '{{$codigo}}');

        filtrosPromise.then(function(resp){
            ponerFiltrosAv(resp);
        });

        function openModal(modal){
            $("#"+modal).modal("show");
        }
    </script>
@endsection