@extends('layouts.branch')

@section('title', "Patient Discharge & Final Bill")
@section('header', "Billing & Discharge")

@section('content')
<div class="space-y-6" x-data="dischargeBillingForm({ 
    totalCharges: {{ $registration->charges->sum('amount') }},
    advancePaid: {{ $totalPayments }},
    admissionDate: '{{ $registration->admission_date->format('Y-m-d') }}',
    roomRentRate: {{ $roomRentRate }},
    initialDischargeDate: '{{ date('Y-m-d') }}'
})">
    
    <!-- Breadcrumbs -->
    <div class="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-slate-400 italic">
        <a href="{{ route('branch.dashboard') }}" class="hover:text-indigo-600 transition-colors">Dashboard</a>
        <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        <a href="{{ route('branch.ipd-registrations.index') }}" class="hover:text-indigo-600 transition-colors">IPD Directory</a>
        <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        <span class="text-indigo-600">Discharge Finalization</span>
    </div>

    <!-- Error Alerts -->
    @if ($errors->any())
        <div class="bg-rose-50 border-l-4 border-rose-500 p-6 rounded-2xl shadow-sm italic mb-6">
            <div class="flex items-center gap-4">
                <div class="h-10 w-10 bg-rose-100 text-rose-600 rounded-xl flex items-center justify-center">
                    <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                </div>
                <div>
                    <h3 class="text-xs font-black text-rose-800 uppercase tracking-widest">Action Required</h3>
                    <ul class="text-[10px] font-bold text-rose-600 mt-1 uppercase leading-relaxed">
                        @foreach ($errors->all() as $error)
                            <li>• {{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    @endif

    <!-- Patient & Admission Profile Header -->
    <div class="bg-white p-8 rounded-[45px] shadow-sm border border-slate-100 italic relative overflow-hidden group">
        <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-8 relative z-10">
            <div class="flex items-center gap-8">
                <div class="h-24 w-24 rounded-3xl bg-slate-900 flex items-center justify-center text-white font-black text-3xl uppercase shadow-2xl shadow-slate-200 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500">
                    {{ substr($registration->full_name, 0, 1) }}
                </div>
                <div>
                    <div class="flex items-center gap-3">
                        <h2 class="text-3xl font-black text-slate-800 tracking-tighter uppercase leading-none">{{ $registration->full_name }}</h2>
                        <span class="px-3 py-1 bg-emerald-50 text-emerald-600 rounded-lg text-[9px] font-black uppercase tracking-widest border border-emerald-100 italic">Active Admission</span>
                    </div>
                    <div class="flex flex-wrap items-center gap-4 mt-3">
                        <div class="flex items-center gap-2">
                            <span class="text-[9px] font-black text-slate-400 uppercase tracking-widest">IPD No:</span>
                            <span class="text-xs font-black text-slate-700 uppercase">{{ $registration->ipd_number }}</span>
                        </div>
                        <span class="h-4 w-px bg-slate-200"></span>
                        <div class="flex items-center gap-2">
                            <span class="text-[9px] font-black text-slate-400 uppercase tracking-widest">UHID:</span>
                            <span class="text-xs font-black text-indigo-600 uppercase tabular-nums tracking-tighter">{{ $registration->uhid }}</span>
                        </div>
                        <span class="h-4 w-px bg-slate-200"></span>
                        <div class="flex items-center gap-2">
                            <span class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Consultant:</span>
                            <span class="text-xs font-black text-slate-700 uppercase">Dr. {{ $registration->doctor->name }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex items-center gap-10">
                <div class="text-right">
                    <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1 italic">Room & Category</p>
                    <p class="text-xs font-black text-slate-800 uppercase tracking-tight">Room: {{ $registration->room ? $registration->room->room_number : 'N/A' }}</p>
                    <p class="text-[9px] font-black text-indigo-400 uppercase tracking-widest mt-1">{{ $registration->room->roomType->name ?? 'Standard' }}</p>
                </div>
                <div class="h-12 w-px bg-slate-100"></div>
                <div class="text-right">
                    <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1 italic">Admission Since</p>
                    <p class="text-xs font-black text-slate-800 uppercase tabular-nums italic">{{ $registration->admission_date->format('d M, Y') }}</p>
                    <p class="text-[10px] font-black text-emerald-600 uppercase tracking-[0.2em] mt-1" x-text="daysStayed + ' NIGHT STAY'"></p>
                </div>
            </div>
        </div>
        
        <!-- Decoration -->
        <div class="absolute -bottom-12 -right-12 w-48 h-48 bg-slate-50 rounded-full blur-3xl opacity-50 transition-all group-hover:bg-indigo-50"></div>
    </div>

    <!-- Main Discharge Layout -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 pb-20">
        
        <!-- Left: Itemized Ledger & Discharge Details -->
        <div class="lg:col-span-2 space-y-8 italic">
            
            <!-- Discharge Parameters -->
            <form id="dischargeForm" action="{{ route('branch.ipd-discharges.store') }}" method="POST" @submit="handleDischarge" class="space-y-8">
                @csrf
                <input type="hidden" name="ipd_registration_id" value="{{ $registration->id }}">
                
                <div class="bg-white rounded-[40px] shadow-sm border border-slate-100 p-8">
                    <div class="flex items-center gap-4 mb-8">
                        <div class="h-10 w-10 bg-indigo-600 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-indigo-100">
                            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                        </div>
                        <div>
                            <h3 class="text-base font-black text-slate-800 uppercase tracking-tighter italic">Discharge Finalization</h3>
                            <p class="text-[9px] text-slate-400 font-bold tracking-widest uppercase mt-1 italic">Define the clinical exit parameters</p>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div class="space-y-2">
                            <label class="text-[10px] font-black text-slate-500 uppercase tracking-widest px-1 italic">Discharge Date</label>
                            <input type="date" name="discharge_date" x-model="dischargeDate" :min="admissionDate" required
                                   class="w-full px-5 py-4 bg-slate-50 border border-slate-100 rounded-2xl text-[11px] font-bold text-slate-700 outline-none focus:ring-4 focus:ring-indigo-50 transition-all border shadow-sm italic">
                        </div>
                        <div class="space-y-2">
                            <label class="text-[10px] font-black text-slate-500 uppercase tracking-widest px-1 italic">Discharge Time</label>
                            <input type="time" name="discharge_time" value="{{ date('H:i') }}" required
                                   class="w-full px-5 py-4 bg-slate-50 border border-slate-100 rounded-2xl text-[11px] font-bold text-slate-700 outline-none focus:ring-4 focus:ring-indigo-50 transition-all border shadow-sm italic">
                        </div>
                        <div class="space-y-2">
                            <label class="text-[10px] font-black text-indigo-400 uppercase tracking-widest px-1 italic">Discharge Type</label>
                            <div class="relative">
                                <select name="discharge_type" required
                                        class="w-full px-5 py-4 bg-white border border-slate-200 rounded-2xl text-[11px] font-bold text-slate-700 outline-none focus:ring-4 focus:ring-indigo-50 transition-all appearance-none shadow-sm italic">
                                    <option value="">Choosing Exit Type...</option>
                                    @foreach($dischargeTypes as $type)
                                        <option value="{{ $type }}">{{ $type }}</option>
                                    @endforeach
                                </select>
                                <div class="absolute inset-y-0 right-5 flex items-center pointer-events-none text-slate-400">
                                    <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M19 9l-7 7-7-7"/></svg>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Ledger Breakdown -->
                <div class="bg-white rounded-[40px] shadow-sm border border-slate-100 overflow-hidden italic">
                    <div class="p-8 border-b border-slate-50 flex items-center justify-between">
                        <div class="flex items-center gap-4">
                            <div class="h-10 w-10 bg-slate-900 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-slate-100">
                                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01m-.01 4h.01"/></svg>
                            </div>
                            <div>
                                <h3 class="text-base font-black text-slate-800 uppercase tracking-tighter leading-none italic">Billing Service Ledger</h3>
                                <p class="text-[9px] text-slate-400 font-bold tracking-widest uppercase mt-1 italic uppercase">Consolidated items since {{ $registration->admission_date->format('d/m/Y') }}</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1 italic uppercase">Bill No Preview</p>
                            <p class="text-sm font-black text-indigo-600 uppercase tabular-nums italic">{{ $billNumberPreview }}</p>
                        </div>
                    </div>

                    <div class="overflow-x-auto max-h-[400px]">
                        <table class="w-full text-left border-collapse">
                            <thead class="sticky top-0 z-10">
                                <tr class="text-[10px] font-black uppercase tracking-widest text-slate-500 bg-slate-50/80 backdrop-blur-md border-b border-slate-100 rounded-t-[20px]">
                                    <th class="px-6 py-5 w-32">Date</th>
                                    <th class="px-6 py-5 min-w-[200px]">Service Item</th>
                                    <th class="px-6 py-5 w-32 text-right tracking-tight">Rate (₹)</th>
                                    <th class="px-6 py-5 w-24 text-center">Qty</th>
                                    <th class="px-6 py-5 w-32 text-right">Total (₹)</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-50 tabular-nums">
                                <!-- Automated Room Rent -->
                                <tr class="bg-indigo-50/20 group">
                                    <td class="px-6 py-4">
                                        <span class="text-[10px] font-bold text-slate-400 uppercase">{{ $registration->admission_date->format('d M, Y') }}</span>
                                    </td>
                                    <td class="px-6 py-4">
                                        <div class="flex items-center gap-3">
                                            <div class="h-7 w-7 bg-indigo-600 rounded-lg flex items-center justify-center text-white">
                                                <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
                                            </div>
                                            <div>
                                                <p class="text-[10px] font-black text-slate-800 uppercase tracking-tighter italic uppercase underline decoration-indigo-200 underline-offset-4 decoration-2">Room Rent ({{ $registration->room->room_number ?? 'Auto' }})</p>
                                                <p class="text-[8px] font-black text-indigo-400 uppercase mt-1 italic tracking-widest" x-text="'Calculated for ' + daysStayed + ' night stay'"></p>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 text-right">
                                        <span class="text-[11px] font-bold text-slate-500 italic leading-none">₹{{ number_format($roomRentRate, 2) }}</span>
                                    </td>
                                    <td class="px-6 py-4 text-center">
                                        <span class="text-[11px] font-black text-slate-800 italic tracking-[0.2em] uppercase" x-text="daysStayed + ' NIGHTS'"></span>
                                    </td>
                                    <td class="px-6 py-4 text-right">
                                        <span class="text-[11px] font-black text-indigo-600 italic tracking-tighter leading-none" x-text="'₹' + roomRentTotal.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})"></span>
                                    </td>
                                </tr>

                                <!-- Real Charges -->
                                @foreach($registration->charges as $charge)
                                    <tr class="hover:bg-slate-50/50 transition-all group">
                                        <td class="px-6 py-4">
                                            <span class="text-[10px] font-bold text-slate-400 italic leading-none">{{ $charge->date->format('d M, Y') }}</span>
                                        </td>
                                        <td class="px-6 py-4">
                                            <div class="flex items-center gap-3">
                                                <div class="h-7 w-7 bg-slate-100 rounded-lg flex items-center justify-center text-slate-400 group-hover:bg-indigo-50 group-hover:text-indigo-600 transition-colors">
                                                    <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                                </div>
                                                <p class="text-[10px] font-black text-slate-800 uppercase tracking-tighter italic uppercase leading-none">{{ $charge->chargeType->name }}</p>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 text-right">
                                            <span class="text-[11px] font-bold text-slate-500 italic leading-none">₹{{ number_format($charge->rate, 2) }}</span>
                                        </td>
                                        <td class="px-6 py-4 text-center">
                                            <span class="text-[11px] font-black text-slate-800 italic leading-none uppercase">{{ (int)$charge->qty }} UNITS</span>
                                        </td>
                                        <td class="px-6 py-4 text-right">
                                            <span class="text-[11px] font-black text-slate-800 italic tracking-tighter leading-none">₹{{ number_format($charge->amount, 2) }}</span>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Internal Feedback & Remarks -->
                <div class="bg-indigo-50/30 p-8 rounded-[40px] border border-indigo-50 shadow-sm relative overflow-hidden italic">
                    <div class="flex items-center gap-4 mb-3 relative z-10">
                        <div class="h-10 w-10 bg-white text-indigo-600 rounded-xl flex items-center justify-center shadow-lg shadow-indigo-100">
                             <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                        </div>
                        <h4 class="text-xs font-black text-slate-800 uppercase tracking-widest italic">Internal Discharge Note</h4>
                    </div>
                    <textarea name="remarks" rows="2" 
                              class="w-full bg-white/60 border border-indigo-100 rounded-3xl p-6 text-[11px] font-bold text-slate-700 outline-none focus:ring-4 focus:ring-white transition-all shadow-inner italic"
                              placeholder="Any specific observations during the final billing process..."></textarea>
                    
                    <svg class="absolute -bottom-6 -right-6 h-32 w-32 text-indigo-100/50" fill="currentColor" viewBox="0 0 24 24"><path d="M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.0171 16H19.0171V14H17.0171C15.3602 14 14.0171 12.6569 14.0171 11V7C14.0171 5.34315 15.3602 4 17.0171 4H19.0171C20.674 4 22.0171 5.34315 22.0171 7V11C22.0171 12.6569 20.674 14 19.0171 14V16H20.0171C21.1216 16 22.0171 16.8954 22.0171 18V21H14.0171Z"/><path d="M2.01709 21L2.01709 18C2.01709 16.8954 2.91242 16 4.01709 16H7.01709V14H5.01709C3.36023 14 2.01709 12.6569 2.01709 11V7C2.01709 5.34315 3.36023 4 5.01709 4H7.01709C8.67395 4 10.0171 5.34315 10.0171 7V11C10.0171 12.6569 8.67395 14 7.01709 14V16H8.01709C9.12166 16 10.0171 16.8954 10.0171 18V21H2.01709Z"/></svg>
                </div>

                <!-- Form Metadata Hidden (Moved Inside Form Tag for compatibility) -->
                <input type="hidden" name="total_charges" :value="totalDebitValue.toFixed(2)">
                <input type="hidden" name="total_advances" :value="totalAdvances.toFixed(2)">
                <input type="hidden" name="discount_amount" :value="discountValue.toFixed(2)">
                <input type="hidden" name="net_bill_amount" :value="netBillValue.toFixed(2)">
                <input type="hidden" name="balance_amount" :value="balanceValue.toFixed(2)">
            </form>
        </div>

        <!-- Right: Final Bill Summary Card -->
        <div class="space-y-6 flex flex-col italic">
            <div class="sticky top-6 space-y-6">
                
                <!-- Totals Card -->
                <div class="bg-slate-900 rounded-[45px] shadow-2xl p-10 text-white relative overflow-hidden group">
                    <div class="relative z-10 space-y-8">
                        <div>
                            <p class="text-[9px] font-black text-indigo-400 uppercase tracking-widest mb-1 italic">Billing Snapshot</p>
                            <h3 class="text-xl font-black uppercase tracking-tighter italic">Final Revenue Summary</h3>
                        </div>

                        <div class="space-y-5 border-y border-white/5 py-8">
                            <div class="flex items-center justify-between group/line">
                                <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest italic leading-none">Total Gross Charges</span>
                                <span class="text-xs font-black tabular-nums group-hover:text-indigo-400 transition-colors" x-text="'₹' + totalDebitValue.toLocaleString(undefined, {minimumFractionDigits: 2})"></span>
                            </div>
                            <div class="flex items-center justify-between group/line">
                                <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest italic leading-none">Advances Received</span>
                                <span class="text-xs font-black tabular-nums text-emerald-400" x-text="'-₹' + totalAdvances.toLocaleString(undefined, {minimumFractionDigits: 2})"></span>
                            </div>
                            
                            <!-- Additional Inputs -->
                            <div class="space-y-4 pt-4">
                                <div class="grid grid-cols-2 gap-4">
                                    <div class="space-y-2">
                                        <label class="text-[8px] font-black text-slate-500 uppercase tracking-widest ml-1 italic">Extra Fees</label>
                                        <input type="number" form="dischargeForm" name="add_extra_charges" x-model.number="extraCharges"
                                               class="w-full bg-white/5 border-none rounded-xl px-4 py-2 text-[11px] font-black text-white focus:ring-2 focus:ring-indigo-500 transition-all outline-none italic tabular-nums">
                                    </div>
                                    <div class="space-y-2">
                                        <label class="text-[8px] font-black text-slate-500 uppercase tracking-widest ml-1 italic">Misc. Others</label>
                                        <input type="number" form="dischargeForm" name="add_others" x-model.number="others"
                                               class="w-full bg-white/5 border-none rounded-xl px-4 py-2 text-[11px] font-black text-white focus:ring-2 focus:ring-indigo-500 transition-all outline-none italic tabular-nums">
                                    </div>
                                </div>
                                
                                <div class="space-y-2 relative">
                                    <label class="text-[8px] font-black text-amber-500 uppercase tracking-widest ml-1 italic leading-none">Discount (%)</label>
                                    <input type="number" min="0" max="100" form="dischargeForm" name="discount_percent" x-model.number="discountPercent"
                                           class="w-full bg-amber-500/10 border-none rounded-xl px-4 py-3 text-[11px] font-black text-amber-500 focus:ring-2 focus:ring-amber-500 transition-all outline-none italic tabular-nums">
                                    <div class="absolute right-4 bottom-2 text-[9px] font-black text-amber-500/50 uppercase italic" x-text="'-₹' + discountValue.toFixed(2)"></div>
                                </div>
                            </div>
                        </div>

                        <div class="space-y-6 pt-4">
                            <div class="flex items-end justify-between">
                                <div>
                                    <p class="text-[10px] font-black text-indigo-400 uppercase tracking-[0.2em] mb-2 italic">Net Payable Bill</p>
                                    <h4 class="text-4xl font-black tracking-tighter italic tabular-nums" x-text="'₹' + netBillValue.toLocaleString(undefined, {minimumFractionDigits: 2})"></h4>
                                </div>
                                <div class="text-right">
                                    <p class="text-[8px] font-black text-slate-500 uppercase tracking-widest mb-1 italic">Balance Due</p>
                                    <p :class="balanceValue > 0 ? 'text-rose-500' : 'text-emerald-500'" class="text-xs font-black tabular-nums transition-colors" x-text="(balanceValue >= 0 ? '₹' : '-₹') + Math.abs(balanceValue).toLocaleString(undefined, {minimumFractionDigits: 2})"></p>
                                </div>
                            </div>

                            <button type="submit" form="dischargeForm" 
                                    class="w-full py-6 bg-indigo-600 hover:bg-white hover:text-indigo-600 text-white rounded-[2rem] text-[11px] font-black uppercase tracking-[0.3em] transition-all duration-500 shadow-2xl shadow-indigo-600/20 shadow-slate-900 group/submit flex items-center justify-center gap-4 italic overflow-hidden">
                                <span class="relative z-10 transition-transform group-hover/submit:translate-x-1">Finalize Discharge</span>
                                <svg class="h-4 w-4 relative z-10 transition-transform group-hover/submit:translate-x-3 duration-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M14 5l7 7-7 7M3 12h18"/></svg>
                            </button>
                        </div>
                    </div>
                    
                    <div class="absolute -top-12 -left-12 w-64 h-64 bg-indigo-600/10 rounded-full blur-3xl opacity-0 transition-opacity group-hover:opacity-100 duration-1000"></div>
                </div>

                <!-- Balance Alert -->
                <template x-if="balanceValue > 0">
                    <div class="p-8 bg-rose-50 border border-rose-100 rounded-[40px] flex items-center gap-6 animate-pulse italic">
                        <div class="h-12 w-12 bg-rose-500 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-rose-200">
                            <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
                        </div>
                        <div>
                            <p class="text-[10px] font-black text-rose-800 uppercase tracking-widest leading-none mb-1">Outstanding Balance Detected</p>
                            <p class="text-[9px] font-bold text-rose-600 uppercase tracking-widest leading-relaxed">Please collect <span x-text="'₹' + balanceValue.toLocaleString()" class="font-black text-rose-700"></span> from the patient to proceed with discharge.</p>
                        </div>
                    </div>
                </template>

                <div class="p-8 bg-slate-50 rounded-[40px] border border-slate-100 flex items-center justify-center italic">
                    <p class="text-[9px] font-black text-slate-400 text-center uppercase tracking-widest leading-relaxed">System will automatically update medical status after successful billing finalization</p>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function dischargeBillingForm(init) {
    return {
        totalServiceCharges: init.totalCharges || 0,
        totalAdvances: init.advancePaid || 0,
        admissionDate: init.admissionDate,
        roomRentRate: init.roomRentRate || 0,
        dischargeDate: init.initialDischargeDate,
        extraCharges: 0,
        others: 0,
        discountPercent: 0,

        handleDischarge(e) {
            if (this.balanceValue > 0) {
                e.preventDefault();
                alert('Patient has an outstanding balance of ₹' + this.balanceValue.toFixed(2) + '. Please settle the amount in the Payment Center before discharging.');
                return false;
            }
            if (!confirm('Are you sure you want to finalize this discharge? This action will release the bed and finalize the billing.')) {
                e.preventDefault();
                return false;
            }
        },

        get daysStayed() {
            if (!this.dischargeDate || !this.admissionDate) return 1;
            
            const admission = new Date(this.admissionDate);
            const discharge = new Date(this.dischargeDate);
            
            // Set both to midnight for accurate day difference
            admission.setHours(0, 0, 0, 0);
            discharge.setHours(0, 0, 0, 0);
            
            const diffTime = discharge - admission;
            const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
            
            return diffDays + 1;
        },

        get roomRentTotal() {
            return this.daysStayed * this.roomRentRate;
        },

        get totalDebitValue() {
            return parseFloat(this.totalServiceCharges) + parseFloat(this.roomRentTotal);
        },

        get discountValue() {
            const grossPlusExtras = this.totalDebitValue + parseFloat(this.extraCharges || 0) + parseFloat(this.others || 0);
            return (grossPlusExtras * (this.discountPercent || 0)) / 100;
        },

        get netBillValue() {
            const grossPlusExtras = this.totalDebitValue + parseFloat(this.extraCharges || 0) + parseFloat(this.others || 0);
            return grossPlusExtras - this.discountValue;
        },

        get balanceValue() {
            return this.netBillValue - this.totalAdvances;
        }
    }
}
</script>
@endpush
@endsection