<?php
require_once __DIR__ . '/config/bootstrap.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Forgot Password — DroidTester</title>
    <meta name="description" content="Reset your DroidTester publisher account password.">
    <link rel="canonical" href="<?= e(APP_URL) ?>/forgot-password">
    <meta name="theme-color" content="#1B7A43">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/assets/css/style.css">
    <link rel="stylesheet" href="/assets/css/landing.css">
    <link rel="stylesheet" href="/assets/css/auth.css">
    <link rel="stylesheet" href="/assets/css/responsive.css">
</head>
<body class="auth-page">

    <nav class="navbar navbar-expand-lg public-navbar">
        <div class="container">
            <a class="navbar-brand-custom" href="/">
                <div class="navbar-logo-icon"><i class="bi bi-gear-fill"></i></div>
                DroidTester
            </a>
            <div class="d-flex gap-2 ms-auto auth-nav-btns">
                <a href="/login" class="btn-outline-green" style="padding:8px 20px;font-size:13px;">Login</a>
                <a href="/register" class="btn-dark-custom" style="padding:8px 20px;font-size:13px;">Register <i class="bi bi-arrow-right"></i></a>
            </div>
        </div>
    </nav>

    <div class="auth-content">
        <div class="auth-container" style="max-width:520px;margin:0 auto">
            <div class="auth-badge text-center">
                <span class="badge-green"><i class="bi bi-shield-lock-fill" style="color:#2e9f60"></i> Account Recovery</span>
            </div>
            <h1 class="auth-title text-center">Forgot Password?</h1>
            <p class="auth-subtitle text-center mx-auto">Enter your registered email and we'll send you a reset link.</p>

            <div class="auth-form-col mt-4">
                <form id="forgotForm" autocomplete="on">
                    <div class="auth-input-pill">
                        <div class="input-icon-circle"><i class="bi bi-envelope-fill"></i></div>
                        <input type="email" id="forgotEmail" name="email" placeholder="Email Address" required autocomplete="email">
                    </div>
                    <button type="submit" class="auth-btn-main">Send Reset Link <i class="bi bi-send-fill ms-2"></i></button>
                </form>
                <div class="forgot-password-link mt-4 text-center">
                    <a href="/login"><i class="bi bi-arrow-left"></i> Back to Login</a>
                </div>
            </div>
        </div>
    </div>

    <div class="auth-mini-footer">
        <div>
            <a href="/privacy-policy">Privacy Policy</a>
            <span class="separator">|</span>
            <a href="/terms-condition">Terms &amp; Condition</a>
        </div>
        <span class="copyright">© <?= date('Y') ?> DroidTester | Zodroid Media</span>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
    const Toast = Swal.mixin({
        toast: true, position: 'top-end', showConfirmButton: false,
        timer: 4000, timerProgressBar: true
    });

    document.getElementById('forgotForm').addEventListener('submit', async function(e) {
        e.preventDefault();
        const btn = this.querySelector('button[type="submit"]');
        const orig = btn.innerHTML;
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status"></span> Sending...';

        try {
            const fd = new FormData(this);
            const res = await fetch('/api/auth/forgot', { method: 'POST', body: fd });
            const data = await res.json();
            if (data.status === 'success') {
                Toast.fire({ icon: 'success', title: data.message });
                document.getElementById('forgotEmail').value = '';
            } else {
                Toast.fire({ icon: 'error', title: data.message });
            }
        } catch {
            Toast.fire({ icon: 'error', title: 'Network error. Please try again.' });
        } finally {
            btn.disabled = false;
            btn.innerHTML = orig;
        }
    });
    </script>
</body>
</html>
