<!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
        @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('dashboard') }}">
            <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">
            @php
                $navItems = [
                    ['label' => 'Dashboard', 'route' => 'dashboard'],
                    ['label' => 'Generate Premium Email', 'route' => 'dashboard.premium'],
                    //['label' => '10 Minute Mail', 'route' => 'dashboard.10minute'],
                    ['label' => 'Bulk Email Generator', 'route' => 'dashboard.bulk'],
                    ['label' => 'Bulk Gmail Generator', 'route' => 'dashboard.bulkGmail'],
                    ['label' => 'Support Ticket', 'route' => 'dashboard.support'],
                ];

                $currentRoute = Route::currentRouteName();
            @endphp

            @foreach ($navItems as $item)
                <button type="button" x-on:click="window.location.href = '{{ route($item['route']) }}'" class="cursor-pointer h-10 lg:h-10 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  {{ $currentRoute === $item['route'] ? 'border-1 border-dashed border-zinc-500' : '' }}" data-flux-navlist-item="data-flux-navlist-item">
                    <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="">
                        <div class="-ml-2 pl-2 py-2">
                            <div class="[:where(&amp;)]:text-sm [:where(&amp;)]:text-zinc-500 [:where(&amp;)]:dark:text-white/70 {{ $currentRoute === $item['route'] ? 'accent-zinc-500' : '' }}" data-flux-text="{{ $item['label'] }}">{{ $item['label'] }}</div>
                        </div>
                    </div>
                </button>
            @endforeach

        </flux:navlist>
        <flux:spacer />
        <flux:navlist variant="outline">
            <flux:separator variant="subtle" />
        </flux:navlist>
        <flux:dropdown position="bottom" align="start">
            <flux:profile
                :name="auth()->user()->name"
                :initials="auth()->user()->initials()"
                icon-trailing="chevrons-up-down"
            />
            <flux:menu class="w-[220px]">
                <flux:menu.radio.group>
                    <div class="p-0 text-sm font-normal">
                        <div class="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
                                <span class="relative flex h-8 w-8 shrink-0 overflow-hidden rounded-lg">
                                    <span
                                        class="flex h-full w-full items-center justify-center rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white"
                                    >
                                        {{ auth()->user()->initials() }}
                                    </span>
                                </span>

                            <div class="grid flex-1 text-start text-sm leading-tight">
                                <span class="truncate font-semibold">{{ auth()->user()->name }}</span>
                                <span class="truncate text-xs">{{ auth()->user()->email }}</span>
                            </div>
                        </div>
                    </div>
                </flux:menu.radio.group>

                <flux:menu.separator />

                <flux:menu.radio.group>
                    <flux:menu.item :href="route('settings.profile')" icon="cog" wire:navigate>{{ __('Settings') }}</flux:menu.item>
                </flux:menu.radio.group>

                <flux:menu.separator />
                <form method="POST" action="{{ route('logout') }}" class="w-full">
                    @csrf
                    <flux:menu.item as="button" type="submit" icon="arrow-right-start-on-rectangle" class="w-full">
                        {{ __('Log Out') }}
                    </flux:menu.item>
                </form>
            </flux:menu>
        </flux:dropdown>
    </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" />
            </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:navbar>
            </div>
        </div>

    </flux:header>

    <flux:main class="dark:bg-gray-900 bg-gray-100">
    {{ $slot }}
    </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 id="sidebar-magic" class="hidden"></p>
    <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', () => {
            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>
    @yield('custom_footer')
    </body>
</html>
