{{-- resources/views/medicine-sales/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-4xl 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="saleForm()">
            <form method="POST" action="{{ route('medicine-sales.store') }}" class="space-y-4">
                @csrf

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium">রোগী (ঐচ্ছিক — কাউন্টার বিক্রয়ের জন্য খালি রাখুন)</label>
                        <select name="patient_id" class="w-full border-gray-300 rounded-md">
                            <option value="">নির্বাচন করুন</option>
                            @foreach ($patients as $p)
                            <option value="{{ $p->id }}">{{ $p->name }} ({{ $p->patient_id }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium">তারিখ *</label>
                        <input type="date" name="sale_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-6">
                            <label class="block text-xs">মেডিসিন</label>
                            <select :name="'items['+index+'][medicine_id]'" x-model="item.medicine_id" @change="updatePrice(index, $event)" class="w-full border-gray-300 rounded-md text-sm">
                                <option value="">নির্বাচন করুন</option>
                                @foreach ($medicines as $m)
                                <option value="{{ $m->id }}" data-price="{{ $m->sale_price }}" data-stock="{{ $m->total_stock }}">
                                    {{ $m->name }} (স্টক: {{ $m->total_stock }})
                                </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-span-2">
                            <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-2 text-sm">
                            <label class="block text-xs">আনুমানিক দাম</label>
                            <span x-text="'৳'+item.price"></span>
                        </div>
                        <div class="col-span-1 text-sm font-medium" x-text="'৳'+(item.quantity*item.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({medicine_id:'',quantity:1,price:0})" class="text-blue-600 text-sm">+ আইটেম যোগ করুন</button>

                <div class="text-right pt-3 border-t">
                    <p class="font-semibold text-lg">আনুমানিক মোট: ৳<span x-text="total.toFixed(2)"></span></p>
                </div>

                <button class="bg-blue-600 text-white px-5 py-2 rounded-lg">নিশ্চিত করুন</button>
            </form>
        </div>
    </div>

    <script>
        function saleForm() {
            return {
                items: [{
                    medicine_id: '',
                    quantity: 1,
                    price: 0
                }],
                get total() {
                    return this.items.reduce((sum, i) => sum + (i.quantity * i.price), 0);
                },
                updatePrice(index, event) {
                    const price = event.target.selectedOptions[0].dataset.price;
                    this.items[index].price = parseFloat(price);
                }
            }
        }
    </script>
</x-app-layout>