@extends('layouts.app')

@section('title', 'Generate Hospital Invoice')

@section('content')
<div class="max-w-5xl mx-auto space-y-6" x-data="invoiceForm()">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-slate-800">Generate Hospital Invoice</h1>
            <p class="text-sm text-slate-500">Bill clinical services, room charges, diagnostic investigations and procedural fees</p>
        </div>
        <a href="{{ route('billing.index') }}" class="inline-flex items-center text-sm font-semibold text-hospital-600 hover:text-hospital-700">
            <i class="fa-solid fa-arrow-left mr-2"></i> Back to Invoices
        </a>
    </div>

    @if($errors->any())
        <div class="p-4 bg-rose-50 border-l-4 border-rose-500 text-rose-700 rounded-r-lg">
            <div class="font-bold text-xs uppercase mb-1">Validation Errors:</div>
            <ul class="list-disc list-inside text-xs space-y-1">
                @foreach($errors->all() as $err)
                    <li>{{ $err }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
        <form action="{{ route('billing.store') }}" method="POST" class="p-6 md:p-8 space-y-6">
            @csrf

            <!-- Patient Information Banner -->
            <div>
                <label class="block text-xs font-bold uppercase tracking-wider text-slate-600 mb-2">Patient Selection</label>
                @if($patient)
                    <input type="hidden" name="patient_id" value="{{ $patient->id }}">
                    <div class="p-4 bg-hospital-50 border border-hospital-200 rounded-lg flex items-center justify-between">
                        <div class="flex items-center space-x-4">
                            <div class="w-12 h-12 rounded-full bg-hospital-600 text-white font-bold text-lg flex items-center justify-center">
                                {{ substr($patient->first_name, 0, 1) }}{{ substr($patient->last_name, 0, 1) }}
                            </div>
                            <div>
                                <div class="font-bold text-slate-900 text-base flex items-center space-x-2">
                                    <span>{{ $patient->full_name }}</span>
                                    <span class="text-xs px-2 py-0.5 rounded-full bg-hospital-200 text-hospital-800 font-semibold">{{ $patient->patient_id }}</span>
                                    <span class="text-xs px-2 py-0.5 rounded-full bg-slate-200 text-slate-700 font-semibold">UHID: {{ $patient->uhid }}</span>
                                </div>
                                <div class="text-xs text-slate-600 mt-0.5">
                                    <span>{{ $patient->age_formatted }}</span> • 
                                    <span>{{ ucfirst($patient->gender) }}</span> • 
                                    <span>Mobile: {{ $patient->mobile }}</span>
                                </div>
                            </div>
                        </div>
                        <a href="{{ route('patients.index') }}" class="text-xs text-hospital-600 hover:underline">Change Patient</a>
                    </div>
                @else
                    <div class="p-6 border-2 border-dashed border-slate-300 rounded-lg text-center bg-slate-50">
                        <i class="fa-solid fa-user-plus text-3xl text-slate-400 mb-2"></i>
                        <p class="text-sm font-semibold text-slate-700">No Patient Selected</p>
                        <p class="text-xs text-slate-500 mb-4">Please select a patient from the patient registry first.</p>
                        <a href="{{ route('patients.index') }}" class="px-4 py-2 bg-hospital-600 hover:bg-hospital-700 text-white rounded-lg text-xs font-semibold shadow-xs">
                            <i class="fa-solid fa-users mr-1.5"></i> Select Patient
                        </a>
                    </div>
                @endif
            </div>

            @if($patient)
            <!-- Invoice Configuration -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 pt-4 border-t border-slate-200">
                <div>
                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-600 mb-2">
                        Billing Department / Type <span class="text-rose-500">*</span>
                    </label>
                    <select name="billing_type" required class="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-300 rounded-lg text-sm font-semibold">
                        <option value="opd">OPD Consultation & Services</option>
                        <option value="ipd">Inpatient (IPD) Final / Running Bill</option>
                        <option value="emergency">Emergency Casualty Care</option>
                        <option value="laboratory">Laboratory Diagnostic Tests</option>
                        <option value="radiology">Radiology & Imaging (X-Ray, USG, CT)</option>
                        <option value="procedure">Minor / Major Surgical Procedure</option>
                        <option value="package">Surgical / Treatment Package</option>
                    </select>
                </div>

                <!-- Quick Catalog Selector -->
                <div>
                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-600 mb-2">
                        Quick Add Hospital Service
                    </label>
                    <select @change="addServiceItem($event)" class="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-300 rounded-lg text-sm">
                        <option value="">-- Click to add standard service to items below --</option>
                        @foreach($services as $svc)
                            <option value="{{ $svc->name }}|{{ $svc->category }}|{{ $svc->standard_fee }}|{{ $svc->tax_percent }}">
                                {{ $svc->name }} ({{ ucfirst($svc->category) }} — ₹{{ number_format($svc->standard_fee, 2) }})
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>

            <!-- Invoice Line Items Table -->
            <div class="bg-slate-50 rounded-xl border border-slate-200 overflow-hidden">
                <div class="px-5 py-3 border-b border-slate-200 flex items-center justify-between">
                    <h3 class="text-xs font-bold uppercase tracking-wider text-slate-700">
                        <i class="fa-solid fa-list-check mr-1.5 text-hospital-600"></i> Billed Line Items
                    </h3>
                    <button type="button" @click="addRow()" class="px-3 py-1 bg-hospital-600 hover:bg-hospital-700 text-white rounded text-xs font-semibold">
                        <i class="fa-solid fa-plus mr-1"></i> Add Custom Row
                    </button>
                </div>

                <div class="overflow-x-auto">
                    <table class="w-full text-left text-xs">
                        <thead class="bg-slate-100 text-slate-600 uppercase font-semibold border-b border-slate-200">
                            <tr>
                                <th class="px-4 py-2.5 w-1/3">Item Description</th>
                                <th class="px-3 py-2.5 w-1/5">Category</th>
                                <th class="px-3 py-2.5 w-20">Qty</th>
                                <th class="px-3 py-2.5 w-28">Rate (₹)</th>
                                <th class="px-3 py-2.5 w-20">Tax %</th>
                                <th class="px-3 py-2.5 text-right w-28">Total (₹)</th>
                                <th class="px-3 py-2.5 text-center w-12"></th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-200/60 bg-white">
                            <template x-for="(item, index) in items" :key="index">
                                <tr>
                                    <td class="px-4 py-2">
                                        <input type="text" :name="`items[${index}][item_name]`" x-model="item.item_name" required placeholder="Service or test name..." class="w-full px-2.5 py-1.5 bg-slate-50 border border-slate-300 rounded text-xs">
                                    </td>
                                    <td class="px-3 py-2">
                                        <select :name="`items[${index}][item_category]`" x-model="item.item_category" class="w-full px-2 py-1.5 bg-slate-50 border border-slate-300 rounded text-xs">
                                            <option value="consultation">Consultation</option>
                                            <option value="room_rent">Room / Bed Charge</option>
                                            <option value="investigation">Lab Investigation</option>
                                            <option value="radiology">Radiology / Imaging</option>
                                            <option value="procedure">Procedure / Surgery</option>
                                            <option value="nursing">Nursing & Care</option>
                                            <option value="medicine">Medicine / Consumables</option>
                                            <option value="other">Other Service</option>
                                        </select>
                                    </td>
                                    <td class="px-3 py-2">
                                        <input type="number" min="1" step="1" :name="`items[${index}][quantity]`" x-model.number="item.quantity" @input="recalculate()" class="w-full px-2 py-1.5 bg-slate-50 border border-slate-300 rounded text-xs text-center font-bold">
                                    </td>
                                    <td class="px-3 py-2">
                                        <input type="number" min="0" step="0.01" :name="`items[${index}][unit_price]`" x-model.number="item.unit_price" @input="recalculate()" class="w-full px-2 py-1.5 bg-slate-50 border border-slate-300 rounded text-xs font-mono font-bold">
                                    </td>
                                    <td class="px-3 py-2">
                                        <input type="number" min="0" max="28" step="0.5" :name="`items[${index}][tax_percent]`" x-model.number="item.tax_percent" @input="recalculate()" class="w-full px-2 py-1.5 bg-slate-50 border border-slate-300 rounded text-xs font-mono text-center">
                                    </td>
                                    <td class="px-3 py-2 text-right font-mono font-bold text-slate-800" x-text="'₹' + (item.quantity * item.unit_price).toFixed(2)"></td>
                                    <td class="px-3 py-2 text-center">
                                        <button type="button" @click="removeRow(index)" class="text-rose-500 hover:text-rose-700" x-show="items.length > 1">
                                            <i class="fa-solid fa-trash-can"></i>
                                        </button>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Notes & Financial Summary Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-600 mb-1">
                        Invoice Remarks / Notes
                    </label>
                    <textarea name="notes" rows="3" placeholder="Optional remarks printed on invoice..." class="w-full px-3 py-2 bg-slate-50 border border-slate-300 rounded-lg text-xs"></textarea>
                </div>

                <!-- Totals Calculation Box -->
                <div class="bg-slate-50 p-5 rounded-xl border border-slate-200 space-y-2 text-xs">
                    <div class="flex justify-between text-slate-600">
                        <span>Items Subtotal:</span>
                        <span class="font-mono font-bold text-slate-900" x-text="'₹' + subtotal.toFixed(2)"></span>
                    </div>
                    <div class="flex justify-between text-slate-600">
                        <span>Total Tax / GST:</span>
                        <span class="font-mono text-slate-800" x-text="'₹' + taxTotal.toFixed(2)"></span>
                    </div>
                    <div class="flex items-center justify-between text-slate-600 pt-1">
                        <span>Discount (₹):</span>
                        <input type="number" step="0.01" name="discount_amount" min="0" x-model.number="discountAmount" @input="recalculate()" class="w-28 px-2 py-1 bg-white border border-slate-300 rounded text-xs font-mono font-bold text-right">
                    </div>
                    <div class="border-t border-slate-300 pt-2 flex justify-between items-center text-sm font-bold">
                        <span class="text-slate-900">Grand Total:</span>
                        <span class="text-xl font-black font-mono text-hospital-700" x-text="'₹' + grandTotal.toFixed(2)"></span>
                    </div>
                </div>
            </div>

            <!-- Submit -->
            <div class="pt-4 border-t border-slate-200 flex items-center justify-end space-x-3">
                <a href="{{ route('billing.index') }}" class="px-5 py-2.5 border border-slate-300 rounded-lg text-xs font-semibold text-slate-700 hover:bg-slate-100">
                    Cancel
                </a>
                <button type="submit" class="px-6 py-2.5 bg-hospital-600 hover:bg-hospital-700 text-white rounded-lg text-xs font-bold shadow-xs flex items-center">
                    <i class="fa-solid fa-file-invoice mr-2"></i> Save & Generate Invoice
                </button>
            </div>
            @endif
        </form>
    </div>
</div>

<script>
    function invoiceForm() {
        return {
            items: [
                {
                    item_name: 'OPD Doctor Consultation Fee',
                    item_category: 'consultation',
                    quantity: 1,
                    unit_price: 500,
                    tax_percent: 0
                }
            ],
            discountAmount: 0,
            subtotal: 500,
            taxTotal: 0,
            grandTotal: 500,

            addRow() {
                this.items.push({
                    item_name: '',
                    item_category: 'procedure',
                    quantity: 1,
                    unit_price: 0,
                    tax_percent: 0
                });
                this.recalculate();
            },

            removeRow(idx) {
                if (this.items.length > 1) {
                    this.items.splice(idx, 1);
                    this.recalculate();
                }
            },

            addServiceItem(e) {
                const val = e.target.value;
                if (!val) return;
                const parts = val.split('|');
                this.items.push({
                    item_name: parts[0],
                    item_category: parts[1] || 'procedure',
                    quantity: 1,
                    unit_price: parseFloat(parts[2]) || 0,
                    tax_percent: parseFloat(parts[3]) || 0
                });
                e.target.value = '';
                this.recalculate();
            },

            recalculate() {
                let sub = 0;
                let tax = 0;
                this.items.forEach(i => {
                    const rowBase = (i.quantity * i.unit_price);
                    sub += rowBase;
                    tax += (rowBase * ((i.tax_percent || 0) / 100));
                });
                this.subtotal = sub;
                this.taxTotal = tax;
                this.grandTotal = Math.max(0, (sub + tax) - (this.discountAmount || 0));
            }
        }
    }
</script>
@endsection