<?php $title='حجز استوديو التصوير'; include __DIR__ . '/../layout/header.php'; ?>
<?php
  $canCreate = $canCreate ?? can_access_page('studio_store');
  $canManage = $canManage ?? (can_access_page('studio_update') || can_access_page('studio_delete'));
  $editing = $editing ?? null;
  $selectedDate = $date ?? date('Y-m-d');
  $bookedSlots = $bookedSlots ?? [];
  $currency = $settings['queue_currency'] ?? 'ر.ع';
  $defaultPrice = number_format((float)($settings['studio_booking_price'] ?? '0'), 3, '.', '');
  $editStart = $editing ? substr((string)$editing['start_time'], 0, 5) : '';
  $hours = [];
  for ($h = 0; $h < 24; $h++) {
      $hours[] = str_pad((string)$h, 2, '0', STR_PAD_LEFT) . ':00';
  }
?>
<div class="grid">
  <?php if($canCreate || ($editing && can_access_page('studio_update'))): ?>
  <div class="col-5">
    <div class="card">
      <div class="page-head">
        <div>
          <h2 style="margin:0"><?= $editing ? 'تعديل حجز الاستوديو' : 'حجز استوديو جديد' ?></h2>
          <div class="muted">أدخل رقم الهاتف أو الرقم المدني. إذا كانت بيانات العميل موجودة ستظهر تلقائياً، وإذا لم تكن موجودة يمكنك إضافتها مباشرة.</div>
        </div>
        <span class="pill">سعر الساعة: <?= e($defaultPrice) ?> <?= e($currency) ?></span>
      </div>

      <form method="post" action="<?= e(base_url($editing ? '?page=studio_update' : '?page=studio_store')) ?>" id="studioForm">
        <input type="hidden" name="_csrf" value="<?= e(csrf_token()) ?>">
        <?php if($editing): ?><input type="hidden" name="id" value="<?= (int)$editing['id'] ?>"><?php endif; ?>
        <div class="grid">
          <div class="col-12">
            <label class="label">رقم الهاتف أو الرقم المدني</label>
            <input class="input" name="identifier" id="studioIdentifier" value="<?= e(($editing['phone'] ?? '') !== '' ? $editing['phone'] : ($editing['civil_id'] ?? '')) ?>" placeholder="مثال: 71111711 أو الرقم المدني" required autocomplete="off">
            <div class="muted" id="studioLookupHint" style="margin-top:6px">سيتم البحث تلقائياً عند كتابة الرقم.</div>
          </div>
          <div class="col-12">
            <label class="label">اسم العميل</label>
            <input class="input" name="full_name" id="studioFullName" value="<?= e($editing['full_name'] ?? '') ?>" placeholder="اسم العميل" required>
          </div>
          <div class="col-6">
            <label class="label">رقم الهاتف</label>
            <input class="input" name="phone" id="studioPhone" value="<?= e($editing['phone'] ?? '') ?>" placeholder="رقم الهاتف">
          </div>
          <div class="col-6">
            <label class="label">الرقم المدني</label>
            <input class="input" name="civil_id" id="studioCivilId" value="<?= e($editing['civil_id'] ?? '') ?>" placeholder="الرقم المدني">
          </div>
          <div class="col-6">
            <label class="label">تاريخ الحجز</label>
            <input class="input" type="date" name="booking_date" id="studioDate" value="<?= e($editing['booking_date'] ?? $selectedDate) ?>" required>
          </div>
          <div class="col-6">
            <label class="label">ساعة البدء</label>
            <select class="select" name="start_time" id="studioStartTime" required>
              <option value="">— اختر —</option>
              <?php foreach($hours as $slot): ?>
                <option value="<?= e($slot) ?>" <?= $editStart === $slot ? 'selected' : '' ?>><?= e($slot) ?></option>
              <?php endforeach; ?>
            </select>
          </div>
          <div class="col-6">
            <label class="label">ساعة النهاية</label>
            <input class="input" id="studioEndTime" value="<?= e($editing ? substr((string)$editing['end_time'], 0, 5) : '') ?>" readonly>
          </div>
          <div class="col-6">
            <label class="label">السعر</label>
            <input class="input" type="number" min="0" step="0.001" name="price" id="studioPrice" value="<?= e($editing ? number_format((float)$editing['price'],3,'.','') : $defaultPrice) ?>" required>
          </div>
        </div>
        <div class="responsive-actions" style="margin-top:16px;display:flex;gap:10px;flex-wrap:wrap">
          <button class="btn" id="studioSubmitBtn"><?= $editing ? 'حفظ التعديل' : 'تأكيد الحجز' ?></button>
          <?php if($editing): ?><a class="btn light" href="<?= e(base_url('?page=studio&date=' . urlencode((string)($editing['booking_date'] ?? $selectedDate)))) ?>">إلغاء التعديل</a><?php endif; ?>
        </div>
      </form>
    </div>
  </div>
  <?php endif; ?>

  <div class="<?= ($canCreate || ($editing && can_access_page('studio_update'))) ? 'col-7' : 'col-12' ?>">
    <div class="card">
      <div class="page-head">
        <div>
          <h2 style="margin:0">حجوزات الاستوديو</h2>
          <div class="muted">الحجز لمدة ساعة واحدة فقط. لا يمكن تكرار نفس الساعة في نفس التاريخ.</div>
        </div>
        <span class="pill" id="studioCount"><?= count($rows ?? []) ?> نتيجة</span>
      </div>

      <form method="get" class="toolbar" style="margin-bottom:14px">
        <input type="hidden" name="page" value="studio">
        <input class="input" style="max-width:220px" type="date" name="date" value="<?= e($selectedDate) ?>">
        <input class="input" style="max-width:320px" type="text" name="q" value="<?= e($q ?? '') ?>" placeholder="اسم العميل / الهاتف / الرقم المدني">
        <button class="btn light" type="submit">تصفية</button>
        <a class="btn light" href="<?= e(base_url('?page=studio&date=' . urlencode(date('Y-m-d')))) ?>">اليوم</a>
      </form>

      <div class="table-wrap">
        <table class="table">
          <thead>
            <tr>
              <th>التاريخ</th>
              <th>من</th>
              <th>إلى</th>
              <th>العميل</th>
              <th>الهاتف</th>
              <th>الرقم المدني</th>
              <th>السعر</th>
              <th>إجراءات</th>
            </tr>
          </thead>
          <tbody>
            <?php foreach(($rows ?? []) as $row): ?>
            <tr>
              <td><strong><?= e($row['booking_date']) ?></strong></td>
              <td><?= e(substr((string)$row['start_time'],0,5)) ?></td>
              <td><?= e(substr((string)$row['end_time'],0,5)) ?></td>
              <td>
                <?= e($row['full_name']) ?>
                <?php if((int)($row['is_blacklisted'] ?? 0) === 1): ?>
                  <div class="muted" style="color:#b42318">محظور<?= !empty($row['blacklist_reason']) ? ' — ' . e($row['blacklist_reason']) : '' ?></div>
                <?php endif; ?>
              </td>
              <td><?= e($row['phone'] ?: '—') ?></td>
              <td><?= e($row['civil_id'] ?: '—') ?></td>
              <td><?= e(number_format((float)$row['price'],3)) ?> <?= e($currency) ?></td>
              <td>
                <div class="toolbar">
                  <?php if(can_access_page('studio_update')): ?>
                    <a class="btn light" href="<?= e(base_url('?page=studio&edit_id=' . (int)$row['id'] . '&date=' . urlencode((string)$selectedDate))) ?>">تعديل</a>
                  <?php endif; ?>
                  <?php if(can_access_page('studio_delete')): ?>
                  <form method="post" action="<?= e(base_url('?page=studio_delete')) ?>" onsubmit="return confirm('هل أنت متأكد من حذف الحجز؟')">
                    <input type="hidden" name="_csrf" value="<?= e(csrf_token()) ?>">
                    <input type="hidden" name="id" value="<?= (int)$row['id'] ?>">
                    <button class="btn danger">حذف</button>
                  </form>
                  <?php endif; ?>
                </div>
              </td>
            </tr>
            <?php endforeach; ?>
            <?php if(empty($rows)): ?>
              <tr><td colspan="8" class="muted">لا توجد حجوزات في التاريخ المحدد.</td></tr>
            <?php endif; ?>
          </tbody>
        </table>
      </div>

      <div style="margin-top:14px">
        <h3 class="section-title">الساعات المحجوزة في <?= e($selectedDate) ?></h3>
        <div class="toolbar" id="studioBookedSummary">
          <?php if($bookedSlots): foreach($bookedSlots as $slot): ?>
            <span class="badge"><?= e($slot) ?></span>
          <?php endforeach; else: ?>
            <span class="muted">لا توجد ساعات محجوزة حالياً.</span>
          <?php endif; ?>
        </div>
      </div>
    </div>
  </div>
</div>

<?php if(!$canCreate && !$canManage): ?>
  <div class="alert error">لا تملك صلاحيات حجز الاستوديو.</div>
<?php endif; ?>

<script>
(function(){
  const identifier = document.getElementById('studioIdentifier');
  const fullName = document.getElementById('studioFullName');
  const phone = document.getElementById('studioPhone');
  const civilId = document.getElementById('studioCivilId');
  const dateInput = document.getElementById('studioDate');
  const startSelect = document.getElementById('studioStartTime');
  const endInput = document.getElementById('studioEndTime');
  const hint = document.getElementById('studioLookupHint');
  const submitBtn = document.getElementById('studioSubmitBtn');
  const bookedSummary = document.getElementById('studioBookedSummary');
  const lookupBase = <?= json_encode(base_url('?page=customer_lookup&q='), JSON_UNESCAPED_UNICODE|JSON_UNESCAPED_SLASHES) ?>;
  const slotsBase = <?= json_encode(base_url('?page=studio_booked_slots&date='), JSON_UNESCAPED_UNICODE|JSON_UNESCAPED_SLASHES) ?>;
  const initialBooked = new Set(<?= json_encode(array_values($bookedSlots), JSON_UNESCAPED_UNICODE|JSON_UNESCAPED_SLASHES) ?>);
  const editSlot = <?= json_encode($editStart, JSON_UNESCAPED_UNICODE|JSON_UNESCAPED_SLASHES) ?>;

  function normalize(value){ return String(value || '').replace(/\D+/g, ''); }

  function setDisabled(flag){ if(submitBtn) submitBtn.disabled = !!flag; }

  function calcEndTime(){
    if(!startSelect || !endInput) return;
    const value = startSelect.value || '';
    if(!value){ endInput.value = ''; return; }
    const hour = parseInt(value.split(':')[0], 10);
    const next = String((hour + 1) % 24).padStart(2, '0') + ':00';
    endInput.value = next;
  }

  function refreshSlotOptions(booked){
    if(!startSelect) return;
    const bookedSet = new Set(booked || []);
    Array.from(startSelect.options).forEach(opt => {
      if(!opt.value) return;
      const isTaken = bookedSet.has(opt.value) && opt.value !== editSlot;
      opt.disabled = isTaken;
      if(isTaken){
        opt.textContent = opt.value + ' — محجوز';
      } else {
        opt.textContent = opt.value;
      }
    });
    if(startSelect.selectedOptions[0] && startSelect.selectedOptions[0].disabled){
      startSelect.value = '';
    }
    calcEndTime();
  }

  function refreshBookedSummary(booked){
    if(!bookedSummary) return;
    if(!booked || !booked.length){
      bookedSummary.innerHTML = '<span class="muted">لا توجد ساعات محجوزة حالياً.</span>';
      return;
    }
    bookedSummary.innerHTML = booked.map(slot => '<span class="badge">' + slot + '</span>').join('');
  }

  let lookupTimer = null;
  let lastLookupValue = '';
  if(identifier){
    identifier.addEventListener('input', function(){
      clearTimeout(lookupTimer);
      const val = normalize(this.value);
      if(!val){
        hint.textContent = 'سيتم البحث تلقائياً عند كتابة الرقم.';
        hint.style.color = '';
        setDisabled(false);
        return;
      }
      hint.textContent = 'جاري البحث...';
      lookupTimer = setTimeout(async () => {
        if(val === lastLookupValue) return;
        lastLookupValue = val;
        try {
          const res = await fetch(lookupBase + encodeURIComponent(val), { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
          const data = await res.json();
          if(data && (data.full_name || data.phone || data.civil_id)){
            if(fullName && data.full_name) fullName.value = data.full_name;
            if(phone) phone.value = data.phone || '';
            if(civilId) civilId.value = data.civil_id || '';
            if(parseInt(data.is_blacklisted || 0, 10) === 1){
              hint.textContent = 'هذا العميل محظور ولا يمكن الحجز له' + (data.blacklist_reason ? ' — ' + data.blacklist_reason : '');
              hint.style.color = '#b42318';
              setDisabled(true);
            } else {
              hint.textContent = 'تم العثور على العميل تلقائياً.';
              hint.style.color = '';
              setDisabled(false);
            }
          } else {
            hint.textContent = 'البيانات غير موجودة، يمكنك إضافتها ثم متابعة الحجز.';
            hint.style.color = '';
            setDisabled(false);
          }
        } catch(e) {
          hint.textContent = 'تعذر جلب بيانات العميل حالياً.';
        }
      }, 250);
    });
  }

  async function loadBookedSlots(){
    if(!dateInput) return;
    const value = dateInput.value || '';
    if(!value){ refreshSlotOptions([]); refreshBookedSummary([]); return; }
    try {
      const res = await fetch(slotsBase + encodeURIComponent(value), { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
      const data = await res.json();
      refreshSlotOptions(Array.isArray(data) ? data : []);
      refreshBookedSummary(Array.isArray(data) ? data : []);
    } catch(e) {
      refreshSlotOptions(Array.from(initialBooked));
    }
  }

  if(startSelect) startSelect.addEventListener('change', calcEndTime);
  if(dateInput) dateInput.addEventListener('change', loadBookedSlots);
  calcEndTime();
  refreshSlotOptions(Array.from(initialBooked));
  loadBookedSlots();
})();
</script>
<?php include __DIR__ . '/../layout/footer.php'; ?>
