<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);

session_start();
include 'config/db.php';

// Function to create tables automatically if they don't exist
function createTables($conn) {
    $sql = "
    -- Users table
    CREATE TABLE IF NOT EXISTS users (
        id INT AUTO_INCREMENT PRIMARY KEY,
        name VARCHAR(100) NOT NULL,
        email VARCHAR(100) UNIQUE NOT NULL,
        password VARCHAR(255) NOT NULL,
        mobile VARCHAR(15),
        address TEXT,
        role ENUM('user', 'admin') DEFAULT 'user',
        kyc_status ENUM('pending', 'approved', 'rejected') DEFAULT 'pending',
        kyc_doc VARCHAR(255),
        membership_active BOOLEAN DEFAULT TRUE,
        total_donation DECIMAL(10,2) DEFAULT 0.00,
        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
    );

    -- Donations / Payment proof table
    CREATE TABLE IF NOT EXISTS donations (
        id INT AUTO_INCREMENT PRIMARY KEY,
        user_id INT,
        amount DECIMAL(10,2) NOT NULL,
        payment_proof VARCHAR(255),
        status ENUM('pending', 'verified', 'rejected') DEFAULT 'pending',
        uploaded_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
        FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
    );

    -- Fund distribution records
    CREATE TABLE IF NOT EXISTS fund_distributions (
        id INT AUTO_INCREMENT PRIMARY KEY,
        description TEXT,
        amount DECIMAL(10,2) NOT NULL,
        distributed_to VARCHAR(255),
        date DATE
    );

    -- Withdrawal requests
    CREATE TABLE IF NOT EXISTS withdrawal_requests (
        id INT AUTO_INCREMENT PRIMARY KEY,
        requested_by INT,
        amount DECIMAL(10,2) NOT NULL,
        reason TEXT,
        status ENUM('pending', 'approved', 'rejected') DEFAULT 'pending',
        requested_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
        FOREIGN KEY (requested_by) REFERENCES users(id) ON DELETE CASCADE
    );

    -- Membership cancellation requests
    CREATE TABLE IF NOT EXISTS cancellation_requests (
        id INT AUTO_INCREMENT PRIMARY KEY,
        user_id INT,
        reason TEXT,
        status ENUM('pending', 'approved', 'rejected') DEFAULT 'pending',
        requested_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
        FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
    );

    -- Balance additions table for manual balance additions
    CREATE TABLE IF NOT EXISTS balance_additions (
        id INT AUTO_INCREMENT PRIMARY KEY,
        amount DECIMAL(10,2) NOT NULL,
        source VARCHAR(100) NOT NULL,
        description TEXT,
        added_by INT,
        added_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
        FOREIGN KEY (added_by) REFERENCES users(id) ON DELETE SET NULL
    );
    ";
    
    // Execute multi query
    if ($conn->multi_query($sql)) {
        do {
            if ($result = $conn->store_result()) {
                $result->free();
            }
        } while ($conn->next_result());
    }
    
    // Check if admin user exists
    $check_admin = $conn->query("SELECT * FROM users WHERE email='admin@example.com'");
    if($check_admin->num_rows == 0) {
        $admin_password = password_hash('admin123', PASSWORD_DEFAULT);
        $conn->query("INSERT INTO users (name, email, password, role, kyc_status, membership_active) VALUES 
        ('Admin User', 'admin@example.com', '$admin_password', 'admin', 'approved', 1)");
    }
}

// Try to create tables if they don't exist
try {
    createTables($conn);
} catch (Exception $e) {
    die("Database setup error: " . $e->getMessage());
}

// ========== CALCULATIONS ==========

// Get total donations (online verified)
$total_donations = 0;
$total_donations_query = $conn->query("SELECT SUM(amount) as total FROM donations WHERE status='verified'");
if($total_donations_query && $total_donations_query->num_rows > 0) {
    $total_donations = $total_donations_query->fetch_assoc()['total'] ?? 0;
}

// Get total manual balance additions (offline/cash)
$total_additions = 0;
$total_additions_query = $conn->query("SELECT SUM(amount) as total FROM balance_additions");
if($total_additions_query && $total_additions_query->num_rows > 0) {
    $total_additions = $total_additions_query->fetch_assoc()['total'] ?? 0;
}

// Get total distributed funds (expenses/deductions)
$total_distributed = 0;
$total_distributed_query = $conn->query("SELECT SUM(amount) as total FROM fund_distributions");
if($total_distributed_query && $total_distributed_query->num_rows > 0) {
    $total_distributed = $total_distributed_query->fetch_assoc()['total'] ?? 0;
}

// Calculate totals
$total_fund_received = $total_donations + $total_additions;
$available_balance = max(0, $total_fund_received - $total_distributed);

// Get total members
$total_members = 0;
$total_members_query = $conn->query("SELECT COUNT(*) as count FROM users WHERE kyc_status='approved' AND membership_active=1 AND role='user'");
if($total_members_query && $total_members_query->num_rows > 0) {
    $total_members = $total_members_query->fetch_assoc()['count'] ?? 0;
}

// ========== RECENT TRANSACTIONS - COMBINED AND SORTED BY DATE ==========

// Get all transactions from different tables and combine them
$transactions = array();

// Add donations
$donations_query = $conn->query("
    SELECT d.id, d.amount, d.uploaded_at as transaction_date, 'donation' as type, 
           u.name as donor_name, 'verified' as status, NULL as description, NULL as source, NULL as distributed_to
    FROM donations d 
    JOIN users u ON d.user_id = u.id 
    WHERE d.status='verified' 
    ORDER BY d.uploaded_at DESC
");
if($donations_query && $donations_query->num_rows > 0) {
    while($row = $donations_query->fetch_assoc()) {
        $transactions[] = $row;
    }
}

// Add balance additions
$additions_query = $conn->query("
    SELECT id, amount, added_at as transaction_date, 'balance_addition' as type, 
           NULL as donor_name, 'verified' as status, description, source, NULL as distributed_to
    FROM balance_additions 
    ORDER BY added_at DESC
");
if($additions_query && $additions_query->num_rows > 0) {
    while($row = $additions_query->fetch_assoc()) {
        $transactions[] = $row;
    }
}

// Add distributions (expenses) - Include full description
$distributions_query = $conn->query("
    SELECT id, amount, date as transaction_date, 'distribution' as type, 
           NULL as donor_name, 'completed' as status, description, NULL as source, distributed_to
    FROM fund_distributions 
    ORDER BY date DESC
");
if($distributions_query && $distributions_query->num_rows > 0) {
    while($row = $distributions_query->fetch_assoc()) {
        $transactions[] = $row;
    }
}

// Sort transactions by date (newest first)
usort($transactions, function($a, $b) {
    return strtotime($b['transaction_date']) - strtotime($a['transaction_date']);
});

// Limit to last 30 transactions
$recent_transactions = array_slice($transactions, 0, 30);

// Group transactions by date
$grouped_transactions = [];
foreach($recent_transactions as $transaction) {
    $date_key = date('Y-m-d', strtotime($transaction['transaction_date']));
    if(!isset($grouped_transactions[$date_key])) {
        $grouped_transactions[$date_key] = [];
    }
    $grouped_transactions[$date_key][] = $transaction;
}

// Get top donors
$top_donors = $conn->query("
    SELECT u.name, SUM(d.amount) as total 
    FROM donations d 
    JOIN users u ON d.user_id = u.id 
    WHERE d.status='verified' 
    GROUP BY u.id 
    ORDER BY total DESC 
    LIMIT 5
");

// If no data exists
$show_sample_message = false;
if($total_donations == 0 && $total_members == 0) {
    $show_sample_message = true;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title>Bishnupriya Manipuri Fund - Community Development</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            color: #333;
            line-height: 1.6;
        }

        /* ========== MODERN NAVIGATION BAR ========== */
        .navbar {
            background: linear-gradient(135deg, #1a3a1a 0%, #2c5f2d 100%);
            padding: 1rem 2rem;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            backdrop-filter: blur(10px);
        }

        .nav-container {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            transition: transform 0.3s;
        }

        .logo:hover {
            transform: scale(1.02);
        }

        .logo-img {
            width: 45px;
            height: 45px;
            object-fit: contain;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
        }

        .logo h1 {
            color: white;
            font-size: 1.3rem;
            font-weight: 700;
            letter-spacing: 1px;
        }

        .logo span {
            font-size: 0.65rem;
            color: #ffd700;
            display: block;
            letter-spacing: 2px;
        }

        .nav-links {
            display: flex;
            gap: 0.5rem;
            align-items: center;
            flex-wrap: wrap;
        }

        .nav-links a {
            color: rgba(255,255,255,0.9);
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s;
            padding: 0.6rem 1.2rem;
            border-radius: 50px;
            position: relative;
        }

        .nav-links a::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 2px;
            background: #ffd700;
            transition: width 0.3s;
        }

        .nav-links a:hover::before {
            width: 70%;
        }

        .nav-links a:hover {
            background: rgba(255,215,0,0.1);
            color: #ffd700;
            transform: translateY(-2px);
        }

        .btn-login {
            background: linear-gradient(135deg, #ffd700, #ffed4a);
            color: #1a3a1a !important;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }

        .btn-login:hover {
            background: linear-gradient(135deg, #ffed4a, #ffd700);
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(255,215,0,0.3);
        }

        .btn-login::before {
            display: none;
        }

        /* Mobile Menu Button */
        .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            padding: 0.5rem;
            transition: all 0.3s;
        }

        .mobile-menu-btn:hover {
            color: #ffd700;
        }

        /* ========== HERO SECTION ========== */
        .hero {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 5rem 2rem;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .hero::before {
            content: '🙏';
            position: absolute;
            font-size: 300px;
            opacity: 0.08;
            bottom: -50px;
            right: -50px;
            animation: float 6s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }

        .hero-content {
            max-width: 800px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }

        .hero h1 {
            font-size: 3rem;
            margin-bottom: 1rem;
            animation: fadeInUp 0.8s;
        }

        .hero p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
            opacity: 0.95;
            animation: fadeInUp 1s;
        }

        .hero-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }

        .btn {
            padding: 1rem 2rem;
            border: none;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            text-decoration: none;
            display: inline-block;
        }

        .btn-primary {
            background: #ffd700;
            color: #1a3a1a;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }

        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.3);
            background: #ffed4a;
        }

        .btn-secondary {
            background: transparent;
            border: 2px solid white;
            color: white;
        }

        .btn-secondary:hover {
            background: white;
            color: #1a3a1a;
            transform: translateY(-3px);
        }

        /* ========== MODERN FOOTER ========== */
        .footer {
            background: linear-gradient(135deg, #0f1a0f 0%, #1a2a1a 100%);
            color: #ccc;
            padding: 3rem 2rem 1.5rem;
            margin-top: 4rem;
            position: relative;
        }

        .footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #ffd700, #2c5f2d, #ffd700);
        }

        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            text-align: left;
        }

        .footer-section h4 {
            color: #ffd700;
            margin-bottom: 1.2rem;
            font-size: 1.1rem;
            display: flex;
            align-items: center;
            gap: 8px;
            position: relative;
            display: inline-block;
        }

        .footer-section h4::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 40px;
            height: 2px;
            background: #ffd700;
        }

        .footer-section p {
            font-size: 0.85rem;
            line-height: 1.6;
            margin-top: 0.5rem;
            color: #aaa;
        }

        .footer-section a {
            color: #ccc;
            text-decoration: none;
            display: block;
            margin-bottom: 0.6rem;
            transition: all 0.3s;
            font-size: 0.85rem;
        }

        .footer-section a:hover {
            color: #ffd700;
            transform: translateX(5px);
        }

        .social-links {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }

        .social-links a {
            width: 35px;
            height: 35px;
            background: rgba(255,255,255,0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
        }

        .social-links a:hover {
            background: #ffd700;
            color: #1a3a1a;
            transform: translateY(-3px);
        }

        .footer-bottom {
            text-align: center;
            margin-top: 2rem;
            padding-top: 1.5rem;
            border-top: 1px solid rgba(255,255,255,0.1);
        }

        .footer-bottom p {
            font-size: 0.75rem;
            color: #888;
        }

        .footer-bottom i {
            color: #ffd700;
        }

        /* Stats Cards */
        .stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
            padding: 3rem 2rem;
            max-width: 1400px;
            margin: 0 auto;
        }

        .stat-card {
            background: white;
            padding: 1.8rem;
            border-radius: 20px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: all 0.3s;
        }

        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.15);
        }

        .stat-card i {
            font-size: 2.5rem;
            color: #2c5f2d;
            margin-bottom: 1rem;
        }

        .stat-card h3 {
            font-size: 2rem;
            color: #2c5f2d;
            margin-bottom: 0.5rem;
        }

        .stat-card p {
            color: #666;
            font-size: 0.9rem;
        }

        .stat-small {
            font-size: 0.75rem;
            color: #999;
            margin-top: 5px;
        }

        /* Fund Progress */
        .fund-progress {
            background: white;
            border-radius: 20px;
            padding: 1.5rem;
            margin-bottom: 2rem;
            box-shadow: 0 5px 20px rgba(0,0,0,0.08);
        }

        .progress-bar-container {
            background: #e0e0e0;
            border-radius: 10px;
            height: 10px;
            overflow: hidden;
            margin: 1rem 0;
        }

        .progress-bar {
            background: linear-gradient(90deg, #2c5f2d, #48bb78);
            height: 100%;
            border-radius: 10px;
            transition: width 0.5s ease;
        }

        /* Container */
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 2rem 2rem 2rem;
        }

        /* Section Title */
        .section-title {
            font-size: 1.8rem;
            margin-bottom: 1.5rem;
            color: #1a3a1a;
            text-align: center;
            position: relative;
            padding-bottom: 1rem;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background: #2c5f2d;
            border-radius: 2px;
        }

        /* Features */
        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
            margin: 3rem 0;
        }

        .feature {
            background: white;
            padding: 1.8rem;
            border-radius: 20px;
            text-align: center;
            box-shadow: 0 5px 20px rgba(0,0,0,0.08);
            transition: all 0.3s;
        }

        .feature:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
        }

        .feature i {
            font-size: 2.5rem;
            color: #2c5f2d;
            margin-bottom: 1rem;
        }

        .feature h3 {
            margin-bottom: 0.8rem;
            color: #1a3a1a;
        }

        /* Compact Transactions - Improved for full description */
        .compact-transactions {
            background: white;
            border-radius: 20px;
            padding: 1.2rem;
            margin-bottom: 2rem;
            box-shadow: 0 5px 20px rgba(0,0,0,0.08);
        }

        .compact-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid #f0f2f5;
        }

        .compact-header h3 {
            font-size: 1.1rem;
            color: #1a3a1a;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .compact-header h3 i {
            color: #ffd700;
            font-size: 1rem;
        }

        .compact-badge {
            background: #2c5f2d;
            color: white;
            padding: 0.2rem 0.6rem;
            border-radius: 20px;
            font-size: 0.65rem;
        }

        .compact-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.8rem;
            border-bottom: 1px solid #f0f0f0;
            transition: all 0.2s;
            cursor: pointer;
            flex-wrap: wrap;
        }

        .compact-item:hover {
            background: #f8f9fa;
            border-radius: 10px;
            transform: translateX(3px);
        }

        .compact-info {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            flex: 2;
            min-width: 200px;
        }

        .compact-icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            flex-shrink: 0;
        }

        .compact-icon.donation {
            background: #d4edda;
            color: #28a745;
        }

        .compact-icon.balance_addition {
            background: #cce5ff;
            color: #004085;
        }

        .compact-icon.distribution {
            background: #f8d7da;
            color: #dc3545;
        }

        .compact-details {
            flex: 1;
            min-width: 150px;
        }

        .compact-title {
            font-size: 0.85rem;
            font-weight: 600;
            color: #333;
            word-wrap: break-word;
            white-space: normal;
            line-height: 1.4;
        }

        .compact-meta {
            font-size: 0.65rem;
            color: #999;
            display: flex;
            align-items: center;
            gap: 0.8rem;
            flex-wrap: wrap;
            margin-top: 4px;
        }

        .compact-meta span {
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .compact-amount {
            font-weight: 700;
            font-size: 0.9rem;
            text-align: right;
            min-width: 100px;
            flex-shrink: 0;
        }

        .compact-amount.positive {
            color: #28a745;
        }

        .compact-amount.negative {
            color: #dc3545;
        }

        .compact-badge-sm {
            padding: 0.15rem 0.5rem;
            border-radius: 15px;
            font-size: 0.6rem;
            font-weight: 500;
        }

        .badge-donation-sm {
            background: #d4edda;
            color: #155724;
        }

        .badge-addition-sm {
            background: #cce5ff;
            color: #004085;
        }

        .badge-distribution-sm {
            background: #f8d7da;
            color: #721c24;
        }

        .full-description {
            display: none;
            background: #f9f9f9;
            padding: 0.8rem;
            margin-top: 0.5rem;
            border-radius: 8px;
            font-size: 0.75rem;
            color: #666;
            border-left: 3px solid #2c5f2d;
            width: 100%;
        }

        .full-description.show {
            display: block;
        }

        .description-toggle {
            cursor: pointer;
            color: #2c5f2d;
            font-size: 0.65rem;
            margin-left: 5px;
        }

        .description-toggle:hover {
            text-decoration: underline;
        }

        /* Top Donors Compact */
        .top-donors-compact {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .donor-item-compact {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.5rem 0.8rem;
            background: #f8f9fa;
            border-radius: 12px;
            transition: all 0.2s;
        }

        .donor-item-compact:hover {
            background: #e9ecef;
            transform: translateX(3px);
        }

        .donor-info-compact {
            display: flex;
            align-items: center;
            gap: 0.8rem;
        }

        .donor-rank-compact {
            width: 28px;
            height: 28px;
            background: linear-gradient(135deg, #ffd700, #f59e0b);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 0.7rem;
            color: white;
        }

        .donor-rank-compact.silver {
            background: linear-gradient(135deg, #a0aec0, #718096);
        }

        .donor-rank-compact.bronze {
            background: linear-gradient(135deg, #cd7f32, #b87333);
        }

        .donor-name-compact {
            font-weight: 600;
            font-size: 0.8rem;
            color: #333;
        }

        .donor-amount-compact {
            font-weight: 700;
            font-size: 0.8rem;
            color: #2c5f2d;
        }

        .view-all-link {
            text-align: center;
            margin-top: 1rem;
            padding-top: 0.8rem;
            border-top: 1px solid #f0f0f0;
        }

        .view-all-link a {
            color: #2c5f2d;
            text-decoration: none;
            font-size: 0.75rem;
            font-weight: 500;
            transition: all 0.3s;
        }

        .view-all-link a:hover {
            color: #1a3a1a;
            text-decoration: underline;
        }

        .sample-data-message {
            background: #fff3cd;
            border-left: 4px solid #ffc107;
            padding: 1rem;
            margin: 1rem 2rem;
            border-radius: 10px;
            text-align: center;
        }

        .cta {
            background: linear-gradient(135deg, #2c5f2d, #1a3a1a);
            color: white;
            text-align: center;
            padding: 3rem 2rem;
            border-radius: 20px;
            margin: 2rem 0;
        }

        .cta h2 {
            font-size: 1.8rem;
            margin-bottom: 1rem;
        }

        .cta .btn-primary {
            background: #ffd700;
            color: #1a3a1a;
            margin-top: 1rem;
        }

        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Responsive */
        @media (max-width: 768px) {
            .mobile-menu-btn {
                display: block;
            }
            
            .nav-links {
                display: none;
                width: 100%;
                flex-direction: column;
                align-items: center;
                padding: 1rem 0;
            }
            
            .nav-links.active {
                display: flex;
            }
            
            .nav-links a {
                width: 100%;
                text-align: center;
            }
            
            .hero h1 {
                font-size: 2rem;
            }
            
            .hero p {
                font-size: 1rem;
            }
            
            .section-title {
                font-size: 1.5rem;
            }
            
            .stats {
                padding: 1.5rem;
            }
            
            .container {
                padding: 0 1rem 1rem 1rem;
            }
            
            .footer-content {
                grid-template-columns: 1fr;
                text-align: center;
            }
            
            .footer-section h4::after {
                left: 50%;
                transform: translateX(-50%);
            }
            
            .footer-section {
                text-align: center;
            }
            
            .social-links {
                justify-content: center;
            }
            
            .compact-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.5rem;
            }
            
            .compact-info {
                width: 100%;
            }
            
            .compact-amount {
                text-align: left;
                width: 100%;
            }
        }

        @media (max-width: 480px) {
            .stats {
                grid-template-columns: 1fr;
            }
            
            .features {
                grid-template-columns: 1fr;
            }
            
            .hero-buttons {
                flex-direction: column;
            }
            
            .btn {
                width: 100%;
                text-align: center;
            }
            
            .compact-title {
                font-size: 0.75rem;
            }
            
            .compact-meta {
                gap: 0.5rem;
            }
        }
    </style>
</head>
<body>
    <!-- Modern Navigation Bar -->
    <nav class="navbar">
        <div class="nav-container">
            <a href="#home" class="logo">
                <img src="https://bmyouth.org/bmya/assets/images/logo.png" alt="Logo" class="logo-img" onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3E%3Ccircle cx=%2750%27 cy=%2750%27 r=%2745%27 fill=%27%23ffd700%27/%3E%3Ctext x=%2750%27 y=%2770%27 text-anchor=%27middle%27 fill=%27%231a3a1a%27 font-size=%2740%27 font-weight=%27bold%27%3EB%3C/text%3E%3C/svg%3E'">
                <div>
                    <h1>BMYA</h1>
                    <span>SHELDANG</span>
                </div>
            </a>
            
            <button class="mobile-menu-btn" onclick="toggleMobileMenu()">
                <i class="fas fa-bars"></i>
            </button>
            
            <div class="nav-links" id="navLinks">
                <a href="#home">Home</a>
                <a href="#features">Features</a>
                <a href="#transactions">Transactions</a>
                <a href="#contact">Contact</a>
                <?php if(isset($_SESSION['user_id'])): ?>
                    <a href="<?= $_SESSION['role'] == 'admin' ? 'admin/dashboard.php' : 'user/dashboard.php' ?>" class="btn-login">
                        <i class="fas fa-tachometer-alt"></i> Dashboard
                    </a>
                <?php else: ?>
                    <a href="login.php" class="btn-login"><i class="fas fa-sign-in-alt"></i> Login</a>
                    <a href="register.php" class="btn-login"><i class="fas fa-user-plus"></i> Register</a>
                <?php endif; ?>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero" id="home">
        <div class="hero-content">
            <p><img src="https://bmyouth.org/bmya/assets/images/logo.png" alt="SHELDANG, Serve Community" width="200" height="200"></p>
            <h1>SHELDANG, Serve Community</h1>
            <p>Join us in preserving the rich heritage of Bishnupriya Manipuri community and supporting community development initiatives.</p>
            <div class="hero-buttons">
                <?php if(!isset($_SESSION['user_id'])): ?>
                    <a href="register.php" class="btn btn-primary"><i class="fas fa-hand-holding-heart"></i> Contribute Now</a>
                    <a href="login.php" class="btn btn-primary"><i class="fas fa-hand-holding-heart"></i> Login</a>
                <?php else: ?>
                    <a href="user/upload_payment.php" class="btn btn-primary"><i class="fas fa-donate"></i> Make Contribution</a>
                    <a href="user/submit_kyc.php" class="btn btn-secondary"><i class="fas fa-id-card"></i> Submit KYC</a>
                <?php endif; ?>
            </div>
        </div>
    </section>

    <!-- Stats Section -->
    <div class="stats">
        <div class="stat-card">
            <i class="fas fa-chart-line"></i>
            <h3>₹<?= number_format($total_fund_received, 2) ?></h3>
            <p>Total Funds Received</p>
            <div class="stat-small">📱 Online: ₹<?= number_format($total_donations, 2) ?> | 💰 Offline: ₹<?= number_format($total_additions, 2) ?></div>
        </div>
        <div class="stat-card">
            <i class="fas fa-wallet"></i>
            <h3>₹<?= number_format($available_balance, 2) ?></h3>
            <p>Available Balance</p>
            <div class="stat-small">💰 Ready for community welfare</div>
        </div>
        <div class="stat-card">
            <i class="fas fa-chart-pie"></i>
            <h3>₹<?= number_format($total_distributed, 2) ?></h3>
            <p>Total Distributed</p>
            <div class="stat-small">🤝 Used for community development</div>
        </div>
        <div class="stat-card">
            <i class="fas fa-users"></i>
            <h3><?= $total_members ?></h3>
            <p>Active Members</p>
            <div class="stat-small">🙏 Supporting the cause</div>
        </div>
    </div>

    <!-- Fund Progress -->
    <div class="container">
        <div class="fund-progress">
            <h3 style="text-align:center; color:#1a3a1a;">🎯 Community Development Goal Progress</h3>
            <?php 
            $fund_goal = 50000000;
            $progress_percentage = min(100, ($total_fund_received / $fund_goal) * 100);
            $used_percentage = ($total_fund_received > 0) ? round(($total_distributed / $total_fund_received) * 100, 1) : 0;
            ?>
            <div class="progress-bar-container">
                <div class="progress-bar" style="width: <?= $progress_percentage ?>%;"></div>
            </div>
            <div style="display: flex; justify-content: space-between; font-size: 0.85rem; flex-wrap: wrap; gap: 10px;">
                <span>📊 <strong><?= round($progress_percentage, 1) ?>%</strong> of Goal Achieved</span>
                <span>💰 <strong>₹<?= number_format($total_distributed, 2) ?></strong> Distributed (<strong><?= $used_percentage ?>%</strong> Used)</span>
                <span>🎯 Goal: <strong>₹<?= number_format($fund_goal, 2) ?></strong></span>
            </div>
        </div>
    </div>

    <div class="container">
        <!-- Features Section -->
        <h2 class="section-title" id="features">Why Choose Us?</h2>
        <div class="features">
            <div class="feature">
                <i class="fas fa-shield-alt"></i>
                <h3>100% Transparent</h3>
                <p>Every contribution and distribution is tracked and displayed publicly.</p>
            </div>
            <div class="feature">
                <i class="fas fa-qrcode"></i>
                <h3>Easy QR Payment</h3>
                <p>Quick and secure payments via QR code with instant proof upload.</p>
            </div>
            <div class="feature">
                <i class="fas fa-id-card"></i>
                <h3>Member ID Card</h3>
                <p>Get official membership ID after KYC verification.</p>
            </div>
            <div class="feature">
                <i class="fas fa-chart-pie"></i>
                <h3>Live Fund Tracking</h3>
                <p>Real-time updates on fund utilization and distribution.</p>
            </div>
        </div>

        <!-- Top Donors Compact -->
        <?php if($top_donors && $top_donors->num_rows > 0): ?>
        <div class="compact-transactions">
            <div class="compact-header">
                <h3><i class="fas fa-trophy"></i> Top Contributors</h3>
                <span class="compact-badge">Top 5</span>
            </div>
            <div class="top-donors-compact">
                <?php $rank = 1; while($donor = $top_donors->fetch_assoc()): 
                    $rankClass = '';
                    if($rank == 1) $rankClass = '';
                    elseif($rank == 2) $rankClass = 'silver';
                    elseif($rank == 3) $rankClass = 'bronze';
                ?>
                <div class="donor-item-compact">
                    <div class="donor-info-compact">
                        <div class="donor-rank-compact <?= $rankClass ?>">#<?= $rank ?></div>
                        <div class="donor-name-compact"><?= htmlspecialchars($donor['name']) ?></div>
                    </div>
                    <div class="donor-amount-compact">₹<?= number_format($donor['total'], 2) ?></div>
                </div>
                <?php $rank++; endwhile; ?>
            </div>
        </div>
        <?php endif; ?>

        <!-- Recent Transactions Section -->
        <h2 class="section-title" id="transactions">📋 Recent Transactions</h2>
        
        <div class="compact-transactions">
            <?php if(count($grouped_transactions) > 0): ?>
                <?php 
                $display_count = 0;
                $max_display = 10;
                ?>
                <?php foreach($grouped_transactions as $date_key => $day_transactions): ?>
                    <?php foreach($day_transactions as $transaction): ?>
                        <?php if($display_count >= $max_display) break 2; ?>
                        <div class="compact-item" data-transaction='<?= json_encode($transaction) ?>'>
                            <div class="compact-info">
                                <div class="compact-icon <?= $transaction['type'] ?>">
                                    <?php if($transaction['type'] == 'donation'): ?>
                                        <i class="fas fa-hand-holding-heart"></i>
                                    <?php elseif($transaction['type'] == 'balance_addition'): ?>
                                        <i class="fas fa-plus-circle"></i>
                                    <?php else: ?>
                                        <i class="fas fa-chart-line"></i>
                                    <?php endif; ?>
                                </div>
                                <div class="compact-details">
                                    <div class="compact-title">
                                        <?php if($transaction['type'] == 'donation'): ?>
                                            Donation from <?= htmlspecialchars($transaction['donor_name']) ?>
                                        <?php elseif($transaction['type'] == 'balance_addition'): ?>
                                            Manual Balance Addition - <?= htmlspecialchars($transaction['source']) ?>
                                        <?php else: ?>
                                            <?php 
                                            // Show full description for deductions/distributions
                                            $description = htmlspecialchars($transaction['description'] ?? '');
                                            // Remove [DEDUCTION] prefix if present for better display
                                            $description = str_replace('[DEDUCTION] ', '', $description);
                                            echo $description;
                                            ?>
                                        <?php endif; ?>
                                    </div>
                                    <div class="compact-meta">
                                        <span><i class="fas fa-calendar-alt"></i> <?= date('d M Y', strtotime($transaction['transaction_date'])) ?></span>
                                        <span><i class="fas fa-clock"></i> <?= date('h:i A', strtotime($transaction['transaction_date'])) ?></span>
                                        <?php if($transaction['type'] == 'donation'): ?>
                                            <span class="compact-badge-sm badge-donation-sm"><i class="fas fa-check-circle"></i> Contribution</span>
                                        <?php elseif($transaction['type'] == 'balance_addition'): ?>
                                            <span class="compact-badge-sm badge-addition-sm"><i class="fas fa-plus"></i> Manual Add</span>
                                        <?php else: ?>
                                            <span class="compact-badge-sm badge-distribution-sm"><i class="fas fa-chart-line"></i> Distribution</span>
                                        <?php endif; ?>
                                        <?php if($transaction['type'] == 'distribution' && !empty($transaction['distributed_to'])): ?>
                                            <span><i class="fas fa-building"></i> To: <?= htmlspecialchars($transaction['distributed_to']) ?></span>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>
                            <div class="compact-amount <?= ($transaction['type'] == 'distribution') ? 'negative' : 'positive' ?>">
                                <?php if($transaction['type'] == 'distribution'): ?>
                                    - ₹<?= number_format($transaction['amount'], 2) ?>
                                <?php else: ?>
                                    + ₹<?= number_format($transaction['amount'], 2) ?>
                                <?php endif; ?>
                            </div>
                        </div>
                        <?php $display_count++; ?>
                    <?php endforeach; ?>
                <?php endforeach; ?>
                
                <?php if(count($recent_transactions) > $max_display): ?>
                <div class="view-all-link">
                    <a href="#">View All Transactions <i class="fas fa-arrow-right"></i></a>
                </div>
                <?php endif; ?>
                
            <?php else: ?>
                <div style="text-align: center; padding: 1.5rem; color: #999;">
                    <i class="fas fa-receipt" style="font-size: 2rem; margin-bottom: 0.5rem;"></i>
                    <p style="font-size: 0.8rem;">No transactions yet</p>
                </div>
            <?php endif; ?>
        </div>

        <!-- Call to Action -->
        <div class="cta">
            <h2>Join Our Mission to Preserve & Develop</h2>
            <p>Together we can make a difference. Every contribution, no matter how small, helps preserve our culture and develop our community.</p>
            <?php if(!isset($_SESSION['user_id'])): ?>
                <a href="register.php" class="btn btn-primary">Register Now & Contribute</a>
            <?php else: ?>
                <a href="user/upload_payment.php" class="btn btn-primary">Make a Contribution</a>
            <?php endif; ?>
        </div>
    </div>

    <!-- Modern Footer -->
    <footer class="footer" id="contact">
        <div class="footer-content">
            <div class="footer-section">
                <h4><img src="https://bmyouth.org/bmya/assets/images/logo.png" alt="Logo" style="width: 30px; height: 30px; vertical-align: middle;" onerror="this.style.display='none'"> BMYA</h4>
                <p>Dedicated to preserving Bishnupriya Manipuri culture and supporting community development since 2024.</p>
                <div style="margin-top: 1rem;">
                    <p><i class="fas fa-phone"></i> +91 80993 91473</p>
                    <p><i class="fas fa-envelope"></i> sheldang@bmyouth.org</p>
                    <p><i class="fas fa-map-marker-alt"></i> Assam & Manipur, India</p>
                </div>
            </div>
            <div class="footer-section">
                <h4>Quick Links</h4>
                <a href="#home"><i class="fas fa-chevron-right"></i> Home</a>
                <a href="#features"><i class="fas fa-chevron-right"></i> Features</a>
                <a href="#transactions"><i class="fas fa-chevron-right"></i> Transactions</a>
                <?php if(!isset($_SESSION['user_id'])): ?>
                    <a href="login.php"><i class="fas fa-chevron-right"></i> Login</a>
                    <a href="register.php"><i class="fas fa-chevron-right"></i> Register</a>
                <?php endif; ?>
            </div>
            <div class="footer-section">
                <h4>Support</h4>
                <a href="#"><i class="fas fa-chevron-right"></i> FAQ</a>
                <a href="#"><i class="fas fa-chevron-right"></i> Terms & Conditions</a>
                <a href="#"><i class="fas fa-chevron-right"></i> Privacy Policy</a>
                <a href="#"><i class="fas fa-chevron-right"></i> Refund Policy</a>
            </div>
            <div class="footer-section">
                <h4>Connect With Us</h4>
                <div class="social-links">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-youtube"></i></a>
                    <a href="#"><i class="fab fa-linkedin-in"></i></a>
                </div>
                <div style="margin-top: 1rem;">
                    <p><i class="fas fa-clock"></i> Working Hours: Mon-Sat, 9AM-6PM</p>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2025 Bishnupriya Manipuri Fund. All rights reserved. | Made with <i class="fas fa-heart"></i> for Community Development</p>
        </div>
    </footer>

    <script>
        // Mobile Menu Toggle
        function toggleMobileMenu() {
            const navLinks = document.getElementById('navLinks');
            navLinks.classList.toggle('active');
        }

        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if(target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                    // Close mobile menu after clicking
                    if(window.innerWidth <= 768) {
                        document.getElementById('navLinks').classList.remove('active');
                    }
                }
            });
        });

        // Add animation on scroll
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if(entry.isIntersecting) {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }
            });
        }, observerOptions);

        document.querySelectorAll('.feature, .stat-card, .compact-item, .donor-item-compact').forEach(el => {
            el.style.opacity = '0';
            el.style.transform = 'translateY(30px)';
            el.style.transition = 'all 0.6s ease-out';
            observer.observe(el);
        });
    </script>
</body>
</html>