@extends('layouts.branch')

@section('title', "IPD Discharge History")
@section('header', "Finalized Admissions")

@section('content')
<div class="space-y-6" x-data="{ 
    filters: {
        ipd_number: '',
        uhid: '',
        patient_name: '',
        mobile_number: '',
        sort_by: 'created_at',
        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.history') }}?${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;
        });
    },
    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-slate-900 p-8 rounded-[40px] shadow-2xl shadow-slate-200 italic relative overflow-hidden text-white">
        <div class="relative z-10">
            <h2 class="text-3xl font-black tracking-tighter uppercase leading-none italic">Discharge Archive</h2>
            <p class="text-[10px] text-slate-400 font-bold tracking-widest uppercase mt-2 italic">Searchable history of finalized clinical exits</p>
        </div>

        <div class="flex flex-wrap items-center gap-4 relative z-10">
            <a href="{{ route('branch.ipd-registrations.index') }}" class="inline-flex items-center gap-3 px-8 py-4 bg-white/10 hover:bg-white/20 text-white rounded-[2rem] text-[11px] font-black uppercase tracking-widest transition-all backdrop-blur-md 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="3" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
                Active Admissions
            </a>
        </div>
        
        <!-- Background Decoration -->
        <div class="absolute top-0 right-0 w-64 h-64 bg-indigo-500/10 rounded-full blur-3xl -mr-32 -mt-32"></div>
    </div>

    <!-- Separate Search Bars Filter -->
    <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-3 relative z-10">
            <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 Number</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-[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-[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-[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 items-center gap-2 pb-0.5">
                <button @click="filters = {ipd_number:'', uhid:'', patient_name:'', mobile_number:'', sort_by:'created_at', sort_order:'desc'}; updateTable()" 
                        class="px-6 py-3.5 bg-slate-100 text-slate-500 rounded-2xl font-black uppercase tracking-widest text-[9px] hover:bg-slate-200 transition-all flex items-center justify-center">
                    Reset search
                </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">Searching Archive...</p>
            </div>
        </div>

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