@extends('layouts.admin')

@section('heading', 'Create Order')
@section('subheading', 'Search a customer, add garments with measurements, then confirm payment.')

@section('content')

<!-- Customer -->
<div class="card p-5 mb-4 relative">
  <label class="block text-xs font-medium mb-1.5" style="color:#1A1625;">Customer</label>
  <div class="flex gap-3">
    <div class="flex-1 relative">
      <input type="text" id="customerSearch" placeholder="Type customer name or phone" autocomplete="off"
        class="w-full px-4 py-2.5 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
      <div id="customerResults" class="hidden absolute w-full mt-1 rounded-lg border bg-white z-20" style="border-color:#e6e1d8;"></div>
    </div>
    <button type="button" id="openAddCustomer" class="px-4 py-2.5 rounded-lg text-sm font-medium" style="background:#EEEDFE; color:#5E35B1;">+ New customer</button>
  </div>
  <p id="selectedCustomerLabel" class="text-xs mt-2" style="color:#0F6E56;"></p>
  <input type="hidden" id="selectedCustomerId">

  <!-- Quick add customer, inline -->
  <div id="quickAddCustomerBox" class="hidden mt-3 p-4 rounded-lg" style="background:#FFF9F0;">
    <div class="grid grid-cols-2 gap-3">
      <input type="text" id="newCustomerName" placeholder="Name" class="px-3 py-2 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
      <input type="text" id="newCustomerPhone" placeholder="Phone" class="px-3 py-2 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
    </div>
    <button type="button" id="saveNewCustomer" class="mt-3 px-4 py-2 rounded-lg text-xs font-medium text-white" style="background:#C2185B;">Save customer</button>
  </div>

  <!-- Clone measurements from a previous order -->
  <div id="cloneBox" class="hidden mt-3 p-4 rounded-lg" style="background:#EEEDFE;">
    <p class="text-xs font-medium mb-2" style="color:#5E35B1;">Clone measurements from a previous order</p>
    <div class="grid grid-cols-2 gap-3">
      <select id="cloneOrderSelect" class="px-3 py-2 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
        <option value="">Select past order</option>
      </select>
      <select id="cloneItemSelect" class="px-3 py-2 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;" disabled>
        <option value="">Select garment</option>
      </select>
    </div>
    <button type="button" id="cloneMeasurementsBtn" class="mt-3 px-4 py-2 rounded-lg text-xs font-medium text-white" style="background:#5E35B1;" disabled>
      Clone measurements into form
    </button>
  </div>
</div>

<!-- Garment + dynamic measurements -->
<div class="card p-5 mb-4">
  <p class="text-xs font-medium mb-3" style="color:#1A1625;">Add a garment</p>

  <div class="grid grid-cols-4 gap-3 mb-4">
    <div>
      <label class="block text-xs mb-1" style="color:#6b6470;">Garment</label>
      <select id="garmentSelect" class="w-full px-3 py-2 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
        <option value="">Select</option>
        @foreach($garments as $g)
          <option value="{{ $g->id }}">{{ $g->name }}{{ $g->name_ta ? ' / '.$g->name_ta : '' }}</option>
        @endforeach
      </select>
    </div>
    <div>
      <label class="block text-xs mb-1" style="color:#6b6470;">Age type</label>
        <select id="ageType" class="w-full px-3 py-2 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
    <option value="">Select</option>
    @foreach($ageTypes as $ageType)
        <option value="{{ $ageType->id }}">{{ $ageType->name }}{{ $ageType->name_ta ? ' / '.$ageType->name_ta : '' }}</option>
    @endforeach
    </select>
    </div>
    <div>
      <label class="block text-xs mb-1" style="color:#6b6470;">Qty</label>
      <input type="number" id="qty" value="1" min="1" class="w-full px-3 py-2 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
    </div>
    <div>
      <label class="block text-xs mb-1" style="color:#6b6470;">Unit price ₹</label>
      <input type="number" id="unitPrice" value="0" min="0" class="w-full px-3 py-2 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
    </div>
  </div>

  <div id="measurementArea" class="grid grid-cols-4 gap-3 mb-4"></div>

  <div id="addonArea" class="mb-4"></div>

  <div class="mb-4">
    <label class="block text-xs mb-1" style="color:#6b6470;">Notes</label>
    <input type="text" id="itemNotes" placeholder="Any special instructions"
      class="w-full px-3 py-2 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
  </div>

  <button type="button" id="addGarmentBtn" class="px-4 py-2 rounded-lg text-sm font-medium text-white" style="background:#5E35B1;">+ Add garment to order</button>
</div>

<!-- Cart table -->
<div class="card p-5 mb-4">
  <p class="text-xs font-medium mb-3" style="color:#1A1625;">Garments in this order</p>
  <table class="w-full text-sm">
    <thead>
      <tr class="text-left" style="color:#a19a8f;">
        <th class="pb-2 font-medium text-xs">Garment</th>
        <th class="pb-2 font-medium text-xs">Age</th>
        <th class="pb-2 font-medium text-xs">Qty</th>
        <th class="pb-2 font-medium text-xs text-right">Unit ₹</th>
        <th class="pb-2 font-medium text-xs text-right">Addons ₹</th>
        <th class="pb-2 font-medium text-xs text-right">Total ₹</th>
        <th class="pb-2 font-medium text-xs text-right">Remove</th>
      </tr>
    </thead>
    <tbody id="cartBody" style="color:#1A1625;">
      <tr id="cartEmptyRow"><td colspan="7" class="py-4 text-center text-sm" style="color:#a19a8f;">No garments added yet.</td></tr>
    </tbody>
  </table>
</div>

<!-- Payment & delivery -->
<div class="card p-5">
  <p class="text-xs font-medium mb-3" style="color:#1A1625;">Payment & delivery</p>
  <div class="grid grid-cols-3 gap-3 mb-4">
    <div>
      <label class="block text-xs mb-1" style="color:#6b6470;">Discount ₹</label>
      <input type="number" id="discount" value="0" min="0" class="w-full px-3 py-2 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
    </div>
    <div>
      <label class="block text-xs mb-1" style="color:#6b6470;">Extra charge ₹ <span class="opacity-60">(optional)</span></label>
      <input type="number" id="extraAmount" value="0" min="0" class="w-full px-3 py-2 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
    </div>
    <div>
      <label class="block text-xs mb-1" style="color:#6b6470;">Extra charge reason</label>
      <input type="text" id="extraAmountReason" placeholder="e.g. rush order" class="w-full px-3 py-2 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
    </div>
    <div>
      <label class="block text-xs mb-1" style="color:#6b6470;">Total order ₹</label>
      <input type="text" id="finalAmount" value="0" readonly class="w-full px-3 py-2 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8; background:#f7f4ec;">
    </div>
    <div>
      <label class="block text-xs mb-1" style="color:#6b6470;">Advance paid ₹</label>
      <input type="number" id="advanceAmount" value="0" min="0" class="w-full px-3 py-2 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
    </div>
    <div>
      <label class="block text-xs mb-1" style="color:#6b6470;">Balance ₹</label>
      <input type="text" id="balanceAmount" value="0" readonly class="w-full px-3 py-2 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8; background:#f7f4ec;">
    </div>
  </div>
  <div class="mb-4">
    <label class="block text-xs mb-1" style="color:#6b6470;">Delivery date</label>
    <input type="date" id="deliveryDate" class="px-3 py-2 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
  </div>

  <p id="formError" class="hidden text-sm mb-3 rounded-lg px-4 py-2" style="background:#FCEBEB; color:#791F1F;"></p>

  <button type="button" id="submitOrderBtn" class="px-5 py-2.5 rounded-lg text-sm font-medium text-white" style="background:#C2185B;">✅ Submit Order</button>
</div>

@endsection

@push('scripts')
<script>
let selectedCustomerId = null;
let currentGarmentFields = [];
let orderItems = [];

// ---------- route templates (fix: previously hardcoded "/orders/..." paths
// broke when the app is served from a subfolder, e.g. /etailorz-v2/public/orders/...
// These use Laravel's route() helper with a placeholder token that gets
// swapped for the real id in JS, so they always resolve to the correct base path.) ----------
const fieldsUrlTemplate       = "{{ route('orders.garments.fields', ['garmentType' => 'GID']) }}";
const addonsUrlTemplate       = "{{ route('orders.garments.addons', ['garmentType' => 'GID']) }}";
const priceUrlTemplate        = "{{ route('orders.garments.price', ['garmentType' => 'GID']) }}";
const customerOrdersTemplate  = "{{ route('orders.customers.orders', ['customer' => 'CID']) }}";
const measurementsTemplate    = "{{ route('orders.items.measurements', ['orderItem' => 'OID']) }}";

// ---------- measurement suggestions (whole + quarter-inch fractions) ----------
function buildMeasurementSuggestions() {
  const values = [];
  for (let i = 1; i <= 60; i++) {
    values.push(`${i}`);
    values.push(`${i} 1/4`);
    values.push(`${i} 1/2`);
    values.push(`${i} 3/4`);
  }
  return values;
}
const measurementSuggestions = buildMeasurementSuggestions();

// ---------- customer search ----------
const customerSearch = document.getElementById('customerSearch');
const customerResults = document.getElementById('customerResults');
let searchTimer;

customerSearch.addEventListener('input', function () {
  clearTimeout(searchTimer);
  const q = this.value.trim();
  if (q.length < 2) { customerResults.classList.add('hidden'); return; }

  searchTimer = setTimeout(() => {
    fetch(`{{ route('orders.customers.search') }}?q=${encodeURIComponent(q)}`)
      .then(r => r.json())
      .then(data => {
        customerResults.innerHTML = '';
        if (!data.length) { customerResults.classList.add('hidden'); return; }
        data.forEach(c => {
          const div = document.createElement('div');
          div.className = 'px-3 py-2 text-sm cursor-pointer hover:bg-gray-50';
          div.textContent = c.name + (c.phone ? ' — ' + c.phone : '');
          div.onclick = () => selectCustomer(c);
          customerResults.appendChild(div);
        });
        customerResults.classList.remove('hidden');
      });
  }, 250);
});

function selectCustomer(c) {
  selectedCustomerId = c.id;
  document.getElementById('selectedCustomerId').value = c.id;
  document.getElementById('selectedCustomerLabel').textContent = '✓ ' + c.name + (c.phone ? ' — ' + c.phone : '');
  customerSearch.value = c.name;
  customerResults.classList.add('hidden');
  loadCustomerOrdersForClone(c.id);
}

let customerPastOrders = [];

function loadCustomerOrdersForClone(customerId) {
  const cloneBox = document.getElementById('cloneBox');
  const orderSelect = document.getElementById('cloneOrderSelect');
  const itemSelect = document.getElementById('cloneItemSelect');
  const cloneBtn = document.getElementById('cloneMeasurementsBtn');

  orderSelect.innerHTML = '<option value="">Select past order</option>';
  itemSelect.innerHTML = '<option value="">Select garment</option>';
  itemSelect.disabled = true;
  cloneBtn.disabled = true;
  cloneBox.classList.add('hidden');

  fetch(customerOrdersTemplate.replace('CID', customerId))
    .then(r => r.json())
    .then(orders => {
      customerPastOrders = orders;
      if (!orders.length) return;

      orders.forEach(o => {
        if (!o.items.length) return;
        const opt = document.createElement('option');
        opt.value = o.id;
        opt.textContent = `Order #${o.id} — ${o.date} (${o.items.length} garment${o.items.length > 1 ? 's' : ''})`;
        orderSelect.appendChild(opt);
      });
      cloneBox.classList.remove('hidden');
    });
}

document.getElementById('cloneOrderSelect').addEventListener('change', function () {
  const itemSelect = document.getElementById('cloneItemSelect');
  const cloneBtn = document.getElementById('cloneMeasurementsBtn');
  itemSelect.innerHTML = '<option value="">Select garment</option>';
  cloneBtn.disabled = true;

  const order = customerPastOrders.find(o => o.id == this.value);
  if (!order) { itemSelect.disabled = true; return; }

  order.items.forEach(item => {
    const opt = document.createElement('option');
    opt.value = item.id;
    opt.dataset.garmentTypeId = item.garment_type_id;
    opt.textContent = item.garment_label;
    itemSelect.appendChild(opt);
  });
  itemSelect.disabled = false;
});

document.getElementById('cloneItemSelect').addEventListener('change', function () {
  document.getElementById('cloneMeasurementsBtn').disabled = !this.value;
});

document.getElementById('cloneMeasurementsBtn').addEventListener('click', function () {
  const itemSelect = document.getElementById('cloneItemSelect');
  const orderItemId = itemSelect.value;
  const garmentTypeId = itemSelect.options[itemSelect.selectedIndex].dataset.garmentTypeId;
  if (!orderItemId || !garmentTypeId) return;

  const garmentSelect = document.getElementById('garmentSelect');
  garmentSelect.value = garmentTypeId;
  fetchAndSetPrice();

  loadGarmentFieldsAndAddons(garmentTypeId).then(() => {
    fetch(measurementsTemplate.replace('OID', orderItemId))
      .then(r => r.json())
      .then(data => {
        const measurements = data.measurements || {};

        // text inputs
        document.querySelectorAll('.measurement-input').forEach(input => {
          const val = measurements[input.dataset.fieldId];
          if (val !== undefined && val !== null) input.value = val;
        });

        // dropdowns (single select)
        document.querySelectorAll('.measurement-select').forEach(select => {
          const val = measurements[select.dataset.fieldId];
          if (val !== undefined && val !== null) select.value = val;
        });

        // bullet/radio (single select)
        document.querySelectorAll('.measurement-radio').forEach(radio => {
          const val = measurements[radio.dataset.fieldId];
          if (val !== undefined && val !== null && radio.value === val) radio.checked = true;
        });

        // checkboxes (multi select) — saved as comma-joined string, split it back
        document.querySelectorAll('.measurement-checkbox').forEach(cb => {
          const val = measurements[cb.dataset.fieldId];
          if (val !== undefined && val !== null) {
            const savedValues = String(val).split(',').map(v => v.trim());
            if (savedValues.includes(cb.value)) cb.checked = true;
          }
        });
      });
  });
});

document.getElementById('openAddCustomer').addEventListener('click', () => {
  document.getElementById('quickAddCustomerBox').classList.toggle('hidden');
});

document.getElementById('saveNewCustomer').addEventListener('click', () => {
  const name = document.getElementById('newCustomerName').value.trim();
  const phone = document.getElementById('newCustomerPhone').value.trim();
  if (!name) { alert('Name required'); return; }

  fetch("{{ route('orders.customers.quickAdd') }}", {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
    body: JSON.stringify({ name, phone }),
  })
    .then(r => r.json())
    .then(c => {
      selectCustomer(c);
      document.getElementById('quickAddCustomerBox').classList.add('hidden');
    });
});

// ---------- dynamic measurement fields + addons + price ----------
document.getElementById('garmentSelect').addEventListener('change', function () {
  if (this.value) {
    loadGarmentFieldsAndAddons(this.value);
    fetchAndSetPrice();
  } else {
    document.getElementById('measurementArea').innerHTML = '';
    document.getElementById('addonArea').innerHTML = '';
    currentGarmentFields = [];
  }
});

document.getElementById('ageType').addEventListener('change', fetchAndSetPrice);

function fetchAndSetPrice() {
  const garmentId = document.getElementById('garmentSelect').value;
  const ageTypeId = document.getElementById('ageType').value;
  if (!garmentId || !ageTypeId) return;

  fetch(priceUrlTemplate.replace('GID', garmentId) + `?age_type_id=${ageTypeId}`)
    .then(r => r.json())
    .then(data => {
      document.getElementById('unitPrice').value = data.price;
    });
}

function loadGarmentFieldsAndAddons(garmentTypeId) {
  const area = document.getElementById('measurementArea');
  const addonArea = document.getElementById('addonArea');
  area.innerHTML = '';
  addonArea.innerHTML = '';
  currentGarmentFields = [];

  const fieldsPromise = fetch(fieldsUrlTemplate.replace('GID', garmentTypeId))
    .then(r => r.json())
    .then(fields => {
      currentGarmentFields = fields;
      fields.forEach(f => {
        const wrap = document.createElement('div');
        wrap.className = 'relative';

        if (f.field_type === 'select') {
          // Dropdown — single select
          let optionsHtml = '<option value="">Select</option>';
          (f.options || []).forEach(opt => {
            optionsHtml += `<option value="${opt}">${opt}</option>`;
          });
          wrap.innerHTML = `
            <label class="block text-xs mb-1" style="color:#6b6470;">${f.label}${f.is_required ? ' *' : ''}</label>
            <select data-field-id="${f.id}" class="measurement-select w-full px-3 py-2 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
              ${optionsHtml}
            </select>
          `;

        } else if (f.field_type === 'radio') {
          // Bullet — single select shown as radio buttons
          let radiosHtml = '';
          (f.options || []).forEach(opt => {
            radiosHtml += `
              <label class="flex items-center gap-1.5 text-xs cursor-pointer">
                <input type="radio" name="field_radio_${f.id}" value="${opt}" data-field-id="${f.id}" class="measurement-radio" style="accent-color:#C2185B;">
                ${opt}
              </label>
            `;
          });
          wrap.innerHTML = `
            <label class="block text-xs mb-1" style="color:#6b6470;">${f.label}${f.is_required ? ' *' : ''}</label>
            <div class="flex flex-wrap gap-3 px-1 py-1.5">${radiosHtml}</div>
          `;

        } else if (f.field_type === 'checkbox') {
          // Checkbox — multi select
          let checksHtml = '';
          (f.options || []).forEach(opt => {
            checksHtml += `
              <label class="flex items-center gap-1.5 text-xs cursor-pointer">
                <input type="checkbox" value="${opt}" data-field-id="${f.id}" class="measurement-checkbox" style="accent-color:#C2185B;">
                ${opt}
              </label>
            `;
          });
          wrap.innerHTML = `
            <label class="block text-xs mb-1" style="color:#6b6470;">${f.label}${f.is_required ? ' *' : ''}</label>
            <div class="flex flex-wrap gap-3 px-1 py-1.5">${checksHtml}</div>
          `;

        } else {
          // Text input (default) — with suggestions
          wrap.innerHTML = `
            <label class="block text-xs mb-1" style="color:#6b6470;">${f.label} (${f.unit})${f.is_required ? ' *' : ''}</label>
            <input type="text" inputmode="text" autocomplete="off" placeholder="e.g. 32 or 32 1/4"
              data-field-id="${f.id}"
              class="measurement-input w-full px-3 py-2 rounded-lg border text-sm outline-none"
              style="border-color:#e6e1d8;">
            <div class="measurement-suggestions hidden absolute w-full mt-1 rounded-lg border bg-white z-30 max-h-40 overflow-y-auto" style="border-color:#e6e1d8;"></div>
          `;
        }

        area.appendChild(wrap);

        // Suggestions only apply to text inputs
        const input = wrap.querySelector('.measurement-input');
        if (input) {
          const suggestBox = wrap.querySelector('.measurement-suggestions');

          input.addEventListener('input', function () {
            const val = this.value.trim();
            suggestBox.innerHTML = '';
            if (!val) { suggestBox.classList.add('hidden'); return; }

            const matches = measurementSuggestions
              .filter(s => s.startsWith(val))
              .slice(0, 8);

            if (!matches.length) { suggestBox.classList.add('hidden'); return; }

            matches.forEach(m => {
              const item = document.createElement('div');
              item.className = 'px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50';
              item.textContent = m;
              item.onclick = () => {
                input.value = m;
                suggestBox.classList.add('hidden');
              };
              suggestBox.appendChild(item);
            });
            suggestBox.classList.remove('hidden');
          });

          input.addEventListener('blur', () => {
            setTimeout(() => suggestBox.classList.add('hidden'), 150);
          });
        }
      });
    });

  fetch(addonsUrlTemplate.replace('GID', garmentTypeId))
    .then(r => r.json())
    .then(addons => {
      if (!addons.length) return;
      const label = document.createElement('label');
      label.className = 'block text-xs font-medium mb-2';
      label.style.color = '#1A1625';
      label.textContent = 'Addons';
      addonArea.appendChild(label);

      const wrap = document.createElement('div');
      wrap.className = 'flex flex-wrap gap-2';
      addons.forEach(a => {
        const chip = document.createElement('label');
        chip.className = 'flex items-center gap-2 text-xs px-3 py-2 rounded-lg cursor-pointer';
        chip.style.background = '#FFF9F0';
        chip.innerHTML = `
          <input type="checkbox" class="addon-checkbox" value="${a.id}" data-price="${a.price}" style="accent-color:#C2185B;">
          ${a.name}${a.name_ta ? ' / ' + a.name_ta : ''} — ₹${a.price}
        `;
        wrap.appendChild(chip);
      });
      addonArea.appendChild(wrap);
    });

  return fieldsPromise;
}

// ---------- add garment to cart ----------
document.getElementById('addGarmentBtn').addEventListener('click', function () {
  const garmentSelect = document.getElementById('garmentSelect');
  if (!garmentSelect.value) { alert('Select a garment first'); return; }

  const qty = Number(document.getElementById('qty').value || 1);
  const unitPrice = Number(document.getElementById('unitPrice').value || 0);

  const selectedAddons = [];
  let addonTotal = 0;
  document.querySelectorAll('.addon-checkbox:checked').forEach(cb => {
    selectedAddons.push(Number(cb.value));
    addonTotal += Number(cb.dataset.price || 0);
  });

  const totalAmount = (unitPrice * qty) + addonTotal;

  const measurements = {};

  // text inputs
  document.querySelectorAll('.measurement-input').forEach(input => {
    measurements[input.dataset.fieldId] = input.value;
  });

  // dropdowns (single select)
  document.querySelectorAll('.measurement-select').forEach(select => {
    measurements[select.dataset.fieldId] = select.value;
  });

  // bullet/radio (single select)
  document.querySelectorAll('.measurement-radio:checked').forEach(radio => {
    measurements[radio.dataset.fieldId] = radio.value;
  });

  // checkboxes (multi select) — group all checked values per field into one comma string
  const checkboxGroups = {};
  document.querySelectorAll('.measurement-checkbox:checked').forEach(cb => {
    const fid = cb.dataset.fieldId;
    if (!checkboxGroups[fid]) checkboxGroups[fid] = [];
    checkboxGroups[fid].push(cb.value);
  });
  Object.keys(checkboxGroups).forEach(fid => {
    measurements[fid] = checkboxGroups[fid].join(', ');
  });

  const ageTypeSelect = document.getElementById('ageType');
  orderItems.push({
    garment_type_id: garmentSelect.value,
    garment_label: garmentSelect.options[garmentSelect.selectedIndex].text,
    age_type_id: ageTypeSelect.value || null,
    age_type_label: ageTypeSelect.value ? ageTypeSelect.options[ageTypeSelect.selectedIndex].text : '—',
    qty, unit_price: unitPrice, addon_total: addonTotal, total_amount: totalAmount,
    addons: selectedAddons,
    measurements,
    notes: document.getElementById('itemNotes').value,
  });

  renderCart();

  garmentSelect.value = '';
  document.getElementById('measurementArea').innerHTML = '';
  document.getElementById('addonArea').innerHTML = '';
  document.getElementById('qty').value = 1;
  document.getElementById('unitPrice').value = 0;
  document.getElementById('itemNotes').value = '';
  document.querySelectorAll('.addon-checkbox').forEach(cb => cb.checked = false);
});

function renderCart() {
  const body = document.getElementById('cartBody');
  body.innerHTML = '';

  if (!orderItems.length) {
    body.innerHTML = '<tr id="cartEmptyRow"><td colspan="7" class="py-4 text-center text-sm" style="color:#a19a8f;">No garments added yet.</td></tr>';
    updateTotals();
    return;
  }

  orderItems.forEach((item, i) => {
    const tr = document.createElement('tr');
    tr.className = 'border-t';
    tr.style.borderColor = '#f2ece0';
    tr.innerHTML = `
      <td class="py-2">${item.garment_label}</td>
      <td class="py-2">${item.age_type_label || '—'}</td>
      <td class="py-2">${item.qty}</td>
      <td class="py-2 text-right">₹${item.unit_price}</td>
      <td class="py-2 text-right">₹${item.addon_total}</td>
      <td class="py-2 text-right font-medium">₹${item.total_amount}</td>
      <td class="py-2 text-right"><button type="button" onclick="removeItem(${i})" class="text-xs font-medium" style="color:#C2185B;">✕</button></td>
    `;
    body.appendChild(tr);
  });

  updateTotals();
}

function removeItem(i) {
  orderItems.splice(i, 1);
  renderCart();
}

// ---------- totals ----------
['discount', 'advanceAmount', 'extraAmount'].forEach(id => {
  document.getElementById(id).addEventListener('input', updateTotals);
});

function updateTotals() {
  const itemsTotal = orderItems.reduce((sum, i) => sum + Number(i.total_amount || 0), 0);
  const discount = Number(document.getElementById('discount').value || 0);
  const extra = Number(document.getElementById('extraAmount').value || 0);
  const advance = Number(document.getElementById('advanceAmount').value || 0);
  const final = Math.max(itemsTotal - discount + extra, 0);
  const balance = Math.max(final - advance, 0);

  document.getElementById('finalAmount').value = final;
  document.getElementById('balanceAmount').value = balance;
}

// ---------- submit ----------
document.getElementById('submitOrderBtn').addEventListener('click', function () {
  const errorBox = document.getElementById('formError');
  errorBox.classList.add('hidden');

  if (!selectedCustomerId) { showError('Please select or add a customer.'); return; }
  if (!orderItems.length) { showError('Add at least one garment.'); return; }

  const payload = {
    customer_id: selectedCustomerId,
    discount: document.getElementById('discount').value || 0,
    extra_amount: document.getElementById('extraAmount').value || 0,
    extra_amount_reason: document.getElementById('extraAmountReason').value || null,
    advance_amount: document.getElementById('advanceAmount').value || 0,
    delivery_date: document.getElementById('deliveryDate').value || null,
    items: orderItems,
  };

  fetch("{{ route('orders.store') }}", {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
    body: JSON.stringify(payload),
  })
    .then(r => r.json())
    .then(data => {
      if (data.redirect) window.location.href = data.redirect;
    })
    .catch(() => showError('Something went wrong. Please try again.'));
});

function showError(msg) {
  const box = document.getElementById('formError');
  box.textContent = msg;
  box.classList.remove('hidden');
}
</script>
@endpush