@extends('admin.layouts.masterlayout')

@section('title')
    Notification
@endsection

@section('head_title')
    Notification
@endsection

@section('content')
    <div class="dashboard-container">
        <div class="dashboard-right-container">
            <div class="dashboard-body-content">
                <div class="manage-offers-flex align-items-center gap-3 flex-wrap">
                    <div class="admin-tab-container  notification-tab-sm">
                        <ul class="nav nav-pills">
                            <li class="nav-item">
                                <a class="nav-link n-div active" data-bs-toggle="pill" href="#all-notification-tab">All</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link n-div" data-bs-toggle="pill" href="#unread-notification-tab">Unread</a>
                            </li>
                        </ul>
                    </div>
                    @if (authAdminUser()->can('notification.read'))
                        <a href="#" id="markAllNotification" class="ct-btn text-center add-ct-btn mb-0 ms-auto mark-all-notification none-mark"><span>Read All</span></a>
                    @endif
                </div>
                <div class="tab-content notification-div">
                    <!-- All Notifications Tab -->
                    <div class="tab-pane active" id="all-notification-tab">
                        <div class="card p-2">
                            <ul class="p-0 m-0 w-100 d-flex flex-column last-border-none" id="allNotificationList"></ul>
                            <button class="ct-btn w-fit my-3 mx-auto d-none" id="loadMoreAll">Load More</button>
                        </div>
                    </div>

                    <!-- Unread Notifications Tab -->
                    <div class="tab-pane fade" id="unread-notification-tab">
                        <div class="card p-2">
                            <ul class="p-0 m-0 w-100 d-flex flex-column last-border-none" id="unreadNotificationList"></ul>
                            <button class="ct-btn w-fit my-3 mx-auto d-none" id="loadMoreUnread">Load More</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        let allPage = 1;
        let unreadPage = 1;

        function fetchNotifications(type = 'all', page = 1, append = false) {
            $.ajax({
                url: "{{ route('admin.notifications.load') }}",
                type: "GET",
                data: {
                    type: type,
                    nextPage: page
                },
                beforeSend: function() {
                    if (!append) {
                        if (type === 'all') $('#allNotificationList').html('');
                        else $('#unreadNotificationList').html('');
                    }
                },
                success: function(res) {
                    if (res.total_notifications === 0) {

                        let noNotificationHTML = `
                            <div class="p-5 d-flex align-items-center justify-content-center flex-column notification-block">
                                <img src="{{ asset('assets/img/no-notification.png') }}" alt="no-new-notification" class="mx-auto no-new-notification-img image-preview">
                                <h3 class="d-block h5 mb-0 mt-3 w-100 text-center">
                                    No New Notification
                                </h3>
                            </div> `;

                        if (type === 'all') {
                            $('#allNotificationList').html(noNotificationHTML);
                            $('#loadMoreAll').addClass("d-none");
                        } else {
                            $('#unreadNotificationList').html(noNotificationHTML);
                            $('#loadMoreUnread').addClass("d-none");
                        }
                        return;
                    }

                    if (type === 'all') {
                        if (append) $('#allNotificationList').append(res.notifications_html);
                        else $('#allNotificationList').html(res.notifications_html);

                        if (res.current_page >= res.last_page) {
                            $('#loadMoreAll').addClass("d-none");
                        } else {
                            $('#loadMoreAll').removeClass("d-none");
                        }
                    } else {
                        if (append) $('#unreadNotificationList').append(res.notifications_html);
                        else $('#unreadNotificationList').html(res.notifications_html);

                        if (res.current_page >= res.last_page) {
                            $('#loadMoreUnread').addClass("d-none");
                        } else {
                            $('#loadMoreUnread').removeClass("d-none");
                        }
                    }
                },
                error: function(err) {
                    console.log("Error loading notifications", err);
                }
            });
        }

        $(document).ready(function() {

            // Add CSRF token to all AJAX requests
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            // Initial Load
            fetchNotifications('all');
            fetchNotifications('unread');

            // Load More
            $('#loadMoreAll').click(function() {
                allPage++;
                fetchNotifications('all', allPage, true);
            });

            $('#loadMoreUnread').click(function() {
                unreadPage++;
                fetchNotifications('unread', unreadPage, true);
            });

            // Mark single notification as read
            $(document).on('click', '.list-main-drop.dropdown-item', function() {
                const notificationId = $(this).data('notification-id');
                markNotificationAsRead(notificationId);
            });

            // Mark all notifications as read
            $(document).on('click', '#markAllNotification', function(e) {
                e.preventDefault();
                markNotificationAsRead(null); // Pass null to indicate "mark all"
            });

            // Reusable AJAX function
            function markNotificationAsRead(notificationId) {
                $.ajax({
                    url: "{{ route('admin.notification.mark-read') }}",
                    type: "POST",
                    data: {
                        notification_id: notificationId
                    },
                    success: function(response) {
                        if (response.status == "success") {
                            var currentActiveTab = $('a.n-div.active').attr('href');

                            if (notificationId == null) {
                                $(".mark-all-notification").addClass("none-mark");
                            }

                            if (currentActiveTab === '#all-notification-tab') {
                                fetchNotifications('all');
                            } else if (currentActiveTab === '#unread-notification-tab') {
                                fetchNotifications('unread');
                            }
                        } else {
                            console.log('Failed to mark as read');
                        }
                    },
                    error: function(err) {
                        console.log("Error marking notification as read", err);
                    }
                });
            }

            // Tab Change Events
            $('.nav-link').on('click', function() {
                const target = $(this).attr('href');

                if (target == '#all-notification-tab') {
                    fetchNotifications('all');
                } else {
                    fetchNotifications('unread');
                }
            });
        });
    </script>
@endsection