<?php
include 'header.php';

if (!isset($_SESSION["USER_LOGIN"])){
      echo '<script>window.location.href = "login.php";</script>';
}
     


ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

// Initialize variables
$msg = "";
$err = "";
$fan_cards = 0;
$bookings = 0;
$transactions = 0;
$total_spent = 0;
$user_created_at = '';
$recent_transactions = [];


// Fetch stats
if (empty($err)) {
    // Fan Cards (Completed Fan Card Purchases)
    $query = "SELECT COUNT(*) as total
              FROM payments
              WHERE userid = $user_id AND type = 'Fan Card Purchase' AND status = 'Completed'";
    $result = mysqli_query($link, $query);
    if ($result) {
        $fan_cards = mysqli_fetch_assoc($result)['total'];
    } else {
        $err = "Failed to fetch fan cards: " . mysqli_error($link);
    }
}

if (empty($err)) {
    // Bookings (Events and Meetups)
    $query = "SELECT COUNT(*) as total
              FROM payments
              WHERE userid = $user_id AND type IN ('Event', 'Meetup')";
    $result = mysqli_query($link, $query);
    if ($result) {
        $bookings = mysqli_fetch_assoc($result)['total'];
    } else {
        $err = "Failed to fetch bookings: " . mysqli_error($link);
    }
}

if (empty($err)) {
    // Total Transactions
    $query = "SELECT COUNT(*) as total
              FROM payments
              WHERE userid = $user_id";
    $result = mysqli_query($link, $query);
    if ($result) {
        $transactions = mysqli_fetch_assoc($result)['total'];
    } else {
        $err = "Failed to fetch transactions: " . mysqli_error($link);
    }
}


if (empty($err)) {
    // Total Spent
    $query = "SELECT SUM(amount) as total
              FROM payments
              WHERE userid = $user_id ";
    $result = mysqli_query($link, $query);
    if ($result) {
        $total_spent = mysqli_fetch_assoc($result)['total'] ?? 0;
    } else {
        $err = "Failed to fetch total spent: " . mysqli_error($link);
    }
}

// Fetch recent transactions (limit 5)
if (empty($err)) {
    $query = "SELECT id, type, amount, status, created_at
              FROM payments
              WHERE userid = $user_id
              ORDER BY created_at DESC
              LIMIT 5";
    $result = mysqli_query($link, $query);
    if ($result) {
        while ($row = mysqli_fetch_assoc($result)) {
            $recent_transactions[] = $row;
        }
    } else {
        $err = "Failed to fetch recent transactions: " . mysqli_error($link);
    }
}
?>

    <main class="flex-grow-1" style="padding-top: 80px;">
        
        
        <style>
    .dashboard-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 3rem 0;
        border-radius: 0 0 30px 30px;
        margin-bottom: 2rem;
        position: relative;
        overflow: hidden;
    }

    .dashboard-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="%23ffffff" fill-opacity="0.1"><circle cx="12" cy="12" r="2"/><circle cx="48" cy="12" r="2"/><circle cx="12" cy="48" r="2"/><circle cx="48" cy="48" r="2"/></g></g></svg>');
    }

    .dashboard-content {
        position: relative;
        z-index: 2;
    }

    .welcome-card {
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 20px;
        padding: 2rem;
        text-align: center;
    }

    .user-avatar {
        width: 80px;
        height: 80px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        font-size: 2rem;
        color: white;
    }

    .stats-card {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 20px;
        padding: 2rem;
        transition: all 0.3s ease;
        height: 100%;
        text-align: center;
        position: relative;
        overflow: hidden;
    }

    .stats-card::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.1);
        transform: rotate(45deg);
        transition: all 0.3s ease;
    }

    .stats-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

    .stats-card:hover::before {
        top: -60%;
        right: -60%;
    }

    .stats-icon {
        width: 60px;
        height: 60px;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        font-size: 1.5rem;
        color: white;
        position: relative;
        z-index: 2;
    }

    .stats-value {
        font-size: 2.5rem;
        font-weight: 700;
        line-height: 1;
        margin-bottom: 0.5rem;
        position: relative;
        z-index: 2;
    }

    .stats-label {
        font-weight: 500;
        color: #6c757d;
        margin-bottom: 0.5rem;
        position: relative;
        z-index: 2;
    }

    .stats-change {
        font-size: 0.875rem;
        font-weight: 600;
        position: relative;
        z-index: 2;
    }

    .stats-change.positive {
        color: #10b981;
    }

    .stats-change.negative {
        color: #ef4444;
    }

    .recent-transactions {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 20px;
        overflow: hidden;
    }

    .transaction-item {
        padding: 1.5rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        transition: all 0.2s ease;
    }

    .transaction-item:hover {
        background: rgba(102, 126, 234, 0.05);
    }

    .transaction-item:last-child {
        border-bottom: none;
    }

    .transaction-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        margin-right: 1rem;
    }

    .quick-actions {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 20px;
        padding: 2rem;
    }

    .action-btn {
        display: flex;
        align-items: center;
        padding: 1rem 1.5rem;
        border-radius: 12px;
        text-decoration: none;
        font-weight: 500;
        transition: all 0.3s ease;
        margin-bottom: 0.75rem;
        border: 2px solid transparent;
    }

    .action-btn:hover {
        transform: translateX(5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .action-btn i {
        width: 20px;
        margin-right: 0.75rem;
    }

    .progress-section {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 20px;
        padding: 2rem;
        margin-top: 2rem;
    }

    .progress-item {
        margin-bottom: 1.5rem;
    }

    .progress-label {
        display: flex;
        justify-content: between;
        align-items: center;
        margin-bottom: 0.5rem;
    }

    .progress-bar-custom {
        height: 8px;
        background: #e5e7eb;
        border-radius: 4px;
        overflow: hidden;
    }

    .progress-fill {
        height: 100%;
        border-radius: 4px;
        transition: width 0.5s ease;
    }

    @media (max-width: 768px) {
        .dashboard-header {
            padding: 2rem 0;
        }
        
        .stats-card {
            padding: 1.5rem;
            margin-bottom: 1rem;
        }
        
        .stats-value {
            font-size: 2rem;
        }
        
        .welcome-card {
            padding: 1.5rem;
        }
        
        .user-avatar {
            width: 60px;
            height: 60px;
            font-size: 1.5rem;
        }
    }
</style>

<div class="container-fluid px-0">
    <!-- Dashboard Header -->
    <div class="dashboard-header">
        <div class="container">
            <div class="dashboard-content">
                <div class="row align-items-center">
                    <div class="col-md-8">
                        <h1 class="display-4 fw-bold mb-3">Welcome Back!</h1>
                        <p class="fs-5 opacity-90">Hi <?php echo $name ?> here's your celebrity experience overview</p>
                    </div>
                    <div class="col-md-4">
                        <div class="welcome-card">
                            <div class="user-avatar">
                               <?php echo strtoupper(substr($name, 0, 1)); ?>
                            </div>
                            <h5 class="mb-1"><?php echo $name ?></h5>
                            <small class="opacity-75">Member since ><?php echo date('M j, Y • H:i', strtotime($created_at)); ?></small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container py-4">
    <!-- Stats Cards -->
    <div class="row g-4 mb-5">
                <div class="col-lg-3 col-md-6">
                    <div class="stats-card">
                        <div class="stats-icon" style="background: var(--primary-gradient);">
                            <i class="fas fa-id-card"></i>
                        </div>
                        <div class="stats-value text-primary"><?php echo $fan_cards; ?></div>
                        <div class="stats-label">Fan Cards</div>
                        <div class="stats-change positive">
                            <i class="fas fa-arrow-up me-1"></i>Active Cards
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="stats-card">
                        <div class="stats-icon" style="background: var(--success-gradient);">
                            <i class="fas fa-calendar"></i>
                        </div>
                        <div class="stats-value text-success"><?php echo $bookings; ?></div>
                        <div class="stats-label">Bookings</div>
                        <div class="stats-change positive">
                            <i class="fas fa-arrow-up me-1"></i>This Month
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="stats-card">
                        <div class="stats-icon" style="background: var(--info-gradient);">
                            <i class="fas fa-exchange-alt"></i>
                        </div>
                        <div class="stats-value text-info"><?php echo $transactions; ?></div>
                        <div class="stats-label">Transactions</div>
                        <div class="stats-change positive">
                            <i class="fas fa-arrow-up me-1"></i>All Time
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="stats-card">
                        <div class="stats-icon" style="background: var(--warning-gradient);">
                            <i class="fas fa-dollar-sign"></i>
                        </div>
                        <div class="stats-value text-warning">$<?php echo number_format($total_spent, 2); ?></div>
                        <div class="stats-label">Total Spent</div>
                        <div class="stats-change positive">
                            <i class="fas fa-chart-line me-1"></i>Investment
                        </div>
                    </div>
                </div>
            </div>
    
    <!-- Complete dashboard section with fixed quick actions -->
<div class="row g-4">
    <!-- Recent Transactions -->
    <div class="col-lg-8">
        <div class="recent-transactions">
            <div class="p-4 border-bottom">
                <div class="d-flex justify-content-between align-items-center">
                    <h4 class="fw-bold mb-0">
                        <i class="fas fa-clock text-primary me-2"></i>
                        Recent Activity
                    </h4>
                    <a href="my-transactions.php" class="btn btn-outline-primary btn-sm">
                        <i class="fas fa-eye me-1"></i>View All
                    </a>
                </div>
            </div>
            
            <div class="transaction-list">
                            <?php if (empty($recent_transactions)): ?>
                                <div class="p-4 text-center text-muted">
                                    <i class="fas fa-receipt fa-2x mb-2"></i>
                                    <p>No recent transactions found</p>
                                </div>
                            <?php else: ?>
                                <?php foreach ($recent_transactions as $txn): ?>
                                    <div class="transaction-item">
                                        <div class="d-flex align-items-center">
                                            <div class="transaction-icon" 
                                                 style="background: <?php echo $txn['type'] === 'Fan Card Purchase' ? 'var(--primary-gradient)' : 'var(--success-gradient)'; ?>;">
                                                <i class="fas <?php echo $txn['type'] === 'Fan Card Purchase' ? 'fa-id-card' : 'fa-handshake'; ?>"></i>
                                            </div>
                                            <div class="flex-grow-1">
                                                <h6 class="mb-1 fw-semibold"><?php echo htmlspecialchars($txn['type'] === 'Fan Card Purchase' ? 'Fan Card' : ($txn['type'] === 'Meetup' ? 'Meetup' : 'Event')); ?></h6>
                                                <small class="text-muted">
                                                    <i class="fas fa-calendar me-1"></i>
                                                    <?php echo date('M j, Y \a\t H:i', strtotime($txn['created_at'])); ?>
                                                </small>
                                            </div>
                                            <div class="text-end">
                                                <div class="fw-bold text-dark mb-1">$<?php echo number_format($txn['amount'], 2); ?></div>
                                                <span class="badge rounded-pill <?php
                                                    if ($txn['status'] === 'Pending') {
                                                        echo 'bg-warning';
                                                    } elseif ($txn['status'] === 'Proof Submitted') {
                                                        echo 'bg-danger';
                                                    } elseif ($txn['status'] === 'Completed') {
                                                        echo 'bg-success';
                                                    } elseif ($txn['status'] === 'Processing') {
                                                        echo 'bg-info';
                                                    } else {
                                                        echo 'bg-danger';
                                                    }
                                                ?>">
                                                    <?php echo htmlspecialchars($txn['status']); ?>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        </div>
        </div>
    </div>
    
    <!-- Quick Actions - FIXED VERSION -->
    <div class="col-lg-4">
        <div class="quick-actions-container">
            <h4 class="section-title">
                <i class="fas fa-bolt text-warning me-2"></i>
                Quick Actions
            </h4>
            
            <!-- Action buttons with improved styling -->
            <div class="actions-grid">
                <a href="celebrities.php" class="quick-action-card primary">
                    <div class="action-icon">
                        <i class="fas fa-star"></i>
                    </div>
                    <div class="action-content">
                        <h6>Browse Celebrities</h6>
                        <small>Discover amazing talents</small>
                    </div>
                    <div class="action-arrow">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </a>
                
                <a href="my-fan-cards.php" class="quick-action-card success">
                    <div class="action-icon">
                        <i class="fas fa-id-card"></i>
                    </div>
                    <div class="action-content">
                        <h6>My Fan Cards</h6>
                        <small>View your collection</small>
                    </div>
                    <div class="action-arrow">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </a>
                
                <a href="my-bookings.php" class="quick-action-card info">
                    <div class="action-icon">
                        <i class="fas fa-calendar"></i>
                    </div>
                    <div class="action-content">
                        <h6>My Bookings</h6>
                        <small>Manage appointments</small>
                    </div>
                    <div class="action-arrow">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </a>
                
                <a href="my-transactions.php" class="quick-action-card warning">
                    <div class="action-icon">
                        <i class="fas fa-exchange-alt"></i>
                    </div>
                    <div class="action-content">
                        <h6>Transactions</h6>
                        <small>Payment history</small>
                    </div>
                    <div class="action-arrow">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </a>
            </div>
            
            <!-- Account Status -->
            <div class="account-status-section">
                <hr class="section-divider">
                <h6 class="status-title">Account Status</h6>
                
                <div class="status-indicators">
                    <div class="status-indicator verified">
                        <div class="status-icon bg-success">
                            <i class="fas fa-shield-alt"></i>
                        </div>
                        <div class="status-info">
                            <span class="status-label">Verified Account</span>
                            <small class="status-desc">Identity confirmed</small>
                        </div>
                    </div>
                    
                    <div class="status-indicator premium">
                        <div class="status-icon bg-primary">
                            <i class="fas fa-crown"></i>
                        </div>
                        <div class="status-info">
                            <span class="status-label">Premium Member</span>
                            <small class="status-desc">Full access unlocked</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Enhanced Quick Actions Container */
.quick-actions-container {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 2rem;
    position: sticky;
    top: 2rem;
    height: fit-content;
}

.section-title {
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #2d3748;
}

/* Action Cards Grid */
.actions-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.quick-action-card {
    display: flex;
    align-items: center;
    padding: 1rem;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
    color: white;
}

.quick-action-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.6s ease;
}

.quick-action-card:hover {
    transform: translateX(8px) translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    color: white;
}

.quick-action-card:hover::before {
    left: 100%;
}

.quick-action-card:hover .action-arrow {
    transform: translateX(5px);
}

/* Action card variants */
.quick-action-card.primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.quick-action-card.success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.quick-action-card.info {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.quick-action-card.warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

/* Action card elements */
.action-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    margin-right: 1rem;
    flex-shrink: 0;
}

.action-content {
    flex: 1;
}

.action-content h6 {
    margin: 0 0 0.25rem 0;
    font-weight: 600;
    font-size: 0.95rem;
}

.action-content small {
    opacity: 0.8;
    font-size: 0.8rem;
}

.action-arrow {
    transition: transform 0.3s ease;
    opacity: 0.7;
}

/* Account Status Section */
.account-status-section {
    margin-top: 1.5rem;
}

.section-divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
    margin: 1.5rem 0;
}

.status-title {
    text-align: center;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 1rem;
}

.status-indicators {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.status-indicator {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-radius: 10px;
    transition: all 0.3s ease;
    background: rgba(102, 126, 234, 0.05);
}

.status-indicator:hover {
    background: rgba(102, 126, 234, 0.1);
    transform: translateX(5px);
}

.status-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem;
    color: white;
    font-size: 0.8rem;
}

.status-info {
    flex: 1;
}

.status-label {
    display: block;
    font-weight: 500;
    color: #2d3748;
    font-size: 0.9rem;
}

.status-desc {
    color: #718096;
    font-size: 0.75rem;
}

/* Responsive Design */
@media (max-width: 992px) {
    .quick-actions-container {
        position: static;
        margin-top: 2rem;
    }
}

@media (max-width: 768px) {
    .quick-actions-container {
        padding: 1.5rem;
    }
    
    .quick-action-card {
        padding: 0.875rem;
    }
    
    .action-icon {
        width: 36px;
        height: 36px;
        margin-right: 0.75rem;
    }
    
    .action-content h6 {
        font-size: 0.9rem;
    }
    
    .action-content small {
        font-size: 0.75rem;
    }
    
    .status-icon {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }
}

/* Animation for page load */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.quick-action-card {
    animation: slideInUp 0.6s ease forwards;
}

.quick-action-card:nth-child(1) { animation-delay: 0.1s; }
.quick-action-card:nth-child(2) { animation-delay: 0.2s; }
.quick-action-card:nth-child(3) { animation-delay: 0.3s; }
.quick-action-card:nth-child(4) { animation-delay: 0.4s; }
</style>
    </main>

    <?php
include 'footer.php';

?>