@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;
        }
    </style>
@endsection
@section('tabla')
    <!-- Hero -->
    @php
        $cliente=config('app.CLIENTE');
        $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="getReponedoresTable('{{$cliente}}')"/>

        <x-tabla id="cventas" :favoritosDisabled="$true">
            
        </x-tabla>

        <div class="modal fade" id="editarReponedor" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true" style="background-color:transparent">
            <div class="w-100 justify-content-center" id="f_carga_editarReponedor" style="height: 400px; display: none;">
                <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
            </div>
            <div class="modal-dialog modal-md">
                <div id="editarReponedor_cont" class="modal-content" style="min-width:100%">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalLabel">Administración de Reponedores</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                <div class="modal-body">
                    <ul class="nav nav-tabs nav-bordered mb-3">
                        <li class="nav-item">
                            <a id="datos-tab" href="#datos-b1" data-bs-toggle="tab" aria-expanded="false" class="nav-link active">
                                <i class="mdi mdi-home-variant d-md-none d-block"></i>
                                <span class="d-none d-md-block">Datos</span>
                            </a>
                        </li>
                    </ul>

                    <!-- checkbox for local sin reponedor -->
                    <div class="form-check form-check-inline" style="display: flex;">
                        <input class="form-check form-check-input" type="checkbox" id="localSinReponedor" value="localSinReponedor">
                        <label class="form-check form-check-label" for="localSinReponedor">Local sin reponedor</label>
                    </div>
                    <!-- end checkbox for local sin reponedor -->
                    <br>
                    <div class="tab-content">
                        <div class="tab-pane active" id="datos-b1">
                            
                                <input type="hidden" id="f_id">

                                <div class="col col-sm-12 col-md-12 form-container">
                                    <div class="form-group">
                                        <label for="f_local">Nombre Local</label>
                                        <div data-bs-toggle="popover" data-bs-trigger="hover">
                                            <input type="text" class="form-control" id="f_local" placeholder="Nombre de Local" disabled>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="form-group col-md-6">
                                        <label for="f_direccion">Cod. Local</label>
                                        <div data-bs-toggle="popover" data-bs-trigger="hover">
                                            <input type="text" class="form-control" id="f_direccion" placeholder="Cod. Local" disabled>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="f_cadena">Cadena</label>
                                        <div data-bs-toggle="popover" data-bs-trigger="hover">
                                            <input type="text" class="form-control" id="f_cadena" placeholder="Cadena" disabled>
                                        </div>
                                    </div>
                                </div>

                               @if ($userRol <= 2)
                                <div class="col col-sm-12 col-md-12 form-container">
                                    <div class="form-group font-weight-normal"> 
                                        <label for="f_vendedor">Vendedor</label>
                                        <select class="form-control" id="f_vendedor">
                                            @foreach ($vendedoresComisiones as $value)
                                                <option value="{{strval($value)}}">{{$value}}</option>
                                            @endforeach
                                            <option value="0">NUEVO VENDEDOR</option>
                                        </select>
                                        <input id="nuevo_f_vendedor" type="text" class="form-control d-none" placeholder="Nuevo vendedor">
                                    </div>
                                </div>
                                @endif

                                <div class="col col-sm-12 col-md-12 form-container">
                                    <div class="form-group">
                                        <label for="f_reponedor">Nombre de reponedor</label>
                                        <div data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Mínimo 5 caracteres alfanuméricos." title="Información">
                                            <input type="text" class="form-control" id="f_reponedor" placeholder="Nombre de Reponedor">
                                        </div>
                                        <div class="invalid-feedback" id="f_reponedor_invalid">
                                            Por favor ingrese un Nombre de reponedor.
                                        </div>
                                    </div>
                                </div>

                                <div class="col col-sm-12 col-md-12 form-container">
                                    <div class="form-group">
                                        <label for="f_rut">Rut</label>
                                        <div data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="" title="Información">
                                            <input type="text" class="form-control" id="f_rut" placeholder="Rut">
                                        </div>
                                        <div class="invalid-feedback" id="f_rut_invalid">
                                            Por favor ingrese un Rut.
                                        </div>
                                    </div>
                                </div>

                                <div class="col col-sm-12 col-md-12 form-container">
                                    <div class="form-group">
                                        <label for="f_cuenta">Cuenta</label>
                                        <input type="text" class="form-control" id="f_cuenta" placeholder="Cuenta">
                                        <div class="invalid-feedback" id="f_cuenta_invalid">
                                            Por favor ingrese un Cuenta.
                                        </div>
                                    </div>
                                </div>

                                <div class="col col-sm-12 col-md-12 form-container">
                                    <div class="form-group">
                                        <label for="f_banco">Banco</label>
                                        <input type="text" class="form-control" id="f_banco" placeholder="Banco">
                                        <div class="invalid-feedback" id="f_banco_invalid">
                                            Por favor ingrese un Banco.
                                        </div>
                                    </div>
                                </div>

                                <div class="col col-sm-12 col-md-12 form-container">
                                    <div class="form-group">
                                        <label for="f_telefono">Teléfono</label>
                                        <input type="text" class="form-control" id="f_telefono" placeholder="Teléfono">
                                        <div class="invalid-feedback" id="f_telefono_invalid">
                                            Por favor ingrese un Teléfono.
                                        </div>
                                    </div>
                                </div>
                            </div>
                    
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="invalid-feedback" id="alerteditarReponedor"></div>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{__('messages.cerrar')}}</button>
                    <button type="button" id="deleteUser" class="btn btn-danger d-none" onClick="deleteUser('{{$cliente}}')">{{__('messages.eliminar')}}</button>
                    <button type="button" id="createUser" class="btn btn-success d-none" onClick="createOrUpdateUser('{{$cliente}}')">{{__('messages.crear')}}</button>
                    <button type="button" id="saveUser" class="btn btn-success" onClick="createOrUpdateReponedor('{{$cliente}}')">{{__('messages.guardar')}}</button>
                </div>
            </div>
            </div>
        </div>
    </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");
        }

        function getReponedoresTable(cliente) {
            var periodo = $('#f_mes_cventas_ini').val();
            var vendedor = $('#f_vendedor_cventas').val();
            document.getElementById("f_carga_cventas").style.display = "flex";
            $("#cventas_cont").addClass("d-none");
            return $.ajax({
                url: "/listarReponedores",
                method: "post",
                dataType: "html",
                crossDomain: false,
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    periodo: periodo,
                    vendedor: vendedor,
                },
            })
            .done(function (data) {
                vista = $('#f_vista').val();
                let cont = document.getElementById("cventas_cont");
                cont.innerHTML = data;
                var tabla = document.querySelector("#cventas_cont table");
                if(tabla){
                    tabla.id = "cventas_tabla";
                }else{
                    tabla = document.createElement("table");
                    cont.appendChild(tabla);
                }
                document.getElementById("f_carga_cventas").style.display = "none";
                $("#cventas_cont").removeClass("d-none");

                var tab = $('#cventas_tabla').DataTable({
                ...(userLanguage == 'es') && {
                        language: configLocale,
                    },
                    pageLength: 25,
                    lengthMenu: [[25, 50, 100], [25, 50, 100]],
                    responsive: false,
                    scrollY: true,
                    scrollX: true,
                    columnDefs: [
                        { type: 'natural', targets: "_all" }
                    ],
                    order: [],
                    buttons: [
                        { extend: 'excel', className: 'boton btn btn-sm', title: '',
                            exportOptions: {
                                format: {
                                    body: function (data, row, column, node) {
                                        // Eliminar comas y puntos de los números excepto columna 10
                                        return column != 9 ? data.replace(/[,.]/g, '') : data;
                                    }
                                }
                            }

                        },
                        { extend: 'copy', className: 'boton btn btn-sm' },
                        { extend: 'csv', className: 'boton btn btn-sm' }
                    ],
                    dom: "<'row'<'col-sm-12 col-md-4'f><'col-sm-12 col-md-4'<'text-center bg-body-light py-2 mb-2'l>>"+
                    "<'col-sm-12 col-md-4 align-items-center d-flex justify-content-end'B>><'row'<'col-sm-12 tables'tr>><'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>"
                });
                tab.on('buttons-action', function ( e, buttonApi, dataTable, node, config ) {
                    
                });
                var sBrowser, sUsrAg = navigator.userAgent;

                if (sUsrAg.indexOf("Firefox") > -1) {
                    const scrollbody = document.querySelector('.dataTables_scrollBody');
                    if(!usoResize){
                        $( window ).resize(function() {
                            setTimeout(function(){$('.dataTables_scrollBody').width(($('#cventas_tabla').width()+scrollbody.offsetWidth - scrollbody.clientWidth)+'px');},100);
                        });
                        usoResize = true;
                    }
                    $('.dataTables_scrollBody').width(($('#cventas_tabla').width()+scrollbody.offsetWidth - scrollbody.clientWidth)+'px');
                }
            })
            .fail(function( jqXHR, textStatus, errorThrown ) {
                // console.log(errorThrown);
                document.getElementById("f_carga_cventas").style.display = "none";
                $("#cventas_cont").removeClass("d-none");
            });
        }

        function setModalParams(reponedor){
            document.getElementById("editarReponedor_cont").style.display = "block";
            if(document.getElementById("f_vendedor")){
                document.getElementById("f_vendedor").classList.remove("d-none");
                document.getElementById("nuevo_f_vendedor").classList.add("d-none");
            }
            if(reponedor.getAttribute('data-bs-vendedor') != null){
                $('#f_vendedor').val(reponedor.getAttribute('data-bs-vendedor'));
            }
            document.getElementById("f_local").value = reponedor.getAttribute('data-bs-local');
            document.getElementById("f_direccion").value = reponedor.getAttribute('data-bs-cod_local');
            document.getElementById("f_cadena").value = reponedor.getAttribute('data-bs-cadena');
            document.getElementById("f_reponedor").value = reponedor.getAttribute('data-bs-reponedor');
            document.getElementById("f_rut").value = reponedor.getAttribute('data-bs-rut');
            document.getElementById("f_cuenta").value = reponedor.getAttribute('data-bs-cuenta');
            document.getElementById("f_banco").value = reponedor.getAttribute('data-bs-banco');
            document.getElementById("f_telefono").value = reponedor.getAttribute('data-bs-telefono');
            document.getElementById("f_id").value = reponedor.getAttribute('data-bs-id_local');
        }

        function createOrUpdateReponedor(cliente){
            document.getElementById("f_carga_editarReponedor").style.display = "flex";
            document.getElementById("editarReponedor_cont").style.display = "none";
       
            var local = document.getElementById("f_local").value;
            var reponedor = document.getElementById("f_reponedor").value;
            var rut = document.getElementById("f_rut").value;
            var cuenta = document.getElementById("f_cuenta").value;
            var banco = document.getElementById("f_banco").value;
            var telefono = document.getElementById("f_telefono").value;
            var id_local = document.getElementById("f_id").value;
            var vendedor = $('#f_vendedor').val()==0 ? document.getElementById("nuevo_f_vendedor").value : $('#f_vendedor').val();

            //if checkbox is not checked
            if(!document.getElementById("localSinReponedor").checked){
                if(reponedor.length < 5){
                    document.getElementById("f_reponedor_invalid").style.display = "block";
                    document.getElementById("f_carga_editarReponedor").style.display = "none";
                    document.getElementById("editarReponedor_cont").style.display = "block";
                    return;
                }else{
                    document.getElementById("f_reponedor_invalid").style.display = "none";
                }
                if(rut.length < 5){
                    document.getElementById("f_rut_invalid").style.display = "block";
                    document.getElementById("f_carga_editarReponedor").style.display = "none";
                    document.getElementById("editarReponedor_cont").style.display = "block";
                    return;
                }else{
                    document.getElementById("f_rut_invalid").style.display = "none";
                }
                if(cuenta.length < 1){
                    document.getElementById("f_cuenta_invalid").style.display = "block";
                    document.getElementById("f_carga_editarReponedor").style.display = "none";
                    document.getElementById("editarReponedor_cont").style.display = "block";
                    return;
                }else{
                    document.getElementById("f_cuenta_invalid").style.display = "none";
                }
                if(banco.length < 5){
                    document.getElementById("f_banco_invalid").style.display = "block";
                    document.getElementById("f_carga_editarReponedor").style.display = "none";
                    document.getElementById("editarReponedor_cont").style.display = "block";
                    return;
                }else{
                    document.getElementById("f_banco_invalid").style.display = "none";
                }
                if(telefono.length < 5){
                    document.getElementById("f_telefono_invalid").style.display = "block";
                    document.getElementById("f_carga_editarReponedor").style.display = "none";
                    document.getElementById("editarReponedor_cont").style.display = "block";
                    return;
                }else{
                    document.getElementById("f_telefono_invalid").style.display = "none";
                }
            }
            $.ajax({
                url: "/updateReponedor",
                method: "post",
                dataType: "json",
                crossDomain: false,
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    local: local,
                    reponedor: reponedor,
                    rut: rut,
                    cuenta: cuenta,
                    banco: banco,
                    telefono: telefono,
                    id_local: id_local,
                    vendedor: vendedor,
                },
            }).done(function (data) {
                if(data.success){
                    getReponedoresTable(cliente);
                    document.getElementById("f_carga_editarReponedor").style.display = "none";
                    $("#editarReponedor").modal("hide");
                    //show a sweet alert success message
                    Swal.fire({
                        icon: 'success',
                        title: 'Datos guardados correctamente',
                        showConfirmButton: false,
                        timer: 1500
                    });                    
                }else{
                    document.getElementById("f_carga_editarReponedor").style.display = "none";
                    document.getElementById("alerteditarReponedor").innerHTML = data.msg;
                }
            }).fail(function( jqXHR, textStatus, errorThrown ) {
                document.getElementById("f_carga_editarReponedor").style.display = "none";
                document.getElementById("alerteditarReponedor").innerHTML = "Error al guardar los datos.";
            });
        }

        //listener para el checkbox de local sin reponedor
        document.getElementById("localSinReponedor").addEventListener("change", function(){
            if(this.checked){
                document.getElementById("f_reponedor").value = "Local sin reponedor";
                document.getElementById("f_reponedor").disabled = true;
                document.getElementById("f_rut").value = "";
                document.getElementById("f_rut").disabled = true;
                document.getElementById("f_cuenta").value = "";
                document.getElementById("f_cuenta").disabled = true;
                document.getElementById("f_banco").value = "";
                document.getElementById("f_banco").disabled = true;
                document.getElementById("f_telefono").value = "";
                document.getElementById("f_telefono").disabled = true;
            }else{
                document.getElementById("f_reponedor").value = "";
                document.getElementById("f_reponedor").disabled = false;
                document.getElementById("f_rut").value = "";
                document.getElementById("f_rut").disabled = false;
                document.getElementById("f_cuenta").value = "";
                document.getElementById("f_cuenta").disabled = false;
                document.getElementById("f_banco").value = "";
                document.getElementById("f_banco").disabled = false;
                document.getElementById("f_telefono").value = "";
                document.getElementById("f_telefono").disabled = false;
            }
        });

        //if f_vendedor  existe, add on change event for f_vendedor select, if value is 0, show input for new vendedor and hide select
        if(document.getElementById("f_vendedor")){
            document.getElementById("f_vendedor").addEventListener("change", function(){
                if(this.value == 0){
                    document.getElementById("f_vendedor").classList.add("d-none");
                    document.getElementById("nuevo_f_vendedor").classList.remove("d-none");
                }
            });
        }

    </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