@extends('header_nuevo_generico')
@section('main')
<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-center">
            <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-lg-10 col-md-12">
            <table class="table table-hover" id="tablaRoles">
                <thead class="table-header-fidelitas">
                    <tr>
                        <th class="d-none"></th>
                        <th>@traducir('Nombre','Nombre')</th>
                        <th>@traducir('Descripción','Descripción')</th>
                        <th>@traducir('Creado','Creado')</th>
                        <th>@traducir('Modificado','Modificado')</th>
                        <th>@traducir('Estado','Estado')</th>
                        <th>@traducir('Asignar Rol','Asignar Rol')</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach( $roles as $role )
                    <tr>
                        <td class="d-none">{{ $role->id_rol }}</td>
                        <td>{{ $role->nombre }}</td>
                        <td>{{ $role->descripcion }}</td>
                        <td>{{ $role->created }} {{ $role->first_name.' '.$role->last_name }}</td>
                        <td>{{ $role->modified }} {{ $role->first_name_modif.' '.$role->last_name_modif }}</td>
                        <td>
                            @if( $role->activo == 1 )
                                <!-- <h4 class="text-success"><i class="bi bi-check-lg"></i></h4> -->
                                <i type="button" class="btn p-0 text-success bi bi-check-circle-fill fs-4 DesactivarRole" title="@traducir('Activo','Activo')" data-id-role="{{ $role->id_rol }}" data-bs-toggle="modal" data-bs-target="#modal_desactivar_rol"></i>
                            @else
                                <!-- <h4 class="text-danger"><i class="bi bi-x-lg"></i></h4> -->
                                <i type="button" class="btn p-0 text-danger bi bi-x-circle-fill fs-4 DesactivarRole" title="@traducir('Inactivo','Inactivo')" data-id-role="{{ $role->id_rol }}" data-bs-toggle="modal" data-bs-target="#modal_activar_rol"></i>
                            @endif
                        </td>
                        <td class="text-center">                            
                            <i type="button" class="btn p-0 text-primary bi bi-person-circle fs-4 abrirModalRole" title="@traducir('Asignar Rol','Asignar Rol')" data-id-role="{{ $role->id_rol }}" data-nombre-role="{{ $role->nombre }}" data-bs-toggle="modal" data-bs-target="#modal_asignar_usuario"></i>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- MODAL ASIGNAR USUARIO ROL -->
<div class="modal fade" id="modal_asignar_usuario" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <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">
    <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">
    <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(){
        eventosPanelRoles();
    });
</script>
@endsection