@extends('layouts.backend')

@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>
        label{
            font-weight: normal !important;
        }
    </style>
@endsection

@section('content')
    <!-- Hero -->
    @php
        $cliente = config('app.CLIENTE');
        $tipo_hold = json_encode(["DOH"=>"DOH", "DOH_CD"=>"DOH CD"]);
        $info="El DOH se calcula de la siguiente manera:
        DOH = Stock Valorizado * 28 / Ventas ult 28 dias\n
        DOH (CENCOSUD) = Stock unidades * 28 / Ventas ult 28 dias\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="bg-body-light">
        <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" style="font-weight: 400!important; text-align:center">{{$titulo}}</h3>
                <nav class="flex-sm-00-auto ml-sm-3" aria-label="breadcrumb">
                    
                </nav>
            </div>
        </div>
    </div>
    @php echo $div; @endphp

    <x-tabla id="doh_so">
        <x-selector-generico id="f_tipo_hold2" idselect="f_tipo_hold" :salida="$tipo_hold" class="selector-generico" selected="2">
                <x-slot name="texto">
                    Salida
                </x-slot>
        </x-selector-generico> 
        <x-filtro id="f_holding_doh_so" :lista="$holding">
            <x-slot name="texto">
                Holding
            </x-slot>
        </x-filtro>
        {{-- <x-filtro id="f_zona_nielsen_doh_so" :lista="$zona_nielsen" >
            <x-slot name="texto">
                Sales Group
            </x-slot>
        </x-filtro> --}}

        <x-infobox tamano="25px" :texto="$info"/>

        <x-boton-actualizar onclick="getTablaDOH('{{$cliente}}', 'ventas');"/>

        <div class="d-none">
            <x-selector-meses id="fltr_mes_doh_so" idselect="f_mes_doh_so_ini" :meses="$meses" class="fltr_periodo_doh_so">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_doh_so2" idselect="f_mes_doh_so_fin" :meses="$meses" class="fltr_periodo_doh_so">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
        </div>
    </x-tabla>

    <!-- <div  class="w-100 bg-white d-flex justify-content-start" style="height: 300px; margin-top: 10px">
        <div id="grafTrend_cont" class="w-100 h-100">

        </div>
    </div>
    <div  class="w-100 bg-white d-flex justify-content-start" style="height: 300px; margin-top: 10px">
        <div id="grafSISO_cont" class="w-100 h-100">

        </div>
    </div>
    <div  class="w-100 bg-white d-flex justify-content-start" style="height: 300px; margin-top: 10px">
        <div id="grafAcu_cont" class="w-100 h-100">

        </div>
    </div> -->
@endsection
@section('js_after')
    <!-- END Hero -->
    <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>
        $(document).ready(()=>{
            let filtros = ['holding', 'zona_nielsen']
            for (let filtro  of filtros) {
                $(`#f_${filtro}_doh_so`).select2MultiCheckboxes({
                    closeOnSelect:false,
                    multiple: true,
                    width: "120",
                    templateSelection: function(selected, total) {
                        return selected.length + " de " + total + " total";
                    }
                });
                $(`#f_${filtro}_doh_so`).find('option').prop("selected", false);
                $(`#f_${filtro}_doh_so`).trigger('change');
            }
            $("#f_tipo_hold").on("select2:select", function (e){
                getTablaDOH('{{$cliente}}', 'ventas');
            });
        });
    </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