<?php
// Ensure no output before session_start
if (ob_get_level()) { ob_end_clean(); }
ob_start();
session_start();
require_once 'config.php';

$error_message = '';
$success_message = '';

// Handle form submission
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $email = isset($_POST['email']) ? trim($_POST['email']) : '';
    
    if (empty($email)) {
        $error_message = "Please enter your email address.";
    } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $error_message = "Please enter a valid email address.";
    } else {
        // Check if user exists
        $stmt = $conn->prepare("SELECT id, username, email, role, account_status FROM agents WHERE email = ?");
        $stmt->bind_param("s", $email);
        $stmt->execute();
        $result = $stmt->get_result();
        $user = $result->fetch_assoc();
        $stmt->close();
        
        if ($user) {
            // Check if user account is active (not blocked)
            if ($user['role'] == 'blocked' || $user['account_status'] == 'inactive') {
                $error_message = "Your account is currently inactive. Please contact support.";
            } else {
                // Generate OTP and token
                $otp_code = str_pad(random_int(100000, 999999), 6, '0', STR_PAD_LEFT);
                $token = bin2hex(random_bytes(32));
                $token_hash = password_hash($token, PASSWORD_DEFAULT);
                $expires_at = date('Y-m-d H:i:s', time() + 900); // 15 minutes from now
                
                // Get user's IP and user agent
                $ip_address = $_SERVER['REMOTE_ADDR'] ?? 'unknown';
                $user_agent = $_SERVER['HTTP_USER_AGENT'] ?? 'unknown';
                
                // Clean up any existing tokens for this user
                $cleanup_stmt = $conn->prepare("DELETE FROM password_reset_tokens WHERE user_id = ? OR email = ?");
                $cleanup_stmt->bind_param("is", $user['id'], $email);
                $cleanup_stmt->execute();
                $cleanup_stmt->close();
                
                // Insert new token
                $insert_stmt = $conn->prepare("
                    INSERT INTO password_reset_tokens (user_id, email, otp_code, token_hash, expires_at, ip_address, user_agent) 
                    VALUES (?, ?, ?, ?, ?, ?, ?)
                ");
                $insert_stmt->bind_param("issssss", $user['id'], $email, $otp_code, $token_hash, $expires_at, $ip_address, $user_agent);
                
                if ($insert_stmt->execute()) {
                // Send OTP email using NotificationManager
                require_once 'app/classes/NotificationManager.php';
                $notificationManager = new NotificationManager($conn);
                
                $subject = "Password Reset OTP - D-Bundles Stores";
                $message = "
                <html>
                <head>
                    <title>Password Reset OTP</title>
                </head>
                <body style='font-family: Arial, sans-serif; line-height: 1.6; color: #333;'>
                    <div style='max-width: 600px; margin: 0 auto; padding: 20px;'>
                        <div style='text-align: center; margin-bottom: 30px;'>
                            <h1 style='color: #0ea5e9; margin: 0;'>D-Bundles Stores</h1>
                            <p style='color: #666; margin: 5px 0;'>Agent Portal</p>
                        </div>
                        
                        <div style='background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 30px; margin-bottom: 20px;'>
                            <h2 style='color: #1e293b; margin-top: 0;'>Password Reset Request</h2>
                            <p>Hello <strong>" . htmlspecialchars($user['username']) . "</strong>,</p>
                            <p>You have requested to reset your password. Use the OTP code below to verify your identity:</p>
                            
                            <div style='background: #0ea5e9; color: white; padding: 20px; border-radius: 8px; text-align: center; margin: 20px 0;'>
                                <h3 style='margin: 0; font-size: 32px; letter-spacing: 5px; font-family: monospace;'>" . $otp_code . "</h3>
                            </div>
                            
                            <p><strong>Important:</strong></p>
                            <ul style='color: #64748b;'>
                                <li>This OTP is valid for 15 minutes only</li>
                                <li>You have 3 attempts to enter the correct OTP</li>
                                <li>Do not share this code with anyone</li>
                                <li>If you didn't request this, please ignore this email</li>
                            </ul>
                        </div>
                        
                        <div style='text-align: center; color: #64748b; font-size: 14px;'>
                            <p>This is an automated message from D-Bundles Stores Agent Portal.</p>
                            <p>If you have any questions, please contact our support team.</p>
                        </div>
                    </div>
                </body>
                </html>
                ";
                
                // Try to send email using NotificationManager
                $emailSent = false;
                try {
                    // Use the correct method signature for NotificationManager
                    $emailSent = $notificationManager->sendEmail($email, $subject, $message);
                } catch (Exception $e) {
                    error_log("Failed to send OTP email via NotificationManager: " . $e->getMessage());
                }
                
                // Fallback to basic mail() if NotificationManager fails
                if (!$emailSent) {
                    $headers = [
                        'MIME-Version: 1.0',
                        'Content-type: text/html; charset=UTF-8',
                        'From: D-Bundles Stores <noreply@megabytehub.com>',
                        'Reply-To: support@megabytehub.com',
                        'X-Mailer: PHP/' . phpversion()
                    ];
                    $emailSent = mail($email, $subject, $message, implode("\r\n", $headers));
                }
                
                    if ($emailSent) {
                        // Store token in session for verification
                        $_SESSION['password_reset_token'] = $token;
                        $_SESSION['password_reset_email'] = $email;
                        $_SESSION['password_reset_user_id'] = $user['id'];
                        
                        $success_message = "OTP has been sent to your email address. Please check your inbox and enter the 6-digit code.";
                    } else {
                        $error_message = "Failed to send OTP email. Please try again later.";
                    }
                } else {
                    $error_message = "Failed to generate reset token. Please try again.";
                }
                $insert_stmt->close();
            }
        } else {
            // Don't reveal if email exists or not for security
            $success_message = "If an account with this email exists, an OTP has been sent to your email address.";
        }
    }
}

// Get contact configuration
require_once 'app/classes/ContactConfig.php';
$contactConfig = new ContactConfig($conn);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <title>Forgot Password | D-Bundles Stores</title>
    <meta name="description" content="Reset your D-Bundles Stores agent account password - secure OTP verification process.">
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <style>
        /* Premium Dark Theme Base */
        body {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
            background-attachment: fixed;
        }
        
        /* Custom Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(5deg); }
        }
        
        @keyframes glowPulse {
            0%, 100% { 
                box-shadow: 0 0 20px rgba(251, 191, 36, 0.4), 0 0 40px rgba(251, 191, 36, 0.2);
            }
            50% { 
                box-shadow: 0 0 30px rgba(251, 191, 36, 0.6), 0 0 60px rgba(251, 191, 36, 0.3);
            }
        }
        
        @keyframes borderGlow {
            0%, 100% {
                border-color: rgba(251, 191, 36, 0.5);
                box-shadow: 0 0 20px rgba(251, 191, 36, 0.3), inset 0 0 20px rgba(251, 191, 36, 0.1);
            }
            50% {
                border-color: rgba(251, 191, 36, 0.8);
                box-shadow: 0 0 30px rgba(251, 191, 36, 0.5), inset 0 0 30px rgba(251, 191, 36, 0.2);
            }
        }
        
        @keyframes iconFloat {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-8px); }
        }
        
        /* Premium Glass Effect */
        .glass-card {
            background: rgba(30, 41, 59, 0.7);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .glass-card-light {
            background: rgba(51, 65, 85, 0.6);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }
        
        /* Neon Glow Effects */
        .neon-glow-subtle {
            box-shadow: 0 0 15px rgba(251, 191, 36, 0.3), 0 0 30px rgba(251, 191, 36, 0.1);
        }
        
        .text-glow-subtle {
            text-shadow: 0 0 10px rgba(251, 191, 36, 0.4), 0 0 20px rgba(251, 191, 36, 0.2);
        }
        
        .hover-glow:hover {
            box-shadow: 0 0 20px rgba(251, 191, 36, 0.4), 0 0 40px rgba(251, 191, 36, 0.2);
        }
        
        .icon-glow {
            filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6));
        }
        
        .logo-glow {
            animation: borderGlow 3s ease-in-out infinite;
            box-shadow: 0 0 20px rgba(251, 191, 36, 0.4), inset 0 0 20px rgba(251, 191, 36, 0.1);
        }
        
        .golden-glow {
            animation: glowPulse 2s ease-in-out infinite;
            box-shadow: 0 0 20px rgba(251, 191, 36, 0.4), 0 0 40px rgba(251, 191, 36, 0.2);
        }
        
        /* Premium Input Focus */
        .premium-input:focus {
            border-color: #fbbf24;
            box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.2), 
                        0 0 20px rgba(251, 191, 36, 0.4),
                        0 0 40px rgba(251, 191, 36, 0.2);
            outline: none;
        }
        
        /* Animated Gradient Border Button */
        .gradient-border-btn {
            position: relative;
            background: linear-gradient(135deg, #f59e0b 0%, #eab308 100%);
            border: none;
            overflow: hidden;
        }
        
        .gradient-border-btn::before {
            content: '';
            position: absolute;
            inset: -2px;
            background: linear-gradient(135deg, #fbbf24, #f59e0b, #eab308, #fbbf24);
            background-size: 200% 200%;
            border-radius: inherit;
            z-index: -1;
            animation: gradientShift 3s ease infinite;
            opacity: 0.8;
        }
        
        @keyframes gradientShift {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
        
        /* Floating Icon Animation */
        .float-icon {
            animation: iconFloat 3s ease-in-out infinite;
        }
        
        /* Fade In Animations */
        .fade-in-up {
            animation: fadeInUp 0.8s ease-out forwards;
        }
        
        .fade-in {
            animation: fadeIn 1s ease-out forwards;
        }
        
        .fade-in-delay-1 {
            animation: fadeInUp 0.8s ease-out 0.1s forwards;
            opacity: 0;
        }
        
        .fade-in-delay-2 {
            animation: fadeInUp 0.8s ease-out 0.2s forwards;
            opacity: 0;
        }
        
        .fade-in-delay-3 {
            animation: fadeInUp 0.8s ease-out 0.3s forwards;
            opacity: 0;
        }
        
        /* Enhanced Feature Card Hover */
        .feature-card {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .feature-card:hover {
            transform: translateY(-4px) scale(1.02);
            border-color: rgba(251, 191, 36, 0.6);
        }
        
        /* Background Pattern */
        .bg-pattern::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: 
                radial-gradient(circle at 25% 25%, rgba(251, 191, 36, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 75% 75%, rgba(251, 191, 36, 0.05) 0%, transparent 50%);
            background-size: 200px 200px;
            opacity: 0.5;
        }
    </style>
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        'poppins': ['Poppins', 'sans-serif'],
                        'space': ['Space Grotesk', 'sans-serif'],
                    },
                    colors: {
                        primary: {
                            50: '#f0f9ff',
                            100: '#e0f2fe',
                            200: '#bae6fd',
                            300: '#7dd3fc',
                            400: '#38bdf8',
                            500: '#0ea5e9',
                            600: '#0284c7',
                            700: '#0369a1',
                            800: '#075985',
                            900: '#0c4a6e',
                        },
                        accent: {
                            50: '#fdf4ff',
                            100: '#fae8ff',
                            200: '#f5d0fe',
                            300: '#f0abfc',
                            400: '#e879f9',
                            500: '#d946ef',
                            600: '#c026d3',
                            700: '#a21caf',
                            800: '#86198f',
                            900: '#701a75',
                        },
                        dark: {
                            50: '#f8fafc',
                            100: '#f1f5f9',
                            200: '#e2e8f0',
                            300: '#cbd5e1',
                            400: '#94a3b8',
                            500: '#64748b',
                            600: '#475569',
                            700: '#334155',
                            800: '#1e293b',
                            900: '#0f172a',
                        }
                    },
                    animation: {
                        'float': 'float 6s ease-in-out infinite',
                        'glow': 'glowPulse 2s ease-in-out infinite',
                        'fade-in-up': 'fadeInUp 0.8s ease-out',
                        'fade-in': 'fadeIn 1s ease-out',
                        'icon-float': 'iconFloat 3s ease-in-out infinite',
                    }
                }
            }
        }
    </script>
</head>

<body class="min-h-screen font-poppins relative bg-pattern">
    <!-- Animated Background Elements -->
    <div class="fixed inset-0 overflow-hidden pointer-events-none">
        <div class="absolute top-20 left-20 w-96 h-96 bg-amber-500/10 rounded-full blur-3xl animate-pulse"></div>
        <div class="absolute bottom-20 right-20 w-96 h-96 bg-yellow-500/10 rounded-full blur-3xl animate-pulse" style="animation-delay: 1s;"></div>
    </div>
    
    <div class="relative min-h-screen flex">
        <!-- Left Column - Information -->
        <div class="hidden lg:flex lg:w-1/2 relative overflow-hidden bg-gradient-to-br from-[#1e293b] via-[#0f172a] to-[#1e293b]">
            
            <div class="relative z-10 flex flex-col justify-center px-12 py-12 w-full text-white fade-in">
                <!-- Logo and Branding -->
                <div class="mb-8 fade-in-up">
                    <div class="flex items-center mb-6">
                        <div class="w-14 h-14 bg-gradient-to-br from-amber-500 to-yellow-600 rounded-xl flex items-center justify-center mr-4 logo-glow">
                            <i class="fas fa-key text-white text-xl icon-glow float-icon"></i>
                        </div>
                        <div>
                            <h1 class="text-3xl font-bold font-space text-white text-glow-subtle">D-Bundles Stores</h1>
                            <p class="text-gray-400 text-sm font-normal">Password Reset</p>
                        </div>
                    </div>
                    <h2 class="text-4xl font-bold font-space mb-3 text-white text-glow-subtle">Reset Your Password</h2>
                    <p class="text-lg text-gray-400 leading-relaxed">
                        Secure password reset with OTP verification. Your account security is our priority.
                    </p>
                </div>

                <!-- Security Features -->
                <div class="mb-8">
                    <div class="grid grid-cols-2 gap-4">
                        <div class="glass-card-light rounded-lg p-4 border border-slate-600/50 feature-card fade-in-delay-1">
                            <div class="w-10 h-10 bg-amber-500/10 rounded-lg flex items-center justify-center mb-3">
                                <i class="fas fa-shield-check text-amber-400 icon-glow float-icon"></i>
                            </div>
                            <h3 class="font-semibold text-sm mb-1 text-white">Secure OTP</h3>
                            <p class="text-xs text-gray-400">6-digit verification</p>
                        </div>
                        <div class="glass-card-light rounded-lg p-4 border border-slate-600/50 feature-card fade-in-delay-1">
                            <div class="w-10 h-10 bg-amber-500/10 rounded-lg flex items-center justify-center mb-3">
                                <i class="fas fa-clock text-amber-400 icon-glow float-icon"></i>
                            </div>
                            <h3 class="font-semibold text-sm mb-1 text-white">15 Min Expiry</h3>
                            <p class="text-xs text-gray-400">Time-limited access</p>
                        </div>
                        <div class="glass-card-light rounded-lg p-4 border border-slate-600/50 feature-card fade-in-delay-2">
                            <div class="w-10 h-10 bg-amber-500/10 rounded-lg flex items-center justify-center mb-3">
                                <i class="fas fa-lock text-amber-400 icon-glow float-icon"></i>
                            </div>
                            <h3 class="font-semibold text-sm mb-1 text-white">3 Attempts</h3>
                            <p class="text-xs text-gray-400">Maximum tries</p>
                        </div>
                        <div class="glass-card-light rounded-lg p-4 border border-slate-600/50 feature-card fade-in-delay-2">
                            <div class="w-10 h-10 bg-amber-500/10 rounded-lg flex items-center justify-center mb-3">
                                <i class="fas fa-envelope text-amber-400 icon-glow float-icon"></i>
                            </div>
                            <h3 class="font-semibold text-sm mb-1 text-white">Email Verified</h3>
                            <p class="text-xs text-gray-400">Secure delivery</p>
                        </div>
                    </div>
                </div>

                <!-- Contact & Support -->
                <div class="space-y-4 fade-in-delay-3">
                    <div class="glass-card-light rounded-xl p-4 border border-slate-600/50">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-10 h-10 bg-green-500 rounded-lg flex items-center justify-center mr-3 shadow-lg">
                                    <i class="fab fa-whatsapp text-white"></i>
                                </div>
                                <div>
                                    <h3 class="font-semibold text-sm text-white">WhatsApp Support</h3>
                                    <p class="text-xs text-gray-400">Get help quickly</p>
                                </div>
                            </div>
                            <a href="<?= htmlspecialchars($contactConfig->getWhatsAppGroupLink()) ?>" target="_blank" 
                               class="px-3 py-1 bg-green-500 text-white rounded-lg text-xs font-medium hover:bg-green-600 transition-colors hover-glow">
                                Join
                            </a>
                        </div>
                    </div>
                    
                    <div class="flex items-center justify-between text-sm">
                        <div class="flex items-center text-gray-300">
                            <i class="fas fa-phone mr-2 text-gray-400"></i>
                            <span><?= htmlspecialchars($contactConfig->getContactPhone()) ?></span>
                        </div>
                        <div class="flex items-center text-gray-300">
                            <i class="fas fa-envelope mr-2 text-gray-400"></i>
                            <span><?= htmlspecialchars($contactConfig->getContactEmail()) ?></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right Column - Forgot Password Form -->
        <div class="w-full lg:w-1/2 flex items-center justify-center px-4 sm:px-6 lg:px-12 py-8">
            <div class="w-full max-w-md">
                <!-- Mobile Logo -->
                <div class="lg:hidden text-center mb-8 fade-in-up">
                    <div class="flex items-center justify-center mb-4">
                        <div class="w-16 h-16 bg-gradient-to-br from-amber-500 to-yellow-600 rounded-2xl flex items-center justify-center mr-3 logo-glow">
                            <i class="fas fa-key text-white text-2xl icon-glow float-icon"></i>
                        </div>
                        <div class="text-left">
                            <h1 class="text-2xl font-bold text-white font-space text-glow-subtle">D-Bundles Stores</h1>
                            <p class="text-gray-400 text-sm font-normal">Password Reset</p>
                        </div>
                    </div>
                </div>

                <!-- Mobile Contact Information -->
                <div class="lg:hidden mb-6 fade-in-delay-1">
                    <div class="glass-card-light border border-slate-600/50 rounded-2xl p-4 shadow-lg">
                        <h3 class="text-white font-semibold text-center mb-4 flex items-center justify-center">
                            <i class="fas fa-headset mr-2"></i>
                            Need Help?
                        </h3>
                        
                        <!-- WhatsApp Support -->
                        <div class="glass-card border border-slate-600/50 rounded-xl p-3 mb-3">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 bg-green-500 rounded-lg flex items-center justify-center mr-3 shadow-lg">
                                        <i class="fab fa-whatsapp text-white text-sm"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-semibold text-sm text-white">WhatsApp Support</h4>
                                        <p class="text-xs text-gray-400">Get help quickly</p>
                                    </div>
                                </div>
                                <a href="<?= htmlspecialchars($contactConfig->getWhatsAppGroupLink()) ?>" target="_blank" 
                                   class="px-3 py-1 bg-green-500 text-white rounded-lg text-xs font-medium hover:bg-green-600 transition-colors hover-glow">
                                    Join
                                </a>
                            </div>
                        </div>
                        
                        <!-- Contact Details -->
                        <div class="space-y-2">
                            <div class="flex items-center justify-center text-sm text-gray-300">
                                <i class="fas fa-phone mr-2 text-gray-400"></i>
                                <span><?= htmlspecialchars($contactConfig->getContactPhone()) ?></span>
                            </div>
                            <div class="flex items-center justify-center text-sm text-gray-300">
                                <i class="fas fa-envelope mr-2 text-gray-400"></i>
                                <span><?= htmlspecialchars($contactConfig->getContactEmail()) ?></span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Forgot Password Form -->
                <div class="glass-card rounded-xl shadow-2xl p-8 neon-glow-subtle fade-in-delay-2">
                        <div class="text-center mb-8">
                        <div class="w-14 h-14 bg-gradient-to-br from-amber-500 to-yellow-600 rounded-xl flex items-center justify-center mx-auto mb-4 logo-glow">
                            <i class="fas fa-key text-white text-xl icon-glow float-icon"></i>
                            </div>
                        <h2 class="text-2xl font-bold text-white font-space mb-2 text-glow-subtle">Forgot Password?</h2>
                        <p class="text-gray-400">Enter your email to receive a reset OTP</p>
                        </div>

                        <form method="POST" class="space-y-5">
                            <!-- Error/Success Messages -->
                            <?php if (!empty($error_message)): ?>
                        <div class="bg-red-500/10 border border-red-500/30 text-red-400 px-4 py-3 rounded-xl flex items-start backdrop-blur-sm animate-fade-in">
                            <i class="fas fa-exclamation-triangle mr-3 mt-0.5 text-red-400 icon-glow"></i>
                                <span class="text-sm font-medium"><?php echo htmlspecialchars($error_message); ?></span>
                            </div>
                            <?php endif; ?>

                            <?php if (!empty($success_message)): ?>
                        <div class="bg-green-500/10 border border-green-500/30 text-green-400 px-4 py-3 rounded-xl flex items-start backdrop-blur-sm animate-fade-in">
                            <i class="fas fa-check-circle mr-3 mt-0.5 text-green-400 icon-glow"></i>
                                <div>
                                    <span class="text-sm font-medium"><?php echo htmlspecialchars($success_message); ?></span>
                                    <?php if (isset($_SESSION['password_reset_token'])): ?>
                                    <div class="mt-3">
                                    <a href="verify_otp.php" class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-amber-500 to-yellow-600 text-white text-sm font-medium rounded-lg hover:from-amber-600 hover:to-yellow-700 transition-all golden-glow hover-glow">
                                            <i class="fas fa-arrow-right mr-2"></i>
                                            Verify OTP
                                        </a>
                                    </div>
                                    <?php endif; ?>
                                </div>
                            </div>
                            <?php endif; ?>

                            <!-- Email Field -->
                            <div>
                            <label for="email" class="block text-sm font-medium text-gray-300 mb-2">
                                    Email Address
                                </label>
                                <div class="relative">
                                    <input 
                                        id="email" 
                                        name="email" 
                                        type="email" 
                                        required 
                                    class="premium-input w-full px-4 py-2.5 pl-11 bg-[#0f172a]/80 backdrop-blur-sm border border-slate-600 text-white rounded-lg transition-all duration-300 placeholder-gray-500"
                                        placeholder="Enter your registered email"
                                        value="<?php echo htmlspecialchars($email ?? ''); ?>"
                                        autocomplete="email"
                                    >
                                <div class="absolute inset-y-0 left-0 flex items-center pl-3">
                                    <i class="fas fa-envelope text-gray-500 text-sm transition-colors"></i>
                                    </div>
                                </div>
                            </div>

                            <!-- Submit Button -->
                            <button 
                                type="submit" 
                            class="gradient-border-btn w-full text-white py-2.5 px-4 rounded-lg font-medium focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-[#1e293b] transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98] relative z-10"
                            >
                            <span class="relative z-10 flex items-center justify-center">
                                <i class="fas fa-paper-plane mr-2"></i>
                                Send Reset OTP
                            </span>
                            </button>
                        </form>

                        <!-- Back to Login -->
                        <div class="mt-6 text-center">
                        <a href="login.php" class="text-amber-400 hover:text-amber-300 font-medium text-sm transition-colors">
                                <i class="fas fa-arrow-left mr-2"></i>
                                Back to Login
                            </a>
                        </div>

                        <!-- Security Notice -->
                    <div class="mt-6 text-center fade-in-delay-3">
                        <div class="flex justify-center items-center flex-wrap gap-4 text-xs">
                            <div class="flex items-center text-gray-400 hover:text-green-400 transition-colors">
                                <i class="fas fa-shield-check mr-1 text-green-500 icon-glow"></i>
                                    <span class="font-medium">Secure</span>
                                </div>
                            <div class="flex items-center text-gray-400 hover:text-green-400 transition-colors">
                                <i class="fas fa-lock mr-1 text-green-500 icon-glow"></i>
                                    <span class="font-medium">Encrypted</span>
                                </div>
                            <div class="flex items-center text-gray-400 hover:text-green-400 transition-colors">
                                <i class="fas fa-user-shield mr-1 text-green-500 icon-glow"></i>
                                    <span class="font-medium">Protected</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Add some interactive effects
        document.addEventListener('DOMContentLoaded', function() {
            // Add focus effects to form inputs
            const inputs = document.querySelectorAll('input[type="email"]');
            inputs.forEach(input => {
                input.addEventListener('focus', function() {
                    this.parentElement.classList.add('ring-2', 'ring-primary-500');
                });
                
                input.addEventListener('blur', function() {
                    this.parentElement.classList.remove('ring-2', 'ring-primary-500');
                });
            });

            // Add loading state to submit button
            const form = document.querySelector('form');
            const submitBtn = document.querySelector('button[type="submit"]');
            
            form.addEventListener('submit', function() {
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Sending OTP...';
                submitBtn.disabled = true;
            });
        });
    </script>
</body>
</html>
