<?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 = '';

// Check if user has a valid reset session
if (!isset($_SESSION['password_reset_token']) || !isset($_SESSION['password_reset_email']) || !isset($_SESSION['password_reset_user_id'])) {
    header('Location: forgot_password.php');
    exit();
}

$email = $_SESSION['password_reset_email'];
$user_id = $_SESSION['password_reset_user_id'];

// Handle form submission
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $new_password = isset($_POST['new_password']) ? trim($_POST['new_password']) : '';
    $confirm_password = isset($_POST['confirm_password']) ? trim($_POST['confirm_password']) : '';
    
    // Validation
    if (empty($new_password)) {
        $error_message = "Please enter a new password.";
    } elseif (strlen($new_password) < 8) {
        $error_message = "Password must be at least 8 characters long.";
    } elseif (!preg_match('/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/', $new_password)) {
        $error_message = "Password must contain at least one lowercase letter, one uppercase letter, and one number.";
    } elseif ($new_password !== $confirm_password) {
        $error_message = "Passwords do not match.";
    } else {
        // Verify the token is still valid and not used
        $stmt = $conn->prepare("
            SELECT id, used_at 
            FROM password_reset_tokens 
            WHERE user_id = ? AND email = ? AND expires_at > NOW() AND used_at IS NOT NULL
            ORDER BY created_at DESC 
            LIMIT 1
        ");
        $stmt->bind_param("is", $user_id, $email);
        $stmt->execute();
        $result = $stmt->get_result();
        $token_data = $result->fetch_assoc();
        $stmt->close();
        
        if ($token_data) {
            // Hash the new password
            $password_hash = password_hash($new_password, PASSWORD_DEFAULT);
            
            // Update user's password
            $update_stmt = $conn->prepare("UPDATE agents SET password_hash = ? WHERE id = ?");
            $update_stmt->bind_param("si", $password_hash, $user_id);
            
            if ($update_stmt->execute()) {
                // Clean up all reset tokens for this user
                $cleanup_stmt = $conn->prepare("DELETE FROM password_reset_tokens WHERE user_id = ?");
                $cleanup_stmt->bind_param("i", $user_id);
                $cleanup_stmt->execute();
                $cleanup_stmt->close();
                
                // Clear session
                unset($_SESSION['password_reset_token']);
                unset($_SESSION['password_reset_email']);
                unset($_SESSION['password_reset_user_id']);
                
                $success_message = "Password has been reset successfully! You can now login with your new password.";
            } else {
                $error_message = "Failed to update password. Please try again.";
            }
            $update_stmt->close();
        } else {
            $error_message = "Invalid or expired reset session. Please request a new password reset.";
            
            // Clear session
            unset($_SESSION['password_reset_token']);
            unset($_SESSION['password_reset_email']);
            unset($_SESSION['password_reset_user_id']);
        }
    }
}

// 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>Reset Password | D-Bundles Stores</title>
    <meta name="description" content="Set your new password for your D-Bundles Stores agent account.">
    
    <!-- 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">
    
    <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': 'glow 2s ease-in-out infinite alternate',
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0px)' },
                            '50%': { transform: 'translateY(-20px)' },
                        },
                        glow: {
                            '0%': { boxShadow: '0 0 20px rgba(217, 70, 239, 0.3)' },
                            '100%': { boxShadow: '0 0 30px rgba(217, 70, 239, 0.6)' },
                        }
                    }
                }
            }
        }
    </script>
</head>

    <style>
        /* Premium Dark Theme Base - Purple Palette */
        body {
            background: linear-gradient(135deg, #34146C 0%, #4C066C 50%, #34146C 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(239, 171, 16, 0.4), 0 0 40px rgba(239, 171, 16, 0.2);
            }
            50% { 
                box-shadow: 0 0 30px rgba(239, 171, 16, 0.6), 0 0 60px rgba(239, 171, 16, 0.3);
            }
        }
        
        @keyframes borderGlow {
            0%, 100% {
                border-color: rgba(239, 171, 16, 0.5);
                box-shadow: 0 0 20px rgba(239, 171, 16, 0.3), inset 0 0 20px rgba(239, 171, 16, 0.1);
            }
            50% {
                border-color: rgba(239, 171, 16, 0.8);
                box-shadow: 0 0 30px rgba(239, 171, 16, 0.5), inset 0 0 30px rgba(239, 171, 16, 0.2);
            }
        }
        
        @keyframes iconFloat {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-8px); }
        }
        
        /* Premium Glass Effect */
        .glass-card {
            background: rgba(52, 20, 108, 0.3);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .glass-card-light {
            background: rgba(76, 6, 108, 0.25);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }
        
        /* Neon Glow Effects */
        .neon-glow-subtle {
            box-shadow: 0 0 15px rgba(239, 171, 16, 0.3), 0 0 30px rgba(239, 171, 16, 0.1);
        }
        
        .text-glow-subtle {
            text-shadow: 0 0 10px rgba(239, 171, 16, 0.4), 0 0 20px rgba(239, 171, 16, 0.2);
        }
        
        .hover-glow:hover {
            box-shadow: 0 0 20px rgba(239, 171, 16, 0.4), 0 0 40px rgba(239, 171, 16, 0.2);
        }
        
        .icon-glow {
            filter: drop-shadow(0 0 8px rgba(239, 171, 16, 0.6));
        }
        
        .logo-glow {
            animation: borderGlow 3s ease-in-out infinite;
            box-shadow: 0 0 20px rgba(239, 171, 16, 0.4), inset 0 0 20px rgba(239, 171, 16, 0.1);
        }
        
        .golden-glow {
            animation: glowPulse 2s ease-in-out infinite;
            box-shadow: 0 0 20px rgba(239, 171, 16, 0.4), 0 0 40px rgba(239, 171, 16, 0.2);
        }
        
        /* Premium Input Focus */
        .premium-input:focus {
            border-color: #EFAB10;
            box-shadow: 0 0 0 3px rgba(239, 171, 16, 0.2), 
                        0 0 20px rgba(239, 171, 16, 0.4),
                        0 0 40px rgba(239, 171, 16, 0.2);
            outline: none;
        }
        
        /* Animated Gradient Border Button */
        .gradient-border-btn {
            position: relative;
            background: linear-gradient(135deg, #EFAB10 0%, #F5B841 100%);
            border: none;
            overflow: hidden;
        }
        
        .gradient-border-btn::before {
            content: '';
            position: absolute;
            inset: -2px;
            background: linear-gradient(135deg, #EFAB10, #F5B841, #EFAB10);
            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(239, 171, 16, 0.6);
        }
        
        /* Background Pattern */
        .bg-pattern::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: 
                radial-gradient(circle at 25% 25%, rgba(239, 171, 16, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 75% 75%, rgba(239, 171, 16, 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 rounded-full blur-3xl animate-pulse" style="background: rgba(239, 171, 16, 0.1);"></div>
        <div class="absolute bottom-20 right-20 w-96 h-96 rounded-full blur-3xl animate-pulse" style="background: rgba(239, 171, 16, 0.1); 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-[#34146C] via-[#4C066C] to-[#34146C]">
            <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-[#EFAB10] to-[#F5B841] rounded-xl flex items-center justify-center mr-4 logo-glow">
                            <i class="fas fa-lock 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-300 text-sm font-normal">Password Reset</p>
                        </div>
                    </div>
                    <h2 class="text-4xl font-bold font-space mb-3 text-white text-glow-subtle">Set New Password</h2>
                    <p class="text-lg text-gray-300 leading-relaxed">
                        Create a strong, secure password for your account. Your security is our priority.
                    </p>
                </div>

                <!-- Password Requirements -->
                <div class="mb-8 fade-in-delay-1">
                    <div class="glass-card-light rounded-xl p-6 border border-white/10">
                        <h3 class="font-semibold text-lg mb-4 flex items-center text-white">
                            <i class="fas fa-shield-alt mr-2 icon-glow"></i>
                            Password Requirements
                        </h3>
                        <ul class="space-y-2 text-sm text-gray-300">
                            <li class="flex items-start">
                                <i class="fas fa-check mr-2 mt-1 text-[#EFAB10] icon-glow"></i>
                                At least 8 characters long
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check mr-2 mt-1 text-[#EFAB10] icon-glow"></i>
                                Contains uppercase letter (A-Z)
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check mr-2 mt-1 text-[#EFAB10] icon-glow"></i>
                                Contains lowercase letter (a-z)
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check mr-2 mt-1 text-[#EFAB10] icon-glow"></i>
                                Contains number (0-9)
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- Security Tips -->
                <div class="glass-card-light rounded-xl p-4 border border-[#EFAB10]/30 fade-in-delay-2">
                    <div class="flex items-start">
                        <i class="fas fa-lightbulb mr-3 mt-1 text-[#EFAB10] icon-glow"></i>
                        <div>
                            <h4 class="font-semibold text-sm text-[#EFAB10] mb-1">Security Tips</h4>
                            <p class="text-xs text-gray-300">
                                Use a unique password that you haven't used elsewhere. Consider using a password manager for better security.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right Column - Password Reset 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">
                    <div class="flex items-center justify-center mb-4">
                        <div class="w-16 h-16 bg-gradient-to-br from-primary-600 to-accent-600 rounded-2xl flex items-center justify-center mr-3 animate-glow">
                            <i class="fas fa-lock text-white text-2xl"></i>
                        </div>
                        <div class="text-left">
                            <h1 class="text-2xl font-bold text-gray-900 font-space">D-Bundles Stores</h1>
                            <p class="text-gray-600 text-sm font-medium">Password Reset</p>
                        </div>
                    </div>
                </div>

                <!-- Password Reset Form -->
                <div class="bg-white/80 backdrop-blur-sm rounded-3xl shadow-2xl p-8 border border-white/20 relative overflow-hidden">
                    <!-- Decorative Elements -->
                    <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-primary-100 to-accent-100 rounded-full -translate-y-16 translate-x-16 opacity-50"></div>
                    <div class="absolute bottom-0 left-0 w-24 h-24 bg-gradient-to-tr from-accent-100 to-primary-100 rounded-full translate-y-12 -translate-x-12 opacity-50"></div>
                    
                    <div class="relative z-10">
                        <div class="text-center mb-8">
                            <div class="w-16 h-16 bg-gradient-to-br from-primary-600 to-accent-600 rounded-2xl flex items-center justify-center mx-auto mb-4 animate-glow">
                                <i class="fas fa-lock text-white text-2xl"></i>
                            </div>
                            <h2 class="text-3xl font-bold text-gray-900 font-space mb-2">Set New Password</h2>
                            <p class="text-gray-600 font-medium">Create a strong password for your account</p>
                        </div>

                        <form method="POST" class="space-y-5">
                            <!-- Error/Success Messages -->
                            <?php if (!empty($error_message)): ?>
                            <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-xl flex items-start backdrop-blur-sm">
                                <i class="fas fa-exclamation-triangle mr-3 mt-0.5 text-red-500"></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-50 border border-green-200 text-green-700 px-4 py-3 rounded-xl flex items-start backdrop-blur-sm">
                                <i class="fas fa-check-circle mr-3 mt-0.5 text-green-500"></i>
                                <div>
                                    <span class="text-sm font-medium"><?php echo htmlspecialchars($success_message); ?></span>
                                    <div class="mt-3">
                                        <a href="login.php" class="inline-flex items-center px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-lg hover:bg-green-700 transition-colors">
                                            <i class="fas fa-sign-in-alt mr-2"></i>
                                            Login Now
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <?php endif; ?>

                            <!-- New Password Field -->
                            <div>
                                <label for="new_password" class="block text-sm font-semibold text-gray-700 mb-2">
                                    New Password
                                </label>
                                <div class="relative">
                                    <input 
                                        id="new_password" 
                                        name="new_password" 
                                        type="password" 
                                        required 
                                        class="w-full px-4 py-3.5 pl-12 pr-12 bg-white/70 backdrop-blur-sm border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all duration-200 placeholder-gray-400"
                                        placeholder="Enter new password"
                                        autocomplete="new-password"
                                    >
                                    <div class="absolute inset-y-0 left-0 flex items-center pl-4">
                                        <i class="fas fa-lock text-gray-400"></i>
                                    </div>
                                    <button type="button" onclick="togglePassword('new_password')" class="absolute inset-y-0 right-0 flex items-center pr-4 text-gray-400 hover:text-gray-600 transition-colors">
                                        <i id="new_passwordToggle" class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>

                            <!-- Confirm Password Field -->
                            <div>
                                <label for="confirm_password" class="block text-sm font-semibold text-gray-700 mb-2">
                                    Confirm Password
                                </label>
                                <div class="relative">
                                    <input 
                                        id="confirm_password" 
                                        name="confirm_password" 
                                        type="password" 
                                        required 
                                        class="w-full px-4 py-3.5 pl-12 pr-12 bg-white/70 backdrop-blur-sm border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all duration-200 placeholder-gray-400"
                                        placeholder="Confirm new password"
                                        autocomplete="new-password"
                                    >
                                    <div class="absolute inset-y-0 left-0 flex items-center pl-4">
                                        <i class="fas fa-lock text-gray-400"></i>
                                    </div>
                                    <button type="button" onclick="togglePassword('confirm_password')" class="absolute inset-y-0 right-0 flex items-center pr-4 text-gray-400 hover:text-gray-600 transition-colors">
                                        <i id="confirm_passwordToggle" class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>

                            <!-- Password Strength Indicator -->
                            <div id="passwordStrength" class="hidden">
                                <div class="text-sm text-gray-600 mb-2">Password Strength:</div>
                                <div class="flex space-x-1">
                                    <div class="h-2 bg-gray-200 rounded flex-1"></div>
                                    <div class="h-2 bg-gray-200 rounded flex-1"></div>
                                    <div class="h-2 bg-gray-200 rounded flex-1"></div>
                                    <div class="h-2 bg-gray-200 rounded flex-1"></div>
                                </div>
                                <div id="strengthText" class="text-xs mt-1"></div>
                            </div>

                            <!-- Submit Button -->
                            <button 
                                type="submit" 
                                class="w-full bg-gradient-to-r from-primary-600 to-accent-600 text-white py-3.5 px-4 rounded-xl font-bold hover:from-primary-700 hover:to-accent-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-all duration-200 transform hover:scale-[1.02] shadow-lg"
                            >
                                <i class="fas fa-save mr-2"></i>
                                Reset Password
                            </button>
                        </form>

                        <!-- Back to Login -->
                        <div class="mt-6 text-center">
                            <a href="login.php" class="text-primary-600 hover:text-primary-500 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">
                            <div class="flex justify-center items-center space-x-6 text-xs text-gray-500">
                                <div class="flex items-center">
                                    <i class="fas fa-shield-check mr-1 text-green-500"></i>
                                    <span class="font-medium">Secure</span>
                                </div>
                                <div class="flex items-center">
                                    <i class="fas fa-lock mr-1 text-green-500"></i>
                                    <span class="font-medium">Encrypted</span>
                                </div>
                                <div class="flex items-center">
                                    <i class="fas fa-user-shield mr-1 text-green-500"></i>
                                    <span class="font-medium">Protected</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function togglePassword(fieldId) {
            const passwordField = document.getElementById(fieldId);
            const toggleIcon = document.getElementById(fieldId + 'Toggle');
            
            if (passwordField.type === 'password') {
                passwordField.type = 'text';
                toggleIcon.classList.remove('fa-eye');
                toggleIcon.classList.add('fa-eye-slash');
            } else {
                passwordField.type = 'password';
                toggleIcon.classList.remove('fa-eye-slash');
                toggleIcon.classList.add('fa-eye');
            }
        }

        // Password strength checker
        function checkPasswordStrength(password) {
            let strength = 0;
            const strengthIndicator = document.getElementById('passwordStrength');
            const strengthBars = strengthIndicator.querySelectorAll('.h-2');
            const strengthText = document.getElementById('strengthText');
            
            if (password.length >= 8) strength++;
            if (/[a-z]/.test(password)) strength++;
            if (/[A-Z]/.test(password)) strength++;
            if (/\d/.test(password)) strength++;
            if (/[^A-Za-z0-9]/.test(password)) strength++;
            
            // Update visual indicator
            strengthBars.forEach((bar, index) => {
                bar.className = 'h-2 rounded flex-1 ' + (index < strength ? 
                    (strength < 2 ? 'bg-red-400' : strength < 4 ? 'bg-yellow-400' : 'bg-green-400') : 
                    'bg-gray-200');
            });
            
            // Update text
            const strengthLevels = ['Very Weak', 'Weak', 'Fair', 'Good', 'Strong'];
            strengthText.textContent = strengthLevels[Math.min(strength - 1, 4)] || 'Very Weak';
            strengthText.className = 'text-xs mt-1 ' + (strength < 2 ? 'text-red-600' : strength < 4 ? 'text-yellow-600' : 'text-green-600');
        }

        // Add some interactive effects
        document.addEventListener('DOMContentLoaded', function() {
            const newPasswordField = document.getElementById('new_password');
            const confirmPasswordField = document.getElementById('confirm_password');
            const strengthIndicator = document.getElementById('passwordStrength');
            
            // Show/hide password strength indicator
            newPasswordField.addEventListener('input', function() {
                if (this.value.length > 0) {
                    strengthIndicator.classList.remove('hidden');
                    checkPasswordStrength(this.value);
                } else {
                    strengthIndicator.classList.add('hidden');
                }
            });
            
            // Real-time password confirmation
            confirmPasswordField.addEventListener('input', function() {
                const newPassword = newPasswordField.value;
                const confirmPassword = this.value;
                
                if (confirmPassword.length > 0) {
                    if (newPassword === confirmPassword) {
                        this.classList.remove('border-red-300');
                        this.classList.add('border-green-300');
                    } else {
                        this.classList.remove('border-green-300');
                        this.classList.add('border-red-300');
                    }
                } else {
                    this.classList.remove('border-red-300', 'border-green-300');
                }
            });
            
            // Add focus effects to form inputs
            const inputs = document.querySelectorAll('input[type="password"]');
            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>Resetting Password...';
                submitBtn.disabled = true;
            });
        });
    </script>
</body>
</html>
