{{-- Notun Category / Brand / Unit popup --}}
<div id="quickModal" class="hidden fixed inset-0 z-[60] bg-black/60 p-4 overflow-y-auto">
  <div class="min-h-full grid place-items-center">
    <div class="w-full max-w-md rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 shadow-2xl">

      <div class="px-6 py-4 flex items-center justify-between border-b border-slate-200 dark:border-slate-800">
        <h3 id="quickTitle" class="font-bold text-lg">Notun item</h3>
        <button type="button" id="quickClose" class="w-9 h-9 grid place-items-center rounded-lg text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800" aria-label="Close">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6 6 18"/></svg>
        </button>
      </div>

      <div class="p-6 space-y-5">
        <div>
          <label class="block text-sm font-semibold mb-2">Name <span class="text-red-500">*</span></label>
          <input type="text" id="quickName" maxlength="120" autocomplete="off"
                 class="w-full h-12 px-4 rounded-xl border border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 text-sm outline-none focus:ring-2 ring-brand-500">
        </div>

        {{-- Shudhu Unit er jonno --}}
        <div id="quickShortWrap" class="hidden">
          <label class="block text-sm font-semibold mb-2">Short name <span class="text-red-500">*</span></label>
          <input type="text" id="quickShort" maxlength="20" autocomplete="off" placeholder="jemon: kg, m, pcs"
                 class="w-full h-12 px-4 rounded-xl border border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 text-sm outline-none focus:ring-2 ring-brand-500">
          <p class="text-xs text-slate-500 mt-1.5">Sale/purchase e quantity r pashe ei short name dekhabe.</p>
        </div>

        <div id="quickErr" class="hidden px-4 py-3 rounded-xl bg-red-500/10 text-red-600 dark:text-red-400 border border-red-500/30 text-sm"></div>
      </div>

      <div class="px-6 py-4 border-t border-slate-200 dark:border-slate-800 flex justify-end gap-3">
        <button type="button" id="quickCancel" class="h-11 px-6 rounded-xl border border-slate-300 dark:border-slate-700 text-sm font-semibold hover:bg-slate-100 dark:hover:bg-slate-800">Cancel</button>
        <button type="button" id="quickSave" class="h-11 px-8 rounded-xl bg-gradient-to-r from-brand-500 to-orange-500 text-slate-900 font-bold shadow-lg shadow-brand-500/25 hover:opacity-90">Save</button>
      </div>
    </div>
  </div>
</div>

@push('scripts')
<script>
  (function () {
    const BASE = @json(url('/admin/quick-add'));

    // type => kon select e boshbe
    const CFG = {
      category: { title: 'Notun Category', select: 'category_id', short: false },
      brand:    { title: 'Notun Brand',    select: 'brand_id',    short: false },
      unit:     { title: 'Notun Unit',     select: 'unit_id',     short: true  }
    };

    const modal    = document.getElementById('quickModal');
    const title    = document.getElementById('quickTitle');
    const nameIn   = document.getElementById('quickName');
    const shortIn  = document.getElementById('quickShort');
    const shortBox = document.getElementById('quickShortWrap');
    const errBox   = document.getElementById('quickErr');
    const saveBtn  = document.getElementById('quickSave');
    let current = null;

    function esc(s) {
      return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
    }

    function openModal(type) {
      current = type;
      const cfg = CFG[type];
      title.textContent = cfg.title;
      nameIn.value = '';
      shortIn.value = '';
      shortBox.classList.toggle('hidden', !cfg.short);
      errBox.classList.add('hidden');
      modal.classList.remove('hidden');
      nameIn.focus();
    }

    function closeModal() {
      modal.classList.add('hidden');
      current = null;
    }

    async function save() {
      if (!current) return;
      const cfg = CFG[current];

      errBox.classList.add('hidden');
      saveBtn.disabled = true;
      saveBtn.classList.add('opacity-60');

      const payload = { name: nameIn.value };
      if (cfg.short) payload.short_name = shortIn.value;

      const token = document.querySelector('input[name="_token"]').value;

      try {
        const res = await fetch(BASE + '/' + current, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': token
          },
          body: JSON.stringify(payload)
        });

        const data = await res.json();

        if (!res.ok) {
          const msgs = [];
          if (data.errors) {
            Object.keys(data.errors).forEach(function (k) {
              data.errors[k].forEach(function (m) { msgs.push(esc(m)); });
            });
          } else {
            msgs.push(esc(data.message || 'Kichu ekta vul hoyeche, abar chesta koro.'));
          }
          errBox.innerHTML = msgs.join('<br>');
          errBox.classList.remove('hidden');
          return;
        }

        // Notun item dropdown e boshe auto select hobe
        const select = document.querySelector('select[name="' + cfg.select + '"]');
        select.add(new Option(data.label, data.id, true, true));
        select.value = data.id;

        closeModal();
      } catch (e) {
        errBox.textContent = 'Server e connect hocche na, abar chesta koro.';
        errBox.classList.remove('hidden');
      } finally {
        saveBtn.disabled = false;
        saveBtn.classList.remove('opacity-60');
      }
    }

    // + button gulo
    document.addEventListener('click', function (e) {
      const btn = e.target.closest('[data-quick]');
      if (btn) openModal(btn.dataset.quick);
    });

    document.getElementById('quickClose').addEventListener('click', closeModal);
    document.getElementById('quickCancel').addEventListener('click', closeModal);
    saveBtn.addEventListener('click', save);

    // Enter chaple save hobe (product form submit hobe na)
    [nameIn, shortIn].forEach(function (el) {
      el.addEventListener('keydown', function (e) {
        if (e.key === 'Enter') { e.preventDefault(); save(); }
      });
    });

    document.addEventListener('keydown', function (e) {
      if (e.key === 'Escape' && !modal.classList.contains('hidden')) closeModal();
    });
  })();
</script>
@endpush