@extends('layouts.reporte')

@section('php')
    @php
        $cliente = config('app.CLIENTE');
        $salida = json_encode(["2"=> __('messages.ventas'), "1" => __('messages.unidades')]);
        $porcentaje = json_encode(["80"=> "80 / 20", "20" => "20 / 80", "100" => "Todos"]);
        $display_tabla = '';
        $vista = json_encode(["1" => "Locales", "2" => "Locales - Productos", "3" => "Productos - Marca"]);
   
    @endphp
    @endsection
    @section('content')
    <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">
                <h4 class="flex-sm-fill font-size-h4 font-w400 mt-2 mb-0 mb-sm-2 text-center" style="font-weight: 400!important;">{{mb_strtoupper($titulo)}}</h4>
                <nav class="flex-sm-00-auto ml-sm-3" aria-label="breadcrumb">
                    
                </nav>
            </div>
        </div>
    </div>
    <div id="tabla" style="height: 750px !important;" class="bg-white">
        <x-tabla id="rankingvent" style="" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">


            <x-filtro id="f_clientes_rankingvent" :lista="$clientes" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-cliente')}}
                </x-slot>
            </x-filtro>
            <x-selector-generico id="f_vista_rankingvent2" idselect="f_vista_rankingvent" :salida="$vista"  class="selector-generico" style="width: 150px">
                <x-slot name="texto">
                    Vista
                </x-slot>
            </x-selector-generico>
            <x-selector-generico id="salida_rankingvent2" idselect="salida_rankingvent" :salida="$salida"  class="selector-generico" style="width: 110px">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>
            <x-selector-generico id="porcentaje_rankingvent2" idselect="porcentaje_rankingvent" :salida="$porcentaje"  class="selector-generico" style="width: 110px" selected="100">
                <x-slot name="texto">
                    Pareto
                </x-slot>
            </x-selector-generico>
            <x-boton-actualizar onclick="getRankingVentas('{{$cliente}}', 'ventas')"/>
            <x-filtro id="f_categorias_rankingvent" :lista="$categorias" style="max-width: 120px;min-width: 120px;width: 120px;" class="ms-auto">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-categoria')}}
                </x-slot>
            </x-filtro>
            <x-filtro id="f_kam_rankingvent" :lista="$kam" style="max-width: 120px;min-width: 120px;width: 120px;">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-kam')}}
                </x-slot>
            </x-filtro>
        </x-tabla>
    </div>

    @endsection
@section('js_aft')
    <script>
    
        let ids = ['rankingvent'];
        
        $(document).ready(() => {
            let filtros = ['clientes', 'categorias', 'kam'];
            for(let filtro of filtros) {
                for(let id of ids) {
                    multiSelect(filtro, id, "{{__('messages.seleccionar')}}");
                }
            }
        });
        var filtrosPromise = getFiltrosAv('{{$cliente}}', '{{$codigo}}');
        filtrosPromise.then(function(resp){
            ponerFiltrosAv(resp);
        });
    </script>
@endsection