<?php
include 'session.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 = "";


// Fetch transaction stats
$total_transactions = 0;
$pending_transactions = 0;
$completed_transactions = 0;

$query = "SELECT COUNT(*) as total, 
                 SUM(CASE WHEN status = 'Pending' THEN 1 ELSE 0 END) as pending,
                 SUM(CASE WHEN status = 'Completed' THEN 1 ELSE 0 END) as completed
          FROM payments
          WHERE userid = $user_id";
$result = mysqli_query($link, $query);
if ($result) {
    $stats = mysqli_fetch_assoc($result);
    $total_transactions = $stats['total'];
    $pending_transactions = $stats['pending'];
    $completed_transactions = $stats['completed'];
}

// Fetch transactions
$transactions = [];
$query = "SELECT id, type, amount, payment_method, status, crypto_currency, crypto_amount, created_at,
                 event_name, meetup_date, transaction_hash,
                 CONCAT('TXN-', LPAD(id, 10, '0'), '-', UPPER(SUBSTRING(MD5(RAND()), 1, 6))) as transaction_id
          FROM payments
          WHERE userid = $user_id
          ORDER BY created_at DESC";
$result = mysqli_query($link, $query);
if ($result) {
    while ($row = mysqli_fetch_assoc($result)) {
        $transactions[] = $row;
    }
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transactions - User Dashboard</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <meta name="csrf-token" content="KM5EnItCap3TL8nux8waUAAOvZgA0DvbjTGJOMsF">
    <style>
        :root {
            --primary-color: #4f46e5;
            --primary-light: #818cf8;
            --sidebar-bg: #1e293b;
            --sidebar-hover: #334155;
            --main-bg: #f8fafc;
            --card-bg: #ffffff;
            --text-primary: #1e293b;
            --text-secondary: #64748b;
            --border-color: #e2e8f0;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background-color: var(--main-bg);
            line-height: 1.6;
        }

        .app-container {
            display: flex;
            min-height: 100vh;
        }

        .sidebar {
            width: 260px;
            background: var(--sidebar-bg);
            color: white;
            position: fixed;
            height: 100vh;
            overflow-y: auto;
            z-index: 1000;
            transition: transform 0.3s ease;
        }

        .sidebar-header {
            padding: 1.5rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .sidebar-brand {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-size: 1.25rem;
            font-weight: 600;
            color: white;
            text-decoration: none;
        }

        .sidebar-nav {
            padding: 1rem 0;
        }

        .nav-item {
            margin: 0.25rem 1rem;
        }

        .nav-link {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem 1rem;
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            border-radius: 0.5rem;
            transition: all 0.2s ease;
            font-weight: 500;
        }

        .nav-link:hover {
            background: var(--sidebar-hover);
            color: white;
        }

        .nav-link.active {
            background: var(--primary-color);
            color: white;
        }

        .main-content {
            flex: 1;
            margin-left: 260px;
            background: var(--main-bg);
        }

        .topbar {
            background: var(--card-bg);
            border-bottom: 1px solid var(--border-color);
            padding: 1rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .topbar-left {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .sidebar-toggle {
            display: none;
            background: none;
            border: none;
            font-size: 1.25rem;
            color: var(--text-primary);
            cursor: pointer;
        }

        .topbar-right {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-left: auto;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--primary-color);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
        }

        .content-area {
            padding: 2rem;
        }

        .page-header {
            background: var(--card-bg);
            border-radius: 12px;
            padding: 2rem;
            margin-bottom: 2rem;
            border: 1px solid var(--border-color);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .page-title {
            font-size: 1.875rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        .page-subtitle {
            color: var(--text-secondary);
            font-size: 1rem;
        }

        .stats-row {
            display: flex;
            gap: 1rem;
            margin-top: 1.5rem;
        }

        .stat-badge {
            background: #f0f9ff;
            color: #0369a1;
            padding: 0.5rem 1rem;
            border-radius: 8px;
            font-size: 0.875rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .stat-badge.warning {
            background: #fef3c7;
            color: #92400e;
        }

        .stat-badge.success {
            background: #d1fae5;
            color: #065f46;
        }

        .transactions-card {
            background: var(--card-bg);
            border-radius: 12px;
            border: 1px solid var(--border-color);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .transaction-item {
            padding: 1.5rem;
            border-bottom: 1px solid var(--border-color);
            transition: background-color 0.2s ease;
        }

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

        .transaction-item:hover {
            background: #f8fafc;
        }

        .transaction-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.25rem;
            flex-shrink: 0;
        }

        .transaction-details h6 {
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.25rem;
        }

        .transaction-meta {
            display: flex;
            gap: 1rem;
            font-size: 0.875rem;
            color: var(--text-secondary);
        }

        .transaction-amount {
            text-align: center;
        }

        .amount-primary {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--text-primary);
        }

        .amount-secondary {
            font-size: 0.875rem;
            color: var(--text-secondary);
            margin-top: 0.25rem;
        }

        .transaction-status {
            text-align: right;
        }

        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.375rem;
            padding: 0.375rem 0.75rem;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 500;
            margin-bottom: 0.75rem;
        }

        .status-pending {
            background: #fef3c7;
            color: #92400e;
        }

        .status-proof_submitted {
            background: #dbeafe;
            color: #1d4ed8;
        }

        .status-completed {
            background: #d1fae5;
            color: #065f46;
        }

        .status-failed,
        .status-rejected {
            background: #fee2e2;
            color: #dc2626;
        }

        .status-cancelled {
            background: #f3f4f6;
            color: #6b7280;
        }

        .btn-action {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 0.5rem 1rem;
            border-radius: 8px;
            font-size: 0.875rem;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: background-color 0.2s ease;
            text-decoration: none;
        }

        .btn-action:hover {
            background: #4338ca;
            color: white;
        }

        .btn-action:disabled {
            background: #9ca3af;
            cursor: not-allowed;
        }

        .modal-content {
            border-radius: 12px;
            border: none;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
        }

        .modal-header {
            background: var(--primary-color);
            color: white;
            border-radius: 12px 12px 0 0;
            border-bottom: none;
        }

        .wallet-address,
        .payment-details {
            background: #f8fafc;
            border: 2px dashed #cbd5e1;
            border-radius: 8px;
            padding: 1rem;
            font-family: 'JetBrains Mono', 'Courier New', monospace;
            font-size: 0.875rem;
            word-break: break-all;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .wallet-address:hover,
        .payment-details:hover {
            background: #f1f5f9;
            border-color: #94a3b8;
        }

        .empty-state {
            text-align: center;
            padding: 3rem 2rem;
            color: var(--text-secondary);
        }

        .empty-state i {
            font-size: 3rem;
            margin-bottom: 1rem;
            opacity: 0.5;
        }

        .loading {
            opacity: 0.6;
            pointer-events: none;
        }

        .spinner {
            display: inline-block;
            width: 1rem;
            height: 1rem;
            border: 2px solid #f3f3f3;
            border-top: 2px solid var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @media (max-width: 768px) {
            .sidebar {
                transform: translateX(-100%);
            }

            .sidebar.show {
                transform: translateX(0);
            }

            .main-content {
                margin-left: 0;
            }

            .sidebar-toggle {
                display: block;
            }

            .content-area {
                padding: 1rem;
            }

            .transaction-item .col-md-6:first-child {
                margin-bottom: 1rem;
            }

            .transaction-amount,
            .transaction-status {
                text-align: left;
                margin-top: 0.75rem;
            }

            .stats-row {
                flex-wrap: wrap;
            }
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- Sidebar -->
        <nav class="sidebar" id="sidebar">
            <div class="sidebar-header">
                <a href="dashboard.php" class="sidebar-brand">
                    <i class="fas fa-wallet"></i>
                    Dashboard
                </a>
            </div>
            <div class="sidebar-nav">
                <div class="nav-item">
                    <a href="dashboard.php" class="nav-link">
                        <i class="fas fa-home"></i>
                        Dashboard
                    </a>
                </div>
                <div class="nav-item">
                    <a href="my-transactions.php" class="nav-link active">
                        <i class="fas fa-exchange-alt"></i>
                        Transactions
                    </a>
                </div>
                <div class="nav-item">
                    <a href="my-bookings.php" class="nav-link">
                        <i class="fas fa-calendar-check"></i>
                        Bookings
                    </a>
                </div>
                <div class="nav-item">
                    <a href="my-fan-cards.php" class="nav-link">
                        <i class="fas fa-id-card"></i>
                        Fan Cards
                    </a>
                </div>
                <div class="nav-item">
                    <a href="profile.php" class="nav-link">
                        <i class="fas fa-user"></i>
                        Profile
                    </a>
                </div>
            </div>
        </nav>

        <!-- Main Content -->
        <main class="main-content">
            <!-- Topbar -->
            <div class="topbar">
                <div class="topbar-left">
                    <button class="sidebar-toggle" id="sidebarToggle">
                        <i class="fas fa-bars"></i>
                    </button>
                </div>
                <div class="topbar-right">
                    <div class="user-info">
                        <span><?php echo $name; ?></span>
                        <div class="user-avatar"><?php echo strtoupper(substr($name, 0, 1)); ?></div>
                    </div>
                </div>
            </div>

            <!-- Content Area -->
            <div class="content-area">
                <!-- Page Header -->
                <div class="page-header">
                    <h1 class="page-title">My Transactions</h1>
                    <p class="page-subtitle">Manage your payment transactions and upload proof of payments</p>
                    <div class="stats-row">
                        <div class="stat-badge">
                            <i class="fas fa-receipt"></i>
                            <?php echo $total_transactions; ?> Total Transactions
                        </div>
                        <div class="stat-badge warning">
                            <i class="fas fa-clock"></i>
                            <?php echo $pending_transactions; ?> Pending
                        </div>
                        <div class="stat-badge success">
                            <i class="fas fa-check-circle"></i>
                            <?php echo $completed_transactions; ?> Completed
                        </div>
                    </div>
                </div>

                <!-- Transactions List -->
                <div class="transactions-card">
                    <?php if (empty($transactions)): ?>
                        <div class="empty-state">
                            <i class="fas fa-receipt"></i>
                            <p>No transactions found</p>
                        </div>
                    <?php else: ?>
                        <?php foreach ($transactions as $txn): ?>
                            <div class="transaction-item">
                                <div class="row align-items-center">
                                    <div class="col-md-6">
                                        <div class="d-flex align-items-center gap-3">
                                            <div class="transaction-icon" style="background: linear-gradient(135deg, <?php echo $txn['type'] === 'Fan Card Purchase' ? '#10b981 0%, #34d399 100%' : '#6b7280 0%, #9ca3af 100%'; ?>);">
                                                <i class="fas <?php echo $txn['type'] === 'Fan Card Purchase' ? 'fa-id-card' : 'fa-exchange-alt'; ?>"></i>
                                            </div>
                                            <div class="transaction-details">
                                                <h6><?php echo htmlspecialchars($txn['type'] === 'Fan Card Purchase' ? 'Fan Card Purchase' : ($txn['event_name'] ? 'Booking: ' . $txn['event_name'] : 'Booking: Meet & Greet')); ?></h6>
                                                <div class="transaction-meta">
                                                    <span><?php echo htmlspecialchars($txn['transaction_id']); ?></span>
                                                    <span><?php echo date('M j, Y • H:i', strtotime($txn['created_at'])); ?></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="transaction-amount">
                                            <div class="amount-primary">$<?php echo number_format($txn['amount'], 2); ?></div>
                                            <div class="amount-secondary">
                                                <?php
                                                if ($txn['payment_method'] === 'crypto' && $txn['crypto_currency'] && $txn['crypto_amount']) {
                                                    echo '<i class="fab fa-bitcoin"></i> ' . htmlspecialchars($txn['crypto_currency']) . '<br>' . number_format($txn['crypto_amount'], $txn['crypto_currency'] === 'USDT' ? 2 : 8) . ' ' . htmlspecialchars($txn['crypto_currency']);
                                                } else {
                                                    echo '<i class="fas fa-money-bill"></i> ' . htmlspecialchars(ucfirst($txn['payment_method']));
                                                }
                                                ?>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="transaction-status">
                                            <div class="status-badge status-<?php echo strtolower(str_replace(' ', '_', $txn['status'])); ?>">
                                                <i class="fas <?php
                                                    if ($txn['status'] === 'Pending') {
                                                        echo 'fa-clock text-warning';
                                                    } elseif ($txn['status'] === 'Completed') {
                                                        echo 'fa-check-circle text-success';
                                                    }
                                                ?>"></i>

                                                <?php echo htmlspecialchars($txn['status']); ?>
                                            </div>
                                            <?php if ($txn['status'] === 'Pending'): ?>
                                                <span class="btn-action" style="background: #6b7280; cursor: default;">
                                                    <i class="fas fa-hourglass-half"></i>
                                                    Under Review
                                                </span>
                                            <?php elseif ($txn['status'] === 'Completed'): ?>
                                                 <span class="btn-action" style="background: #6b7280; cursor: default;">
                                                    <i class="fas fa-hourglass-half"></i>
                                                   Completed
                                                </span>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </div>
            </div>
        </main>
    </div>
</body>
</html>