<?php include 'master.php'; ?>
     
                    
    

                <!-- Main Content -->
                <main class="flex-1 overflow-y-auto bg-gray-50 dark:bg-gray-900 min-h-0">
                    <div class="h-full overflow-y-auto">
                        
<div class="p-4 space-y-4">
    <!-- Mobile Header -->
    <div class="lg:hidden mb-2">
        <div class="lg:hidden" x-data="{ showMobileNotifications: false }">
    <!-- Header Section -->
    <div class="flex items-center justify-between mb-6">
        <div class="flex items-center space-x-2">
                            <!-- Back Button -->
                <a href="account-settings" class="w-10 h-10 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center backdrop-blur-sm transition-all duration-200 hover:bg-gray-200 dark:hover:bg-gray-700 mr-2">
                    <i class="fa-solid fa-arrow-left text-gray-700 dark:text-gray-300 text-base"></i>
                </a>
                        
            <div>
                                    <!-- Custom Title -->
                    <p class="text-gray-900 dark:text-white font-semibold text-base">Two-Factor Authentication</p>
                            </div>
        </div>
        
        <div class="flex items-center space-x-2">
              <!-- Dark Mode Toggle -->
             <!--   <button @click="toggleDarkMode()" 
                        class="w-10 h-10 bg-white/10 dark:bg-white/20 rounded-full flex items-center justify-center backdrop-blur-sm transition-all duration-200 hover:bg-white/20 dark:hover:bg-white/30">
                    <i x-show="!darkMode" class="fa-solid fa-moon text-white text-base"></i>
                    <i x-show="darkMode" class="fa-solid fa-sun text-yellow-400 text-base"></i>
                </button> 

                <!-- Notifications -->
             <!--   <div class="relative">
                    <button @click="showMobileNotifications = !showMobileNotifications" class="w-10 h-10 bg-white/10 dark:bg-white/20 rounded-full flex items-center justify-center backdrop-blur-sm transition-all duration-200 hover:bg-white/20 dark:hover:bg-white/30">
                        <i class="fa-solid fa-bell text-white text-base"></i>
                    </button>
                                                        </div>-->
                    </div>
    </div>

            <!-- Mobile Notifications Panel -->
        <div x-show="showMobileNotifications" 
             x-transition:enter="transition ease-out duration-300" 
             x-transition:enter-start="opacity-0 -translate-y-4" 
             x-transition:enter-end="opacity-100 translate-y-0"
             x-transition:leave="transition ease-in duration-200" 
             x-transition:leave-start="opacity-100 translate-y-0" 
             x-transition:leave-end="opacity-0 -translate-y-4"
             class="fixed inset-0 z-50 bg-black/20 backdrop-blur-sm" 
             @click="showMobileNotifications = false">
            
            <div @click.stop class="absolute top-0 left-0 right-0 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950 text-white rounded-b-3xl shadow-2xl dark:shadow-slate-900/50 max-h-[80vh] overflow-hidden">
                <!-- Header -->
                <div class="flex items-center justify-between p-4 border-b border-white/10 dark:border-white/20">
                    <div class="flex items-center space-x-3">
                        <div class="w-10 h-10 bg-white/10 dark:bg-white/20 rounded-2xl flex items-center justify-center">
                            <i class="fa-solid fa-bell text-white text-sm"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-bold text-white">Notifications</h3>
                                                                                        <p class="text-xs text-white/60">All caught up!</p>
                                                    </div>
                    </div>
                    <button @click="showMobileNotifications = false" class="w-8 h-8 bg-white/10 dark:bg-white/20 rounded-xl flex items-center justify-center hover:bg-white/20 dark:hover:bg-white/30 transition-colors">
                        <i class="fa-solid fa-times text-white text-sm"></i>
                    </button>
                </div>

                <!-- Notifications List -->
                <div class="overflow-y-auto max-h-96 custom-scrollbar">
                                        
                                        <div class="p-8 text-center">
                        <div class="w-16 h-16 bg-white/10 dark:bg-white/20 rounded-3xl flex items-center justify-center mx-auto mb-4">
                            <i class="fa-solid fa-bell-slash text-white/40 dark:text-white/60 text-2xl"></i>
                        </div>
                        <p class="text-white font-semibold mb-1">No notifications yet</p>
                        <p class="text-xs text-white/60 dark:text-white/70">We'll notify you when something happens</p>
                    </div>
                                    </div>
                
                <!-- Footer Actions -->
                            </div>
        </div>
    </div>     </div>

    <!-- Desktop Header -->
    <div class="hidden lg:block">
        <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-xl rounded-2xl shadow-lg dark:shadow-gray-900/50 border border-white/20 dark:border-gray-700/50 p-4">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-lg font-bold text-gray-900 dark:text-white">Two-Factor Authentication</h1>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Add an extra layer of security to your account</p>
                </div>
                <div class="w-8 h-8 bg-primary-500 rounded-xl flex items-center justify-center">
                    <i class="fa-solid fa-shield text-white text-sm"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
        <!-- Main Content Area -->
        <div class="lg:col-span-2">
            <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-xl rounded-2xl shadow-lg dark:shadow-gray-900/50 border border-white/20 dark:border-gray-700/50 overflow-hidden">
                <!-- Content Header -->
                <div class="border-b border-gray-200/50 dark:border-gray-700/50 px-4 py-3">
                    <div class="flex items-center">
                        <div class="w-6 h-6 bg-primary-500 rounded-lg flex items-center justify-center mr-2">
                            <i class="fa-solid fa-shield text-white text-xs"></i>
                        </div>
                        <div>
                            <h2 class="text-sm font-bold text-gray-900 dark:text-white">Email-Based Two-Factor Authentication</h2>
                            <p class="text-xs text-gray-500 dark:text-gray-400">Add an extra layer of security to your account</p>
                        </div>
                    </div>
                </div>
                
                <div class="p-4">
                    <!-- Alerts -->
                                                            
                    <!-- Status Badge -->
                    <div class="flex items-center mb-3">
                                                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-700/50 text-gray-700 dark:text-gray-300">
                                <i class="fa-solid fa-shield-exclamation text-xs mr-1"></i> Disabled
                            </span>
                                                <span class="ml-2 text-gray-500 dark:text-gray-400 text-xs">Current Status</span>
                    </div>
                    
                    <p class="text-gray-600 dark:text-gray-300 mb-3 text-xs">
                        When enabled, a 6-digit verification code will be sent to your email address <strong class="text-primary-600 dark:text-primary-400"><?php echo htmlspecialchars($_SESSION['email'] ?? ''); ?></strong> each time you log in to your account.
                    </p>

                    <!-- How it Works Card -->
                    <div class="bg-blue-50 dark:bg-blue-900/20 rounded-xl p-3 border border-blue-100 dark:border-blue-800/50 mb-4">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <i class="fa-solid fa-info-circle text-blue-500 text-sm"></i>
                            </div>
                            <div class="ml-2">
                                <h3 class="text-xs font-medium text-blue-800 dark:text-blue-300">How Two-Factor Authentication Works</h3>
                                <div class="mt-1 text-xs text-blue-700 dark:text-blue-400">
                                    <ul class="list-disc pl-3 space-y-0.5">
                                        <li>When you log in with your password, a 6-digit code will be sent to your email</li>
                                        <li>You must enter this code to complete your login</li>
                                        <li>This adds an extra layer of security to your account</li>
                                        <li>The code expires after 10 minutes for security</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Toggle Button -->
                    <form action="" method="POST">
                        <input type="hidden" name="_token" value="7Y8Vjj7Q0b4avHu1m1nlxIaJ65D9nEHYo7NLXHO9">                        <button type="submit" disabled class="px-3 py-2 border rounded-xl text-xs font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors border-transparent text-white bg-gray-400 cursor-not-allowed opacity-60">
    <i class="fa-solid fa-shield text-xs mr-1"></i> Enable Two-Factor Authentication
</button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Security Tips Sidebar -->
        <div class="lg:col-span-1">
            <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-xl rounded-2xl shadow-lg dark:shadow-gray-900/50 border border-white/20 dark:border-gray-700/50 overflow-hidden">
                <!-- Header -->
                <div class="border-b border-gray-200/50 dark:border-gray-700/50 px-4 py-3">
                    <div class="flex items-center">
                        <div class="w-6 h-6 bg-primary-500 rounded-lg flex items-center justify-center mr-2">
                            <i class="fa-solid fa-lightbulb text-white text-xs"></i>
                        </div>
                        <h3 class="text-sm font-bold text-gray-900 dark:text-white">Security Tips</h3>
                    </div>
                </div>
                
                <!-- Tips List -->
                <div class="p-4">
                    <ul class="space-y-2">
                        <li class="flex items-start">
                            <i class="fa-solid fa-check-circle text-green-500 text-xs mr-2 mt-0.5 flex-shrink-0"></i>
                            <span class="text-gray-700 dark:text-gray-300 text-xs">Use a strong, unique password</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa-solid fa-check-circle text-green-500 text-xs mr-2 mt-0.5 flex-shrink-0"></i>
                            <span class="text-gray-700 dark:text-gray-300 text-xs">Enable two-factor authentication</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa-solid fa-check-circle text-green-500 text-xs mr-2 mt-0.5 flex-shrink-0"></i>
                            <span class="text-gray-700 dark:text-gray-300 text-xs">Keep your email secure</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa-solid fa-check-circle text-green-500 text-xs mr-2 mt-0.5 flex-shrink-0"></i>
                            <span class="text-gray-700 dark:text-gray-300 text-xs">Log out when using shared devices</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa-solid fa-check-circle text-green-500 text-xs mr-2 mt-0.5 flex-shrink-0"></i>
                            <span class="text-gray-700 dark:text-gray-300 text-xs">Regularly check your account activity</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

                                </div>
    <?php include 'footer.php'; ?>