{{-- Fatoora OTP Interactive Guide Modal --}}
<div x-cloak
     x-show="showOtpModal"
     x-transition:enter="transition ease-out duration-200"
     x-transition:enter-start="opacity-0"
     x-transition:enter-end="opacity-100"
     x-transition:leave="transition ease-in duration-150"
     x-transition:leave-start="opacity-100"
     x-transition:leave-end="opacity-0"
     @keydown.escape.window="showOtpModal = false"
     class="fixed inset-0 z-50 flex items-center justify-center p-3 sm:p-4 bg-slate-900/40 dark:bg-black/65 backdrop-blur-[2px]"
     role="dialog"
     aria-modal="true"
     aria-label="{{ trans('dashboard.otp_guide_title') }}">

    <div x-show="showOtpModal"
         x-transition:enter="transition ease-out duration-250"
         x-transition:enter-start="opacity-0 translate-y-4 scale-95"
         x-transition:enter-end="opacity-100 translate-y-0 scale-100"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100 translate-y-0 scale-100"
         x-transition:leave-end="opacity-0 translate-y-4 scale-95"
         @click.outside="showOtpModal = false"
         class="relative flex max-h-[94vh] w-full max-w-[580px] flex-col overflow-hidden rounded-[20px] border border-slate-200 dark:border-slate-800 bg-white dark:bg-navy-900 text-slate-800 dark:text-slate-100 shadow-2xl">

        {{-- Dialog Header --}}
        <div class="flex items-start justify-between gap-3 border-b border-slate-100 dark:border-slate-800 px-5 py-4">
            <div>
                <div class="text-[15px] font-bold text-slate-900 dark:text-white">
                    {{ trans('dashboard.otp_guide_title') }}
                </div>
                <div class="mt-0.5 text-[11.5px] text-slate-500 dark:text-slate-400">
                    {{ trans('dashboard.otp_guide_subtitle') }}
                </div>
            </div>
            <button type="button"
                    @click="showOtpModal = false"
                    aria-label="{{ trans('dashboard.close') }}"
                    class="flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-lg text-slate-400 transition hover:bg-slate-100 hover:text-slate-700 dark:hover:bg-slate-800 dark:hover:text-white">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round">
                    <path d="M6 6l12 12M18 6L6 18"></path>
                </svg>
            </button>
        </div>

        {{-- Dialog Body --}}
        <div class="overflow-y-auto px-5 py-5">
            {{-- 5 Step Indicator Bars --}}
            <ol class="mb-4 flex items-center gap-1.5" aria-label="{{ trans('dashboard.otp_guide_step_aria') }}">
                <template x-for="i in 5" :key="i">
                    <li class="flex-1">
                        <button type="button"
                                @click="step = i"
                                :class="step >= i ? 'bg-emerald-600 dark:bg-emerald-500' : 'bg-slate-200 dark:bg-slate-800 hover:bg-slate-300 dark:hover:bg-slate-700'"
                                class="block h-1.5 w-full cursor-pointer rounded-full transition-colors duration-200"
                                :aria-current="step === i ? 'step' : null">
                        </button>
                    </li>
                </template>
            </ol>

            {{-- Browser Mockup Window --}}
            <div class="relative overflow-hidden rounded-xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-navy-950 shadow-inner" aria-hidden="true">
                {{-- Mockup Browser Header --}}
                <div class="flex items-center gap-1.5 border-b border-slate-200 dark:border-slate-800 bg-slate-100 dark:bg-slate-900/90 px-3 py-1.5">
                    <span class="h-2 w-2 rounded-full bg-red-400 dark:bg-red-500/80"></span>
                    <span class="h-2 w-2 rounded-full bg-amber-400 dark:bg-amber-500/80"></span>
                    <span class="h-2 w-2 rounded-full bg-emerald-400 dark:bg-emerald-500/80"></span>
                    <span dir="ltr"
                          class="ms-2 flex-1 truncate rounded-md bg-white dark:bg-navy-950 border border-slate-200 dark:border-slate-800 px-2.5 py-0.5 font-mono text-[10px] text-slate-600 dark:text-slate-400"
                          x-text="step === 1 ? 'login.zatca.gov.sa' : (step === 2 ? 'login.zatca.gov.sa/otp' : (step === 3 ? 'fatoora.zatca.gov.sa' : 'fatoora.zatca.gov.sa/onboard-solution'))">
                    </span>
                </div>

                {{-- Interactive Screen Area (height 240px) --}}
                <div class="h-[240px] flex items-center justify-center p-3 select-none overflow-hidden bg-slate-50/60 dark:bg-navy-950">
                    {{-- STEP 1: Login Screen --}}
                    <div x-show="step === 1" class="w-full h-full flex rounded-lg overflow-hidden border border-slate-200 dark:border-slate-800 bg-white dark:bg-navy-900 shadow-sm">
                        <div class="hidden sm:flex w-[38%] flex-col items-center justify-center gap-2.5 bg-slate-100 dark:bg-slate-900 p-3 text-center border-e border-slate-200 dark:border-slate-800">
                            <span class="flex h-10 w-10 items-center justify-center rounded-full border-2 border-emerald-600/40 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M12 2.5 4 6v6c0 5 3.4 8.4 8 9.5 4.6-1.1 8-4.5 8-9.5V6z"></path>
                                </svg>
                            </span>
                            <span class="text-[10px] font-semibold leading-4 text-slate-800 dark:text-slate-200">{{ trans('dashboard.otp_guide_zatca_authority') }}</span>
                        </div>
                        <div class="flex flex-1 flex-col justify-center gap-2 px-5 py-4">
                            <div class="text-[13px] font-bold text-slate-900 dark:text-white mb-0.5">{{ trans('dashboard.otp_guide_login_title') }}</div>
                            <div class="flex h-7 items-center rounded-md border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-navy-950 px-2.5 text-[10px] text-slate-500 dark:text-slate-400">
                                <span>{{ trans('dashboard.otp_guide_username_hint') }}</span>
                            </div>
                            <div class="flex h-7 items-center rounded-md border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-navy-950 px-2.5 text-[10px] text-slate-400 tracking-[.25em]">
                                ••••••••
                            </div>
                            <div class="text-[9.5px] text-slate-400">{{ trans('dashboard.otp_guide_forgot_hint') }}</div>
                            <div class="mt-1 self-start rounded-md bg-emerald-600 px-3.5 py-1.5 text-[10.5px] font-semibold text-white relative ring-2 ring-emerald-400 ring-offset-2 ring-offset-white dark:ring-offset-navy-900 shadow-md">
                                {{ trans('dashboard.otp_guide_login_btn') }}
                                <svg class="absolute -bottom-2 -end-2" width="18" height="18" viewBox="0 0 24 24" aria-hidden="true">
                                    <path d="M5 3l14 8-6 1.5L16 20l-2.5 1-3-7.5L6 18z" fill="#0f172a" stroke="#fff" stroke-width="1.5" stroke-linejoin="round"></path>
                                </svg>
                            </div>
                        </div>
                    </div>

                    {{-- STEP 2: 2FA Verification --}}
                    <div x-show="step === 2" class="w-full h-full flex flex-col items-center justify-center gap-3 p-4 bg-white dark:bg-navy-900 rounded-lg border border-slate-200 dark:border-slate-800 text-center shadow-sm">
                        <div class="w-10 h-10 rounded-full bg-emerald-500/10 border border-emerald-500/30 flex items-center justify-center text-emerald-600 dark:text-emerald-400">
                            <i class="fa-solid fa-mobile-screen-button text-lg"></i>
                        </div>
                        <div>
                            <div class="text-xs font-bold text-slate-900 dark:text-white">{{ trans('dashboard.otp_guide_2fa_title') }}</div>
                            <div class="text-[10px] text-slate-500 dark:text-slate-400 mt-0.5">{{ trans('dashboard.otp_guide_2fa_subtitle') }}</div>
                        </div>
                        <div class="flex items-center justify-center gap-2" dir="ltr">
                            <span class="w-8 h-8 rounded-lg border border-emerald-500 bg-emerald-50/50 dark:bg-navy-950 text-emerald-700 dark:text-emerald-400 font-mono text-sm font-bold flex items-center justify-center ring-2 ring-emerald-500/30">7</span>
                            <span class="w-8 h-8 rounded-lg border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-navy-950 text-slate-800 dark:text-white font-mono text-sm font-bold flex items-center justify-center">2</span>
                            <span class="w-8 h-8 rounded-lg border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-navy-950 text-slate-800 dark:text-white font-mono text-sm font-bold flex items-center justify-center">8</span>
                            <span class="w-8 h-8 rounded-lg border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-navy-950 text-slate-800 dark:text-white font-mono text-sm font-bold flex items-center justify-center">4</span>
                        </div>
                        <div class="relative">
                            <div class="px-4 py-1.5 rounded-md bg-emerald-600 text-white text-[10px] font-bold">{{ trans('dashboard.otp_guide_confirm_btn') }}</div>
                            <svg class="absolute -bottom-1.5 -end-2" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
                                <path d="M5 3l14 8-6 1.5L16 20l-2.5 1-3-7.5L6 18z" fill="#0f172a" stroke="#fff" stroke-width="1.5" stroke-linejoin="round"></path>
                            </svg>
                        </div>
                    </div>

                    {{-- STEP 3: Navigation Menu -> Onboard Solution --}}
                    <div x-show="step === 3" class="w-full h-full flex flex-col bg-white dark:bg-navy-900 rounded-lg border border-slate-200 dark:border-slate-800 overflow-hidden text-xs shadow-sm">
                        <div class="flex items-center gap-4 bg-slate-100 dark:bg-slate-900 px-4 py-2 border-b border-slate-200 dark:border-slate-800 text-[11px]">
                            <span class="text-slate-500 dark:text-slate-400">{{ trans('dashboard.otp_guide_nav_home') }}</span>
                            <span class="font-bold text-emerald-600 dark:text-emerald-400 border-b-2 border-emerald-500 pb-0.5 flex items-center gap-1">
                                <span>{{ trans('dashboard.otp_guide_nav_portal') }}</span>
                                <i class="fa-solid fa-chevron-down text-[8px]"></i>
                            </span>
                            <span class="text-slate-500 dark:text-slate-400">{{ trans('dashboard.otp_guide_nav_users') }}</span>
                            <span class="text-slate-500 dark:text-slate-400">{{ trans('dashboard.otp_guide_nav_reports') }}</span>
                        </div>
                        <div class="flex-1 p-4 flex flex-col justify-center items-center">
                            <div class="w-full max-w-sm rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-navy-950 p-2 shadow-xl space-y-1 relative">
                                <div class="px-3 py-1.5 rounded-lg text-[10.5px] text-slate-500 dark:text-slate-400">{{ trans('dashboard.otp_guide_menu_browse_units') }}</div>
                                <div class="px-3 py-1.5 rounded-lg bg-emerald-500/15 dark:bg-emerald-500/20 text-emerald-700 dark:text-emerald-300 font-bold text-[11px] border border-emerald-500/40 flex items-center justify-between">
                                    <span>{{ trans('dashboard.otp_guide_menu_onboard_new') }}</span>
                                    <span class="text-[9px] px-1.5 py-0.5 rounded bg-emerald-600 text-white">{{ trans('dashboard.otp_guide_menu_select_here') }}</span>
                                </div>
                                <div class="px-3 py-1.5 rounded-lg text-[10.5px] text-slate-500 dark:text-slate-400">{{ trans('dashboard.otp_guide_menu_manage_approved') }}</div>

                                <svg class="absolute bottom-6 end-8" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
                                    <path d="M5 3l14 8-6 1.5L16 20l-2.5 1-3-7.5L6 18z" fill="#0f172a" stroke="#fff" stroke-width="1.5" stroke-linejoin="round"></path>
                                </svg>
                            </div>
                        </div>
                    </div>

                    {{-- STEP 4: Enter 1 and Generate OTP --}}
                    <div x-show="step === 4" class="w-full h-full flex flex-col justify-center items-center p-4 bg-white dark:bg-navy-900 rounded-lg border border-slate-200 dark:border-slate-800 shadow-sm">
                        <div class="w-full max-w-md rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-navy-950 p-4 space-y-3 shadow-md">
                            <div class="text-xs font-bold text-slate-900 dark:text-white flex items-center gap-1.5">
                                <i class="fa-solid fa-key text-emerald-600 dark:text-emerald-400 text-xs"></i>
                                <span>{{ trans('dashboard.otp_guide_req_otp_title') }}</span>
                            </div>
                            <div>
                                <label class="block text-[10.5px] text-slate-600 dark:text-slate-400 mb-1">{{ trans('dashboard.otp_guide_req_otp_count') }}</label>
                                <div class="flex items-center gap-2">
                                    <div class="w-20 h-7 rounded-lg border border-emerald-500 bg-white dark:bg-navy-900 px-3 font-mono text-sm font-bold text-emerald-600 dark:text-emerald-400 flex items-center ring-2 ring-emerald-500/20">
                                        1
                                    </div>
                                    <span class="text-[10px] text-slate-500">{{ trans('dashboard.otp_guide_req_otp_single') }}</span>
                                </div>
                            </div>
                            <div class="relative pt-1">
                                <button type="button" class="w-full py-2 rounded-lg bg-emerald-600 text-white font-bold text-[11px] ring-2 ring-emerald-400 ring-offset-2 ring-offset-white dark:ring-offset-navy-950 shadow-md">
                                    {{ trans('dashboard.otp_guide_create_otp_btn') }}
                                </button>
                                <svg class="absolute -bottom-1 end-12" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
                                    <path d="M5 3l14 8-6 1.5L16 20l-2.5 1-3-7.5L6 18z" fill="#0f172a" stroke="#fff" stroke-width="1.5" stroke-linejoin="round"></path>
                                </svg>
                            </div>
                        </div>
                    </div>

                    {{-- STEP 5: Copy OTP and Paste into ZATCA Tools --}}
                    <div x-show="step === 5" class="w-full h-full flex flex-col justify-between p-2.5 bg-white dark:bg-navy-900 rounded-lg border border-slate-200 dark:border-slate-800 shadow-sm">
                        {{-- Top green pill from Fatoora --}}
                        <div class="rounded-xl border border-emerald-300 dark:border-emerald-500/40 bg-emerald-50/70 dark:bg-emerald-500/10 p-2 text-center">
                            <div class="text-[10.5px] font-semibold text-emerald-800 dark:text-emerald-400 flex items-center justify-center gap-1">
                                <i class="fa-solid fa-check text-[10px] text-emerald-600 dark:text-emerald-400"></i>
                                <span>{{ trans('dashboard.otp_guide_created_valid_1hr') }}</span>
                            </div>
                            <div class="mt-1 inline-flex items-center justify-center gap-2 px-3 py-1 rounded-lg border border-emerald-400 dark:border-emerald-500/60 bg-white dark:bg-navy-950 font-mono text-sm font-black text-emerald-700 dark:text-emerald-300 relative shadow-xs">
                                <span class="text-[9px] font-sans font-normal text-slate-500 dark:text-slate-400">{{ trans('dashboard.otp_guide_copy') }}</span>
                                <span class="tracking-widest">4 8 2 9 1 7</span>
                                <i class="fa-regular fa-copy text-[11px] text-emerald-600 dark:text-emerald-400"></i>
                                <svg class="absolute -bottom-2 -end-1" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
                                    <path d="M5 3l14 8-6 1.5L16 20l-2.5 1-3-7.5L6 18z" fill="#0f172a" stroke="#fff" stroke-width="1.5" stroke-linejoin="round"></path>
                                </svg>
                            </div>
                        </div>

                        {{-- Down Arrow --}}
                        <div class="flex justify-center text-slate-400 text-xs my-0.5">
                            <i class="fa-solid fa-arrow-down animate-bounce text-emerald-600 dark:text-emerald-400 text-xs"></i>
                        </div>

                        {{-- Bottom Card: ZATCA Tools Screen --}}
                        <div class="rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50/80 dark:bg-navy-950 p-2 text-center shadow-xs">
                            <div class="text-[10px] font-bold text-slate-800 dark:text-white mb-1.5 flex items-center justify-center gap-1">
                                <span class="text-[9px] text-slate-500 dark:text-slate-400">{{ trans('dashboard.otp_guide_zatca_tools_screen') }}</span>
                                <span class="text-emerald-600 dark:text-brand-400 font-extrabold">ZATCA Tools</span>
                                <span class="text-[9px] px-1 rounded bg-slate-200 dark:bg-brand-500/20 text-slate-700 dark:text-brand-300">{{ trans('dashboard.otp_guide_here') }}</span>
                            </div>
                            <div class="flex items-center justify-center gap-1.5 mb-1.5" dir="ltr">
                                <span class="w-6 h-7 rounded border border-emerald-400 dark:border-emerald-500/60 bg-white dark:bg-navy-900 font-mono text-xs font-bold text-emerald-700 dark:text-emerald-300 flex items-center justify-center shadow-2xs">4</span>
                                <span class="w-6 h-7 rounded border border-emerald-400 dark:border-emerald-500/60 bg-white dark:bg-navy-900 font-mono text-xs font-bold text-emerald-700 dark:text-emerald-300 flex items-center justify-center shadow-2xs">8</span>
                                <span class="w-6 h-7 rounded border border-emerald-400 dark:border-emerald-500/60 bg-white dark:bg-navy-900 font-mono text-xs font-bold text-emerald-700 dark:text-emerald-300 flex items-center justify-center shadow-2xs">2</span>
                                <span class="w-6 h-7 rounded border border-emerald-400 dark:border-emerald-500/60 bg-white dark:bg-navy-900 font-mono text-xs font-bold text-emerald-700 dark:text-emerald-300 flex items-center justify-center shadow-2xs">9</span>
                                <span class="w-6 h-7 rounded border border-emerald-400 dark:border-emerald-500/60 bg-white dark:bg-navy-900 font-mono text-xs font-bold text-emerald-700 dark:text-emerald-300 flex items-center justify-center shadow-2xs">1</span>
                                <span class="w-6 h-7 rounded border border-emerald-400 dark:border-emerald-500/60 bg-white dark:bg-navy-900 font-mono text-xs font-bold text-emerald-700 dark:text-emerald-300 flex items-center justify-center shadow-2xs">7</span>
                            </div>
                            <div class="w-full py-1 rounded bg-emerald-600 text-white font-bold text-[10px]">
                                {{ trans('dashboard.otp_guide_start_linking') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Step Explanation Text --}}
            <div class="mt-4 flex min-h-[85px] gap-3">
                <span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-emerald-600 text-[12px] font-bold text-white shadow-md shadow-emerald-600/25"
                      dir="ltr"
                      x-text="step">
                    1
                </span>
                <div class="min-w-0">
                    <div class="text-[14px] font-bold leading-6 text-slate-900 dark:text-white"
                         x-text="step === 1 ? @json(trans('dashboard.otp_guide_step_title_1')) : (step === 2 ? @json(trans('dashboard.otp_guide_step_title_2')) : (step === 3 ? @json(trans('dashboard.otp_guide_step_title_3')) : (step === 4 ? @json(trans('dashboard.otp_guide_step_title_4')) : @json(trans('dashboard.otp_guide_step_title_5')))))">
                    </div>
                    <p class="mt-1 text-[12px] leading-relaxed text-slate-600 dark:text-slate-300"
                       x-text="step === 1 ? @json(trans('dashboard.otp_guide_step_desc_1')) : (step === 2 ? @json(trans('dashboard.otp_guide_step_desc_2')) : (step === 3 ? @json(trans('dashboard.otp_guide_step_desc_3')) : (step === 4 ? @json(trans('dashboard.otp_guide_step_desc_4')) : @json(trans('dashboard.otp_guide_step_desc_5')))))">
                    </p>
                </div>
            </div>
        </div>

        {{-- Dialog Footer --}}
        <div class="flex items-center justify-between gap-3 border-t border-slate-100 dark:border-slate-800 px-5 py-3.5 bg-slate-50/90 dark:bg-slate-900/40">
            {{-- Previous Button --}}
            <button type="button"
                    @click="if(step > 1) step--"
                    :disabled="step === 1"
                    class="inline-flex cursor-pointer items-center gap-1.5 text-[12.5px] font-semibold text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white transition disabled:cursor-default disabled:opacity-40">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" class="rtl:-scale-x-100">
                    <path d="M15 6l-6 6 6 6"></path>
                </svg>
                <span>{{ trans('dashboard.previous_btn') }}</span>
            </button>

            {{-- Right Actions: Next / Go to Fatoora / Close --}}
            <div class="flex items-center gap-2">
                <template x-if="step < 5">
                    <button type="button"
                            @click="step++"
                            class="inline-flex items-center justify-center gap-1.5 font-bold rounded-[10px] cursor-pointer text-[13px] px-5 py-2.5 bg-emerald-600 text-white shadow-lg shadow-emerald-600/25 hover:bg-emerald-500 transition">
                        <span>{{ trans('dashboard.next_btn') }}</span>
                    </button>
                </template>

                <template x-if="step === 5">
                    <div class="flex items-center gap-2">
                        <button type="button"
                                @click="showOtpModal = false"
                                class="inline-flex items-center justify-center font-semibold rounded-[10px] text-[12.5px] px-4 py-2 border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700 transition">
                            {{ trans('dashboard.otp_guide_have_otp') }}
                        </button>
                        <a href="https://fatoora.zatca.gov.sa"
                           target="_blank"
                           rel="noopener noreferrer"
                           class="inline-flex items-center justify-center gap-1.5 font-bold rounded-[10px] text-[12.5px] px-4 py-2 bg-emerald-600 text-white shadow-lg shadow-emerald-600/25 hover:bg-emerald-500 transition">
                            <span>{{ trans('dashboard.otp_guide_open_fatoora') }}</span>
                            <i class="fa-solid fa-arrow-up-right-from-square text-[10px]"></i>
                        </a>
                    </div>
                </template>
            </div>
        </div>
    </div>
</div>