@extends('layouts.app')

@section('content')
    <div class="mx-auto max-w-md px-4 py-16">
        <h1 class="text-2xl font-bold text-slate-900 mb-6">Bejelentkezés</h1>

        @if ($errors->any())
            <div class="mb-4 rounded-md bg-red-50 border border-red-200 px-4 py-3 text-sm text-red-700">
                <ul class="list-disc pl-4">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="POST" action="{{ route('customer.login.attempt') }}" class="space-y-4">
            @csrf
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">E-mail cím</label>
                <input type="email" name="email" value="{{ old('email') }}" required autofocus class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Jelszó</label>
                <input type="password" name="password" required class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
            </div>
            <label class="flex items-center gap-2 text-sm text-slate-600">
                <input type="checkbox" name="remember" value="1">
                Emlékezz rám
            </label>
            <button type="submit" class="w-full rounded-md bg-brand-700 px-5 py-2.5 text-sm font-semibold text-white hover:bg-brand-800">Bejelentkezés</button>
        </form>

        <p class="mt-4 text-sm text-slate-500">
            Nincs még fiókod? <a href="{{ route('customer.register') }}" class="text-brand-700 hover:underline">Regisztráció</a>
        </p>
        <p class="mt-2 text-sm text-slate-500">
            Regisztráció nélkül is vásárolhatsz: <a href="{{ route('webshop.index') }}" class="text-brand-700 hover:underline">tovább a vásárláshoz</a>.
        </p>
    </div>
@endsection