<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
    <meta name="description" content="Bishnupriya Manipuri Youth Association - Empowering Youth, Preserving Culture">
    <meta name="keywords" content="BMYA, Bishnupriya Manipuri, Youth Association, Manipur, Tripura, Bangladesh">
    <meta name="author" content="BMYA">
    <title><?php echo defined('SITE_NAME') ? SITE_NAME : 'BMYA'; ?></title>
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="assets/images/favicon.ico">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon.png">
    <link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicon.png">
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 6 -->
    <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&display=swap" rel="stylesheet">
    <!-- AOS Animation -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="assets/css/style.css" rel="stylesheet">
    
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Poppins', sans-serif;
            background: #f0f2f5;
            overflow-x: hidden;
            padding-top: 80px;
        }
        
        /* ============================================
           NAVBAR STYLES - SKY WHITE MIX SILVER
        ============================================ */
        .navbar {
            background: linear-gradient(135deg, #E8F4FD 0%, #D3D8E8 50%, #C0C5D1 100%);
            padding: 0.8rem 2rem;
            box-shadow: 0 5px 20px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
        }
        
        .navbar.scrolled {
            padding: 0.5rem 2rem;
            background: linear-gradient(135deg, #DCE8F5 0%, #C5CBD9 50%, #B0B5C4 100%);
            box-shadow: 0 5px 25px rgba(0,0,0,0.15);
        }
        
        .navbar-brand {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .navbar-brand img {
            height: 50px;
            width: auto;
            border-radius: 12px;
            transition: transform 0.3s ease;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
        }
        
        .navbar-brand img:hover {
            transform: scale(1.05);
        }
        
        .brand-text {
            display: flex;
            flex-direction: column;
        }
        
        .brand-text .brand-name {
            font-size: 1.2rem;
            font-weight: 700;
            background: linear-gradient(135deg, #2c3e50, #1a5276);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            line-height: 1.2;
        }
        
        .brand-text .brand-tagline {
            font-size: 0.7rem;
            color: #5a6e7c;
            letter-spacing: 1px;
        }
        
        /* Navigation Links */
        .navbar-nav {
            gap: 5px;
        }
        
        .nav-link {
            color: #2c3e50 !important;
            font-weight: 500;
            padding: 8px 18px !important;
            border-radius: 30px;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .nav-link i {
            margin-right: 8px;
            font-size: 0.9rem;
            color: #3498db;
        }
        
        .nav-link:hover {
            color: #1a5276 !important;
            background: rgba(52,152,219,0.1);
            transform: translateY(-2px);
        }
        
        .nav-link:hover i {
            color: #2980b9;
        }
        
        .nav-link.active {
            color: white !important;
            background: linear-gradient(135deg, #3498db, #2c3e50);
            box-shadow: 0 5px 15px rgba(52,152,219,0.3);
        }
        
        .nav-link.active i {
            color: white !important;
        }
        
        /* Toggle Button */
        .navbar-toggler {
            border: none;
            padding: 10px;
            border-radius: 12px;
            background: rgba(52,152,219,0.15);
            transition: all 0.3s ease;
        }
        
        .navbar-toggler:focus {
            box-shadow: none;
            outline: none;
        }
        
        .navbar-toggler:hover {
            background: rgba(52,152,219,0.25);
        }
        
        .navbar-toggler-icon {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(44,62,80,0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }
        
        /* ============================================
           USER DROPDOWN
        ============================================ */
        .user-dropdown .dropdown-toggle {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 5px 12px 5px 5px;
            border-radius: 50px;
            background: rgba(52,152,219,0.1);
            transition: all 0.3s ease;
        }
        
        .user-dropdown .dropdown-toggle:hover {
            background: rgba(52,152,219,0.2);
        }
        
        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #3498db;
            transition: all 0.3s ease;
        }
        
        .user-avatar:hover {
            transform: scale(1.05);
            border-color: #2c3e50;
        }
        
        .user-name {
            font-weight: 500;
            font-size: 0.9rem;
            color: #2c3e50;
        }
        
        .dropdown-menu {
            border: none;
            border-radius: 16px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.15);
            margin-top: 12px;
            padding: 8px 0;
            min-width: 260px;
            animation: fadeInDown 0.3s ease;
        }
        
        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-15px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .dropdown-header {
            padding: 12px 20px;
            background: linear-gradient(135deg, #E8F4FD, #D3D8E8);
            border-radius: 16px 16px 0 0;
        }
        
        .dropdown-header .user-name-large {
            font-weight: 600;
            color: #2c3e50;
        }
        
        .dropdown-header .user-email {
            font-size: 0.75rem;
            color: #5a6e7c;
        }
        
        .dropdown-item {
            padding: 10px 20px;
            transition: all 0.3s ease;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            color: #2c3e50;
        }
        
        .dropdown-item i {
            width: 20px;
            color: #3498db;
        }
        
        .dropdown-item:hover {
            background: linear-gradient(135deg, #3498db, #2c3e50);
            color: white;
            transform: translateX(5px);
        }
        
        .dropdown-item:hover i {
            color: white;
        }
        
        .dropdown-item.text-danger:hover {
            background: linear-gradient(135deg, #e74c3c, #c0392b);
        }
        
        /* Logout Confirmation Modal */
        .logout-modal .modal-content {
            border-radius: 16px;
            overflow: hidden;
        }
        
        .logout-modal .modal-header {
            background: linear-gradient(135deg, #e74c3c, #c0392b);
            color: white;
            border: none;
        }
        
        .logout-modal .modal-footer {
            border: none;
            padding: 20px;
        }
        
        /* ============================================
           BUTTONS
        ============================================ */
        .btn-register {
            background: linear-gradient(135deg, #27ae60, #219a52);
            color: white !important;
            border-radius: 30px;
            padding: 8px 25px !important;
            margin: 0 5px;
            box-shadow: 0 2px 5px rgba(39,174,96,0.3);
        }
        
        .btn-register:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(39,174,96,0.4);
        }
        
        .btn-login {
            background: transparent;
            border: 1px solid #3498db;
            color: #3498db !important;
            border-radius: 30px;
            padding: 8px 25px !important;
        }
        
        .btn-login:hover {
            background: rgba(52,152,219,0.1);
            border-color: #2c3e50;
            color: #2c3e50 !important;
            transform: translateY(-2px);
        }
        
        /* ============================================
           LOADING SPINNER
        ============================================ */
        .spinner-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            z-index: 9999;
            display: none;
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(5px);
        }
        
        .spinner-overlay.show {
            display: flex;
        }
        
        .spinner {
            width: 60px;
            height: 60px;
            border: 4px solid rgba(255,255,255,0.3);
            border-top: 4px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* ============================================
           MOBILE RESPONSIVE
        ============================================ */
        @media (max-width: 991.98px) {
            body {
                padding-top: 70px;
            }
            
            .navbar {
                padding: 0.8rem 1rem;
            }
            
            .navbar-collapse {
                background: linear-gradient(135deg, #E8F4FD, #D3D8E8);
                padding: 20px;
                border-radius: 20px;
                margin-top: 15px;
                max-height: 80vh;
                overflow-y: auto;
            }
            
            .navbar-nav {
                gap: 8px;
            }
            
            .nav-link {
                text-align: center;
                padding: 12px !important;
                color: #2c3e50 !important;
            }
            
            .dropdown-menu {
                background: rgba(52,152,219,0.1);
                margin-top: 10px;
            }
            
            .dropdown-item {
                color: #2c3e50 !important;
                justify-content: center;
            }
            
            .dropdown-item:hover {
                background: rgba(52,152,219,0.2);
                transform: translateX(0);
            }
            
            .btn-register, .btn-login {
                display: block;
                text-align: center;
                margin: 10px 0;
            }
        }
        
        @media (max-width: 576px) {
            .navbar-brand img {
                height: 40px;
            }
            
            .brand-text .brand-name {
                font-size: 1rem;
            }
            
            .brand-text .brand-tagline {
                font-size: 0.6rem;
            }
            
            .user-avatar {
                width: 35px;
                height: 35px;
            }
        }
    </style>
</head>
<body>

<!-- Loading Spinner -->
<div class="spinner-overlay" id="loadingSpinner">
    <div class="spinner"></div>
</div>

<!-- Logout Confirmation Modal -->
<div class="modal fade logout-modal" id="logoutModal" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-sign-out-alt me-2"></i> Confirm Logout
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body text-center py-4">
                <i class="fas fa-question-circle fa-4x text-warning mb-3"></i>
                <h5>Are you sure you want to logout?</h5>
                <p class="text-muted mb-0">You will need to login again to access your account.</p>
            </div>
            <div class="modal-footer d-flex justify-content-center gap-3">
                <button type="button" class="btn btn-secondary px-4" data-bs-dismiss="modal">
                    <i class="fas fa-times me-2"></i> Cancel
                </button>
                <a href="logout.php" class="btn btn-danger px-4" id="confirmLogoutBtn">
                    <i class="fas fa-sign-out-alt me-2"></i> Logout
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Navbar -->
<nav class="navbar navbar-expand-lg" id="mainNavbar">
    <div class="container">
        <a class="navbar-brand" href="index.php">
            <?php
            $logoPath = 'assets/images/logo.png';
            if (file_exists('uploads/logo.png')) $logoPath = 'uploads/logo.png';
            elseif (file_exists('uploads/logo.jpg')) $logoPath = 'uploads/logo.jpg';
            ?>
            <img src="<?php echo $logoPath; ?>" alt="BMYO Logo" onerror="this.src='assets/images/logo.png'">
            <div class="brand-text">
                <span class="brand-name">BMYA</span>
                <span class="brand-tagline">Empowering Youth</span>
            </div>
        </a>
        
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMain">
            <span class="navbar-toggler-icon"></span>
        </button>
        
        <div class="collapse navbar-collapse" id="navbarMain">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link" href="index.php">
                        <i class="fas fa-home"></i> Home
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="about.php">
                        <i class="fas fa-info-circle"></i> About
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="contact.php">
                        <i class="fas fa-envelope"></i> Contact
                    </a>
                </li>
                
                <?php if (isset($_SESSION['user_id']) && !empty($_SESSION['user_id'])): ?>
                    <li class="nav-item">
                        <a class="nav-link" href="dashboard.php">
                            <i class="fas fa-tachometer-alt"></i> Dashboard
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="events.php">
                            <i class="fas fa-calendar-alt"></i> Events
                        </a>
                    </li>
                    
                    <!-- User Dropdown -->
                    <li class="nav-item dropdown user-dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <?php
                            $userPhoto = 'assets/images/default-avatar.png';
                            $userName = $_SESSION['user_name'] ?? 'Member';
                            $userEmail = $_SESSION['user_email'] ?? '';
                            
                            if (isset($_SESSION['user_photo']) && !empty($_SESSION['user_photo'])) {
                                $photoFile = 'uploads/' . $_SESSION['user_photo'];
                                if (file_exists($photoFile)) $userPhoto = $photoFile;
                            } elseif (isset($_SESSION['user_id']) && isset($pdo)) {
                                try {
                                    $stmt = $pdo->prepare("SELECT profile_photo, fullname, email FROM members WHERE id = ?");
                                    $stmt->execute([$_SESSION['user_id']]);
                                    $member = $stmt->fetch(PDO::FETCH_ASSOC);
                                    if ($member) {
                                        if (!empty($member['fullname'])) $userName = $member['fullname'];
                                        if (!empty($member['email'])) $userEmail = $member['email'];
                                        if (!empty($member['profile_photo']) && $member['profile_photo'] != 'default.jpg') {
                                            $photoFile = 'uploads/' . $member['profile_photo'];
                                            if (file_exists($photoFile)) $userPhoto = $photoFile;
                                        }
                                        $_SESSION['user_name'] = $userName;
                                        $_SESSION['user_email'] = $userEmail;
                                    }
                                } catch (Exception $e) {}
                            }
                            ?>
                            <img src="<?php echo $userPhoto; ?>" class="user-avatar" alt="Profile" onerror="this.src='assets/images/default-avatar.png'">
                            <span class="user-name d-none d-md-inline"><?php echo htmlspecialchars($userName); ?></span>
                            <i class="fas fa-chevron-down ms-1 d-none d-md-inline" style="font-size: 12px; color: #3498db;"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
                            <li class="dropdown-header">
                                <div class="fw-bold"><?php echo htmlspecialchars($userName); ?></div>
                                <small><?php echo htmlspecialchars($userEmail); ?></small>
                            </li>
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <a class="dropdown-item" href="profile.php">
                                    <i class="fas fa-user"></i> My Profile
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="id_card.php">
                                    <i class="fas fa-id-card"></i> ID Card
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="renew.php">
                                    <i class="fas fa-sync-alt"></i> Renew Membership
                                </a>
                            </li>
                            <li><hr class="dropdown-divider"></li>
                            <?php if (isset($_SESSION['user_role']) && $_SESSION['user_role'] === 'admin'): ?>
                                <li>
                                    <a class="dropdown-item" href="admin/dashboard.php">
                                        <i class="fas fa-shield-alt"></i> Admin Panel
                                    </a>
                                </li>
                                <li><hr class="dropdown-divider"></li>
                            <?php endif; ?>
                            <li>
                                <a class="dropdown-item text-danger" href="#" id="logoutBtn">
                                    <i class="fas fa-sign-out-alt"></i> Logout
                                </a>
                            </li>
                        </ul>
                    </li>
                <?php else: ?>
                    <li class="nav-item">
                        <a class="nav-link btn-register" href="register.php">
                            <i class="fas fa-user-plus me-2"></i> Register
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link btn-login" href="login.php">
                            <i class="fas fa-sign-in-alt me-2"></i> Login
                        </a>
                    </li>
                <?php endif; ?>
            </ul>
        </div>
    </div>
</nav>

<main class="main-content">

<script>
// ============================================
// NAVBAR SCROLL EFFECT
// ============================================
window.addEventListener('scroll', function() {
    const navbar = document.getElementById('mainNavbar');
    if (window.scrollY > 50) {
        navbar.classList.add('scrolled');
    } else {
        navbar.classList.remove('scrolled');
    }
});

// ============================================
// LOADER FUNCTIONS
// ============================================
function showLoader() {
    const spinner = document.getElementById('loadingSpinner');
    if (spinner) spinner.classList.add('show');
}

function hideLoader() {
    const spinner = document.getElementById('loadingSpinner');
    if (spinner) spinner.classList.remove('show');
}

// ============================================
// NOTIFICATION FUNCTION
// ============================================
function showNotification(message, type = 'success') {
    const notification = document.createElement('div');
    notification.className = `alert alert-${type} alert-dismissible fade show position-fixed top-0 end-0 m-3`;
    notification.style.zIndex = '9999';
    notification.style.minWidth = '300px';
    notification.style.maxWidth = '400px';
    notification.style.animation = 'slideDown 0.3s ease';
    notification.innerHTML = `
        <div class="d-flex align-items-center">
            <i class="fas fa-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-triangle' : 'info-circle'} fa-lg me-2"></i>
            <div class="flex-grow-1">${message}</div>
            <button type="button" class="btn-close ms-2" data-bs-dismiss="alert"></button>
        </div>
    `;
    document.body.appendChild(notification);
    
    setTimeout(() => {
        notification.style.opacity = '0';
        notification.style.transition = 'opacity 0.3s ease';
        setTimeout(() => notification.remove(), 300);
    }, 5000);
}

// ============================================
// LOGOUT FUNCTIONALITY
// ============================================
document.addEventListener('DOMContentLoaded', function() {
    const logoutBtn = document.getElementById('logoutBtn');
    const logoutModal = new bootstrap.Modal(document.getElementById('logoutModal'));
    const confirmLogoutBtn = document.getElementById('confirmLogoutBtn');
    
    if (logoutBtn) {
        logoutBtn.addEventListener('click', function(e) {
            e.preventDefault();
            logoutModal.show();
        });
    }
    
    if (confirmLogoutBtn) {
        confirmLogoutBtn.addEventListener('click', function(e) {
            showLoader();
        });
    }
});

// ============================================
// ACTIVE LINK HIGHLIGHT
// ============================================
document.addEventListener('DOMContentLoaded', function() {
    const currentPath = window.location.pathname.split('/').pop();
    const links = document.querySelectorAll('.navbar-nav .nav-link:not(.dropdown-toggle)');
    
    links.forEach(link => {
        const href = link.getAttribute('href');
        if (href && (href === currentPath || (currentPath === '' && href === 'index.php'))) {
            link.classList.add('active');
        }
    });
    
    const navbarCollapse = document.getElementById('navbarMain');
    const navLinks = document.querySelectorAll('.navbar-nav .nav-link');
    
    navLinks.forEach(link => {
        link.addEventListener('click', () => {
            if (window.innerWidth < 992 && navbarCollapse.classList.contains('show')) {
                const bsCollapse = bootstrap.Collapse.getInstance(navbarCollapse);
                if (bsCollapse) {
                    bsCollapse.hide();
                }
            }
        });
    });
});

// ============================================
// DROPDOWN TOGGLE ANIMATION
// ============================================
document.addEventListener('DOMContentLoaded', function() {
    const dropdownToggle = document.querySelectorAll('.user-dropdown .dropdown-toggle');
    dropdownToggle.forEach(toggle => {
        toggle.addEventListener('click', function() {
            const icon = this.querySelector('.fa-chevron-down');
            if (icon) {
                setTimeout(() => {
                    const isOpen = this.getAttribute('aria-expanded') === 'true';
                    if (isOpen) {
                        icon.style.transform = 'rotate(180deg)';
                    } else {
                        icon.style.transform = 'rotate(0deg)';
                    }
                }, 100);
            }
        });
    });
});
</script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>