@php
    use Carbon\Carbon;
    $user = Auth::user();
    $teamId = $user->getTeam->id;
    $webNotifications = App\Models\WebNotification::with(['user','touser'])->whereHas('user', function ($query) use ($teamId) {
            $query->whereHas('getTeam', function ($query) use ($teamId) {
                $query->where('id', $teamId);
            });
        })->where('is_read', 0)->get();

@endphp
<style>
    .menu-bar {
        display: none !important;
    }
    @media (max-width: 1199.98px) {
        .menu-bar {
            display : block !important;
        }
    }
</style>
<main class="main-content mt-1 border-radius-lg">
    <nav class="navbar navbar-main navbar-expand-lg px-0 mx-4 shadow-none border-radius-xl" id="navbarBlur" navbar-scroll="true">

        <div class="container-fluid py-1 px-3">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
                    <li class="breadcrumb-item text-md"><a class="opacity-5 text-dark" href="javascript:;">Pages</a>
                    </li>
                    <li class="breadcrumb-item text-sm text-dark active text-capitalize" aria-current="page">
                        {{ str_replace('.', ' ', Route::currentRouteName()) }}</li>
                </ol>
                <h6 class="font-weight-bolder mb-0 text-capitalize">
                    {{ str_replace('.', ' ', Route::currentRouteName()) }}</h6>
            </nav>
        </div>

        <ul class="navbar-nav justify-content-end">
            <li class="nav-item dropdown pe-4 d-flex align-items-center">
                <a href="javascript:;" class="nav-link text-body p-1 position-relative" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="fa fa-bell cursor-pointer" aria-hidden="true"></i>
                    @if (count($webNotifications) > 0)
                        <span class="badge bg-danger rounded-pill position-absolute top-0 start-100 translate-middle p-1 count_notification">{{ count($webNotifications) }}</span>
                    @endif
                </a>
                <ul class="dropdown-menu dropdown-menu-end px-3 py-3 me-sm-n2 overflow-auto" aria-labelledby="dropdownMenuButton" style="max-height: 300px;">
                    <!-- Web Notifications Section -->
                    <li class="mb-2 web-notification-item" id="web-notification-item">

                        @forelse ($webNotifications as $webNotification)
                            @if ($webNotification->type == "Web Notification")
                                <a class="dropdown-item border-radius-md web_notification" href="{{ route('activitylog.list', ['type' => 'web']) }}">
                            @else
                                <a class="dropdown-item border-radius-md web_notification" href="{{ route('chatify') }}">
                            @endif
                                <div class="d-flex py-1">
                                    <div class="d-flex flex-column justify-content-center">
                                        <p class="text-sm font-weight-normal mb-1">
                                            <span class="font-weight-bold">{{ $webNotification->type }}</span> {{  ($webNotification->type == "Web Notification") ? 'for '.$webNotification->user->name : 'from '.$webNotification->touser->name }}
                                        </p>
                                        <p class="text-xs  mb-0 ">
                                            <i class="fa fa-clock me-1" aria-hidden="true"></i>

                                            {{ Carbon::parse($webNotification->created_at)->diffForHumans() }}
                                        </p>
                                    </div>
                                </div>
                            </a>
                        @empty
                            <a class="dropdown-item border-radius-md" href="javascript:;">
                                <div class="d-flex py-1">
                                    <div class="d-flex flex-column justify-content-center">
                                        <p class="text-sm font-weight-normal mb-1">
                                            <span class="font-weight-bold">No Notifications</span>
                                        </p>
                                    </div>
                                </div>
                            </a>
                        @endforelse

                    </li>
                    <!-- Add an empty div to append new notifications -->
                    <div id="new-notifications"></div>
                </ul>
            </li>
            <li class="nav-item dropdown pe-4 d-flex align-items-center menu-bar">
                <div class="icon-preview-img d-flex align-items-center justify-content-center">
                    <img src="{{ asset('assets/img/reorder-three-outline-128.webp') }}"  alt="reorder, three, outline" class="d-block" width="30">
                </div>
            </li>
        </ul>


    </nav>

    @push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <script>
        $(document).ready(function () {
           $('body').on('click', '.menu-bar', function () {
            var $sidenav = $('.g-sidenav-show:not(.rtl) .navbar'); // Assuming you want to toggle the `.sidenav` element.

            // Check if $sidenav has the 'active' class to decide what to do
            if ($sidenav.hasClass('sidenav')) {
                $sidenav.removeClass('sidenav');
            } else {
                $sidenav.addClass('sidenav');
            }
           });
        });
        function updateNotifications() {
            $.ajax({
                url: '{{ route("get-updated-notifications") }}',
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    if (data.length > 0) {

                        // Append new notifications
                        $('.count_notification').text(data.length);
                        $('#new-notifications').empty();
                        $('.web-notification-item').empty();
                        data.forEach(function(notification) {

                            // Check if notification.user exists before accessing its properties
                            let userName = (notification.user && notification.user.name) ? notification.user.name : "";

                            // Check if notification.touser exists before accessing its properties
                            let toUserName = (notification.touser && notification.touser.name) ? notification.touser.name : "Unknown User";

                            $('#new-notifications').append(`
                                <a class="dropdown-item border-radius-md web_notification" href="${notification.type == 'Web Notification' ? '{{ route('activitylog.list', ['type' => 'web']) }}' : '{{ route('chatify') }}'}">
                                    <div class="d-flex py-1">
                                        <div class="d-flex flex-column justify-content-center">
                                            <p class="text-sm font-weight-normal mb-1">
                                                <span class="font-weight-bold">${notification.type}</span> ${notification.type == 'Web Notification' ? 'for ' + userName : 'from ' + toUserName}
                                            </p>
                                            <p class="text-xs mb-0">
                                                <i class="fa fa-clock me-1" aria-hidden="true"></i>
                                                ${moment(notification.created_at).fromNow()}
                                            </p>
                                        </div>
                                    </div>
                                </a>
                            `);
                        });
                    }
                },
                error: function(error) {
                    console.error('Error fetching updated notifications:', error);
                }
            });
        }

        // Update notifications every 30 seconds
        setInterval(updateNotifications, 30000);

        // Initial update on page load
        updateNotifications();
    </script>
    @endpush