@extends('header_nuevo_generico')
@section('main')
<link rel="stylesheet" href="{{ asset('/Libreria_CA/css/fancy_fidelitas_theme.css') }}?v=2">
<div class="container-fluid mt-5 py-5 px-4">
    <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 Permisos de Usuario')</h3>
        </div>
    </div>
    <div class="row justify-content-start my-2">
        <div class="col-xl-4 col-lg-6 col-md-12 text-start ps-3">
            <!-- <a class="btn btn-outline-fidelitas-secondary"> @traducir('nuevo_permiso','Nuevo Permiso')</a> -->
            <button id="addPermiso" type="button" class="btn btn-outline-fidelitas-secondary" data-bs-toggle="modal" data-bs-target="#modalAddModPermiso">
                <i class="bi bi-gear-fill"></i>
                @traducir('nuevo_permiso','Nuevo Permiso')
            </button>
        </div>
    </div>   
    <div class="row justify-content-center pt-3 d-none" id="cargando-permisos">
        @traducir('Cargando','Cargando...')
        <div class="spinner-border text-fidelitas" role="status">
            <span class="visually-hidden">@traducir('Loading','Loading...')</span>
        </div>
    </div>
    <div class="row justify-content-center pt-3 d-none" id="contenido-permisos">
        <div class="col-lg-12 col-md-12">
            <div id="fancyPermisosUsuario"></div>
        </div>
    </div>
</div>

<!-- MODALES -->
<div class="modal fade" id="modalAddModPermiso">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="title_permisos"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="body_permisos">            
            </div>
            <!-- -->
            <div class="modal-body text-center" id="esperar_permiso">
                @traducir('Cargando','Cargando')... <div class="spinner-border text-fidelitas"></div>
            </div>
            <div class="row justify-content-center mt-3">
                <div id="mensaje_ok_addmodpermiso" 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_addmodpermiso" class="d-none alert alert-danger text-center w-75">@traducir('error','No se cambiar el estado del usuario, intentelo nuevamente')</div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="modalCambiarEstadoPermiso">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="">Cambiar Estado del Permiso</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <!-- -->
            <div class="modal-body" id="body_permiso_estado">
                <p class="text-center">Está a punto de <span id="estado_nuevo"></span> el acceso al item del menu <span id="itemCambio" class="fst-italic fw-bolder"></span> para el usuario <span id="usuarioCambio" class="fst-italic fw-bolder"></span>. ¿Está seguro de continuar?</p>
                <form name="frmCambiarEstadoPermiso" id="frmCambiarEstadoPermiso" class="form-signin">        
                    <!----->
                    <input type="hidden" name="_token"  id="token" value="{{ csrf_token() }}">
                    <input type="hidden" name="user_id"  id="user_id" value="">                 
                    <input name="plataforma" type="hidden" id="plataforma" value="">
                    <input type="hidden" name="estado" value="">                            
                    <input name="id_menu" type="hidden" id="id_menu" value="">                            
                    <input name="id_user_menu" type="hidden" id="id_user_menu" 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">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>
            </div>
        </div>
    </div>
</div>
<!-- -->
<form id="frmModalPermisos" method="POST" action="">
    {{ csrf_field() }}
    <input type="hidden" name="accion">
    <input type="hidden" name="permiso_sel">
</form>
@endsection
@section('funcionesJS')
<script src="{{ asset('/Libreria_CA/Js/funciones_config_permisos_menu.js') }}?v={{rand()}}"></script>
<script>
    $(document).ready(function(){
        let usuarios = '<?php echo(json_encode($permisos)); ?>';
        eventosPanelPermisos(usuarios);
    });
</script>
@endsection