@extends('adminlte::page')

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

@section('content_header')
    <h1 class="font-weight-bold">
        <i class="fas fa-user-edit"></i>
        Editar 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

@php
    $rolActual = old('rol', $usuario->getRoleNames()->first());
@endphp

<form action="{{ route('usuarios.update', $usuario) }}" method="POST" class="card">
    @csrf
    @method('PUT')

    <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', $usuario->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', $usuario->email) }}"
                        class="form-control"
                        required
                    >
                </div>
            </div>
        </div>

        <div class="alert alert-info">
            Si no desea cambiar la contraseña, deje los siguientes campos vacíos.
        </div>

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

            <div class="col-md-6">
                <div class="form-group">
                    <label>Confirmar nueva contraseña</label>
                    <input
                        type="password"
                        name="password_confirmation"
                        class="form-control"
                    >
                </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($rolActual === $rol->name)>
                                {{ strtoupper($rol->name) }}
                            </option>
                        @endforeach
                    </select>
                </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', $usuario->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>
            Actualizar 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