@extends('layouts.admin')
@section('title', 'Create Purchase')

@section('content')
@php
  $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';
@endphp

{{-- Breadcrumb --}}
<div class="flex items-center gap-2 text-sm text-slate-500">
  <a href="{{ route('admin.purchases.index') }}" class="hover:text-brand-500">All Purchases</a><span>/</span><span class="text-slate-800 dark:text-slate-200 font-medium">Create purchase</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="{{ route('admin.purchases.store') }}" class="space-y-6" onkeydown="if (event.key === 'Enter' && event.target.id === 'search') event.preventDefault();">
  @csrf

  {{-- Date + Supplier + invoice no --}}
  <div class="p-6 lg:p-8 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800">
    <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', now()->format('Y-m-d')) }}" class="{{ $input }}">
      </div>

      <div>
        <label class="{{ $label }}">Supplier <span class="text-red-500">*</span></label>
        <select name="supplier_id" class="{{ $input }}">
          <option value="">Choose Supplier</option>
          @foreach ($suppliers as $s)
            <option value="{{ $s->id }}" @selected(old('supplier_id') == $s->id)>{{ $s->name }}@if ($s->city) — {{ $s->city }}@endif</option>
          @endforeach
        </select>
        <p class="text-xs text-slate-500 mt-1.5">
          <a href="{{ route('admin.suppliers.create') }}" target="_blank" class="text-brand-600 dark:text-brand-400 font-semibold">+ New Supplier</a>
          (after adding, refresh this page)
        </p>
      </div>

      <div>
        <label class="{{ $label }}">Supplier invoice no</label>
        <input type="text" name="supplier_invoice_no" value="{{ old('supplier_invoice_no') }}" maxlength="100" placeholder="Supplier's bill number" class="{{ $input }}">
      </div>
    </div>
  </div>

  {{-- Product search + table --}}
  <div class="rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800">
    <div class="p-6 pb-4">
      <div class="relative">
        <input type="text" id="search" autocomplete="off" placeholder="Search Product by Code Or Name"
               class="w-full h-14 px-5 rounded-2xl bg-slate-100 dark:bg-slate-800 border border-transparent text-base outline-none focus:ring-2 ring-brand-500">
        <div id="results" class="hidden absolute z-20 left-0 right-0 mt-2 max-h-72 overflow-auto rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 shadow-xl"></div>
      </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-600 dark:text-slate-300 bg-slate-100 dark:bg-slate-800">
          <tr>
            <th class="px-6 py-3.5">Product</th>
            <th class="w-40">Net Unit Cost</th>
            <th class="w-32">Current Stock</th>
            <th class="w-32">Qty</th>
            <th class="w-24">Unit</th>
            <th class="w-32">Discount</th>
            <th class="w-28 text-right pr-3">Tax</th>
            <th class="w-32 text-right pr-3">Subtotal</th>
            <th class="px-6 w-20"></th>
          </tr>
        </thead>
        <tbody id="rows" class="divide-y divide-slate-100 dark:divide-slate-800">
          <tr id="emptyRow">
              <td colspan="9" class="px-6 py-14 text-center text-slate-500">Search above to add products.</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  {{-- Payment + summary --}}
  <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">Payment &amp; tax</h2>

      <div class="grid sm:grid-cols-2 gap-5">
        <div>
          <label class="{{ $label }}">Tax / VAT (%)</label>
          <input type="number" step="0.01" min="0" max="100" id="vat_rate" name="vat_rate" value="{{ old('vat_rate', \App\Models\Purchase::DEFAULT_VAT_RATE) }}" class="{{ $input }}">
          <p class="text-xs text-slate-500 mt-1.5"> Enter 0 if the supplier does not charge VAT.</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>
      </div>

      <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">If less than the total, the remainder stays as the amount due to the supplier.</p>
      </div>

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

      <label class="flex items-start gap-3 text-sm">
        <input type="checkbox" name="update_cost" value="1" @checked(old('update_cost', true)) class="mt-0.5 w-4 h-4 accent-amber-500">
        
        <span>Update the product's <b>cost</b> with this new Net Unit Cost</span>
      </label>
    </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">Subtotal (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">Tax</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">Grand Total</span><span class="font-extrabold">AED <span id="total">0.00</span></span>
        </div>
        <div class="flex justify-between pt-3 border-t border-slate-200 dark:border-slate-800">
          <span class="text-slate-500">Due to supplier</span><span class="font-bold text-red-500">AED <span id="due">0.00</span></span>
        </div>
      </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">Save Purchase</button>
    <a href="{{ route('admin.purchases.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>
@endsection

@push('scripts')
<script>
  const products = @json($products);
  const oldItems = @json(old('items', []));
  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 rowsEl    = document.getElementById('rows');
  const emptyRow  = document.getElementById('emptyRow');
  const search    = document.getElementById('search');
  const results   = document.getElementById('results');
  const rateInput = document.getElementById('vat_rate');
  const paidInput = document.getElementById('paid');

  let paidTouched = paidInput.value !== '';   // 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); });
  }

  // ---------- Product search ----------
  function renderResults() {
    const q = search.value.trim().toLowerCase();
    if (!q) { results.classList.add('hidden'); results.innerHTML = ''; return; }

    const found = products.filter(function (p) {
      return p.name.toLowerCase().includes(q) || String(p.code).toLowerCase().includes(q);
    }).slice(0, 8);

    if (!found.length) {
      results.innerHTML = '<div class="px-4 py-3 text-sm text-slate-500">No products found.</div>';
    } else {
      results.innerHTML = found.map(function (p) {
        return '<button type="button" data-id="' + p.id + '" class="js-pick w-full text-left px-4 py-3 hover:bg-slate-100 dark:hover:bg-slate-700 flex items-center justify-between gap-4">' +
                 '<span><span class="font-semibold">' + esc(p.name) + '</span> <span class="text-xs text-slate-500">' + esc(p.code) + '</span></span>' +
                 '<span class="text-xs text-slate-500">Stock: ' + p.stock + ' ' + esc(p.unit) + '</span>' +
               '</button>';
      }).join('');
    }
    results.classList.remove('hidden');
  }

  search.addEventListener('input', renderResults);
  search.addEventListener('focus', renderResults);

  search.addEventListener('keydown', function (e) {
    if (e.key === 'Enter') {
      const first = results.querySelector('.js-pick');
      if (first) { pickProduct(first.dataset.id); }
    }
  });

  // mousedown dile input blur hoye list lukiye jay na
  results.addEventListener('mousedown', function (e) {
    const btn = e.target.closest('.js-pick');
    if (btn) { e.preventDefault(); pickProduct(btn.dataset.id); }
  });

  document.addEventListener('click', function (e) {
    if (!e.target.closest('#search') && !e.target.closest('#results')) {
      results.classList.add('hidden');
    }
  });

  function pickProduct(id) {
    const p = findProduct(id);
    if (!p) return;

    // Age thekei table e thakle quantity 1 barao
    const existing = rowsEl.querySelector('tr[data-pid="' + p.id + '"]');
    if (existing) {
      const q = existing.querySelector('.js-qty');
      q.value = Math.round(((parseFloat(q.value) || 0) + 1) * 1000) / 1000;
      calc();
    } else {
      addRow(p, {});
    }

    search.value = '';
    results.classList.add('hidden');
    results.innerHTML = '';
    search.focus();
  }

  // ---------- Table rows ----------
  function addRow(p, data) {
    const i = index++;

    const cost = data.unit_cost !== undefined && data.unit_cost !== null ? data.unit_cost : p.cost;
    const qty  = data.quantity ? data.quantity : 1;
    const disc = data.discount ? data.discount : 0;

    const tr = document.createElement('tr');
    tr.dataset.pid = p.id;
    tr.innerHTML =
      '<td class="px-6 py-3">' +
        '<input type="hidden" name="items[' + i + '][product_id]" value="' + p.id + '">' +
        '<div class="font-semibold">' + esc(p.name) + '</div><div class="text-xs text-slate-500">' + esc(p.code) + '</div>' +
      '</td>' +
      '<td class="pr-3"><input type="number" min="0" step="0.01" name="items[' + i + '][unit_cost]" value="' + esc(cost) + '" class="' + cls + ' js-cost"></td>' +
      '<td class="pr-3 text-slate-500 whitespace-nowrap">' + p.stock + ' ' + esc(p.unit) + '</td>' +
            '<td class="pr-3"><input type="number" min="0.001" step="any" name="items[' + i + '][quantity]" value="' + esc(qty) + '" class="' + cls + ' js-qty"></td>' +
      '<td class="pr-3 whitespace-nowrap font-semibold text-slate-600 dark:text-slate-300">' + (esc(p.unit) || '—') + '</td>'  +
      '<td class="pr-3"><input type="number" min="0" step="0.01" name="items[' + i + '][discount]" value="' + esc(disc) + '" class="' + cls + ' js-disc"></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-sub">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">✕</button></td>';

    tr.querySelector('.js-cost').addEventListener('input', calc);
    tr.querySelector('.js-qty').addEventListener('input', calc);
    tr.querySelector('.js-disc').addEventListener('input', calc);
    tr.querySelector('.js-remove').addEventListener('click', function () { tr.remove(); calc(); });

    rowsEl.appendChild(tr);
    calc();
  }

  function calc() {
    const rate = parseFloat(rateInput.value) || 0;
    let subtotal = 0;
    let vat = 0;
    let count = 0;

    rowsEl.querySelectorAll('tr[data-pid]').forEach(function (tr) {
      count++;
      const cost = parseFloat(tr.querySelector('.js-cost').value) || 0;
      const qty  = parseFloat(tr.querySelector('.js-qty').value) || 0;
      const disc = parseFloat(tr.querySelector('.js-disc').value) || 0;

      const gross = Math.round(cost * qty * 100) / 100;
      const net   = Math.max(0, Math.round((gross - disc) * 100) / 100);
      const lv    = Math.round(net * rate) / 100;          // ei line er Tax

      tr.querySelector('.js-vat').textContent = money(lv);
      tr.querySelector('.js-sub').textContent = money(net + lv);

      subtotal += net;
      vat      += lv;
    });

    emptyRow.classList.toggle('hidden', count > 0);

    const total = subtotal + vat;
    currentTotal = total;

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

    if (!paidTouched) {
      paidInput.value = count ? money(total) : '';
    }
    updateDue();
  }

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

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

  paidInput.addEventListener('input', function () {
    paidTouched = true;
    updateDue();
  });
  rateInput.addEventListener('input', calc);

  // Page load: age vul hoye thakle oi line gulo fire ashbe
  const oldList = Array.isArray(oldItems) ? oldItems : Object.values(oldItems);
  oldList.forEach(function (row) {
    const p = findProduct(row.product_id);
    if (p) addRow(p, row);
  });
  calc();
</script>
@endpush