<dialog class="modal" :open="isDialogValOpen" @keydown.escape="closeValDialog()">
	<template x-if="valItem">
	<div class="modal-box w-2/3 max-w-5xl" x-trap.noreturn="isDialogValOpen">
		<!-- Progress indicator -->
		<div class="text-sm text-base-content/60 mb-2">
			<span x-text="currentIndex + 1"></span> / <span x-text="unvalidatedFiltered.length"></span>
		</div>

		<!-- Request info header -->
		<div class="bg-base-200 p-3 rounded mb-3">
			<div class="grid grid-cols-4 gap-2 text-sm">
				<div>Access#: <span x-text="valItem?.SP_ACCESSNUMBER" class="font-mono font-bold"></span></div>
				<div>Patient: <span x-text="valItem?.PATNAME || valItem?.Name"></span></div>
				<div>MRN: <span x-text="valItem?.PATNUMBER?.substring(14) || valItem?.PATNUMBER"></span></div>
				<div>Tests: <span x-text="(valItem?.TESTS || valItem?.TESTNAMES || '').substring(0,40) + '...'"></span></div>
			</div>
		</div>

		<div class="flex justify-between items-center mb-2">
			<h3 class="font-bold text-lg">Validate Request</h3>
			<button class="btn btn-sm btn-ghost" @click="closeValDialog()" aria-label="Close">
				<i class="fa fa-times"></i>
			</button>
		</div>

		<p class="mb-2 flex gap-2">
			<button id="validate-btn" x-ref="validateBtn" class="btn btn-sm btn-success"
				@click="validate(valAccessnumber, '<?=session('userid');?>')"
				:disabled="!isIframeLoaded || isValidating || validationDelayRemaining > 0"
				@keydown.enter.prevent="validate(valAccessnumber, '<?=session('userid');?>')"
				@keydown.tab="focusNext($event)">
				<span x-text="!isIframeLoaded ? 'Loading...' : (validationDelayRemaining > 0 ? `Validating in ${validationDelayRemaining}...` : 'Validate (Enter)')"></span>
				<span x-show="!isIframeLoaded && $el.disabled" class="loading loading-spinner loading-xs ml-1"></span>
			</button>
			<button class="btn btn-sm btn-neutral" @click="skipToNext()" @keydown.tab="focusPrev($event)">
				<i class="fa fa-arrow-right"></i> Skip (N)
			</button>
			<button class="btn btn-sm btn-ghost" @click="closeValDialog()" @keydown.tab="focusPrev($event)">
				Close (Esc)
			</button>
		</p>
		<iframe id="result-iframe" x-ref="resultIframe" :src="getPreviewUrl()" @load="onIframeLoad()" width="100%" height="500px"
			class="border border-base-300 rounded"></iframe>

		<!-- Loading overlay -->
		<template x-if="isValidating">
			<div class="absolute inset-0 bg-base-100/80 flex items-center justify-center z-10 rounded-box">
				<span class="loading loading-spinner loading-lg text-success"></span>
			</div>
		</template>
	</div>
	</template>
</dialog>

<!-- Toast notification -->
<div x-show="toast.show" x-transition
	 class="alert fixed bottom-4 right-4 z-50"
	 :class="toast.type === 'error' ? 'alert-error' : 'alert-success'">
	<i :class="toast.type === 'error' ? 'fa fa-times-circle' : 'fa fa-check-circle'"></i>
	<span x-text="toast.message"></span>
</div>
