<dialog class="modal" :open="isDialogPreviewOpen" @keydown.escape="closePreviewDialog()">
	<div class="modal-box w-2/3 max-w-5xl" x-trap.noreturn="isDialogPreviewOpen">
		<!-- 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="previewAccessnumber" class="font-mono font-bold"></span></div>
				<div>Patient: <span x-text="previewItem?.PATNAME || previewItem?.Name"></span></div>
				<div>MRN: <span x-text="previewItem?.PATNUMBER?.substring(14) || previewItem?.PATNUMBER"></span></div>
				<div>Tests: <span x-text="(previewItem?.TESTS || previewItem?.TESTNAMES || '').substring(0,40) + '...'"></span></div>
			</div>
		</div>

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

		<p class="mb-2 flex gap-2 items-center">
			<button id="preview-validate-btn" class="btn btn-sm btn-success"
				@click="validateFromPreview(previewAccessnumber, '<?=session('userid');?>')"
				:disabled="!isPreviewIframeLoaded || isPreviewValidating || previewItem?.VAL1USER === '<?=session('userid');?>' || previewItem?.VAL2USER === '<?=session('userid');?>'">
				<span x-text="isPreviewValidating ? 'Validating...' : 'Validate'"></span>
				<span x-show="isPreviewValidating" class="loading loading-spinner loading-xs ml-1"></span>
			</button>
			<a :href="'<?=base_url('report/');?>' + previewAccessnumber" target="_blank" class="btn btn-sm btn-primary" :disabled="!isPreviewIframeLoaded">
				<i class="fa fa-print mr-1"></i> Print
			</a>
			<button class="btn btn-sm btn-ghost" @click="closePreviewDialog()">
				Close (Esc)
			</button>
			<span x-show="previewItem?.VAL1USER === '<?=session('userid');?>' || previewItem?.VAL2USER === '<?=session('userid');?>'" class="text-sm text-error">
				<i class="fa fa-exclamation-circle"></i> You have already validated this request
			</span>
		</p>
		<iframe id="preview-iframe" x-ref="previewIframe" :src="getPreviewUrl()" @load="onPreviewIframeLoad()" width="100%" height="500px"
			class="border border-base-300 rounded"></iframe>

		<!-- Loading overlay -->
		<template x-if="isPreviewValidating">
			<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>
</dialog>
