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

{% block title %}EZDOS Results{% endblock %}

{% block stylesheets %}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
{% endblock %}

{% block body %}
<style>
  #ez-results *{box-sizing:border-box;}
  #ez-results{
    min-height:100vh;
    background:
      radial-gradient(circle at 15% 0%, rgba(178,31,36,0.06), transparent 45%),
      radial-gradient(circle at 90% 100%, rgba(27,63,143,0.10), transparent 50%),
      #122320;
    font-family:'Inter', sans-serif;
    color:#241E1A;
    padding:24px 18px 80px;
  }
  .ezr-wrap{max-width:520px;margin:0 auto;}
  .ezr-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
  .ezr-header h1{font-family:'Oswald',sans-serif;font-size:20px;font-weight:700;color:#FCFAF4;margin:0;text-transform:uppercase;letter-spacing:1px;}
  .ezr-back{font-size:12px;color:#9ca3af;text-decoration:none;border:1px solid #374151;padding:6px 12px;border-radius:6px;transition:all .15s;}
  .ezr-back:hover{color:#FCFAF4;border-color:#6b7280;}

  .ezr-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px;}
  .ezr-pill{font-size:11px;font-weight:600;padding:6px 14px;border-radius:20px;border:1px solid #374151;background:transparent;color:#9ca3af;cursor:pointer;text-decoration:none;transition:all .15s;}
  .ezr-pill:hover{border-color:#6b7280;color:#d1d5db;}
  .ezr-pill.is-active{background:#FCFAF4;color:#122320;border-color:#FCFAF4;}

  .ezr-table-wrap{background:#141414;border:1px solid #2a2a2a;border-radius:12px;overflow:hidden;}
  .ezr-table{width:100%;border-collapse:collapse;font-size:13px;}
  .ezr-table thead th{padding:10px 14px;text-align:left;color:#6b7280;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid #2a2a2a;}
  .ezr-table tbody tr{border-bottom:1px solid #1f1f1f;}
  .ezr-table tbody tr:last-child{border-bottom:none;}
  .ezr-table td{padding:10px 14px;color:#d1d5db;vertical-align:middle;}

  .ezr-empty{text-align:center;padding:40px 20px;color:#6b7280;font-size:13px;}

  .ezr-ball{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;font-weight:700;font-size:12px;}
  .ezr-ball--win{background:#14532d;color:#4ade80;border:1px solid #16a34a;}
  .ezr-ball--bet{background:#fef2f2;color:#dc2626;border:1px solid #fca5a5;width:24px;height:24px;font-size:11px;}
  .ezr-vs{color:#6b7280;font-weight:700;margin:0 2px;}

  .ezr-badge{padding:2px 8px;border-radius:4px;font-weight:700;font-size:11px;display:inline-block;}
  .ezr-badge--won{background:#dcfce7;color:#15803d;}
  .ezr-badge--lost{background:#fee2e2;color:#b00020;}
  .ezr-badge--pending{background:#fef9c3;color:#854d0e;}

  .ezr-pagination{display:flex;align-items:center;justify-content:space-between;margin-top:20px;}
  .ezr-page-info{font-size:12px;color:#6b7280;}
  .ezr-page-btns{display:flex;gap:8px;}
  .ezr-page-btn{font-size:12px;font-weight:600;padding:6px 14px;border-radius:6px;border:1px solid #374151;background:transparent;color:#d1d5db;text-decoration:none;transition:all .15s;}
  .ezr-page-btn:hover{border-color:#6b7280;color:#FCFAF4;}

  .ezr-bet-type{font-size:10px;color:#6b7280;font-weight:600;margin-left:4px;}

  @media(max-width:480px){
    .ezr-table thead{display:none;}
    .ezr-table td{display:flex;justify-content:space-between;padding:8px 14px;}
    .ezr-table td::before{content:attr(data-label);font-weight:600;font-size:11px;color:#6b7280;}
  }
</style>

<div id="ez-results">
  <div class="ezr-wrap">

    <div class="ezr-header">
      <h1>Draw Results</h1>
      <a href="{{ path('app_play_ezdos') }}" class="ezr-back">Back to Game</a>
    </div>

    {% set presets = [
      {key: 'this_month', label: 'This Month'},
      {key: 'last_month', label: 'Last Month'},
      {key: 'this_year',  label: 'This Year'},
      {key: 'last_year',  label: 'Last Year'},
    ] %}
    <div class="ezr-filters">
      {% for p in presets %}
        <a href="{{ path('app_play_ezdos_results', {period: p.key}) }}"
           class="ezr-pill {% if period.period == p.key %}is-active{% endif %}">
          {{ p.label }}
        </a>
      {% endfor %}
    </div>

    <div class="ezr-table-wrap">
      {% if pastDraws is empty %}
        <div class="ezr-empty">No draws found for the selected period.</div>
      {% else %}
        <table class="ezr-table">
          <thead>
            <tr>
              <th>Date</th>
              <th>Winning #</th>
              <th>Your Bet</th>
              <th>Outcome</th>
            </tr>
          </thead>
          <tbody>
            {% for item in pastDraws %}
              {% if item.userBets is not empty %}
                {% for bet in item.userBets %}
                <tr>
                  <td data-label="Date" style="white-space:nowrap;font-size:12px;">{{ item.draw.scheduledAt|date('M d, g:i A') }}</td>
                  <td data-label="Winning">
                    {% if item.draw.winningNumbers is not null %}
                    <div style="display:flex;gap:4px;align-items:center;">
                      <span class="ezr-ball ezr-ball--win">{{ '%02d'|format(item.draw.winningNumbers[0]) }}</span>
                      <span class="ezr-vs">&times;</span>
                      <span class="ezr-ball ezr-ball--win">{{ '%02d'|format(item.draw.winningNumbers[1]) }}</span>
                    </div>
                    {% else %}
                    <span style="color:#6b7280;">&mdash;</span>
                    {% endif %}
                  </td>
                  <td data-label="Bet">
                    <div style="display:flex;gap:4px;align-items:center;">
                      <span class="ezr-ball ezr-ball--bet">{{ '%02d'|format(bet.number1) }}</span>
                      <span class="ezr-vs" style="font-size:11px;">&times;</span>
                      <span class="ezr-ball ezr-ball--bet">{{ '%02d'|format(bet.number2) }}</span>
                      <span class="ezr-bet-type">{{ bet.betType == 'straight' ? 'STR' : 'RAM' }}</span>
                    </div>
                  </td>
                  <td data-label="Outcome">
                    {% if bet.status == 'won' %}
                      <span class="ezr-badge ezr-badge--won">Won &middot; &#8369;{{ '%.2f'|format(bet.payout) }}</span>
                    {% elseif bet.status == 'lost' %}
                      <span class="ezr-badge ezr-badge--lost">Lost</span>
                    {% else %}
                      <span class="ezr-badge ezr-badge--pending">Pending</span>
                    {% endif %}
                  </td>
                </tr>
                {% endfor %}
              {% else %}
                <tr>
                  <td data-label="Date" style="white-space:nowrap;font-size:12px;">{{ item.draw.scheduledAt|date('M d, g:i A') }}</td>
                  <td data-label="Winning">
                    {% if item.draw.winningNumbers is not null %}
                    <div style="display:flex;gap:4px;align-items:center;">
                      <span class="ezr-ball ezr-ball--win">{{ '%02d'|format(item.draw.winningNumbers[0]) }}</span>
                      <span class="ezr-vs">&times;</span>
                      <span class="ezr-ball ezr-ball--win">{{ '%02d'|format(item.draw.winningNumbers[1]) }}</span>
                    </div>
                    {% else %}
                    <span style="color:#6b7280;">&mdash;</span>
                    {% endif %}
                  </td>
                  <td data-label="Bet" style="color:#6b7280;font-size:12px;">No bet</td>
                  <td data-label="Outcome" style="color:#6b7280;font-size:12px;">&mdash;</td>
                </tr>
              {% endif %}
            {% endfor %}
          </tbody>
        </table>
      {% endif %}
    </div>

    {% if totalPages > 1 %}
    <div class="ezr-pagination">
      <span class="ezr-page-info">Page {{ currentPage }} of {{ totalPages }}</span>
      <div class="ezr-page-btns">
        {% if currentPage > 1 %}
          <a href="{{ path('app_play_ezdos_results', {page: currentPage - 1, period: period.period}) }}" class="ezr-page-btn">&larr; Prev</a>
        {% endif %}
        {% if currentPage < totalPages %}
          <a href="{{ path('app_play_ezdos_results', {page: currentPage + 1, period: period.period}) }}" class="ezr-page-btn">Next &rarr;</a>
        {% endif %}
      </div>
    </div>
    {% endif %}

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