<?php $pageTitle = 'EL3AB - طاولة'; $hideNav = true; ?>
<?php require __DIR__ . '/../includes/header.php'; ?>

<link rel="stylesheet" href="/public/css/backgammon.css">
<style>.main-inner { max-width: 960px !important; padding: 8px 12px !important; }</style>

<!-- Waiting Room -->
<div id="bg-waiting" class="lobby-page" style="max-width:500px;margin:0 auto;padding:24px;">
  <div class="text-center" style="margin-bottom:24px;">
    <h2 class="lobby-title">طاولة — غرفة خاصة</h2>
    <p class="text-muted text-sm" id="bg-waiting-msg">جاري الإعداد...</p>
  </div>

  <div class="card" style="padding:24px;text-align:center;">
    <p class="text-muted text-sm">كود الغرفة</p>
    <h1 id="bg-room-code" style="font-size:2.5rem;letter-spacing:8px;margin:8px 0;font-family:monospace;">------</h1>
    <p class="text-muted text-sm" id="bg-players-count">0 / 2 لاعبين</p>
  </div>

  <div id="bg-waiting-players" style="margin-top:16px;"></div>

  <button id="bg-start-btn" class="btn btn-gold btn-block btn-lg" style="margin-top:16px;display:none;">
    ابدأ اللعبة
  </button>
</div>

<!-- Game Area (hidden until game starts) -->
<div id="bg-game-area" style="display:none;">
  <div class="bg-layout">
    <div class="bg-board-column">
      <div class="bg-players-bar">
        <div class="bg-player-info bg-player-info--black" id="bg-player-1">
          <span class="bg-player-dot bg-player-dot--black"></span>
          <span class="bg-player-name" id="bg-name-1">الخصم</span>
          <span class="bg-player-pip">نقاط: <span id="bg-pip-1">167</span></span>
        </div>
      </div>

      <div class="bg-board" id="bg-board"></div>

      <div class="bg-players-bar">
        <div class="bg-player-info bg-player-info--white" id="bg-player-0">
          <span class="bg-player-dot bg-player-dot--white"></span>
          <span class="bg-player-name" id="bg-name-0">أنت</span>
          <span class="bg-player-pip">نقاط: <span id="bg-pip-0">167</span></span>
        </div>
      </div>
    </div>

    <div class="bg-side-panel">
      <div id="bg-turn" class="bg-turn-indicator"></div>
      <div id="bg-dice-container" class="bg-dice-area"></div>
      <div class="bg-controls">
        <button id="bg-roll-btn" class="bg-roll-btn">ارمِ النرد</button>
      </div>
      <div id="bg-log" class="bg-log"></div>
    </div>
  </div>
  <div id="bg-result-overlay" class="bg-result-overlay" style="display:none;"></div>
</div>

<script src="/public/js/backgammon-constants.js"></script>
<script src="/public/js/backgammon-ui.js"></script>
<script src="/public/js/backgammon-live.js"></script>
<script>
(function() {
  var params = new URLSearchParams(window.location.search);
  var action = params.get('action');
  var code = params.get('code');
  var matchId = params.get('match_id');

  BackgammonLive.init({
    action: action,
    code: code,
    matchId: matchId
  });
})();
</script>

<?php require __DIR__ . '/../includes/footer.php'; ?>
