<?php
session_start();
require_once '../connection.php';

// Check if user is logged in
if (!isset($_SESSION['user_id'])) {
    header("Location: login.php");
    exit();
}

// Get user ID
$user_id = $_SESSION['user_id'];

// Fetch user data
$stmt = $conn->prepare("SELECT * FROM users WHERE id = ?");
$stmt->bind_param("i", $user_id);
$stmt->execute();
$result = $stmt->get_result();

if ($result->num_rows === 0) {
    session_destroy();
    header("Location: login.php?error=User account not found");
    exit();
}

$user = $result->fetch_assoc();
$stmt->close();

// Check account status
if (isset($user['email_verified']) && $user['email_verified'] == 0) {
    header("Location: verify.php?message=Please verify your email first");
    exit();
}

if (isset($user['account_status']) && $user['account_status'] != 'active') {
    $error_message = "Your account is " . $user['account_status'];
    header("Location: login.php?error=" . urlencode($error_message));
    exit();
}

// Pagination settings
$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$records_per_page = 20;
$offset = ($page - 1) * $records_per_page;

// Filter settings
$filter_type = isset($_GET['type']) ? $_GET['type'] : '';
$filter_status = isset($_GET['status']) ? $_GET['status'] : '';
$date_from = isset($_GET['date_from']) ? $_GET['date_from'] : '';
$date_to = isset($_GET['date_to']) ? $_GET['date_to'] : '';

// Build query conditions
$where_conditions = ["user_id = ?"];
$params = [$user_id];
$types = "i";

if (!empty($filter_type)) {
    $where_conditions[] = "type = ?";
    $params[] = $filter_type;
    $types .= "s";
}

if (!empty($filter_status)) {
    $where_conditions[] = "status = ?";
    $params[] = $filter_status;
    $types .= "s";
}

if (!empty($date_from)) {
    $where_conditions[] = "DATE(created_at) >= ?";
    $params[] = $date_from;
    $types .= "s";
}

if (!empty($date_to)) {
    $where_conditions[] = "DATE(created_at) <= ?";
    $params[] = $date_to;
    $types .= "s";
}

$where_clause = implode(" AND ", $where_conditions);

// Get total records for pagination
$count_sql = "SELECT COUNT(*) as total FROM transactions WHERE $where_clause";
$count_stmt = $conn->prepare($count_sql);
$count_stmt->bind_param($types, ...$params);
$count_stmt->execute();
$count_result = $count_stmt->get_result();
$total_records = $count_result->fetch_assoc()['total'];
$count_stmt->close();

$total_pages = ceil($total_records / $records_per_page);

// Fetch transactions with pagination
$sql = "SELECT * FROM transactions 
        WHERE $where_clause 
        ORDER BY created_at DESC 
        LIMIT ? OFFSET ?";

$stmt = $conn->prepare($sql);
$types .= "ii";
$params[] = $records_per_page;
$params[] = $offset;
$stmt->bind_param($types, ...$params);
$stmt->execute();
$transactions_result = $stmt->get_result();
$transactions = $transactions_result->fetch_all(MYSQLI_ASSOC);
$stmt->close();

// Calculate summary statistics
$summary_sql = "SELECT 
                COUNT(*) as total_transactions,
                SUM(CASE WHEN type = 'deposit' THEN amount ELSE 0 END) as total_deposits,
                SUM(CASE WHEN type = 'withdrawal' THEN amount ELSE 0 END) as total_withdrawals,
                SUM(CASE WHEN type = 'investment' THEN amount ELSE 0 END) as total_investments,
                SUM(CASE WHEN type = 'profit' THEN amount ELSE 0 END) as total_profits,
                SUM(CASE WHEN type = 'referral' THEN amount ELSE 0 END) as total_referrals,
                SUM(CASE WHEN status = 'completed' THEN amount ELSE 0 END) as completed_amount,
                SUM(CASE WHEN status = 'pending' THEN amount ELSE 0 END) as pending_amount,
                SUM(CASE WHEN status = 'failed' THEN amount ELSE 0 END) as failed_amount
                FROM transactions WHERE $where_clause";
$summary_stmt = $conn->prepare($summary_sql);
$summary_stmt->bind_param(substr($types, 0, -2), ...array_slice($params, 0, -2));
$summary_stmt->execute();
$summary_result = $summary_stmt->get_result();
$summary = $summary_result->fetch_assoc();
$summary_stmt->close();

// Get transaction types for filter dropdown
$types_sql = "SELECT DISTINCT type FROM transactions WHERE user_id = ? ORDER BY type";
$types_stmt = $conn->prepare($types_sql);
$types_stmt->bind_param("i", $user_id);
$types_stmt->execute();
$types_result = $types_stmt->get_result();
$transaction_types = $types_result->fetch_all(MYSQLI_ASSOC);
$types_stmt->close();

// Get statuses for filter dropdown
$statuses_sql = "SELECT DISTINCT status FROM transactions WHERE user_id = ? ORDER BY status";
$statuses_stmt = $conn->prepare($statuses_sql);
$statuses_stmt->bind_param("i", $user_id);
$statuses_stmt->execute();
$statuses_result = $statuses_stmt->get_result();
$transaction_statuses = $statuses_result->fetch_all(MYSQLI_ASSOC);
$statuses_stmt->close();

// Fetch site settings
$site_settings = [];
$settings_stmt = $conn->prepare("SELECT setting_key, setting_value FROM site_settings WHERE setting_group = 'general'");
if ($settings_stmt) {
    $settings_stmt->execute();
    $settings_result = $settings_stmt->get_result();
    while ($row = $settings_result->fetch_assoc()) {
        $site_settings[$row['setting_key']] = $row['setting_value'];
    }
    $settings_stmt->close();
}

// Format dates
$last_login_date = isset($user['last_login']) && $user['last_login'] ? date('M d, Y h:i A', strtotime($user['last_login'])) : 'Never';
$member_since = isset($user['created_at']) ? date('M d, Y', strtotime($user['created_at'])) : 'N/A';

// Account tier
$account_tier = isset($user['account_tier']) ? $user['account_tier'] : 'basic';
$tier_names = [
    'basic' => 'Basic',
    'silver' => 'Silver',
    'gold' => 'Gold',
    'platinum' => 'Platinum',
    'vip' => 'VIP'
];
$tier_name = isset($tier_names[$account_tier]) ? $tier_names[$account_tier] : 'Basic';
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transaction Statement - <?php echo htmlspecialchars($site_settings['site_name'] ?? 'Trading Platform'); ?></title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <style>
        :root {
            --sidebar-width: 16rem;
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --success-gradient: linear-gradient(135deg, #38b2ac 0%, #319795 100%);
            --warning-gradient: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
            --danger-gradient: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
            --info-gradient: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            min-height: 100vh;
            color: #e2e8f0;
        }
        
        /* Sidebar Styles */
        .sidebar {
            background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
            width: var(--sidebar-width);
            height: 100vh;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 1000;
            transform: translateX(-100%);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            overflow-y: auto;
            box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
            border-right: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .sidebar.active {
            transform: translateX(0);
        }
        
        @media (min-width: 1024px) {
            .sidebar {
                transform: translateX(0) !important;
            }
        }
        
        .sidebar-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            z-index: 999;
            backdrop-filter: blur(4px);
        }
        
        .sidebar-overlay.active {
            display: block;
        }
        
        /* Main Content */
        .main-content {
            width: 100%;
            min-height: 100vh;
            transition: margin-left 0.3s ease;
        }
        
        @media (min-width: 1024px) {
            .main-content {
                margin-left: var(--sidebar-width);
                width: calc(100% - var(--sidebar-width));
            }
        }
        
        /* Mobile Menu Button */
        .mobile-menu-btn {
            position: fixed;
            top: 1.5rem;
            left: 1.5rem;
            z-index: 1100;
            width: 3rem;
            height: 3rem;
            background: rgba(30, 41, 59, 0.95);
            border-radius: 0.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }
        
        .mobile-menu-btn:hover {
            background: rgba(30, 41, 59, 1);
            transform: translateY(-2px);
        }
        
        @media (min-width: 1024px) {
            .mobile-menu-btn {
                display: none;
            }
        }
        
        /* Navigation Items */
        .nav-item {
            display: flex;
            align-items: center;
            padding: 0.875rem 1rem;
            border-radius: 0.75rem;
            margin: 0.25rem 0.75rem;
            color: #94a3b8;
            text-decoration: none;
            transition: all 0.2s ease;
            position: relative;
            overflow: hidden;
        }
        
        .nav-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 3px;
            background: var(--primary-gradient);
            transform: translateX(-100%);
            transition: transform 0.3s ease;
        }
        
        .nav-item:hover {
            background: rgba(255, 255, 255, 0.05);
            color: #e2e8f0;
            transform: translateX(4px);
        }
        
        .nav-item:hover::before {
            transform: translateX(0);
        }
        
        .nav-item.active {
            background: rgba(102, 126, 234, 0.1);
            color: #e2e8f0;
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
        }
        
        .nav-item.active::before {
            transform: translateX(0);
        }
        
        .nav-item.active i {
            color: #667eea;
            transform: scale(1.1);
        }
        
        .nav-item i {
            width: 1.5rem;
            margin-right: 0.875rem;
            transition: all 0.2s ease;
            font-size: 1.1rem;
        }
        
        /* Card Styles */
        .glass-card {
            background: rgba(30, 41, 59, 0.7);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 1.25rem;
            transition: all 0.3s ease;
        }
        
        .glass-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            border-color: rgba(102, 126, 234, 0.3);
        }
        
        .gradient-card {
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(102, 126, 234, 0.2);
            border-radius: 1.25rem;
        }
        
        .metric-card {
            background: rgba(30, 41, 59, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 1rem;
            padding: 1.5rem;
            position: relative;
            overflow: hidden;
        }
        
        .metric-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--primary-gradient);
        }
        
        .metric-card.green::before {
            background: var(--success-gradient);
        }
        
        .metric-card.orange::before {
            background: var(--warning-gradient);
        }
        
        .metric-card.purple::before {
            background: linear-gradient(135deg, #9f7aea 0%, #805ad5 100%);
        }
        
        /* Progress Bar */
        .progress-bar {
            height: 8px;
            border-radius: 4px;
            background: rgba(255, 255, 255, 0.1);
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            border-radius: 4px;
            background: var(--primary-gradient);
            transition: width 1s ease-in-out;
        }
        
        /* Badges */
        .tier-badge {
            background: linear-gradient(135deg, #f6e05e 0%, #d69e2e 100%);
            color: #1a202c;
            font-weight: 600;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
        }
        
        .status-badge {
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
        }
        
        .status-badge.completed {
            background: rgba(72, 187, 120, 0.2);
            color: #48bb78;
        }
        
        .status-badge.pending {
            background: rgba(237, 137, 54, 0.2);
            color: #ed8936;
        }
        
        .status-badge.failed {
            background: rgba(245, 101, 101, 0.2);
            color: #f56565;
        }
        
        .status-badge.processing {
            background: rgba(66, 153, 225, 0.2);
            color: #4299e1;
        }
        
        /* Table Styles */
        .table-container {
            overflow-x: auto;
            border-radius: 1rem;
        }
        
        .transactions-table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .transactions-table th {
            text-align: left;
            padding: 1rem;
            background: rgba(15, 23, 42, 0.8);
            color: #94a3b8;
            font-weight: 600;
            font-size: 0.875rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .transactions-table td {
            padding: 1rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            color: #e2e8f0;
        }
        
        .transactions-table tr:hover {
            background: rgba(255, 255, 255, 0.02);
        }
        
        .transaction-type {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .type-icon {
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 0.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .type-icon.deposit {
            background: rgba(72, 187, 120, 0.2);
            color: #48bb78;
        }
        
        .type-icon.withdrawal {
            background: rgba(66, 153, 225, 0.2);
            color: #4299e1;
        }
        
        .type-icon.investment {
            background: rgba(159, 122, 234, 0.2);
            color: #9f7aea;
        }
        
        .type-icon.profit {
            background: rgba(237, 137, 54, 0.2);
            color: #ed8936;
        }
        
        .type-icon.referral {
            background: rgba(236, 201, 75, 0.2);
            color: #ecc94b;
        }
        
        .amount-positive {
            color: #48bb78;
            font-weight: 600;
        }
        
        .amount-negative {
            color: #f56565;
            font-weight: 600;
        }
        
        /* Pagination */
        .pagination {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 2rem;
        }
        
        .page-item {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 2.5rem;
            height: 2.5rem;
            padding: 0 0.5rem;
            border-radius: 0.75rem;
            background: rgba(30, 41, 59, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #94a3b8;
            text-decoration: none;
            transition: all 0.2s ease;
        }
        
        .page-item:hover {
            background: rgba(102, 126, 234, 0.2);
            border-color: rgba(102, 126, 234, 0.3);
            color: #e2e8f0;
            transform: translateY(-2px);
        }
        
        .page-item.active {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
        }
        
        .page-item.disabled {
            opacity: 0.5;
            pointer-events: none;
        }
        
        /* Filter Form */
        .filter-form {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin-bottom: 1.5rem;
        }
        
        .filter-input {
            background: rgba(30, 41, 59, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 0.75rem;
            padding: 0.75rem 1rem;
            color: #e2e8f0;
            font-size: 0.875rem;
            transition: all 0.2s ease;
        }
        
        .filter-input:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
        }
        
        .filter-input option {
            background: #1e293b;
            color: #e2e8f0;
        }
        
        .filter-button {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 0.75rem;
            padding: 0.75rem 1.5rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }
        
        .filter-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
        }
        
        .filter-reset {
            background: rgba(30, 41, 59, 0.7);
            color: #94a3b8;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 0.75rem;
            padding: 0.75rem 1.5rem;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }
        
        .filter-reset:hover {
            background: rgba(30, 41, 59, 0.9);
            color: #e2e8f0;
        }
        
        /* Close button for mobile sidebar */
        .sidebar-close-btn {
            display: none;
        }
        
        @media (max-width: 1023px) {
            .sidebar-close-btn {
                display: block;
                position: absolute;
                top: 1rem;
                right: 1rem;
                z-index: 1001;
                width: 2.5rem;
                height: 2.5rem;
                background: rgba(255, 255, 255, 0.1);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                border: none;
                color: white;
                cursor: pointer;
                transition: all 0.2s ease;
                backdrop-filter: blur(10px);
            }
            
            .sidebar-close-btn:hover {
                background: rgba(255, 255, 255, 0.2);
                transform: rotate(90deg);
            }
        }
        
        /* Scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        
        ::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }
        
        ::-webkit-scrollbar-thumb {
            background: var(--primary-gradient);
            border-radius: 3px;
        }
        
        /* Animations */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .animate-fade-in {
            animation: fadeIn 0.5s ease-out;
        }
        
        /* Stats Card */
        .stat-card {
            background: rgba(30, 41, 59, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 1rem;
            padding: 1.25rem;
        }
        
        .stat-value {
            font-size: 1.5rem;
            font-weight: 700;
            margin-top: 0.5rem;
        }
    </style>
</head>
<body class="text-white">
  
  <?php include("nav.php"); ?>

        <!-- Main Content -->
        <div class="main-content">
            <!-- Top Bar -->
            <div class="border-b border-gray-800/50 p-6 glass-card mx-4 mt-4">
                <div class="flex flex-col lg:flex-row lg:justify-between lg:items-center gap-6">
                    <div>
                        <h2 class="text-2xl lg:text-3xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
                            Transaction Statement
                        </h2>
                        <p class="text-gray-400 mt-2">
                            <i class="fas fa-history mr-2"></i> View all your transactions with filters and pagination
                        </p>
                    </div>
                    <div class="flex items-center gap-4">
                        <!-- Mobile Menu Button -->
                        <button id="menuToggle" class="mobile-menu-btn lg:hidden">
                            <i class="fas fa-bars text-white text-2xl"></i>
                        </button>
                        
                        <!-- Export Button -->
                        <a href="export_transactions.php?<?php echo http_build_query($_GET); ?>" class="px-4 py-2 bg-green-600 hover:bg-green-700 rounded-xl text-white text-sm font-medium transition-all flex items-center gap-2">
                            <i class="fas fa-download"></i>
                            <span class="hidden sm:inline">Export</span>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Dashboard Content -->
            <div class="p-6">
                <!-- Summary Cards -->
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                    <div class="stat-card animate-fade-in">
                        <div class="flex items-center justify-between">
                            <span class="text-gray-400 text-sm">Total Transactions</span>
                            <i class="fas fa-exchange-alt text-blue-400"></i>
                        </div>
                        <div class="stat-value"><?php echo number_format($summary['total_transactions'] ?? 0); ?></div>
                        <div class="text-xs text-gray-500 mt-1">All time</div>
                    </div>
                    
                    <div class="stat-card animate-fade-in" style="animation-delay: 0.1s">
                        <div class="flex items-center justify-between">
                            <span class="text-gray-400 text-sm">Total Deposits</span>
                            <i class="fas fa-arrow-down text-green-400"></i>
                        </div>
                        <div class="stat-value text-green-400">$<?php echo number_format($summary['total_deposits'] ?? 0, 2); ?></div>
                        <div class="text-xs text-gray-500 mt-1">Completed: $<?php echo number_format($summary['completed_amount'] ?? 0, 2); ?></div>
                    </div>
                    
                    <div class="stat-card animate-fade-in" style="animation-delay: 0.2s">
                        <div class="flex items-center justify-between">
                            <span class="text-gray-400 text-sm">Total Withdrawals</span>
                            <i class="fas fa-arrow-up text-blue-400"></i>
                        </div>
                        <div class="stat-value text-blue-400">$<?php echo number_format($summary['total_withdrawals'] ?? 0, 2); ?></div>
                        <div class="text-xs text-gray-500 mt-1">Pending: $<?php echo number_format($summary['pending_amount'] ?? 0, 2); ?></div>
                    </div>
                    
                    <div class="stat-card animate-fade-in" style="animation-delay: 0.3s">
                        <div class="flex items-center justify-between">
                            <span class="text-gray-400 text-sm">Total Investments</span>
                            <i class="fas fa-chart-line text-purple-400"></i>
                        </div>
                        <div class="stat-value text-purple-400">$<?php echo number_format($summary['total_investments'] ?? 0, 2); ?></div>
                        <div class="text-xs text-gray-500 mt-1">Profits: $<?php echo number_format($summary['total_profits'] ?? 0, 2); ?></div>
                    </div>
                </div>

                <!-- Filters -->
                <div class="glass-card p-6 mb-6">
                    <h3 class="text-lg font-bold mb-4 flex items-center gap-2">
                        <i class="fas fa-filter text-blue-400"></i>
                        Filter Transactions
                    </h3>
                    
                    <form method="GET" action="" class="filter-form">
                        <select name="type" class="filter-input">
                            <option value="">All Types</option>
                            <?php foreach ($transaction_types as $type): ?>
                                <option value="<?php echo htmlspecialchars($type['type']); ?>" <?php echo $filter_type == $type['type'] ? 'selected' : ''; ?>>
                                    <?php echo ucfirst(htmlspecialchars($type['type'])); ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                        
                        <select name="status" class="filter-input">
                            <option value="">All Statuses</option>
                            <?php foreach ($transaction_statuses as $status): ?>
                                <option value="<?php echo htmlspecialchars($status['status']); ?>" <?php echo $filter_status == $status['status'] ? 'selected' : ''; ?>>
                                    <?php echo ucfirst(htmlspecialchars($status['status'])); ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                        
                        <input type="date" name="date_from" class="filter-input" value="<?php echo htmlspecialchars($date_from); ?>" placeholder="From Date">
                        
                        <input type="date" name="date_to" class="filter-input" value="<?php echo htmlspecialchars($date_to); ?>" placeholder="To Date">
                        
                        <div class="flex gap-2">
                            <button type="submit" class="filter-button flex-1">
                                <i class="fas fa-search"></i>
                                <span>Apply Filters</span>
                            </button>
                            
                            <a href="statement.php" class="filter-reset">
                                <i class="fas fa-times"></i>
                                <span class="hidden sm:inline">Reset</span>
                            </a>
                        </div>
                    </form>
                </div>

                <!-- Transactions Table -->
                <div class="glass-card p-6">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-bold">Transaction History</h3>
                        <span class="text-sm text-gray-400">
                            Showing <?php echo count($transactions); ?> of <?php echo $total_records; ?> transactions
                        </span>
                    </div>
                    
                    <?php if (empty($transactions)): ?>
                    <div class="text-center py-12">
                        <div class="w-24 h-24 bg-gray-800/50 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i class="fas fa-exchange-alt text-gray-600 text-3xl"></i>
                        </div>
                        <h4 class="text-xl font-bold text-white mb-2">No Transactions Found</h4>
                        <p class="text-gray-400 mb-6">No transactions match your current filters.</p>
                        <a href="deposit.php" class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl text-white font-medium hover:shadow-lg transition-all">
                            <i class="fas fa-plus"></i>
                            Make Your First Deposit
                        </a>
                    </div>
                    <?php else: ?>
                    <div class="table-container">
                        <table class="transactions-table">
                            <thead>
                                <tr>
                                    <th>Transaction</th>
                                    <th>Type</th>
                                    <th>Amount</th>
                                    <th>Status</th>
                                    <th>Date</th>
                                    <th>Reference</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach ($transactions as $transaction): ?>
                                <?php
                                $type_class = '';
                                $type_icon = '';
                                $amount_class = '';
                                $amount_prefix = '';
                                
                                switch ($transaction['type']) {
                                    case 'deposit':
                                        $type_class = 'deposit';
                                        $type_icon = 'fa-arrow-down';
                                        $amount_class = 'amount-positive';
                                        $amount_prefix = '+';
                                        break;
                                    case 'withdrawal':
                                        $type_class = 'withdrawal';
                                        $type_icon = 'fa-arrow-up';
                                        $amount_class = 'amount-negative';
                                        $amount_prefix = '-';
                                        break;
                                    case 'investment':
                                        $type_class = 'investment';
                                        $type_icon = 'fa-chart-line';
                                        $amount_class = 'amount-negative';
                                        $amount_prefix = '-';
                                        break;
                                    case 'profit':
                                        $type_class = 'profit';
                                        $type_icon = 'fa-coins';
                                        $amount_class = 'amount-positive';
                                        $amount_prefix = '+';
                                        break;
                                    case 'referral':
                                        $type_class = 'referral';
                                        $type_icon = 'fa-users';
                                        $amount_class = 'amount-positive';
                                        $amount_prefix = '+';
                                        break;
                                    default:
                                        $type_class = 'deposit';
                                        $type_icon = 'fa-circle';
                                        $amount_class = '';
                                }
                                ?>
                                <tr>
                                    <td>
                                        <div class="transaction-type">
                                            <div class="type-icon <?php echo $type_class; ?>">
                                                <i class="fas <?php echo $type_icon; ?>"></i>
                                            </div>
                                            <div>
                                                <div class="font-medium"><?php echo ucfirst($transaction['type']); ?></div>
                                                <div class="text-xs text-gray-500">ID: <?php echo str_pad($transaction['id'], 8, '0', STR_PAD_LEFT); ?></div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="capitalize"><?php echo ucfirst($transaction['type']); ?></span>
                                    </td>
                                    <td>
                                        <span class="<?php echo $amount_class; ?>">
                                            <?php echo $amount_prefix; ?>$<?php echo number_format($transaction['amount'], 2); ?>
                                        </span>
                                    </td>
                                    <td>
                                        <span class="status-badge <?php echo $transaction['status']; ?>">
                                            <i class="fas fa-<?php 
                                                echo $transaction['status'] == 'completed' ? 'check-circle' : 
                                                    ($transaction['status'] == 'pending' ? 'clock' : 
                                                    ($transaction['status'] == 'failed' ? 'times-circle' : 'circle')); 
                                            ?>"></i>
                                            <?php echo ucfirst($transaction['status']); ?>
                                        </span>
                                    </td>
                                    <td>
                                        <div><?php echo date('M d, Y', strtotime($transaction['created_at'])); ?></div>
                                        <div class="text-xs text-gray-500"><?php echo date('h:i A', strtotime($transaction['created_at'])); ?></div>
                                    </td>
                                    <td>
                                        <span class="font-mono text-xs text-gray-500">
                                            <?php echo 'TXN' . str_pad($transaction['id'], 8, '0', STR_PAD_LEFT); ?>
                                        </span>
                                    </td>
                                </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- Pagination -->
                    <?php if ($total_pages > 1): ?>
                    <div class="pagination">
                        <?php if ($page > 1): ?>
                        <a href="?<?php echo http_build_query(array_merge($_GET, ['page' => 1])); ?>" class="page-item">
                            <i class="fas fa-angle-double-left"></i>
                        </a>
                        <a href="?<?php echo http_build_query(array_merge($_GET, ['page' => $page - 1])); ?>" class="page-item">
                            <i class="fas fa-angle-left"></i>
                        </a>
                        <?php endif; ?>
                        
                        <?php
                        $start_page = max(1, $page - 2);
                        $end_page = min($total_pages, $page + 2);
                        
                        for ($i = $start_page; $i <= $end_page; $i++):
                        ?>
                        <a href="?<?php echo http_build_query(array_merge($_GET, ['page' => $i])); ?>" class="page-item <?php echo $i == $page ? 'active' : ''; ?>">
                            <?php echo $i; ?>
                        </a>
                        <?php endfor; ?>
                        
                        <?php if ($page < $total_pages): ?>
                        <a href="?<?php echo http_build_query(array_merge($_GET, ['page' => $page + 1])); ?>" class="page-item">
                            <i class="fas fa-angle-right"></i>
                        </a>
                        <a href="?<?php echo http_build_query(array_merge($_GET, ['page' => $total_pages])); ?>" class="page-item">
                            <i class="fas fa-angle-double-right"></i>
                        </a>
                        <?php endif; ?>
                    </div>
                    <?php endif; ?>
                    
                    <?php endif; ?>
                </div>
                
                <!-- Footer -->
                <div class="mt-8 text-center">
                    <p class="text-gray-500 text-sm">
                        © <?php echo date('Y'); ?> <?php echo htmlspecialchars($site_settings['site_name'] ?? 'Trading Platform'); ?>. 
                        All rights reserved. | 
                        Account ID: <span class="font-mono text-gray-400"><?php echo isset($user['id']) ? str_pad($user['id'], 8, '0', STR_PAD_LEFT) : 'N/A'; ?></span>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Sidebar Overlay -->
    <div class="sidebar-overlay" id="sidebarOverlay"></div>

    <script>
        // Mobile menu toggle functionality
        const menuToggle = document.getElementById('menuToggle');
        const closeSidebar = document.getElementById('closeSidebar');
        const sidebar = document.getElementById('sidebar');
        const sidebarOverlay = document.getElementById('sidebarOverlay');
        const body = document.body;

        // Function to toggle sidebar
        function toggleSidebar() {
            sidebar.classList.toggle('active');
            sidebarOverlay.classList.toggle('active');
            
            // Toggle body scroll prevention
            if (sidebar.classList.contains('active')) {
                body.classList.add('sidebar-open');
                body.style.overflow = 'hidden';
            } else {
                body.classList.remove('sidebar-open');
                body.style.overflow = '';
            }
        }

        // Function to close sidebar
        function closeSidebarFunc() {
            sidebar.classList.remove('active');
            sidebarOverlay.classList.remove('active');
            body.classList.remove('sidebar-open');
            body.style.overflow = '';
        }

        // Event listeners for mobile menu
        if (menuToggle) {
            menuToggle.addEventListener('click', toggleSidebar);
        }
        
        if (closeSidebar) {
            closeSidebar.addEventListener('click', closeSidebarFunc);
        }
        
        if (sidebarOverlay) {
            sidebarOverlay.addEventListener('click', closeSidebarFunc);
        }

        // Close sidebar when clicking on navigation links on mobile
        document.querySelectorAll('.nav-item').forEach(item => {
            item.addEventListener('click', function(e) {
                // Update active state
                document.querySelectorAll('.nav-item').forEach(nav => {
                    nav.classList.remove('active');
                });
                
                this.classList.add('active');
                
                // Close sidebar on mobile after selection
                if (window.innerWidth < 1024) {
                    setTimeout(() => {
                        closeSidebarFunc();
                    }, 300);
                }
            });
        });

        // Handle window resize
        window.addEventListener('resize', function() {
            if (window.innerWidth >= 1024) {
                // Ensure sidebar is visible on desktop
                if (sidebar) sidebar.classList.add('active');
                if (sidebarOverlay) sidebarOverlay.classList.remove('active');
                body.classList.remove('sidebar-open');
                body.style.overflow = '';
            } else {
                // Ensure sidebar is hidden on mobile unless explicitly opened
                if (sidebar && !sidebar.classList.contains('active')) {
                    sidebar.classList.remove('active');
                    if (sidebarOverlay) sidebarOverlay.classList.remove('active');
                    body.classList.remove('sidebar-open');
                    body.style.overflow = '';
                }
            }
        });

        // Initialize sidebar state on load
        document.addEventListener('DOMContentLoaded', function() {
            if (window.innerWidth >= 1024 && sidebar) {
                sidebar.classList.add('active');
            }
            
            // Set active nav item based on current page
            const currentPage = window.location.pathname.split('/').pop() || 'statement.php';
            document.querySelectorAll('.nav-item').forEach(nav => {
                const href = nav.getAttribute('href');
                if (href && href.includes(currentPage)) {
                    nav.classList.add('active');
                }
            });
            
            // Initialize animations
            const cards = document.querySelectorAll('.animate-fade-in');
            cards.forEach((card, index) => {
                card.style.animationDelay = `${index * 0.1}s`;
            });
        });

        // Escape key closes sidebar
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && sidebar && sidebar.classList.contains('active')) {
                closeSidebarFunc();
            }
        });

        // Show notification function
        function showNotification(message, type = 'info') {
            // Remove existing notification
            const existing = document.querySelector('.notification-toast');
            if (existing) existing.remove();
            
            const notification = document.createElement('div');
            notification.className = `notification-toast fixed top-6 right-6 px-4 py-3 rounded-xl shadow-xl z-50 animate-fade-in ${type === 'success' ? 'bg-green-600' : 'bg-blue-600'} text-white`;
            notification.innerHTML = `
                <div class="flex items-center gap-3">
                    <i class="fas fa-${type === 'success' ? 'check-circle' : 'info-circle'}"></i>
                    <span>${message}</span>
                </div>
            `;
            
            document.body.appendChild(notification);
            
            setTimeout(() => {
                notification.style.opacity = '0';
                notification.style.transform = 'translateX(100%)';
                setTimeout(() => notification.remove(), 300);
            }, 3000);
        }

        // Add notification styles
        const style = document.createElement('style');
        style.textContent = `
            .notification-toast {
                animation: slideIn 0.3s ease-out;
                transition: all 0.3s ease;
                z-index: 9999;
            }
            
            @keyframes slideIn {
                from {
                    opacity: 0;
                    transform: translateX(100%);
                }
                to {
                    opacity: 1;
                    transform: translateX(0);
                }
            }
        `;
        document.head.appendChild(style);
    </script>
</body>
</html>