@extends('layouts.branch')

@section('title', "IPD Admissions Directory")
@section('header', "IPD Admissions")

@section('content')
<div class="space-y-6" x-data="{ 
    filters: {
        ipd_number: '{{ request('ipd_number') }}',
        uhid: '{{ request('uhid') }}',
        patient_name: '{{ request('patient_name') }}',
        mobile_number: '{{ request('mobile_number') }}',
        admission_date: '{{ request('admission_date') }}',
        sort_by: '{{ request('sort_by', 'created_at') }}',
        sort_order: '{{ request('sort_order', 'desc') }}'
    },
    loading: false,
    updateTable(url = null) {
        this.loading = true;
        if (!url) {
            const params = new URLSearchParams(this.filters).toString();
            url = `{{ route('branch.ipd-registrations.index') }}?${params}`;
        }
        
        fetch(url, {
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(res => res.text())
        .then(html => {
            document.getElementById('ipd-table-container').innerHTML = html;
            window.history.pushState({}, '', url);
            this.bindPagination();
            this.loading = false;
        });
    },
    sortBy(field) {
        if (this.filters.sort_by === field) {
            this.filters.sort_order = this.filters.sort_order === 'asc' ? 'desc' : 'asc';
        } else {
            this.filters.sort_by = field;
            this.filters.sort_order = 'asc';
        }
        this.updateTable();
    },
    bindPagination() {
        document.querySelectorAll('.ajax-pagination a').forEach(link => {
            link.addEventListener('click', (e) => {
                e.preventDefault();
                this.updateTable(link.getAttribute('href'));
            });
        });
    }
}" x-init="bindPagination()">

    <!-- Modern Command Bar -->
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 bg-white p-8 rounded-[40px] shadow-sm border border-slate-100 italic relative overflow-hidden">
        <div class="relative z-10">
            <h2 class="text-3xl font-black text-slate-800 tracking-tighter uppercase leading-none">Admission Desk</h2>
            <p class="text-[10px] text-slate-400 font-bold tracking-widest uppercase mt-2">Manage active admissions and clinical intake</p>
        </div>

        <div class="flex flex-wrap items-center gap-4 relative z-10">
            <a href="{{ route('branch.ipd-registrations.history') }}" class="inline-flex items-center gap-3 px-6 py-4 bg-white border border-slate-200 text-slate-600 rounded-[2rem] text-[11px] font-black uppercase tracking-widest hover:bg-slate-50 transition-all shadow-sm h-[58px]">
                <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                Discharge History
            </a>
            <a href="{{ route('branch.ipd-registrations.create') }}" class="inline-flex items-center gap-3 px-8 py-4 bg-slate-900 text-white rounded-[2rem] text-[11px] font-black uppercase tracking-widest hover:bg-indigo-600 transition-all shadow-xl shadow-slate-200 group h-[58px]">
                <svg class="h-4 w-4 transition-transform group-hover:scale-125 group-hover:rotate-90" 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 Admission
            </a>
        </div>
        
        <!-- Background Decoration -->
        <div class="absolute top-0 right-0 w-64 h-64 bg-indigo-50 rounded-full blur-3xl opacity-50 -mr-32 -mt-32"></div>
    </div>

    <!-- Advanced Filter Bar -->
    <div class="bg-white p-6 rounded-[32px] shadow-sm border border-slate-100 italic relative overflow-hidden">
        <div class="flex flex-wrap lg:flex-nowrap items-end gap-4 relative z-10">
            <div class="flex-1 min-w-[140px] space-y-1.5">
                <label class="text-[9px] font-black text-slate-400 uppercase tracking-widest ml-1">IPD Case No</label>
                <input type="text" x-model.debounce.500ms="filters.ipd_number" @input="updateTable()"
                       placeholder="CASE NO..."
                       class="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl text-[10px] font-black uppercase tracking-widest focus:ring-2 focus:ring-indigo-500 outline-none transition-all">
            </div>
            <div class="flex-1 min-w-[120px] space-y-1.5">
                <label class="text-[9px] font-black text-slate-400 uppercase tracking-widest ml-1">UHID</label>
                <input type="text" x-model.debounce.500ms="filters.uhid" @input="updateTable()"
                       placeholder="UHID..."
                       class="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl text-[10px] font-black uppercase tracking-widest focus:ring-2 focus:ring-indigo-500 outline-none transition-all">
            </div>
            <div class="flex-1 min-w-[180px] space-y-1.5">
                <label class="text-[9px] font-black text-slate-400 uppercase tracking-widest ml-1">Patient Name</label>
                <input type="text" x-model.debounce.500ms="filters.patient_name" @input="updateTable()"
                       placeholder="SEARCH NAME..."
                       class="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl text-[10px] font-black uppercase tracking-widest focus:ring-2 focus:ring-indigo-500 outline-none transition-all">
            </div>
            <div class="flex-1 min-w-[140px] space-y-1.5">
                <label class="text-[9px] font-black text-slate-400 uppercase tracking-widest ml-1">Mobile No</label>
                <input type="text" x-model.debounce.500ms="filters.mobile_number" @input="updateTable()"
                       placeholder="MOBILE..."
                       class="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl text-[10px] font-black uppercase tracking-widest focus:ring-2 focus:ring-indigo-500 outline-none transition-all">
            </div>
            <div class="flex-1 min-w-[140px] space-y-1.5">
                <label class="text-[9px] font-black text-slate-400 uppercase tracking-widest ml-1">Admission Date</label>
                <input type="date" x-model="filters.admission_date" @change="updateTable()"
                       class="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl text-[10px] font-black tracking-widest focus:ring-2 focus:ring-indigo-500 outline-none transition-all">
            </div>
            <div class="h-[42px] flex items-center gap-2">
                <a :href="'{{ route('branch.ipd-registrations.export-pdf') }}?' + new URLSearchParams(filters).toString()" 
                   class="px-5 py-3 bg-rose-600 text-white rounded-xl font-black uppercase tracking-widest text-[9px] hover:bg-rose-700 transition-all shadow-lg shadow-rose-100 flex items-center justify-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="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                    Export
                </a>
                <button @click="filters = {ipd_number:'', uhid:'', patient_name:'', mobile_number:'', admission_date:'', sort_by:'created_at', sort_order:'desc'}; updateTable()" 
                        class="px-5 py-3 bg-slate-100 text-slate-500 rounded-xl font-black uppercase tracking-widest text-[9px] hover:bg-slate-200 transition-all flex items-center justify-center">
                    Reset
                </button>
            </div>
        </div>
    </div>

    <!-- Table Section -->
    <div class="bg-white rounded-[40px] shadow-sm border border-slate-100 italic overflow-hidden relative min-h-[400px]">
        <!-- Loading Overlay -->
        <div x-show="loading" class="absolute inset-0 bg-white/50 backdrop-blur-[2px] z-20 flex items-center justify-center transition-all">
            <div class="flex flex-col items-center gap-4">
                <div class="w-12 h-12 border-4 border-indigo-600 border-t-transparent rounded-full animate-spin"></div>
                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Refreshing Desk...</p>
            </div>
        </div>

        <div id="ipd-table-container">
            @include('branch.ipd_registrations._table', ['admissions' => $admissions])
        </div>
    </div>
</div>
@endsection