@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')}}">
    @php
        $cliente = config('app.CLIENTE');
        // $sectores = [];
        // foreach ($sector as $key => $value) {
        //     $sectores[$value->sector] = $value->sector;
        // }
        // $sectores = json_encode($sectores);
        $selector_usuarios = json_encode($usuarios);
        //dd($selector_usuarios);
    @endphp
@endsection
@section('content')
    <div id="grafico" >
        <x-grafico id="grafenc" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            {{-- <x-selector-generico id="sector_grafenc2" idselect="sector_grafenc" :salida="$sectores"  class="selector-generico" style="width: 110px">
                <x-slot name="texto">
                    {{__('messages.sector2')}}
                </x-slot>
            </x-selector-generico> --}}
    
            <x-selector-generico selected="Todos" :salida="$selector_usuarios" id="f_usuarios_grafenc2" idselect="f_usuarios_grafenc" style="max-width: 245px;min-width: 245;width: 245;" class=""  >
                <x-slot name="texto">
                    Usuarios
                </x-slot>
            </x-selector-generico>

            <x-selector-dias idpadre="grafenc"/>

            <x-boton-actualizar onclick="getEnc('{{$cliente}}', 'ventas');"/>
        </x-grafico>
        <div class="w-100 bg-white row justify-content-start" style="height: 225px; margin: 10px 0px 0px">
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                <div class="h-100 w-100" id="chart_preg1">
                    
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                <div class="h-100 w-100" id="chart_preg2">
                    
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                <div class="h-100 w-100" id="chart_preg3">
                    
                </div>
            </div>
        </div>
        <!-- <div class="w-100 bg-white row justify-content-start" style="height: 225px; margin: 10px 0px 0px">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div class="h-100 w-100" id="chart_preg3">
                    
                </div>
            </div>
        </div> -->
        
        <div class="w-100 bg-white row justify-content-start" style="height: 600px; margin: 10px 0px 0px">
            <div id="tbl_report" class="col-md-12" style="margin-top:5px;height: 500px;">
            </div>
        </div>
    </div>
@endsection
@section('after_wrapper')
@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 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\fusioncharts.powercharts.js')}}"></script>
    <script src="{{asset('fusioncharts\v3.15.1\js\themes\fusioncharts.theme.fusion.js')}}"></script>
    <script>
        let ids = ['grafenc'];
        var filtrosPromise = getFiltrosAv('{{$cliente}}', '{{$codigo}}');
        $(document).ready(() => {
            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')}}");
                }
            }
            $('#sector_grafenc').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()-31)),
                    endDate: ahora
            };
            $("#f_dia_grafenc_ini").daterangepicker(congifDate);
            $("#sector_grafenc").find('option').prop("selected", false);
            $("#sector_grafenc").trigger('change');
        });
    </script>

    <script src="{{asset('js/dataTables.fixedColumns.min.js')}}"></script>
    <script src="{{asset('js/dataTables.fixedHeader.min.js')}}"></script>
@endsection