@extends('layouts.admin')
@section('title', __('New purchase order'))
@section('content')
<h1 class="mb-6 text-2xl font-extrabold text-primary">{{ __('New purchase order') }}</h1>
@if (!$suppliers || !$warehouses)
    <p class="rounded-2xl bg-accent-container px-5 py-3 text-sm font-semibold text-on-accent-container">{{ __('Add at least one supplier and one warehouse first (menu: Suppliers, Warehouses).') }}</p>
@else
<form method="POST" action="{{ route('admin.purchases.store') }}" class="space-y-6">@csrf
    <section class="grid gap-4 rounded-[32px] border border-surface-variant bg-white p-6 sm:grid-cols-3">
        <div><label class="mb-1.5 block text-sm font-semibold text-on-surface-variant" for="supplier_id">{{ __('Supplier') }}</label><select id="supplier_id" name="supplier_id" required class="min-h-[48px] w-full rounded-2xl border border-outline-variant bg-white px-4">@foreach ($suppliers as $s)<option value="{{ $s->id }}" @selected((string) old('supplier_id') === (string) $s->id)>{{ $s->name }}</option>@endforeach</select></div>
        <div><label class="mb-1.5 block text-sm font-semibold text-on-surface-variant" for="warehouse_id">{{ __('Deliver to') }}</label><select id="warehouse_id" name="warehouse_id" required class="min-h-[48px] w-full rounded-2xl border border-outline-variant bg-white px-4">@foreach ($warehouses as $w)<option value="{{ $w->id }}" @selected((string) old('warehouse_id') === (string) $w->id)>{{ $w->name }}</option>@endforeach</select></div>
        <x-field name="expected_at" type="date" :label="__('Expected on')"/>
    </section>
    <section class="rounded-[32px] border border-surface-variant bg-white p-6">
        <h2 class="mb-3 font-extrabold text-primary">{{ __('Products') }}</h2>
        <div id="lines" class="space-y-3">
        @for ($i = 0; $i < max(3, count((array) old('lines', []))); $i++)
            <div class="grid gap-3 sm:grid-cols-[1fr_110px_130px]">
                <label class="sr-only" for="v{{ $i }}">{{ __('Product') }}</label>
                <select id="v{{ $i }}" name="lines[{{ $i }}][variant_id]" data-line class="min-h-[44px] rounded-2xl border border-outline-variant bg-white px-3"><option value="0">{{ __('Choose a product…') }}</option>@foreach ($variants as $v)<option value="{{ $v->id }}" data-cost="{{ $v->cost }}" @selected((string) old("lines.$i.variant_id") === (string) $v->id)>{{ $v->label }}</option>@endforeach</select>
                <input type="number" min="0" name="lines[{{ $i }}][qty]" value="{{ old("lines.$i.qty") }}" placeholder="{{ __('Qty') }}" aria-label="{{ __('Quantity') }}" class="min-h-[44px] rounded-2xl border border-outline-variant bg-white px-3">
                <input type="number" min="0" step="0.01" name="lines[{{ $i }}][cost]" value="{{ old("lines.$i.cost") }}" placeholder="{{ __('Cost each') }}" aria-label="{{ __('Cost each') }}" class="min-h-[44px] rounded-2xl border border-outline-variant bg-white px-3">
            </div>
        @endfor
        </div>
        <button type="button" id="more" class="mt-4 text-sm font-bold text-primary underline">+ {{ __('Add another line') }}</button>
    </section>
    <x-btn type="submit">{{ __('Save as draft') }}</x-btn>
</form>
@push('scripts')
<script>
(() => {
  const box = document.getElementById('lines');
  box.addEventListener('change', e => { if (!e.target.matches('[data-line]')) return; const c = e.target.selectedOptions[0]?.dataset.cost, cost = e.target.parentElement.querySelector('input[name$="[cost]"]'); if (c && cost && !cost.value) cost.value = c; });
  document.getElementById('more').addEventListener('click', () => {
    const n = box.children.length, row = box.children[0].cloneNode(true);
    row.querySelectorAll('select,input').forEach(el => { el.name = el.name.replace(/\[\d+\]/, '[' + n + ']'); el.id = ''; if (el.tagName === 'INPUT') el.value = ''; else el.selectedIndex = 0; });
    box.appendChild(row);
  });
})();
</script>
@endpush
@endif
@endsection