@php
    $generalNotifications = [];
    $messageNotifications = [];
    $alertsNotifications = [];
    if($notifications && count($notifications) > 0){
        $generalNotifications = $notifications->where('type','general');
        $messageNotifications = $notifications->where('type', 'message');
        $alertsNotifications = $notifications->where('type', 'alert');
    }
@endphp

<div class="dropdown topbar-head-dropdown ms-1 header-item" id="notificationDropdown">
    <button type="button" class="btn btn-icon btn-topbar btn-ghost-secondary rounded-circle" id="page-header-notifications-dropdown" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">
        <i class='bx bx-bell fs-22'></i>
        <span class="position-absolute topbar-badge fs-10 translate-middle badge rounded-pill bg-danger totalNotificationsCount">{{ count($notifications) }}<span class="visually-hidden">unread messages</span></span>
    </button>
    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end p-0" aria-labelledby="page-header-notifications-dropdown">

        <div class="dropdown-head bg-primary bg-pattern rounded-top">
            <div class="p-3">
                <div class="row align-items-center">
                    <div class="col">
                        <h6 class="m-0 fs-16 fw-semibold text-white">Notifications</h6>
                    </div>
                    <div class="col-auto dropdown-tabs">
                        <span class="badge bg-light-subtle text-body fs-13 totalNotificationsCount">{{ count($notifications) }} New</span>
                    </div>
                </div>
            </div>

            <div class="px-2 pt-2">
                <ul class="nav nav-tabs dropdown-tabs nav-tabs-custom" data-dropdown-tabs="true" id="notificationItemsTab" role="tablist">
                    <li class="nav-item waves-effect waves-light">
                        <a class="nav-link active" data-bs-toggle="tab" href="#all-noti-tab" role="tab" aria-selected="true">
                            General <span class="generalNotificationsCount">({{ count($generalNotifications) }})</span>
                        </a>
                    </li>
                    <li class="nav-item waves-effect waves-light">
                        <a class="nav-link" data-bs-toggle="tab" href="#messages-tab" role="tab" aria-selected="false"
                        @if (count($messageNotifications) > 0)
                            onclick="markAllAsReadProcess('message',false)"
                        @endif
                        >
                            Messages <span class="messageNotificationsCount">({{ count($messageNotifications) }})</span>
                        </a>
                    </li>
                    <li class="nav-item waves-effect waves-light d-none">
                        <a class="nav-link" data-bs-toggle="tab" href="#alerts-tab" role="tab" aria-selected="false">
                            Alerts ({{ count($alertsNotifications) }})
                        </a>
                    </li>
                </ul>
            </div>

        </div>

        <div class="tab-content position-relative" id="notificationItemsTabContent">
        <div class="tab-pane fade show active py-2 ps-2" id="all-noti-tab" role="tabpanel">
           <div class="text-end">
            @if ($generalNotifications)
                <button type="button" class="btn btn-soft-success waves-effect waves-light mb-2 me-2 px-1 py-0" id="markAllAsReadButton" data-type="general" title="Mark All as Read">
                    <i class="mdi mdi-check-all"></i>
                </button>
            @endif
           </div>

            <div data-simplebar style="max-height: 300px;" class="pe-2">
                @if ($generalNotifications)
                    @foreach ($generalNotifications as $notification)
                        @include('admin.layouts.partials.notification', $notification)
                    @endforeach
                @endif

                <div class="my-3 text-center view-all">
                    <button type="button" class="btn btn-soft-success waves-effect waves-light">View All General Notifications <i class="ri-arrow-right-line align-middle"></i></button>
                </div>
            </div>
        </div>



            <div class="tab-pane fade py-2 ps-2" id="messages-tab" role="tabpanel" aria-labelledby="messages-tab">
                <div data-simplebar style="max-height: 300px;" class="pe-2">
                    @if ($messageNotifications)
                        @foreach ($messageNotifications as $notification)
                             @include('admin.layouts.partials.notification',$notification)
                        @endforeach
                    @endif

                    <div class="my-3 text-center view-all">
                        <button type="button" class="btn btn-soft-success waves-effect waves-light">View All Messages <i class="ri-arrow-right-line align-middle"></i></button>
                    </div>
                </div>
            </div>

            <div class="tab-pane fade py-2 ps-2" id="alerts-tab" role="tabpanel" aria-labelledby="alerts-tab">
               <div data-simplebar style="max-height: 300px;" class="pe-2">
                    @if ($messageNotifications)
                        @foreach ($messageNotifications as $notification)
                             @include('admin.layouts.partials.notification',$notification)
                        @endforeach
                    @endif

                    <div class="my-3 text-center view-all">
                        <button type="button" class="btn btn-soft-success waves-effect waves-light">View All Messages <i class="ri-arrow-right-line align-middle"></i></button>
                    </div>
                </div>
            </div>

            <div class="notification-actions" id="notification-actions">
                <div class="d-flex text-muted justify-content-center">
                    Select <div id="select-content" class="text-body fw-semibold px-1">0</div> Result <button type="button" class="btn btn-link link-danger p-0 ms-3" data-bs-toggle="modal" data-bs-target="#removeNotificationModal">Remove</button>
                </div>
            </div>
        </div>
    </div>
</div>



@push('scripts')
    <script>
       $('#markAllAsReadButton').on('click', function(){
            let type = $(this).data('type');
            markAllAsReadProcess(type, true, true);
       })

    //    document
    //         .getElementById("delete-notification")
    //         .addEventListener("click", function () {
    //             Array.from(
    //                 document.querySelectorAll(".notification-item")
    //             ).forEach(function (e) {
    //                 e.classList.contains("active") && e.remove();
    //             }),
    //                 H(),
    //                 document
    //                     .getElementById(
    //                         "NotificationModalbtn-close"
    //                     )
    //                     .click();
    //         });

    document.getElementById("delete-notification").addEventListener("click", function () {
    // Collect selected notification IDs (assuming each notification has an ID)
    const selectedNotifications = [];
    document.querySelectorAll(".notification-item .form-check-input:checked").forEach(function (checkbox) {
        const notificationId = checkbox.value;
        selectedNotifications.push(notificationId);
    });

    // Perform the AJAX request to delete the selected notifications
    if (selectedNotifications.length > 0) {
        $.ajax({
            url: "{{ route('admin.notification.deleteSelected') }}",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                selectedNotifications: selectedNotifications
            },
            success: function (response) {
                // Handle success response
                selectedNotifications.forEach(function (notificationId) {
                    const notificationItem = document.getElementById("notification-item-" + notificationId);
                    if (notificationItem) {
                        notificationItem.remove();
                    }
                });

                // Update the total notifications count
                const totalNotificationsCount = document.querySelectorAll(".notification-item").length;
                document.querySelectorAll(".totalNotificationsCount").forEach(function (element) {
                    element.innerText = totalNotificationsCount;
                });

                // Update the total notifications count in the tab
                const generalNotificationsCount = document.querySelectorAll(".notification-item[data-type='general']").length;
                document.querySelectorAll(".generalNotificationsCount").forEach(function (element) {
                    element.innerText = "(" + generalNotificationsCount + ")";
                });

                const messageNotificationsCount = document.querySelectorAll(".notification-item[data-type='message']").length;
                document.querySelectorAll(".messageNotificationsCount").forEach(function (element) {
                    element.innerText = "(" + messageNotificationsCount + ")";
                });
                // H();
                document.getElementById("NotificationModalbtn-close").click();
            },
            error: function (error) {
                // Handle error
                console.error("Error deleting notifications: " + error);
            }
        });
    }
});

       function markAllAsReadProcess(type, showSuccessMessage = true , reload = false){
            $.ajax({
                url: "{{ route('admin.notification.markAllAsRead') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    type: type
                },
                success: function(response){
                    if(showSuccessMessage){
                        Toast_.show('success', response.message);

                        // Update the total notifications count
                        // minus the number of notifications that were marked as read from the total notifications count
                    }

                    if(reload){
                        setTimeout(() => {
                            window.location.reload();
                        }, 3000);
                    } else {
                        const typeNotificationsCount = document.querySelectorAll(".notification-item[data-type='" + type + "']").length;
                        const totalNotificationsCount = document.querySelectorAll(".notification-item").length;
                        const newTotalNotificationsCount = totalNotificationsCount - typeNotificationsCount;

                        console.log("typeNotificationsCount: " + typeNotificationsCount);
                        console.log("totalNotificationsCount: " + totalNotificationsCount);
                        console.log("newTotalNotificationsCount: " + newTotalNotificationsCount);


                        document.querySelectorAll(".totalNotificationsCount").forEach(function (element) {
                            element.innerText = newTotalNotificationsCount;
                        });

                        if(type == 'general'){
                            document.querySelectorAll(".generalNotificationsCount").forEach(function (element) {
                                element.innerText = "(0)";
                            });
                        } else if(type == 'message'){
                            document.querySelectorAll(".messageNotificationsCount").forEach(function (element) {
                                element.innerText = "(0)";
                            });
                        }
                    }
                },
                error: function(error){
                    Toast_.show('error', error.responseJSON.message);
                }
            });
       }
    </script>
@endpush