<div class="card bg-base-100 shadow-xl h-full border border-base-200 overflow-hidden">
	<div class="card-body p-0 h-full flex flex-col">

		<!-- Header & Filters -->
		<div class="p-4 border-b border-base-200 bg-base-50">
			<div class="flex flex-col md:flex-row justify-between items-center gap-4 mb-4">
				<div class="flex-1">
					<h2 class="text-2xl font-bold flex items-center gap-2 text-base-content">
						<i class="fa fa-chart-bar text-primary"></i> Requests Overview
					</h2>
				</div>

				<!-- Status Filters -->
				<div class="join shadow-sm bg-base-100 rounded-lg">
					<button @click="filterKey = 'Total'"
						:class="filterKey === 'Total' ? 'btn-active btn-neutral text-white' : 'btn-ghost'"
						class="btn btn-sm join-item">
						All <span class="badge badge-sm badge-ghost ml-1" x-text="counters.Total"></span>
					</button>
					<button @click="filterKey = 'Pend'"
						:class="filterKey === 'Pend' ? 'btn-active btn-status-pend' : 'btn-ghost'"
						class="btn btn-sm join-item">
						Pending <span class="badge badge-sm badge-status-pend ml-1" x-text="counters.Pend"></span>
					</button>
					<button @click="filterKey = 'Coll'"
						:class="filterKey === 'Coll' ? 'btn-active btn-status-coll' : 'btn-ghost'"
						class="btn btn-sm join-item">
						Coll <span class="badge badge-sm badge-status-coll ml-1" x-text="counters.Coll"></span>
					</button>
					<button @click="filterKey = 'Recv'"
						:class="filterKey === 'Recv' ? 'btn-active btn-status-recv' : 'btn-ghost'" class="btn btn-sm join-item">
						Recv <span class="badge badge-sm badge-status-recv ml-1" x-text="counters.Recv"></span>
					</button>
					<button @click="filterKey = 'Inc'"
						:class="filterKey === 'Inc' ? 'btn-active btn-status-inc' : 'btn-ghost'" class="btn btn-sm join-item">
						Inc <span class="badge badge-sm badge-status-inc ml-1" x-text="counters.Inc"></span>
					</button>
					<button @click="filterKey = 'Fin'"
						:class="filterKey === 'Fin' ? 'btn-active btn-status-fin' : 'btn-ghost'"
						class="btn btn-sm join-item">
						Fin <span class="badge badge-sm badge-status-fin ml-1" x-text="counters.Fin"></span>
					</button>
					<button @click="filterKey = 'Validated'"
						:class="filterKey === 'Validated' ? 'btn-active btn-primary text-white' : 'btn-ghost'"
						class="btn btn-sm join-item">
						Val <span class="badge badge-sm badge-primary ml-1" x-text="validatedCount"></span>
					</button>
				</div>
			</div>

			<!-- Search & Date Filter -->
			<div
				class="flex flex-col md:flex-row gap-3 items-end bg-base-100 p-3 rounded-lg border border-base-200 shadow-sm">
				<div class="form-control">
					<label class="label text-xs font-bold py-1 text-base-content/60">Date Range</label>
					<div class="join">
						<input type="date" class="input input-sm input-bordered join-item" x-model="filter.date1" />
						<span class="join-item btn btn-sm btn-ghost no-animation bg-base-200 font-normal px-2">-</span>
						<input type="date" class="input input-sm input-bordered join-item" x-model="filter.date2" />
					</div>
				</div>

				<div class="flex gap-2">
					<button class="btn btn-sm btn-primary" @click='fetchList()'><i class='fa fa-search'></i> Search</button>
					<button class="btn btn-sm btn-neutral" @click='reset()'><i class='fa fa-sync-alt'></i> Reset</button>
				</div>

				<span class="flex-1"></span>

				<div class="form-control w-full md:w-auto">
					<label class='input input-sm input-bordered'>
						<i class="fa fa-filter"></i>
						<input type="text" placeholder="Type to filter..." x-model="filterTable" />
					</label>
				</div>
			</div>
		</div>

		<div class="flex-1 overflow-y-auto px-4 pb-4">
			<template x-if="isLoading">
				<table class="table table-xs table-zebra w-full">
					<thead class="bg-base-100 sticky top-0 z-10">
						<tr>
							<th style='width:8%;'>
								<div class="skeleton h-4 w-20"></div>
							</th>
							<th style='width:15%;'>
								<div class="skeleton h-4 w-32"></div>
							</th>
							<th style='width:7%;'>
								<div class="skeleton h-4 w-16"></div>
							</th>
							<th style='width:8%;'>
								<div class="skeleton h-4 w-16"></div>
							</th>
							<th style='width:8%;'>
								<div class="skeleton h-4 w-16"></div>
							</th>
							<th style='width:8%;'>
								<div class="skeleton h-4 w-20"></div>
							</th>
							<th style='width:15%;'>
								<div class="skeleton h-4 w-32"></div>
							</th>
							<th style='width:3%;'>
								<div class="skeleton h-4 w-12"></div>
							</th>
							<th style='width:5%;'>
								<div class="skeleton h-4 w-16"></div>
							</th>
							<th style='width:5%;'>
								<div class="skeleton h-4 w-16"></div>
							</th>
							<th style='width:4%;'>
								<div class="skeleton h-4 w-12"></div>
							</th>
						</tr>
					</thead>
					<tbody>
						<template x-for="i in 5" :key="i">
							<tr>
								<td colspan="11">
									<div class="skeleton h-4 w-full"></div>
								</td>
							</tr>
						</template>
					</tbody>
				</table>
			</template>
			<template x-if="!isLoading && !list.length">
				<div class="text-center py-10">
					<i class="fa fa-inbox text-4xl mb-2 opacity-50"></i>
					<p>No records found</p>
				</div>
			</template>
			<template x-if="!isLoading && list.length">
				<table class="table table-xs table-zebra w-full">
					<thead class="bg-base-100 sticky top-0 z-10">
						<tr>
							<th style='width:8%;' @click="sort('REQDATE')"
								class="cursor-pointer hover:bg-base-200 transition-colors select-none">
								<div class="flex items-center gap-1">
									Order Datetime
									<i class="fa text-xs"
										:class="sortCol === 'REQDATE' ? (sortAsc ? 'fa-sort-up' : 'fa-sort-down') : 'fa-sort opacity-20'"></i>
								</div>
							</th>
							<th style='width:15%;' @click="sort('Name')"
								class="cursor-pointer hover:bg-base-200 transition-colors select-none">
								<div class="flex items-center gap-1">
									Patient Name
									<i class="fa text-xs"
										:class="sortCol === 'Name' ? (sortAsc ? 'fa-sort-up' : 'fa-sort-down') : 'fa-sort opacity-20'"></i>
								</div>
							</th>
							<th style='width:7%;' @click="sort('SP_ACCESSNUMBER')"
								class="cursor-pointer hover:bg-base-200 transition-colors select-none">
								<div class="flex items-center gap-1">
									No Lab
									<i class="fa text-xs"
										:class="sortCol === 'SP_ACCESSNUMBER' ? (sortAsc ? 'fa-sort-up' : 'fa-sort-down') : 'fa-sort opacity-20'"></i>
								</div>
							</th>
							<th style='width:8%;' @click="sort('HOSTORDERNUMBER')"
								class="cursor-pointer hover:bg-base-200 transition-colors select-none">
								<div class="flex items-center gap-1">
									No Register
									<i class="fa text-xs"
										:class="sortCol === 'HOSTORDERNUMBER' ? (sortAsc ? 'fa-sort-up' : 'fa-sort-down') : 'fa-sort opacity-20'"></i>
								</div>
							</th>
							<th style='width:8%;' @click="sort('REFF')"
								class="cursor-pointer hover:bg-base-200 transition-colors select-none">
								<div class="flex items-center gap-1">
									Reff
									<i class="fa text-xs"
										:class="sortCol === 'REFF' ? (sortAsc ? 'fa-sort-up' : 'fa-sort-down') : 'fa-sort opacity-20'"></i>
								</div>
							</th>
							<th style='width:8%;' @click="sort('DOC')"
								class="cursor-pointer hover:bg-base-200 transition-colors select-none">
								<div class="flex items-center gap-1">
									Doctor
									<i class="fa text-xs"
										:class="sortCol === 'DOC' ? (sortAsc ? 'fa-sort-up' : 'fa-sort-down') : 'fa-sort opacity-20'"></i>
								</div>
							</th>
							<th style='width:15%;'>Tests</th>
							<th style='width:3%;'>ResTo</th>
							<th style='width:5%;'>Val</th>
							<th style='width:5%;'>Result</th>
							<th style='width:2%;'></th>
							<th style='width:2%;'></th>
						</tr>
					</thead>
					<tbody>
						<template x-for="req in paginated" :key="req.SP_ACCESSNUMBER">
							<tr class="hover:bg-base-300">
								<td x-text="req.REQDATE" :class="statusRowBg[req.STATS]"></td>
								<td x-text="req.Name" :class="statusRowBg[req.STATS]"></td>
								<td x-text="req.SP_ACCESSNUMBER" class="font-bold" :class="statusRowBg[req.STATS]"></td>
								<td x-text="req.HOSTORDERNUMBER" class="font-bold" :class="statusRowBg[req.STATS]"></td>
								<td x-text="req.REFF" :class="statusRowBg[req.STATS]"></td>
								<td x-text="req.DOC" :class="statusRowBg[req.STATS]"></td>
								<td x-text="req.TESTS" :class="statusRowBg[req.STATS]"></td>
								<td x-text="req.ODR_CRESULT_TO"></td>
								<td>
									<div class='flex gap-1 items-center'>
										<div class='w-15'>
											<p>1: <span x-text="req.VAL1USER"></span></p>
											<p>2: <span x-text="req.VAL2USER"></span></p>
										</div>
										<template x-if="req.ISVAL == 1 && req.ISPENDING != 1">
											<div class='text-center'>
												<?php if (session()->get('userlevel') <= 1): ?>
												<template
													x-if="req.VAL1USER == '<?= session('userid'); ?>' || req.VAL2USER == '<?= session('userid'); ?>'">
													<button class="btn btn-xs btn-outline btn-secondary"
														@click="openUnvalDialog(req.SP_ACCESSNUMBER)">
														<span class="text-error font-bold">UnVal</span>
													</button>
												</template>
												<?php endif; ?>
											</div>
										</template>
									</div>
								</td>
								<td>
									<template x-if="req.VAL1USER && req.VAL2USER">
										<div class='flex flex-col gap-1'>
											<div class="flex gap-1">
												<a :href="'<?=base_url('report/');?>' + req.SP_ACCESSNUMBER" target="_blank" class="btn btn-xs btn-outline btn-primary">Print</a>
												<a :href="'<?=base_url('report/');?>' + req.SP_ACCESSNUMBER" target="_blank" class="btn btn-xs btn-outline btn-primary">PDF</a>
											</div>
											<button class="btn btn-xs btn-warning btn-outline" 
												@click="retryPdf(req.SP_ACCESSNUMBER)"
												title="Retry PDF generation">
												<i class="fa fa-sync-alt" :class="{ 'fa-spin': retryingPdf[req.SP_ACCESSNUMBER] }"></i>
												<span x-text="retryingPdf[req.SP_ACCESSNUMBER] ? 'Retrying...' : 'Retry PDF'"></span>
											</button>
										</div>
									</template>
								</td>
								<td>
									<button class="btn btn-xs btn-ghost"
										@click="openSampleDialog(req.SP_ACCESSNUMBER)"
										title="View Samples">
										<i class="fa fa-vial text-success"></i>
									</button>
								</td>
								<td>
									<button class="btn btn-xs btn-ghost"
										@click="openAuditDialog(req.SP_ACCESSNUMBER)"
										title="View Audit Trail">
										<i class="fa fa-history text-info"></i>
									</button>
								</td>
							</tr>
						</template>
					</tbody>
				</table>
			</template>
		</div>

		<!-- Pagination Control -->
		<div class="p-2 border-t border-base-200 bg-base-50 flex justify-between items-center"
			x-show="!isLoading && list.length > 0">
			<div class="text-xs text-base-content/60">
				Showing <span class="font-bold" x-text="((currentPage - 1) * pageSize) + 1"></span> to
				<span class="font-bold" x-text="Math.min(currentPage * pageSize, filtered.length)"></span> of
				<span class="font-bold" x-text="filtered.length"></span> entries
			</div>
			<div class="join">
				<button class="join-item btn btn-sm" @click="prevPage()" :disabled="currentPage === 1">
					<i class="fa fa-chevron-left"></i>
				</button>
				<button class="join-item btn btn-sm no-animation bg-base-100 cursor-default">
					Page <span x-text="currentPage"></span> / <span x-text="totalPages"></span>
				</button>
				<button class="join-item btn btn-sm" @click="nextPage()" :disabled="currentPage === totalPages">
					<i class="fa fa-chevron-right"></i>
				</button>
			</div>
		</div>

	</div>
</div>