@extends('header_nuevo_generico')
@section('main')
    <div class="container-fluid mt-5 pt-5">
        <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_equipo','Crear Equipo')</h2>
            </div>
        </div>
        <!-- -->
        <form id="frmAltaEquipo" class="card shadow p-2" method="POST" action="/configuracion-teams/crear-team">
            {{ csrf_field() }}
            <input type="hidden" name="numero-miembros" id="numero-miembros" value="2" autocomplete="off">
            <div class="row justify-content-start my-2">
                <!-- -->
                <div class="col-md-6 mb-2">
                    <!-- -->
                    <span class="text-muted">@traducir('nombre_equipo','Introduzca el nombre del equipo')</span>
                    <div class="form-floating">
                        <input type="text" id="nombre_equipo" name="nombre_equipo" class="form-control" placeholder="Nombre" maxlength="30" autocomplete="off" required>
                        <label class="form-label" for="nombre_equipo">@traducir('Nombre','Nombre')</label>
                    </div>
                </div>
                <!--  -->
                <div class="col-md-3">
                    <!-- -->
                    <span class="text-muted">@traducir('texto_idioma','Elegir los idiomas con el que puede trabajar el equipo')</span>
                    <select name="idiomas[]" id="idiomas" class="form-select" multiple="true" aria-placeholder="idiomas" autocomplete="off" required>
                        @foreach( $idiomas as $idioma )
                        <option value="{{ $idioma->idioma }}">{{ $idioma->nombre_idioma }}</option>
                        @endforeach
                    </select>
                </div>
                <!-- -->
                <div class="col-md-3">
                    <!-- -->
                    <span class="text-muted">@traducir('texto_servicios','Elegir los servicios con el que puede trabajar el equipo')</span>
                    <select name="servicio[]" id="servicio" class="form-select" multiple="true" aria-placeholder="servicios" autocomplete="off">
                        <option value="47">LED</option>
                        <option value="73">IMPERIUM</option>
                    </select>
                </div>
            </div>
            <div class="row justify-content-start my-2">
                <div class="col-md-9">
                    <!-- -->
                    <span class="text-muted my-1">@traducir('texto_descripcion_equipo','Introduzca la descripción del equipo')</span>
                    <div class="form-floating">
                        <textarea name="descripcion_equipo" id="descripcion_equipo" 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_equipo">@traducir('descripcion_equipo','Descripción')</label>
                    </div>                   
                </div>
                <div class="col-md-3">
                    <!-- -->
                    <span class="text-muted">@traducir('texto_paises','Elegir los paises donde el equipo puede trabajar')</span>
                    <select name="paises[]" id="paises" class="form-select input-edit-team" multiple="true" aria-placeholder="@traducir('paises','Paises')" autocomplete="off" required>
                        @foreach ($paises as $pais)
                            <option value="{{$pais->country_code}}">{{$pais->country_name}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <!-- -->
            <div class="row justify-content-center my-3">
                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-9 border-top border-bottom border-danger">
                    <h4 class="text-danger text-center mb-0">@traducir('Usuarios Equipo','Usuarios Equipo')</h4>
                </div>
            </div>
            <!-- -->
            <div class="row justify-content-center my-3">
                <div class="col-md-12">
                    <table class="table table-bordered table-hover">
                        <thead class="table-success">
                            <tr>
                                <th class="text-center">
                                    <button id="btn-agregar-role" class="btn btn-sm btn-outline-success px-3" type="button" data-count="4"><i class="bi bi-plus"></i></button>
                                    <button id="btn-eliminar-role" class="btn btn-sm btn-outline-success px-3" type="button" data-count="4"><i class="bi bi-dash"></i></button>
                                </th>
                                <th class="text-center">@traducir('role','Role')</th>
                                <th class="text-center">@traducir('usuario','Usuario')</th>
                            </tr>
                        </thead>
                        <tbody id="configRolesUsuario">
                            @for($x=1;$x <= 15;$x++)
                            <tr id="miembro-{{$x}}" @if( $x > 2 ) class="d-none" @endif>
                                <td class="text-center">{{$x}}</td>
                                <!-- ROLES MIEMBROS -->
                                <td class="text-center">
                                    <select name="roles_usuario_{{$x}}" id="roles_usuario_{{$x}}" class="form-select roles-usuario" data-orden="{{$x}}" required autocomplete="off" @if( $x > 2 ) disabled @endif style="cursor:pointer;">
                                        <option value="" selected>--</option>
                                        @foreach( $roles as $role )
                                            @if( $role->activo == 1 )
                                                <option value="{{ $role->id_rol }}">{{ $role->nombre }}</option>
                                            @endif
                                        @endforeach
                                    </select>
                                </td>
                                <!-- USUARIOS MIEMBROS -->
                                <td class="text-center" id="seccion-usuarios-miembros-{{$x}}">
                                    <select name="usuarios_miembros_{{$x}}" id="usuarios_miembros_{{$x}}" class="form-select usuarios-miembros" required autocomplete="off" @if( $x > 2 ) disabled @endif style="cursor:pointer;"></select>
                                </td>
                            </tr>
                            @endfor
                            <!-- -->
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- -->
            <div class="row justify-content-center my-2 d-none" id="alertaUsuarioSupervisor">
                <div class="col-lg-4 col-md-6 col-sm-9 text-center">
                    <div class="alert alert-danger" role="alert">
                        <i class="bi bi-exclamation-diamond-fill"></i> @traducir('No se puede dar de alta un team sin un miembro supervisor','No se puede dar de alta un team sin un miembro supervisor')
                    </div>
                </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="submit" class="btn btn-sm btn-info"><i class="bi bi-save-fill"></i> @traducir('Crear','Crear')</button>
                </div>
            </div>
        </form>
    </div>
@endsection
@section('funcionesJS')
<script src="{{ asset('/Libreria_CA/Js/funciones_config_teams.js') }}?v={{ rand() }}"></script>
<script>
    $(document).ready(function(){
        eventosNuevoTeam();
    });
</script>
@endsection