@extends('layouts.backend')

@php
        $cliente=config('app.CLIENTE');
        $catalogado = json_encode(["1"=> __('messages.catalogado'), "2" => __('messages.no-catalogado'), '3' => __('messages.no-informado'), '4' => __('messages.todos')]);
        $info = "Los porcentajes mostrados en las tablas se calculan de la siguiente manera: \n
        Instock: (SUMA(Instock)/Total de registros) x 100
        DOH: Stock Valorizado * 28 / Ventas ult 28 dias
        OSA: (SUMA(OSA)/Total de registros) x 100
        DOH CD: SUM(STOCK_CD) * 28 / VENTAS_ULTIMOS_28 en unidades
        Inv. Fantasma: 100% - OSA% - Quiebre%
        Fillrate: (Cantidad recibida/Cantidad solicitada) x 100\n
Pasar el cursor por encima de la celda de una tabla mostrará mayor información acerca del cálculo aplicado.\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='';
        }
        $favoritos=json_encode([]);
    @endphp

@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>
        .dataTables_scrollBody{
            max-height: 500px;
        }
        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;
        }
        .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;
        }

        .dataTables_filter, .dataTables_length, .dataTables_info, .dataTables_paginate{
            display: none!important;
        }

    </style>
@endsection
@section('content')
    <!-- Hero -->
    
    <h3 class="flex-sm-fill font-size-h2 font-w400 mt-2 mb-0 mb-sm-2 text-center" style="font-weight: 400!important;">OSA Scorecard</h3>
    @php echo $div; @endphp
    <div class="row bg-white" style="padding: 5px 0; margin-left: 10px">
        <x-tabla id="filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
        
        <div class="col col-md-auto">
            <x-filtro id="cliente" :lista="$clientes" style="max-width: 120px; min-width: 120px; width: 120px;" class="ms-auto">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-cliente')}}
                </x-slot>
            </x-filtro>
        </div>

        <div class="col col-md-auto">
            <x-selector-generico id="f_catalogado2" idselect="f_catalogado" :salida="$catalogado"  class="selector-generico" style="width: 120px;">
                <x-slot name="texto">
                    Estado
                </x-slot>
            </x-selector-generico>
        </div>

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

        <x-boton-actualizar onclick="actualizar()"/>

        </x-tabla>
    </div>

    <div class="row" style="margin-top:10px; margin-left: 10px; height: 300px">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="content">
                <div class="d-flex" style="width: 100%; height: 300px; background-color: #FFFFFF">
                        <div style="height: 270px; pointer-events: none; background-color: #FFFFFF; box-shadow: none; border: none" class="chart card">
                            <div id="scorecard_instock">

                            </div>
                        </div>

                        <div style="height: 270px; pointer-events: none; background-color: #FFFFFF; box-shadow: none; border: none" class="chart card">
                            <div id="scorecard_fillrate">

                            </div>
                        </div>

                        <div style="height: 270px; pointer-events: none; background-color: #FFFFFF; box-shadow: none; border: none" class="chart card">
                            <div id="scorecard_osa">

                            </div>
                        </div>

                        <div style="height: 270px; background-color: #FFFFFF; box-shadow: none; border: none" class="chart card">
                            <div id="scorecard_doh">

                            </div>
                        </div>
                </div>
            </div>
        </div>

    </div>

    <div class="row bg-white" style="margin-top:10px; margin-left: 10px" >
        <x-tabla id="zona">
            
            
        </x-tabla>
    </div>

    <div class="row bg-white" style="margin-top:10px; margin-left: 10px" >
        <x-tabla id="categoria">
            
            
        </x-tabla>
    </div>

    <h3 class="flex-sm-fill font-size-h2 font-w400 mt-2 mb-0 mb-sm-2 text-center" style="font-weight: 400!important;">Status Productos TOP 10</h3>
    <div class="row bg-white" width="90%"   >
        <x-tabla id="topProductos" style="margin-top:10px; margin-left: 10px">
            
            
        </x-tabla>
    </div>

    <h3 class="flex-sm-fill font-size-h2 font-w400 mt-2 mb-0 mb-sm-2 text-center" style="font-weight: 400!important;">Status Locales TOP 10</h3>
    <div class="row bg-white" width="90%"  >
        <x-tabla id="topLocales" style="margin-top:10px; margin-left: 10px">
            
            
        </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>
        let ids = ['filtros'];
        var filtrosPromise = getFiltrosAv('{{$cliente}}', '{{$codigo}}');

        $('#cliente').select2MultiCheckboxes({
                placeholder: "{{__('messages.elegir-variables')}}",
                width: "auto",
                templateSelection: function(selected, total) {
                    return selected.length + " de " + total + " total";
                }
        });
        $('#cliente').val(null).trigger('change');
        
        $(document).ready(function(){
            ids.forEach(function(item){
                if($('#'+item).length > 0 && $('#f_favoritos_'+item).length > 0) cargarFavoritos(item);
            });
            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')}}");
                }
            }
        })

        function actualizar(){
            getGrafInstock('{{$cliente}}');
            getGrafFillrate('{{$cliente}}');
            getGrafScorecardOSA('{{$cliente}}');
            getGrafDOH('{{$cliente}}');
            getScorecardZona('{{$cliente}}');
            getScorecardCategoria('{{$cliente}}');
            getScorecardTopProductos('{{$cliente}}');
            getScorecardTopLocales('{{$cliente}}');
        }

    </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