@extends('digitalmenu::layouts.guest')

@section('title', 'Forgot Password - VEMBERS - Digital Menu')

@section('content')
    <div class="flex-grow flex items-center justify-center px-6 py-12 relative overflow-hidden">

        <div class="absolute -top-24 -left-24 w-96 h-96 bg-primary/5 rounded-full blur-3xl pointer-events-none"></div>
        <div class="absolute -bottom-24 -right-24 w-96 h-96 bg-secondary/5 rounded-full blur-3xl pointer-events-none"></div>

        <div class="w-full max-w-md z-10">
            <div class="mb-10 text-center md:text-left">
                <span class="inline-block px-3 py-1 bg-tertiary-fixed text-on-tertiary-fixed-variant font-label text-[10px] tracking-[0.2em] uppercase font-bold rounded mb-4">
                    Account Recovery
                </span>
                <h1 class="text-4xl md:text-5xl font-extrabold text-on-surface tracking-tight leading-none mb-4">
                    Forgot Your <span class="text-primary italic">Password?</span>
                </h1>
                <p class="text-on-surface-variant font-body leading-relaxed max-w-xs">
                    Enter your username and we'll send a password reset link to the email address on your account.
                </p>
            </div>

            <div class="bg-surface-container-lowest p-8 md:p-10 rounded-xl shadow-[0px_12px_32px_rgba(25,28,29,0.06)] relative">
                <div class="absolute top-0 left-1/2 -translate-x-1/2 w-1/3 h-1 bg-gradient-to-r from-transparent via-primary to-transparent opacity-20"></div>

                @if (session('status'))
                    <div class="mb-6 px-4 py-3 rounded-lg bg-tertiary-fixed text-on-tertiary-fixed-variant text-sm font-medium">
                        {{ session('status') }}
                    </div>
                @endif

                @if (session('error'))
                    <div class="mb-6 px-4 py-3 rounded-lg bg-error-container text-on-error-container text-sm font-medium">
                        {{ session('error') }}
                    </div>
                @endif

                <form class="space-y-6" method="POST" action="{{ route('digitalmenu.forgot-password.send') }}">
                    {!! csrf_field() !!}

                    <div class="space-y-2">
                        <label class="block text-sm font-semibold text-on-surface ml-1" for="username">Username <span class="text-error">*</span></label>
                        <div class="relative">
                            <input id="username" name="username" type="text"
                                   value="{{ old('username') }}"
                                   placeholder="chef_gusteau"
                                   class="w-full px-5 py-4 bg-surface-container-high border-none rounded-lg focus:ring-2 focus:ring-primary focus:bg-surface-container-lowest transition-all placeholder:text-on-surface-variant/40 text-on-surface {{ $errors->has('username') ? 'ring-2 ring-error' : '' }}"/>
                            @if ($errors->has('username'))
                                <p class="text-error text-xs ml-1 mt-1">{{ $errors->first('username') }}</p>
                            @endif
                        </div>
                    </div>

                    <div class="pt-2">
                        <button type="submit"
                                class="w-full py-4 px-6 rounded-full kinetic-gradient text-on-primary font-headline font-extrabold text-lg shadow-xl shadow-primary/30 transition-all hover:scale-105 active:scale-95 flex items-center justify-center gap-3">
                            Send Reset Link <span class="material-symbols-outlined">arrow_forward</span>
                        </button>
                    </div>
                </form>

                <div class="mt-8 pt-8 border-t border-outline-variant/20 text-center">
                    <a class="text-sm font-semibold text-primary hover:underline inline-flex items-center gap-1.5" href="{{ route('login') }}">
                        <span class="material-symbols-outlined text-base">arrow_back</span>
                        Back to Login
                    </a>
                </div>
            </div>
        </div>

    </div>
@endsection