@extends('layouts.auth')

@section('title', 'Forgot Your Password')

@push('styles')
<style>
    html, body {
        height: 100%;
        font-family: 'Poppins', sans-serif;
        background-color: #fff;
    }

    .resend-card {
        border: 1px solid #FEBD21;
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    }

    .logo-text span:last-child {
        color: #FEBD21;
    }
</style>
@endpush

@section('content')
<div class="d-flex align-items-center justify-content-center h-100">
    <div class="resend-card p-4 p-md-5 bg-white" style="max-width: 550px; width: 100%;">
        {{-- Logo --}}
        <div class="text-center mb-4">
            <h4 class="text-bold">Forgot Password</h4>
            <p class="text-muted small mb-0">Enter the email address associated with your account and we will send you a link to reset your password</p>
        </div>

            {{-- Alerts --}}
        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger">{{ session('error') }}</div>
        @endif
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        {{-- Forgot password Form --}}
        <form action="{{ route('password.email') }}" method="POST">
            @csrf
            <div class="mb-3">
                <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
                       placeholder="Email Address" value="{{ old('email') }}" required>
                @error('email')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <button type="submit" class="btn w-100 text-white" style="background-color: #FEBD21;">
                Send reset link
            </button>

            <p class="text-center small mt-3 mb-0">
                <a href="{{ route('login') }}" class="text-decoration-none fw-semibold" style="color: #4b4945;">
                    <span class="fa fa-arrow-left"></span> Back to Login
                </a>
            </p>
        </form>
    </div>
</div>
@endsection