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

@section('content')
<div x-data="inventoryForm()" @product-picked="onProductPicked($event.detail)">
    <form method="POST" action="{{ route('inventories.store') }}">
        @csrf
        <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}][batch_number]`" :value="item.batch_number">
                <input type="hidden" :name="`items[${i}][expiration_date]`" :value="item.expiration_date">
                <input type="hidden" :name="`items[${i}][quantity]`" :value="item.quantity">
                <input type="hidden" :name="`items[${i}][purchase_price]`" :value="item.purchase_price">
                <input type="hidden" :name="`items[${i}][selling_price]`" :value="item.selling_price">
            </span>
        </template>

        <div class="mb-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
            <div class="card">
                <label class="label">{{ __('Store') }}</label>
                <select name="store_id" required class="input">
                    @foreach ($stores as $s)<option value="{{ $s->id }}" @selected($warehouse?->id===$s->id)>{{ $s->name }} ({{ $s->type }})</option>@endforeach
                </select>
            </div>
            <div class="card">
                <label class="label">{{ __('Notes') }}</label>
                <input type="text" name="notes" placeholder="{{ __('Opening stock count') }}" class="input">
            </div>
        </div>

        <div class="card mb-4">
            <div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
                <div>
                    <x-product-select :label="__('Product')" :products="$products" />
                </div>
                <div>
                    <label class="label">{{ __('Batch number') }}</label>
                    <input type="text" x-model="batchNumber" placeholder="LOT-…" class="input">
                </div>
                <div>
                    <label class="label">{{ __('Expiration date') }}</label>
                    <input type="date" x-model="expirationDate" class="input">
                </div>
                <div>
                    <label class="label">{{ __('Quantity') }}</label>
                    <input type="number" min="1" x-model.number="qty" class="input">
                </div>
                <div>
                    <label class="label">{{ __('Purchase price') }}</label>
                    <input type="number" step="0.01" min="0" x-model.number="purchasePrice" class="input">
                </div>
                <div class="flex items-end gap-2">
                    <div class="flex-1">
                        <label class="label">{{ __('Selling price') }}</label>
                        <input type="number" step="0.01" min="0" x-model.number="sellingPrice" class="input">
                    </div>
                    <button type="button" @click="addItem()" class="btn-primary"><x-icon name="plus" class="h-4 w-4"/></button>
                </div>
            </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">{{ __('Batch') }}</th>
                    <th class="th">{{ __('Expiration') }}</th><th class="th">{{ __('Quantity') }}</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.product_name"></td>
                            <td class="td font-mono text-xs" x-text="item.batch_number"></td>
                            <td class="td" x-text="item.expiration_date || '—'"></td>
                            <td class="td" x-text="item.quantity"></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="5" class="td py-8 text-center text-slate-400">{{ __('Add counted products.') }}</td></tr>
                </tbody>
            </table>
        </div>

        <div class="mt-4 text-right">
            <button class="btn-primary" :disabled="!items.length">{{ __('Create inventory') }}</button>
        </div>
    </form>
</div>

@push('scripts')
<script>
function inventoryForm() {
    return {
        selectedProduct: '', selectedProductName: '',
        batchNumber: '', expirationDate: '', qty: 1, purchasePrice: 0, sellingPrice: '',
        items: [],
        onProductPicked(product) {
            this.selectedProduct = product.id;
            this.selectedProductName = product.name;
        },
        addItem() {
            if (!this.selectedProduct || !this.batchNumber.trim() || !(this.qty >= 1)) return;
            this.items.push({
                product_id: this.selectedProduct,
                product_name: this.selectedProductName,
                batch_number: this.batchNumber.trim(),
                expiration_date: this.expirationDate || '',
                quantity: Math.floor(this.qty),
                purchase_price: this.purchasePrice || 0,
                selling_price: this.sellingPrice === '' ? '' : this.sellingPrice,
            });
            this.batchNumber = ''; this.expirationDate = ''; this.qty = 1;
        }
    };
}
</script>
@endpush
@endsection