{{-- Notun customer popup (sale form theke) --}}
<div id="custModal" 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-xl 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">
        <div>
          <h3 class="font-bold text-lg">Notun customer</h3>
          <p class="text-xs text-slate-500">Save korle customer Customers e save hobe ar ei sale e select hoye jabe.</p>
        </div>
        <button type="button" id="custClose" 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 grid sm:grid-cols-2 gap-5">
        <div class="sm:col-span-2">
          <label class="block text-sm font-semibold mb-2">Name <span class="text-red-500">*</span></label>
          <input type="text" id="cust_name" maxlength="120" autocomplete="off"
                 class="w-full h-11 px-3 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>

        <div>
          <label class="block text-sm font-semibold mb-2">Phone</label>
          <input type="text" id="cust_phone" maxlength="30" autocomplete="off" placeholder="+971 …"
                 class="w-full h-11 px-3 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>

        <div>
          <label class="block text-sm font-semibold mb-2">Email</label>
          <input type="email" id="cust_email" maxlength="120" autocomplete="off"
                 class="w-full h-11 px-3 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>

        <div>
          <label class="block text-sm font-semibold mb-2">TRN (VAT number)</label>
          <input type="text" id="cust_trn" maxlength="50" autocomplete="off" placeholder="Company hole"
                 class="w-full h-11 px-3 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>

        <div>
          <label class="block text-sm font-semibold mb-2">Address</label>
          <input type="text" id="cust_address" maxlength="255" autocomplete="off"
                 class="w-full h-11 px-3 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>
      </div>

      <div id="custErr" class="hidden mx-6 mb-4 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 class="px-6 py-4 border-t border-slate-200 dark:border-slate-800 flex justify-end gap-3">
        <button type="button" id="custCancel" 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="custSave" 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 customer</button>
      </div>
    </div>
  </div>
</div>

@push('scripts')
<script>
  (function () {
    const URL_SAVE = @json(route('admin.customers.quick-store'));

    const modal   = document.getElementById('custModal');
    const errBox  = document.getElementById('custErr');
    const saveBtn = document.getElementById('custSave');
    const fields  = ['cust_name', 'cust_phone', 'cust_email', 'cust_trn', 'cust_address'];

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

    function openModal() {
      fields.forEach(function (id) { document.getElementById(id).value = ''; });
      errBox.classList.add('hidden');
      modal.classList.remove('hidden');
      document.getElementById('cust_name').focus();
    }

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

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

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

      try {
        const res = await fetch(URL_SAVE, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': token
          },
          body: JSON.stringify({
            name:    document.getElementById('cust_name').value,
            phone:   document.getElementById('cust_phone').value,
            email:   document.getElementById('cust_email').value,
            trn:     document.getElementById('cust_trn').value,
            address: document.getElementById('cust_address').value
          })
        });

        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;
        }

        // Dropdown e notun customer boshe auto select hobe
        const select = document.getElementById('customer');
        select.add(new Option(data.label, data.id, true, true));
        select.value = data.id;
        select.dispatchEvent(new Event('change'));   // walk-in box bondho hobe, due warning thik hobe

        // Popup e TRN dile sale er Customer TRN ghor e boshe (ghor khali thakle)
        const trnInput = document.querySelector('input[name="customer_trn"]');
        if (trnInput && !trnInput.value && data.trn) trnInput.value = data.trn;

        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');
      }
    }

    document.getElementById('addCustomerBtn').addEventListener('click', openModal);
    document.getElementById('custClose').addEventListener('click', closeModal);
    document.getElementById('custCancel').addEventListener('click', closeModal);
    saveBtn.addEventListener('click', save);

    // Enter chaple save hobe (sale form submit hobe na)
    fields.forEach(function (id) {
      document.getElementById(id).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