@model NEducation.Models.WinnerMiniGameModel


<style>
    .scrollable-container {
        max-height: 200px; /* Adjust the height to control the visible area */
        overflow-y: auto; /* Enable vertical scrolling */
        overflow-x: hidden; /* Prevent horizontal scrolling */
        padding: 5px;
    }

    .data-line.bottom-border {
        border-bottom: 1px solid #ddd;
        padding: 10px 0;
    }

    /* Optional: Custom scrollbar styles */
    .scrollable-container::-webkit-scrollbar {
        width: 8px;
    }

    .scrollable-container::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .scrollable-container::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
    }

        .scrollable-container::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

    .data-line {
        display: flex;
        align-items: center;
    }
</style>

<div class="row data-line">
    <div class="col-6">
        <h6 class="fw-semibold mb-0 text-c-1">@NEducation.Content.Texts.Lang.Date</h6>
    </div>
    <div class="col-6 right">
        <h6 class="fw-semibold mb-0 text-c-1 right">@NEducation.Content.Texts.Lang.Phone_number</h6>
    </div>
</div>

<div class="scrollable-container">
    @if (Model != null )
    {
        foreach (var winner in Model.Winner.listWinner)
        {
            var sysdateParsed = DateTime.TryParseExact(winner.sysdate, "M/d/yyyy h:mm:ss tt",
                                                       System.Globalization.CultureInfo.InvariantCulture,
                                                       System.Globalization.DateTimeStyles.None, out DateTime sysdate);
            <div class="row data-line bottom-border">
                <div class="col-6">
                    <h6 class="fw-semibold mb-0 fw-semibold mb-1">
                        <div class="text-c-1 font-z-10">@sysdate.ToString("dd/MM/yyyy")</div>
                        <div class="text-c-1 font-z-12">@sysdate.ToString("HH:mm:ss")</div>
                    </h6>
                </div>
                <div class="col-6 right">
                    <h6 class="fw-semibold mb-0 fw-semibold mb-1 text-c-1 right">
                        @winner.msisdn
                    </h6>
                </div>
            </div>
        }
    }
    else
    {
        <div class="row data-line bottom-border">
            <div class="col-12 text-c-1">
                No winner data available.
            </div>
        </div>
    }
</div>