@extends('layouts.branch')

@section('title', "IPD Billing Directory")
@section('header', "Service Charge Ledger")

@section('content')
<div class="space-y-8" x-data="chargeledger()">
    <!-- Stats / Overview -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="bg-white p-8 rounded-[40px] shadow-sm border border-slate-100 italic relative overflow-hidden group hover:border-indigo-200 transition-all">
            <div class="relative z-10">
                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">Total Entries</p>
                <h3 class="text-3xl font-black text-slate-800 tracking-tighter uppercase">{{ $charges->total() }}</h3>
            </div>
            <div class="absolute -bottom-6 -right-6 h-24 w-24 bg-indigo-50 rounded-full blur-2xl group-hover:bg-indigo-100 transition-colors"></div>
        </div>

        <div class="md:col-span-2 bg-indigo-600 p-8 rounded-[40px] shadow-2xl shadow-indigo-100 italic relative overflow-hidden flex items-center justify-between group">
            <div class="relative z-10">
                <h3 class="text-2xl font-black text-white tracking-tighter uppercase leading-tight">Service Billing Entry</h3>
                <p class="text-[10px] text-indigo-200 font-bold uppercase tracking-widest mt-1">Record new patient services, room rent, and nursing charges</p>
            </div>
            <a href="{{ route('branch.ipd-patient-charges.create') }}" class="relative z-10 px-8 py-4 bg-white text-indigo-600 rounded-2xl text-[10px] font-black uppercase tracking-widest hover:bg-slate-900 hover:text-white transition-all active:scale-95 flex items-center gap-3">
                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 4v16m8-8H4"/></svg>
                New Entry
            </a>
            <div class="absolute inset-0 bg-gradient-to-br from-indigo-500 to-indigo-700 opacity-50"></div>
        </div>
    </div>

    <!-- Filters & Directory -->
    <div class="bg-white rounded-[50px] shadow-sm border border-slate-100 overflow-hidden italic">
        <div class="p-10 border-b border-slate-50 flex flex-col md:flex-row md:items-center justify-between gap-8 bg-slate-50/50">
            <div class="flex items-center gap-4">
                <div class="h-12 w-12 bg-slate-900 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-slate-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="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.01M9 16h.01"/></svg>
                </div>
                <div>
                    <h3 class="text-xl font-black text-slate-800 uppercase tracking-tighter leading-none">Billing Ledger</h3>
                    <p class="text-[9px] text-slate-400 font-bold uppercase tracking-widest mt-1 uppercase text-inherit">Comprehensive log of all service charges recorded</p>
                </div>
            </div>

            <div class="flex flex-wrap items-center gap-4">
                <div class="relative group">
                    <div class="absolute inset-y-0 left-5 flex items-center pointer-events-none">
                        <svg class="h-4 w-4 text-slate-300 group-focus-within:text-indigo-600 transition-colors" 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>
                    <input type="text" x-model="filters.q" @input.debounce.500ms="fetchCharges()" placeholder="Search Name, UHID, IPD, Mobile..." 
                           class="pl-12 pr-6 py-4 bg-white border border-slate-200 rounded-2xl text-[10px] font-black uppercase tracking-widest focus:ring-4 focus:ring-indigo-50 focus:border-indigo-600 transition-all outline-none w-80 shadow-sm">
                </div>

                <div class="relative group">
                    <input type="date" x-model="filters.date" @change="fetchCharges()" 
                           class="px-6 py-4 bg-white border border-slate-200 rounded-2xl text-[10px] font-black uppercase tracking-widest focus:ring-4 focus:ring-indigo-50 focus:border-indigo-600 transition-all outline-none shadow-sm">
                </div>
            </div>
        </div>

        <div id="charges_table">
            @include('branch.ipd_patient_charges._table', ['hasSearch' => $hasSearch])
        </div>
    </div>
</div>

@push('scripts')
<script>
function chargeledger() {
    return {
        filters: {
            q: '{{ request('q') }}',
            date: '{{ request('date') }}'
        },
        async fetchCharges() {
            const params = new URLSearchParams(this.filters);
            try {
                const response = await fetch(`{{ route('branch.ipd-patient-charges.index') }}?${params.toString()}`, {
                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
                });
                const html = await response.text();
                document.getElementById('charges_table').innerHTML = html;
            } catch (error) {
                console.error('Fetch failed', error);
            }
        }
    }
}
</script>
@endpush
@endsection