@section('title'){{ __('Generate Premium Email - Zemail.me') }}@endsection
<span>
    <div class="flex-1 overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700 dark:bg-white/[0.03]  sm:px-8 sm:py-8 lg:p-12">
        <div class="text-center mb-6">
                <div class="flex items-center justify-center gap-3 sm:gap-4">
                    {{-- Public Label --}}
                    <span class="text-xs sm:text-sm font-medium @if($premium === false) text-gray-800 dark:text-gray-100 font-semibold  @else text-gray-400 dark:text-gray-500 @endif ">
                        Public
                    </span>

                    {{-- Toggle Switch --}}
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input
                            type="checkbox"
                            wire:click="toggleMode"
                            class="sr-only peer"
                            @checked($premium)
                        >
                        <div class="w-8 h-4 bg-gray-300 dark:bg-gray-600 rounded-full peer-checked:bg-[#F14743] dark:peer-checked:bg-[#F14743] transition-colors duration-300"></div>
                        <div class="absolute left-0.5 top-0.5 w-3 h-3 bg-white border border-gray-300 dark:border-gray-700 rounded-full transition-transform duration-300 peer-checked:translate-x-4"></div>
                    </label>

                    {{-- Premium Label --}}
                    <span class="text-xs sm:text-sm font-medium @if($premium === true) text-[#F14743] font-semibold @else text-gray-400 dark:text-gray-500 @endif">
                        Premium
                    </span>
                </div>
        </div>
        <div class="rounded-xl border dark:border-white/[0.1] border-black/[0.3] p-6 shadow-xs ring-white/[0.5] lg:w-1/2 mx-auto">
            <div class="text-center">
                <h2 class="text-lg font-medium text-gray-900 dark:text-gray-400">Generate {{ $premium ? 'Premium' : 'Public' }} Email</h2>
                <div class="space-y-6">
                    <div class="my-6">
                        <div class="w-auto relative block group/input cursor-pointer"  x-on:click="$dispatch('copyEmail')">
                            <div id="copyEmail" role="textbox" aria-readonly="true" class="truncate w-auto cursor-pointer rounded-lg block disabled:shadow-none dark:shadow-none appearance-none text-base sm:text-sm py-2 h-10 leading-[1.375rem] ps-3 pe-3 bg-zinc-800/5 dark:bg-white/10 dark:disabled:bg-white/[7%] text-zinc-700 placeholder-zinc-500 disabled:placeholder-zinc-400 dark:text-zinc-200 dark:placeholder-white/60 dark:disabled:placeholder-white/40 border-0 text-center">{{ $email ?? __('Create your own Temp Mail') }}</div>
                            <div class="absolute top-0 bottom-0 flex items-center gap-x-1.5 pe-3 end-0 text-xs text-zinc-400"></div>
                        </div>
                    </div>
                    <div>
                        <form wire:submit.prevent="create" method="post">
                        <div>
                            <div class="mt-2">
                                <div class="flex items-center rounded-md dark:bg-zinc-700 pl-3 outline-1 -outline-offset-1 outline-zinc-200 has-[input:focus-within]:outline-2 has-[input:focus-within]:-outline-offset-2 dark:has-[input:focus-within]:outline-white has-[input:focus-within]:outline-zinc-900">
                                    <div class="shrink-0 text-base text-gray-500 select-none sm:text-sm/6 mr-1.5">
                                        <flux:icon.mail variant="mini"/>
                                    </div>
                                    <input type="text" name="username" id="username" autocomplete="false" wire:model.defer="username" class="block min-w-0 grow py-2 pr-3 pl-1 text-base dark:text-white text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm/6" placeholder="{{ __('Enter Username') }}">
                                    <div class="grid shrink-0 grid-cols-1 focus-within:relative">
                                        <select id="domain" name="domain" aria-label="Domain" wire:model="domain" class="col-start-1 row-start-1 w-full appearance-none rounded-md py-1.5 pr-7 pl-3 text-base text-gray-500 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 dark:focus:outline-white focus:outline-zinc-900 sm:text-sm/6">
                                            <option class="dark:bg-zinc-700 dark:text-white bg-zinc-100 accent-gray-700" selected>{{ __('Select Domain') }}</option>
                                            @foreach(array_reverse($domains) as $domain)
                                                <option x-on:click="$refs.domain.value = '{{ $domain }}'; $wire.setDomain('{{ $domain }}')" class="dark:bg-zinc-700 dark:text-white bg-zinc-100 accent-gray-700">{{ $domain }}</option>
                                            @endforeach
                                        </select>
                                        <svg class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
                                            <path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="flex my-6">
                            <div class="flex w-full">
                                <div class="w-1/2">
                                    <flux:button wire:click="random()" class="cursor-pointer w-full btn-warning" variant="filled">{{ __('Random') }} Email</flux:button>
                                </div>
                                <div class="w-1/2">
                                    <flux:button class="w-full ml-2 btn-success cursor-pointer" type="submit" variant="primary">{{ __('Create') }}</flux:button>
                                </div>
                            </div>
                        </div>
                        </form>
                    </div>
                    <flux:separator text="or" />

                    <div class="flex w-full">
                        <div class="w-1/2">
                            <flux:button wire:click="outlook()" class="cursor-pointer w-full btn-outlook" type="submit" variant="filled">Disposable Gmail</flux:button>
                        </div>
                        <div class="w-1/2">
                            <flux:button wire:click="gmail()" class="cursor-pointer w-full ml-2 btn-gmail" type="submit" variant="filled">Disposable Gmail</flux:button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div x-data="{ currentTab: 0 }">
        <div class="m-auto my-4 px-1 max-w-full max-lg:min-w-fit lg:max-w-96 flex justify-center">
            <div class="w-full lg:px-12">
                <ui-tabs class="block inline-flex p-1 rounded-lg bg-zinc-800/5 dark:bg-white/10 h-10 p-1  w-full" data-flux-tabs="" role="tablist">
                    <button type="button" x-on:click="currentTab = 0;" class="flex cursor-pointer whitespace-nowrap flex-1 justify-center items-center gap-2 rounded-md data-selected:shadow-xs text-sm font-medium text-zinc-600 hover:text-zinc-800 dark:hover:text-white dark:text-white/70 data-selected:text-zinc-800 dark:data-selected:text-white data-selected:bg-white dark:data-selected:bg-white/20 px-4" data-flux-tab="data-flux-tab" :data-selected="currentTab === 0 ? '' : null"  role="tab">
                        Inbox
                    </button>
                    <button type="button" x-on:click="currentTab = 1;" class="flex cursor-pointer whitespace-nowrap flex-1 justify-center items-center gap-2 rounded-md data-selected:shadow-xs text-sm font-medium text-zinc-600 hover:text-zinc-800 dark:hover:text-white dark:text-white/70 data-selected:text-zinc-800 dark:data-selected:text-white data-selected:bg-white dark:data-selected:bg-white/20 px-4" data-flux-tab="data-flux-tab" :data-selected="currentTab === 1 ? '' : null" role="tab">
                        Mailbox
                    </button>
                    <button type="button" x-on:click="currentTab = 2;" class="flex cursor-pointer whitespace-nowrap flex-1 justify-center items-center gap-2 rounded-md data-selected:shadow-xs text-sm font-medium text-zinc-600 hover:text-zinc-800 dark:hover:text-white dark:text-white/70 data-selected:text-zinc-800 dark:data-selected:text-white data-selected:bg-white dark:data-selected:bg-white/20 px-4" data-flux-tab="data-flux-tab" :data-selected="currentTab === 2 ? '' : null" role="tab">
                        Email
                    </button>
                </ui-tabs>
            </div>
        </div>

        @if($email !== null)
        <div class="rounded-xl border dark:border-white/[0.1] border-black/[0.3]" x-show="currentTab === 0">
        <div class="mt-4 w-full text-center">
            <div class="flex flex-full flex-row">
                <div class="w-1/3"><flux:button class="w-3/4 cursor-pointer" x-on:click="$dispatch('copyEmail')">Copy</flux:button></div>
                <div class="w-1/3">
                    <button type="button" class="relative items-center font-medium justify-center gap-2 whitespace-nowrap disabled:opacity-75 dark:disabled:opacity-75 disabled:cursor-default disabled:pointer-events-none h-10 text-sm rounded-lg px-4 inline-flex  bg-white hover:bg-zinc-50 dark:bg-zinc-700 dark:hover:bg-zinc-600/75 text-zinc-800 dark:text-white border border-zinc-200 hover:border-zinc-200 border-b-zinc-300/80 dark:border-zinc-600 dark:hover:border-zinc-600 shadow-xs [[data-flux-button-group]_&amp;]:border-s-0 [:is([data-flux-button-group]>&amp;:first-child,_[data-flux-button-group]_:first-child>&amp;)]:border-s-[1px]  w-3/4 cursor-pointer" data-flux-button="data-flux-button" data-flux-group-target="data-flux-group-target" x-on:click="Livewire.dispatch('fetchMessages'); document.getElementById('refresh-icon').classList.add('animate-spin')">
                        <svg id="refresh-icon" class="shrink-0 [:where(&amp;)]:size-4" data-flux-icon="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
                            <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path>
                            <path d="M21 3v5h-5"></path>
                            <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path>
                            <path d="M8 16H3v5"></path>
                        </svg>
                        Refresh
                    </button>
                </div>
                <div class="w-1/3">
                    <flux:button class="w-3/4 cursor-pointer inbox-btn" wire:click="deleteEmail()" type="submit">{{ __('Delete') }}</flux:button>
                </div>
            </div>
        </div>
        <div class="w-full mt-4">
            <div x-data="{ show: false, id: 0 }" class="mx-3">
            @if($messages)
                    <div class="mailbox">
                    <div x-show="!show" class="list">
                        <div class="mb-3"></div>
                        @foreach(array_reverse($messages) as $i => $message)
                            <div class="inbox-list cursor-pointer" x-on:click="show = true; id = {{ $message['id'] }};" data-id="{{ $message['id'] }}">
                                <div class="block rounded-lg bg-white shadow-md dark:bg-zinc-700 text-left">
                                    <div class="flex items-center px-4 py-4 sm:px-6">
                                        <div class="flex flex-1 items-center min-w-0">
                                            <div class="flex-shrink-0">
                                                <span class="relative inline-block">
            {{--                                            <img src="{{ asset('images/user.webp') }}" class="size-12" alt="inbox-logo" />--}}
                                                    <span class="{{ $message['sender_photo']['dark'] }} {{ $message['sender_photo']['light'] }} inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle size-11 text-[22px] transition">
                                                        <span id="sender-logo" class="font-medium leading-none text-gray-100 dark:text-gray-300 dark:group-hover:text-gray-200 group-hover:text-gray-700 truncate">{{ strtoupper(substr($message['sender_name'] ?: $message['sender_email'], 0, 1) ) }}</span>
                                                    </span>
                                                    @if(!$message['is_seen'])
                                                        <span class="shadow-solid absolute bottom-0 right-0 block w-3 h-3  dark:text-gray-500 text-white bg-amber-300 dark:bg-amber-400 rounded-full"></span>
                                                    @endif
                                                </span>
                                            </div>
                                            <div class="flex-1 px-4 min-w-0 md:grid md:gap-4 md:grid-cols-2">
                                                <div>
                                                    <div class="dark:text-accent text-accent-content text-sm font-medium leading-5 truncate">
                                                        {{ $message['sender_name'] }}
                                                    </div>
                                                    <div class="flex items-center mt-2 dark:text-gray-400 text-gray-500 text-sm leading-5">
                                                        <svg fill="currentColor" viewBox="0 0 20 20"
                                                             class="flex-shrink-0 mr-1.5 w-5 h-5 text-gray-400">
                                                            <path fill-rule="evenodd"
                                                                  d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884zM18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"
                                                                  clip-rule="evenodd"></path>
                                                        </svg>
                                                        <span class="truncate">{{ $message['sender_email'] }}</span></div>
                                                </div>
                                                <div class="hidden md:block">
                                                    <div>
                                                        <div class="dark:text-gray-300 text-gray-900 text-sm leading-5 truncate">
                                                            {{ $message['subject'] }}
                                                        </div>
                                                        <div
                                                            class="flex items-center mt-2 text-gray-400 dark:text-gray-400 text-sm leading-5 truncate">
                                                            {{ Str::limit($message['contentText'], 100) }}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div>
                                            <svg fill="currentColor" viewBox="0 0 20 20" class="w-5 h-5 text-gray-400">
                                                <path fill-rule="evenodd"
                                                      d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                                                      clip-rule="evenodd"></path>
                                            </svg>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <div x-show="show" class="message mx-2 mb-2 ">
                        @foreach(array_reverse($messages) as $message)
                            <div x-show="id === {{ $message['id'] }}" id="message-{{ $message['id'] }}">
                                <textarea class="hidden">To: {{ $this->email ?? "" }}&#13;From: "{{ $message['sender_name'] }}" <{{ $message['sender_email'] }}>&#13;Subject: {{ $message['subject'] }}&#13;Date: {{ $message['date'] }}&#13;Content-Type: text/html&#13;&#13;{{ $message['content'] }}</textarea>
                                <span>
                                    <div class="-mx-2">
                                    <nav class="flex items-center cursor-pointer" x-on:click="show = false">
                                        <flux:icon.chevron-left variant="mini"/>
                                        <flux:text>{{ __('Get back to MailBox') }}</flux:text>
                                    </nav>

                                    <div class="mt-2 md:flex md:items-center md:justify-between">
                                        <div class="flex-1 min-w-0">
                                            <h2 class="dark:text-gray-300 text-gray-900 text-2xl font-bold leading-7 sm:truncate">
                                                {{ $message['subject'] }}
                                            </h2>
                                        </div>
                                        <div class="flex flex-shrink-0 mt-4 overflow-y-auto md:ml-4 md:mt-0 gap-2">
                                            <flux:button iconVariant="mini" iconLeading="download" x-on:click="$dispatch('downloadFile', { download_id: {{ $message['id'] }} })" class="cursor-pointer">Download</flux:button>
            {{--                                    <flux:button iconVariant="mini" iconLeading="file">Source</flux:button>--}}
                                            <flux:button iconVariant="mini" iconLeading="printer" x-on:click="$dispatch('printFile', { print_id: {{ $message['id'] }} })" class="cursor-pointer">Print</flux:button>
                                            <flux:button iconVariant="mini" iconLeading="trash" x-on:click="show = false; id = 0; document.querySelector(`[data-id='{{ $message['id'] }}']`).remove()" wire:click="delete({{ $message['id'] }})" class="cursor-pointer" style="color: #F14743;">{{ __('Delete') }}</flux:button>
                                        </div>
                                    </div>
                                    <div class="mt-4 px-4 py-5 bg-white border-b border-gray-200 dark:border-gray-900 shadow overflow-hidden sm:px-6 sm:rounded-md">
                                        <div class="flex flex-wrap items-center justify-between -ml-4 -mt-4 sm:flex-nowrap">
                                            <div class="ml-4 mt-4">
                                                <div class="flex items-center">
                                                    <div class="flex-shrink-0">
                                                        <span class="{{ $message['sender_photo']['dark'] }} {{ $message['sender_photo']['light'] }} inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle size-11 text-[22px] transition">
                                                            <span id="sender-logo" class="font-medium leading-none text-gray-100 dark:text-gray-300 dark:group-hover:text-gray-200 group-hover:text-gray-700 truncate">{{ strtoupper(substr($message['sender_name'] ?: $message['sender_email'], 0, 1) ) }}</span>
                                                        </span>
                                                    </div>
                                                    <div class="ml-4">
                                                        <div class="text-gray-700 text-lg font-medium leading-6">
                                                            {{ $message['sender_name'] }}
                                                            <span class="text-gray-700 text-sm font-normal leading-5">{{ $message['sender_email'] }}</span>
                                                        </div>
                                                        <div class="flex items-center mt-2 text-gray-500 text-sm leading-5">
                                                            <svg fill="currentColor" viewBox="0 0 20 20" class="flex-shrink-0 mr-1.5 w-5 h-5 text-gray-400">
                                                                <path fill-rule="evenodd" d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884zM18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" clip-rule="evenodd"></path>
                                                            </svg>
                                                            <span class="truncate"><a href="mailto:{{ $message['sender_email'] }}"
                                                                                      class="ml-1">{{ $email ?? "" }};</a></span></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="flex flex-shrink-0 ml-4 mt-4">
                                                <time datetime="2025-04-24T10:11:55+00:00" class="text-gray-500 truncate">
                                                    {{ $message['datediff'] }}
                                                </time>
                                            </div>
                                        </div>
                                        <div class="px-4 py-5 sm:px-6">
                                            <iframe srcdoc="{{ $message['content'] }}" class="w-full iframe-min-height">
                                            </iframe>
                                        </div>
                                        @if (count($message['attachments']) > 0)
                                            <div class="grid grid-cols-1 mt-2 text-sm leading-5 text-gray-900 lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2">
                                                @foreach ($message['attachments'] as $attachment)
                                                    <button class="mb-2 mr-2 border border-gray-200 rounded-md text-sm leading-5 hover:text-gray-500 cursor-pointer" onclick="window.open('{{ $attachment['url'] }}', '_blank')">
                                                        <div class="py-3 pl-3 pr-4">
                                                            <div class="flex flex-1 items-center">
                                                                <svg class="h-5 w-5 flex-shrink-0 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                                                                    <path fill-rule="evenodd" d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z" clip-rule="evenodd"></path>
                                                                </svg>
                                                                <span class="ml-2 flex-1 truncate">{{ $attachment['file'] }}</span>
                                                            </div>
                                                        </div>
                                                    </button>
                                                @endforeach
                                            </div>
                                        @endif

                                    </div>
                                </div>
                                </span>
                            </div>
                        @endforeach
                    </div>
                </div>

            @else
                 <div class="mb-3"></div>
                 <div class="mb-3 block rounded-b-lg bg-white shadow-md dark:bg-zinc-700 items-center">
                    <div class="flex mailbox-min-height w-full items-center justify-center px-4 py-4 sm:px-6">
                        <div class="waitingBox flex flex-col items-center relative -space-y-4">
                            <div class="absolute -mt-4 inset-0 flex justify-center items-center animate-spin duration-2000">
                                <flux:icon.refresh-cw variant="mini" style="color: #ffffdf" />
                            </div>
                            <svg width="120" height="124" viewBox="0 0 92 87" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M26 54.37V38.9C26.003 37.125 26.9469 35.4846 28.48 34.59L43.48 25.84C45.027 24.9468 46.933 24.9468 48.48 25.84L63.48 34.59C65.0285 35.4745 65.9887 37.1167 66 38.9V54.37C66 57.1314 63.7614 59.37 61 59.37H31C28.2386 59.37 26 57.1314 26 54.37Z" fill="#8C92A5"></path>
                                <path d="M46 47.7L26.68 36.39C26.2325 37.1579 25.9978 38.0312 26 38.92V54.37C26 57.1314 28.2386 59.37 31 59.37H61C63.7614 59.37 66 57.1314 66 54.37V38.9C66.0022 38.0112 65.7675 37.1379 65.32 36.37L46 47.7Z" fill="#CDCDD8"></path>
                                <path d="M27.8999 58.27C28.7796 58.9758 29.8721 59.3634 30.9999 59.37H60.9999C63.7613 59.37 65.9999 57.1314 65.9999 54.37V38.9C65.9992 38.0287 65.768 37.1731 65.3299 36.42L27.8999 58.27Z" fill="#E5E5F0"></path>
                            </svg>
                            <flux:text>{{ $initial ? __('Empty Inbox') : __('Fetching') }}</flux:text>
                        </div>
                    </div>
                </div>
            @endif
            </div>
        </div>
        </div>
        @endif

        <div class="rounded-xl border dark:border-white/[0.1] border-black/[0.3]" x-show="currentTab === 1">
            <div class="w-full text-center">
                 <div class="p-2 block rounded-xl items-center">
                    <h2 class="pt-3 text-lg font-semibold mb-4 text-center text-black dark:text-white">Generated Mailbox Addresses</h2>
                      <!-- Responsive Email List -->
                      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-left px-2">
                        @foreach(array_reverse($mailboxHistory) as $email)
                          <div wire:click="switchEmail('{{ $email }}')" class="cursor-pointer bg-gray-200 dark:bg-zinc-700 rounded-lg p-4 text-sm text-black dark:text-white flex items-center justify-between">
                              <span class="truncate">{{ $email }}</span>
                              <span class="text-gray-500 dark:text-gray-300 text-base"><flux:icon.arrow-right-circle /></span>
                          </div>
                        @endforeach
                      </div>
                </div>
            </div>
        </div>

        <div class="rounded-xl border dark:border-white/[0.1] border-black/[0.3]" x-show="currentTab === 2">
            <div class="w-full text-center">
                 <div class="p-2 block rounded-xl  items-center">
                    <h2 class="pt-6 text-lg font-semibold mb-4 text-center text-black dark:text-white">Email History</h2>
                    <!-- Responsive Email List -->
                    <div class="w-full mt-4">
                        <div x-data="{ show: false, id: 0 }" class="mx-3">
                        @if($emailsHistory)
                                <div class="mailbox">
                                <div x-show="!show" class="list">
                                    <div class="mb-3"></div>
                                    @foreach(array_reverse($emailsHistory) as $i => $message)
                                        <div class="inbox-list cursor-pointer" x-on:click="show = true; id = {{ $message['id'] }};" data-id="{{ $message['id'] }}">
                                            <div class="block rounded-lg bg-white shadow-md dark:bg-zinc-700 text-left">
                                                <div class="flex items-center px-4 py-4 sm:px-6">
                                                    <div class="flex flex-1 items-center min-w-0">
                                                        <div class="flex-shrink-0">
                                                            <span class="relative inline-block">
                        {{--                                            <img src="{{ asset('images/user.webp') }}" class="size-12" alt="inbox-logo" />--}}
                                                                <span class="{{ $message['sender_photo']['dark'] }} {{ $message['sender_photo']['light'] }} inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle size-11 text-[22px] transition">
                                                                    <span id="sender-logo" class="font-medium leading-none text-gray-100 dark:text-gray-300 dark:group-hover:text-gray-200 group-hover:text-gray-700 truncate">{{ strtoupper(substr($message['sender_name'] ?: $message['sender_email'], 0, 1) ) }}</span>
                                                                </span>
                                                                @if(!$message['is_seen'])
                                                                    <span class="shadow-solid absolute bottom-0 right-0 block w-3 h-3  dark:text-gray-500 text-white bg-amber-300 dark:bg-amber-400 rounded-full"></span>
                                                                @endif
                                                            </span>
                                                        </div>
                                                        <div class="flex-1 px-4 min-w-0 md:grid md:gap-4 md:grid-cols-2">
                                                            <div>
                                                                <div class="dark:text-accent text-accent-content text-sm font-medium leading-5 truncate">
                                                                    {{ $message['sender_name'] }}
                                                                </div>
                                                                <div class="flex items-center mt-2 dark:text-gray-400 text-gray-500 text-sm leading-5">
                                                                    <svg fill="currentColor" viewBox="0 0 20 20"
                                                                         class="flex-shrink-0 mr-1.5 w-5 h-5 text-gray-400">
                                                                        <path fill-rule="evenodd"
                                                                              d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884zM18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"
                                                                              clip-rule="evenodd"></path>
                                                                    </svg>
                                                                    <span class="truncate">{{ $message['sender_email'] }}</span></div>
                                                            </div>
                                                            <div class="hidden md:block">
                                                                <div>
                                                                    <div class="dark:text-gray-300 text-gray-900 text-sm leading-5 truncate">
                                                                        {{ $message['subject'] }}
                                                                    </div>
                                                                    <div
                                                                        class="flex items-center mt-2 text-gray-400 dark:text-gray-400 text-sm leading-5 truncate">
                                                                        {{ Str::limit($message['contentText'], 100) }}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div>
                                                        <svg fill="currentColor" viewBox="0 0 20 20" class="w-5 h-5 text-gray-400">
                                                            <path fill-rule="evenodd"
                                                                  d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                                                                  clip-rule="evenodd"></path>
                                                        </svg>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                <div x-show="show" class="message mx-2 mb-2 ">
                                    @foreach(array_reverse($emailsHistory) as $message)
                                        <div x-show="id === {{ $message['id'] }}" id="message-{{ $message['id'] }}">
                                            <textarea class="hidden">To: {{ $this->email ?? "" }}&#13;From: "{{ $message['sender_name'] }}" <{{ $message['sender_email'] }}>&#13;Subject: {{ $message['subject'] }}&#13;Date: {{ $message['date'] }}&#13;Content-Type: text/html&#13;&#13;{{ $message['content'] }}</textarea>
                                            <span>
                                                <div class="-mx-2">
                                                <nav class="flex items-center cursor-pointer" x-on:click="show = false">
                                                    <flux:icon.chevron-left variant="mini"/>
                                                    <flux:text>{{ __('Get back to MailBox') }}</flux:text>
                                                </nav>

                                                <div class="mt-2 md:flex md:items-center md:justify-between">
                                                    <div class="flex-1 min-w-0">
                                                        <h2 class="dark:text-gray-300 text-gray-900 text-2xl font-bold leading-7 sm:truncate">
                                                            {{ $message['subject'] }}
                                                        </h2>
                                                    </div>
                                                    <div class="flex flex-shrink-0 mt-4 overflow-y-auto md:ml-4 md:mt-0 gap-2">
                                                        <flux:button iconVariant="mini" iconLeading="download" x-on:click="$dispatch('downloadFile', { download_id: {{ $message['id'] }} })" class="cursor-pointer">Download</flux:button>
                        {{--                                    <flux:button iconVariant="mini" iconLeading="file">Source</flux:button>--}}
                                                        <flux:button iconVariant="mini" iconLeading="printer" x-on:click="$dispatch('printFile', { print_id: {{ $message['id'] }} })" class="cursor-pointer">Print</flux:button>
                                                        <flux:button iconVariant="mini" iconLeading="trash" x-on:click="show = false; id = 0; document.querySelector(`[data-id='{{ $message['id'] }}']`).remove()" wire:click="delete({{ $message['id'] }})" class="cursor-pointer" style="color: #F14743;">{{ __('Delete') }}</flux:button>
                                                    </div>
                                                </div>
                                                <div class="mt-4 px-4 py-5 bg-white border-b border-gray-200 dark:border-gray-900 shadow overflow-hidden sm:px-6 sm:rounded-md">
                                                    <div class="flex flex-wrap items-center justify-between -ml-4 -mt-4 sm:flex-nowrap">
                                                        <div class="ml-4 mt-4">
                                                            <div class="flex items-center">
                                                                <div class="flex-shrink-0">
                                                                    <span class="{{ $message['sender_photo']['dark'] }} {{ $message['sender_photo']['light'] }} inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle size-11 text-[22px] transition">
                                                                        <span id="sender-logo" class="font-medium leading-none text-gray-100 dark:text-gray-300 dark:group-hover:text-gray-200 group-hover:text-gray-700 truncate">{{ strtoupper(substr($message['sender_name'] ?: $message['sender_email'], 0, 1) ) }}</span>
                                                                    </span>
                                                                </div>
                                                                <div class="ml-4">
                                                                    <div class="text-gray-700 text-lg font-medium leading-6">
                                                                        {{ $message['sender_name'] }}
                                                                        <span class="text-gray-700 text-sm font-normal leading-5">{{ $message['sender_email'] }}</span>
                                                                    </div>
                                                                    <div class="flex items-center mt-2 text-gray-500 text-sm leading-5">
                                                                        <svg fill="currentColor" viewBox="0 0 20 20" class="flex-shrink-0 mr-1.5 w-5 h-5 text-gray-400">
                                                                            <path fill-rule="evenodd" d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884zM18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" clip-rule="evenodd"></path>
                                                                        </svg>
                                                                        <span class="truncate"><a href="mailto:{{ $message['sender_email'] }}"
                                                                                                  class="ml-1">{{ $message['to'][0] ?? "" }};</a></span></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="flex flex-shrink-0 ml-4 mt-4">
                                                            <time datetime="2025-04-24T10:11:55+00:00" class="text-gray-500 truncate">
                                                                {{ $message['datediff'] }}
                                                            </time>
                                                        </div>
                                                    </div>
                                                    <div class="px-4 py-5 sm:px-6">
                                                        <iframe srcdoc="{{ $message['content'] }}" class="w-full iframe-min-height">
                                                        </iframe>
                                                    </div>
                                                    @if (count($message['attachments']) > 0)
                                                        <div class="grid grid-cols-1 mt-2 text-sm leading-5 text-gray-900 lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2">
                                                            @foreach ($message['attachments'] as $attachment)
                                                                <button class="mb-2 mr-2 border border-gray-200 rounded-md text-sm leading-5 hover:text-gray-500 cursor-pointer" onclick="window.open('{{ $attachment['url'] }}', '_blank')">
                                                                    <div class="py-3 pl-3 pr-4">
                                                                        <div class="flex flex-1 items-center">
                                                                            <svg class="h-5 w-5 flex-shrink-0 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                                                                                <path fill-rule="evenodd" d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z" clip-rule="evenodd"></path>
                                                                            </svg>
                                                                            <span class="ml-2 flex-1 truncate">{{ $attachment['file'] }}</span>
                                                                        </div>
                                                                    </div>
                                                                </button>
                                                            @endforeach
                                                        </div>
                                                    @endif

                                                </div>
                                            </div>
                                            </span>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            @else
                                <div class="mb-3"></div>
                                <div class="mb-3 block rounded-b-lg bg-white shadow-md dark:bg-zinc-700 items-center">
                                <div class="flex mailbox-min-height w-full items-center justify-center px-4 py-4 sm:px-6">
                                    <div class="waitingBox flex flex-col items-center relative -space-y-4">
                                        <div class="absolute -mt-4 inset-0 flex justify-center items-center animate-spin duration-2000">
                                            <flux:icon.refresh-cw variant="mini" style="color: #ffffdf" />
                                        </div>
                                        <svg width="120" height="124" viewBox="0 0 92 87" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M26 54.37V38.9C26.003 37.125 26.9469 35.4846 28.48 34.59L43.48 25.84C45.027 24.9468 46.933 24.9468 48.48 25.84L63.48 34.59C65.0285 35.4745 65.9887 37.1167 66 38.9V54.37C66 57.1314 63.7614 59.37 61 59.37H31C28.2386 59.37 26 57.1314 26 54.37Z" fill="#8C92A5"></path>
                                            <path d="M46 47.7L26.68 36.39C26.2325 37.1579 25.9978 38.0312 26 38.92V54.37C26 57.1314 28.2386 59.37 31 59.37H61C63.7614 59.37 66 57.1314 66 54.37V38.9C66.0022 38.0112 65.7675 37.1379 65.32 36.37L46 47.7Z" fill="#CDCDD8"></path>
                                            <path d="M27.8999 58.27C28.7796 58.9758 29.8721 59.3634 30.9999 59.37H60.9999C63.7613 59.37 65.9999 57.1314 65.9999 54.37V38.9C65.9992 38.0287 65.768 37.1731 65.3299 36.42L27.8999 58.27Z" fill="#E5E5F0"></path>
                                        </svg>
                                        <flux:text>{{  __('No email history') }}</flux:text>
                                    </div>
                                </div>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div> <!-- Top Div -->
</span>
