@php
    $items_per_page = 5;
    $total_items = $userOpenai->total();
    $prompt_filters = [
        'all' => 'All',
        'favorite' => 'Favorite',
    ];

    $ai_tools = [
        [
            'title' => 'Sketch to Image',
            'desc' => 'Transform your ideas into reality.',
            'icon' =>
                '<svg width="22" height="17" viewBox="0 0 22 17" fill="none" stroke="#2C3E50" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"> <path d="M1.5 11.5C3.5 14.5 5.5 15.5 8.5 15.5C11.5 15.5 15.5 12.5 15.5 8.5C15.5 4.5 12.5 1.5 9.5 1.5C6.5 1.5 4.5 3 4.5 5.5C4.5 8 6.5 10.5 10.5 10.5C14.5 10.5 18.908 8.047 20.5 5.5"/> </svg>',
            'color' => '#F1F1F0',
        ],
        [
            'title' => 'Reimagine',
            'desc' => 'Generate similar variants easily.',
            'icon' =>
                '<svg width="20" height="19" viewBox="0 0 20 19" fill="none" stroke="#3C5C66" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"> <path d="M16.5 17.5L14.5 15.5V3.5C14.5 2.379 15.379 1.5 16.5 1.5C17.621 1.5 18.5 2.379 18.5 3.5V15.5L16.5 17.5ZM16.5 17.5H3.5C2.96957 17.5 2.46086 17.2893 2.08579 16.9142C1.71071 16.5391 1.5 16.0304 1.5 15.5C1.5 14.9696 1.71071 14.4609 2.08579 14.0858C2.46086 13.7107 2.96957 13.5 3.5 13.5H7.5C8.03043 13.5 8.53914 13.2893 8.91421 12.9142C9.28929 12.5391 9.5 12.0304 9.5 11.5C9.5 10.9696 9.28929 10.4609 8.91421 10.0858C8.53914 9.71071 8.03043 9.5 7.5 9.5H4.5M14.5 5.5H18.5"/> </svg>',
            'color' => '#C2EBF8',
        ],
        [
            'title' => 'Upscale',
            'desc' => 'Enlarge your images by 4x easily.',
            'icon' =>
                '<svg width="21" height="17" viewBox="0 0 21 17" fill="none" stroke="#4A9180" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"> <path d="M9.5 15.5H3.5C2.96957 15.5 2.46086 15.2893 2.08579 14.9142C1.71071 14.5391 1.5 14.0304 1.5 13.5V3.5C1.5 2.96957 1.71071 2.46086 2.08579 2.08579C2.46086 1.71071 2.96957 1.5 3.5 1.5H17.5C18.0304 1.5 18.5391 1.71071 18.9142 2.08579C19.2893 2.46086 19.5 2.96957 19.5 3.5V7.5M12.5 11.5C12.5 11.2348 12.6054 10.9804 12.7929 10.7929C12.9804 10.6054 13.2348 10.5 13.5 10.5H18.5C18.7652 10.5 19.0196 10.6054 19.2071 10.7929C19.3946 10.9804 19.5 11.2348 19.5 11.5V14.5C19.5 14.7652 19.3946 15.0196 19.2071 15.2071C19.0196 15.3946 18.7652 15.5 18.5 15.5H13.5C13.2348 15.5 12.9804 15.3946 12.7929 15.2071C12.6054 15.0196 12.5 14.7652 12.5 14.5V11.5Z"/> </svg>',
            'color' => '#EDF4F2',
        ],
        [
            'title' => 'Replace BG',
            'desc' => 'Change the background of anyimage.',
            'icon' =>
                '<svg width="19" height="17" viewBox="0 0 19 17" fill="none" stroke="#887B38" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"> <path d="M3.5 14.2084C2.96957 14.2084 2.46086 14.0065 2.08579 13.647C1.71071 13.2876 1.5 12.8001 1.5 12.2917M1.5 8.45841V6.54175M1.5 2.70841C1.5 2.20008 1.71071 1.71257 2.08579 1.35313C2.46086 0.993682 2.96957 0.791748 3.5 0.791748M7.5 0.791748H9.5M13.5 0.791748C14.0304 0.791748 14.5391 0.993682 14.9142 1.35313C15.2893 1.71257 15.5 2.20008 15.5 2.70841M15.5 6.54175V8.45841M15.5 12.2917V16.1251M17.5 14.2084H13.5M9.5 14.2084H7.5"/> </svg>',
            'color' => '#FEF3DE',
        ],
        [
            'title' => 'Remove BG',
            'desc' => 'Extract the main object/subject.',
            'icon' =>
                '<svg width="19" height="21" viewBox="0 0 19 21" fill="none" stroke="#55B084" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"> <path d="M1.5 5.5H17.5M7.5 9.5V15.5M11.5 9.5V15.5M2.5 5.5L3.5 17.5C3.5 18.0304 3.71071 18.5391 4.08579 18.9142C4.46086 19.2893 4.96957 19.5 5.5 19.5H13.5C14.0304 19.5 14.5391 19.2893 14.9142 18.9142C15.2893 18.5391 15.5 18.0304 15.5 17.5L16.5 5.5M6.5 5.5V2.5C6.5 2.23478 6.60536 1.98043 6.79289 1.79289C6.98043 1.60536 7.23478 1.5 7.5 1.5H11.5C11.7652 1.5 12.0196 1.60536 12.2071 1.79289C12.3946 1.98043 12.5 2.23478 12.5 2.5V5.5"/> </svg>',
            'color' => '#DEFFEF',
        ],
        [
            'title' => 'Remove Text',
            'desc' => 'Change or remove text.',
            'icon' =>
                '<svg width="17" height="17" viewBox="0 0 17 17" fill="none" stroke="#552A61" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"> <path d="M1.5 8.50002H15.5M12.5 3.00002C12.2732 2.55998 11.7536 2.17167 11.0265 1.89902C10.2994 1.62638 9.40837 1.48565 8.5 1.50002H7.5C6.57174 1.50002 5.6815 1.86877 5.02513 2.52515C4.36875 3.18153 4 4.07177 4 5.00002C4 5.92828 4.36875 6.81852 5.02513 7.4749C5.6815 8.13128 6.57174 8.50002 7.5 8.50002H9.5C10.4283 8.50002 11.3185 8.86877 11.9749 9.52515C12.6313 10.1815 13 11.0718 13 12C13 12.9283 12.6313 13.8185 11.9749 14.4749C11.3185 15.1313 10.4283 15.5 9.5 15.5H8C7.09163 15.5144 6.20056 15.3737 5.4735 15.101C4.74644 14.8284 4.22675 14.4401 4 14"/> </svg>',
            'color' => '#F7DEFE',
        ],
    ];
@endphp

<div
    class="lqd-titlebar-secondary -mx-4 mb-20"
    x-data="{
        promptLibraryShow: false,
        togglePromptLibraryShow() { this.promptLibraryShow = !this.promptLibraryShow },
        promptFilter: 'all',
        changePromptFilter(filter) { filter !== this.promptFilter && (this.promptFilter = filter) },
        searchPromptStr: '',
        setSearchPromptStr(str) { this.searchPromptStr = str.trim().toLowerCase() },
        setPrompt(prompt) { this.prompt = prompt },
        focusOnPrompt() { $nextTick(() => $refs.prompt.focus()) },

        activeGenerator: '{{ setting('dalle_hidden', 0) == 1 ? 'stable_diffusion' : 'openai' }}',
        changeActiveGenerator(tab) {
            if (tab === this.activeGenerator) return;
            if (!document.startViewTransition) {
                return this.activeGenerator = tab;
            }
            document.startViewTransition(() => this.activeGenerator = tab);
        },
        prompts: [
            '{{ addslashes(__('Cityscape at sunset in retro vector illustration')) }}',
            '{{ addslashes(__('Painting of a flower vase on a kitchen table with a window in the backdrop.')) }}',
            '{{ addslashes(__('Memphis style painting of a flower vase on a kitchen table with a window in the backdrop.')) }}',
            '{{ addslashes(__('Illustration of a cat sitting on a couch in a living room with a coffee mug in its hand.')) }}',
            '{{ addslashes(__('Delicious pizza with all the toppings.')) }}',
            '{{ addslashes(__('a super detailed infographic of a working time machine 8k')) }}',
            '{{ addslashes(__('hedgehog smelling a flower')) }}',
            '{{ addslashes(__('Freeform ferrofluids, beautiful dark chaos')) }}',
            '{{ addslashes(__('a home built in a huge Soap bubble, windows')) }}',
            '{{ addslashes(__('photo of an extremely cute alien fish swimming an alien habitable underwater planet')) }}',
        ],
        generateRandomPrompt() {
            return this.prompts[Math.floor(Math.random() * this.prompts.length)];
        },
        prompt: ''
    }"
>
    <div
        class="bg-cover bg-center px-4 pb-20 pt-8"
        style="background-image: url({{ custom_theme_url('assets/bg/titlebar-bg.jpg') }})"
    >
        <h1 class="m-0 text-center text-black">
            <svg
                class="me-1.5 inline-block align-text-top"
                width="20"
                height="20"
                viewBox="0 0 20 20"
                fill="currentColor"
                xmlns="http://www.w3.org/2000/svg"
            >
                <path
                    d="M11.7342 4.655L0.749987 15.6408C0.298669 16.1248 0.0528549 16.765 0.0643506 17.4266C0.0758463 18.0883 0.343754 18.7196 0.811611 19.1876C1.27947 19.6555 1.91073 19.9236 2.57235 19.9352C3.23398 19.9469 3.87428 19.7012 4.35832 19.25L15.345 8.26583L11.7342 4.655ZM12.9883 8.26583L10.8333 10.4208L9.58332 9.16667L11.7383 7.01167L12.9883 8.26583ZM3.17999 18.0733C3.01153 18.2339 2.78772 18.3235 2.55499 18.3235C2.32225 18.3235 2.09845 18.2339 1.92999 18.0733C1.7645 17.9074 1.67157 17.6827 1.67157 17.4483C1.67157 17.214 1.7645 16.9892 1.92999 16.8233L8.40415 10.3483L9.65832 11.6025L3.17999 18.0733ZM17.7775 12.19L20 13.3017L17.7775 14.4167L16.6667 16.635L15.5558 14.4167L13.3333 13.3017L15.5558 12.19L16.6667 9.96833L17.7775 12.19ZM5.55582 4.44417L3.33332 3.33333L5.55582 2.2225L6.66665 0L7.77749 2.2225L9.99999 3.33333L7.77749 4.44417L6.66665 6.66667L5.55582 4.44417ZM16.1108 3.88917L14.1667 2.91667L16.1108 1.94417L17.0833 0L18.0558 1.94417L20 2.91667L18.0558 3.88917L17.0833 5.83333L16.1108 3.88917Z"
                />
            </svg>
            @lang('Explain your idea.')
            <span
                class="cursor-pointer opacity-50 transition-colors hover:opacity-100"
                @click="prompt = generateRandomPrompt()"
            >
                @lang('Generate example prompt.')
            </span>

            @if (setting('user_ai_image_prompt_library') == null || setting('user_ai_image_prompt_library'))
                <button
                    class="lqd-generator-templates-trigger inline-flex size-10 shrink-0 cursor-pointer items-center justify-center gap-2 rounded-full align-middle text-inherit transition-all max-md:h-auto max-md:w-auto max-md:bg-transparent md:hover:bg-heading-background md:hover:text-heading-foreground"
                    type="button"
                    @click.prevent="togglePromptLibraryShow()"
                >
                    <span class="sr-only">{{ __('Browse prompt library') }}</span>
                    <x-tabler-article
                        class="size-6"
                        stroke-width="1.5"
                    />
                </button>
            @endif
        </h1>
    </div>
    <div class="container relative z-2 -mt-14 flex flex-col">
        <div
            class="mx-auto flex w-full max-w-[650px] items-center gap-5 rounded-2xl bg-background/90 px-4 py-6 shadow-[0_4px_10px_hsl(0_0%_0%/4%)] dark:shadow-[0_4px_20px_rgba(255,255,255,0.05)]">
            <x-card
                class:body="flex flex-col gap-5"
                class="lqd-image-generator"
                variant="none"
                size="none"
            >
                <div class="flex flex-wrap justify-between">
                    <div class="lqd-image-generator-tabs-nav flex gap-1">
                        @if (setting('dalle_hidden', 0) != 1)
                            <x-button
                                class="lqd-image-generator-tabs-trigger active"
                                data-generator-name="openai"
                                tag="button"
                                type="button"
                                variant="ghost"
                                x-data="{}"
                                ::class="{ 'active': activeGenerator === 'openai' }"
                                x-bind:data-active="activeGenerator === 'openai'"
                                @click="changeActiveGenerator('openai')"
                            >
                                {{ __('DALL-E') }}
                            </x-button>
                        @endif
                        @if (setting('enabled_gpt_image_1', '0') != '0')
                            <x-button
                                class="lqd-image-generator-tabs-trigger"
                                data-generator-name="gpt-image-1"
                                tag="button"
                                type="button"
                                variant="ghost"
                                x-data="{}"
                                ::class="{ 'active': activeGenerator === 'gpt_image_1' }"
                                x-bind:data-active="activeGenerator === 'gpt_image_1'"
                                @click="changeActiveGenerator('gpt_image_1')"
                            >
                                {{ __('GPT-IMAGE-1') }}
                            </x-button>
                        @endif
                        @if (setting('stable_hidden', 0) != 1)
                            <x-button
                                class="lqd-image-generator-tabs-trigger"
                                data-generator-name="stable_diffusion"
                                tag="button"
                                type="button"
                                variant="ghost"
                                x-data="{}"
                                ::class="{ 'active': activeGenerator === 'stable_diffusion' }"
                                x-bind:data-active="activeGenerator === 'stable_diffusion'"
                                @click="changeActiveGenerator('stable_diffusion')"
                            >
                                {{ __('Stable Diffusion') }}
                            </x-button>
                        @endif
                        @if (\App\Helpers\Classes\ApiHelper::setPiAPIKey())
                            @includeIf('midjourney::midjourney-tab')
                        @endif

                        @if (\App\Helpers\Classes\ApiHelper::setFalAIKey())
                            @includeFirst(['flux-pro::flux-pro-tab', 'panel.user.openai.includes.flux-pro-tab', 'vendor.empty'])
                            @includeFirst(['ideogram::ideogram-tab', 'panel.user.openai.includes.ideogram-tab', 'vendor.empty'])
                            @includeIf('nano-banana::nano-banana-tab')
                            @includeIf('see-dream-v4::see-dream-v4-tab')
                        @endif
                    </div>
                </div>

                @if (setting('dalle_hidden', 0) != 1)
                    <div
                        class="lqd-image-generator-tabs-content lqd-image-generator-dalle"
                        x-data="{}"
                        :class="{ 'hidden': activeGenerator !== 'openai' }"
                    >
                        <form
                            class="lqd-image-generator-dalle-form flex flex-col items-start gap-4"
                            id="openai_generator_form"
                            onsubmit="return sendOpenaiGeneratorForm();"
                            x-data="{ advancedSettingsShow: false }"
                        >
                            <div class="lqd-image-generator-inputs-wrap relative mb-2 w-full">
                                @foreach (json_decode($openai->questions) ?? [] as $question)
                                    @if ($question->type == 'textarea')
                                        <x-forms.input
                                            class="lqd-image-generator-prompt h-[53px] resize-none overflow-hidden rounded-2xl border-[3px] bg-background px-4 py-3.5 text-heading-foreground placeholder:text-foreground focus:ring-0 max-md:min-h-32 max-md:rounded-md"
                                            id="{{ $question->name }}"
                                            type="textarea"
                                            name="{{ $question->name }}"
                                            x-data="{}"
                                            ::value="prompt"
                                            ::placeholder="generateRandomPrompt()"
                                        />
                                    @endif
                                @endforeach

                                <x-button
                                    class="absolute end-4 top-1/2 -translate-y-1/2 hover:-translate-y-1/2 hover:scale-110 max-lg:relative max-lg:right-auto max-lg:top-auto max-lg:mt-2 max-lg:w-full max-lg:translate-y-0 lg:size-[30px] lg:p-0"
                                    id="openai_generator_button"
                                    variant="secondary"
                                    tag="button"
                                    type="submit"
                                >
                                    <span class="lg:hidden">
                                        {{ __('Generate') }}
                                    </span>
                                    <x-tabler-arrow-right class="size-5" />
                                </x-button>
                            </div>

                            <x-button
                                class="lqd-generator-advanced-trigger group text-3xs font-semibold text-heading-foreground lg:hidden"
                                ::class="{ 'active': advancedSettingsShow }"
                                tag="button"
                                type="button"
                                variant="link"
                                @click="advancedSettingsShow = !advancedSettingsShow"
                            >
                                {{ __('Advanced Settings') }}
                                <span class="inline-flex size-9 items-center justify-center rounded-full bg-background shadow-sm">
                                    <x-tabler-plus
                                        class="size-4"
                                        ::class="{ 'hidden': advancedSettingsShow }"
                                    />
                                    <x-tabler-minus
                                        class="hidden size-4"
                                        ::class="{ 'hidden': !advancedSettingsShow }"
                                    />
                                </span>
                            </x-button>

                            <div
                                class="active flex w-full flex-wrap justify-between gap-3 max-lg:hidden lg:fixed lg:bottom-[--body-padding] lg:end-[--body-padding] lg:top-[--body-padding] lg:z-5 lg:w-[--sidebar-width] lg:flex-col lg:flex-nowrap lg:justify-start lg:gap-8 lg:overflow-y-auto lg:rounded-e-2xl lg:border-s lg:border-border lg:bg-background lg:p-7 max-lg:[&.advanced-opts-enabled]:flex lg:[&.inactive]:hidden lg:[&>div]:grow-0"
                                x-data="{}"
                                style="view-transition-name: lqd-sidebar"
                                :class="{ 'inactive': activeGenerator !== 'openai', 'active': activeGenerator === 'openai', 'advanced-opts-enabled': advancedSettingsShow }"
                            >
                                <h3 class="hidden border-b border-border pb-6 text-start text-lg lg:block">
                                    @lang('Advanced Settings')
                                </h3>
                                @include('panel.user.openai.components.generator_image_dalle_options')
                                <div class="sticky -bottom-7 -mx-7 mt-auto hidden rounded-xl px-7 py-4 backdrop-blur-2xl lg:block">
                                    <x-button
                                        class="w-full"
                                        type="submit"
                                    >
                                        @lang('Create')
                                    </x-button>
                                </div>
                            </div>
                        </form>
                    </div>
                @endif

                @if (setting('enabled_gpt_image_1', '0') != '0')
                    <div
                        class="lqd-image-generator-tabs-content lqd-image-generator-gpt-image-1 hidden"
                        x-data="{}"
                        :class="{ 'hidden': activeGenerator !== 'gpt_image_1' }"
                    >
                        <form
                            class="lqd-image-generator-dalle-form flex flex-col items-start gap-4"
                            id="openai_generator_form"
                            onsubmit="return sendOpenaiGeneratorForm();"
                            x-data="{ advancedSettingsShow: false }"
                        >
                            <h3
                                class="mb-0 flex w-full flex-wrap items-center gap-2"
                                :class="{ 'hidden': activeGenerator === 'stable_diffusion' }"
                            >
                                {{ __('Explain your idea') }}. |
                                <button
                                    class="lqd-image-generator-random-prompt-trigger cursor-pointer text-green-600 hover:underline"
                                    type="button"
                                    x-data="{}"
                                    @click="prompt = generateRandomPrompt()"
                                >
                                    {{ __('Generate example prompt') }}
                                </button>

                                @if (setting('user_ai_image_prompt_library') === null || setting('user_ai_image_prompt_library'))
                                    <button
                                        class="lqd-generator-templates-trigger flex size-10 shrink-0 cursor-pointer items-center justify-center gap-2 rounded-full text-heading-foreground transition-all max-md:h-auto max-md:w-auto max-md:bg-transparent md:hover:bg-heading-background md:hover:text-heading-foreground"
                                        type="button"
                                        @click.prevent="togglePromptLibraryShow()"
                                    >
                                        <x-tabler-article
                                            class="size-6"
                                            stroke-width="1.5"
                                        />
                                        <span class="md:hidden">{{ __('Browse prompt library') }}</span>
                                    </button>
                                @endif
                            </h3>

                            <div class="lqd-image-generator-inputs-wrap relative w-full">
                                @foreach (json_decode($openai->questions, false, 512, JSON_THROW_ON_ERROR) ?? [] as $question)
                                    @if ($question->type === 'textarea')
                                        <x-forms.input
                                            class="lqd-image-generator-prompt h-14 resize-none overflow-hidden rounded-full bg-background px-6 py-4 text-heading-foreground shadow-sm placeholder:text-foreground/50 max-md:min-h-32 max-md:rounded-md"
                                            id="gpt_1_{{ $question->name }}"
                                            type="textarea"
                                            name="gpt_1_{{ $question->name }}"
                                            x-data="{}"
                                            ::value="prompt"
                                            ::placeholder="generateRandomPrompt()"
                                        />
                                    @endif
                                @endforeach

                                <x-button
                                    class="absolute end-4 top-1/2 -translate-y-1/2 hover:-translate-y-1/2 hover:scale-110 max-lg:relative max-lg:right-auto max-lg:top-auto max-lg:mt-2 max-lg:w-full max-lg:translate-y-0"
                                    id="gpt_openai_generator_button"
                                    tag="button"
                                    type="submit"
                                >
                                    {{ __('Generate') }}
                                    <x-tabler-arrow-right class="size-5" />
                                </x-button>
                            </div>

                            <div
                                class="active flex w-full flex-wrap justify-between gap-3 max-lg:hidden lg:fixed lg:bottom-[--body-padding] lg:end-[--body-padding] lg:top-[--body-padding] lg:z-5 lg:w-[--sidebar-width] lg:flex-col lg:flex-nowrap lg:justify-start lg:gap-8 lg:overflow-y-auto lg:rounded-e-2xl lg:border-s lg:border-border lg:bg-background lg:p-7 max-lg:[&.advanced-opts-enabled]:flex lg:[&.inactive]:hidden lg:[&>div]:grow-0"
                                x-data="{}"
                                style="view-transition-name: lqd-sidebar"
                                :class="{ 'inactive': activeGenerator !== 'gpt_image_1', 'active': activeGenerator === 'gpt_image_1', 'advanced-opts-enabled': advancedSettingsShow }"
                            >
                                <h3 class="hidden border-b border-border pb-6 text-start text-lg lg:block">
                                    @lang('Advanced Settings')
                                </h3>
                                @include('panel.user.openai.components.generator_image_gpt_image_1_options')
                                <div class="sticky -bottom-7 -mx-7 mt-auto hidden rounded-xl px-7 py-4 backdrop-blur-2xl lg:block">
                                    <x-button
                                        class="w-full"
                                        type="submit"
                                    >
                                        @lang('Create')
                                    </x-button>
                                </div>
                            </div>
                        </form>
                    </div>
                @endif

                <div
                    class="lqd-image-generator-tabs-content lqd-image-generator-stablediffusion hidden"
                    x-data="{
                        activeTool: 'text-to-image',
                        setActiveTool(tool) {
                            if (this.activeTool === tool) return;
                            if (!document.startViewTransition) {
                                return this.activeTool = tool;
                            }
                            document.startViewTransition(() => this.activeTool = tool);
                        }
                    }"
                    :class="{ 'hidden': activeGenerator !== 'stable_diffusion' }"
                >
                    <form
                        class="lqd-image-generator-stablediffusion-form flex flex-col gap-5"
                        id="openai_generator_form"
                        onsubmit="return sendOpenaiGeneratorForm();"
                    >
                        <div class="lqd-tabs-nav flex flex-wrap">
                            <x-button
                                class="lqd-tabs-trigger active grow rounded-e-none bg-heading-foreground/5 text-heading-foreground hover:translate-y-0 hover:bg-primary hover:text-primary-foreground [&.active]:bg-primary [&.active]:text-primary-foreground"
                                variant="ghost"
                                tag="button"
                                onclick="handleTabClick('text-to-image')"
                                @click="setActiveTool('text-to-image')"
                                ::class="{ active: activeTool === 'text-to-image' }"
                            >
                                {{ __('Text-to-Image') }}
                            </x-button>
                            <x-button
                                class="lqd-tabs-trigger grow rounded-none bg-heading-foreground/5 text-heading-foreground hover:translate-y-0 hover:bg-primary hover:text-primary-foreground [&.active]:bg-primary [&.active]:text-primary-foreground"
                                variant="ghost"
                                tag="button"
                                onclick="handleTabClick('image-to-image')"
                                @click="setActiveTool('image-to-image')"
                                ::class="{ active: activeTool === 'image-to-image' }"
                            >
                                {{ __('Image-to-Image') }}
                            </x-button>
                            <x-button
                                class="lqd-tabs-trigger grow rounded-none bg-heading-foreground/5 text-heading-foreground hover:translate-y-0 hover:bg-primary hover:text-primary-foreground [&.active]:bg-primary [&.active]:text-primary-foreground"
                                variant="ghost"
                                tag="button"
                                onclick="handleTabClick('upscale')"
                                @click="setActiveTool('upscale')"
                                ::class="{ active: activeTool === 'upscale' }"
                            >
                                {{ __('Upscaling') }}
                            </x-button>
                            <x-button
                                class="lqd-tabs-trigger grow rounded-s-none bg-heading-foreground/5 text-heading-foreground hover:translate-y-0 hover:bg-primary hover:text-primary-foreground [&.active]:bg-primary [&.active]:text-primary-foreground"
                                variant="ghost"
                                tag="button"
                                onclick="handleTabClick('multi-prompt')"
                                @click="setActiveTool('multi-prompt')"
                                ::class="{ active: activeTool === 'multi-prompt' }"
                            >
                                {{ __('Multi-Prompting') }}
                            </x-button>
                        </div>
                        <div
                            class="lqd-tabs-content flex-col items-start"
                            :class="{ 'hidden': activeTool !== 'text-to-image', 'flex': activeTool === 'text-to-image' }"
                        >
                            <div class="lqd-image-generator-inputs-wrap relative w-full">
                                @foreach (json_decode($openai->questions) ?? [] as $question)
                                    @if ($question->type == 'textarea')
                                        <x-forms.input
                                            class="h-[53px] resize-none overflow-hidden rounded-2xl border-[3px] bg-background px-4 py-3.5 text-heading-foreground placeholder:text-foreground focus:ring-0 max-md:min-h-32 max-md:rounded-md"
                                            id="txt2img_description"
                                            name="txt2img_description"
                                            container-class="w-full"
                                            type="textarea"
                                            x-data="{}"
                                            ::value="prompt"
                                            ::placeholder="generateRandomPrompt()"
                                        />
                                    @endif
                                @endforeach

                                <x-button
                                    class="absolute end-4 top-1/2 -translate-y-1/2 hover:-translate-y-1/2 hover:scale-110 max-lg:relative max-lg:right-auto max-lg:top-auto max-lg:mt-2 max-lg:w-full max-lg:translate-y-0 lg:size-[30px] lg:p-0"
                                    id="openai_generator_button"
                                    variant="secondary"
                                    tag="button"
                                    type="submit"
                                >
                                    <span class="lg:hidden">
                                        {{ __('Generate') }}
                                    </span>
                                    <x-tabler-arrow-right class="size-5" />
                                </x-button>
                            </div>
                        </div>

                        <div
                            class="lqd-tabs-content hidden flex-col items-start gap-4"
                            :class="{ 'hidden': activeTool !== 'image-to-image', 'flex': activeTool === 'image-to-image' }"
                        >
                            <x-forms.input
                                class="h-[53px] resize-none overflow-hidden rounded-2xl border-[3px] bg-background px-4 py-3.5 text-heading-foreground placeholder:text-foreground focus:ring-0 max-md:min-h-32 max-md:rounded-md"
                                id="img2img_description"
                                container-class="w-full"
                                name="img2img_description"
                                type="textarea"
                                x-data="{}"
                                ::value="prompt"
                                ::placeholder="generateRandomPrompt()"
                            />

                            <label
                                class="w-full cursor-pointer text-lg font-semibold text-heading-foreground"
                                for="img2img_src"
                            >{{ __('Upload Image') }}</label>

                            <div
                                class="flex w-full items-center justify-center"
                                ondrop="dropHandler(event, 'img2img_src');"
                                ondragover="dragOverHandler(event);"
                            >
                                <label
                                    class="lqd-filepicker-label flex min-h-64 w-full cursor-pointer flex-col items-center justify-center rounded-card border-2 border-dashed border-foreground/10 bg-background text-center transition-colors hover:bg-background/80"
                                    for="img2img_src"
                                >
                                    <div class="flex flex-col items-center justify-center py-6">
                                        <x-tabler-cloud-upload
                                            class="mb-4 size-11"
                                            stroke-width="1.5"
                                        />

                                        <p class="mb-1 text-sm font-semibold">
                                            {{ __('Drop your image here or browse') }}
                                        </p>

                                        <p class="file-name mb-0 text-2xs">
                                            {{ __('(Only jpg, png, webp will be accepted)') }}
                                        </p>
                                    </div>

                                    <input
                                        class="hidden"
                                        id="img2img_src"
                                        type="file"
                                        accept=".png, .jpg, .jpeg"
                                        onchange="handleFileSelect('img2img_src')"
                                    />
                                </label>
                            </div>

                            <x-button
                                class="w-full"
                                id="openai_generator_button"
                                tag="button"
                                type="submit"
                                size="lg"
                            >
                                {{ __('Generate') }}
                                <x-tabler-arrow-right class="size-5" />
                            </x-button>
                        </div>

                        <div
                            class="lqd-tabs-content hidden flex-col items-start"
                            :class="{ 'hidden': activeTool !== 'upscale', 'flex': activeTool === 'upscale' }"
                        >
                            <label
                                class="mb-5 w-full cursor-pointer text-lg font-semibold text-heading-foreground"
                                for="upscale_src"
                            >{{ __('Upload Image') }}</label>

                            <div
                                class="mb-4 flex w-full items-center justify-center"
                                ondrop="dropHandler(event, 'upscale_src');"
                                ondragover="dragOverHandler(event);"
                            >
                                <label
                                    class="lqd-filepicker-label flex min-h-64 w-full cursor-pointer flex-col items-center justify-center rounded-card border-2 border-dashed border-foreground/10 bg-background text-center transition-colors hover:bg-background/80"
                                    for="upscale_src"
                                >
                                    <div class="flex flex-col items-center justify-center py-6">
                                        <x-tabler-cloud-upload
                                            class="mb-4 size-11"
                                            stroke-width="1.5"
                                        />

                                        <p class="mb-1 text-sm font-semibold">
                                            {{ __('Drop your image here or browse') }}
                                        </p>

                                        <p class="file-name mb-0 text-2xs">
                                            {{ __('(Only jpg, png, webp will be accepted)') }}
                                        </p>
                                    </div>

                                    <input
                                        class="hidden"
                                        id="upscale_src"
                                        type="file"
                                        accept=".png, .jpg, .jpeg"
                                        onchange="handleFileSelect('upscale_src')"
                                    />
                                </label>
                            </div>

                            <x-button
                                class="w-full"
                                id="openai_generator_button"
                                tag="button"
                                type="submit"
                                size="lg"
                            >
                                {{ __('Generate') }}
                                <x-tabler-arrow-right class="size-5" />
                            </x-button>
                        </div>

                        <div
                            class="lqd-tabs-content hidden flex-col items-start gap-4"
                            :class="{ 'hidden': activeTool !== 'multi-prompt', 'flex': activeTool === 'multi-prompt' }"
                        >
                            <x-forms.input
                                class="multi_prompts_description h-[53px] resize-none overflow-hidden rounded-2xl border-[3px] bg-background px-4 py-3.5 text-heading-foreground placeholder:text-foreground focus:ring-0 max-md:min-h-32 max-md:rounded-md"
                                id="multi_prompts_description"
                                name="multi_prompts_description"
                                container-class="w-full"
                                type="textarea"
                                x-data="{}"
                                ::value="prompt"
                                ::placeholder="generateRandomPrompt()"
                            />

                            <div class="multi-prompts flex w-full flex-col gap-2 empty:hidden"></div>

                            <x-button
                                class="bg-background text-heading-foreground hover:bg-emerald-500 hover:text-white dark:bg-foreground/10 dark:hover:bg-emerald-500"
                                tag="button"
                                variant="ghost"
                                onclick="return handleAddPrompt();"
                            >
                                <x-tabler-plus class="size-4" />
                                {{ __('Add More') }}
                            </x-button>

                            <x-button
                                class="mt-2 w-full"
                                id="openai_generator_button"
                                tag="button"
                                type="submit"
                                size="lg"
                            >
                                {{ __('Generate') }}
                                <x-tabler-arrow-right class="size-5" />
                            </x-button>
                        </div>

                        <div
                            class="flex flex-col items-start"
                            x-data="{ advancedSettingsShow: false }"
                        >
                            <x-button
                                class="lqd-generator-advanced-trigger group text-3xs font-semibold text-heading-foreground lg:hidden"
                                ::class="{ 'active': advancedSettingsShow }"
                                tag="button"
                                type="button"
                                variant="link"
                                @click="advancedSettingsShow = !advancedSettingsShow"
                            >
                                {{ __('Advanced Settings') }}
                                <span class="inline-flex size-9 items-center justify-center rounded-full bg-background shadow-sm">
                                    <x-tabler-plus
                                        class="size-4"
                                        ::class="{ 'hidden': advancedSettingsShow }"
                                    />
                                    <x-tabler-minus
                                        class="hidden size-4"
                                        ::class="{ 'hidden': !advancedSettingsShow }"
                                    />
                                </span>
                            </x-button>

                            <div
                                class="inactive flex w-full flex-wrap justify-between gap-3 max-lg:hidden lg:fixed lg:bottom-[--body-padding] lg:end-[--body-padding] lg:top-[--body-padding] lg:z-5 lg:w-[--sidebar-width] lg:flex-col lg:flex-nowrap lg:justify-start lg:gap-8 lg:overflow-y-auto lg:rounded-e-2xl lg:border-s lg:border-border lg:bg-background lg:p-7 max-lg:[&.advanced-opts-enabled]:flex lg:[&.inactive]:hidden lg:[&_.lqd-input-group]:m-0 lg:[&_.lqd-input-group]:grow-0 lg:[&_.lqd-input-group]:flex-col lg:[&_.lqd-input-group]:flex-nowrap lg:[&_.lqd-input-group]:gap-8"
                                x-data="{}"
                                style="view-transition-name: lqd-sidebar"
                                :class="{ 'inactive': activeGenerator !== 'stable_diffusion', 'active': activeGenerator === 'stable_diffusion', 'advanced-opts-enabled': advancedSettingsShow }"
                            >
                                <h3 class="hidden border-b border-border pb-6 text-start text-lg lg:block">
                                    @lang('Advanced Settings')
                                </h3>
                                @include('panel.user.openai.components.generator_image_stablediffusion_options')
                                <div class="sticky -bottom-7 -mx-7 mt-auto hidden rounded-xl px-7 py-4 backdrop-blur-2xl lg:block">
                                    <x-button
                                        class="w-full"
                                        type="submit"
                                    >
                                        @lang('Create')
                                    </x-button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

                @if (\App\Helpers\Classes\ApiHelper::setPiAPIKey())
                    @includeIf('midjourney::midjourney-tab-body')
                @endif

                @if (\App\Helpers\Classes\ApiHelper::setFalAIKey())
                    @includeFirst(['flux-pro::flux-pro-tab-body', 'panel.user.openai.includes.flux-pro-tab-body', 'vendor.empty'])
                    @includeFirst(['ideogram::ideogram-tab-body', 'panel.user.openai.includes.ideogram-tab-body', 'vendor.empty'])
					@includeIf('nano-banana::nano-banana-tab-body')
					@includeIf('see-dream-v4::see-dream-v4-tab-body')
                @endif

                <div
                    class="active flex w-full flex-wrap justify-between gap-3 max-lg:hidden lg:fixed lg:bottom-[--body-padding] lg:end-[--body-padding] lg:top-[--body-padding] lg:z-5 lg:w-[--sidebar-width] lg:flex-col lg:flex-nowrap lg:justify-start lg:gap-8 lg:overflow-y-auto lg:rounded-e-2xl lg:border-s lg:border-border lg:bg-background lg:p-7 max-lg:[&.advanced-opts-enabled]:flex lg:[&.inactive]:hidden lg:[&>div]:grow-0"
                    x-data="{}"
                    style="view-transition-name: lqd-sidebar"
                    :class="{ 'inactive': activeGenerator !== 'flux-pro' && activeGenerator !== 'ideogram', 'active': activeGenerator === 'flux-pro' || activeGenerator === 'ideogram' }"
                >
                </div>

                <div class="w-full">
                    <x-credit-list />
                </div>

                @include('panel.user.openai_chat.components.prompt_library_modal')
            </x-card>
        </div>
    </div>
</div>

@if (Route::has('dashboard.user.photo-studio.index') && setting('photo_studio', 1) == 1)
    <div
        class="lqd-img-gen-tools-wrap mb-10 space-y-8"
        x-data="{ toolsShow: true }"
    >
        <div class="lqd-img-gen-tools-trigger-wrap flex items-center gap-8">
            <button
                class="lqd-img-gen-tools-trigger active flex w-full items-center gap-2.5 text-[21px]/[1.25em] font-medium text-heading-foreground"
                :class="{ 'active': toolsShow }"
                @click="toolsShow = !toolsShow"
            >
                <span>
                    <span
                        class="hidden"
                        :class="{ hidden: toolsShow }"
                    >
                        @lang('Show AI Tools')
                    </span>
                    <span :class="{ hidden: !toolsShow }">
                        @lang('Hide AI Tools')
                    </span>
                </span>
                <x-tabler-chevron-down
                    class="ms-auto size-5 rotate-180 transition-transform"
                    ::class="{ 'rotate-180': toolsShow }"
                />
            </button>
        </div>

        <div
            class="lqd-img-gen-tools grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3"
            :class="{ hidden: !toolsShow, grid: toolsShow }"
        >
            @foreach ($ai_tools as $tool)
                <x-card
                    class:body="p-10"
                    class="lqd-img-gen-tool relative overflow-hidden bg-card-background before:absolute before:inset-0 before:z-0 before:bg-current before:opacity-50 before:transition-all hover:-translate-y-1 hover:shadow-lg hover:shadow-black/5 dark:before:opacity-5"
                    size="none"
                    variant="none"
                    roundness="sm"
                    style="color: {{ $tool['color'] }}"
                >
                    <h4 class="lqd-img-gen-tool-title relative z-1 m-0 flex items-center gap-3.5 text-lg font-medium">
                        <span
                            class="lqd-img-gen-tool-icon inline-flex size-6 shrink-0 items-center justify-center rounded-lg transition-all [&_svg]:h-auto [&_svg]:w-full"
                            style="color: {{ $tool['color'] }}"
                        >
                            {!! $tool['icon'] !!}
                        </span>
                        {{ __($tool['title']) }}
                    </h4>
                    <a
                        class="absolute inset-0 z-1 overflow-hidden text-start -indent-96"
                        href="{{ route('dashboard.user.photo-studio.index') }}"
                    >
                        {{ $tool['title'] }}
                    </a>
                </x-card>
            @endforeach
        </div>
    </div>
@endif

<div
    id="generator_sidebar_table"
    x-data="{
        modalShow: false,
        activeItem: null,
        activeItemId: null,
        setActiveItem(data) {
            this.activeItem = data;
            this.activeItemId = data.id;
        },
        prevItem() {
            const currentEl = document.querySelector(`.image-result[data-id='${this.activeItemId}']`);
            const prevEl = currentEl?.previousElementSibling;
            if (!prevEl) return;
            const data = JSON.parse(prevEl.querySelector('.lqd-image-result-view').getAttribute('data-payload') || {});
            this.setActiveItem(data);
        },
        nextItem() {
            const currentEl = document.querySelector(`.image-result[data-id='${this.activeItemId}']`);
            const nextEl = currentEl?.nextElementSibling;
            if (!nextEl) return;
            const data = JSON.parse(nextEl.querySelector('.lqd-image-result-view').getAttribute('data-payload') || {});
            this.setActiveItem(data);
        },
    }"
    @keyup.escape.window="modalShow = false"
>
    <h2 class="mb-5 text-[21px]">
        {{ __('Result') }}
    </h2>
    <div class="image-results grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
        @foreach ($userOpenai->take($items_per_page) as $item)
            <div
                class="image-result lqd-loading-skeleton group w-full"
                data-id="{{ $item->id }}"
                data-generator="{{ str()->lower($item->response) }}"
                {{ $item->request_id ? 'data-request-id=' . $item->request_id : '' }}
            >
                <figure
                    class="lqd-image-result-fig relative mb-3 aspect-square overflow-hidden rounded-lg shadow-md transition-all group-hover:-translate-y-1 group-hover:scale-105 group-hover:shadow-lg"
                    data-lqd-skeleton-el
                >
                    <img
                        class="lqd-image-result-img aspect-square h-full w-full object-cover object-center"
                        id="img-{{ $item->response . '-' . $item->id }}"
                        loading="lazy"
                        src="{{ ThumbImage($item->output) }}"
                    >
                    <div
                        class="lqd-image-result-actions absolute inset-0 flex w-full flex-col items-center justify-center gap-2 p-4 transition-opacity group-[&.lqd-is-loading]:invisible group-[&.lqd-is-loading]:opacity-0">
                        <div class="opacity-0 transition-opacity group-hover:opacity-100">
                            <x-button
                                class="lqd-image-result-download download size-9 bg-background text-foreground hover:bg-background hover:bg-emerald-400 hover:text-white"
                                size="none"
                                href="{{ $item->output }}"
                                download="{{ $item->slug }}"
                            >
                                <x-tabler-download class="size-5" />
                            </x-button>
                            <x-button
                                class="lqd-image-result-view gallery size-9 bg-background text-foreground hover:bg-background hover:bg-emerald-400 hover:text-white"
                                id="img-{{ $item->response . '-' . $item->id }}-payload"
                                data-payload="{{ $item }}"
                                @click.prevent="setActiveItem( JSON.parse($el.getAttribute('data-payload') || {}) ); modalShow = true"
                                size="none"
                                href="#"
                            >
                                <x-tabler-eye class="size-5" />
                            </x-button>
                            <x-button
                                class="lqd-image-result-delete delete size-9 bg-background text-foreground hover:bg-background hover:bg-red-500 hover:text-white"
                                size="none"
                                onclick="return confirm('Are you sure?')"
                                href="{{ route('dashboard.user.openai.documents.image.delete', $item->slug) }}"
                            >
                                <x-tabler-x class="size-4" />
                            </x-button>
                        </div>
                        <span
                            class="lqd-image-result-type absolute bottom-4 end-4 mb-0 rounded-full bg-background px-2 py-1 text-3xs font-semibold uppercase leading-none transition-opacity group-[&.lqd-is-loading]:invisible group-[&[data-generator=de]]:text-red-500 group-[&[data-generator=sd]]:text-blue-500 group-[&.lqd-is-loading]:opacity-0"
                        >
                            {{ $item->response }}
                        </span>
                    </div>
                </figure>
                <p class="lqd-image-result-title mb-1 w-full overflow-hidden overflow-ellipsis whitespace-nowrap text-heading-foreground transition-opacity">
                    {{ $item->input }}
                </p>
            </div>
        @endforeach
    </div>

    @if ($userOpenai->count() > 0)
        <div
            class="lqd-load-more-trigger group min-h-px w-full py-8 text-center font-medium text-heading-foreground"
            data-all-loaded="false"
        >
            <span class="lqd-load-more-trigger-loading flex items-center justify-center gap-2 text-center leading-tight group-[&[data-all-loaded=true]]:hidden">
                {{ __('Loading more') }}
                <span class="flex gap-1">
                    @foreach ([0, 1, 2] as $item)
                        <span
                            class="inline-block h-[3px] w-[3px] animate-bounce-load-more rounded-full bg-current"
                            style="animation-delay: {{ $loop->index / 14 }}s"
                        ></span>
                    @endforeach
                </span>
            </span>
            <span class="lqd-load-more-trigger-all-loaded hidden items-center justify-center gap-2 text-center group-[&[data-all-loaded=true]]:flex">
                {{ __('All images loaded') }}
                <x-tabler-check class="size-5" />
            </span>
        </div>
    @endif

    <div
        class="lqd-modal-img group/modal invisible fixed start-0 top-0 z-[999] flex h-screen w-screen flex-col items-center border p-3 opacity-0 [&.is-active]:visible [&.is-active]:opacity-100"
        id="modal_image"
        x-data="{}"
        :class="{ 'is-active': modalShow }"
    >
        <div
            class="lqd-modal-img-backdrop absolute start-0 top-0 z-0 h-screen w-screen bg-black/10 opacity-0 backdrop-blur-sm transition-opacity group-[&.is-active]/modal:opacity-100"
            @click="modalShow = false"
        ></div>

        <div class="lqd-modal-img-content-wrap relative z-10 my-auto max-h-[90vh] w-full">
            <div class="container relative h-full max-w-6xl">
                <div
                    class="lqd-modal-img-content relative flex h-full translate-y-2 scale-[0.985] flex-wrap justify-between overflow-y-auto rounded-xl bg-background p-5 opacity-0 shadow-2xl transition-all group-[&.is-active]/modal:translate-y-0 group-[&.is-active]/modal:scale-100 group-[&.is-active]/modal:opacity-100 xl:min-h-[570px]">
                    <a
                        class="absolute end-2 top-3 z-10 flex size-9 items-center justify-center rounded-full border bg-background text-inherit shadow-sm transition-all hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black"
                        @click.prevent="modalShow = false"
                        href="#"
                    >
                        <x-tabler-x class="size-4" />
                    </a>

                    <figure class="lqd-modal-fig relative aspect-square min-h-[1px] w-full rounded-lg bg-cover bg-center max-md:min-h-[350px] md:w-6/12">
                        <img
                            class="lqd-modal-img mx-auto h-full w-auto"
                            :src="activeItem?.output"
                            :alt="activeItem?.input"
                        />
                        <a
                            class="absolute bottom-7 end-7 inline-flex size-9 items-center justify-center rounded-full bg-background text-inherit shadow-sm transition-all hover:scale-105"
                            href="#"
                            :href="activeItem?.output"
                            download
                        >
                            <x-tabler-download class="size-4" />
                        </a>
                    </figure>

                    <div class="relative flex w-full flex-col p-3 md:w-5/12">
                        <div class="relative flex flex-col items-start pb-6">
                            <h3 class="mb-4">
                                {{ __('Image Details') }}
                            </h3>

                            <span
                                class="mb-3 inline-flex cursor-copy items-center justify-center gap-2 rounded-md bg-secondary px-2 py-1 text-center text-[11px] font-semibold text-secondary-foreground"
                                @click="navigator.clipboard.writeText(activeItem?.input); toastr.success('{{ __('Copied prompt') }}');"
                            >
                                <x-tabler-copy class="size-4" />
                                {{ __('Prompt') }}
                            </span>

                            <span
                                class="mt-2"
                                x-text="activeItem?.input"
                            ></span>
                        </div>

                        <div class="mt-auto flex flex-wrap justify-between gap-y-3 text-[13px] font-medium">
                            <div class="w-full md:w-[30%]">
                                <div class="lqd-modal-img-info rounded-lg bg-black/[3%] p-2.5 dark:bg-white/[3%]">
                                    <p class="mb-1">@lang('Date')</p>
                                    <p
                                        class="mb-0 opacity-60"
                                        x-text="activeItem?.format_date ?? '{{ __('None') }}'"
                                    ></p>
                                </div>
                            </div>
                            <div class="w-full md:w-[30%]">
                                <div class="lqd-modal-img-info rounded-lg bg-black/[3%] p-2.5 dark:bg-white/[3%]">
                                    <p class="mb-1">@lang('Resolution')</p>
                                    <p
                                        class="mb-0 opacity-60"
                                        x-text="activeItem?.size ?? '{{ __('None') }}'"
                                    >
                                    </p>
                                </div>
                            </div>
                            <div class="w-full md:w-[30%]">
                                <div class="lqd-modal-img-info rounded-lg bg-black/[3%] p-2.5 dark:bg-white/[3%]">
                                    <p class="mb-1">@lang('Credit')</p>
                                    <p
                                        class="mb-0 opacity-60"
                                        x-text="activeItem?.credits ?? '{{ __('None') }}'"
                                    ></p>
                                </div>
                            </div>
                            <div class="w-full md:w-[30%]">
                                <div class="lqd-modal-img-info rounded-lg bg-black/[3%] p-2.5 dark:bg-white/[3%]">
                                    <p class="mb-1">@lang('AI Model')</p>
                                    <p
                                        class="mb-0 opacity-60"
                                        x-text="activeItem?.response ?? '{{ __('None') }}'"
                                    ></p>
                                </div>
                            </div>
                            <div class="w-full md:w-[30%]">
                                <div class="lqd-modal-img-info rounded-lg bg-black/[3%] p-2.5 dark:bg-white/[3%]">
                                    <p class="mb-1">@lang('Art Style')</p>
                                    <p
                                        class="mb-0 opacity-60"
                                        x-text="activeItem?.image_style ?? '{{ __('None') }}'"
                                    ></p>
                                </div>
                            </div>
                            <div class="w-full md:w-[30%]">
                                <div class="lqd-modal-img-info rounded-lg bg-black/[3%] p-2.5 dark:bg-white/[3%]">
                                    <p class="mb-1">@lang('Mood')</p>
                                    <p
                                        class="mb-0 opacity-60"
                                        x-text="activeItem?.image_mood ?? '{{ __('None') }}'"
                                    ></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Prev/Next buttons -->
                <a
                    class="absolute -start-1 top-1/2 z-10 inline-flex size-9 -translate-y-1/2 items-center justify-center rounded-full bg-background text-inherit shadow-md transition-all hover:scale-110 hover:bg-primary hover:text-primary-foreground"
                    href="#"
                    @click.prevent="prevItem()"
                >
                    <x-tabler-chevron-left class="size-5" />
                </a>
                <a
                    class="absolute -end-1 top-1/2 z-10 inline-flex size-9 -translate-y-1/2 items-center justify-center rounded-full bg-background text-inherit shadow-md transition-all hover:scale-110 hover:bg-primary hover:text-primary-foreground"
                    href="#"
                    @click.prevent="nextItem()"
                >
                    <x-tabler-chevron-right class="size-5" />
                </a>
            </div>
        </div>
    </div>
</div>

<template id="image_result">
    <div class="image-result lqd-loading-skeleton lqd-is-loading group w-full">
        <figure
            class="lqd-image-result-fig relative mb-3 aspect-square overflow-hidden rounded-lg shadow-md transition-all group-hover:-translate-y-1 group-hover:scale-105 group-hover:shadow-lg"
            data-lqd-skeleton-el
        >
            <img
                class="lqd-image-result-img aspect-square h-full w-full object-cover object-center"
                loading="lazy"
                src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgc3R5bGU9ImZpbGw6I2VlZWVlZTsiLz48L3N2Zz4="
            >
            <div
                class="lqd-image-result-actions absolute inset-0 flex w-full flex-col items-center justify-center gap-2 p-4 transition-opacity group-[&.lqd-is-loading]:invisible group-[&.lqd-is-loading]:opacity-0">
                <div class="opacity-0 transition-opacity group-hover:opacity-100">
                    <x-button
                        class="lqd-image-result-download download size-9 bg-background text-foreground hover:bg-background hover:bg-emerald-400 hover:text-white"
                        target="_blank"
                        size="none"
                        href="#"
                        download=true
                    >
                        <x-tabler-download class="size-5" />
                    </x-button>
                    <x-button
                        class="lqd-image-result-view gallery size-9 bg-background text-foreground hover:bg-background hover:bg-emerald-400 hover:text-white"
                        @click.prevent="setActiveItem( JSON.parse($el.getAttribute('data-payload') || {}) ); modalShow = true"
                        size="none"
                        href="#"
                    >
                        <x-tabler-eye class="size-5" />
                    </x-button>
                    <x-button
                        class="lqd-image-result-delete delete size-9 bg-background text-foreground hover:bg-background hover:bg-red-500 hover:text-white"
                        size="none"
                        onclick="return confirm('Are you sure?')"
                        href="#"
                    >
                        <x-tabler-x class="size-4" />
                    </x-button>
                </div>
                <span
                    class="lqd-image-result-type absolute bottom-4 end-4 mb-0 rounded-full bg-background px-2 py-1 text-3xs font-semibold uppercase leading-none transition-opacity group-[&.lqd-is-loading]:invisible group-[&[data-generator=de]]:text-red-500 group-[&[data-generator=sd]]:text-blue-500 group-[&.lqd-is-loading]:opacity-0"
                ></span>
            </div>
        </figure>
        <p
            class="lqd-image-result-title mb-1 w-full overflow-hidden overflow-ellipsis whitespace-nowrap text-heading-foreground transition-opacity"
            data-lqd-skeleton-el
        ></p>
    </div>
</template>

<template id="prompt-template">
    <div class="each-prompt flex items-center justify-between gap-2">
        <x-forms.input
            class="multi_prompts_description h-[53px] resize-none overflow-hidden rounded-2xl border-[3px] bg-background px-4 py-3.5 text-heading-foreground placeholder:text-foreground focus:ring-0 max-md:min-h-32 max-md:rounded-md"
            container-class="grow"
            size="xl"
            type="text"
            name="titles[]"
            placeholder="Type another title or description"
            required
        />

        <x-button
            class="size-11"
            data-toggle="remove-parent"
            tag="button"
            size="none"
            variant="danger"
            title="{{ __('Remove item') }}"
        >
            <x-tabler-trash class="size-5" />
        </x-button>
    </div>
</template>

@push('script')
    <script src="{{ custom_theme_url('/assets/libs/fslightbox/fslightbox.js') }}"></script>

    <script>
        var resizedImage;

        function handleTabClick(type) {
            stablediffusionType = type;
            let imageResolution = document.getElementById("image_resolution");
            let negativePrompt = document.getElementById("negative_prompt");
            let clipGuidancePreset = document.getElementById("clip_guidance_preset");
            imageResolution.disabled = false;
            negativePrompt.disabled = false;
            clipGuidancePreset.disabled = false;
            switch (type) {
                case "text-to-image":
                    break;
                case "image-to-image":
                    clipGuidancePreset.value = "";
                    clipGuidancePreset.disabled = true;
                    break;
                case "upscale":
                    imageResolution.disabled = true;
                    clipGuidancePreset.value = "";
                    clipGuidancePreset.disabled = true;
                    break;
                case "multi-prompt":
                    negativePrompt.disabled = true;
                    break;
            }
        }

        function handleAddPrompt() {
            const mulPromptsContainer = document.querySelector(".multi-prompts");
            const promptTemplate = document.querySelector("#prompt-template").content.cloneNode(true);
            const removeBtn = promptTemplate.querySelector("[data-toggle=\"remove-parent\"]");
            removeBtn.addEventListener("click", (e) => {
                event.preventDefault();
                e.currentTarget.parentElement.remove();
            });
            mulPromptsContainer.append(promptTemplate);
        }

        function dropHandler(ev, id) {
            // Prevent default behavior (Prevent file from being opened)
            ev.preventDefault();
            $("#" + id)[0].files = ev.dataTransfer.files;
            $("#" + id).prev().find(".file-name").text(ev.dataTransfer.files[0].name);
        }

        function dragOverHandler(ev) {
            // Prevent default behavior (Prevent file from being opened)
            ev.preventDefault();
        }

        function handleFileSelect(id) {
            $("#" + id).prev().find(".file-name").text($("#" + id)[0].files[0].name);
        }

        function resizeImage(e) {
            var file;
            if (stablediffusionType == "image-to-image") {
                file = $("#img2img_src")[0].files[0];
            } else if (stablediffusionType == "upscale") {
                file = $("#upscale_src")[0].files[0];
            }
            if (file == undefined) return;
            var reader = new FileReader();
            reader.onload = function(event) {
                var img = new Image();
                img.onload = function() {
                    var canvas = document.createElement("canvas");
                    var ctx = canvas.getContext("2d");
                    const img_size = $("#image_resolution").val();
                    let w = Number(img_size.split("x")[0]);
                    let h = Number(img_size.split("x")[1]);
                    if (stablediffusionType == "upscale") {
                        if (this.width % 64 != 0) {
                            w = Math.floor(this.width / 64) * 64 + 64;
                        } else {
                            w = this.width;
                        }
                        if (this.height % 64 != 0) {
                            h = Math.floor(this.height / 64) * 64 + 64;
                        } else {
                            h = this.height;
                        }
                        if (w * h >= 1024 * 1024) {
                            let s = Math.min(w, h);
                            let b = Math.max(w, h);
                            let a = b / s;
                            let x = Math.sqrt(1024 * 1024 / a);
                            if (s == w) {
                                w = Math.floor(x / 64) * 64;
                                h = Math.floor(x * a / 64) * 64;
                            }
                        }
                    }
                    canvas.width = w;
                    canvas.height = h;
                    var ctx = canvas.getContext("2d");
                    ctx.drawImage(img, 0, 0, w, h);
                    var dataurl = canvas.toDataURL("image/png");
                    var byteString = atob(dataurl.split(",")[1]);
                    var mimeString = dataurl.split(",")[0].split(":")[1].split(";")[0];
                    var ab = new ArrayBuffer(byteString.length);
                    var ia = new Uint8Array(ab);
                    for (var i = 0; i < byteString.length; i++) {
                        ia[i] = byteString.charCodeAt(i);
                    }
                    var blob = new Blob([ab], {
                        type: mimeString
                    });
                    resizedImage = new File([blob], file.name);
                };
                img.src = event.target.result;
            };
            reader.readAsDataURL(file);
        }

        document.getElementById("img2img_src").addEventListener("change", resizeImage);
        document.getElementById("upscale_src").addEventListener("change", resizeImage);
        document.getElementById("image_resolution").addEventListener("change", resizeImage);
        // document.getElementById("image_model").addEventListener('change', dallEModelChange);

        (() => {
            "use strict";

            const itemsPerPage = {{ $items_per_page }};
            let offset = itemsPerPage; // Declare offset globally
            let totalItems = {{ $total_items }};
            let nextCount = Math.min(totalItems - itemsPerPage, itemsPerPage);
            let loadingQueue = [];

            const imageContainer = document.querySelector(".image-results");
            const loadMoreTrigger = document.querySelector(".lqd-load-more-trigger");
            const imageResultTemplate = document.querySelector("#image_result");
            const loadMoreObserver = new IntersectionObserver(([entry], observer) => {
                if (entry.isIntersecting) {
                    if (loadMoreTrigger.classList.contains("lqd-is-loading")) return;
                    createSkeleton(imageResultTemplate, nextCount);
                    lazyLoadImages();
                }
            }, {
                threshold: [1]
            });

            loadMoreTrigger && loadMoreObserver.observe(loadMoreTrigger);

            function createSkeleton(template, limit = 5) {
                const skeletonTemplates = [];
                for (let i = 0; i < limit; i++) {
                    const skeleton = template.content.cloneNode(true);
                    skeletonTemplates.push(skeleton);
                    imageContainer.append(skeleton);
                    loadingQueue.push(imageContainer.lastElementChild);
                }

                return skeletonTemplates;
            }

            function lazyLoadImages() {
                loadMoreTrigger.classList.add("lqd-is-loading");

                fetch(`{{ route('dashboard.user.openai.lazyloadimage') }}?offset=${ offset }&post_type={{ $openai->slug }}`)
                    .then(response => response.json())
                    .then(data => {
                        const images = data.images;
                        const currenturl = window.location.href;
                        const server = currenturl.split("/")[0];

                        nextCount = Math.min(data.count_remaining, itemsPerPage);

                        images.forEach((image, index) => {
                            const imageResultTemplate = loadingQueue[index];
                            const delete_url = `${ server }/dashboard/user/openai/documents/delete/image/${ image.slug }`;

                            imageResultTemplate.setAttribute("data-id", image.id);
                            imageResultTemplate.setAttribute("data-generator", image.response == "SD" ? "sd" : "de");
                            imageResultTemplate.querySelector(".lqd-image-result-img").setAttribute("src", image.thumbnail);
                            imageResultTemplate.querySelector(".lqd-image-result-type").innerHTML = image.response == "SD" ? "SD" : "DE";
                            imageResultTemplate.querySelector(".lqd-image-result-view").setAttribute("data-payload", JSON.stringify(image));

                            imageResultTemplate.querySelector(".lqd-image-result-delete").setAttribute("href", delete_url);
                            imageResultTemplate.querySelector(".lqd-image-result-download").setAttribute("href", image.output);
                            imageResultTemplate.querySelector(".lqd-image-result-download").setAttribute("download", image.slug);
                            imageResultTemplate.querySelector(".lqd-image-result-title").setAttribute("title", image.input);
                            imageResultTemplate.querySelector(".lqd-image-result-title").innerText = image.input;

                            imageResultTemplate.classList.remove("lqd-is-loading");
                        });

                        loadingQueue = [];

                        // Update the offset for the next lazy loading request
                        offset += images.length;
                        // Refresh lightbox, check if there are more images
                        refreshFsLightbox();

                        loadMoreTrigger.classList.remove("lqd-is-loading");

                        if (data.count_remaining <= 0) {
                            loadMoreTrigger.setAttribute("data-all-loaded", "true");
                            loadMoreObserver.disconnect();
                        } else {
                            // check if loadMoreTrigger is in view. if it is load more images
                            if (loadMoreTrigger.getBoundingClientRect().top <= window.innerHeight) {
                                createSkeleton(imageResultTemplate, nextCount);
                                lazyLoadImages();
                            }
                        }

                    });
            }
        })();
    </script>
    @includeIf('midjourney::midjourney-script')
    @includeFirst(['flux-pro::flux-pro-script', 'panel.user.openai.includes.flux-pro-script', 'vendor.empty'])
    @includeFirst(['ideogram::ideogram-script', 'panel.user.openai.includes.ideogram-script', 'vendor.empty'])
	@includeIf('nano-banana::nano-banana-script')
	@includeIf('see-dream-v4::see-dream-v4-script')
@endpush
