@extends('layouts.branch')

@section('title', "Add IPD Service Charges")
@section('header', "Patient Billing Service")

@section('content')
<div class="space-y-6" x-data="chargeForm({ 
    id: {{ $preSelectedAdmission->id ?? 'null' }}, 
    full_name: '{{ $preSelectedAdmission->full_name ?? '' }}', 
    ipd_number: '{{ $preSelectedAdmission->ipd_number ?? '' }}', 
    uhid: '{{ $preSelectedAdmission->uhid ?? '' }}' 
}, '{{ $defaultDate }}')">
    
    <!-- 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-patient-charges.index') }}" class="hover:text-indigo-600 transition-colors">Billing 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">New Charge Entry</span>
    </div>

    <!-- Header: Patient Identification -->
    <div class="relative z-40">
        <!-- Search Section (Visible when no admission selected) -->
        <div x-show="!selectedAdmission" x-transition
             class="bg-white p-12 rounded-[50px] shadow-2xl shadow-indigo-100 border border-slate-100 italic relative text-center max-w-4xl mx-auto mb-10">
            <div class="relative z-10 flex flex-col items-center">
                <div class="h-16 w-16 bg-slate-900 text-white rounded-[1.5rem] flex items-center justify-center mb-6 shadow-xl shadow-slate-200">
                    <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                </div>
                <h2 class="text-4xl font-black text-slate-800 tracking-tighter uppercase leading-none mb-4">Identify IPD Admission</h2>
                <p class="text-[11px] text-slate-400 font-bold tracking-widest uppercase mb-10 max-w-sm mx-auto">Search active admissions by IPD No, UHID, or Patient Name</p>
                <div class="relative w-full max-w-2xl group">
                    <input type="text" x-model="searchQuery" @input.debounce.300ms="searchAdmissions()"
                           placeholder="Type IPD No / UHID / Name to search..." 
                           class="w-full pl-16 pr-6 py-6 bg-slate-50 border-2 border-slate-100 rounded-[2rem] text-sm font-black uppercase tracking-widest focus:ring-4 focus:ring-indigo-100 focus:border-indigo-600 focus:bg-white transition-all outline-none">
                    <div x-show="showResults && results.length > 0" class="absolute top-full left-0 right-0 mt-4 bg-white border border-slate-100 rounded-[2.5rem] shadow-2xl z-50 overflow-hidden">
                        <template x-for="a in results" :key="a.id">
                            <button type="button" @click="selectAdmission(a)" class="w-full px-8 py-5 text-left hover:bg-slate-50 transition-colors border-b border-slate-50 last:border-0 flex items-center justify-between group">
                                <div>
                                    <p class="text-base font-black text-slate-800 uppercase" x-text="a.full_name"></p>
                                    <p class="text-[10px] text-slate-400 font-bold uppercase mt-1" x-text="'IPD: ' + a.ipd_number + ' • UHID: ' + a.uhid"></p>
                                </div>
                                <span class="text-[9px] font-black px-4 py-2 bg-slate-100 text-slate-500 rounded-xl uppercase group-hover:bg-indigo-600 group-hover:text-white transition-all">Select Profile</span>
                            </button>
                        </template>
                    </div>
                </div>
            </div>
        </div>

        <!-- Selected Admission Card -->
        <div x-show="selectedAdmission" x-transition
             class="bg-white p-6 rounded-[35px] shadow-sm border border-slate-100 italic relative overflow-hidden flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8 group">
            <div class="flex items-center gap-6">
                <div class="h-20 w-20 rounded-2xl bg-indigo-600 flex items-center justify-center text-white font-black text-2xl" x-text="selectedAdmission?.full_name.charAt(0)"></div>
                <div>
                    <h2 class="text-2xl font-black text-slate-800 tracking-tighter uppercase leading-none" x-text="selectedAdmission?.full_name"></h2>
                    <div class="flex items-center gap-3 mt-2">
                        <span class="text-[10px] font-black text-indigo-600 uppercase tracking-widest py-1 px-3 bg-indigo-50 rounded-lg" x-text="'IPD: ' + selectedAdmission?.ipd_number"></span>
                        <span class="text-[10px] font-black text-emerald-600 uppercase tracking-widest py-1 px-3 bg-emerald-50 rounded-lg" x-text="'UHID: ' + selectedAdmission?.uhid"></span>
                    </div>
                </div>
            </div>
            <button @click="resetSelection()" type="button" class="px-6 py-4 bg-slate-100 text-slate-500 rounded-2xl text-[10px] font-black uppercase tracking-widest hover:bg-rose-600 hover:text-white transition-all active:scale-95">Change Admission</button>
        </div>
    </div>

    <!-- Main Entry Form (Repeater) -->
    <div x-show="selectedAdmission" x-transition class="w-full pb-20">
        <form action="{{ route('branch.ipd-patient-charges.store') }}" method="POST">
            @csrf
            <input type="hidden" name="ipd_registration_id" :value="selectedAdmission?.id">

            <div class="bg-white rounded-[40px] shadow-sm border border-slate-100 italic overflow-hidden">
                <div class="p-8 border-b border-slate-50 bg-slate-50/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-xl flex items-center justify-center shadow-lg">
                            <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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        </div>
                        <div>
                            <h3 class="text-base font-black text-slate-800 uppercase tracking-tighter leading-none">Charge Ledger Entry</h3>
                            <p class="text-[9px] text-slate-400 font-bold uppercase tracking-widest mt-1 uppercase">Enter multiple service items in one go</p>
                        </div>
                    </div>
                    <button type="button" @click="addCharge()" class="px-6 py-3 bg-indigo-600 text-white rounded-xl text-[10px] font-black uppercase tracking-widest hover:bg-slate-900 transition-all flex items-center gap-2">
                        <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 4v16m8-8H4"/></svg>
                        Add Row
                    </button>
                </div>

                <div class="overflow-x-auto">
                    <table class="w-full text-left border-collapse">
                        <thead>
                            <tr class="text-[10px] font-black uppercase tracking-widest text-slate-500 border-b border-slate-100 bg-slate-50/50">
                                <th class="px-6 py-5">S.No</th>
                                <th class="px-6 py-5 w-44 text-center">Service Date</th>
                                <th class="px-6 py-5 min-w-[200px]">Charge Category</th>
                                <th class="px-6 py-5 w-32 text-right tracking-tight">Unit Rate (₹)</th>
                                <th class="px-6 py-5 w-24 text-center">Qty</th>
                                <th class="px-6 py-5 w-32 text-right">Row Total</th>
                                <th class="px-6 py-5 min-w-[200px]">Remarks / Particulars</th>
                                <th class="px-6 py-5 text-center"></th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-50">
                            <template x-for="(charge, index) in charges" :key="index">
                                <tr class="hover:bg-slate-50/50 transition-colors">
                                    <td class="px-6 py-4">
                                        <span class="text-[10px] font-black text-slate-300" x-text="index + 1"></span>
                                    </td>
                                    <td class="px-6 py-4">
                                        <input type="date" :name="'charges['+index+'][date]'" x-model="charge.date" required
                                               class="w-full px-4 py-3 bg-white border border-slate-200 rounded-xl text-[11px] font-bold text-slate-700 hover:border-slate-300 focus:ring-4 focus:ring-indigo-100 focus:border-indigo-500 transition-all outline-none shadow-sm">
                                    </td>
                                    <td class="px-6 py-4">
                                        <div class="relative">
                                            <select :name="'charges['+index+'][charge_type_id]'" x-model="charge.charge_type_id" required
                                                    class="w-full px-4 py-3 bg-white border border-slate-200 rounded-xl text-[11px] font-bold text-slate-700 hover:border-slate-300 focus:ring-4 focus:ring-indigo-100 focus:border-indigo-500 transition-all outline-none appearance-none shadow-sm">
                                                <option value="">Choose Service...</option>
                                                @foreach($chargeTypes as $type)
                                                    <option value="{{ $type->id }}">{{ $type->name }}</option>
                                                @endforeach
                                            </select>
                                            <div class="absolute inset-y-0 right-4 flex items-center pointer-events-none text-slate-400">
                                                <svg class="h-3 w-3" 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>
                                    </td>
                                    <td class="px-6 py-4">
                                        <input type="number" step="0.01" :name="'charges['+index+'][rate]'" x-model.number="charge.rate" required
                                               placeholder="0.00"
                                               class="w-full px-4 py-3 bg-white border border-slate-200 rounded-xl text-[11px] font-bold text-slate-700 text-right hover:border-slate-300 focus:ring-4 focus:ring-indigo-100 focus:border-indigo-500 transition-all outline-none shadow-sm">
                                    </td>
                                    <td class="px-6 py-4">
                                        <input type="number" :name="'charges['+index+'][qty]'" x-model.number="charge.qty" required
                                               placeholder="1"
                                               class="w-full px-3 py-3 bg-white border border-slate-200 rounded-xl text-[11px] font-bold text-slate-700 text-right hover:border-slate-300 focus:ring-4 focus:ring-indigo-100 focus:border-indigo-500 transition-all outline-none shadow-sm">
                                    </td>
                                    <td class="px-6 py-4 text-right">
                                        <div class="px-4 py-3 bg-indigo-50/50 text-indigo-600 rounded-xl text-[11px] font-black border border-indigo-100/50" x-text="'₹' + (charge.rate * charge.qty).toFixed(2)"></div>
                                        <input type="hidden" :name="'charges['+index+'][amount]'" :value="(charge.rate * charge.qty).toFixed(2)">
                                    </td>
                                    <td class="px-6 py-4">
                                        <input type="text" :name="'charges['+index+'][remarks]'" x-model="charge.remarks"
                                               class="w-full px-4 py-3 bg-white border border-slate-200 rounded-xl text-[11px] font-bold text-slate-700 hover:border-slate-300 focus:ring-4 focus:ring-indigo-100 focus:border-indigo-500 transition-all outline-none shadow-sm"
                                               placeholder="Optional remarks...">
                                    </td>
                                    <td class="px-6 py-4 text-center">
                                        <button type="button" @click="removeCharge(index)" x-show="charges.length > 1"
                                                class="p-2 text-rose-400 hover:bg-rose-50 rounded-lg transition-all focus:outline-none">
                                            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                        </button>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>

                <!-- Footer: Review & Submit -->
                <div class="p-10 bg-slate-900 flex flex-col md:flex-row items-center justify-between gap-8">
                    <div class="flex items-center gap-10">
                        <div class="border-r border-slate-800 pr-10">
                            <p class="text-[10px] font-black text-slate-500 uppercase tracking-widest mb-1">Row Count</p>
                            <p class="text-2xl font-black text-white" x-text="charges.length"></p>
                        </div>
                        <div>
                            <p class="text-[10px] font-black text-indigo-400 uppercase tracking-widest mb-1">Grand Cumulative Total</p>
                            <p class="text-4xl font-black text-white tracking-tighter" x-text="'₹' + grandTotal()"></p>
                        </div>
                    </div>
                    <button type="submit" class="w-full md:w-auto px-12 py-6 bg-indigo-600 text-white rounded-[2rem] text-xs font-black uppercase tracking-widest hover:bg-white hover:text-indigo-600 transition-all shadow-2xl shadow-indigo-100 flex items-center justify-center gap-3 group">
                        Confirm & Record All Charges
                        <svg class="h-4 w-4 group-hover:translate-x-1 transition-transform" 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>
        </form>
    </div>
</div>

@push('scripts')
<script>
function chargeForm(initAdmit, defaultDate) {
    return {
        searchQuery: '',
        results: [],
        showResults: false,
        selectedAdmission: initAdmit && initAdmit.id ? initAdmit : null,
        charges: [
            { date: defaultDate, charge_type_id: '', rate: 0, qty: 1, remarks: '' }
        ],

        addCharge() {
            this.charges.push({
                date: defaultDate,
                charge_type_id: '',
                rate: 0,
                qty: 1,
                remarks: ''
            });
        },

        removeCharge(index) {
            this.charges.splice(index, 1);
        },

        grandTotal() {
            return this.charges.reduce((sum, c) => sum + (c.rate * c.qty), 0).toFixed(2);
        },

        async searchAdmissions() {
            if (this.searchQuery.length < 2) {
                this.results = [];
                this.showResults = false;
                return;
            }
            try {
                const response = await fetch(`{{ route('branch.ipd-patient-charges.search-admissions') }}?q=${encodeURIComponent(this.searchQuery)}`);
                this.results = await response.json();
                this.showResults = true;
            } catch (error) {
                console.error('Search failed', error);
            }
        },

        selectAdmission(a) {
            this.selectedAdmission = a;
            this.showResults = false;
            this.results = [];
            this.searchQuery = '';
        },

        resetSelection() {
            this.selectedAdmission = null;
            this.searchQuery = '';
        }
    }
}
</script>
@endpush
@endsection