<?php $title='طباعة التذاكر'; include __DIR__ . '/../layout/header.php'; ?>
<style>
.queue-wrap{display:grid;gap:18px;grid-template-columns:1.15fr .85fr}
.queue-cardx{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)}
.queue-sub{color:#7b6a58;line-height:1.8}
.q-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.q-item{background:#fff;border:1px solid #efe4d6;border-radius:18px;padding:14px}
.q-item label{display:block;margin-bottom:8px;font-weight:700;color:#5f4a37}
.q-help{display:grid;gap:12px}.q-help .step{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid #efe4d6;border-radius:16px;padding:14px}
.q-help .num{width:32px;height:32px;border-radius:999px;background:#6f4a2f;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;flex:none}
.print-badge{padding:8px 12px;border-radius:999px;background:#f3ece3;color:#6f4a2f;font-weight:700}
@media (max-width:980px){.queue-wrap{grid-template-columns:1fr}.q-grid{grid-template-columns:1fr}}
</style>
<div class="queue-wrap">
  <div class="queue-cardx">
    <div class="page-head">
      <div>
        <h2 style="margin:0">إصدار تذاكر الطابور</h2>
        <div class="queue-sub">واجهة متناسقة للشاشات المختلفة، مع إنشاء تذاكر تحتوي على QR لمتابعة الدور عبر الهاتف.</div>
      </div>
      <div class="print-badge">QR Ready</div>
    </div>
    <form method="post" action="<?= e(base_url('?page=queue_print')) ?>" style="margin-top:18px">
      <input type="hidden" name="_csrf" value="<?= e(csrf_token()) ?>">
      <div class="q-grid">
        <div class="q-item"><label>عدد التذاكر</label><input class="input" type="number" min="1" max="50" name="count" value="1" required></div>
        <div class="q-item"><label>بادئة الرقم</label><input class="input" name="prefix" value="<?= e(setting('queue_prefix_default', 'A')) ?>" maxlength="3"></div>
        <div class="q-item"><label>سعر الخدمة الحالي</label><div class="pill" style="margin-top:10px"><?= e(number_format((float)setting('queue_ticket_price','0'),3)) ?> <?= e(setting('queue_currency','ر.ع')) ?></div></div>
      </div>
      <div class="responsive-actions" style="margin-top:18px">
        <button class="btn">إصدار وطباعة</button>
        <a class="btn light" href="<?= e(base_url('?page=queue_screen')) ?>">فتح شاشة الانتظار</a>
        <a class="btn secondary" href="<?= e(base_url('?page=queue_reports')) ?>">التقارير</a>
      </div>
    </form>
  </div>

  <div class="queue-cardx">
    <h3 class="section-title" style="margin-top:0">خطوات العمل</h3>
    <div class="q-help">
      <div class="step"><div class="num">1</div><div><strong>إصدار التذكرة</strong><div class="muted">يتم إنشاء رقم متسلسل تلقائيًا مع QR خاص لكل عميل.</div></div></div>
      <div class="step"><div class="num">2</div><div><strong>متابعة الدور</strong><div class="muted">عند مسح الـ QR تفتح صفحة متابعة الدور مع المتبقي والرقم الحالي.</div></div></div>
      <div class="step"><div class="num">3</div><div><strong>حفظ الهاتف</strong><div class="muted">يمكن للعميل إدخال رقم الهاتف مرة واحدة فقط لاستلام التنبيهات.</div></div></div>
      <div class="step"><div class="num">4</div><div><strong>التذكير التلقائي</strong><div class="muted">يُرسل واتساب عند اقتراب الدور، ويُرسل إشعار آخر عند حلول الدور.</div></div></div>
    </div>
  </div>
</div>
<?php include __DIR__ . '/../layout/footer.php'; ?>
