{{-- resources/views/medicine-purchases/create.blade.php --}}
<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800">নতুন স্টক-ইন (মেডিসিন ক্রয়)</h2>
    </x-slot>

    <div class="py-6 max-w-5xl mx-auto sm:px-6 lg:px-8">
        @if (session('error'))
        <div class="mb-4 p-3 bg-red-100 text-red-700 rounded">{{ session('error') }}</div>
        @endif

        <div class="bg-white shadow rounded-lg p-6" x-data="purchaseForm()">
            <form method="POST" action="{{ route('medicine-purchases.store') }}" class="space-y-4">
                @csrf

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium">সাপ্লায়ারের নাম</label>
                        <input type="text" name="supplier_name" class="w-full border-gray-300 rounded-md">
                    </div>
                    <div>
                        <label class="block text-sm font-medium">তারিখ *</label>
                        <input type="date" name="purchase_date" value="{{ now()->format('Y-m-d') }}" class="w-full border-gray-300 rounded-md">
                    </div>
                </div>

                <hr>
                <h3 class="font-semibold">ক্রয়কৃত আইটেম</h3>

                <template x-for="(item, index) in items" :key="index">
                    <div class="grid grid-cols-12 gap-2 items-end border-b pb-3">
                        <div class="col-span-3">
                            <label class="block text-xs">মেডিসিন</label>
                            <select :name="'items['+index+'][medicine_id]'" class="w-full border-gray-300 rounded-md text-sm">
                                <option value="">নির্বাচন করুন</option>
                                @foreach ($medicines as $m)
                                <option value="{{ $m->id }}">{{ $m->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-span-2">
                            <label class="block text-xs">ব্যাচ নং</label>
                            <input type="text" :name="'items['+index+'][batch_no]'" class="w-full border-gray-300 rounded-md text-sm">
                        </div>
                        <div class="col-span-2">
                            <label class="block text-xs">এক্সপায়ারি</label>
                            <input type="date" :name="'items['+index+'][expiry_date]'" class="w-full border-gray-300 rounded-md text-sm">
                        </div>
                        <div class="col-span-1">
                            <label class="block text-xs">পরিমাণ</label>
                            <input type="number" min="1" :name="'items['+index+'][quantity]'" x-model.number="item.quantity" class="w-full border-gray-300 rounded-md text-sm">
                        </div>
                        <div class="col-span-1">
                            <label class="block text-xs">ক্রয় মূল্য</label>
                            <input type="number" step="0.01" :name="'items['+index+'][purchase_price]'" x-model.number="item.purchase_price" class="w-full border-gray-300 rounded-md text-sm">
                        </div>
                        <div class="col-span-1">
                            <label class="block text-xs">বিক্রয় মূল্য</label>
                            <input type="number" step="0.01" :name="'items['+index+'][sale_price]'" class="w-full border-gray-300 rounded-md text-sm">
                        </div>
                        <div class="col-span-1 text-xs" x-text="'৳'+(item.quantity*item.purchase_price).toFixed(2)"></div>
                        <div class="col-span-1">
                            <button type="button" @click="items.splice(index,1)" class="text-red-600 text-sm">✕</button>
                        </div>
                    </div>
                </template>

                <button type="button" @click="items.push({quantity:1,purchase_price:0})" class="text-blue-600 text-sm">+ আইটেম যোগ করুন</button>

                <div class="pt-4">
                    <button class="bg-blue-600 text-white px-5 py-2 rounded-lg">স্টক-ইন সম্পন্ন করুন</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        function purchaseForm() {
            return {
                items: [{
                    quantity: 1,
                    purchase_price: 0
                }],
            }
        }
    </script>
</x-app-layout>