<?php
session_start();
require_once 'config.php';

if (!isset($_SESSION['user_id'])) {
    header("Location: login.php");
    exit;
}

$userId = $_SESSION['user_id'];
global $pdo;

// Fetch All Transactions
$history = [];
try {
    // Exact table aur columns ke hisab se query
    $stmt = $pdo->prepare("
        SELECT * FROM transactions 
        WHERE user_id = ? 
        ORDER BY created_at DESC 
        LIMIT 100
    ");
    $stmt->execute([$userId]);
    $history = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (Exception $e) {
    $error = $e->getMessage();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Transaction History - 91CLUB</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet">
    <style>
        @font-face { font-family: 'Bahnschrift'; src: url('https://91appt.com/assets/woff2/bahnschrift-610d57ac.woff2') format('woff2'); font-display: swap;}
        
        /* Pro CSS & Reset */
        :root { 
            --primary: #eb4d4b; 
            --desktop-bg: #8b8e93; 
            --app-bg: #f4f5f8; 
            --text-dark: #2f3640; 
            --text-muted: #7f8fa6;
            --success: #2ecc71;
            --danger: #e74c3c;
            --card-bg: #ffffff;
        }
        
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', sans-serif; -webkit-tap-highlight-color: transparent; }
        
        body { 
            background-color: var(--desktop-bg); 
            display: flex;
            justify-content: center;
            min-height: 100vh;
        }
        
        .bahnschrift { font-family: 'Bahnschrift', 'Roboto', sans-serif !important; }

        /* App Frame */
        .app-frame {
            width: 100%;
            max-width: 400px;
            background-color: var(--app-bg);
            min-height: 100vh;
            position: relative;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
            overflow-x: hidden;
            padding-top: 105px;
        }

        /* Fixed Header Area */
        .header-wrap {
            position: fixed;
            top: 0;
            width: 100%;
            max-width: 400px;
            z-index: 99;
            background: var(--card-bg);
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

        /* Red Top Bar */
        .header { 
            background: var(--primary);
            color: white;
            height: 55px; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            position: relative;
        }
        .back-icon { 
            position: absolute; 
            left: 15px; 
            display: flex;
            align-items: center;
            cursor: pointer; 
            text-decoration: none;
        }
        .back-icon svg { fill: white; width: 24px; height: 24px; }
        .title { font-size: 18px; font-weight: 700; letter-spacing: 0.5px; }

        /* Filter Tabs */
        .filter-bar { 
            display: flex; 
            gap: 12px; 
            padding: 12px 15px; 
            overflow-x: auto; 
            background: var(--card-bg);
        }
        .filter-bar::-webkit-scrollbar { display: none; }
        .f-tab { 
            background: #f1f2f6; 
            color: var(--text-muted); 
            padding: 8px 18px; 
            border-radius: 20px; 
            font-size: 13px; 
            font-weight: 600;
            white-space: nowrap; 
            display: flex; 
            align-items: center; 
            gap: 6px; 
            transition: 0.2s;
        }
        .f-tab.active { 
            background: rgba(235, 77, 75, 0.1); 
            color: var(--primary); 
            border: 1px solid rgba(235, 77, 75, 0.3);
        }
        
        /* Date Filter Bar */
        .date-filter { 
            display: flex; 
            justify-content: space-between; 
            align-items: center;
            padding: 10px 15px; 
            font-size: 14px; 
            font-weight: 600;
            color: var(--text-dark); 
            background: var(--card-bg); 
            border-top: 1px solid #f1f2f6;
        }

        /* History List Container */
        .history-list { padding: 15px; }
        
        /* Premium Card Design */
        .card { 
            background: var(--card-bg); 
            border-radius: 12px; 
            padding: 16px; 
            margin-bottom: 15px; 
            box-shadow: 0 4px 12px rgba(0,0,0,0.03); 
            border: 1px solid rgba(0,0,0,0.02);
        }
        
        .card-top { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            border-bottom: 1px dashed #dcdde1; 
            padding-bottom: 12px; 
            margin-bottom: 12px; 
        }
        
        /* Transaction Tags */
        .tag { color: white; padding: 4px 12px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;}
        .tag-credit { background: linear-gradient(90deg, #2ecc71, #27ae60); } 
        .tag-debit { background: linear-gradient(90deg, #e74c3c, #c0392b); } 
        .tag-neutral { background: linear-gradient(90deg, #3498db, #2980b9); } 

        /* Row Details */
        .detail-row { 
            display: flex; 
            justify-content: space-between; 
            align-items: center;
            margin-bottom: 10px; 
            font-size: 13px; 
            color: var(--text-muted); 
            font-weight: 500;
        }
        .detail-row:last-child { margin-bottom: 0; }
        
        .detail-val { color: var(--text-dark); font-weight: 600; text-align: right; max-width: 60%; }
        
        /* Amount Colors */
        .amt-credit { font-size: 18px; color: var(--success); font-weight: 700; }
        .amt-debit { font-size: 18px; color: var(--danger); font-weight: 700; }

        /* Empty State */
        .empty-box { 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            justify-content: center;
            gap: 12px; 
            padding: 80px 0; 
            color: var(--text-muted); 
            font-size: 15px; 
            font-weight: 600;
        }
        .empty-box svg { width: 90px; height: 90px; opacity: 0.8; }
    </style>
</head>
<body>

<div class="app-frame">
    
    <div class="header-wrap">
        <div class="header">
            <a href="javascript:history.back()" class="back-icon">
                <svg viewBox="0 0 24 24"><path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"/></svg>
            </a>
            <div class="title">Transaction History</div>
        </div>
        
        <div class="filter-bar">
            <div class="f-tab active">All</div>
            <div class="f-tab">Deposit</div>
            <div class="f-tab">Withdraw</div>
            <div class="f-tab">Bet</div>
        </div>
        
        <div class="date-filter">
            <span>All Transactions</span>
        </div>
    </div>

    <div class="history-list">
        <?php if(empty($history)): ?>
            <div class="empty-box">
                <svg viewBox="0 0 100 80" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M20 25L50 40L80 25M20 25V55C20 60.5228 24.4772 65 30 65H70C75.5228 65 80 60.5228 80 55V25M20 25C20 19.4772 24.4772 15 30 15H70C75.5228 15 80 19.4772 80 25" stroke="#cbd5e1" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M40 45H60" stroke="#cbd5e1" stroke-width="4" stroke-linecap="round"/>
                </svg>
                <p>No Data Available</p>
            </div>
        <?php else: ?>
            <?php foreach($history as $row): 
                // Database columns se exact mapping ki hai
                $type = strtolower($row['type'] ?? ''); 
                $amount = (float)($row['amount'] ?? 0);
                $desc = htmlspecialchars($row['description'] ?? 'Transaction');
                $balAfter = (float)($row['balance_after'] ?? 0);
                $refId = htmlspecialchars($row['reference_id'] ?? 'TXN' . str_pad($row['id'], 6, '0', STR_PAD_LEFT));
                
                // Credit ya Debit check karne ka logic
                $isCredit = in_array($type, ['credit', 'deposit', 'win', 'bonus', 'reward']);
                $isDebit = in_array($type, ['debit', 'withdraw', 'bet', 'penalty']);
                
                if ($isCredit) {
                    $tagClass = 'tag-credit';
                    $amtClass = 'amt-credit';
                    $sign = '+ ';
                    $displayType = 'CREDIT';
                } elseif ($isDebit) {
                    $tagClass = 'tag-debit';
                    $amtClass = 'amt-debit';
                    $sign = '- ';
                    $displayType = 'DEBIT';
                } else {
                    $tagClass = 'tag-neutral';
                    $amtClass = 'detail-val';
                    $sign = '';
                    $displayType = strtoupper($type !== '' ? $type : 'SYSTEM');
                }
            ?>
            
            <div class="card">
                <div class="card-top">
                    <span class="tag <?= $tagClass ?>"><?= $displayType ?></span>
                    <span class="<?= $amtClass ?> bahnschrift">
                        <?= $sign ?>₹<?= number_format($amount, 2) ?>
                    </span>
                </div>
                
                <div class="detail-row">
                    <span>Details</span>
                    <span class="detail-val"><?= $desc ?></span>
                </div>
                
                <div class="detail-row">
                    <span>Balance After</span>
                    <span class="detail-val bahnschrift" style="color: #3498db;">₹<?= number_format($balAfter, 2) ?></span>
                </div>
                
                <div class="detail-row">
                    <span>Time</span>
                    <span class="detail-val bahnschrift"><?= date('Y-m-d H:i:s', strtotime($row['created_at'])) ?></span>
                </div>
                
                <div class="detail-row">
                    <span>Reference ID</span>
                    <span class="detail-val bahnschrift" style="font-size: 11px;"><?= $refId ?></span>
                </div>
            </div>
            
            <?php endforeach; ?>
        <?php endif; ?>
    </div>

</div>

</body>
</html>