@extends('header_nuevo_generico')
@section('main')
<div class="container-fluid pt-5 mt-5">
    <!-- -->
    <div class="row justify-content-center my-2">
        <div class="col-xl-12 col-lg-12 col-md-12">
            <!-- <h3 class="text-center text-fidelitas">traducir('Panel de Usuarios', 'Panel de Usuarios')</h3> -->
            <h3 class="text-center text-fidelitas">Panel de Usuarios</h3>
        </div>
    </div>
    <!-- -->
    <div class="row justify-content-center mt-3">
        <div class="col-12">
            <div class="col-xl-3 col-lg-6 col-md-12 mb-3 text-start">
                <!-- <a class="btn btn-outline-fidelitas-secondary nuevo-usuario"><i class="bi bi-person-plus"></i>
                    traducir('nuevo_usuario', 'Nuevo Usuario')</a> -->
                <a class="btn btn-outline-fidelitas-secondary nuevo-usuario"><i class="bi bi-person-plus"></i>
                    Nuevo Usuario</a>
            </div>
            <input type="hidden" id="token" value="{{ csrf_token() }}">
            <div id="fancyTablaUsuarios"></div>
        </div>
    </div>
</div>
<!-- -->
<div class="modal fade" id="modalAgregarNuevoUsuario">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="title_usuario"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <!-- -->
            <div class="modal-body" id="body_usuario">
                <form name="alta_usuario" id="alta_usuario" class="form-signin">
                    <!----->
                    <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
                    <input type="hidden" name="accion" id="accion" value="A">
                    <input type="hidden" name="user_id" id="user_id" value="">
                    <input type="hidden" name="estado_login" id="estado_login" value="">
                    <!----->
                    <div class="row justify-content-center my-3">
                        <!----->
                        <div class="col-12 col-md-6">
                            <!-- <label class="form-label text-fidelitas"
                                for="login">traducir('Login/Usuario','Login/Usuario')</label> -->
                            <label class="form-label text-fidelitas" for="login">Login/Usuario</label>
                            <input name="login" type="text" id="login" class="form-control form-control-sm"
                                placeholder="Login" data-format="otro" value="">
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="col-12 col-md-6">
                            <label class="form-label text-fidelitas">Preferencias</label>
                            <br>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" name="es_iv" id="es_iv" value="1">
                                <label class="form-check-label" for="es_iv">Inquiro</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" name="es_imp" id="es_imp" value="1">
                                <label class="form-check-label" for="es_imp">Imperium</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" name="es_led" id="es_led" value="1">
                                <label class="form-check-label" for="es_led">Led</label>
                            </div>
                        </div>
                        <!-- <div class="col-12 col-md-6">
                            <label class="form-label text-fidelitas" for="plataforma">traducir('plataforma','Plataforma')</label>            
                            <select name="plataforma" id="plataforma" class="form-select form-select-sm required">
                                <option value="" selected>traducir('seleccione_plataforma','Seleccione plataforma')</option>
                                <option value="10">INQUIRO</option>
                                <option value="47">LED</option>
                                <option value="73">IMPERIUM</option>
                            </select>
                            <div class="invalid-feedback"></div>
                        </div> -->
                    </div>
                    <!----->
                    <div class="row justify-content-center my-3">
                        <div class="col-12 col-md-6">
                            <!-- <label class="form-label text-fidelitas"
                                for="first_name">traducir('Nombre','Nombre')</label> -->
                            <label class="form-label text-fidelitas" for="first_name">Nombre</label>
                            <!-- <input name="first_name" type="text" id="first_name"
                                class="form-control form-control-sm required" placeholder="traducir('Nombre','Nombre')"
                                data-format="nombre" value=""> -->
                            <input name="first_name" type="text" id="first_name"
                                class="form-control form-control-sm required" placeholder="Nombre" data-format="nombre"
                                value="">
                            <div class="invalid-feedback"></div>
                        </div>
                        <!---->
                        <div class="col-12 col-md-6">
                            <!-- <label class="form-label text-fidelitas"
                                for="last_name">traducir('Apellido', 'Apellido')</label> -->
                            <label class="form-label text-fidelitas" for="last_name">Apellido</label>
                            <!-- <input name="last_name" type="text" id="last_name"
                                class="form-control form-control-sm required"
                                placeholder="traducir('Apellido', 'Apellido')" data-format="nombre" value=""> -->
                            <input name="last_name" type="text" id="last_name"
                                class="form-control form-control-sm required" placeholder="Apellido"
                                data-format="nombre" value="">
                            <div class="invalid-feedback"></div>
                        </div>
                    </div>
                    <!----->
                    <div class="row justify-content-center my-3">
                        <!----->
                        <div class="col-12 col-md-6">
                            <label class="form-label text-fidelitas" for="email">e-mail</label>
                            <input name="email" type="text" id="email" class="form-control form-control-sm"
                                placeholder="e-mail" data-format="email" value="">
                            <div class="invalid-feedback"></div>
                        </div>
                        <!---->
                        <div class="col-12 col-md-6">
                            <label class="form-label text-fidelitas" for="password">Password</label>
                            <input name="password" type="" id="password" class="form-control form-control-sm required"
                                placeholder="Password" data-format="password" value="">
                            <div class="invalid-feedback"></div>
                        </div>
                    </div>
                    <div class="row justify-content-start my-3">
                        <!----->
                        <div class="col-12 col-md-6">
                            <!-- <label class="form-label text-fidelitas" for="idioma">traducir('Idioma','Idioma')</label> -->
                            <label class="form-label text-fidelitas" for="idioma">Idioma</label>
                            <select name="idioma" id="idioma" class="form-select form-select-sm required">
                                <!-- <option value="" selected>traducir('Seleccione idioma','Seleccione idioma')</option> -->
                                <option value="" selected>Seleccione idioma</option>
                                <!-- <option value="spa">traducir('Español','Español')</option>
                                <option value="eng">traducir('Inglés','Inglés')</option>
                                <option value="por">traducir('Portugués','Portugués')</option> -->
                                <option value="spa">Español</option>
                                <option value="eng">Inglés</option>
                                <option value="por">Portugués</option>
                            </select>
                        </div>
                        <div class="col-12 col-md-6">
                            <!-- <label class="form-label text-fidelitas" for="pais">traducir('País','País')</label> -->
                            <label class="form-label text-fidelitas" for="pais">País</label>
                            <select name="pais" id="pais" class="form-select form-select-sm required">
                                <!-- <option value="" selected>traducir('Seleccione país','Seleccione país')</option> -->
                                <option value="" selected>Seleccione país</option>
                                @foreach($paises as $pais)
                                    <option value="{{$pais->country_code}}">{{$pais->nombre_pais}}</option>
                                @endforeach
                            </select>
                            <div class="invalid-feedback"></div>
                        </div>
                    </div>
                    <div id="loading_grabar_datos" class="d-none text-center text-fidelitas">
                        <!-- traducir('Validando datos','Validando datos')... -->
                        Validando datos...
                        <div id="loading" class="spinner-border text-fidelitas ms-auto d-none" role="status"
                            aria-hidden="true"></div>
                    </div>
                    <div class="row justify-content-center">
                        <!-- <div id="mensaje_ok" class="d-none alert alert-success text-center w-75">traducir('Los datos se
                            grabaron correctamente. Recargando','Los datos se grabaron correctamente. Recargando')...
                            <div id="loading" class="spinner-border text-fidelitas ms-auto" role="status"
                                aria-hidden="true"></div>
                        </div>
                        <div id="mensaje_error" class="d-none alert alert-danger text-center w-75">traducir('No se pudo
                            grabar el registro. Intente más tarde o revise los datos enviados','No se pudo grabar el
                            registro. Intente más tarde o revise los datos enviados')</div> -->
                        <div id="mensaje_ok" class="d-none alert alert-success text-center w-75">Los datos se
                            grabaron correctamente. Recargando','Los datos se grabaron correctamente. Recargando...
                            <div id="loading" class="spinner-border text-fidelitas ms-auto" role="status"
                                aria-hidden="true"></div>
                        </div>
                        <div id="mensaje_error" class="d-none alert alert-danger text-center w-75">No se pudo
                            grabar el registro. Intente más tarde o revise los datos enviados','No se pudo grabar el
                            registro. Intente más tarde o revise los datos enviados</div>
                    </div>
                    <!---->
                    <div class="row justify-content-end mt-3 pt-3">
                        <div class="col-12 col-md-2 text-end">
                            <!-- <button type="button" class="btn btn-sm btn-success px-4 mb-4 add-mod-user"
                                id="add-user">traducir('Agregar Nuevo Usuario', 'Agregar Nuevo Usuario')</button> -->
                            <button type="button" class="btn btn-sm btn-success px-4 mb-4 add-mod-user"
                                id="add-user">Agregar Nuevo Usuario</button>
                            <!-- <button type="button" class="btn btn-sm btn-success px-4 mb-4 d-none add-mod-user"
                                id="mod-user">traducir('Modificar Usuario', 'Modificar Usuario')</button> -->
                            <button type="button" class="btn btn-sm btn-success px-4 mb-4 d-none add-mod-user"
                                id="mod-user">Modificar Usuario</button>
                        </div>
                    </div>
                </form>
            </div>
            <!-- -->
            <!-- <div class="modal-body text-center d-none" id="esperar_usuario">
                traducir('Cargando', 'Cargando')... <div class="spinner-border text-fidelitas"></div>
            </div> -->
            <div class="modal-body text-center d-none" id="esperar_usuario">
                Cargando... <div class="spinner-border text-fidelitas"></div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalCambiarEstado">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <!-- <h5 class="modal-title" id="">traducir('cambio_estado_us', 'Cambiar Estado de Usuario')</h5> -->
                <h5 class="modal-title" id="">cambio_estado_us</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <!-- -->
            <div class="modal-body" id="body_usuario">
                <!-- <p class="text-center">traducir('esta_apunto_de', 'Está a punto de') <span id="estado_nuevo"></span>
                    traducir('el_usuario', 'el usuario') <span id="usuarioCambioEstado"
                        class="fst-italic fw-bolder"></span>. ('seguro','¿Está seguro de continuar?')</p> -->
                <p class="text-center">Está a punto de <span id="estado_nuevo"></span>
                    el_usuario <span id="usuarioCambioEstado" class="fst-italic fw-bolder"></span>. ('seguro','¿Está
                    seguro de continuar?')</p>
                <form name="frmCambiarEstadoUsuario" id="frmCambiarEstadoUsuario" class="form-signin">
                    <!----->
                    <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
                    <input type="hidden" name="accion" id="accion" value="M">
                    <input type="hidden" name="user_id" id="user_id" value="">
                    <!----->
                    <input name="login" type="hidden" id="login" value="">
                    <input type="hidden" name="estado_login" value="">

                    <input name="first_name" type="hidden" id="first_name" value="">

                    <input name="last_name" type="hidden" id="last_name" value="">

                    <input name="email" type="hidden" id="email" value="">
                    <input name="password" type="hidden" id="password" value="">
                    <div class="row">
                        <div class="col-12 text-center">
                            <button type="submit" class="btn btn-sm " id="btnCambiarEstado"></button>
                            <button type="button" class="btn btn-sm btn-secondary"
                                data-bs-dismiss="modal">@traducr('cancelar','Cancelar')</button>
                        </div>
                    </div>
                </form>

                <div class="row justify-content-center mt-3">
                    <!-- <div id="mensaje_ok_cambioestado" class="d-none alert alert-success text-center w-75">traducir('Los
                        datos se grabaron correctamente. Recargando','Los datos se grabaron correctamente.
                        Recargando')... <div id="loading" class="spinner-border text-fidelitas ms-auto" role="status"
                            aria-hidden="true"></div>
                    </div>
                    <div id="mensaje_error_cambioestado" class="d-none alert alert-danger text-center w-75">
                        traducir('error','No se cambiar el estado del usuario, intentelo nuevamente')</div> -->
                    <div id="mensaje_ok_cambioestado" class="d-none alert alert-success text-center w-75">Los
                        datos se grabaron correctamente. Recargando', 'Los datos se grabaron correctamente.
                        Recargando... <div id="loading" class="spinner-border text-fidelitas ms-auto" role="status"
                            aria-hidden="true"></div>
                    </div>
                    <div id="mensaje_error_cambioestado" class="d-none alert alert-danger text-center w-75">
                        No se cambiar el estado del usuario, intentelo nuevamente</div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalPermisos">
    <div class="modal-dialog modal-xl">
        <div class="modal-content" id="content-modal-permisos">

        </div>
    </div>
</div>
@endsection
<!-- -->
@section('funcionesJS')
<!-- -->
<script src="{{ asset('/Libreria_CA/Js/funciones_config_usuarios.js') }}?v={{rand()}}"></script>
<script>
    $(document).ready(function () {
        let data = '<?php echo (json_encode($usuarios_disponibles)); ?>';
        eventosPanelUsuarios(data);
    });
</script>
@endsection