@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 rel="stylesheet" href="{{asset('css/fixedColumns.bootstrap5.min.css')}}">
<link rel="stylesheet" href="{{asset('css/fixedHeader.bootstrap5.min.css')}}">
    <style>
        body[data-leftbar-compact-mode="condensed"]:not(.authentication-bg){
            min-height: 0 !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;
        }
        .dataTables_scroll {
            clear: both;
        }

        .dataTables_scrollBody {
            *margin-top: -1px;
            -webkit-overflow-scrolling: touch;
        }

        .select2-container--open{
            z-index:10000
        }

        .checkDiaCorto{
            width:64px;
            margin-left:2px;
        }

        .row{
            margin-bottom:25px;
        }
        .invalid-input{
            border-color: #fa5c7c !important;
        }
        .invalid-tab{
            color:red !important;
        }
        .bootstrap-timepicker-widget{
            position: static !important;
        }
        .form-container{
            margin-top:15px !important;
        }
    </style>
@endsection
@section('php')
    @php
        session()->forget('reporte802'); // Borrar sesión
        $cliente = config('app.CLIENTE');
        
        $_k = hash('sha512', date('Ymd').auth()->user()->id);

        $utc_time = 'UTC-3';
        if(date('I') == 0){
            $utc_time = 'UTC-4';
        }

        $estados = json_encode(["" => __('messages.todos'), 1 => __('messages.activo'), 0 => __('messages.inactivo')]);

        $disabled_semilla = 'disabled';
        $d_none_semilla = 'd-none';
        if(auth()->user()->usuario == 'usuario_prueba'){
            $disabled_semilla = '';
            $d_none_semilla = '';
        }

        $alias_kam = (isset($filtrosAvAlias['kam'])) ? __('messages.'.$filtrosAvAlias['kam']) : 'KAM';
        $alias_supervisor = (isset($filtrosAvAlias['supervisor'])) ? __('messages.'.$filtrosAvAlias['supervisor']) : 'Supervisor';
        $alias_vendedor = (isset($filtrosAvAlias['vendedor'])) ? __('messages.'.$filtrosAvAlias['vendedor']) : 'Vendedor';
        $alias_reponedor = (isset($filtrosAvAlias['reponedor'])) ? __('messages.'.$filtrosAvAlias['reponedor']) : 'Reponedor';
        
        $roles = json_encode([null => 'Ninguno', '0' => 'Gerente', '1' => $alias_kam, '2' => $alias_supervisor, '3' => $alias_vendedor, '4' => $alias_reponedor, '6' => 'Perfilado']);

        $d_none_movil = '';
        if(!$movilStatus) $d_none_movil = ' d-none';
        
        $true = true;
    @endphp
@endsection
@section('tabla')
<script>var _k = "{{$_k}}";</script>
<div class="row bg-white" style="border-radius: 0px 0px 5px 5px !important; margin-left: 10px">
    <x-tabla id="usertable" :favoritosDisabled="$true">
        <x-selector-generico id="f_estado_usertable2" idselect="f_estado_usertable" :salida="$estados" style="max-width: 120px;min-width: 120px;width: 120px;">
            <x-slot name="texto">
                {{__('messages.estado')}}
            </x-slot>
        </x-selector-generico>

        <div class="col col-md-auto obj_filtro form-group font-weight-normal d-flex align-items-center">
            <label class="align-items-center d-flex" style="padding-top: 15px">
                <input type="checkbox" id="f_eliminados_usertable" value="eliminados" style="margin-right: 5px"> Incluir Eliminados
            </label>
        </div>
        
        <x-boton-actualizar onclick="getUsers('{{$cliente}}')"/>
        <x-infobox tamano="25px" texto="" modal="info_modal"/>
        <div style="margin-top: 20px;" class="ms-auto col-md-auto obj_filtro form-group">
            <button type="button" class="align-middle lh-1 col-md-auto ms-auto btn btn-primary" data-bs-toggle="modal" data-bs-target="#crearUsuario"
                data-bs-id="0"
                data-bs-usuario=""
                data-bs-nombre=""
                data-bs-email=""
                data-bs-telefono=""
                data-bs-cargo=""
                data-bs-rol=""
                data-bs-activo="1"
                data-bs-save="0"
                onClick="setModalParams(this)"
            >
                <i class="fas fa-plus"></i> {{__('messages.añadir')}}
            </button>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="crearUsuario" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true" style="background-color:transparent">
            <div class="w-100 justify-content-center" id="f_carga_crearUsuario" 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="crearUsuario_cont" class="modal-content" style="min-width:100%">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalLabel">Administración de Usuarios</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>

                    <div class="tab-content">
                        <div class="tab-pane active" id="datos-b1">
                            <div class="row">
                                <input type="hidden" id="f_id">

                                <div class="col col-sm-12 col-md-12 form-container">
                                    <div class="form-group">
                                        <label for="f_usuario">Nombre de Usuario</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_usuario" placeholder="Nombre de Usuario">
                                        </div>
                                        <div class="invalid-feedback" id="f_usuario_invalid">
                                            Por favor ingrese un Nombre de Usuario.
                                        </div>
                                    </div>
                                </div>

                                <div class="col col-sm-12 col-md-12 form-container">
                                    <div class="form-group">
                                        <label for="f_nombre">Nombre</label>
                                        <div data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="El nombre influye en la representación de {{$alias_kam}}, {{$alias_supervisor}}, {{$alias_vendedor}} y {{$alias_reponedor}}." title="Información">
                                            <input type="text" class="form-control" id="f_nombre" placeholder="Nombre">
                                        </div>
                                        <div class="invalid-feedback" id="f_nombre_invalid">
                                            Por favor ingrese un nombre.
                                        </div>
                                    </div>
                                </div>

                                <div class="col col-sm-12 col-md-12 form-container">
                                    <div class="form-group">
                                        <label for="f_email">Correo</label>
                                        <input type="text" class="form-control" id="f_email" placeholder="Correo">
                                        <div class="invalid-feedback" id="f_email_invalid">
                                            Por favor ingrese un Correo válido.
                                        </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 class="col col-sm-12 col-md-12 form-container">
                                    <div class="form-group">
                                        <label for="f_cargo">Cargo</label>
                                        <input type="text" class="form-control" id="f_cargo" placeholder="Cargo">
                                        <div class="invalid-feedback" id="f_cargo_invalid">
                                            Por favor ingrese un Cargo.
                                        </div>
                                    </div>
                                </div>

                                <div class="col col-sm-12 col-md-12 form-container">
                                    <div class="form-group">
                                        <label for="f_rol">Rol</label>
                                        <x-selector-generico id="f_rol2" idselect="f_rol" :salida="$roles" style="max-width: 120px;min-width: 120px;width: 120px;" selected="">
                                        </x-selector-generico>
                                    </div>
                                </div>

                                <div class="col col-sm-4 col-md-4 form-container">
                                    <div class="btn-group" role="group">
                                        <input type="checkbox" class="btn-check" id="f_activo" autocomplete="off">
                                        <label class="btn btn-outline-success" for="f_activo">Acceso Web</label>
                                    </div>
                                </div>
                                <div class="col col-sm-3 col-md-3 form-container">
                                </div>
                                <div class="col col-sm-4 col-md-4 form-container {{$d_none_movil}}">
                                    <div class="btn-group" role="group">
                                        <input type="checkbox" class="btn-check" id="f_activo_movil" autocomplete="off">
                                        <label class="btn btn-outline-success" for="f_activo_movil">Acceso Móvil</label>
                                    </div>
                                </div>

                                <div class="col col-sm-6 col-md-6 form-container">
                                    <div id="regenerarClave" class="form-group d-none">
                                        <input type="checkbox" class="btn-check" id="f_regenerar" autocomplete="off">
                                        <label class="btn btn-outline-primary" for="f_regenerar">Regenerar Clave</label>
                                    </div>
                                    <div id="seedNuevaClave" class="form-group {{$d_none_semilla}}">
                                        <input type="text" class="form-control" id="f_pass" placeholder="Semilla" {{$disabled_semilla}}></input>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="invalid-feedback" id="alertCrearUsuario"></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" onClick="createOrUpdateUser('{{$cliente}}')">{{__('messages.crear')}}</button>
                    <button type="button" id="saveUser" class="btn btn-success d-none" onClick="createOrUpdateUser('{{$cliente}}')">{{__('messages.guardar')}}</button>
                </div>
            </div>
            </div>
        </div>

        <div style="margin-top: 20px;" class="ms-auto col-md-auto obj_filtro form-group">
            <button type="button" class="align-middle lh-1 col-md-auto ms-auto btn btn-primary" data-bs-toggle="modal" data-bs-target="#logs">
                <i class="fas fa-clipboard-list"></i></i> Logs
            </button>
        </div>

        <!-- Modal Logs -->
        <div class="modal fade" id="logs" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true" style="background-color:transparent">
            <div class="modal-dialog modal-xl" style="height: 90% !important;">
                <div id="logsmodal_cont" class="modal-content" style="min-width:100%; height: 90% !important;">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalLabel">Logs Cambios</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <x-tabla id="logs" :favoritosDisabled="$true">
                            <x-selector-dias idpadre="logs" />
                            <x-boton-actualizar onclick="getLogsUsuarios('{{$cliente}}')"/>
                        </x-tabla>
                    </div>
                </div>
            </div>
        </div>

       
        <div class="modal fade bd-example-modal-xl" id="info_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="">Administración de usuarios</h5>
                    </div>
                    <div class="modal-body">
                        Seleccione el usuario cuya credencial desea modificar. Para ello, haga clic en el ícono de edición situado a la izquierda del registro.
                        <br>
                        <div class="text-center">
                            <img src="{{asset('images/edit-user.png')}}" class="img-fluid" alt="Responsive image">
                        </div>
                        <br>
                        Se abrirá un modal donde podrá gestionar las credenciales.
                        <br>
                        <div class="text-center">
                            <img src="{{asset('images/edit-user-form.png')}}" class="img-fluid" alt="Responsive image">
                        </div>
                        <br>
                        Comportamiento de los botones de acceso:

                        <ul>
                            <li><b>Acceso WEB:</b> El botón con fondo verde significa que el usuario tendrá acceso a la plataforma WEB de BAMBU.</li>
                            <li><b>Acceso MÓVIL:</b> El botón con fondo verde significa que el usuario tendrá acceso a la aplicación móvil de BAMBU.</li>
                        </ul>
                        <br>
                        Botón de regenerar clave:
                        <ul>
                            <li>Si desea regenerar la clave del usuario, seleccione el botón y guarde los cambios.</li>
                        </ul>

                        Si la contraseña es modificada, el usuario recibirá un correo electrónico con la nueva clave.
                    </div>
                </div>
            </div>
        </div>

    </x-tabla>
</div>
@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?v=20250206")}}"></script>
    <script src="{{asset("js/custom/reporteriaGetter.js?v=20250302")}}"></script>
    <script src="{{ asset('js\app.js') }}"></script>

    <script>
        const yourDate = new Date();
    </script>
    <script>
        let ids = ['usertable'];
        $(document).ready(() => {
            let filtros = ['holding'];
            for(let filtro of filtros) {
                for(let id of ids) {
                    multiSelect(filtro, id, "{{__('messages.seleccionar')}}");
                }
            }
            multiSelect('f_frecuencia', undefined, "{{__('messages.seleccionar')}}");
        });

        function setModalParams(element){
            // Quitar en rojo
            ['f_usuario', 'f_nombre', 'f_email', 'f_telefono', 'f_cargo'].forEach(function(item){
                markAsValidInput(item);    
            });

            ['id', 'usuario', 'nombre', 'email', 'telefono', 'cargo', 'rol'].forEach(function(item){
                var elementValue = element.getAttribute('data-bs-'+item);
                if(item != 'rol'){
                    document.getElementById('f_'+item).value = elementValue;
                }else{
                    updateSelect2(item, elementValue)
                }
            });

            if(element.getAttribute('data-bs-save') == 1){
                document.getElementById('f_usuario').disabled = true;
            }else{
                document.getElementById('f_usuario').disabled = false;
            }
            
            // Estado Web
            activo = element.getAttribute('data-bs-activo');
            if(activo == 1){
                document.getElementById('f_activo').checked = true;
            }else{
                document.getElementById('f_activo').checked = false;
            }

            // Estado Móvil
            activo_movil = element.getAttribute('data-bs-movil');
            if(activo_movil == 1){
                document.getElementById('f_activo_movil').checked = true;
            }else{
                document.getElementById('f_activo_movil').checked = false;
            }

            // Random Seed
            var randomSeed = Math.floor(Math.random() * 9).toString() + Math.floor(Math.random() * 9).toString() + Math.floor(Math.random() * 9).toString() + Math.floor(Math.random() * 9).toString();
            document.getElementById('f_pass').value = randomSeed;

            // Deshabilitar siempre el Rengerar Clave
            document.getElementById('f_regenerar').checked = false;

            // Botón Crear/Guardar
            if(element.getAttribute('data-bs-save')==true){
                document.getElementById('createUser').classList.add('d-none');
                document.getElementById('saveUser').classList.remove('d-none');
                document.getElementById('deleteUser').classList.remove('d-none');

                document.getElementById('regenerarClave').classList.remove('d-none');
                //document.getElementById('seedNuevaClave').classList.add('d-none');
            }else{
                document.getElementById('createUser').classList.remove('d-none');
                document.getElementById('saveUser').classList.add('d-none');
                document.getElementById('deleteUser').classList.add('d-none');

                //document.getElementById('seedNuevaClave').classList.remove('d-none');
                document.getElementById('regenerarClave').classList.add('d-none');
            }
        }

        function changeUserStatus(e){
            var target = e.target;
            var userId = target.getAttribute('data-bs-userid');
            var userName = target.getAttribute('data-bs-usuario');
            target.disabled = true;
            $.ajax({
                url: "/changeUserStatus",
                method: "post",
                dataType: "html",
                crossDomain: false,
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                data: {
                    userId: userId,
                    cliente: cliente,
                },
            }).done(function(data, textStatus, jqXHR) {
                target.disabled = false;
                var nuevoEstado = 'Activo';
                if(!target.checked) nuevoEstado = 'Inactivo';
                document.getElementById('estado_'+userId).innerHTML = nuevoEstado;
            }).fail(function( jqXHR, textStatus, errorThrown ) {
                alert('Error al actualizar el usuario ' + userName);
                target.checked = !target.checked;
                target.disabled = false;
            });
        }

        function getLogsUsuarios(cliente){
            let vista = $('#f_log_vista').val();
            document.getElementById("f_carga_logs").style.display = "flex";
            let [ini, fin] = $('#f_dia_logs_ini').val().split(' - ');
            $("#logs_cont").addClass("d-none");
            $.ajax({
                url: "/getLog",
                method: "post",
                dataType: "html",
                crossDomain: false,
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                data: {
                    vista: vista,
                    cliente: cliente,
                    ini: ini,
                    fin: fin,
                },
            }).done(function(data, textStatus, jqXHR) {
                today = new Date();

                let cont = document.getElementById("logs_cont");
                cont.innerHTML = data;
                let tabla = document.querySelector("#logs_cont table");
                tabla.id = "logs_tabla";
                document.getElementById("f_carga_logs").style.display = "none";
                $("#logs_cont").removeClass("d-none");
                $("#logs").find("#aplicarfiltrosparent").hide();
                changeStateFiltrosAv("logs", true);
                var tab = $('#logs_tabla').DataTable({
                    ...(userLanguage == 'es') && {
                        language: configLocale,
                    },
                    pageLength: 25,
                    lengthMenu: [[25, 50, 100], [25, 50, 100]],
                    autoWidth: true,
                    responsive: false,
                    scrollY: "500px",
                    scrollX: true,
                    scrollCollapse: true,
                    fixedColumns: {
                        leftColumns: 2,
                    },
                    order: [[ 3, "desc" ]],
                    buttons: [
                        { extend: 'excel', className: 'boton btn btn-sm', title: 'Log Cambio Maestras '+today.getDate().toString().padStart(2,"0")+'-'+
                        (today.getMonth()+1).toString().padStart(2,"0")+'-'+today.getFullYear() },
                        { extend: 'copy', className: 'boton btn btn-sm' },
                        { extend: 'csv', className: 'boton btn btn-sm', title: 'Log Cambio Maestras '+today.getDate().toString().padStart(2,"0")+'-'+
                        (today.getMonth()+1).toString().padStart(2,"0")+'-'+today.getFullYear() }
                    ],
                    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 ) {
                    
                });
                document.getElementById("f_carga_logs").style.display = "none";
                $("#logs_cont").removeClass("d-none");
            }).fail(function( jqXHR, textStatus, errorThrown ) {
                document.getElementById("f_carga_logs").style.display = "none";
                $("#logs_cont").removeClass("d-none");
            });
        }
        
        let ahora = new Date();
        let dias = 30;
        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()-dias)),
            endDate: ahora
        };

        $("#f_dia_logs_ini").daterangepicker(congifDate);

        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="{{asset('js/dataTables.fixedColumns.min.js')}}"></script>
    <script src="{{asset('js/dataTables.fixedHeader.min.js')}}"></script>
    <link href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-dark@4/dark.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>
@endsection