<div x-show="isGenerateDialogOpen" class="modal modal-open" style="z-index: 9999;">
    <div class="modal-box max-w-4xl h-[85vh] flex flex-col">
        <!-- Header -->
        <div class="flex justify-between items-center mb-4">
            <h3 class="font-bold text-lg">
                Generate Result: <span class="font-mono" x-text="generateAccessnumber"></span>
            </h3>
            <button @click="closeGenerateDialog()" class="btn btn-sm btn-circle btn-ghost">
                ✕
            </button>
        </div>
        
        <!-- Language Selector -->
        <div class="flex items-center gap-4 mb-4 p-4 bg-base-200 rounded-lg">
            <span class="font-semibold">Language:</span>
            <div class="join">
                <button 
                    @click="generateLang = 0"
                    :class="generateLang === 0 ? 'btn-active' : ''"
                    class="btn join-item">
                    <i class="fa fa-language mr-1"></i> Indo
                </button>
                <button 
                    @click="generateLang = 1"
                    :class="generateLang === 1 ? 'btn-active' : ''"
                    class="btn join-item">
                    <i class="fa fa-language mr-1"></i> Eng
                </button>
            </div>
            <div class="flex-1"></div>
            <button 
                @click="generatePdfFromDialog()"
                class="btn btn-primary">
                <i class="fa fa-file-pdf mr-1"></i> PDF
            </button>
        </div>
        
        <!-- Report Display Area -->
        <div class="flex-1 flex flex-col min-h-0">
            <template x-if="generateAccessnumber">
                <iframe 
                    :src="`${BASEURL}/report/${generateAccessnumber}?eng=${generateLang}`" 
                    class="w-full h-full border-0 rounded-lg"
                    style="min-height: 60vh;"></iframe>
            </template>
            <template x-if="!generateAccessnumber">
                <div class="flex items-center justify-center h-full text-base-content/50">
                    <p>No report selected</p>
                </div>
            </template>
        </div>
        
        <!-- Footer -->
        <div class="flex justify-end items-center mt-4 pt-4 border-t border-base-300 gap-2">
            <button @click="closeGenerateDialog()" class="btn btn-sm">
                Close
            </button>
        </div>
    </div>
</div>