@php
  $s      = $sale ?? null;
  $isEdit = (bool) ($isEdit ?? false);

  $input = '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 focus:bg-white dark:focus:bg-slate-900';
  $label = 'block text-sm font-semibold mb-2';

  // Customer na thakle (walk-in) er likha info
  $walk   = $isEdit && ! $s->customer_id;
  $vName  = old('customer_name', $walk && $s->customer_name !== 'Walk-in Customer' ? $s->customer_name : null);
  $vPhone = old('customer_phone', $walk ? $s->customer_phone : null);
@endphp

{{-- Breadcrumb --}}
<div class="flex items-center gap-2 text-sm text-slate-500">
  <a href="{{ route('admin.sales.index') }}" class="hover:text-brand-500">Sales</a><span>/</span>
  <span class="text-slate-800 dark:text-slate-200 font-medium">{{ $isEdit ? 'Edit ' . $s->invoice_no : 'New sale' }}</span>
</div>

{{-- Errors --}}
@if ($errors->any())
  <div class="px-4 py-3 rounded-xl bg-red-500/10 text-red-600 dark:text-red-400 border border-red-500/30 text-sm">
    <ul class="list-disc ml-5">
      @foreach ($errors->all() as $e)<li>{{ $e }}</li>@endforeach
    </ul>
  </div>
@endif

<form method="POST" action="{{ $action }}" class="space-y-6">
  @csrf
  @if ($isEdit) @method('PUT') @endif

  {{-- Date + customer + customer TRN --}}
  <div class="p-6 lg:p-8 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 space-y-6">
    <div class="grid md:grid-cols-3 gap-6">
      <div>
        <label class="{{ $label }}">Date <span class="text-red-500">*</span></label>
        <input type="date" name="date" value="{{ old('date', $s?->date->format('Y-m-d') ?? now()->format('Y-m-d')) }}" class="{{ $input }}">
      </div>

      {{-- Customer + notun add --}}
      <div>
        <label class="{{ $label }}">Customer (Mr./M/s)</label>
        <div class="flex gap-2">
          <select name="customer_id" id="customer" class="{{ $input }} min-w-0">
            <option value="">Walk-in Customer (due dewa jabe na)</option>
            @foreach ($customers as $c)
              <option value="{{ $c->id }}" @selected(old('customer_id', $s?->customer_id) == $c->id)>{{ $c->name }}@if ($c->phone) — {{ $c->phone }}@endif</option>
            @endforeach
          </select>
          <button type="button" id="addCustomerBtn" title="Notun customer add koro"
                  class="shrink-0 w-11 h-11 grid place-items-center rounded-xl bg-brand-500 text-slate-900 hover:bg-brand-400 shadow-lg shadow-brand-500/25">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>
          </button>
        </div>
      </div>

      <div>
        <label class="{{ $label }}">Customer TRN</label>
        <input type="text" name="customer_trn" value="{{ old('customer_trn', $s?->customer_trn) }}" maxlength="50" placeholder="Customer er TRN number" class="{{ $input }}">
      </div>
    </div>

    <p class="text-xs text-slate-500 -mt-3">
      Baki (due) rakhte hole customer select korte hobe. Notun customer lagle dropdown er pashe <b>+</b> chap. <b>Customer TRN</b> ei sale er jonno, invoice e customer er naam er niche boshbe. Prottek sale e alada dite parbe.
    </p>

    {{-- Walk-in er info (customer select korle eta bondho hoye jay) --}}
    <div id="walkin" class="transition">
      <div class="text-sm font-semibold mb-3">Walk-in customer er info <span class="font-normal text-slate-500">(optional, invoice e boshbe)</span></div>
      <div class="grid md:grid-cols-2 gap-6">
        <div>
          <label class="{{ $label }}">Name</label>
          <input type="text" name="customer_name" value="{{ $vName }}" maxlength="120" class="{{ $input }} js-walkin">
        </div>
        <div>
          <label class="{{ $label }}">Tel</label>
          <input type="text" name="customer_phone" value="{{ $vPhone }}" maxlength="30" class="{{ $input }} js-walkin">
        </div>
      </div>
    </div>
  </div>

  {{-- Products --}}
  <div class="rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 overflow-hidden">
    <div class="p-6 pb-3 flex flex-wrap items-center justify-between gap-3">
      <h2 class="font-bold text-lg">Products</h2>
      <div class="flex flex-wrap gap-2">
        <button type="button" onclick="openQuickProduct()" class="h-10 px-5 rounded-xl border border-brand-500 text-brand-600 dark:text-brand-400 text-sm font-semibold hover:bg-brand-500/10">+ New product</button>
        <button type="button" onclick="addRow()" class="h-10 px-5 rounded-xl bg-slate-900 dark:bg-slate-700 text-white text-sm font-semibold hover:opacity-90">+ Add product</button>
      </div>
    </div>

    <div class="overflow-x-auto">
      <table class="w-full text-sm min-w-[950px]">
        <thead class="text-left text-xs uppercase text-slate-500 bg-slate-50 dark:bg-slate-800/50">
          <tr>
            <th class="px-6 py-3">Description</th>
            <th class="w-44">Qty</th>
            <th class="w-36">Unit price</th>
            <th class="w-32 text-right pr-3">Before VAT</th>
            <th class="w-28 text-right pr-3">VAT {{ \App\Models\Sale::VAT_RATE }}%</th>
            <th class="w-32 text-right pr-3">Total</th>
            <th class="px-6 w-24"></th>
          </tr>
        </thead>
        <tbody id="rows" class="divide-y divide-slate-100 dark:divide-slate-800"></tbody>
      </table>
    </div>
  </div>

  {{-- Payment + totals --}}
  <div class="grid lg:grid-cols-2 gap-6">

    <div class="p-6 lg:p-8 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 space-y-5">
      <h2 class="font-bold text-lg">{{ $isEdit ? 'Note' : 'Payment' }}</h2>

      @if ($isEdit)
        <div class="p-4 rounded-xl bg-brand-500/10 border border-brand-500/30 text-sm">
          Ekhon porjonto deya taka: <b>AED {{ number_format($s->paid_amount, 2) }}</b>.
          Taka neya ba tola <b>Payment history</b> page theke korbe. Ekhane shudhu total bodlalei baki (due) auto bodle jabe.
        </div>
      @else
        <div>
          <label class="{{ $label }}">Paid amount (AED)</label>
          <div class="flex gap-2">
            <input type="number" step="0.01" min="0" id="paid" name="paid_amount" value="{{ old('paid_amount') }}" class="{{ $input }}">
            <button type="button" onclick="payFull()" class="h-11 px-4 shrink-0 rounded-xl border border-slate-300 dark:border-slate-700 text-sm font-semibold hover:bg-slate-100 dark:hover:bg-slate-800">Full</button>
          </div>
          <p class="text-xs text-slate-500 mt-1.5">Kom dile baki taka Due hishebe save hobe. Pore kisti te taka nite parbe.</p>
        </div>

        <div>
          <label class="{{ $label }}">Payment method <span class="text-red-500">*</span></label>
          <select name="payment_method" class="{{ $input }}">
            <option value="cash" @selected(old('payment_method', 'cash') === 'cash')>Cash</option>
            <option value="card" @selected(old('payment_method') === 'card')>Card</option>
            <option value="bank" @selected(old('payment_method') === 'bank')>Bank Transfer</option>
          </select>
        </div>
      @endif

      <div>
        <label class="{{ $label }}">Note</label>
        <input type="text" name="note" value="{{ old('note', $s?->note) }}" maxlength="255" class="{{ $input }}">
      </div>
    </div>

    <div class="p-6 lg:p-8 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800">
      <h2 class="font-bold text-lg mb-5">Summary</h2>
      <div class="space-y-3 text-sm">
        <div class="flex justify-between"><span class="text-slate-500">Grand Total (before VAT)</span><span class="font-semibold">AED <span id="subtotal">0.00</span></span></div>
        <div class="flex justify-between"><span class="text-slate-500">VAT ({{ \App\Models\Sale::VAT_RATE }}%)</span><span class="font-semibold">AED <span id="vat">0.00</span></span></div>
        <div class="flex justify-between pt-3 border-t border-slate-200 dark:border-slate-800 text-lg">
          <span class="font-bold">Net Total</span><span class="font-extrabold">AED <span id="total">0.00</span></span>
        </div>
        @if ($isEdit)
          <div class="flex justify-between pt-3 border-t border-slate-200 dark:border-slate-800">
            <span class="text-slate-500">Already paid</span><span class="font-semibold text-emerald-500">AED {{ number_format($s->paid_amount, 2) }}</span>
          </div>
        @endif
        <div class="flex justify-between {{ $isEdit ? '' : 'pt-3 border-t border-slate-200 dark:border-slate-800' }}">
          <span class="text-slate-500">Due</span><span class="font-bold text-red-500">AED <span id="due">0.00</span></span>
        </div>
        <p id="dueWarn" class="hidden text-xs text-red-500 pt-1">Due ache, kintu customer select kora nai. Customer select koro{{ $isEdit ? '' : ' ba puro taka Paid dao' }}.</p>
      </div>
    </div>
  </div>

  <div class="flex flex-wrap gap-3">
    <button type="submit" class="h-12 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">{{ $isEdit ? 'Update Sale' : 'Save Sale' }}</button>
    <a href="{{ route('admin.sales.index') }}" class="h-12 px-8 inline-flex items-center rounded-xl border border-slate-300 dark:border-slate-700 font-semibold hover:bg-slate-100 dark:hover:bg-slate-800">Cancel</a>
  </div>
</form>

{{-- ============ Notun product tatkhanik add (modal) ============ --}}
<div id="qpModal" 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-2xl 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 product</h3>
          <p class="text-xs text-slate-500">Save korle product Products e save hobe ar ei sale e boshe jabe.</p>
        </div>
        <button type="button" onclick="closeQuickProduct()" 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="{{ $label }}">Name <span class="text-red-500">*</span></label>
          <input type="text" id="qp_name" maxlength="255" class="{{ $input }}">
        </div>

        <div>
          <label class="{{ $label }}">Code</label>
          <input type="text" id="qp_code" maxlength="100" placeholder="Khali rakhle auto hobe" class="{{ $input }}">
        </div>

        <div>
          <label class="{{ $label }}">Category <span class="text-red-500">*</span></label>
          <select id="qp_category" class="{{ $input }}">
            <option value="">Choose Category</option>
            @foreach ($categories as $c)<option value="{{ $c->id }}">{{ $c->name }}</option>@endforeach
          </select>
        </div>

        <div>
          <label class="{{ $label }}">Brand</label>
          <select id="qp_brand" class="{{ $input }}">
            <option value="">Choose Brand</option>
            @foreach ($brands as $b)<option value="{{ $b->id }}">{{ $b->name }}</option>@endforeach
          </select>
        </div>

        <div>
          <label class="{{ $label }}">Unit <span class="text-red-500">*</span></label>
          <select id="qp_unit" class="{{ $input }}">
            <option value="">Choose Unit</option>
            @foreach ($units as $u)<option value="{{ $u->id }}" data-short="{{ $u->short_name }}">{{ $u->name }} ({{ $u->short_name }})</option>@endforeach
          </select>
        </div>

        <div>
          <label class="{{ $label }}">Cost (AED) <span class="text-red-500">*</span></label>
          <input type="number" id="qp_cost" step="0.01" min="0" class="{{ $input }}">
        </div>

        <div>
          <label class="{{ $label }}">Price (AED, before VAT) <span class="text-red-500">*</span></label>
          <input type="number" id="qp_price" step="0.01" min="0" class="{{ $input }}">
        </div>

        <div class="sm:col-span-2">
          <label class="{{ $label }}">Ekhon stock e koto ache <span class="text-red-500">*</span></label>
          <div class="flex items-center gap-3">
            <input type="number" id="qp_stock" step="any" min="0" class="{{ $input }}">
            <span id="qp_unitLabel" class="text-sm font-semibold text-slate-500 w-14 shrink-0"></span>
          </div>
          <p class="text-xs text-slate-500 mt-1.5">Shelf e ja ache seta likho. Ei sale er quantity er cheye kom hole becha jabe na.</p>
        </div>
      </div>

      <div id="qpErr" 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" onclick="closeQuickProduct()" 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="qpSave" onclick="saveQuickProduct()" 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 product</button>
      </div>
    </div>
  </div>
</div>

{{-- Notun customer popup --}}
@include('admin.sales._quick-customer')

@push('scripts')
<script>
  const products    = @json($products);
  const oldItems    = @json(old('items', $items ?? []));
  const IS_EDIT     = @json($isEdit);
  const PAID_SO_FAR = @json($isEdit ? (float) $s->paid_amount : 0);
  const QUICK_URL   = @json(route('admin.products.quick-store'));
  const VAT = {{ \App\Models\Sale::VAT_RATE }};
  const cls = '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';

  const paidInput   = document.getElementById('paid');          // edit e nai
  const customerSel = document.getElementById('customer');
  const walkin      = document.getElementById('walkin');
  let paidTouched = paidInput ? paidInput.value !== '' : true;  // user nijer haate likhle ar auto bodlabe na
  let index = 0;
  let currentTotal = 0;

  function money(n) {
    return (Math.round((n + Number.EPSILON) * 100) / 100).toFixed(2);
  }

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

  function findProduct(id) {
    return products.find(function (p) { return String(p.id) === String(id); });
  }

  function optionLabel(p) {
    const stock = p.stock <= 0 ? 'Out of stock' : 'Stock: ' + p.stock + (p.unit ? ' ' + p.unit : '');
    return p.name + ' (' + p.code + ') — ' + stock;
  }

  function addRow(data) {
    data = data || {};
    const i = index++;

    let options = '<option value="">Select product</option>';
    products.forEach(function (p) {
      const sel = String(data.product_id) === String(p.id) ? ' selected' : '';
      const dis = (p.stock <= 0 && sel === '') ? ' disabled' : '';
      options += '<option value="' + p.id + '"' + sel + dis + '>' + esc(optionLabel(p)) + '</option>';
    });

    const qty   = data.quantity ? esc(data.quantity) : 1;
    const price = data.unit_price !== undefined && data.unit_price !== null ? esc(data.unit_price) : '';

    const tr = document.createElement('tr');
    tr.innerHTML =
      '<td class="px-6 py-3"><select name="items[' + i + '][product_id]" class="' + cls + ' js-product">' + options + '</select></td>' +
      '<td class="pr-3"><div class="flex items-center gap-2">' +
        '<input type="number" min="0.001" step="any" name="items[' + i + '][quantity]" value="' + qty + '" class="' + cls + ' js-qty">' +
        '<span class="js-unit w-10 shrink-0 text-xs font-semibold text-slate-500"></span>' +
      '</div></td>' +
      '<td class="pr-3"><input type="number" min="0" step="0.01" name="items[' + i + '][unit_price]" value="' + price + '" class="' + cls + ' js-price"></td>' +
      '<td class="pr-3 text-right whitespace-nowrap"><span class="js-line">0.00</span></td>' +
      '<td class="pr-3 text-right whitespace-nowrap text-slate-500"><span class="js-vat">0.00</span></td>' +
      '<td class="pr-3 text-right font-semibold whitespace-nowrap"><span class="js-linetotal">0.00</span></td>' +
      '<td class="px-6 text-right"><button type="button" class="js-remove h-10 px-3 rounded-lg text-red-500 font-semibold hover:bg-red-500/10">Remove</button></td>';

    const sel      = tr.querySelector('.js-product');
    const qtyInput = tr.querySelector('.js-qty');
    const priceIn  = tr.querySelector('.js-price');
    const unitEl   = tr.querySelector('.js-unit');

    function applyProduct() {
      const p = findProduct(sel.value);
      unitEl.textContent = p ? p.unit : '';
      if (p) { qtyInput.max = p.stock; } else { qtyInput.removeAttribute('max'); }
    }

    sel.addEventListener('change', function () {
      const p = findProduct(sel.value);
      if (p) {
        priceIn.value = p.price;                 // product er becha dam auto boshe
        if (!qtyInput.value) qtyInput.value = 1;
      }
      applyProduct();
      calc();
    });
    qtyInput.addEventListener('input', calc);
    priceIn.addEventListener('input', calc);
    tr.querySelector('.js-remove').addEventListener('click', function () {
      const tbody = document.getElementById('rows');
      if (tbody.children.length > 1) { tr.remove(); calc(); }
    });

    document.getElementById('rows').appendChild(tr);

    // dam khali thakle product er dam boshao
    if (sel.value && priceIn.value === '') {
      const p = findProduct(sel.value);
      if (p) priceIn.value = p.price;
    }
    applyProduct();
    calc();
  }

  function calc() {
    let subtotal = 0;
    let vat = 0;

    document.querySelectorAll('#rows tr').forEach(function (tr) {
      const q = parseFloat(tr.querySelector('.js-qty').value) || 0;
      const p = parseFloat(tr.querySelector('.js-price').value) || 0;

      const line      = Math.round(q * p * 100) / 100;      // Amount before VAT
      const lineVat   = Math.round(line * VAT) / 100;       // prottek line er VAT
      const lineTotal = line + lineVat;

      tr.querySelector('.js-line').textContent      = money(line);
      tr.querySelector('.js-vat').textContent       = money(lineVat);
      tr.querySelector('.js-linetotal').textContent = money(lineTotal);

      subtotal += line;
      vat      += lineVat;
    });

    currentTotal = subtotal + vat;

    document.getElementById('subtotal').textContent = money(subtotal);
    document.getElementById('vat').textContent      = money(vat);
    document.getElementById('total').textContent    = money(currentTotal);

    if (paidInput && !paidTouched) {
      paidInput.value = money(currentTotal);
    }
    updateDue();
  }

  function updateDue() {
    const paid = IS_EDIT ? PAID_SO_FAR : (parseFloat(paidInput.value) || 0);
    const due  = Math.max(0, currentTotal - paid);
    document.getElementById('due').textContent = money(due);

    // Due ache kintu customer nai, tahole sotorko kori
    const warn = document.getElementById('dueWarn');
    if (due > 0.005 && customerSel.value === '') {
      warn.classList.remove('hidden');
    } else {
      warn.classList.add('hidden');
    }
  }

  function payFull() {
    paidTouched = true;
    paidInput.value = money(currentTotal);
    updateDue();
  }

  // Customer select korle walk-in er input bondho
  function toggleWalkin() {
    const hasCustomer = customerSel.value !== '';
    walkin.classList.toggle('opacity-40', hasCustomer);
    document.querySelectorAll('.js-walkin').forEach(function (el) { el.disabled = hasCustomer; });
    updateDue();
  }

  if (paidInput) {
    paidInput.addEventListener('input', function () {
      paidTouched = true;
      updateDue();
    });
  }
  customerSel.addEventListener('change', toggleWalkin);

  // ================= Notun product tatkhanik add =================
  const qpModal = document.getElementById('qpModal');
  const qpErr   = document.getElementById('qpErr');
  const qpUnit  = document.getElementById('qp_unit');

  function qv(id) { return document.getElementById(id).value; }

  function showQpError(msg) {
    qpErr.innerHTML = msg;
    qpErr.classList.remove('hidden');
  }

  qpUnit.addEventListener('change', function () {
    const opt = qpUnit.options[qpUnit.selectedIndex];
    document.getElementById('qp_unitLabel').textContent = opt && opt.dataset.short ? opt.dataset.short : '';
  });

  function openQuickProduct() {
    ['qp_name', 'qp_code', 'qp_category', 'qp_brand', 'qp_unit', 'qp_cost', 'qp_price', 'qp_stock'].forEach(function (id) {
      document.getElementById(id).value = '';
    });
    document.getElementById('qp_unitLabel').textContent = '';
    qpErr.classList.add('hidden');
    qpModal.classList.remove('hidden');
    document.getElementById('qp_name').focus();
  }

  function closeQuickProduct() {
    qpModal.classList.add('hidden');
  }

  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape' && !qpModal.classList.contains('hidden')) closeQuickProduct();
  });

  async function saveQuickProduct() {
    const btn = document.getElementById('qpSave');
    qpErr.classList.add('hidden');
    btn.disabled = true;
    btn.classList.add('opacity-60');

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

    try {
      const res = await fetch(QUICK_URL, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json',
          'X-CSRF-TOKEN': csrf
        },
        body: JSON.stringify({
          name: qv('qp_name'),
          code: qv('qp_code'),
          category_id: qv('qp_category'),
          brand_id: qv('qp_brand'),
          unit_id: qv('qp_unit'),
          cost: qv('qp_cost'),
          price: qv('qp_price'),
          stock_qty: qv('qp_stock')
        })
      });

      const data = await res.json();

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

      registerProduct(data);
      closeQuickProduct();
    } catch (e) {
      showQpError('Server e connect hocche na, abar chesta koro.');
    } finally {
      btn.disabled = false;
      btn.classList.remove('opacity-60');
    }
  }

  // Notun product ke list e jog kori ar sale er line e boshai
  function registerProduct(p) {
    products.push(p);

    // age theke thaka shob line er dropdown e notun option
    document.querySelectorAll('.js-product').forEach(function (s) {
      s.add(new Option(optionLabel(p), p.id));
    });

    // khali line thakle oitai use kori, na hole notun line
    let target = null;
    document.querySelectorAll('#rows tr').forEach(function (tr) {
      if (!target && tr.querySelector('.js-product').value === '') target = tr;
    });

    if (target) {
      const s = target.querySelector('.js-product');
      s.value = p.id;
      s.dispatchEvent(new Event('change'));
    } else {
      addRow({ product_id: p.id });
    }
  }

  // Page load: age theke thaka (edit) ba vul hoye thakle oi line gulo, na hole ekta faka line
  const oldList = Array.isArray(oldItems) ? oldItems : Object.values(oldItems);
  if (oldList.length) {
    oldList.forEach(addRow);
  } else {
    addRow();
  }
  toggleWalkin();
</script>
@endpush