@extends('layouts.guest')

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

@section('content')
    <h2 class="mb-1 text-xl font-semibold text-gray-900 dark:text-white">Bienvenido de nuevo</h2>
    <p class="mb-6 text-sm text-gray-500 dark:text-gray-400">Ingresa tus credenciales para acceder al sistema.</p>

    <form method="POST" action="{{ route('login.store') }}" class="space-y-5">
        @csrf

        <div>
            <x-label for="email">Correo electrónico</x-label>
            <x-input id="email" type="email" name="email" value="{{ old('email') }}" required autofocus autocomplete="username" placeholder="tu@correo.com" />
            <x-error for="email" />
        </div>

        <div>
            <x-label for="password">Contraseña</x-label>
            <div x-data="{ show: false }" class="relative">
                <x-input id="password" name="password" required autocomplete="current-password" placeholder="••••••••" ::type="show ? 'text' : 'password'" />
                <button type="button" @click="show = !show"
                        class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                    <i class="fa-solid" :class="show ? 'fa-eye-slash' : 'fa-eye'"></i>
                </button>
            </div>
            <x-error for="password" />
        </div>

        <label class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
            <input type="checkbox" name="remember" class="size-4 rounded border-gray-300 text-primary focus:ring-primary">
            Mantener sesión iniciada
        </label>

        <x-button type="submit" class="w-full">
            <i class="fa-solid fa-right-to-bracket"></i> Iniciar sesión
        </x-button>
    </form>

    @if (\App\Models\Setting::get('registration_enabled', '0') === '1')
        <p class="mt-6 text-center text-sm text-gray-500 dark:text-gray-400">
            ¿No tienes cuenta?
            <a href="{{ route('register') }}" class="font-medium text-primary hover:text-primary-dark">Regístrate aquí</a>
        </p>
    @endif
@endsection