@extends('layouts.tabla')

@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>
        body[data-leftbar-compact-mode="condensed"]:not(.authentication-bg){
            min-height: 0 !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;
        }
        .content-page{
            padding-left: 0px!important;
        }
        .container-fluid{
            padding-left: 0px!important;
        }
        .dataTables_scroll {
            clear: both;
        }

        .dataTables_scrollBody {
            *margin-top: -1px;
            -webkit-overflow-scrolling: touch;
        }

        label{
            font-weight: 400!important;
        }
    </style>
@endsection
@section('tabla')
    <!-- Hero -->
    @php
        $cliente=config('app.CLIENTE');
        $yearAct = date("Y");

        foreach ($semanas as $value) {
            $_year = substr($value->periodo, 0, 4);
            if($_year == $yearAct) {
                $semanasdohsem []= $value;
            }
        }
        $warning="El despliegue de la información completa puede demorar por la cantidad de registros.\n\nLa fórmula utilizada para calcular el DOH Semanal es la siguiente:
        DOH = Stock Valorizado * 28 / Ventas ult 28 dias\n
        Pasar el cursor por encima de la celda de una tabla mostrará mayor información acerca del cálculo aplicado.\n 
        La data para este reporte se carga los días Viernes\n";
        if ($cliente == 'colgate') {
            $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='';
        }
    @endphp
    <div class="row bg-white" style="border-radius: 0px 0px 5px 5px !important; margin-left: 10px">
        <div style="padding: 5px 16px;overflow: hidden;background-color: lightblue;text-align: center;">La data de este reporte se actualiza los días viernes con la foto del inventario disponible.@php echo $div; @endphp</div>
        <x-tabla id="DohSem" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-variable id="variables_dohsem" :lista='$variables' selected='2-5' />

            <x-selector-semanas id="fltr_sem_dohsem" idselect="f_sem_dohsem_ini" :semanas="$semanasdohsem" class="fltr_periodo_dohsem" >
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_dohsem2" idselect="f_sem_dohsem_fin" :semanas="$semanasdohsem" class="fltr_periodo_dohsem">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>
            <x-infobox tamano="25px" :texto="$warning"/>
            <x-boton-actualizar onclick="getDohSemanal('{{$cliente}}')"/>
        </x-tabla>
    </div>
    <!-- END Hero -->
@endsection
@section('js_after')
    <script src="{{asset('config/datatables.locale.spanish.js')}}"></script>
    <script src="{{asset('config/modal.languege.js')}}"></script>
    <script src="{{asset("js/custom/utilidades.js")}}"></script>
    <script src="{{asset("js/custom/reporteriaGetter.js")}}"></script>
    <script src="{{ asset('js\app.js') }}"></script>
    {{-- @php
        echo "<script>console.log('".$clientes."');</script>";
    @endphp --}}

    <script>
        var vista = "1";
        var id;
        var cod;
        var sku;
        var sku_b2b;
        let ids = ['DohSem'];
        var filtrosPromise = getFiltrosAv('{{$cliente}}', '{{$codigo}}');
        $(document).ready(() => {
            ids.forEach(function(item){
                if($('#'+item).length > 0 && $('#f_favoritos_'+item).length > 0) cargarFavoritos(item);
            });

            $('#aplicarfiltros').click(function(){
                getDohSemanal('{{$cliente}}');
            });
            
            filtrosPromise.then(function(resp){
                ponerFiltrosAv(resp);
            });

            let filtros = ['clientes', 'categorias', 'kam'];
            for(let filtro of filtros) {
                for(let id of ids) {
                    multiSelect(filtro, id, "{{__('messages.seleccionar')}}");
                }
            }

            $('#variables_dohsem').select2MultiCheckboxes({
                placeholder: "{{__('messages.elegir-variables')}}",
                width: "auto",
                templateSelection: function(selected, total) {
                    return selected.length + " de " + total + " total";
                }
            });

        });

        const yourDate = new Date();
    </script>
    <script src="{{asset('js\vendor\bootstrap-datepicker.min.js')}}"></script>
    <script src="{{ asset('js/vendor/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('js\vendor\dataTables.bootstrap5.js') }}"></script>
    <script src="{{ asset('js\vendor\dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('js\vendor\buttons.print.min.js') }}"></script>
    <script src="{{ asset('js\vendor\buttons.html5.min.js') }}"></script>
    <script src="{{ asset('js\jszip.min.js') }}"></script>
    <script src="{{ asset('js\vendor\buttons.flash.min.js') }}"></script>
    <script src="{{asset('fusioncharts\v3.15.1\js\fusioncharts.js')}}"></script>
    <script src="{{asset('fusioncharts\v3.15.1\js\themes\fusioncharts.theme.fusion.js')}}"></script>
    <script src="{{asset('js/dataTables.fixedColumns.min.js')}}"></script>
    <script src="{{asset('js/dataTables.fixedHeader.min.js')}}"></script>
@endsection