@extends('header_nuevo_generico')
@section('main')

<div class="container-fluid mt-5 pt-5">
    <!--  -->
    <div class="shadow-lg alert alert-danger d-flex align-items-center justify-content-center d-none" id="alert_previsualizar" role="alert">
        <i class="fs-3 bi bi-exclamation-triangle-fill"></i>&nbsp;&nbsp;
        <div>
           @traducir('Para poder previsualizar usted debe primero completar los campos correspondientes!!','Para poder previsualizar usted debe primero completar los campos correspondientes!!')
        </div>
    </div>
    <!--  -->
    <div class="row justify-content-center">
        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-9">
            <h2 class="text-danger display-6 text-center">@traducir('nuevo_role','Crear Role')</h2>
        </div>
    </div>
    <!-- -->
    <form id="frmCrearRole" class="card shadow p-2" method="POST" action="/configuracion-teams/crear-nuevo-role">
        {{ csrf_field() }}
        <!--  -->
        <div class="row justify-content-start my-2">
            <!-- -->
            <div class="col-md-4 mb-2">
                <!-- -->
                <span class="text-muted">@traducir('nombre_role','Introduzca el nombre del role')</span>
                <div class="form-floating">
                    <input type="text" id="nombre_role" name="nombre_role" class="form-control" placeholder="Nombre" maxlength="30" autocomplete="off" required>
                    <label class="form-label" for="nombre_role">@traducir('Nombre','Nombre')</label>
                </div>
            </div>
            <div class="col-md-4">
                <!-- -->
                <span class="text-muted my-1">@traducir('texto_descripcion_role','Introduzca la descripción del role')</span>
                <div class="form-floating">
                    <textarea name="descripcion_role" id="descripcion_role" class="form-control" style="height: 100px;" cols="30" rows="10" placeholder="Descripción" maxlength="100" autocomplete="off" required></textarea>
                    <label class="form-label" for="descripcion_role">@traducir('descripcion_role','Descripción')</label>
                </div>
            </div>
            <div class="col-md-4">
                <span class="text-muted">@traducir('texto_usuarios_role','Elegir los usuarios para el role')</span>
                <select name="usuario[]" id="usuario" class="form-select" multiple="true" aria-placeholder="usuarios" autocomplete="off" required>
                    @foreach( $users  as $user )
                        <option value="{{ $user->user_id }}">{{$user->usuario}}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <!--  -->
        <div class="row justify-content-end my-2">
            <div class="col-xl-3 col-lg-4 col-md-6 col-sm-9 text-end">
                <button type="button" id="btnPrevRole" class="btn btn-sm btn-info"><i class="bi bi-file-break-fill"></i> @traducir('Previsualizar','Previsualizar')</button>
                <button type="button" id="btnCancelarRole" class="btn btn-sm btn-danger d-none"><i class="bi bi-x-lg"></i> @traducir('Cancelar_role','Cancelar')</button>
                <button type="submit" id="btnCrearRole" class="btn btn-sm btn-success ms-2 d-none"><i class="bi bi-save-fill"></i> @traducir('Crear_role','Crear')</button>
            </div>
        </div>
        <!-- -->
    </form>
</div>

@endsection
@section('funcionesJS')
<script src="{{ asset('/Libreria_CA/Js/funciones_config_teams.js') }}?v=1"></script>
<script>
    $(document).ready(function(){
        eventosCrearRole();
    });
</script>
@endsection