@extends('layouts.tabla')

@section('css_after')
<link rel="stylesheet" href="{{asset('css\vendor\dataTables.bootstrap5.css') }}">
<link rel="stylesheet" href="{{asset('css\vendor\buttons.bootstrap5.css') }}">
<link href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-dark@4/dark.css" rel="stylesheet">
<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;
        }

        .editable-text {
            flex-grow: 1;
            text-align: center;
        }

        .save-btn {
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            color: #007bff; /* Cambia el color si lo deseas */
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: auto;
        }

        .save-btn i {
            font-size: 16px; /* Tamaño del ícono */
        }
    </style>
@endsection
@section('tabla')
    <!-- Hero -->
    @php
        $cliente=config('app.CLIENTE');
        //Estas listas la intención es que tengan los valores que se estimen necesarios, ojalá que puedan ser definidas en el controller
        $anho = [];
        $anho['mec'] = __('messages.mec');
        for ($i=1; $i < intval(date('m')); $i++) { 
            $expressionResult = match ($i) {
                1 => $anho['01'] = 'Enero',
                2 => $anho['02'] = 'Febrero',
                3 => $anho['03'] = 'Marzo',
                4 => $anho['04'] = 'Abril',
                5 => $anho['05'] = 'Mayo',
                6 => $anho['06'] = 'Junio',
                7 => $anho['07'] = 'Julio',
                8 => $anho['08'] = 'Agosto',
                9 => $anho['09'] = 'Septiembre',
                10 => $anho['10'] = 'Octubre',
                11 => $anho['11'] = 'Noviembre',
            };
        }
        $anho['ytd'] = __('messages.ytd');
        $vista = json_encode(['res' => __('messages.resumen'), 'det' => __('messages.detalle')]);
        $anho = json_encode($anho);
        $true = true;

    @endphp

    <div class="row bg-white" style="border-radius: 0px 0px 5px 5px !important; margin-left: 10px">
        <div class="col col-md-auto">
            <x-selector-meses id="fltr_mes_cventas" idselect="f_mes_cventas_ini" :meses="$meses" class="fltr_periodo_cventas">
                <x-slot name="texto">
                    Periodo
                </x-slot>
            </x-selector-meses>
        </div>
        @php
            $userRol = Auth::user()->rol;
        @endphp
        @if ($userRol <= 2)
            <div class="col col-md-auto">
                <div id="selector-vendedor" class="col col-md-auto obj_filtro form-group font-weight-normal"> 
                    <div style="text-align:center; font-size: 1.0em;color:#566573">
                            Vendedor
                    </div>
                    <label style="">
                        <select id="f_vendedor_cventas" name="f_vendedor_cventas" class="flt form-control select2" data-toggle="select2">
                                <option value="0" selected>Todos</option>
                                @foreach ($vendedoresComisiones as $value)
                                    <option value="{{strval($value)}}">{{$value}}</option>
                                @endforeach
                        
                        </select>
                    </label>
                    <style>
                        label{
                            font-weight: inherit!important;
                        }
                    </style>
                </div>
            </div>
        @endif
        
        <x-boton-actualizar onclick="getComisionesVentas('{{$cliente}}')"/>

        <x-infobox tamano="25px" texto="" modal="tabla_comisiones_ventas"/>

        <div class="modal fade bd-example-modal-lg" id="tabla_comisiones_ventas" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Tabla de comisiones de ventas</h5>     
                    </div>
                        <Table id="tabla_comisiones" class="table table-striped table-bordered dt-responsive nowrap w-100">
                            <thead>
                                <tr>
                                    <th>Costos desde</th>
                                    <th>Costos hasta</th>
                                    <th>Comisión</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>$100.000</td>
                                    <td>$150.000</td>
                                    <td>3%</td>
                                </tr>
                                <tr>
                                    <td>$151.000</td>
                                    <td>$390.000</td>
                                    <td>3,2%</td>
                                </tr>
                                <tr>
                                    <td>$391.000</td>
                                    <td>$800.000</td>
                                    <td>3,5%</td>
                                </tr>
                                <tr>
                                    <td>$801.000</td>
                                    <td>$1.250.000 o más</td>
                                    <td>4%</td>
                            </tbody>
                        </Table>
                    </div>
                </div>
            </div>
        <x-tabla id="cventas" :favoritosDisabled="$true">
            
        </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>
        var vista = "1";
        $(document).ready(() => {
            $('#f_vista').select2();
        });
        var usoResize = false;

        let periodo = parseInt("{{date('Ym')}}");
        $('#f_mes_cventas_ini').val(periodo).trigger('change');


        function openModal(modal){
            $("#"+modal).modal("show");
        }
    </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="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>

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

    <script src="{{asset('js\vendor\dataTables.natural.js')}}"></script>
@endsection