@extends('layouts.admin')
@section('title','New purchase order')
@section('content')
<x-admin.page
    title="New purchase order"
    subtitle="Build a draft PO against a supplier and warehouse. Ordering posts incoming stock; receiving converts it to available."
>
    <x-slot:actions>
        <a href="{{ route('admin.purchase-orders.index') }}" class="admin-btn">
            <i data-lucide="arrow-left" class="h-3.5 w-3.5"></i>
            Purchase orders
        </a>
    </x-slot:actions>

    @if($errors->any())
        <div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">
            {{ $errors->first() }}
        </div>
    @endif

    <form method="post" action="{{ route('admin.purchase-orders.store') }}" class="space-y-5" data-po-form>
        @csrf
        <div class="grid gap-4 lg:grid-cols-3">
            <div class="rounded-xl border border-[var(--color-admin-border)] bg-white p-5 lg:col-span-2">
                <h2 class="mb-4 text-sm font-semibold text-[#202223]">Supplier & destination</h2>
                <div class="grid gap-4 sm:grid-cols-2">
                    <label class="block text-xs font-medium text-[#6d7175]">Supplier
                        <select name="supplier_id" class="admin-input mt-1 w-full">
                            <option value="">Select supplier…</option>
                            @foreach($suppliers as $supplier)
                                <option value="{{ $supplier->id }}" @selected((int) old('supplier_id') === $supplier->id)>{{ $supplier->name }}</option>
                            @endforeach
                        </select>
                    </label>
                    <label class="block text-xs font-medium text-[#6d7175]">Or supplier name
                        <input type="text" name="supplier_name" value="{{ old('supplier_name') }}" class="admin-input mt-1 w-full" placeholder="Ad-hoc supplier">
                    </label>
                    <label class="block text-xs font-medium text-[#6d7175]">Receive into
                        <select name="location_id" required class="admin-input mt-1 w-full">
                            @foreach($locations as $location)
                                <option value="{{ $location->id }}" @selected((int) old('location_id', $locations->firstWhere('is_default', true)?->id) === $location->id)>
                                    {{ $location->name }} ({{ $location->code }})
                                </option>
                            @endforeach
                        </select>
                    </label>
                    <label class="block text-xs font-medium text-[#6d7175]">Expected delivery
                        <input type="date" name="expected_at" value="{{ old('expected_at', now()->addDays(7)->toDateString()) }}" class="admin-input mt-1 w-full">
                    </label>
                    <label class="block text-xs font-medium text-[#6d7175]">Supplier reference
                        <input type="text" name="supplier_reference" value="{{ old('supplier_reference') }}" class="admin-input mt-1 w-full" placeholder="Quote / SO number">
                    </label>
                    <label class="block text-xs font-medium text-[#6d7175]">Currency
                        <input type="text" name="currency" value="{{ old('currency', 'AUD') }}" maxlength="3" class="admin-input mt-1 w-full uppercase">
                    </label>
                    <label class="block text-xs font-medium text-[#6d7175] sm:col-span-2">Notes
                        <textarea name="notes" rows="3" class="admin-input mt-1 w-full" placeholder="Lead time, freight terms, PO reference…">{{ old('notes') }}</textarea>
                    </label>
                </div>
            </div>
            <div class="rounded-xl border border-[var(--color-admin-border)] bg-white p-5">
                <h2 class="mb-2 text-sm font-semibold text-[#202223]">Estimated total</h2>
                <div class="text-3xl font-semibold tracking-tight text-[#202223]" data-po-total>AUD 0.00</div>
                <p class="mt-2 text-xs text-[#6d7175]">Updates as you edit quantities and unit costs.</p>
                <ol class="mt-4 space-y-2 text-xs text-[#6d7175]">
                    <li>1. Draft the PO with SKUs and unit costs.</li>
                    <li>2. Mark ordered — inventory incoming increases.</li>
                    <li>3. Receive — incoming converts to available.</li>
                </ol>
            </div>
        </div>

        <div class="rounded-xl border border-[var(--color-admin-border)] bg-white p-5">
            <div class="mb-4 flex items-center justify-between gap-3">
                <h2 class="text-sm font-semibold text-[#202223]">Lines</h2>
                <button type="button" class="admin-btn" data-add-line>
                    <i data-lucide="plus" class="h-3.5 w-3.5"></i>
                    Add line
                </button>
            </div>
            <div class="space-y-3" data-line-rows>
                @php $oldLines = old('lines', [['variant_id' => '', 'quantity' => 10, 'unit_cost' => ''], ['variant_id' => '', 'quantity' => 5, 'unit_cost' => '']]); @endphp
                @foreach($oldLines as $i => $line)
                    <div class="grid gap-3 lg:grid-cols-12" data-line-row>
                        <label class="block text-xs font-medium text-[#6d7175] lg:col-span-6">SKU
                            <select name="lines[{{ $i }}][variant_id]" class="admin-input mt-1 w-full" data-cost-source>
                                <option value="">Select catalog SKU…</option>
                                @foreach($catalog as $item)
                                    <option value="{{ $item['variant_id'] }}" data-cost="{{ $item['cost'] }}" @selected((string) ($line['variant_id'] ?? '') === (string) $item['variant_id'])>
                                        {{ $item['sku'] }} — {{ $item['title'] }}
                                    </option>
                                @endforeach
                            </select>
                        </label>
                        <label class="block text-xs font-medium text-[#6d7175] lg:col-span-2">Qty
                            <input type="number" name="lines[{{ $i }}][quantity]" min="1" value="{{ $line['quantity'] ?? 1 }}" class="admin-input mt-1 w-full" data-qty>
                        </label>
                        <label class="block text-xs font-medium text-[#6d7175] lg:col-span-3">Unit cost (AUD)
                            <input type="number" name="lines[{{ $i }}][unit_cost]" min="0" step="0.01" value="{{ $line['unit_cost'] ?? '' }}" class="admin-input mt-1 w-full" data-cost-input placeholder="e.g. 125.00">
                        </label>
                        <div class="flex items-end lg:col-span-1">
                            <button type="button" class="admin-btn w-full" data-remove-line aria-label="Remove line">×</button>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <button type="submit" class="admin-btn admin-btn-primary">Create draft PO</button>
    </form>
</x-admin.page>

<template id="po-line-template">
    <div class="grid gap-3 lg:grid-cols-12" data-line-row>
        <label class="block text-xs font-medium text-[#6d7175] lg:col-span-6">SKU
            <select name="lines[__i__][variant_id]" class="admin-input mt-1 w-full" data-cost-source>
                <option value="">Select catalog SKU…</option>
                @foreach($catalog as $item)
                    <option value="{{ $item['variant_id'] }}" data-cost="{{ $item['cost'] }}">{{ $item['sku'] }} — {{ $item['title'] }}</option>
                @endforeach
            </select>
        </label>
        <label class="block text-xs font-medium text-[#6d7175] lg:col-span-2">Qty
            <input type="number" name="lines[__i__][quantity]" min="1" value="1" class="admin-input mt-1 w-full" data-qty>
        </label>
        <label class="block text-xs font-medium text-[#6d7175] lg:col-span-3">Unit cost (AUD)
            <input type="number" name="lines[__i__][unit_cost]" min="0" step="0.01" class="admin-input mt-1 w-full" data-cost-input placeholder="e.g. 125.00">
        </label>
        <div class="flex items-end lg:col-span-1">
            <button type="button" class="admin-btn w-full" data-remove-line aria-label="Remove line">×</button>
        </div>
    </div>
</template>

<script>
(() => {
  const form = document.querySelector('[data-po-form]');
  const rows = document.querySelector('[data-line-rows]');
  const tpl = document.getElementById('po-line-template');
  const add = document.querySelector('[data-add-line]');
  const totalEl = document.querySelector('[data-po-total]');
  if (!rows || !tpl || !add) return;
  let i = rows.querySelectorAll('[data-line-row]').length;

  const recalc = () => {
    let total = 0;
    rows.querySelectorAll('[data-line-row]').forEach((row) => {
      const qty = Number(row.querySelector('[data-qty]')?.value || 0);
      const cost = Number(row.querySelector('[data-cost-input]')?.value || 0);
      total += qty * cost;
    });
    if (totalEl) totalEl.textContent = 'AUD ' + total.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
  };

  const bindCost = (row) => {
    const select = row.querySelector('[data-cost-source]');
    const input = row.querySelector('[data-cost-input]');
    if (!select || !input) return;
    select.addEventListener('change', () => {
      const opt = select.selectedOptions[0];
      if (opt?.dataset?.cost && !input.value) input.value = opt.dataset.cost;
      recalc();
    });
    row.querySelectorAll('[data-qty], [data-cost-input]').forEach((el) => el.addEventListener('input', recalc));
  };
  rows.querySelectorAll('[data-line-row]').forEach(bindCost);
  recalc();

  add.addEventListener('click', () => {
    const html = tpl.innerHTML.replaceAll('__i__', String(i++));
    rows.insertAdjacentHTML('beforeend', html);
    bindCost(rows.lastElementChild);
    recalc();
  });
  rows.addEventListener('click', (e) => {
    const btn = e.target.closest('[data-remove-line]');
    if (!btn) return;
    const row = btn.closest('[data-line-row]');
    if (rows.querySelectorAll('[data-line-row]').length > 1) {
      row.remove();
      recalc();
    }
  });
})();
</script>
@endsection