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

@section('content')
<div x-data="purchaseForm({{ $products->map(fn($p)=>['id'=>$p->id,'name'=>$p->name,'purchase_price'=>(float)$p->purchase_price,'selling_price'=>(float)$p->selling_price])->values() }})">
    <form method="POST" action="{{ route('purchases.store') }}">
        @csrf
        <input type="hidden" name="store_id" value="{{ $store?->id }}">
        <template x-for="(item,i) in items" :key="i">
            <span>
                <input type="hidden" :name="`items[${i}][product_id]`" :value="item.product_id">
                <input type="hidden" :name="`items[${i}][quantity]`" :value="item.quantity">
                <input type="hidden" :name="`items[${i}][unit_cost]`" :value="item.unit_cost">
                <input type="hidden" :name="`items[${i}][selling_price]`" :value="item.selling_price">
                <input type="hidden" :name="`items[${i}][batch_number]`" :value="item.batch_number">
                <input type="hidden" :name="`items[${i}][expiration_date]`" :value="item.expiration_date">
            </span>
        </template>

        <div class="mb-4 grid grid-cols-1 gap-4 sm:grid-cols-3">
            <div class="card">
                <label class="label">{{ __('Supplier') }}</label>
                <select name="supplier_id" class="input">
                    <option value="">{{ __('None') }}</option>
                    @foreach ($suppliers as $supplier)<option value="{{ $supplier->id }}">{{ $supplier->name }}</option>@endforeach
                </select>
            </div>
            <div class="card">
                <label class="label">{{ __('Store') }}</label>
                <select name="store_id" class="input" required>
                    @foreach ($stores as $s)<option value="{{ $s->id }}" @selected($store?->id===$s->id)>{{ $s->name }} ({{ $s->type }})</option>@endforeach
                </select>
            </div>
            <div class="card">
                <label class="label">{{ __('Notes') }}</label>
                <input type="text" name="notes" class="input">
            </div>
        </div>

        <div class="card mb-4">
            <div class="flex flex-wrap items-end gap-2">
                <div class="flex-1 relative"><label class="label">{{ __('Add product') }}</label>
                    <input type="text" x-model="term" @click.outside="open=false" @focus="open=true"
                           placeholder="{{ __('Search a product') }}" class="input" autocomplete="off">
                    <div x-show="open && term && filtered.length" x-cloak
                         class="absolute left-0 z-30 mt-1 max-h-60 w-full max-w-md overflow-auto rounded-xl border border-slate-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-800">
                        <template x-for="p in filtered" :key="p.id">
                            <button type="button" @click="selected = p.id; addItem(); term = ''; open = false;"
                                    class="block w-full px-3 py-2 text-left text-sm hover:bg-brand-50 dark:hover:bg-slate-700">
                                <span x-text="p.name"></span>
                                <span class="ml-2 text-xs text-slate-400" x-text="fmt(p.purchase_price)"></span>
                            </button>
                        </template>
                    </div>
                    <p x-show="term && open && !filtered.length" class="mt-1 text-xs text-slate-400">{{ __('No products found.') }}</p>
                </div>
                <button type="button" @click="addItem()" class="btn-primary"><x-icon name="plus" class="h-4 w-4"/>{{ __('Add') }}</button>
            </div>
        </div>

        <div class="table-wrap">
            <table class="min-w-full divide-y divide-slate-100">
                <thead class="bg-slate-50"><tr>
                    <th class="th">{{ __('Product') }}</th><th class="th">{{ __('Qty') }}</th><th class="th">{{ __('Unit cost') }}</th>
                    <th class="th">{{ __('Selling price') }}</th><th class="th">{{ __('Batch #') }}</th><th class="th">{{ __('Expiration') }}</th><th class="th"></th>
                </tr></thead>
                <tbody class="divide-y divide-slate-100">
                    <template x-for="(item,i) in items" :key="i">
                        <tr>
                            <td class="td" x-text="item.name"></td>
                            <td class="td"><input type="number" min="1" x-model.number="item.quantity" class="input !w-20 !py-1"></td>
                            <td class="td"><input type="number" step="0.01" x-model.number="item.unit_cost" class="input !w-28 !py-1"></td>
                            <td class="td"><input type="number" step="0.01" x-model.number="item.selling_price" class="input !w-28 !py-1"></td>
                            <td class="td"><input type="text" x-model="item.batch_number" class="input !w-32 !py-1"></td>
                            <td class="td"><input type="date" x-model="item.expiration_date" class="input !w-40 !py-1"></td>
                            <td class="td"><button type="button" @click="items.splice(i,1)" class="text-red-500"><x-icon name="trash" class="h-4 w-4"/></button></td>
                        </tr>
                    </template>
                    <tr x-show="!items.length"><td colspan="7" class="td py-8 text-center text-slate-400">{{ __('Add products to purchase.') }}</td></tr>
                </tbody>
            </table>
        </div>

        <div class="mt-4 flex items-center justify-between">
            <p class="text-lg font-bold text-slate-800">{{ __('Total') }}: <span x-text="fmt(total)"></span></p>
            <button class="btn-primary" :disabled="!items.length">{{ __('Record purchase') }}</button>
        </div>
    </form>
</div>
@push('scripts')
<script>
function purchaseForm(products) {
    return {
        products, selected: '', items: [], term: '', open: false,
        fmt(v){ return new Intl.NumberFormat('fr-FR').format(v||0)+' {{ current_tenant()?->currency_symbol ?? "Ar" }}'; },
        get filtered(){
            const t = this.term.trim().toLowerCase();
            if (!t) return [];
            return this.products.filter(p => p.name.toLowerCase().includes(t)).slice(0, 30);
        },
        get total(){ return this.items.reduce((s,i)=>s+i.quantity*i.unit_cost,0); },
        addItem(){
            const p = this.products.find(x=>x.id==this.selected);
            if(!p) return;
            this.items.push({ product_id:p.id, name:p.name, quantity:1, unit_cost:p.purchase_price, selling_price:p.selling_price, batch_number:'', expiration_date:'' });
            this.selected='';
        }
    };
}
</script>
@endpush
@endsection