@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');
        $tipos = json_encode(["producto" => __("messages.variable-producto"), "local" => __("messages.sala")]);
        $filtros = json_encode([]);
    @endphp
@endsection

@section('content')
    <!-- Hero -->
    <div style="padding: 10px 0px;" class="bg-white row">
        <x-selector-generico id="f_tipo_dashboard2" idselect="f_tipo_dashboard" :salida="$tipos" class="selector-generico" style='width: 200px; margin-left: 10px' 
        selected="local">
            <x-slot name="texto">
            </x-slot>
        </x-selector-generico>
        <x-selector-generico id="f_producto_dashboard2" idselect="f_producto_dashboard" :salida="$filtros" class="selector-generico d-none" 
        style='width: 200px;' selected="local">
            <x-slot name="texto">
            </x-slot>
        </x-selector-generico>
        <x-selector-generico id="f_local_dashboard2" idselect="f_local_dashboard" :salida="$filtros" class="selector-generico" 
        style='width: 200px;' selected="local">
            <x-slot name="texto">
            </x-slot>
        </x-selector-generico>
    </div>
    <div style="padding: 10px 0px;" class="row">
        <div class="col-md-6" id="chart_dashboard_dow">
            <div class="w-100 justify-content-center bg-white" id="f_carga_dashboard_dow" style="height: 400px; display: none;">
                <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
            </div>
            <div style="margin:0px;padding-top:0px;background-color:#FFF;position:relative; height:400px;" id="dashboard_dow_cont">

            </div>
        </div>
        <div class="col-md-6" id="chart_dashboard_ym">
            <div class="w-100 justify-content-center bg-white" id="f_carga_dashboard_ym" style="height: 400px; display: none;">
                <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
            </div>
            <div style="margin:0px;padding-top:0px;background-color:#FFF;position:relative; height:400px;" id="dashboard_ym_cont">

            </div>
        </div>
    </div>
    <div style="padding: 0px 0px 10px;" class="row">
        <div class="col-md-6" id="chart_dashboard_corr">
            <div class="w-100 justify-content-center bg-white" id="f_carga_dashboard_corr" style="height: 400px; display: none;">
                <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
            </div>
            <div style="margin:0px;padding-top:0px;background-color:#FFF;position:relative; height:400px;" id="dashboard_corr_cont">

            </div>
        </div>
        <div class="col-md-6" id="chart_dashboard_fore">
            <div class="w-100 justify-content-center bg-white" id="f_carga_dashboard_fore" style="height: 400px; display: none;">
                <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
            </div>
            <div style="margin:0px;padding-top:0px;background-color:#FFF;position:relative; height:400px;" id="dashboard_fore_cont">

            </div>
        </div>
    </div>
@endsection
@section('after_wrapper')

<!-- /End-bar -->
@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>
        
        let ids = ['dashboard'];
        var filtrosPromise = getFiltrosAv('{{$cliente}}', '{{$codigo}}');
        $("#f_tipo_dashboard").change(function () {
            if($("#f_tipo_dashboard").val() == "producto"){
                $("#f_producto_dashboard2").removeClass( "d-none" );
                $("#f_local_dashboard2").addClass( "d-none" );
            }else{
                $("#f_producto_dashboard2").addClass( "d-none" );
                $("#f_local_dashboard2").removeClass( "d-none" );
            }
        });
        $(document).ready(() => {
            async function consultaInicial(){
                await filtrosPromise.then(function(resp){
                    ponerFiltrosAvNoMulti(resp);
                });
                getGrafDOW("{{$cliente}}");
                getGrafYM("{{$cliente}}");
                getGrafCorr("{{$cliente}}");
                getGrafDashboardFore("{{$cliente}}");
            }
            consultaInicial();
            ["f_tipo_dashboard", "f_producto_dashboard", "f_local_dashboard"].forEach(element => {
                $("#"+element).change(function() {
                    getGrafDOW("{{$cliente}}");
                    getGrafYM("{{$cliente}}");
                    getGrafCorr("{{$cliente}}");
                    getGrafDashboardFore("{{$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\fusioncharts.powercharts.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