SicboSub/SicboSub/SicboSub.Web/Views/Home/History.cshtml

@model SicboSub.Web.Models.HistoryViewModel
@{
    Layout = "_GameLayout";
    var msisdn = ViewData["Msisdn"] as string;
}
@using SicboSub.Web.Language;
@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">@Language.Game</span>
            </div>
            <div class="tab-button" data-tab="prize">
                <span class="tab-label">@Language.Prize</span>
            </div>
            <div class="tab-button" data-tab="purchase">
                <span class="tab-label">@Language.Purchase</span>
            </div>
        </div>

        <!-- Game History Table -->
        <div class="history-table" id="game-table">
            <!-- Header Row -->
            <div class="table-header">
                <div class="col-id">@Language.Msisdn</div>
                <div class="col-time">@Language.Time</div>
                <div class="col-coin">@Language.Coins</div>
                <div class="col-status">@Language.Status</div>
            </div>

            <!-- Data Rows -->
            @if (Model != null && Model.GameHistory != null && Model.GameHistory.Count > 0)
            {
                foreach (var item in Model.GameHistory)
                {
                    <div class="table-row">
                        <div class="col-id">@msisdn</div>
                        <div class="col-time">@item.bettingTime.ToString("dd/MM/yyyy, HH:mm:ss")</div>
                        @if (item.isWin)
                        {
                             <div class="col-coin positive">+@item.winCoin.ToString("N0")</div>
                             <div class="col-status won">Won</div>
                        }
                        else
                        {
                             <div class="col-coin negative">-@item.bettingValue.ToString("N0")</div>
                             <div class="col-status lost">Lost</div>
                        }
                    </div>
                }
            }
            else
            {
                <div class="table-row" style="justify-content:center;">
                    <span></span>
                </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">@Language.Account</div>
                <div class="col-time">@Language.Time</div>
                <div class="col-value">@Language.Value</div>
                <div class="col-status">@Language.Rank</div>
            </div>

            <!-- Data Rows -->
            @if (Model != null && Model.PrizeHistory != null && Model.PrizeHistory.Count > 0)
            {
                foreach (var item in Model.PrizeHistory)
                {
                    <div class="table-row">
                        <div class="col-account">@msisdn</div>
                        <div class="col-time">@item.rewardDate.ToString("dd/MM/yyyy, HH:mm:ss")</div>
                        <div class="col-value">@item.rewardValue.ToString("N0") <span class="usd">@item.rewardUnit</span></div>
                        <div class="col-status successful">Top @item.rankPosition</div>
                    </div>
                }
            }
            else
            {
                <div class="table-row" style="justify-content:center;">
                    <span></span>
                </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">@Language.Time</div>
                <div class="col-value">@Language.Price</div>
                <div class="col-type">@Language.Package</div>
                <div class="col-status">@Language.Status</div>
            </div>

            <!-- Data Rows -->
            @if (Model != null && Model.PurchaseHistory != null && Model.PurchaseHistory.Count > 0)
            {
                int no = 1;
                foreach (var item in Model.PurchaseHistory)
                {
                    <div class="table-row">
                        <div class="col-no">@(no++)</div>
                        <div class="col-time">@item.registerTime.ToString("dd/MM/yyyy HH:mm:ss")</div>
                        <div class="col-value">@item.serviceId.ToString("N0") <span class="coins">@Language.HTG</span></div>
                        <div class="col-type">@item.productName</div>
                        @if (item.status == 1) // Assuming 1 is Success
                        {
                            <div class="col-status successful">@Language.Success</div>
                        }
                        else
                        {
                            <div class="col-status fail">@Language.Failed</div>
                        }
                    </div>
                }
            }
            else
            {
                <div class="table-row" style="justify-content:center;">
                    <span></span>
                </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>