{{-- resources/views/invoices/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">
        <div class="bg-white shadow rounded-lg p-6"
            x-data="invoiceForm({{ $admission ? $admission->id : 'null' }}, {{ $admission ? $admission->patient_id : 'null' }})"
            x-init="init()">
            <form method="POST" action="{{ route('invoices.store') }}" class="space-y-4" @submit="beforeSubmit">
                @csrf
                <input type="hidden" name="admission_id" :value="admissionId">

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium">রোগী *</label>
                        <select name="patient_id" x-model="patientId" 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>
                        @error('patient_id') <p class="text-red-500 text-xs">{{ $message }}</p> @enderror
                    </div>
                    {{-- resources/views/medicine-sales/create.blade.php — ফর্মে যোগ করুন (patient_id ফিল্ডের পরে) --}}
                    <div x-data="{ invoiceOption: 'none' }">
                        <label class="block text-sm font-medium">ইনভয়েসের সাথে সংযুক্ত করবেন?</label>
                        <div class="flex gap-4 text-sm mt-1">
                            <label><input type="radio" name="invoice_option" value="none" x-model="invoiceOption" checked> কোনোটাই না (শুধু ফার্মেসি বিক্রয়)</label>
                            <label><input type="radio" name="invoice_option" value="new" x-model="invoiceOption"> নতুন ইনভয়েস তৈরি করুন</label>
                            <label><input type="radio" name="invoice_option" value="existing" x-model="invoiceOption"> বিদ্যমান ইনভয়েসে যোগ করুন</label>
                        </div>

                        <div x-show="invoiceOption === 'existing'" class="mt-2">
                            <label class="block text-sm font-medium">ইনভয়েস নং</label>
                            <select name="invoice_id" class="w-full border-gray-300 rounded-md">
                                <option value="">নির্বাচন করুন</option>
                                @foreach (\App\Models\Invoice::where('status','!=','paid')->latest()->limit(50)->get() as $inv)
                                <option value="{{ $inv->id }}">{{ $inv->invoice_no }} — {{ $inv->patient->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium">তারিখ *</label>
                        <input type="date" name="invoice_date" value="{{ old('invoice_date', 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-2">
                            <label class="block text-xs">ক্যাটাগরি</label>
                            <select :name="'items['+index+'][category]'" x-model="item.category" class="w-full border-gray-300 rounded-md text-sm">
                                <option value="consultation">কনসালটেশন</option>
                                <option value="ward_charge">ওয়ার্ড চার্জ</option>
                                <option value="medicine">মেডিসিন</option>
                                <option value="lab_test">ল্যাব টেস্ট</option>
                                <option value="other">অন্যান্য</option>
                            </select>
                        </div>
                        <div class="col-span-4">
                            <label class="block text-xs">বিবরণ</label>
                            <input type="text" :name="'items['+index+'][description]'" x-model="item.description" class="w-full border-gray-300 rounded-md text-sm">
                        </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">
                            <label class="block text-xs">দাম</label>
                            <input type="number" step="0.01" :name="'items['+index+'][unit_price]'" x-model.number="item.unit_price" class="w-full border-gray-300 rounded-md text-sm">
                        </div>
                        <div class="col-span-1 text-sm font-medium" x-text="'৳'+(item.quantity*item.unit_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({category:'other',description:'',quantity:1,unit_price:0})"
                    class="text-blue-600 text-sm">+ আইটেম যোগ করুন</button>

                <div class="grid grid-cols-2 gap-4 pt-4 border-t">
                    <div>
                        <label class="block text-sm font-medium">ডিসকাউন্ট (৳)</label>
                        <input type="number" step="0.01" name="discount" x-model.number="discount" class="w-full border-gray-300 rounded-md">
                    </div>
                    <div class="text-right">
                        <p>সাবটোটাল: ৳<span x-text="subtotal.toFixed(2)"></span></p>
                        <p class="font-semibold text-lg">সর্বমোট: ৳<span x-text="(subtotal-discount).toFixed(2)"></span></p>
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium">মন্তব্য</label>
                    <textarea name="notes" class="w-full border-gray-300 rounded-md"></textarea>
                </div>

                <button class="bg-blue-600 text-white px-5 py-2 rounded-lg">ইনভয়েস তৈরি করুন</button>
            </form>
        </div>
    </div>

    <script>
        function invoiceForm(admissionId, patientId) {
            return {
                admissionId: admissionId,
                patientId: patientId,
                discount: 0,
                items: [{
                    category: 'consultation',
                    description: '',
                    quantity: 1,
                    unit_price: 0
                }],
                get subtotal() {
                    return this.items.reduce((sum, i) => sum + (i.quantity * i.unit_price), 0);
                },
                init() {
                    if (this.admissionId) {
                        fetch(`/admissions/${this.admissionId}/load-items`)
                            .then(res => res.json())
                            .then(data => {
                                this.items = data.items;
                                this.patientId = data.patient_id;
                            });
                    }
                }
            }
        }
    </script>
</x-app-layout>