@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')}}">
    @yield('css_aft')
@endsection

@section('content')
    <!-- Hero -->
    @if(count($selectores_grafico)>0)
    <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-h2 font-w400 mt-1 mb-0 mb-sm-1 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>
    @yield('div_reportes')
    @yield('php')
    <x-selector-grafico-tabla :selectores="$selectores_grafico" tipo="grafico"/>
    <div id="grafico" style="height: 100%;" class="bg-white">
        @yield('grafico')
    </div>
    @endif
    @if(count($selectores_tabla)>0)
    <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-h2 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>
    <x-selector-grafico-tabla :selectores="$selectores_tabla" tipo="tabla"/>
    <div id="tabla" style="height: 700px;" class="bg-white">
        @yield('tabla')
    </div>
    @endif
@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?v=20250206")}}"></script>
    <script src="{{asset("js/custom/reporteriaGetter.js?v=20250302")}}"></script>
    <script src="{{ asset('js\jszip.min.js') }}"></script>

    @yield('js_aft')
    <script>
        
        $(document).ready(() => {
            $('#f_type_grafevo').change(function(){
                var newChartType = ($(this).val());
                event.stopPropagation();
                var grafevo = FusionCharts('grafEvo').chartType(newChartType);
            });

            $('#f_type_grafcomp').change(function(){
                var newChartType = ($(this).val());
                console.log(newChartType);
                event.stopPropagation();
                var grafcomp = FusionCharts('grafComp').chartType(newChartType);
            });
            var mostrar_grafico = "{{$muestra_grafico}}";
            var mostrar_tabla = "{{$muestra_tabla}}";
            if(mostrar_grafico == "0"){
                $('#btn-grafico').click();
            }
            if(mostrar_tabla == "0"){
                $('#btn-tabla').click();
            }
        });
        
    </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\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