@extends('adminlte::page')

@section('title', 'Nuevo usuario')

@section('content_header')
    <h1 class="font-weight-bold">
        <i class="fas fa-user-plus"></i>
        Nuevo Usuario
    </h1>
@stop

@section('content')

@if($errors->any())
    <div class="alert alert-danger">
        <strong>Revise los datos ingresados:</strong>
        <ul class="mb-0 mt-2">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<form action="{{ route('usuarios.store') }}" method="POST" class="card">
    @csrf

    <div class="card-header">
        <strong>Datos del usuario</strong>
    </div>

    <div class="card-body">

        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label>Nombre completo</label>
                    <input
                        type="text"
                        name="name"
                        value="{{ old('name') }}"
                        class="form-control"
                        required
                    >
                </div>
            </div>

            <div class="col-md-6">
                <div class="form-group">
                    <label>Correo electrónico</label>
                    <input
                        type="email"
                        name="email"
                        value="{{ old('email') }}"
                        class="form-control"
                        required
                    >
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label>Contraseña</label>
                    <input
                        type="password"
                        name="password"
                        class="form-control"
                        required
                    >
                </div>
            </div>

            <div class="col-md-6">
                <div class="form-group">
                    <label>Confirmar contraseña</label>
                    <input
                        type="password"
                        name="password_confirmation"
                        class="form-control"
                        required
                    >
                </div>
            </div>
        </div>

        <hr>

        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label>Rol del usuario</label>
                    <select name="rol" id="rol" class="form-control" required>
                        <option value="">Seleccione</option>

                        @foreach($roles as $rol)
                            <option value="{{ $rol->name }}" @selected(old('rol') === $rol->name)>
                                {{ strtoupper($rol->name) }}
                            </option>
                        @endforeach
                    </select>

                    <small class="text-muted">
                        El administrador no requiere equipo. Visualizador y operador sí requieren equipo.
                    </small>
                </div>
            </div>

            <div class="col-md-6" id="grupoEquipo">
                <div class="form-group">
                    <label>Equipo asignado</label>
                    <select name="equipo_id" class="form-control">
                        <option value="">Seleccione</option>

                        @foreach($equipos as $equipo)
                            <option value="{{ $equipo->id }}" @selected((string) old('equipo_id') === (string) $equipo->id)>
                                {{ $equipo->nombre }}
                                @if(isset($equipo->proyecto))
                                    - {{ $equipo->proyecto->nombre ?? '' }}
                                @endif
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>

    </div>

    <div class="card-footer">
        <button class="btn btn-primary">
            <i class="fas fa-save"></i>
            Guardar usuario
        </button>

        <a href="{{ route('usuarios.index') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i>
            Volver
        </a>
    </div>
</form>

@stop

@section('js')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const rol = document.getElementById('rol');
    const grupoEquipo = document.getElementById('grupoEquipo');

    function actualizarEquipo() {
        if (!rol || !grupoEquipo) {
            return;
        }

        if (rol.value === 'administrador' || rol.value === 'admin') {
            grupoEquipo.style.display = 'none';
        } else {
            grupoEquipo.style.display = 'block';
        }
    }

    rol.addEventListener('change', actualizarEquipo);
    actualizarEquipo();
});
</script>
@stop