@extends('auth.user.base')

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

@section('content')
<link
    href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
    rel="stylesheet">
<link rel="stylesheet" href="{{ asset('assets/css/forgot-password.css') }}">

<div class="ark__container">
    <div class="ark__form-section">
        <div class="ark__form--wrap">
            <div class="ark__form-bg">
                <div class="ark__form--center">
                    <div class="ark__logo ark__login-width">Forgot <span>Password</span></div>
                    <div class="ark__auth-header ark__login-width">
                        <h1 class="ark__title">Reset Your Password</h1>
                        <p class="ark__subtitle">
                            Enter your email and we’ll send you a link to reset your password.
                        </p>
                    </div>

                    <!-- SUCCESS POPUP -->
                    <div id="successPopup" style="display: none;">
                        <div class="ark__success-box">
                        <div class="step-number-20">
                            <div class="step-number-30">
                                <div class="step-number">
                                    <img src="{{ asset('assets/images/right-arrow.svg') }}" alt=""
                                        class="step-right-arrow">
                                </div>
                            </div>
                        </div>
                            <h3>Check Your Email!</h3>
                            <p>We’ve sent a password reset link to: <strong id="sentEmail"></strong></p>
                            <button type="submit" class="ark__submit-btn" onclick="window.location.href='{{ route('login') }}'">Go to Login</button>
                        </div>
                    </div>

                    <!-- ERROR MESSAGES -->
                    @error('email')
                    <div class="ark__login-width mb-4 text-red-600 text-center bg-red-50 p-3 rounded">
                        {{ $message }}
                    </div>
                    @enderror

                    <form method="POST" action="{{ route('password.email') }}" class="ark__login-width"
                        id="forgotPasswordForm">
                        @csrf
                        <div class="ark__form-group">
                            <label class="ark__label" for="email">Email Address</label>
                            <input type="email" name="email" id="email" class="ark__input"
                                placeholder="you@example.com" value="{{ old('email') }}" required autofocus />
                        </div>

                        <button type="submit" class="ark__submit-btn" id="submitBtn">
                            <span class="btn-text">Send Reset Link</span>
                            <span class="btn-loading" style="display: none;">Sending...</span>
                        </button>

                        <p class="ark__login-link">
                            Remembered your password? <a href="{{ route('login') }}">Log In</a>
                        </p>
                    </form>
                </div>

                <div class="ark__round-one"></div>
                <div class="ark__round-two"></div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('styles')

@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('forgotPasswordForm');
        const btn = document.getElementById('submitBtn');
        const popup = document.getElementById('successPopup');
        const emailDisplay = document.getElementById('sentEmail');

        @if(session('status') === 'success')
        // Show success popup
        document.querySelector('form').style.display = 'none';
        popup.style.display = 'block';
        emailDisplay.textContent = "{{ old('email') }}";
        @endif

        form.addEventListener('submit', function(e) {
            e.preventDefault();

            const email = document.getElementById('email').value;

            btn.disabled = true;
            btn.querySelector('.btn-text').style.display = 'none';
            btn.querySelector('.btn-loading').style.display = 'inline';

            setTimeout(() => {
                form.style.display = 'none';
                popup.style.display = 'block';
                emailDisplay.textContent = email;
            }, 1500);
        });

    });
</script>
@endsection