@{
    Layout = "_GameLayout";
}

@section Styles {
    <link rel="stylesheet" href="~/css/sicbo-history.css" />
}

<div class="home">
    <!-- Background Image -->
    <img class="image" src="~/img/image-2.png" />
    
    <!-- Reuse Game Menu -->
    <partial name="_GameMenu" />

    <!-- History Content Panel -->
    <div class="history-panel">
        <!-- Tab Buttons -->
        <div class="history-tabs">
            <div class="tab-button active" data-tab="game">
                <span class="tab-label">Game</span>
            </div>
            <div class="tab-button" data-tab="prize">
                <span class="tab-label">Prize</span>
            </div>
            <div class="tab-button" data-tab="purchase">
                <span class="tab-label">Purchase</span>
            </div>
        </div>

        <!-- Game History Table -->
        <div class="history-table" id="game-table">
            <!-- Header Row -->
            <div class="table-header">
                <div class="col-id">ID</div>
                <div class="col-time">Time</div>
                <div class="col-coin">Coin</div>
                <div class="col-status">Status</div>
            </div>

            <!-- Data Rows -->
            <div class="table-row">
                <div class="col-id">AA001</div>
                <div class="col-time">20/12/2026, 18:00:00</div>
                <div class="col-coin positive">+5.000</div>
                <div class="col-status won">Won</div>
            </div>
            <div class="table-row">
                <div class="col-id">AA002</div>
                <div class="col-time">20/12/2026, 18:00:00</div>
                <div class="col-coin positive">+50.000</div>
                <div class="col-status won">Won</div>
            </div>
            <div class="table-row">
                <div class="col-id">AA003</div>
                <div class="col-time">20/12/2026, 18:00:00</div>
                <div class="col-coin positive">+50.000</div>
                <div class="col-status won">Won</div>
            </div>
            <div class="table-row">
                <div class="col-id">AA004</div>
                <div class="col-time">20/12/2026, 18:00:00</div>
                <div class="col-coin positive">+50.000</div>
                <div class="col-status won">Won</div>
            </div>
            <div class="table-row">
                <div class="col-id">AA005</div>
                <div class="col-time">20/12/2026, 18:00:00</div>
                <div class="col-coin negative">-50.000</div>
                <div class="col-status lost">Losed</div>
            </div>
            <div class="table-row">
                <div class="col-id">AA006</div>
                <div class="col-time">20/12/2026, 18:00:00</div>
                <div class="col-coin negative">-250.000</div>
                <div class="col-status lost">Losed</div>
            </div>
        </div>

        <!-- Prize History Table (Hidden by default) -->
        <div class="history-table hidden" id="prize-table">
            <!-- Header Row -->
            <div class="table-header">
                <div class="col-account">Account</div>
                <div class="col-time">Time</div>
                <div class="col-value">Value</div>
                <div class="col-status">Status</div>
            </div>

            <!-- Data Rows -->
            <div class="table-row">
                <div class="col-account">0912345678</div>
                <div class="col-time">20/12/2026, 18:00:00</div>
                <div class="col-value">250.000 <span class="usd">USD</span></div>
                <div class="col-status pending">Peding</div>
            </div>
            <div class="table-row">
                <div class="col-account">0912345678</div>
                <div class="col-time">20/12/2026, 18:00:00</div>
                <div class="col-value">25.000 <span class="usd">USD</span></div>
                <div class="col-status successful">Successful</div>
            </div>
            <div class="table-row">
                <div class="col-account">0912345678</div>
                <div class="col-time">20/12/2026, 18:00:00</div>
                <div class="col-value">1.000.000 <span class="usd">USD</span></div>
                <div class="col-status fail">Fail</div>
            </div>
            <div class="table-row">
                <div class="col-account">0912345678</div>
                <div class="col-time">20/12/2026, 18:00:00</div>
                <div class="col-value">5.000 <span class="usd">USD</span></div>
                <div class="col-status successful">Successful</div>
            </div>
            <div class="table-row">
                <div class="col-account">0912345678</div>
                <div class="col-time">20/12/2026, 18:00:00</div>
                <div class="col-value">2.000.000 <span class="usd">USD</span></div>
                <div class="col-status fail">Fail</div>
            </div>
            <div class="table-row">
                <div class="col-account">0912345678</div>
                <div class="col-time">20/12/2026, 18:00:00</div>
                <div class="col-value">105.000 <span class="usd">USD</span></div>
                <div class="col-status successful">Successful</div>
            </div>
        </div>

        <!-- Purchase History Table (Hidden by default) -->
        <div class="history-table hidden" id="purchase-table">
            <!-- Header Row -->
            <div class="table-header">
                <div class="col-no">No</div>
                <div class="col-time">Time</div>
                <div class="col-value">Value</div>
                <div class="col-type">Type</div>
            </div>

            <!-- Data Rows -->
            <div class="table-row">
                <div class="col-no">1</div>
                <div class="col-time">20/12/2026, 18:00:00</div>
                <div class="col-value">50 <span class="coins">Coins</span></div>
                <div class="col-type daily-package">Daily Package</div>
            </div>
            <div class="table-row">
                <div class="col-no">2</div>
                <div class="col-time">20/12/2026, 18:00:00</div>
                <div class="col-value">500 <span class="coins">Coins</span></div>
                <div class="col-type buy-turn">Buy Turn</div>
            </div>
            <div class="table-row">
                <div class="col-no">3</div>
                <div class="col-time">20/12/2026, 18:00:00</div>
                <div class="col-value">50 <span class="coins">Coins</span></div>
                <div class="col-type daily-package">Daily Package</div>
            </div>
            <div class="table-row">
                <div class="col-no">4</div>
                <div class="col-time">20/12/2026, 18:00:00</div>
                <div class="col-value">50 <span class="coins">Coins</span></div>
                <div class="col-type buy-turn">Buy Turn</div>
            </div>
            <div class="table-row">
                <div class="col-no">5</div>
                <div class="col-time">20/12/2026, 18:00:00</div>
                <div class="col-value">250 <span class="coins">Coins</span></div>
                <div class="col-type buy-turn">Buy Turn</div>
            </div>
            <div class="table-row">
                <div class="col-no">6</div>
                <div class="col-time">20/12/2026, 18:00:00</div>
                <div class="col-value">50 <span class="coins">Coins</span></div>
                <div class="col-type daily-package">Daily Package</div>
            </div>
        </div>
    </div>
</div>

<script>
    document.querySelectorAll('.tab-button').forEach(button => {
        button.addEventListener('click', function() {
            // Remove active from all tabs
            document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
            // Add active to clicked tab
            this.classList.add('active');
            
            // Hide all tables
            document.getElementById('game-table').classList.add('hidden');
            document.getElementById('prize-table').classList.add('hidden');
            document.getElementById('purchase-table').classList.add('hidden');
            
            // Show selected table
            const tab = this.dataset.tab;
            document.getElementById(tab + '-table').classList.remove('hidden');
        });
    });
</script>
