<?php $title='العملاء'; include __DIR__ . '/../layout/header.php'; ?>
<div class="card">
  <div class="page-head">
    <div>
      <h2 style="margin:0">العملاء</h2>
      <div class="muted">ابحث بسرعة بالاسم أو الهاتف أو الرقم المدني. يتم التصفية في الوقت الفعلي.</div>
    </div>
    <span class="pill" id="customersCount"><?= count($rows ?? []) ?> عميل</span>
  </div>

  <div class="toolbar" style="margin-bottom:14px">
    <input class="input" id="customerLiveSearch" placeholder="ابحث الآن..." autocomplete="off" style="max-width:380px">
    <button type="button" class="btn light" id="customerResetBtn">إعادة تعيين</button>
  </div>

  <div class="table-wrap">
    <table class="table">
      <thead>
        <tr>
          <th>الاسم</th>
          <th>الهاتف</th>
          <th>الرقم المدني</th>
          <th>الحالة</th>
          <th>سبب الحظر</th>
          <th>إجراءات</th>
        </tr>
      </thead>
      <tbody id="customerRows">
      <?php foreach(($rows ?? []) as $row): 
        $blob = mb_strtolower(trim(($row['full_name'] ?? '') . ' ' . ($row['phone'] ?? '') . ' ' . ($row['civil_id'] ?? '')));
      ?>
        <tr data-search="<?= e($blob) ?>" class="<?= !empty($row['is_blacklisted']) ? 'row-danger' : '' ?>">
          <td><?= e($row['full_name']) ?></td>
          <td><?= e($row['phone']) ?></td>
          <td><?= e($row['civil_id'] ?? '-') ?></td>
          <td>
            <?php if(!empty($row['is_blacklisted'])): ?>
              <span class="badge" style="background:#fee2e2;color:#991b1b">محظور</span>
            <?php else: ?>
              <span class="badge" style="background:#dcfce7;color:#166534">نشط</span>
            <?php endif; ?>
          </td>
          <td><?= e($row['blacklist_reason'] ?? '-') ?></td>
          <td>
            <div class="toolbar">
              <?php if(empty($row['is_blacklisted'])): ?>
              <form method="post" action="<?= e(base_url('?page=customer_blacklist')) ?>" onsubmit="return confirm('تأكيد حظر العميل؟')">
                <input type="hidden" name="_csrf" value="<?= e(csrf_token()) ?>">
                <input type="hidden" name="id" value="<?= (int)$row['id'] ?>">
                <input class="input" name="reason" placeholder="سبب الحظر" required style="min-width:170px">
                <button class="btn danger">حظر</button>
              </form>
              <?php else: ?>
              <form method="post" action="<?= e(base_url('?page=customer_unblacklist')) ?>" onsubmit="return confirm('تأكيد فك الحظر؟')">
                <input type="hidden" name="_csrf" value="<?= e(csrf_token()) ?>">
                <input type="hidden" name="id" value="<?= (int)$row['id'] ?>">
                <button class="btn success">فك الحظر</button>
              </form>
              <?php endif; ?>
            </div>
          </td>
        </tr>
      <?php endforeach; ?>
      <?php if(empty($rows)): ?>
        <tr id="customerEmptyRow"><td colspan="6" class="muted">لا يوجد عملاء حالياً.</td></tr>
      <?php endif; ?>
      </tbody>
    </table>
  </div>

  <div id="customerNoResults" class="muted hidden" style="margin-top:12px">لا توجد نتائج مطابقة للبحث.</div>
</div>

<style>
.row-danger td{background:#fff5f5 !important}
</style>

<script>
(function(){
  const input = document.getElementById('customerLiveSearch');
  const resetBtn = document.getElementById('customerResetBtn');
  const rows = Array.from(document.querySelectorAll('#customerRows tr[data-search]'));
  const countBox = document.getElementById('customersCount');
  const noResults = document.getElementById('customerNoResults');

  function applyFilter(){
    const q = (input.value || '').trim().toLowerCase();
    let visible = 0;
    rows.forEach(row => {
      const hay = (row.getAttribute('data-search') || '').toLowerCase();
      const match = !q || hay.indexOf(q) !== -1;
      row.style.display = match ? '' : 'none';
      if (match) visible++;
    });
    countBox.textContent = visible + ' عميل';
    noResults.classList.toggle('hidden', visible !== 0 || rows.length === 0);
  }

  input.addEventListener('input', applyFilter);
  resetBtn.addEventListener('click', function(){
    input.value = '';
    applyFilter();
    input.focus();
  });

  applyFilter();
})();
</script>

<?php include __DIR__ . '/../layout/footer.php'; ?>
