@php
    use Carbon\Carbon;
    use App\Models\Translation;
@endphp
<div class="hidden sm:flex justify-between items-center py-2 px-5 bg-gray-200 dark:bg-gray-800 rounded mx-2 my-2">
    <div class="flex justify-start items-center space-x-2">
        <button type="button" id="ActionsDropdown" data-dropdown-toggle="actions"
                class="hover:bg-white/30 hover:dark:bg-black/30 hover:backdrop-blur-3xl font-medium rounded-lg px-2 py-2.5 text-center inline-flex justify-start items-center">
            <img src="{{ auth()->user()->ProfilePic() }}" alt="" class="w-7 rounded-full">
            <span class="ms-2">
                {{ auth()->user()->name }}
            </span>
            <svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/3000/svg" fill="none"
                 viewBox="0 0 10 6">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="m1 1 4 4 4-4"/>
            </svg>
        </button>
        <div id="actions" class="z-40 hidden w-44">
            <div class="backdrop-blur-3xl bg-white/30 dark:bg-black/30 rounded-lg shadow-2xl p-2">
                <ul aria-labelledby="ActionsDropdown">
                    <li class="w-full">
                        <a href="{{ route('users.profile', auth()->user()) }}"
                           class="px-4 py-2 hover:bg-white/30 hover:dark:bg-black/30 hover:backdrop-blur-3xl rounded-lg flex justify-between items-center w-full">
                            <span>
                                {{ __('navbar.profile') }}
                            </span>
                            <i class="bi bi-person-fill"></i>
                        </a>
                    </li>
                    <li class="w-full">
                        <form action="{{ route('logout') }}" method="post" class="w-full">
                            @csrf
                            <button type="submit"
                                    class="px-4 py-2 hover:bg-white/30 hover:dark:bg-black/30 hover:backdrop-blur-3xl rounded-lg w-full flex justify-between items-center">
                                <span>
                                    {{ __('navbar.logout') }}
                                </span>
                                <i class="bi bi-power"></i>
                            </button>
                        </form>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="flex justify-end items-center space-x-5">
        <i class="bi bi-bell{{ auth()->user()->UnreadNotifications()->count() ? '-fill' : '' }} hover:text-blue-500 hover:cursor-pointer"
           data-dropdown-toggle="notifications">
        </i>
        <div id="notifications" class="pe-5 z-40 hidden w-80">
            <div class="bg-white/30 dark:bg-black/30 backdrop-blur-3xl rounded-lg shadow-xl p-2">
                <div class="flex justify-between items-center px-2 font-semibold">
                    <p>
                        {{ __('notifications.title') }}
                    </p>
                    <p class="count">
                        {{ auth()->user()->UnreadNotifications()->count() }}
                    </p>
                </div>
                <ul class="mt-2 space-y-2" aria-labelledby="dropdownDefaultButton">
                    @foreach(auth()->user()->UnreadNotifications()->reverse()->take(3) as $notification)
                        <li class="rounded-lg p-2 border-[1px] border-gray-600 dark:border-gray-400">
                            <p class="text-center">
                                {{ $notification->Notification->title }}
                            </p>
                            <hr class="my-2 border-gray-500">
                            <p class="my-5">
                                {{ $notification->Notification->body }}
                            </p>
                            <hr class="my-2 border-gray-500">
                            <div class="flex justify-between items-center">
                                <p class="text-xs font-semibold">
                                    {{ CheckDateTime($notification->created_at, 'show', 'DateTime') }}
                                </p>
                                <i onclick="DismissNotification(this)"
                                   data-url="{{ route('notifications.dismiss', $notification) }}"
                                   class="bi bi-x-circle-fill hover:text-red-500 hover:cursor-pointer">
                                </i>
                            </div>
                        </li>
                    @endforeach
                </ul>
                <div class="flex justify-center items-center mt-2">
                    <button onclick="Notifications()"
                            class="bg-blue-500 hover:bg-blue-700 rounded-full py-1 px-3 text-sm">
                        {{ __('notifications.show') }}
                    </button>
                </div>
            </div>
        </div>
        <button id="LangDropdown" data-dropdown-toggle="lang"
                class="hover:text-blue-500 font-medium rounded-lg  text-center inline-flex justify-start items-center"
                type="button">
            <span class="uppercase ms-1">
                {{ auth()->user()->Profile?->language ?? 'en' }}
            </span>
            <svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/3000/svg" fill="none"
                 viewBox="0 0 10 6">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="m1 1 4 4 4-4"/>
            </svg>
        </button>
        <div id="lang"
             class="z-40 hidden w-48 dark:bg-black/30 backdrop-blur-3xl bg-white/30 rounded-lg shadow-xl">
            <p class="text-center text-2xl font-bold mt-5">
                {{ __('navbar.SetLanguage') }}
            </p>
            <ul class="space-y-1.5 p-1.5 mt-5 text-sm text-black dark:text-white" aria-labelledby="LangDropdown">
                @foreach(Translation::Languages as $key => $lang)
                    <li
                        class="font-semibold rounded-lg {{ $key == (auth()->user()->Profile?->language ?? 'en') ? 'bg-blue-500 hover:bg-blue-600' : 'hover:bg-white/30 hover:dark:bg-black/30 hover:backdrop-blur-3xl' }}">
                        <label for="lang-{{ $key }}"
                                class="px-3 py-2 flex justify-between items-center text-sm font-medium text-gray-900 dark:text-gray-300 cursor-pointer w-full h-full">
                            <span>
                                {{ __('navbar.languages.' . $key) }}
                            </span>
                            <span class="uppercase">
                                {{ $key }}
                            </span>
                        </label>
                        <input type="radio" id="lang-{{ $key }}" name="language"
                                @checked($key == (auth()->user()->Profile?->language ?? 'en'))
                                class="hidden w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500"
                                value="{{ $key }}">
                    </li>
                @endforeach
            </ul>
        </div>
        <div class="border-s-2 border-gray-300 dark:border-gray-700 ps-5">
            <p class="now text-center font-bold">
                {{ Carbon::now()->format('H:i:s') }}
            </p>
            <p class="text-center text-sm">
                {{ CheckDateTime(Carbon::today(), 'show', 'FullDate') }}
            </p>
        </div>
    </div>
</div>
<aside id="widgets"
       class="hidden top-0 end-0 z-50 sm:z-40 w-64 h-screen transition-transform -translate-x-0 sm:translate-x-full"
       aria-label="Widgets">
    <div class="flex flex-col space-y-5 h-full px-3 py-4 overflow-y-auto bg-gray-200 dark:bg-gray-800 sm:ms-2 sm:mt-2 sm:rounded">
        
        <div class="flex flex-col items-center space-y-3">
            <img src="{{ auth()->user()->ProfilePic() }}" alt="" class="w-10 rounded-full">
            <span class="font-bold text-xl">
                {{ auth()->user()->name }}
            </span>
        </div>
        <div class="rounded-xl p-2 bg-gray-300 dark:bg-gray-700">
            <p class="now text-center text-4xl font-bold">
                {{ Carbon::now()->format('H:i:s') }}
            </p>
            <p class="text-center mt-2">
                {{ CheckDateTime(Carbon::today(), 'show', 'FullDate') }}
            </p>
        </div>
        <select name="language" class="bg-gray-200 dark:bg-gray-800 border-none font-medium !pe-10">
            @foreach(GetLangs() as $key => $lang)
                <option value="{{ $key }}" @selected($key == auth()->user()->Profile->language)>
                    {{ __('navbar.languages.' . $key) }}
                </option>
            @endforeach
        </select>
    
        <x-hr/>

        <ul class="space-y-5 font-medium">
            <li>
                <a href="{{ route('users.profile', auth()->user()) }}"
                   class="block hover:bg-white/30 hover:dark:bg-black/30 hover:backdrop-blur-3xl dark:hover:text-white rounded-lg">
                    <i class="bi bi-person-circle me-2"></i>
                    {{ __('navbar.profile') }}
                </a>
            </li>
            <li>
                <p onclick="$('#WidgetsButton').click(); Notifications();">
                    <i class="bi bi-bell{{ auth()->user()->UnreadNotifications()->count() ? '-fill' : '' }}"></i>
                    <span class="ms-2">
                        {{ __('notifications.title') . ' ' . (auth()->user()->UnreadNotifications()->count() ? ('(' . auth()->user()->UnreadNotifications()->count() . ')') : null )}}
                    </span>
                </p>
            </li>
            <li class="sm:hidden">
                <form action="{{ route('logout') }}" method="post">
                    @csrf
                    <a class="flex items-center text-gray-900 rounded-lg dark:text-white hover:bg-red-100 dark:hover:bg-red-700 group">
                        <button type="submit" class="w-full flex items-center">
                            <i class="bi bi-power"></i>
                            <span class="ms-3 whitespace-nowrap">
                                {{ __('sidebar.logout') }}
                            </span>
                        </button>
                    </a>
                </form>
            </li>
        </ul>
    </div>
</aside>
<script>
    function DismissNotification(btn) {
        const count = $('.count');
        const url = $(btn).data('url');
        $(btn).parent().parent().remove();
        count.text(parseInt(count.text()) - 1);
        SetLoading(true);
        $.ajax({
            url: url,
            type: 'POST',
        }).done(function (data) {
            console.log(data);
        }).fail(function (jqXHR, textStatus) {
            window.swal.fire({
                title: 'Error!',
                text: 'Please contact support',
                icon: 'error',
                confirmButtonText: 'Ok'
            });
            console.log(textStatus);
        }).always(function () {
            SetLoading(false);
        });
    }

    function Notifications(btn) {
        SetLoading(true);
        $.ajax({
            method: "GET",
            url: "{{ route('notifications.modal') }}",
        }).done(function (data) {
            $('#modal-target').html(data);
            const $targetEl = document.getElementById('notifications-modal');
            modal = new Modal($targetEl);
            modal.show();
        }).fail(function (jqXHR, textStatus) {
            window.swal.fire({
                title: 'Error!',
                text: 'Please contact support',
                icon: 'error',
                confirmButtonText: 'Ok'
            });
            console.log(textStatus);
        }).always(function () {
            SetLoading(false);
        });
    }
</script>