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

@section('content')
<div
    class="max-w-4xl space-y-6"
    x-data="{
        rows: [{ product_id: '', quantity: 1, unit_cost: 0 }],
        addRow() { this.rows.push({ product_id: '', quantity: 1, unit_cost: 0 }) },
        removeRow(i) { this.rows.splice(i, 1) },
        total() { return this.rows.reduce((sum, r) => sum + (Number(r.quantity) * Number(r.unit_cost) || 0), 0) }
    }"
>
    <div>
        <h1 class="text-xl font-bold">New purchase order</h1>
        <p class="text-sm text-ink-muted">Add every line you're ordering from this supplier — you can receive it partially later.</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">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-12 gap-2 items-center">
                        <select :name="`items[${i}][product_id]`" class="input col-span-5" required>
                            <option value="">Select product…</option>
                            @foreach ($products as $product)
                                <option value="{{ $product->id }}">{{ $product->name }} ({{ $product->sku }})</option>
                            @endforeach
                        </select>
                        <input :name="`items[${i}][quantity]`" x-model.number="row.quantity" type="number" step="0.01" min="0.01" placeholder="Qty" class="input col-span-2" required>
                        <input :name="`items[${i}][unit_cost]`" x-model.number="row.unit_cost" type="number" step="0.01" min="0" placeholder="Unit cost" class="input col-span-3" required>
                        <span class="col-span-1 text-sm text-right" x-text="(row.quantity * row.unit_cost).toFixed(2)"></span>
                        <button type="button" class="col-span-1 text-danger" x-on:click="removeRow(i)" x-show="rows.length > 1"><i data-lucide="trash-2" class="w-4 h-4"></i></button>
                    </div>
                </template>
            </div>
            <div class="text-right mt-3 font-bold">Total: <span x-text="total().toFixed(2)"></span></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