<?php $title = setting('queue_public_title', 'متابعة الدور'); include __DIR__ . '/../layout/header.php'; ?>
<?php $statusMap = ['pending'=>'بانتظار الدور','serving'=>'حان الدور','done'=>'تمت الخدمة','skipped'=>'تم التخطي']; ?>
<style>
.qp-shell{max-width:1160px;margin:0 auto;display:grid;gap:18px}.qp-top{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}.qp-card{background:linear-gradient(180deg,#fff,#fbf7f2);border:1px solid #eadfce;border-radius:24px;padding:20px;box-shadow:0 12px 30px rgba(56,34,15,.06)}
.qp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}.qp-stat{background:#fff;border:1px solid #efe4d6;border-radius:18px;padding:16px;text-align:center}.qp-stat .v{font-size:28px;font-weight:800;color:#5f3f27}
.qp-status{background:linear-gradient(135deg,#6f4a2f,#8b6242);color:#fff;border:none}.qp-status .queue-big{font-size:42px}.qp-table tr td,.qp-table tr th{text-align:center}
.qp-live{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.qp-mini{background:#fff;border:1px solid #efe4d6;border-radius:18px;padding:14px}.phone-box{display:flex;gap:10px;align-items:center}.phone-box .input{flex:1}
@media (max-width:980px){.qp-top{grid-template-columns:1fr}.qp-stats{grid-template-columns:1fr}.qp-live{grid-template-columns:1fr}.phone-box{flex-direction:column;align-items:stretch}}
</style>
<div class="qp-shell">
  <div class="qp-top">
    <div class="qp-card">
      <div class="page-head"><div><h2 style="margin:0"><?= e($title) ?></h2><div class="muted">تابع الرقم الحالي واعرف كم متبقي قبلك، مع إمكانية حفظ رقم الهاتف لاستلام التحديثات.</div></div><div class="pill"><?= e($ticket['ticket_no']) ?></div></div>
      <div class="qp-stats">
        <div class="qp-stat"><div class="muted">تذكرتك</div><div class="v"><?= e($ticket['ticket_no']) ?></div></div>
        <div class="qp-stat"><div class="muted">الرقم الحالي</div><div class="v" id="nowServing"><?= e($snap['serving'][0]['ticket_no'] ?? '---') ?></div></div>
        <div class="qp-stat"><div class="muted">المتبقي قبلك</div><div class="v" id="remainingCount"><?= e((string)$remaining) ?></div></div>
      </div>
      <div class="qp-card qp-status" style="margin-top:16px">
        <div class="label" style="color:#f3e8da">حالة التذكرة</div>
        <div class="queue-big" id="myStatus"><?= e($statusMap[$ticket['ticket_status']] ?? $ticket['ticket_status']) ?></div>
      </div>
    </div>
    <div class="qp-card">
      <h3 class="section-title" style="margin-top:0">إشعارات الواتساب</h3>
      <?php if(empty($ticket['customer_phone'])): ?>
        <form method="post" style="margin-top:10px">
          <input type="hidden" name="_csrf" value="<?= e(csrf_token()) ?>">
          <label class="label">رقم الهاتف لاستلام التحديثات</label>
          <div class="phone-box">
            <input class="input" name="customer_phone" placeholder="مثال: 9689XXXXXXX أو 9XXXXXXX" required>
            <button class="btn">حفظ الرقم</button>
          </div>
          <div class="muted" style="margin-top:8px">يتم طلب الرقم مرة واحدة فقط لهذا الرابط.</div>
        </form>
      <?php else: ?>
        <div class="alert success" style="margin-top:12px">تم حفظ رقم الهاتف: <?= e($ticket['customer_phone']) ?></div>
      <?php endif; ?>
      <div class="qp-live" style="margin-top:16px">
        <div class="qp-mini"><div class="muted">حالة التذكرة الحالية</div><strong id="miniStatus"><?= e($statusMap[$ticket['ticket_status']] ?? $ticket['ticket_status']) ?></strong></div>
        <div class="qp-mini"><div class="muted">آخر تحديث</div><strong id="miniUpdate"><?= e(date('H:i')) ?></strong></div>
      </div>
    </div>
  </div>

  <div class="qp-card">
    <div class="page-head"><h3 style="margin:0">الحالة المباشرة</h3><span class="pill">تحديث تلقائي</span></div>
    <div class="table-wrap" style="margin-top:10px">
      <table class="table qp-table">
        <thead><tr><th>الرقم الحالي</th><th>الحالة</th><th>وقت الاستدعاء</th></tr></thead>
        <tbody id="liveRows">
          <?php foreach(array_slice($snap['serving'] ?? [], 0, 5) as $r): ?>
            <tr><td><strong><?= e($r['ticket_no']) ?></strong></td><td><?= e($statusMap[$r['ticket_status']] ?? $r['ticket_status']) ?></td><td><?= e($r['called_at'] ?? '') ?></td></tr>
          <?php endforeach; ?>
          <?php if(empty($snap['serving'])): ?><tr><td colspan="3">لا يوجد نداء حالي</td></tr><?php endif; ?>
        </tbody>
      </table>
    </div>
  </div>
</div>
<script>
const STATUS_MAP = {pending:'بانتظار الدور', serving:'حان الدور', done:'تمت الخدمة', skipped:'تم التخطي'};
async function loadQueue(){
  try {
    const res = await fetch('<?= e(base_url('?page=queue_snapshot')) ?>');
    const d = await res.json();
    const servingNo = (d.serving && d.serving.length) ? d.serving[0].ticket_no : '---';
    document.getElementById('nowServing').textContent = servingNo;
    const allRows = [...(d.waiting||[]), ...(d.serving||[]), ...(d.skipped||[]), ...(d.recent||[])];
    const me = allRows.find(x => parseInt(x.id,10) === <?= (int)$ticket['id'] ?>);
    if (me) {
      const st = STATUS_MAP[me.ticket_status] || me.ticket_status;
      document.getElementById('myStatus').textContent = st;
      document.getElementById('miniStatus').textContent = st;
    }
    const remaining = (d.waiting||[]).filter(x => parseInt(x.seq_no,10) < <?= (int)$ticket['seq_no'] ?>).length;
    document.getElementById('remainingCount').textContent = remaining;
    document.getElementById('miniUpdate').textContent = new Date().toLocaleTimeString('en-GB', {hour:'2-digit', minute:'2-digit'});
    const servingRows = (d.serving||[]).slice(0,5);
    document.getElementById('liveRows').innerHTML = servingRows.length ? servingRows.map(r => `<tr><td><strong>${r.ticket_no}</strong></td><td>${STATUS_MAP[r.ticket_status]||r.ticket_status}</td><td>${r.called_at||''}</td></tr>`).join('') : '<tr><td colspan="3">لا يوجد نداء حالي</td></tr>';
  } catch (e) {}
}
setInterval(loadQueue, parseInt('<?= e(setting('queue_poll_ms','2000')) ?>',10) || 2000);
</script>
<?php include __DIR__ . '/../layout/footer.php'; ?>
