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

{% block title %}EZDOS{% 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>
  :root{
    --card-red:#B21F24;
    --card-red-dark:#7A1216;
    --card-blue:#1B3F8F;
    --paper:#FCFAF4;
    --paper-shade:#F1EEE2;
    --ink:#241E1A;
    --teal:#122320;
  }
  #ez-page *{box-sizing:border-box;}
  #ez-page{
    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%),
      var(--teal);
    font-family:'Inter', sans-serif;
    color:var(--ink);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:32px 18px 100px;
  }
  .card{
    width:100%;
    max-width:460px;
    background:var(--paper);
    border-radius:8px;
    position:relative;
    box-shadow:0 20px 45px rgba(0,0,0,0.4);
    padding:22px 22px 0 40px;
    border:1px solid #e4ddc9;
  }
  .punch-strip{
    position:absolute;
    left:0;top:0;bottom:0;
    width:22px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-evenly;
    background:linear-gradient(90deg,#ece6d4,transparent);
    border-right:1px dashed #cfc6a8;
  }
  .punch-strip span{
    width:6px;height:6px;
    border-radius:50%;
    background:var(--teal);
    opacity:0.55;
  }
  .card-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    padding-bottom:14px;
    border-bottom:2px solid var(--card-red);
    margin-bottom:16px;
  }
  .logo{display:flex;align-items:center;gap:8px;}
  .logo-text{font-family:'Oswald',sans-serif;line-height:1;}
  .logo-text .ez{font-size:26px;font-weight:700;font-style:italic;color:var(--card-blue);letter-spacing:0.01em;}
  .logo-text .ez span{color:var(--card-red);}
  .stamp{
    font-family:'Space Mono',monospace;
    font-size:10.5px;color:var(--card-red);
    border:1.3px solid var(--card-red);
    border-radius:5px;padding:5px 8px;
    transform:rotate(3deg);
    letter-spacing:0.04em;text-align:right;line-height:1.4;
    margin-top:2px;
  }
  .field-label{
    font-size:11px;letter-spacing:0.12em;
    text-transform:uppercase;color:var(--card-red-dark);
    font-weight:600;margin-bottom:8px;display:block;
  }
  .live-draw{margin-bottom:14px;}
  .live-draw .live-badge{
    display:inline-flex;align-items:center;gap:5px;
    font-family:'Oswald',sans-serif;font-weight:600;font-size:10px;
    letter-spacing:0.08em;text-transform:uppercase;color:#fff;
    background:var(--card-red);border-radius:5px;padding:3px 7px;
    margin-left:8px;vertical-align:middle;
  }
  .live-draw .live-badge::before{
    content:'';width:6px;height:6px;border-radius:50%;
    background:#fff;animation:livePulse 1.2s ease-in-out infinite;
  }
  @keyframes livePulse{0%,100%{opacity:1;}50%{opacity:0.3;}}
  .live-draw .video-wrap{
    position:relative;width:100%;aspect-ratio:16/9;
    border-radius:6px;overflow:hidden;
    border:1.5px solid var(--card-red);
    box-shadow:0 2px 8px rgba(0,0,0,0.15);
  }
  .live-draw .video-wrap iframe{
    position:absolute;top:0;left:0;width:100%;height:100%;border:none;
  }
  .controls-row{display:flex;gap:10px;margin-bottom:16px;}
  .bettype{
    flex:1.3;display:flex;
    background:var(--paper-shade);border-radius:8px;padding:3px;
  }
  .bettype button{
    flex:1;border:none;background:transparent;
    padding:9px 6px;
    font-family:'Oswald',sans-serif;font-weight:600;font-size:11.5px;
    letter-spacing:0.03em;border-radius:6px;cursor:pointer;
    color:var(--ink);opacity:0.5;transition:all .15s ease;
  }
  .bettype button.active{background:var(--card-red);color:#fff;opacity:1;}
  .dial-note{font-size:10.5px;color:#8a7a55;margin:-6px 0 14px 0;}
  .howto{
    border:1.3px solid var(--paper-shade);border-radius:8px;
    margin-bottom:16px;background:#fff;
  }
  .howto summary{
    list-style:none;cursor:pointer;padding:10px 12px;
    display:flex;align-items:center;justify-content:space-between;
    font-family:'Oswald',sans-serif;font-weight:600;font-size:12.5px;
    letter-spacing:0.04em;text-transform:uppercase;color:var(--card-red-dark);
  }
  .howto summary::-webkit-details-marker{display:none;}
  .howto summary::after{content:"+";font-size:16px;font-weight:700;color:var(--card-red);}
  .howto[open] summary::after{content:"\2212";}
  .howto-body{padding:0 12px 14px 12px;font-size:12px;line-height:1.6;color:var(--ink);}
  .howto-body p{margin:0 0 8px 0;}
  .payout-table{display:flex;gap:10px;margin-top:6px;}
  .payout-card{
    flex:1;border:1.3px solid var(--card-red);
    border-radius:8px;padding:10px;text-align:center;
  }
  .payout-card .pt-label{
    font-family:'Oswald',sans-serif;font-size:10px;font-weight:600;
    letter-spacing:0.08em;text-transform:uppercase;color:var(--card-red-dark);
    display:block;margin-bottom:4px;
  }
  .payout-card .pt-amount{
    font-family:'Space Mono',monospace;font-weight:700;font-size:16px;color:var(--card-red);
  }
  .howto-note{font-size:10.5px;color:#8a7a55;margin-top:8px;}
  .warn{
    font-size:12px;background:#fdeeee;border:1px solid #e3b9b9;
    color:#8a3030;padding:9px 12px;border-radius:8px;margin-bottom:14px;display:none;
  }
  .warn.show{display:block;}
  .panel{
    border:1.5px solid var(--card-red);border-radius:4px;
    margin-bottom:14px;display:flex;align-items:stretch;
  }
  .panel-head{
    background:transparent;border-right:1.5px dashed var(--card-red);
    flex-shrink:0;width:24px;display:flex;align-items:center;justify-content:center;
  }
  .panel-head span{
    writing-mode:vertical-rl;transform:rotate(180deg);
    font-family:'Oswald',sans-serif;font-weight:700;font-size:10.5px;
    letter-spacing:0.12em;white-space:nowrap;color:var(--card-red);
  }
  .num-grid{
    flex:1;display:grid;grid-template-columns:repeat(8,1fr);
    gap:2px;padding:8px;
  }
  .num-cell{
    border:none;background:transparent;
    font-family:'Space Mono',monospace;font-size:12.5px;color:var(--card-red);
    padding:5px 0;cursor:pointer;border-radius:4px;
    transition:background .1s ease,color .1s ease;
  }
  .num-cell:hover{background:rgba(178,31,36,0.08);}
  .num-cell.selected{background:var(--card-red);color:#fff;font-weight:700;}
  .num-cell.disabled{opacity:0.25;cursor:not-allowed;pointer-events:none;}

  .bet-amount-section{margin-bottom:16px;}
  .bet-amount-chips{display:flex;gap:8px;margin-bottom:8px;}
  .amount-chip{
    flex:1;border:1.3px solid var(--card-red);border-radius:6px;
    padding:7px 0;text-align:center;
    font-family:'Space Mono',monospace;font-size:12px;font-weight:700;
    color:var(--card-red);background:transparent;cursor:pointer;
    transition:all .12s ease;
  }
  .amount-chip:hover{background:rgba(178,31,36,0.06);}
  .amount-chip.active{background:var(--card-red);color:#fff;}
  .bet-custom-row{
    display:flex;align-items:center;gap:6px;
    background:var(--paper-shade);border:1.3px solid var(--paper-shade);
    border-radius:8px;padding:8px 12px;
    transition:border-color .12s ease;
  }
  .bet-custom-row:focus-within{border-color:var(--card-red);}
  .peso-sign{
    font-family:'Space Mono',monospace;font-size:13px;font-weight:700;
    color:var(--card-red-dark);
  }
  .bet-amount-input{
    flex:1;border:none;background:transparent;
    font-family:'Space Mono',monospace;font-size:14px;font-weight:700;
    color:var(--ink);outline:none;width:100%;
  }
  .bet-amount-input::placeholder{color:#b8a882;font-weight:400;}
  .bet-limit-note{
    display:block;font-size:10px;color:#8a7a55;margin-top:4px;
    letter-spacing:0.04em;
  }
  .perforation{
    border:none;border-top:2px dashed #cfc6a8;
    margin:0 -22px 0 -18px;
  }
  .countdown{
    display:flex;align-items:center;justify-content:center;
    gap:6px;font-size:11.5px;color:var(--card-red-dark);margin-bottom:10px;
    padding-top:10px;
  }
  .countdown .cd-time{
    font-family:'Space Mono',monospace;font-weight:700;
    color:var(--card-red);font-size:13px;
  }
  .countdown.closed{color:#a85a5a;}
  .countdown.closed .cd-time{color:#a85a5a;}
  .place-bet-btn{
    width:100%;
    font-family:'Oswald',sans-serif;font-weight:600;
    letter-spacing:0.06em;text-transform:uppercase;font-size:15px;
    background:var(--card-red);color:#fff;border:none;border-radius:8px;
    padding:14px;cursor:pointer;margin:4px 0 16px 0;
    transition:background .12s ease,transform .12s ease;
  }
  .place-bet-btn:hover{background:var(--card-red-dark);transform:translateY(-1px);}
  .place-bet-btn:active{transform:translateY(0);}
  .place-bet-btn:disabled{
    background:var(--paper-shade);color:#a89a76;
    cursor:not-allowed;transform:none;
  }
  .confirm-banner{
    font-size:12px;background:#eaf5ee;border:1px solid #b9dcc4;
    color:#2c5c3f;padding:9px 12px;border-radius:8px;
    margin:-6px 0 16px 0;display:none;text-align:center;font-weight:600;
  }
  .confirm-banner.show{display:block;}
  .error-banner{
    font-size:12px;background:#fdeeee;border:1px solid #e3b9b9;
    color:#8a3030;padding:9px 12px;border-radius:8px;
    margin:-6px 0 16px 0;display:none;text-align:center;font-weight:600;
  }
  .error-banner.show{display:block;}

  .result-section{
    text-align:center;margin-bottom:16px;
    padding:14px;background:#fff;border:1.3px solid var(--card-red);
    border-radius:8px;
  }
  .winning-balls{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px;}
  .win-ball{
    width:44px;height:44px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:radial-gradient(circle at 32% 26%,#ffffff 0%,#fbf5e6 30%,var(--paper) 65%,var(--paper-shade) 100%);
    border:1.5px solid var(--card-red);
    box-shadow:inset 0 -3px 4px rgba(178,31,36,0.10),inset 0 2px 3px rgba(255,255,255,0.9),0 1px 2px rgba(0,0,0,0.15);
    font-family:'Space Mono',monospace;font-size:16px;font-weight:700;color:var(--card-red);
  }

  .history-section{margin-top:4px;}
  .history-header{
    display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;
  }
  .history-header .field-label{margin-bottom:0;}
  .history-list{
    display:flex;flex-direction:column;gap:10px;
    max-height:240px;overflow-y:auto;
  }
  .history-empty{
    font-size:11.5px;color:#8a7a55;padding:6px 2px 4px 2px;
  }
  .history-card{
    background:#fff;border:1.3px solid var(--paper-shade);
    border-radius:8px;padding:10px 12px;
  }
  .history-card-top{
    display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;
  }
  .history-total{
    font-family:'Space Mono',monospace;font-size:12.5px;
    font-weight:700;color:var(--card-red);
  }
  .history-combos{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
  .history-entry{display:flex;align-items:center;gap:6px;}
  .history-ball{
    width:30px;height:30px;border-radius:50%;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    background:radial-gradient(circle at 32% 26%,#ffffff 0%,#fbf5e6 30%,var(--paper) 65%,var(--paper-shade) 100%);
    border:1.3px solid var(--card-red);
    box-shadow:inset 0 -3px 4px rgba(178,31,36,0.10),inset 0 2px 3px rgba(255,255,255,0.9),0 1px 2px rgba(0,0,0,0.15);
    font-family:'Space Mono',monospace;font-size:11px;font-weight:700;color:var(--card-red);
  }
  .history-vs{
    font-family:'Oswald',sans-serif;font-size:10px;font-weight:600;
    color:var(--card-red-dark);opacity:0.6;
  }
  .type-chip{
    font-family:'Oswald',sans-serif;font-size:9px;font-weight:600;
    letter-spacing:0.04em;text-transform:uppercase;color:#fff;
    background:var(--card-blue);border-radius:5px;padding:3px 6px;
  }
  .bet-status-chip{
    font-family:'Oswald',sans-serif;font-size:9px;font-weight:600;
    letter-spacing:0.04em;text-transform:uppercase;border-radius:5px;padding:3px 6px;
  }
  .bet-status-chip.pending{background:#f1eee2;color:#8a7a55;}
  .bet-status-chip.won{background:#d4edda;color:#155724;}
  .bet-status-chip.lost{background:#fde2e2;color:#8a3030;}
  .bet-row-left{display:flex;align-items:center;gap:9px;}
  .bet-row-right{display:flex;align-items:center;gap:10px;}

  .footnote{
    font-size:10.5px;line-height:1.55;color:#8a7a55;
    padding:14px 0 18px 0;text-align:center;
  }

  .modal-overlay{
    position:fixed;inset:0;
    background:rgba(18,35,32,0.55);
    display:none;align-items:center;justify-content:center;
    padding:20px;z-index:50;
  }
  .modal-overlay.show{display:flex;}
  .modal-card{
    background:var(--paper);border-radius:10px;
    border:1.5px solid var(--card-red);width:100%;max-width:320px;
    padding:20px;box-shadow:0 20px 45px rgba(0,0,0,0.4);
  }
  .modal-card h3{
    font-family:'Oswald',sans-serif;font-size:16px;
    margin:0 0 14px 0;color:var(--ink);text-align:center;
  }
  .modal-balls{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:14px;}
  .modal-balls .history-ball{width:44px;height:44px;font-size:15px;}
  .modal-rows{display:flex;flex-direction:column;gap:6px;margin-bottom:18px;}
  .modal-row{display:flex;justify-content:space-between;font-size:12.5px;}
  .modal-row .k{color:var(--card-red-dark);font-weight:600;text-transform:uppercase;letter-spacing:0.06em;font-size:10.5px;}
  .modal-row .v{font-family:'Space Mono',monospace;font-weight:700;color:var(--ink);}
  .modal-actions{display:flex;gap:10px;}
  .modal-actions button{
    flex:1;font-family:'Oswald',sans-serif;font-weight:600;
    letter-spacing:0.05em;text-transform:uppercase;font-size:12.5px;
    border-radius:8px;padding:11px;cursor:pointer;border:none;
  }
  .modal-cancel{background:var(--paper-shade);color:var(--ink);}
  .modal-cancel:hover{background:#e5dcc2;}
  .modal-confirm{background:var(--card-red);color:#fff;}
  .modal-confirm:hover{background:var(--card-red-dark);}

  .no-draw{
    text-align:center;padding:40px 20px;color:var(--paper-shade);
  }
  .no-draw h2{
    font-family:'Oswald',sans-serif;font-size:20px;font-weight:700;
    margin:0 0 8px 0;color:#fff;
  }
  .no-draw p{font-size:13px;color:#a89a76;margin:0;}

  .play-blocked-notice{
    font-size:12px;background:#fdeeee;border:1px solid #e3b9b9;
    color:#8a3030;padding:9px 12px;border-radius:8px;
    margin-bottom:14px;text-align:center;
  }
</style>

<div id="ez-page">
  {% if draw is null %}
    <div class="no-draw">
      <h2>No Upcoming Draw</h2>
      <p>EZDOS draws happen on scheduled days at {{ setting is not null ? setting.ezDrawTime : '' }}.</p>
      <p style="margin-top:8px;font-size:11px;color:#6b5f42;">Please check back later.</p>
    </div>
  {% else %}
  <div class="card">
    <div class="punch-strip">
      <span></span><span></span><span></span><span></span><span></span>
      <span></span><span></span><span></span><span></span><span></span>
      <span></span><span></span><span></span><span></span>
    </div>

    <div class="card-head">
      <div class="logo">
        <div class="logo-text">
          <div class="ez">EZ<span>DOS</span></div>
        </div>
      </div>
      <div class="stamp" id="ticketId">Draw {{ draw.scheduledAt|date('M d, Y') }} {{ setting is not null ? setting.ezDrawTime : '' }}</div>
    </div>

    <div class="live-draw" id="liveDraw" style="display:none;">
      <span class="field-label">Live Draw <span class="live-badge">Live</span></span>
      <div class="video-wrap">
        <iframe id="videoEmbed" src="" title="EZDOS Live Draw"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe>
      </div>
    </div>

    <div class="result-section" id="resultSection"{% if drawState is not null and drawState != 'betting_open' %} style="display:block;"{% endif %}>
      <span class="field-label" id="resultLabel">Winning Numbers</span>
      <div class="winning-balls" id="winningBallsWrap"{% if drawState == 'finished' and draw.winningNumbers is not null %} style="display:flex;"{% else %} style="display:none;"{% endif %}>
        <span class="win-ball" id="winBall1">{{ draw.winningNumbers is not null ? '%02d'|format(draw.winningNumbers[0]) : '--' }}</span>
        <span style="font-size:18px;color:var(--card-red);font-weight:700;">&times;</span>
        <span class="win-ball" id="winBall2">{{ draw.winningNumbers is not null ? '%02d'|format(draw.winningNumbers[1]) : '--' }}</span>
      </div>
      <div id="resultWaiting"{% if drawState == 'finished' and draw.winningNumbers is not null %} style="display:none;"{% else %} style="font-size:12px;color:#8a7a55;margin-top:6px;"{% endif %}>{% if drawState == 'finished' and draw.winningNumbers is not null %}Draw complete{% else %}Waiting for result&hellip;{% endif %}</div>
    </div>

    {% if setting is not null and setting.ezEnabled and not playBlocked %}
    <div id="bettingSection"{% if drawState is not null and drawState != 'betting_open' %} style="display:none;"{% endif %}>
    <div class="controls-row">
      <div class="bettype">
        <button id="btnStraight" class="active" type="button">Straight</button>
        <button id="btnRambolito" type="button">Rambolito</button>
      </div>
    </div>

    <div class="warn" id="doubleWarn">Rambolito needs two different numbers. With a double (e.g. 11), the bet plays the same as Straight.</div>

    <details class="howto">
      <summary>How to play</summary>
      <div class="howto-body">
        <p>Pick two numbers from 01&ndash;31: one in the 1st Number table, one in the 2nd Number table. Choose <strong>Straight</strong> if you want your numbers to match the draw in exact order, or <strong>Rambolito</strong> if either order should win.</p>
        <div class="payout-table">
          <div class="payout-card">
            <span class="pt-label">Straight win</span>
            <div class="pt-amount">&#8369;{{ setting.ezStraightPayout|number_format(2) }}</div>
          </div>
          <div class="payout-card">
            <span class="pt-label">Rambolito win</span>
            <div class="pt-amount">&#8369;{{ setting.ezRambolitoPayout|number_format(2) }}</div>
          </div>
        </div>
      </div>
    </details>

    <span class="field-label">Circle your two numbers (01&ndash;31) &mdash; the same number can be used for both</span>

    <div class="panel">
      <div class="panel-head"><span>1ST NUMBER</span></div>
      <div class="num-grid" id="numGrid1"></div>
    </div>

    <div class="panel">
      <div class="panel-head"><span>2ND NUMBER</span></div>
      <div class="num-grid" id="numGrid2"></div>
    </div>

    <div class="dial-note" id="dialNote">Straight bet: order matters &mdash; the first number you circle must match the first number drawn.</div>

    <button class="place-bet-btn" id="placeBetBtn" data-testid="btn-place-bet">
      Place your bet &middot; &#8369;{{ setting.ezMaxBetAmount|number_format(2) }}
    </button>

    <div class="confirm-banner" id="confirmBanner"></div>
    <div class="error-banner" id="errorBanner" data-testid="bet-error"></div>

    </div>

    <div class="history-section">
      <div class="history-header">
        <span class="field-label">Your bets (<span id="historyCount">{{ userBets|length }}</span>)</span>
      </div>
      <div class="history-list" id="historyList">
        {% if userBets is empty %}
        <div class="history-empty" id="historyEmpty">No bets placed yet.</div>
        {% else %}
        <div class="history-empty" id="historyEmpty" style="display:none;">No bets placed yet.</div>
        {% for bet in userBets %}
        <div class="history-card">
          <div class="history-card-top">
            <div class="history-combos">
              <div class="history-entry">
                <span class="history-ball">{{ '%02d'|format(bet.number1) }}</span>
                <span class="history-vs">&times;</span>
                <span class="history-ball">{{ '%02d'|format(bet.number2) }}</span>
                <span class="type-chip">{{ bet.betType == 'straight' ? 'STR' : 'RAM' }}</span>
              </div>
            </div>
            <div class="bet-row-right">
              <span class="history-total">&#8369;{{ '%.2f'|format(bet.amount) }}</span>
              <span class="bet-status-chip {{ bet.status }}">{% if bet.status == 'pending' %}Bet placed{% else %}{{ bet.status|capitalize }}{% endif %}{% if bet.payout is not null %} &middot; &#8369;{{ '%.2f'|format(bet.payout) }}{% endif %}</span>
            </div>
          </div>
        </div>
        {% endfor %}
        {% endif %}
      </div>
    </div>

    <hr class="perforation" />

    <div class="countdown" id="countdown">Betting closes in <span class="cd-time" id="countdownTime">--:--:--</span></div>

    <div style="text-align:center;margin:12px 0 8px;">
      <a href="{{ path('app_play_ezdos_results') }}" style="font-size:12px;font-weight:600;color:#9ca3af;text-decoration:none;border:1px solid #374151;padding:6px 16px;border-radius:6px;transition:all .15s;">View All Results &rarr;</a>
    </div>

    <div class="footnote">
      Powered by swertenation.com
    </div>
    {% elseif playBlocked is defined and playBlocked %}
      <div class="play-blocked-notice">You are not allowed to place bets.</div>
      <div class="footnote">Powered by swertenation.com</div>
    {% else %}
      <div class="footnote">Powered by swertenation.com</div>
    {% endif %}
  </div>
  {% endif %}
</div>

<div class="modal-overlay" id="modalOverlay">
  <div class="modal-card">
    <h3>Confirm your bet</h3>
    <div class="modal-balls" id="modalBalls"></div>
    <div class="modal-rows">
      <div class="modal-row"><span class="k">Bet type</span><span class="v" id="modalType">&mdash;</span></div>
      <div class="modal-row"><span class="k">Amount</span><span class="v" id="modalAmount">&#8369;0</span></div>
      <div class="modal-row"><span class="k">Draw date</span><span class="v" id="modalDate">&mdash;</span></div>
    </div>
    <div class="modal-actions">
      <button class="modal-cancel" id="modalCancel" type="button">Cancel</button>
      <button class="modal-confirm" id="modalConfirm" type="button">Confirm</button>
    </div>
  </div>
</div>

<div class="wallet-bar" data-testid="wallet-bar">
  <div class="wallet-bar__balance"
       data-controller="balance-counter"
       data-balance-counter-amount-value="{{ app.user.walletBalance }}">
    <p class="wallet-bar__label">Balance</p>
    <p class="wallet-bar__amount"
       id="wallet-bar-amount"
       data-testid="wallet-balance"
       data-balance-counter-target="display">&#8369;{{ app.user.walletBalance|number_format(2) }}</p>
  </div>
  <div class="wallet-bar__actions">
    <a href="{{ path('app_deposit') }}"
       class="pill-link--ghost"
       style="font-size:12px;padding:7px 14px;"
       data-testid="wallet-bar-add-funds">+ Add Funds</a>
  </div>
</div>

{% if draw is not null %}
<script>
(function(){
  var betType = 'straight';
  var slot1 = null;
  var slot2 = null;
  var amount = 25;
  var currentDrawId = {{ draw.id }};
  var currentDrawState = 'betting_open';
  var countdownTimer = null;
  var secondsRemaining = null;
  var maxBet = {{ setting.ezMaxBetAmount ? setting.ezMaxBetAmount : 'null' }};
  var drawScheduledAt = '{{ draw.scheduledAt|date('c') }}';
  var betClosingTime = {{ (setting.ezBetClosingTime is not null ? '"' ~ setting.ezBetClosingTime ~ '"' : 'null')|raw }};
  var csrfToken = '{{ csrf_token("ezdos_bet") }}';

  var numGrid1 = document.getElementById('numGrid1');
  var numGrid2 = document.getElementById('numGrid2');
  if (!numGrid1 || !numGrid2) return;

  function buildGrid(gridEl, slotKey){
    for(var n = 1; n <= 31; n++){
      var btn = document.createElement('button');
      btn.type = 'button';
      btn.className = 'num-cell';
      btn.textContent = String(n).padStart(2,'0');
      btn.dataset.num = n;
      btn.addEventListener('click', function(){
        if(this.classList.contains('disabled')) return;
        var num = parseInt(this.dataset.num, 10);
        if(state[slotKey] === num){ state[slotKey] = null; } else { state[slotKey] = num; }
        refreshUI();
      });
      gridEl.appendChild(btn);
    }
  }

  var state = { betType:'straight', slot1:null, slot2:null, amount:{{ setting.ezMaxBetAmount }} };
  buildGrid(numGrid1, 'slot1');
  buildGrid(numGrid2, 'slot2');

  function fmt2(n){ return n === null ? '--' : String(n).padStart(2,'0'); }

  function syncGridSelection(){
    if(!numGrid1 || !numGrid2) return;
    var isRambol = state.betType === 'rambolito';
    numGrid1.querySelectorAll('.num-cell').forEach(function(cell){
      var num = parseInt(cell.dataset.num, 10);
      cell.classList.toggle('selected', num === state.slot1);
      cell.classList.toggle('disabled', isRambol && state.slot2 !== null && num === state.slot2);
    });
    numGrid2.querySelectorAll('.num-cell').forEach(function(cell){
      var num = parseInt(cell.dataset.num, 10);
      cell.classList.toggle('selected', num === state.slot2);
      cell.classList.toggle('disabled', isRambol && state.slot1 !== null && num === state.slot1);
    });
  }

  function refreshUI(){
    syncGridSelection();
    var dialNote = document.getElementById('dialNote');
    if(dialNote){
      dialNote.textContent = state.betType === 'straight'
        ? 'Straight bet: order matters \u2014 the first number you circle must match the first number drawn.'
        : 'Rambolito bet: either order wins, covering both arrangements of your two numbers.';
    }
    var isDouble = state.slot1 !== null && state.slot2 !== null && state.slot1 === state.slot2;
    var doubleWarn = document.getElementById('doubleWarn');
    if(doubleWarn) doubleWarn.classList.toggle('show', state.betType === 'rambolito' && isDouble);

    document.getElementById('btnStraight').classList.toggle('active', state.betType === 'straight');
    document.getElementById('btnRambolito').classList.toggle('active', state.betType === 'rambolito');
  }

  document.getElementById('btnStraight').addEventListener('click', function(){ state.betType = 'straight'; refreshUI(); });
  document.getElementById('btnRambolito').addEventListener('click', function(){ state.betType = 'rambolito'; refreshUI(); });

  // Countdown
  function fmtCountdown(totalSec){
    totalSec = Math.max(0, Math.floor(totalSec));
    var h = String(Math.floor(totalSec/3600)).padStart(2,'0');
    var m = String(Math.floor((totalSec%3600)/60)).padStart(2,'0');
    var s = String(totalSec%60).padStart(2,'0');
    return h+':'+m+':'+s;
  }

  function tickCountdown(){
    if(secondsRemaining === null) return;
    var el = document.getElementById('countdownTime');
    var wrap = document.getElementById('countdown');
    if(!el || !wrap) return;
    if(secondsRemaining <= 0){
      el.textContent = '00:00:00';
      return;
    }
    secondsRemaining--;
    el.textContent = fmtCountdown(secondsRemaining);
  }

  // History rendering (server-side)
  function renderHistory(bets){
    var list = document.getElementById('historyList');
    var empty = document.getElementById('historyEmpty');
    var countEl = document.getElementById('historyCount');
    if(!list) return;

    if(!bets || !bets.length){
      if(empty) empty.style.display = 'block';
      if(countEl) countEl.textContent = '0';
      return;
    }
    if(empty) empty.style.display = 'none';
    if(countEl) countEl.textContent = bets.length;
    list.innerHTML = '';

    bets.forEach(function(bet){
      var card = document.createElement('div');
      card.className = 'history-card';
      var typeLabel = bet.betType === 'straight' ? 'STR' : 'RAM';
      var statusClass = bet.status;
      var statusLabel = bet.status === 'pending' ? 'Bet placed' : bet.status.charAt(0).toUpperCase() + bet.status.slice(1);
      var payoutText = bet.payout ? ' \u00b7 \u20b1' + parseFloat(bet.payout).toFixed(2) : '';

      card.innerHTML =
        '<div class="history-card-top">' +
          '<div class="history-combos">' +
            '<div class="history-entry">' +
              '<span class="history-ball">' + fmt2(bet.number1) + '</span>' +
              '<span class="history-vs">\u00d7</span>' +
              '<span class="history-ball">' + fmt2(bet.number2) + '</span>' +
              '<span class="type-chip">' + typeLabel + '</span>' +
            '</div>' +
          '</div>' +
          '<div class="bet-row-right">' +
            '<span class="history-total">\u20b1' + parseFloat(bet.amount).toFixed(2) + '</span>' +
            '<span class="bet-status-chip ' + statusClass + '">' + statusLabel + payoutText + '</span>' +
          '</div>' +
        '</div>';
      list.appendChild(card);
    });
  }

  // Update wallet balance
  function updateBalance(v){
    var el = document.getElementById('wallet-bar-amount');
    if(el) el.textContent = '\u20b1' + parseFloat(v).toLocaleString('en-PH',{minimumFractionDigits:2,maximumFractionDigits:2});
  }

  // Show/hide video
  function showVideo(url){
    if(!url) return;
    var el = document.getElementById('liveDraw');
    var iframe = document.getElementById('videoEmbed');
    if(!el || !iframe) return;
    var embedUrl = url.replace('/live/', '/embed/');
    var ytMatch = embedUrl.match(/(?:youtu\.be\/|youtube\.com\/watch\?v=)([a-zA-Z0-9_-]+)/);
    if(ytMatch){
      embedUrl = 'https://www.youtube.com/embed/' + ytMatch[1] + '?autoplay=1&controls=0&modestbranding=1&rel=0&showinfo=0&iv_load_policy=3&fs=0&cc_load_policy=0';
    } else {
      embedUrl += (url.indexOf('?') === -1 ? '?' : '&') + 'autoplay=1';
    }
    if(iframe.src !== embedUrl) iframe.src = embedUrl;
    el.style.display = 'block';
  }

  function hideVideo(){
    var el = document.getElementById('liveDraw');
    var iframe = document.getElementById('videoEmbed');
    if(el) el.style.display = 'none';
    if(iframe) iframe.src = '';
  }

  // Show winning numbers
  function showWinningNumbers(nums){
    if(!nums || !nums.length) return;
    var b1 = document.getElementById('winBall1');
    var b2 = document.getElementById('winBall2');
    if(b1) b1.textContent = fmt2(nums[0]);
    if(b2) b2.textContent = fmt2(nums[1]);
  }

  function hideWinningNumbers(){
    var b1 = document.getElementById('winBall1');
    var b2 = document.getElementById('winBall2');
    if(b1) b1.textContent = '--';
    if(b2) b2.textContent = '--';
  }

  // Handle state from poll
  function handleStateChange(data){
    currentDrawState = data.state;
    var placeBtn = document.getElementById('placeBetBtn');
    var countdownWrap = document.getElementById('countdown');
    var countdownTime = document.getElementById('countdownTime');
    var bettingSection = document.getElementById('bettingSection');
    var resultSection = document.getElementById('resultSection');
    var resultLabel = document.getElementById('resultLabel');
    var winningBallsWrap = document.getElementById('winningBallsWrap');
    var resultWaiting = document.getElementById('resultWaiting');

    if(data.state === 'betting_open'){
      secondsRemaining = data.secondsUntilClose;
      if(bettingSection) bettingSection.style.display = '';
      if(resultSection) resultSection.style.display = 'none';
      if(placeBtn){ placeBtn.disabled = false; }
      if(countdownWrap){
        countdownWrap.classList.remove('closed');
        countdownWrap.childNodes[0].textContent = 'Betting closes in ';
      }
      hideVideo();
    } else if(data.state === 'betting_closed'){
      secondsRemaining = data.secondsUntilStart;
      if(bettingSection) bettingSection.style.display = 'none';
      if(resultSection){
        resultSection.style.display = '';
        if(resultLabel) resultLabel.textContent = 'Winning Numbers';
        if(winningBallsWrap) winningBallsWrap.style.display = 'none';
        if(resultWaiting) resultWaiting.style.display = '';
      }
      if(placeBtn){ placeBtn.disabled = true; }
      if(countdownWrap){
        countdownWrap.classList.add('closed');
        countdownWrap.childNodes[0].textContent = 'Betting closed \u00b7 draw in ';
      }
      if(data.videoUrl) showVideo(data.videoUrl);
    } else if(data.state === 'finished'){
      secondsRemaining = null;
      if(bettingSection) bettingSection.style.display = 'none';
      if(resultSection){
        resultSection.style.display = '';
        if(resultLabel) resultLabel.textContent = 'Winning Numbers';
        if(data.winningNumbers){
          if(winningBallsWrap) winningBallsWrap.style.display = 'flex';
          if(resultWaiting) resultWaiting.style.display = 'none';
          showWinningNumbers(data.winningNumbers);
        } else {
          if(winningBallsWrap) winningBallsWrap.style.display = 'none';
          if(resultWaiting){ resultWaiting.textContent = 'No result yet.'; resultWaiting.style.display = ''; }
        }
      }
      if(placeBtn){ placeBtn.disabled = true; }
      if(countdownWrap){
        countdownWrap.classList.add('closed');
        countdownWrap.childNodes[0].textContent = 'Draw complete';
      }
      if(countdownTime) countdownTime.textContent = '';
      if(data.videoUrl) showVideo(data.videoUrl);
    } else if(data.state === 'no_draw'){
      secondsRemaining = null;
      if(bettingSection) bettingSection.style.display = 'none';
      if(resultSection) resultSection.style.display = 'none';
      if(placeBtn){ placeBtn.disabled = true; }
      if(countdownWrap){
        countdownWrap.classList.add('closed');
        countdownWrap.childNodes[0].textContent = 'No active draw';
      }
      if(countdownTime) countdownTime.textContent = '';
    }
  }

  // Poll
  function poll(){
    fetch('{{ path("app_play_ezdos_state") }}')
    .then(function(r){ return r.json(); })
    .then(function(data){
      if(data.error) return;
      if(data.drawId && data.drawId !== currentDrawId){
        window.location.reload();
        return;
      }
      if(data.walletBalance != null) updateBalance(data.walletBalance);
      if(data.state) handleStateChange(data);
      if(data.userBets) renderHistory(data.userBets);
    })
    .catch(function(){});
  }

  // Confirm modal
  var modalOverlay = document.getElementById('modalOverlay');
  var modalBalls = document.getElementById('modalBalls');
  var modalType = document.getElementById('modalType');
  var modalAmount = document.getElementById('modalAmount');
  var modalDate = document.getElementById('modalDate');

  function openConfirmModal(){
    var typeLabel = state.betType === 'straight' ? 'Straight' : 'Rambolito';
    modalBalls.innerHTML =
      '<span class="history-ball">' + fmt2(state.slot1) + '</span>' +
      '<span class="history-vs">\u00d7</span>' +
      '<span class="history-ball">' + fmt2(state.slot2) + '</span>';
    modalType.textContent = typeLabel;
    modalAmount.textContent = '\u20b1' + state.amount;
    modalDate.textContent = document.getElementById('ticketId').textContent;
    modalOverlay.classList.add('show');
  }
  function closeConfirmModal(){ modalOverlay.classList.remove('show'); }

  document.getElementById('modalCancel').addEventListener('click', closeConfirmModal);
  modalOverlay.addEventListener('click', function(e){ if(e.target === modalOverlay) closeConfirmModal(); });

  document.getElementById('modalConfirm').addEventListener('click', function(){
    closeConfirmModal();
    submitBet();
  });

  // Submit bet
  function submitBet(){
    var errBanner = document.getElementById('errorBanner');
    var confBanner = document.getElementById('confirmBanner');
    if(errBanner) errBanner.classList.remove('show');
    if(confBanner) confBanner.classList.remove('show');

    var formData = new FormData();
    formData.append('_token', csrfToken);
    formData.append('betType', state.betType);
    formData.append('number1', state.slot1);
    formData.append('number2', state.slot2);
    formData.append('amount', state.amount);

    fetch('{{ path("app_play_ezdos_bet") }}', { method:'POST', body:formData })
    .then(function(r){ return r.json(); })
    .then(function(data){
      if(data.error){
        if(errBanner){ errBanner.textContent = data.error; errBanner.classList.add('show'); }
        return;
      }
      if(data.success){
        var typeLabel = data.betType.charAt(0).toUpperCase() + data.betType.slice(1);
        if(confBanner){
          confBanner.textContent = 'Bet placed! ' + typeLabel + ' (' + fmt2(data.number1) + ') \u00d7 (' + fmt2(data.number2) + ') \u00b7 \u20b1' + parseFloat(data.amount).toFixed(2);
          confBanner.classList.add('show');
        }
        updateBalance(data.walletBalance);
        state.slot1 = null;
        state.slot2 = null;
        refreshUI();
        poll();
      }
    })
    .catch(function(){
      if(errBanner){ errBanner.textContent = 'An error occurred. Please try again.'; errBanner.classList.add('show'); }
    });
  }

  // Place bet button
  document.getElementById('placeBetBtn').addEventListener('click', function(){
    if(currentDrawState !== 'betting_open'){
      var errBanner = document.getElementById('errorBanner');
      if(errBanner){ errBanner.textContent = 'Betting is closed for this draw. Please wait for the next draw window.'; errBanner.classList.add('show'); }
      return;
    }
    if(state.slot1 === null || state.slot2 === null){
      var errBanner2 = document.getElementById('errorBanner');
      if(errBanner2){ errBanner2.textContent = 'Circle both numbers before placing your bet.'; errBanner2.classList.add('show'); }
      return;
    }
    var errBanner3 = document.getElementById('errorBanner');
    if(errBanner3) errBanner3.classList.remove('show');
    openConfirmModal();
  });

  // Init
  refreshUI();
  poll();
  setInterval(poll, 3000);
  countdownTimer = setInterval(tickCountdown, 1000);
})();
</script>
{% endif %}
{% endblock %}