<?php $title='إعدادات واتساب والطابور'; include __DIR__ . '/../layout/header.php'; ?>
<style>
.settings-sections{display:grid;gap:16px}
.settings-block{background:linear-gradient(180deg,#fff,#fbf7f2);border:1px solid #eadfd5;border-radius:22px;padding:18px}
.settings-block h3{margin:0 0 6px}
.settings-block .desc{color:#7b6a58;margin-bottom:14px}
.settings-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.settings-grid .col-12{grid-column:span 12}.settings-grid .col-8{grid-column:span 8}.settings-grid .col-6{grid-column:span 6}.settings-grid .col-4{grid-column:span 4}
@media(max-width:860px){.settings-grid .col-12,.settings-grid .col-8,.settings-grid .col-6,.settings-grid .col-4{grid-column:1/-1}}
.summary-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.summary-card{background:#fff;border:1px solid #eadfd5;border-radius:18px;padding:14px}
@media(max-width:640px){.summary-grid{grid-template-columns:1fr}}
</style>

<div class="grid">
  <div class="col-8">
    <div class="card">
      <div class="page-head">
        <div>
          <h2 style="margin:0">إعدادات الواتس اب والطابور</h2>
          <div class="muted">تم ترتيب الإعدادات في مجموعات واضحة: واتساب، أسعار، رسائل، وإعدادات العرض.</div>
        </div>
        <span class="pill">Queue + WhatsApp</span>
      </div>

      <form method="post" action="<?= e(base_url('?page=settings_whatsapp_save')) ?>" class="settings-sections">
        <input type="hidden" name="_csrf" value="<?= e(csrf_token()) ?>">

        <section class="settings-block">
          <h3>إعدادات واتساب</h3>
          <div class="desc">بيانات الربط الأساسية مع UltraMsg.</div>
          <div class="settings-grid">
            <div class="col-6">
              <label class="label">Instance ID</label>
              <input class="input" name="ultra_instance_id" value="<?= e($settings['ultra_instance_id'] ?? '') ?>">
            </div>
            <div class="col-6">
              <label class="label">Token</label>
              <input class="input" name="ultra_token" value="<?= e($settings['ultra_token'] ?? '') ?>">
            </div>
          </div>
        </section>

        <section class="settings-block">
          <h3>الأسعار والبادئات</h3>
          <div class="desc">أسعار الخدمة والعملة والبادئة الافتراضية لكل موديول.</div>
          <div class="settings-grid">
            <div class="col-4">
              <label class="label">سعر الخدمة لكل رقم</label>
              <input class="input" type="number" min="0" step="0.001" name="queue_ticket_price" value="<?= e($settings['queue_ticket_price'] ?? '0.000') ?>">
            </div>
            <div class="col-4">
              <label class="label">سعر خياطة المصر الواحد</label>
              <input class="input" type="number" min="0" step="0.001" name="tailoring_unit_price" value="<?= e($settings['tailoring_unit_price'] ?? '0.000') ?>">
            </div>
            <div class="col-4">
              <label class="label">سعر حجز الاستوديو للساعة</label>
              <input class="input" type="number" min="0" step="0.001" name="studio_booking_price" value="<?= e($settings['studio_booking_price'] ?? '0.000') ?>">
            </div>
            <div class="col-4">
              <label class="label">العملة / الرمز</label>
              <input class="input" name="queue_currency" value="<?= e($settings['queue_currency'] ?? 'ر.ع') ?>">
            </div>
            <div class="col-4">
              <label class="label">البادئة الافتراضية للطابور</label>
              <input class="input" name="queue_prefix_default" value="<?= e($settings['queue_prefix_default'] ?? 'A') ?>" maxlength="3">
            </div>
          </div>
        </section>

        <section class="settings-block">
          <h3>إعدادات العرض والتنبيه</h3>
          <div class="desc">تحكم بسرعة التحديث، عنوان الصفحة، والتنبيه الصوتي.</div>
          <div class="settings-grid">
            <div class="col-4">
              <label class="label">عدد التذاكر قبل التذكير</label>
              <input class="input" type="number" min="1" name="queue_notify_before" value="<?= e($settings['queue_notify_before'] ?? '3') ?>">
            </div>
            <div class="col-4">
              <label class="label">عنوان صفحة العميل</label>
              <input class="input" name="queue_public_title" value="<?= e($settings['queue_public_title'] ?? 'متابعة الدور') ?>">
            </div>
            <div class="col-4">
              <label class="label">سرعة التحديث (ms)</label>
              <input class="input" type="number" min="1000" step="500" name="queue_poll_ms" value="<?= e($settings['queue_poll_ms'] ?? '2000') ?>">
            </div>
            <div class="col-4">
              <label class="label">الصوت في الشاشة</label>
              <label style="display:flex;gap:8px;align-items:center;margin-top:11px">
                <input type="checkbox" name="queue_sound_enabled" value="1" <?= ($settings['queue_sound_enabled'] ?? '1')==='1'?'checked':'' ?>>
                <span>مفعّل</span>
              </label>
            </div>
          </div>
        </section>

        <section class="settings-block">
          <h3>رسائل الطابور</h3>
          <div class="desc">تخصيص رسائل التذكير وحلول الدور.</div>
          <div class="settings-grid">
            <div class="col-12">
              <label class="label">نص رسالة التذكير</label>
              <textarea class="textarea" name="queue_message_template" style="min-height:150px"><?= e($settings['queue_message_template'] ?? "مرحباً {ticket_no}
تبقى أمامك {remaining} أدوار
يرجى التوجه قريباً.") ?></textarea>
              <div class="muted">المتغيرات المتاحة: {ticket_no} و {remaining} و {phone}</div>
            </div>
            <div class="col-12">
              <label class="label">نص رسالة حلول الدور الآن</label>
              <textarea class="textarea" name="queue_now_template" style="min-height:120px"><?= e($settings['queue_now_template'] ?? "تذكرتك {ticket_no}، حان دورك الآن. يرجى التوجه مباشرة إلى الرسبشن.") ?></textarea>
              <div class="muted">يتم إرسالها عند استدعاء التذكرة الحالية إذا كان رقم الهاتف محفوظًا.</div>
            </div>
          </div>
        </section>

        <section class="settings-block">
          <h3>رسائل خياطة المصر</h3>
          <div class="desc">رسالة جاهزية الطلب بعد الانتهاء من الخياطة.</div>
          <div class="settings-grid">
            <div class="col-12">
              <label class="label">رسالة جاهزية الخياطة</label>
              <textarea class="textarea" name="tailoring_ready_template" style="min-height:120px"><?= e($settings['tailoring_ready_template'] ?? "مرحباً {name}، تم تجهيز المصر الخاصة بك. رقم التذكرة: {ticket_no}. يمكنك الحضور للاستلام.") ?></textarea>
              <div class="muted">المتغيرات المتاحة: {name} و {ticket_no} و {phone} و {qty}</div>
            </div>
          </div>
        </section>

        <section class="settings-block">
          <h3>رسائل حجز الاستوديو</h3>
          <div class="desc">يمكن تعديل رسالة تأكيد الحجز ورسالة تعديل الحجز المرسلة للعميل.</div>
          <div class="settings-grid">
            <div class="col-12">
              <label class="label">رسالة تأكيد الحجز</label>
              <textarea class="textarea" name="studio_booking_create_template" style="min-height:120px"><?= e($settings['studio_booking_create_template'] ?? "مرحباً {name}، تم تأكيد حجز استوديو التصوير بتاريخ {booking_date} من {start_time} إلى {end_time}. السعر: {price} {currency}.") ?></textarea>
              <div class="muted">المتغيرات المتاحة: {name} و {phone} و {civil_id} و {booking_date} و {start_time} و {end_time} و {price} و {currency}</div>
            </div>
            <div class="col-12">
              <label class="label">رسالة تعديل الحجز</label>
              <textarea class="textarea" name="studio_booking_update_template" style="min-height:120px"><?= e($settings['studio_booking_update_template'] ?? "مرحباً {name}، تم تحديث حجز استوديو التصوير بتاريخ {booking_date} من {start_time} إلى {end_time}. السعر: {price} {currency}.") ?></textarea>
            </div>
          </div>
        </section>

        <div style="margin-top:4px"><button class="btn">حفظ الإعدادات</button></div>
      </form>
    </div>
  </div>

  <div class="col-4">
    <div class="card soft">
      <h3 style="margin-top:0">ملخص سريع</h3>
      <div class="summary-grid">
        <div class="summary-card">
          <div class="muted">سعر خدمة الطابور</div>
          <strong><?= e(number_format((float)($settings['queue_ticket_price'] ?? '0'),3)) ?> <?= e($settings['queue_currency'] ?? 'ر.ع') ?></strong>
        </div>
        <div class="summary-card">
          <div class="muted">سعر خياطة المصر</div>
          <strong><?= e(number_format((float)($settings['tailoring_unit_price'] ?? '0'),3)) ?> <?= e($settings['queue_currency'] ?? 'ر.ع') ?></strong>
        </div>
        <div class="summary-card">
          <div class="muted">سعر حجز الاستوديو</div>
          <strong><?= e(number_format((float)($settings['studio_booking_price'] ?? '0'),3)) ?> <?= e($settings['queue_currency'] ?? 'ر.ع') ?></strong>
        </div>
        <div class="summary-card">
          <div class="muted">تنبيه قبل</div>
          <strong><?= e($settings['queue_notify_before'] ?? '3') ?> أدوار</strong>
        </div>
        <div class="summary-card">
          <div class="muted">سرعة التحديث</div>
          <strong><?= e($settings['queue_poll_ms'] ?? '2000') ?> ms</strong>
        </div>
        <div class="summary-card">
          <div class="muted">الصوت</div>
          <strong><?= ($settings['queue_sound_enabled'] ?? '1')==='1' ? 'مفعّل' : 'موقوف' ?></strong>
        </div>
      </div>
      <div class="section-divider"></div>
      <div class="muted">تم ترتيب الإعدادات إلى أقسام واضحة لتسهيل الإدارة اليومية وتقليل التداخل بين الأسعار والرسائل وبيانات الربط.</div>
    </div>
  </div>
</div>
<?php include __DIR__ . '/../layout/footer.php'; ?>
