@auth()
@php($userNotifications = server()->getNotifications())
@php($isNotEmptyNotifications = $userNotifications->isNotEmpty())
@if($isNotEmptyNotifications)

    <style
    >
        .dr-not {
            width: 400px
        }

        .dr-not .dropdown-content {
            max-width: 100%;
        }

        @media (max-width: 600px) {
            .dr-not {
                width: 300px
            }
        }
    </style>

    <div class="notifications">
        <x-moonshine::dropdown
            placement="bottom-end"
            title="{{!request()->routeIs('forum.*') ? __('panel/includes/nav.notifications.0') : '' }}"
            class="max-w-[360px] xs:w-80 dr-not"
        >
            <x-slot:toggler class="notifications-icon">
                @if($isNotEmptyNotifications)
                    <x-moonshine::badge id="not-con" class="rounded-full absolute -top-4 -left-2"
                                        style="padding: 0 7px;"
                                        color="error">{{ $userNotifications->count() }}</x-moonshine::badge>
                @endif
                <x-moonshine::icon
                    icon="heroicons.outline.bell"
                    color="gray"
                    size="6"
                />
            </x-slot:toggler>
            <div class="notifications222"></div>
            @if($isNotEmptyNotifications)
                @foreach($userNotifications as $notification)
                    <div class="notifications-item" id="notification-{{ $notification->id }}">
                        <a href="{{ route('remove-notification', $notification) }}"
                           class="notifications-remove"
                           title="{{ __('panel/includes/nav.notifications.1') }}"
                        >
                            <x-moonshine::icon icon="heroicons.x-mark"/>
                        </a>

                        <div class="notifications-category badge-{{ $notification->data['color'] ?? 'green' }}">
                            <x-moonshine::icon icon="heroicons.information-circle"/>
                        </div>

                        <div class="notifications-content">
                            <h5 class="notifications-title">{{ $notification->data["title_{$currentLang}"] ?? '' }}</h5>
                            <p class="notifications-text">{!! $notification->data["message_{$currentLang}"] !!}</p>

                            @if(isset($notification->data['button']['link']))
                                <div class="notifications-more">
                                    <a href="{{ $notification->data['button']['link'] }}">
                                        {{ $notification->data['button']['label'] }}
                                    </a>
                                </div>
                            @endif

                            <span class="notifications-time">{{ $notification->created_at->format('d.m.Y H:i') }}</span>
                        </div>
                    </div>
                @endforeach
            @else
                <div class="w-full text-center p-2">
                    <p>{{ __('panel/includes/nav.notifications.2') }}</p>
                </div>
            @endif
            <x-slot:footer>
                @if($isNotEmptyNotifications)
                    <button id="reads" class="notifications-read w-full text-center">
                        <span>{{ __('panel/includes/nav.notifications.3') }}</span>
                    </button>
                @endif

            </x-slot:footer>
        </x-moonshine::dropdown>
    </div>
    <style>
        .fade-out {
            opacity: 0;
            transition: opacity 0.5s ease-out;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const notificationBell1 = document.getElementById('reads');

            if (notificationBell1) {
                notificationBell1.addEventListener('click', function () {
                    axios.get('{{ route('mark-all-as-read') }}')
                        .then(response => {
                            if (response.status === 200) {
                                const unreadCountBadge = document.querySelector('.notifications-icon #not-con');
                                if (unreadCountBadge) {
                                    unreadCountBadge.remove();
                                }
                                const items = document.querySelectorAll('.notifications-item');
                                let removeCount = 0;

                                items.forEach(item => {
                                    item.classList.add('fade-out');

                                    item.addEventListener('transitionend', () => {
                                        item.remove();
                                        removeCount++;

                                        if (removeCount === items.length) {
                                            const noNotificationsMessage = document.createElement('div');
                                            noNotificationsMessage.className = 'w-full text-center p-2';
                                            noNotificationsMessage.innerHTML = '<p>{{ __('panel/includes/nav.notifications.4') }}</p>';
                                            document.querySelector('.notifications222').appendChild(noNotificationsMessage);
                                        }
                                    });
                                });
                            }
                        })
                        .catch(error => {

                        });
                });
            }
        });
    </script>
@endif
@endauth