@extends('front.layouts.app')

@section('content')
<section class="login-section">
    <div class="login-header">
        <div class="text-center mb-4">
            <img src="{{ asset('front/assets/images/logo.png') }}" alt="{{ \Config::get('settings.company_name') }} Logo" style="max-width: 200px;" />
        </div>
        <h1>Forgot Password?</h1>
        <p>Enter your email address and we'll send you a link to reset your password.</p>
    </div>
    <div class="login-card">
        @include('admin.components.messages')
        
        <form method="POST" action="{{ route('password.email') }}">
            @csrf
            
            <div class="form-group">
                <label class="form-label" for="email">Email Address <span class="required-asterisk">*</span></label>
                <div class="input-wrapper">
                    <input id="email" type="email" placeholder="e.g. johnsmith@email.com" class="form-input {{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" required autofocus>
                    
                    <span class="input-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="18" viewBox="0 0 22 18" fill="none">
                        <path d="M20.75 11.75V2.75C20.75 2.21957 20.5393 1.71086 20.1642 1.33579C19.7891 0.960714 19.2804 0.75 18.75 0.75H2.75C2.21957 0.75 1.71086 0.960714 1.33579 1.33579C0.960714 1.71086 0.75 2.21957 0.75 2.75V14.75C0.75 15.85 1.65 16.75 2.75 16.75H10.75M20.75 3.75L11.78 9.45C11.4713 9.64343 11.1143 9.74601 10.75 9.74601C10.3857 9.74601 10.0287 9.64343 9.72 9.45L0.75 3.75M14.75 15.75H20.75" stroke="#AEBAC7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </span>
                </div>
                @if ($errors->has('email'))
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $errors->first('email') }}</strong>
                    </span>
                @endif
            </div>

            <button type="submit" class="blue-btn-lg">Send Password Reset Link</button>
        </form>

        <div class="login-signup-links">
            <p class="signup-link">Remember your password? <a href="{{ route('login') }}">Sign In</a></p>
            <p class="contact-support">Need help? <a href="#">Contact Support</a></p>
        </div>
    </div>
</section>
@endsection