@extends('layouts.app')
@section('title', 'New Purchase Order')

@section('content')
<div
    class="max-w-4xl space-y-6"
    x-data="{
        products: @js($products->map(fn ($p) => ['id' => $p->id, 'name' => $p->name, 'sku' => $p->sku, 'cost' => (float) $p->cost_price, 'selling' => (float) $p->selling_price])->values()),
        rows: [{ product_id: '', search: '', selected_label: '', quantity: 1, unit_cost: 0, unit_selling_price: 0, expiry_date: '', matches: [], open: false }],
        addRow() { this.rows.push({ product_id: '', search: '', selected_label: '', quantity: 1, unit_cost: 0, unit_selling_price: 0, expiry_date: '', matches: [], open: false }) },
        removeRow(i) { this.rows.splice(i, 1) },
        searchProducts(row) { if (row.product_id && row.search !== row.selected_label) row.product_id = ''; const q = row.search.trim().toLowerCase(); row.matches = q ? this.products.filter(p => (p.name || '').toLowerCase().includes(q) || (p.sku || '').toLowerCase().includes(q)).slice(0, 12) : []; row.open = !!q },
        chooseProduct(row, product) { row.product_id = product.id; row.search = product.name + (product.sku ? ' (' + product.sku + ')' : ''); row.selected_label = row.search; row.unit_cost = product.cost; row.unit_selling_price = product.selling; row.open = false; row.matches = [] },
        total() { return this.rows.reduce((sum, r) => sum + (Number(r.quantity) * Number(r.unit_cost) || 0), 0) }
    }"
>
    <div>
        <h1 class="text-xl font-bold">Add Purchase / Purchase Order</h1>
        <p class="text-sm text-ink-muted">Record supplier, product costs, selling prices, expiry dates and payment details. Mark as received to update stock immediately.</p>
    </div>

    <form method="POST" action="{{ route('purchasing.orders.store') }}" class="card card-pad space-y-5">
        @csrf
        <div class="grid sm:grid-cols-3 gap-4">
            <div><label class="field-label">Purchase status</label><select name="purchase_status" class="input" required><option value="pending">Pending / Requisition</option><option value="approved">Approved / Purchase Order</option><option value="received">Received / Add to stock</option></select></div>
            <div>
                <label class="field-label">Supplier</label>
                <select name="supplier_id" class="input" required>
                    @foreach ($suppliers as $supplier)
                        <option value="{{ $supplier->id }}">{{ $supplier->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="field-label">Receiving store</label>
                <select name="store_id" class="input" required>
                    @foreach ($stores as $store)
                        <option value="{{ $store->id }}">{{ $store->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="field-label">Expected date</label>
                <input type="date" name="expected_date" class="input">
            </div>
        </div>

        <div>
            <div class="flex items-center justify-between mb-2">
                <label class="field-label !mb-0">Line items</label>
                <button type="button" class="btn-secondary btn-sm" x-on:click="addRow()"><i data-lucide="plus" class="w-3.5 h-3.5"></i> Add line</button>
            </div>
            <div class="space-y-2">
                <template x-for="(row, i) in rows" :key="i">
                    <div class="grid grid-cols-2 md:grid-cols-12 gap-3 items-start rounded-lg border border-border p-3">
                        <div class="col-span-2 md:col-span-4 relative">
                            <label class="field-label">Product</label>
                            <input type="hidden" :name="`items[${i}][product_id]`" x-model="row.product_id" required>
                            <input type="text" class="input w-full" x-model="row.search" x-on:input="searchProducts(row)" x-on:focus="searchProducts(row)" placeholder="Search product name or SKU…" autocomplete="off" required>
                            <div x-cloak x-show="row.open" x-on:click.outside="row.open = false" class="absolute z-30 mt-1 w-full max-h-56 overflow-y-auto rounded-lg border border-border bg-white shadow-lg">
                                <template x-for="product in row.matches" :key="product.id">
                                    <button type="button" class="block w-full px-3 py-2 text-left text-sm hover:bg-slate-100" x-on:click="chooseProduct(row, product)">
                                        <span class="font-medium" x-text="product.name"></span>
                                        <span class="block text-xs text-slate-500" x-text="product.sku ? 'SKU: ' + product.sku : 'No SKU'"></span>
                                    </button>
                                </template>
                                <p x-show="row.matches.length === 0" class="px-3 py-2 text-sm text-slate-500">No matching products.</p>
                            </div>
                        </div>
                        <div class="md:col-span-2"><label class="field-label">Quantity</label><input :name="`items[${i}][quantity]`" x-model.number="row.quantity" type="number" step="0.01" min="0.01" placeholder="Quantity" class="input w-full" required></div>
                        <div class="md:col-span-2"><label class="field-label">Unit cost (buying price)</label><input :name="`items[${i}][unit_cost]`" x-model.number="row.unit_cost" type="number" step="0.01" min="0" placeholder="Unit cost" class="input w-full" required></div>
                        <div class="md:col-span-2"><label class="field-label">Unit selling price</label><input :name="`items[${i}][unit_selling_price]`" x-model.number="row.unit_selling_price" type="number" step="0.01" min="0" placeholder="Selling price" class="input w-full" required></div>
                        <div class="md:col-span-2"><label class="field-label">Expiry date</label><input :name="`items[${i}][expiry_date]`" x-model="row.expiry_date" type="date" title="Expiry date" class="input w-full"></div>
                        <div class="col-span-1 md:col-span-1"><label class="field-label">Line total</label><div class="input w-full" x-text="(row.quantity * row.unit_cost).toFixed(2)"></div></div>
                        <div class="col-span-1 md:col-span-1 flex justify-end md:pt-7"><button type="button" class="text-danger p-2" x-on:click="removeRow(i)" x-show="rows.length > 1" aria-label="Remove line"><i data-lucide="trash-2" class="w-4 h-4"></i></button></div>
                    </div>
                </template>
            </div>
            <div class="text-right mt-3 font-bold">Total: <span x-text="total().toFixed(2)"></span></div>
        </div>

        <div class="grid sm:grid-cols-2 gap-4"><div><label class="field-label">Payment amount</label><input name="payment_amount" type="number" min="0" step="0.01" value="0" class="input" placeholder="Amount paid now"></div><div><label class="field-label">Mode of payment</label><select name="payment_method" class="input"><option value="">Select payment mode</option><option value="cash">Cash</option><option value="m-pesa">M-Pesa</option><option value="bank">Bank</option><option value="cheque">Cheque</option><option value="credit">Credit / Pay later</option></select></div></div>
        <div><label class="field-label">Notes</label><textarea name="notes" class="input" rows="2"></textarea></div>

        <div class="flex justify-end gap-2 pt-2 border-t border-border">
            <a href="{{ route('purchasing.orders.index') }}" class="btn-secondary">Cancel</a>
            <button type="submit" class="btn-primary">Create purchase order</button>
        </div>
    </form>
</div>
@endsection