@extends('template.acceso')

@section('titulo', 'Iniciar sesión')

@section('contenido')
<div class="fsg-acceso__tarjeta">

    <div class="fsg-acceso__encabezado">
        <img src="{{ asset('assets/img/fourSidesGroup.png') }}" alt="Four Sides Group" class="fsg-acceso__logo">
        <h1 class="fsg-acceso__titulo">Panel de administración</h1>
        <p class="fsg-acceso__subtitulo">Reservaciones en Línea</p>
    </div>

    @if ($errors->any())
        <div class="fsg-acceso__alerta" role="alert">
            <i class="fas fa-circle-exclamation"></i>
            <span>{{ $errors->first() }}</span>
        </div>
    @endif

    <form method="POST" action="{{ route('default.login.acceso') }}" novalidate>
        @csrf

        <div class="fsg-acceso__campo">
            <label for="usuarioAlias" class="fsg-acceso__etiqueta">Usuario</label>
            <div class="fsg-acceso__control">
                <i class="fas fa-user fsg-acceso__icono"></i>
                <input type="text"
                       id="usuarioAlias"
                       name="usuarioAlias"
                       class="fsg-acceso__input"
                       value="{{ old('usuarioAlias') }}"
                       maxlength="25"
                       autocomplete="username"
                       autofocus
                       required>
            </div>
        </div>

        <div class="fsg-acceso__campo">
            <label for="usuarioPassword" class="fsg-acceso__etiqueta">Contraseña</label>
            <div class="fsg-acceso__control">
                <i class="fas fa-lock fsg-acceso__icono"></i>
                <input type="password"
                       id="usuarioPassword"
                       name="usuarioPassword"
                       class="fsg-acceso__input fsg-acceso__input--con-boton"
                       maxlength="100"
                       autocomplete="current-password"
                       required>
                <button type="button" class="fsg-acceso__ver" id="fsgVerPassword" aria-label="Mostrar contraseña">
                    <i class="fas fa-eye"></i>
                </button>
            </div>
        </div>

        <button type="submit" class="fsg-acceso__boton">
            <i class="fas fa-right-to-bracket"></i> Ingresar
        </button>
    </form>

    <p class="fsg-acceso__pie">&copy; {{ date('Y') }} Four Sides Group</p>
</div>
@endsection

@push('javascript')
<script>
(function () {
    'use strict';
    var boton = document.getElementById('fsgVerPassword');
    var campo = document.getElementById('usuarioPassword');
    if (!boton || !campo) return;

    boton.addEventListener('click', function () {
        var visible = campo.type === 'text';
        campo.type = visible ? 'password' : 'text';
        boton.setAttribute('aria-label', visible ? 'Mostrar contraseña' : 'Ocultar contraseña');
        boton.firstElementChild.className = visible ? 'fas fa-eye' : 'fas fa-eye-slash';
    });
})();
</script>
@endpush