<?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="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 p-3 lg:p-4">
    <div class="max-w-8xl mx-auto">
        <!-- Alerts -->
                        
        <!-- 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="../grant-application.html" 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">Individual Grant</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:flex items-center justify-between mb-4">
            <div class="flex items-center space-x-2">
                <a href="../grant-application.html" class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-500 dark:text-gray-400 border border-gray-200 dark:border-gray-600 transition-colors">
                    <i class="fas fa-arrow-left text-xs"></i>
                </a>
                <h1 class="text-xl font-bold text-gray-900 dark:text-white">Individual Grant Application</h1>
            </div>
        </div>

        <div class="bg-white/95 dark:bg-gray-800/95 backdrop-blur-xl rounded-xl shadow-sm border border-white/20 dark:border-gray-700/50 overflow-hidden mb-4">
            <div class="bg-gradient-to-r from-primary-50/80 to-white/80 dark:from-primary-900/20 dark:to-gray-800/80 backdrop-blur-sm border-b border-gray-100/50 dark:border-gray-700/50 px-4 py-3">
                <h2 class="text-lg font-medium text-gray-900 dark:text-white flex items-center">
                    <i class="fas fa-user mr-2 text-primary-500 dark:text-primary-400 text-sm"></i>
                    Apply as Individual
                </h2>
            </div>
            
            <div class="p-4 lg:p-5">
                <form action="individual.html" method="POST">
                    <input type="hidden" name="_token" value="7Y8Vjj7Q0b4avHu1m1nlxIaJ65D9nEHYo7NLXHO9">                    
                                        
                    <div class="space-y-5 mb-6">
                        <div>
                            <label for="requested_amount" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Requested Amount <span class="text-red-500">*</span></label>
                            <div class="mt-1 relative rounded-lg shadow-sm">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none z-10">
                                    <span class="text-gray-500 dark:text-gray-400 text-sm">$</span>
                                </div>
                                <input type="number" name="requested_amount" id="requested_amount" min="1" value="5000" class="shadow-sm focus:ring-primary-500 focus:border-primary-500 px-2 py-2.5 pl-12 border block w-full text-sm border-gray-300 dark:border-gray-600 rounded-lg bg-white/90 dark:bg-gray-700/90 backdrop-blur-sm text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 relative z-0" required>
                            </div>
                            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Enter the amount you would like to request for your grant</p>
                                                    </div>
                    </div>

                    <div class="text-gray-700 dark:text-gray-300 mb-4">
                        <p class="text-sm">Please select all funding purposes that apply to your application:</p>
                    </div>
                    
                    <div class="space-y-4 mb-6">
                        <div class="bg-white/80 dark:bg-gray-700/80 backdrop-blur-sm border border-gray-200/50 dark:border-gray-600/50 rounded-lg p-3 transition-all hover:shadow-sm">
                            <div class="flex items-start">
                                <div class="flex items-center h-5">
                                    <input id="program_funding" name="program_funding" type="checkbox" value="1" 
                                           class="h-4 w-4 text-primary-600 border-gray-300 dark:border-gray-600 dark:bg-gray-700 rounded focus:ring-primary-500">
                                </div>
                                <div class="ml-3">
                                    <label for="program_funding" class="text-sm font-medium text-gray-900 dark:text-white">Program Funding</label>
                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                        Support for developing or expanding educational, cultural, or social programs.
                                    </p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-white/80 dark:bg-gray-700/80 backdrop-blur-sm border border-gray-200/50 dark:border-gray-600/50 rounded-lg p-3 transition-all hover:shadow-sm">
                            <div class="flex items-start">
                                <div class="flex items-center h-5">
                                    <input id="equipment_funding" name="equipment_funding" type="checkbox" value="1" 
                                           class="h-4 w-4 text-primary-600 border-gray-300 dark:border-gray-600 dark:bg-gray-700 rounded focus:ring-primary-500">
                                </div>
                                <div class="ml-3">
                                    <label for="equipment_funding" class="text-sm font-medium text-gray-900 dark:text-white">Equipment Funding</label>
                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                        Support for purchasing necessary equipment or technology.
                                    </p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-white/80 dark:bg-gray-700/80 backdrop-blur-sm border border-gray-200/50 dark:border-gray-600/50 rounded-lg p-3 transition-all hover:shadow-sm">
                            <div class="flex items-start">
                                <div class="flex items-center h-5">
                                    <input id="research_funding" name="research_funding" type="checkbox" value="1" 
                                           class="h-4 w-4 text-primary-600 border-gray-300 dark:border-gray-600 dark:bg-gray-700 rounded focus:ring-primary-500">
                                </div>
                                <div class="ml-3">
                                    <label for="research_funding" class="text-sm font-medium text-gray-900 dark:text-white">Research Funding</label>
                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                        Support for conducting research or studies in your field.
                                    </p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-white/80 dark:bg-gray-700/80 backdrop-blur-sm border border-gray-200/50 dark:border-gray-600/50 rounded-lg p-3 transition-all hover:shadow-sm">
                            <div class="flex items-start">
                                <div class="flex items-center h-5">
                                    <input id="community_outreach" name="community_outreach" type="checkbox" value="1" 
                                           class="h-4 w-4 text-primary-600 border-gray-300 dark:border-gray-600 dark:bg-gray-700 rounded focus:ring-primary-500">
                                </div>
                                <div class="ml-3">
                                    <label for="community_outreach" class="text-sm font-medium text-gray-900 dark:text-white">Community Outreach</label>
                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                        Support for activities that benefit local communities or underserved populations.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-gradient-to-r from-blue-50/80 to-indigo-50/80 dark:from-blue-900/20 dark:to-indigo-900/20 backdrop-blur-sm border border-blue-200/50 dark:border-blue-700/50 rounded-lg p-4 mb-6">
                        <div class="flex items-start">
                            <div class="flex-shrink-0">
                                <div class="h-8 w-8 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center">
                                    <i class="fas fa-info-circle text-blue-600 dark:text-blue-400 text-sm"></i>
                                </div>
                            </div>
                            <div class="ml-3">
                                <h4 class="text-sm font-medium text-gray-900 dark:text-white mb-1">Important Information</h4>
                                <p class="text-sm text-gray-600 dark:text-gray-300">
                                    By submitting this application, you acknowledge that the final approved amount will be determined during our review process based on your eligibility and requested amount. You'll receive notification once your application has been processed.
                                </p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex flex-col sm:flex-row justify-end space-y-2 sm:space-y-0 sm:space-x-3">
                        <a href="../grant-application.html" class="inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 shadow-sm text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300 bg-white/80 dark:bg-gray-700/80 backdrop-blur-sm hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-colors">
                            <i class="fas fa-arrow-left mr-2 text-xs"></i>
                            Back
                        </a>
                        <button type="submit" disabled class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-lg text-white bg-gradient-to-r from-primary-600 to-primary-700 opacity-50 cursor-not-allowed">
                            Submit Application
                            <i class="fas fa-paper-plane ml-2 text-xs"></i>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
                                </div>
                <?php include 'footer.php'; ?>