<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>@yield('title', config('app.settings.app_title'))</title>
        <meta name="description" content="@yield('description', config('app.settings.app_description'))">
        <meta name="keywords" content="@yield('keywords', config('app.settings.app_keyword'))">
        @forelse (json_decode(config('app.settings.app_meta')) as $key => $value)
        @if ($value)
        <meta name="{{ $key }}" content="{{ $value }}">
        @endif
        @empty
        @endforelse

        @yield('metas')

        @if (file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot')))
            @vite(['resources/css/app.css', 'resources/css/boil.css', 'resources/js/app.js', 'resources/js/boil.js'])
        @endif
        <link rel="icon" type="image/png" href="{{ asset('images/logo.webp') }}">
        @fluxAppearance
        {!! config('app.settings.app_header') !!}
        @yield('custom_header')
    </head>
    <body class="min-h-screen bg-white dark:bg-zinc-800">
    <x-impersonation-banner />
    <flux:sidebar sticky stashable class="bg-zinc-50 dark:bg-zinc-900 border-r rtl:border-r-0 rtl:border-l border-zinc-200 dark:border-zinc-700">
        <flux:sidebar.toggle class="lg:hidden" icon="x-mark" />
        <a class="flex items-center px-2 py-2 cursor-pointer" href="{{ route('home') }}">
            <img src="{{ asset('images/zemail-logo-light.webp') }}" class="dark:hidden" alt="logo"/>
            <img src="{{ asset('images/zemail-logo-dark.webp') }}" class="hidden dark:flex" alt="logo"/>
        </a>

        <flux:navlist variant="outline">
            <flux:button class="cursor-pointer inbox-btn" variant="filled" icon="inbox" x-on:click="window.location.href = '{{ route('mailbox') }}'">{{ __('Inbox') }}</flux:button>
            <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-zinc-800/5 hover:bg-zinc-800/10 dark:bg-white/10 dark:hover:bg-white/20 text-zinc-800 dark:text-white   [[data-flux-button-group]_&amp;]:border-e [:is([data-flux-button-group]>&amp;:last-child,_[data-flux-button-group]_:last-child>&amp;)]:border-e-0 [[data-flux-button-group]_&amp;]:border-zinc-200/80 dark:[[data-flux-button-group]_&amp;]:border-zinc-900/50  mt-2 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>
            <flux:modal.trigger name="premium">
            <button type="button" class="premium-btn mt-2">
                <span class="crown"></span>
                <span class="crown-bg1"></span>
                <span class="crown-bg2"></span>
                <span class="btn-text">Get Premium</span>
            </button>
            </flux:modal.trigger>
        </flux:navlist>
        <div id="sidebar-magic" class="items-center border-1 dark:border-zinc-800 border-zinc-200 hidden">
            <p class="px-6 py-4 text-sm dark:bg-zinc-900 bg-zinc-100 dark:text-white accent-zinc-700">Support us by disabling ad blockеrs on our site 🙏</p>
        </div>
        <div class="magic-box">
            {!! json_decode(config('app.settings.ads_settings'))->one !!}
        </div>
        <flux:spacer />
        <flux:navlist variant="outline">
            @if(config('app.menus'))
            @foreach(config('app.menus') as $menu)
            <a href="{{ $menu->url }}" class="h-10 lg:h-8 relative flex items-center gap-3 rounded-lg  py-0 text-start w-full px-3 my-px text-zinc-500 dark:text-white/80 data-current:text-(--color-accent-content) hover:data-current:text-(--color-accent-content) data-current:bg-white dark:data-current:bg-white/[7%] data-current:border data-current:border-zinc-200 dark:data-current:border-transparent hover:text-zinc-800 dark:hover:text-white dark:hover:bg-white/[7%] hover:bg-zinc-800/5  border border-transparent" data-flux-navlist-item="data-flux-navlist-item" @if ($menu->new_tab == 1) target="_blank" @endif>
                <div class="flex-1 text-sm font-medium leading-none whitespace-nowrap [[data-nav-footer]_&amp;]:hidden [[data-nav-sidebar]_[data-nav-footer]_&amp;]:block" data-content="">{{ $menu->name }}</div>
            </a>
            @endforeach
            @endif
            <flux:separator variant="subtle" />
        </flux:navlist>
        <p class="text-sm font-medium dark:text-white accent-zinc-700">&copy; 2020–{{ date('Y') }} – All Rights Reserved {{ config('app.settings.app_name') }} | Coded with ♥️</p>
    </flux:sidebar>

    <flux:header sticky container class="bg-zinc-50 dark:bg-zinc-900 border-b border-zinc-200 dark:border-zinc-700">
        <div class="flex items-center w-full gap-4">
            <div class="flex items-center gap-2 flex-grow overflow-hidden">
                <flux:sidebar.toggle class="lg:hidden" icon="bars-3-bottom-left" inset="left" />
                <flux:separator vertical class="lg:hidden lg:mx-0 mx-3" />
                <flux:icon.mail variant="mini"/>
                <div class="min-w-0 overflow-hidden">
                    <livewire:frontend.email type="header"/>
                </div>
            </div>
            <div class="flex items-center gap-2 flex-shrink-0">
                <flux:navbar>
                    <flux:dropdown position="top" align="start">
                        <flux:tooltip content="Language">
                            <flux:button x-data x-on:click="" icon="language" variant="subtle" aria-label="Language" />
                        </flux:tooltip>
                        <flux:menu>
                            <span>
                                @foreach(config('app.locales') as $item => $language)
                                    <span x-on:click="window.location.href ='{{ route('locale', $language) }}'" role="menuitem" class="cursor-pointer group dark:hover:bg-zinc-600/75 dark:hover:text-gray-300 dark:focus:bg-zinc-600/75 dark:focus:text-gray-300 flex items-center px-4 py-2 dark:text-gray-400 text-gray-700 hover:text-gray-900 focus:text-gray-900 text-sm leading-5 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none truncate">{{ config('app.locales_text')[$item] }}</span>
                                @endforeach
                            </span>
                        </flux:menu>
                    </flux:dropdown>

                    <flux:tooltip content="Switch Theme">
                    <flux:button x-on:click="$flux.dark = ! $flux.dark" icon="sun" variant="subtle" aria-label="Toggle dark mode">
        {{--                <flux:icon.sun x-show="$flux.appearance === 'dark'" variant="mini" />--}}
        {{--                <flux:icon.moon x-show="$flux.appearance === 'light'" variant="mini" />--}}
        {{--                <flux:icon.computer-desktop x-show="$flux.appearance === 'system'" variant="mini" />--}}
                    </flux:button>
                    </flux:tooltip>
                    <flux:dropdown position="top" align="start">
                        <flux:tooltip content="Account">
                        <flux:button icon="circle-user-round"  variant="subtle"  aria-label="Account" />
                        </flux:tooltip>
                        <flux:menu>
                            <flux:text class="p-1">{{ __('You are signed in as:') }}</flux:text>
                            <div wire:ignore>
                            <livewire:frontend.email />
                            </div>
                            <flux:menu.separator />
                            <div class="flex">
                            <flux:modal.trigger name="create-account">
                                <flux:button class="p-1 w-full" variant="outline" icon="mail-plus" style="">{{ __('New') }}</flux:button>
                            </flux:modal.trigger>
                            <flux:modal.trigger name="delete-account">
                                <flux:tooltip content="{{ __('Delete') }}">
                                <flux:button class="ml-1 p-1" icon="trash" variant="outline" style="color:#F14743;"></flux:button>
                                </flux:tooltip>
                            </flux:modal.trigger>
                            </div>
                            @auth
                                <flux:menu.separator />
                                <button type="button" x-on:click="window.location.href = '{{ route('dashboard') }}'" class="premium-btn mt-2 w-full">
                                    <span class="crown"></span>
                                    <span class="crown-bg1"></span>
                                    <span class="crown-bg2"></span>
                                    <span class="btn-text">Login</span>
                                </button>
                            @endauth
                            @guest
                                <flux:menu.separator />
                                <flux:modal.trigger name="premium">
                                    <button type="button" class="premium-btn mt-2 w-full">
                                        <span class="crown"></span>
                                        <span class="crown-bg1"></span>
                                        <span class="crown-bg2"></span>
                                        <span class="btn-text">Get Premium</span>
                                    </button>
                                </flux:modal.trigger>
                            @endguest
                        </flux:menu>
                    </flux:dropdown>
                </flux:navbar>
            </div>
        </div>

        <flux:modal name="create-account" class="md:w-96">
            <div class="space-y-6">
                <div>
                    <flux:heading size="lg">Generate Your Temporary Email</flux:heading>
                </div>

                <livewire:frontend.action action="customEmail" />
                <flux:separator text="or" />

                <div class="flex w-full">
                    <div class="w-1/2">
                        <livewire:frontend.action action="outlook" />
                    </div>
                    <div class="w-1/2">
                        <livewire:frontend.action action="gmail" />
                    </div>
                </div>

            </div>
        </flux:modal>

        <flux:modal name="delete-account" class="min-w-[22rem]">
            <div class="space-y-6">
                <div>
                    <flux:heading size="lg">Delete account?</flux:heading>
                    <flux:text class="mt-2">
                        <p>You're about to delete this account.</p>
                    </flux:text>
                </div>
                <div class="flex gap-2">
                    <flux:spacer />
                    <flux:modal.close>
                        <flux:button variant="ghost">Cancel</flux:button>
                    </flux:modal.close>
                    <livewire:frontend.action action="delete" />
                </div>
            </div>
        </flux:modal>

        <flux:modal name="premium" class="min-w-[22rem]" class="bg-pricing-modal">
            <div class="space-y-6">
                <div>
                    <div id="premium-modal-limit" class="mt-10 w-full justify-center hidden">
                        <p class=" font-mono text-amber-500 text-center">
                            Looks like you have reached the daily email generation limit, consider subscribing and access to premium features
                        </p>
                    </div>
                    <!-- From Uiverse.io by themrsami -->
                    <div class="w-full pt-5 px-5 pb-4 bg-zinc-100 dark:bg-zinc-900 rounded-3xl">
                        <div class="text-center mb-6">
                            <h5 class="text-2xl font-semibold text-gray-500 mb-3">Zemail Premium</h5>
                            <span class="block text-5xl font-bold text-accent mb-3">${{ config('app.plans')[0]['price'] ?? 10 }}</span>
                            <span class="block text-gray-400 font-medium mb-6">per month</span
                            >
                            <a class="relative group inline-block w-full py-4 px-6 text-center text-gray-50 hover:text-gray-500 bg-amber-400 font-semibold rounded-full overflow-hidden transition duration-200"
                                href="{{ route('dashboard') }}">
                                <div class="absolute top-0 right-full w-full h-full bg-white transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
                                <span class="relative">Subscribe now</span>
                            </a>
                        </div>
                        <ul>
                            <li class="flex mb-4 items-center">
                                <flux:icon.check />
                                <span class="ml-2 text-accent wrap-normal">No Ads</span>
                            </li>
                            <li class="flex mb-4 items-center">
                                <flux:icon.check />
                                <span class="ml-2 text-accent wrap-normal">Dedicated premium domains</span>
                            </li>
                            <li class="flex mb-4 items-center">
                                <flux:icon.check />
                                <span id="focus-modal-text1" class="ml-2 text-accent wrap-normal">Unlimited email addresses on public domains</span>
                            </li>
                            <li class="flex mb-4 items-center">
                                <flux:icon.check />
                                <span id="focus-modal-text2" class="ml-2 text-accent wrap-normal">Up to 100 email addresses daily on premium domains</span>
                            </li>
                            <li class="flex mb-4 items-center">
                                <flux:icon.check />
                                <span class="ml-2 text-accent wrap-normal">Dedicated Premium Gmail Addresses</span>
                            </li>
                            <li class="flex mb-4 items-center">
                                <flux:icon.check />
                                <span class="ml-2 text-accent wrap-normal">100% Private address with full ownership</span>
                            </li>
                            <li class="flex mb-4 items-center">
                                <flux:icon.check />
                                <span class="ml-2 text-accent wrap-normal">History Upto 30 Days</span>
                            </li>
                            <li class="flex mb-4 items-center">
                                <flux:icon.check />
                                <span class="ml-2 text-accent wrap-normal">Enhanced privacy and security</span>
                            </li>

                        </ul>
                    </div>

                </div>
                <flux:separator text="or" />
                <di class="mt-3 flex justify-center">
                    <p class="text-center ">Already subscribed?</p>&nbsp;<a class="text-amber-400" href="{{ route('dashboard') }}">Login now</a>
                </di>
            </div>
        </flux:modal>

    </flux:header>

    <flux:main class="dark:bg-gray-900 bg-gray-100">
    {{ $slot }}
        <div class="magic-box mt-3">
            {!! json_decode(config('app.settings.ads_settings'))->two !!}
        </div>
    </flux:main>
    <!-- Toast Container -->
    <div id="toast-container" class="fixed top-5 left-1/2 transform -translate-x-1/2 z-50 space-y-4"></div>
    <p class="ionize hidden" id="gR7pT9xLwQ" sync="{{ config('app.auto_fetch_mail') }}">{{ csrf_token() }}</p>
    <p class="hidden" id="copyEmailText">{{ __('Email ID Copied to Clipboard') }}</p>
    @fluxScripts
    <script>
        document.addEventListener('DOMContentLoaded', () => {

            setTimeout(() => {
                const email = '{{ App\Models\ZEmail::getEmail(true) }}';
                const add_mail_in_title = "{{ json_decode(config('app.settings.configuration_settings'))->add_mail_in_title ? 'yes' : 'no' }}"
                if(add_mail_in_title === 'yes') {
                    document.title += ` - ${email}`;
                }
                Livewire.dispatch('updateEmail');
            }, 2000);

            document.addEventListener('stopLoader', () => {
                document.querySelectorAll('#refresh-icon').forEach(el => {
                    setTimeout(() => {
                        el.classList.remove('animate-spin');
                    }, 1000);
                });
            });

            let counter = parseInt({{ json_decode(config('app.settings.configuration_settings'))->fetch_seconds }});
            setInterval(() => {
                if (counter === 0 && document.getElementById('imap-error') === null && !document.hidden) {
                    document.querySelectorAll('#refresh-icon').forEach(el => {
                        el.classList.add('animate-spin');
                    });
                    Livewire.dispatch('fetchMessages');
                    counter = parseInt({{ json_decode(config('app.settings.configuration_settings'))->fetch_seconds }});
                }
                counter--;
                if(document.hidden) {
                    counter = 1;
                }
            }, 1000);
        });
    </script>
    {!! config('app.settings.app_footer') !!}
    @yield('custom_footer')
    </body>
</html>
