{% extends 'base.html.twig' %}

{% block title %}Bet History — Color Game{% endblock %}

{% block body %}
<style>
.cg-swatch{display:inline-block;width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,0.35);vertical-align:middle;margin-right:3px;}
.cg-swatch[data-c="red"]{background:#E63946;}
.cg-swatch[data-c="yellow"]{background:#F4B942;}
.cg-swatch[data-c="blue"]{background:#3D87E8;}
.cg-swatch[data-c="green"]{background:#3FB65D;}
.cg-swatch[data-c="white"]{background:#F5F5F5;}
.cg-swatch[data-c="pink"]{background:#FF3E9A;}

@media (max-width: 480px) {
    .cg-stack-table thead { display: none; }
    .cg-stack-table tbody tr {
        display: block;
        padding: 12px;
        margin-bottom: 12px;
        border: 1px solid #2a2a2a;
        border-radius: 8px;
        background: #141414;
    }
    .cg-stack-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 0;
        border: none !important;
        border-bottom: 1px solid #1f1f1f !important;
        text-align: left !important;
        color: #d1d5db !important;
    }
    .cg-stack-table tbody td:last-child { border-bottom: none !important; }
    .cg-stack-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #6b7280;
        font-size: 11px;
        text-transform: uppercase;
        flex-shrink: 0;
        margin-right: 10px;
    }
}
</style>
<div class="game-page">
    <div class="game-page__inner">

        {# ── Header ── #}
        <div class="d-flex align-items-center justify-content-between flex-wrap gap-3 mb-4">
            <div>
                <a href="{{ path('app_play_color_game') }}" class="back-link" data-turbo="false">
                    ← Back to Game
                </a>
                <h1 class="fw-bold mb-0" style="letter-spacing: -.02em;">Bet History</h1>
                <p class="text-muted mt-1 mb-0">All your Color Game bets</p>
            </div>
        </div>

        {# ── Results table ── #}
        <div class="dark-table-card">
            {% if bets is not empty %}
                <div class="table-scroll">
                    <table class="data-table cg-stack-table">
                        <thead>
                            <tr class="thead-dark-row">
                                <th class="th-dark">Time</th>
                                <th class="th-dark">Dice</th>
                                <th class="th-dark">Your Bet</th>
                                <th class="th-dark">Matches</th>
                                <th class="th-dark">Outcome</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for bet in bets %}
                                <tr class="tr-dark">
                                    <td data-label="Time" class="td-dark td-dark--muted">
                                        {{ bet.createdAt|date('M d, H:i') }}
                                    </td>
                                    <td data-label="Dice" class="td-dark" style="white-space: nowrap;">
                                        <span class="cg-swatch" data-c="{{ bet.dice1 }}"></span>
                                        <span class="cg-swatch" data-c="{{ bet.dice2 }}"></span>
                                        <span class="cg-swatch" data-c="{{ bet.dice3 }}"></span>
                                    </td>
                                    <td data-label="Your Bet" class="td-dark td-dark--bet">
                                        <span class="cg-swatch" data-c="{{ bet.color }}"></span>
                                        {{ bet.color|capitalize }}
                                        <span class="td-dark--muted ms-1">₱{{ bet.amount|number_format(2) }}</span>
                                    </td>
                                    <td data-label="Matches" class="td-dark td-dark--muted">
                                        {{ bet.matchCount ?? '—' }}
                                    </td>
                                    <td data-label="Outcome" class="td-dark">
                                        {% if bet.status == 'won' %}
                                            <span class="badge-status badge-status--won">Won</span>
                                            <span class="td-dark--muted ms-1" style="font-size: 12px;">₱{{ bet.payout|number_format(2) }}</span>
                                        {% elseif bet.status == 'lost' %}
                                            <span class="badge-status badge-status--lost">Lost</span>
                                        {% else %}
                                            <span class="badge-status badge-status--pending">Processing</span>
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                {# ── Pagination ── #}
                {% if maxPage > 1 %}
                <div class="d-flex align-items-center justify-content-center flex-wrap gap-2 mt-4">

                    {% if page > 1 %}
                        <a href="{{ path('app_play_color_game_history', {page: page - 1}) }}"
                           class="page-btn page-btn--square page-btn--prev text-decoration-none">‹</a>
                    {% else %}
                        <span class="page-btn page-btn--square page-btn--ellipsis">‹</span>
                    {% endif %}

                    {% set rangeStart = max(1, page - 2) %}
                    {% set rangeEnd   = min(maxPage, page + 2) %}

                    {% if rangeStart > 1 %}
                        <a href="{{ path('app_play_color_game_history', {page: 1}) }}"
                           class="page-btn page-btn--wide page-btn--number text-decoration-none">1</a>
                        {% if rangeStart > 2 %}<span class="page-btn--ellipsis">…</span>{% endif %}
                    {% endif %}

                    {% for p in rangeStart..rangeEnd %}
                        {% if p == page %}
                            <span class="page-btn page-btn--wide fw-bold"
                                  style="background-color: #16a34a; border: 1px solid #16a34a; color: #ffffff;">{{ p }}</span>
                        {% else %}
                            <a href="{{ path('app_play_color_game_history', {page: p}) }}"
                               class="page-btn page-btn--wide page-btn--number text-decoration-none">{{ p }}</a>
                        {% endif %}
                    {% endfor %}

                    {% if rangeEnd < maxPage %}
                        {% if rangeEnd < maxPage - 1 %}<span class="page-btn--ellipsis">…</span>{% endif %}
                        <a href="{{ path('app_play_color_game_history', {page: maxPage}) }}"
                           class="page-btn page-btn--wide page-btn--number text-decoration-none">{{ maxPage }}</a>
                    {% endif %}

                    {% if page < maxPage %}
                        <a href="{{ path('app_play_color_game_history', {page: page + 1}) }}"
                           class="page-btn page-btn--square page-btn--next text-decoration-none">›</a>
                    {% else %}
                        <span class="page-btn page-btn--square page-btn--ellipsis">›</span>
                    {% endif %}

                </div>
                <div class="pagination-info text-center mt-2">
                    Page {{ page }} of {{ maxPage }}
                </div>
                {% endif %}

            {% else %}
                <div class="text-center py-5 td-dark">
                    No bets yet.
                </div>
            {% endif %}
        </div>

    </div>
</div>
{% endblock %}