   <header class="nxl-header">
        <div class="header-wrapper">
            <!--! [Start] Header Left !-->
            <div class="header-left d-flex align-items-center gap-4">
                <!--! [Start] nxl-head-mobile-toggler !-->
                <a href="javascript:void(0);" class="nxl-head-mobile-toggler" id="mobile-collapse">
                    <div class="hamburger hamburger--arrowturn">
                        <div class="hamburger-box">
                            <div class="hamburger-inner"></div>
                        </div>
                    </div>
                </a>
                <!--! [Start] nxl-head-mobile-toggler !-->
                <!--! [Start] nxl-navigation-toggle !-->
                <div class="nxl-navigation-toggle">
                    <a href="javascript:void(0);" id="menu-mini-button">
                        <i class="feather-align-left"></i>
                    </a>
                    <a href="javascript:void(0);" id="menu-expend-button" style="display: none">
                        <i class="feather-arrow-right"></i>
                    </a>
                </div>
                <!--! [End] nxl-navigation-toggle !-->
                <!--! [Start] nxl-lavel-mega-menu-toggle !-->
                <div class="nxl-lavel-mega-menu-toggle d-flex d-lg-none">
                    <a href="javascript:void(0);" id="nxl-lavel-mega-menu-open">
                        <i class="feather-align-left"></i>
                    </a>
                </div>
                <!--! [End] nxl-lavel-mega-menu-toggle !-->
                <!--! [Start] nxl-lavel-mega-menu !-->
                <div class="nxl-drp-link nxl-lavel-mega-menu">
                    <div class="nxl-lavel-mega-menu-toggle d-flex d-lg-none">
                        <a href="javascript:void(0)" id="nxl-lavel-mega-menu-hide">
                            <i class="feather-arrow-left me-2"></i>
                            <span>Back</span>
                        </a>
                    </div>
                  
                </div>
             
            </div>
            <!--! [End] Header Left !-->
            <!--! [Start] Header Right !-->
            <div class="header-right ms-auto">
                <div class="d-flex align-items-center">
             
             
                    <div class="nxl-h-item d-none d-sm-flex">
                        <div class="full-screen-switcher">
                            <a href="javascript:void(0);" class="nxl-head-link me-0" onclick="$('body').fullScreenHelper('toggle');">
                                <i class="feather-maximize maximize"></i>
                                <i class="feather-minimize minimize"></i>
                            </a>
                        </div>
                    </div>
                    <div class="nxl-h-item dark-light-theme">
                        <a href="javascript:void(0);" class="nxl-head-link me-0 dark-button">
                            <i class="feather-moon"></i>
                        </a>
                        <a href="javascript:void(0);" class="nxl-head-link me-0 light-button" style="display: none">
                            <i class="feather-sun"></i>
                        </a>
                    </div>
                  
                    <div class="dropdown nxl-h-item">
                        <a class="nxl-head-link me-3" data-bs-toggle="dropdown" href="#" role="button" data-bs-auto-close="outside">
                            <i class="feather-bell"></i>
                            <span class="badge bg-danger nxl-h-badge" id="notifyBadge">0</span>
                        </a>
                       <div class="dropdown-menu dropdown-menu-end nxl-h-dropdown nxl-notifications-menu" id="notifyList">
                            <div class="d-flex justify-content-between align-items-center notifications-head">
                                <h6 class="fw-bold text-dark mb-0">Notifications</h6>
                             
                            </div>
 
                        </div>
                    </div>
                    <div class="dropdown nxl-h-item">
                        <a href="javascript:void(0);" data-bs-toggle="dropdown" role="button" data-bs-auto-close="outside">
                            <img src="assets/images/avatar/1.png" alt="user-image" class="img-fluid user-avtar me-0" />
                        </a>
                        <div class="dropdown-menu dropdown-menu-end nxl-h-dropdown nxl-user-dropdown">
                            <div class="dropdown-header">
                                <div class="d-flex align-items-center">
                                    <img src="assets/images/avatar/1.png" alt="user-image" class="img-fluid user-avtar" />
                                    <div>
                                        <h6 class="text-dark mb-0">Admin</h6>
                                       
                                    </div>
                                </div>
                            </div>
                     
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="feather-user"></i>
                                <span>Profile Details</span>
                            </a>
                            
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="feather-settings"></i>
                                <span>Account Settings</span>
                            </a>
                            <div class="dropdown-divider"></div>
                            <a href="logout.php" class="dropdown-item">
                                <i class="feather-log-out"></i>
                                <span>Logout</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <!--! [End] Header Right !-->
        </div>
    </header>
<script>
fetch('get_notifications.php')
.then(res => res.json())
.then(data => {
    let list = document.getElementById('notifyList');
    list.innerHTML = '';

    if (data.length === 0) {
        list.innerHTML = '<div class="notifications-item">No notifications</div>';
        return;
    }

    data.forEach(n => {
        list.innerHTML += `
           <div class="notifications-item">
                                <img src="assets/images/notification.jpg" alt="" class="rounded me-3 border">
                                <div class="notifications-desc">

                                    <a href="${n.link}&&notify_id=${n.id}" class="font-body text-truncate-2-line"> <span class="fw-semibold text-dark">${n.message}</span></a>

                                    <div class="d-flex justify-content-between align-items-center">
                                     <div class="notifications-date text-muted border-bottom border-bottom-dashed timeago" data-time="${n.created_at}"></div>
                                <div class="notifications-date text-muted border-bottom border-bottom-dashed">${n.title}</div>
                                        
                                    </div>
                                </div>
                            </div>`;
    });
});

    </script>

                <script>
function timeAgoSeconds(dateTime) {
    const past = new Date(dateTime).getTime();
    const now = new Date().getTime();
    let diff = Math.floor((now - past) / 1000);

    if (diff < 5) return "just now";
    if (diff < 60) return diff + " sec ago";

    const min = Math.floor(diff / 60);
    const sec = diff % 60;

    if (min < 60)
        return min + " min ";

    const hr = Math.floor(min / 60);
    if (hr < 24)
        return hr + " hour ago";

    const day = Math.floor(hr / 24);
    return day + " day ago";
}

function updateTimeAgo() {
    document.querySelectorAll('.timeago').forEach(el => {
        el.innerText = timeAgoSeconds(el.dataset.time);
    });
}

// har 1 second me update
setInterval(updateTimeAgo, 1000);
updateTimeAgo();
</script>
 
    <script>
function checkNotification() {
    fetch('check_notification.php')
        .then(res => res.text())
        .then(count => {
            const badge = document.getElementById('notifyBadge');
            if (count > 0) {
                badge.innerText = count;
                badge.style.display = 'inline';
            } else {
                badge.style.display = 'none';
            }
        });
}

// har 5 second me check karega
setInterval(checkNotification, 5000);

// page load par bhi check
checkNotification();
</script>
