<?php $settings = $settings ?? []; ?>
<style>
.barcode-page{max-width:1040px}
.barcode-search-card{border:1px solid #e6ebf2;border-radius:24px;box-shadow:0 14px 34px rgba(15,23,42,.06)}
.barcode-search-wrap{position:relative}
.barcode-autocomplete{position:absolute;inset-inline:0;top:calc(100% + 8px);z-index:40;background:#fff;border:1px solid #dbe3ef;border-radius:18px;box-shadow:0 18px 45px rgba(15,23,42,.14);max-height:320px;overflow:auto;display:none}
.barcode-autocomplete.show{display:block}
.barcode-autocomplete__item{padding:12px 14px;display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer;border-bottom:1px solid #eef2f7}
.barcode-autocomplete__item:last-child{border-bottom:none}
.barcode-autocomplete__item.active,.barcode-autocomplete__item:hover{background:#f8fbff}
.barcode-autocomplete__title{font-weight:800;color:#102a43}
.barcode-autocomplete__meta{font-size:.84rem;color:#6b7280}
.barcode-item-preview{border:1px solid #dce8f5;background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);border-radius:20px;padding:16px;min-height:132px}
.barcode-item-preview .name{font-weight:800;font-size:1.08rem;color:#102a43}
.barcode-stat{border:1px dashed #cfd9e8;border-radius:18px;padding:12px 14px;background:#fff}
.barcode-stat .label{font-size:.82rem;color:#6b7280}
.barcode-stat .value{font-weight:800;font-size:1.05rem;color:#0f172a}
.barcode-print-actions{position:sticky;bottom:12px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border:1px solid #e6ebf2;border-radius:20px;padding:12px 14px;box-shadow:0 10px 24px rgba(15,23,42,.08)}
</style>

<div class="barcode-page mx-auto">
  <?php $flash = flash_get(); if ($flash): ?>
    <div class="alert alert-<?= e($flash['type']==='success' ? 'success' : 'danger') ?>"><?= e($flash['message']) ?></div>
  <?php endif; ?>

  <div class="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4">
    <div>
      <h3 class="mb-1">طباعة باركود</h3>
      <div class="text-muted">ابحث عن الصنف، حدّد الكمية، ثم افتح صفحة الطباعة بالملصق الذي تم ضبطه من إعدادات الطباعة.</div>
    </div>
    <a href="<?= e(url('/admin/print-settings')) ?>" class="btn btn-outline-primary rounded-pill px-4"><i class="fa-solid fa-print me-1"></i> إعدادات الطباعة</a>
  </div>

  <div class="card barcode-search-card">
    <div class="card-body p-4 p-lg-5">
      <form id="barcodeLabelForm" class="vstack gap-4" method="get" action="<?= e(url('/inventory/barcode-print/print')) ?>" target="_blank">
        <div class="row g-4 align-items-start">
          <div class="col-lg-7">
            <label class="form-label fw-bold">الصنف</label>
            <div class="barcode-search-wrap">
              <input type="text" id="barcodeItemSearch" class="form-control form-control-lg" placeholder="ابحث بالاسم أو الباركود" autocomplete="off">
              <input type="hidden" name="item_id" id="barcodeItemId">
              <div class="barcode-autocomplete" id="barcodeAutocomplete"></div>
            </div>
            <div class="form-text mt-2">يتم الطباعة على باركود الصنف نفسه. إذا كان الصنف بدون باركود فلن يتم السماح بالطباعة.</div>
          </div>
          <div class="col-sm-6 col-lg-2">
            <label class="form-label fw-bold">الكمية</label>
            <input type="number" min="1" step="1" name="qty" id="barcodeQty" class="form-control form-control-lg text-center" value="1" required>
          </div>
          <div class="col-sm-6 col-lg-3">
            <label class="form-label fw-bold">مقاس الملصق الحالي</label>
            <div class="barcode-stat h-100">
              <div class="label">الإعداد الافتراضي</div>
              <div class="value"><?= e((string)($settings['barcode_label_width_mm'] ?? '50')) ?> × <?= e((string)($settings['barcode_label_height_mm'] ?? '30')) ?> مم</div>
              <div class="small text-muted mt-1">يمكنك تغييره من إعدادات الطباعة.</div>
            </div>
          </div>
        </div>

        <div class="barcode-item-preview" id="barcodeItemPreview">
          <div class="text-muted">اختر صنفًا من البحث ليظهر هنا الاسم والباركود والسعر قبل الطباعة.</div>
        </div>

        <div class="barcode-print-actions d-flex flex-wrap justify-content-between align-items-center gap-3">
          <div class="text-muted small">شكل الملصق: <strong>اسم الشركة</strong> أعلى الملصق، ثم <strong>الباركود في المنتصف</strong>، ثم <strong>السعر بخط عريض</strong>.</div>
          <div class="d-flex flex-wrap gap-2">
            <button type="button" class="btn btn-outline-secondary rounded-pill px-4" id="barcodeClearBtn">مسح الاختيار</button>
            <button type="submit" class="btn btn-primary rounded-pill px-4" id="barcodePrintBtn" disabled><i class="fa-solid fa-barcode me-1"></i> طباعة</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
(function(){
  const search = document.getElementById('barcodeItemSearch');
  const itemId = document.getElementById('barcodeItemId');
  const qty = document.getElementById('barcodeQty');
  const list = document.getElementById('barcodeAutocomplete');
  const preview = document.getElementById('barcodeItemPreview');
  const printBtn = document.getElementById('barcodePrintBtn');
  const clearBtn = document.getElementById('barcodeClearBtn');
  const form = document.getElementById('barcodeLabelForm');
  let rows = [];
  let active = -1;
  let timer = null;
  let selected = null;

  function esc(v){ return String(v ?? '').replace(/[&<>\"']/g, function(c){ return ({'&':'&amp;','<':'&lt;','>':'&gt;','\"':'&quot;',"'":'&#039;'}[c]); }); }
  function money(v){ return new Intl.NumberFormat('en-US',{minimumFractionDigits:0,maximumFractionDigits:2}).format(Number(v || 0)); }
  function toggle(){ list.classList.toggle('show', rows.length > 0); }
  function render(){
    if (!rows.length) { list.innerHTML = ''; toggle(); return; }
    list.innerHTML = rows.map(function(r, idx){
      return `<div class="barcode-autocomplete__item ${idx===active?'active':''}" data-index="${idx}">
        <div><div class="barcode-autocomplete__title">${esc(r.name || '')}</div><div class="barcode-autocomplete__meta">${esc(r.barcode || 'بدون باركود')}</div></div>
        <div class="barcode-autocomplete__meta">${esc(money(r.price || 0))}</div>
      </div>`;
    }).join('');
    toggle();
  }
  function fillPreview(item){
    if (!item) {
      preview.innerHTML = '<div class="text-muted">اختر صنفًا من البحث ليظهر هنا الاسم والباركود والسعر قبل الطباعة.</div>';
      printBtn.disabled = true;
      return;
    }
    preview.innerHTML = `
      <div class="row g-3">
        <div class="col-md-5"><div class="barcode-stat"><div class="label">اسم الصنف</div><div class="value">${esc(item.name || '')}</div></div></div>
        <div class="col-md-4"><div class="barcode-stat"><div class="label">الباركود</div><div class="value">${esc(item.barcode || 'بدون باركود')}</div></div></div>
        <div class="col-md-3"><div class="barcode-stat"><div class="label">السعر</div><div class="value">${esc(money(item.price || 0))}</div></div></div>
      </div>`;
    printBtn.disabled = !(item.id && item.barcode);
  }
  function choose(item){
    selected = item;
    itemId.value = item.id || '';
    search.value = item.name || '';
    rows = [];
    active = -1;
    render();
    fillPreview(item);
  }
  async function lookup(q){
    const res = await fetch(`<?= e(url('/ajax/items/search')) ?>?q=${encodeURIComponent(q)}`, {headers:{'X-Requested-With':'XMLHttpRequest'}});
    if (!res.ok) throw new Error('lookup failed');
    return await res.json();
  }
  search.addEventListener('input', function(){
    selected = null;
    itemId.value = '';
    fillPreview(null);
    const q = search.value.trim();
    if (timer) clearTimeout(timer);
    if (q.length < 1) { rows = []; render(); return; }
    timer = setTimeout(async function(){
      try {
        rows = await lookup(q);
        active = rows.length ? 0 : -1;
        render();
      } catch (e) {
        rows = []; render();
      }
    }, 180);
  });
  search.addEventListener('keydown', function(e){
    if (!rows.length) return;
    if (e.key === 'ArrowDown') { e.preventDefault(); active = Math.min(rows.length - 1, active + 1); render(); }
    if (e.key === 'ArrowUp') { e.preventDefault(); active = Math.max(0, active - 1); render(); }
    if (e.key === 'Enter') { e.preventDefault(); if (rows[active]) choose(rows[active]); }
    if (e.key === 'Escape') { rows = []; render(); }
  });
  list.addEventListener('mousedown', function(e){
    const row = e.target.closest('.barcode-autocomplete__item');
    if (!row) return;
    e.preventDefault();
    const idx = Number(row.dataset.index || -1);
    if (rows[idx]) choose(rows[idx]);
  });
  clearBtn.addEventListener('click', function(){
    selected = null;
    itemId.value = '';
    search.value = '';
    qty.value = '1';
    rows = [];
    active = -1;
    render();
    fillPreview(null);
    search.focus();
  });
  qty.addEventListener('input', function(){
    const value = parseInt(qty.value || '1', 10);
    qty.value = String(Number.isFinite(value) && value > 0 ? value : 1);
  });
  form.addEventListener('submit', function(e){
    const amount = parseInt(qty.value || '1', 10);
    if (!itemId.value) { e.preventDefault(); alert('اختر الصنف أولًا.'); search.focus(); return; }
    if (!selected || !selected.barcode) { e.preventDefault(); alert('هذا الصنف لا يحتوي على باركود ليتم طباعته.'); return; }
    if (!Number.isFinite(amount) || amount <= 0) { e.preventDefault(); alert('الكمية يجب أن تكون رقمًا صحيحًا أكبر من صفر.'); qty.focus(); return; }
    qty.value = String(amount);
  });
  document.addEventListener('click', function(e){ if (!e.target.closest('.barcode-search-wrap')) { rows = []; render(); } });
  setTimeout(function(){ search.focus(); }, 180);
})();
</script>
