@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 pt-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 Roles','Panel de Roles')</h3>
        </div>
    </div>
    <!-- -->
    <div class="row justify-content-start my-2">
        <div class="col-xl-4 col-lg-6 col-md-12 text-start">
            <a class="btn btn-outline-fidelitas-secondary" href="/configuracion-teams/crear-role"><i class="bi bi-gear-fill"></i> @traducir('nuevo_role','Nuevo Role')</a>
        </div>
    </div>
    <!-- -->
    <div class="row justify-content-center my-2">
        <div class="col-12">
            <div id="fancyTablaRoles"></div>
        </div>
    </div>
</div>
<!-- MODAL ASIGNAR USUARIO ROL -->
<div class="modal fade" id="modal_asignar_usuario" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog" style="max-width:80%;">
        <div class="modal-content">
        <div class="modal-header">
            <div class="modal-title d-flex justify-content-start">
                <h5>@traducir('Usuarios asignados','Usuarios asignados'):</h5> 
                <h5 id="titulo_modal_role"></h5>
            </div>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body" id="modal_body_role">
            <!-- Loading -->
            <div id="loadingModalRole" class="row justify-content-center d-none">
                <div class="col-12 col-md-3 mt-5">
                    <div class="spinner-border text-fidelitas"></div><span class="text-fidelitas fs-2 ms-2">@traducir('Cargando','Cargando')...</span>
                </div>
            </div> 
        </div>
        </div>
    </div>
</div>
<!-- MODAL DESACTIVAR ROLE -->
<div class="modal fade" id="modal_desactivar_rol" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
            <div class="modal-title d-flex justify-content-start text-danger">
                <h5>@traducir('Aviso de desactivación','Aviso  de desactivación')!</h5> 
            </div>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body" id="modal_body_desactivar">
            <form id="frmEstadoRole" action="/configuracion-teams/estado-role" method="POST">
                {{ csrf_field() }}
                <input type="hidden" name="id_role">
                <!-- -->
                <div class="row">
                    <h6 class="text-center">¿@traducir('Estas seguro que queres desactivar este Rol','Estas seguro que queres desactivar este Rol')?</h6>
                </div>
                <div class="row">
                    <div class="text-end col-md-6">
                        <button type="button" class="btn btn-sm btn-outline-danger" data-bs-dismiss="modal"><i class="bi bi-x-octagon"></i> @traducir('Cancelar','Cancelar')</button>
                    </div>
                    <div class="text-start col-md-6">
                        <button type="submit" class="btn btn-sm btn-outline-success"><i class="bi bi-check2-circle"></i> @traducir('Aceptar','Aceptar')</button>
                    </div>
                </div>
            </form>
        </div>
        </div>
    </div>
</div>
<!--  -->
<!-- MODAL ACTIVAR ROLE -->
<div class="modal fade" id="modal_activar_rol" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
            <div class="modal-title d-flex justify-content-start text-success">
                <h5>@traducir('Aviso de activación','Aviso de activación')!</h5> 
            </div>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body" id="modal_body_activar">
            <form id="frmEstadoRole" action="/configuracion-teams/estado-role" method="POST">
                {{ csrf_field() }}
                <input type="hidden" name="id_role">
                <!-- -->
                <div class="row">
                    <h6 class="text-center">¿@traducir('Estas seguro que queres activar este Rol','Estas seguro que queres activar este Rol')?</h6>
                </div>
                <div class="row">
                    <div class="text-end col-md-6">
                        <button type="button" class="btn btn-sm btn-outline-danger" data-bs-dismiss="modal"><i class="bi bi-x-octagon"></i> @traducir('Cancelar','Cancelar')</button>
                    </div>
                    <div class="text-start col-md-6">
                        <button type="submit" class="btn btn-sm btn-outline-success"><i class="bi bi-check2-circle"></i> @traducir('Aceptar','Aceptar')</button>
                    </div>
                </div>
            </form>
        </div>
        </div>
    </div>
</div>
<!--  -->
<form id="frmRole" name="frmRole" method="POST">
    {{ csrf_field() }}
</form>
@endsection
@section('funcionesJS')
<script src="{{ asset('/Libreria_CA/Js/funciones_config_teams.js') }}?v={{rand()}}"></script>
<script>
    $(document).ready(function(){
        let data = '<?php echo(json_encode($roles)); ?>';
        eventosPanelRoles(data);
    });
</script>
@endsection