<dialog class="modal" :open="isDialogEngResultOpen" @keydown.escape="closeEngResultDialog()">
	<div class="modal-box w-2/3 max-w-5xl h-[85vh] flex flex-col p-0 overflow-hidden bg-base-100" x-trap.noreturn="isDialogEngResultOpen">
		<!-- Header -->
		<div class="bg-base-200 p-3 border-b border-base-300">
			<div class="flex justify-between items-center">
				<div>
					<h3 class="font-bold text-lg">Create Eng Result</h3>
					<div class="text-sm text-base-content/70 mt-1">
						Access#: <span x-text="engResultItem?.SP_ACCESSNUMBER" class="font-mono font-bold"></span>
						<span class="mx-2">|</span>
						Patient: <span x-text="engResultItem?.PATNAME || engResultItem?.Name"></span>
					</div>
				</div>
				<button class="btn btn-sm btn-ghost" @click="closeEngResultDialog()" aria-label="Close">
					<i class="fa fa-times"></i>
				</button>
			</div>
		</div>

		<!-- Content -->
		<div class="flex-1 flex flex-col min-h-0 p-4">
			<p class="text-sm text-base-content/70 mb-3">
				Review the English version below. If it looks correct, click Confirm to enable Print Eng and PDF Eng options.
				<span x-show="!engResultItem?.VAL1USER || !engResultItem?.VAL2USER" class="text-error ml-2">
					<i class="fa fa-exclamation-circle"></i> Request must be validated first
				</span>
			</p>

			<div class="flex-1 relative">
				<!-- Loading spinner -->
				<template x-if="!isEngResultIframeLoaded">
					<div class="absolute inset-0 flex items-center justify-center bg-base-100 z-10">
						<span class="loading loading-spinner loading-lg text-primary"></span>
					</div>
				</template>

				<!-- English report iframe -->
				<iframe id="eng-result-iframe"
					x-ref="engResultIframe"
					:src="getEngResultUrl()"
					@load="onEngResultIframeLoad()"
					class="w-full h-full border border-base-300 rounded"
					frameborder="0"></iframe>
			</div>
		</div>

		<!-- Footer -->
		<div class="bg-base-200 p-4 border-t border-base-300 flex justify-between items-center">
			<div class="text-xs text-base-content/60">
				<span x-show="!isEngResultIframeLoaded">Loading preview...</span>
				<span x-show="isEngResultIframeLoaded" class="text-success">
					<i class="fa fa-check-circle"></i> Preview loaded
				</span>
			</div>
			<div class="flex gap-2">
				<button class="btn btn-sm" @click="closeEngResultDialog()">
					Cancel
				</button>
				<button class="btn btn-sm btn-primary"
					@click="confirmCreateEngResult()"
					:disabled="!isEngResultIframeLoaded || isCreatingEngResult || !engResultItem?.VAL1USER || !engResultItem?.VAL2USER">
					<span x-show="!isCreatingEngResult">Confirm</span>
					<span x-show="isCreatingEngResult" class="flex items-center gap-2">
						<span class="loading loading-spinner loading-xs"></span>
						Creating...
					</span>
				</button>
			</div>
		</div>
	</div>
	<div class="modal-backdrop bg-black/30" @click="closeEngResultDialog()"></div>
</dialog>
