    <header
        class="shadow px-4 lg:px-6 xl:px-7 2xl:px-8
    py-3 lg:py-3.5 xl:py-4
    flex items-center justify-between
    Poppins-medium">

        <div class="flex items-center gap-2 lg:gap-[6px]">

            <img src="{{ asset('newsites/admin/images/header-icon.png') }}"
                class="w-6 h-6 lg:w-7 hidden lg:block lg:h-7 2xl:w-auto 2xl:h-auto"
                alt="Logo">
            <button
                onclick="toggleSidebar()"
                class="">
                <img src="{{ asset('newsites/admin/images/toggle-button.png') }}"
                    class="w-6 h-6 lg:w-7 block lg:hidden lg:h-7 2xl:w-auto 2xl:h-auto"
                    alt="Logo">
            </button>
            <h1 class="text-[14px] lg:text-[15px] xl:text-[16px] 2xl:text-[17px]
            text-[#133754]">
                {{$headerText}}
            </h1>
        </div>


        <!-- <div class="flex-1 sm:flex justify-center hidden px-4 lg:px-6 xl:px-8 2xl:px-10">
            <div class="relative w-full
            max-w-[380px] lg:max-w-[440px] xl:max-w-[480px] 2xl:max-w-[510px]">

                <i class="fa-solid fa-magnifying-glass
                absolute left-3 lg:left-4 top-1/2 -translate-y-1/2
                text-[#9CA3AF]
                text-base lg:text-lg"></i>

                <input
                    type="text"
                    placeholder="Search Disputes, Sessions, Bookings by ID or Student Name"
                    class="w-full
                pl-9 lg:pl-11 pr-3 lg:pr-4
                py-3 lg:py-4 xl:py-[18px] 2xl:py-[19px]
                border border-[#CDCDCD] rounded-[5px]
                focus:outline-none focus:ring-2
                focus:ring-[#1CD8C4]
                text-[#626262] placeholder:text-[#626262]
                Poppins
                text-[13px] lg:text-sm">
            </div>
        </div> -->

        <div class="flex items-center gap-2 lg:gap-3">

            <button
                 onclick="window.location.href='{{route('admin.platform-setting')}}'"
                class="px-3 lg:px-4 cursor-pointer
            sm:py-2.5 py-2 lg:py-3 xl:py-[13px] 2xl:py-[14px]
            rounded-lg
            border border-[#EEEEEE]">

      <i
        class="fa fa-gear 
        text-[#133754]
        text-[20px] lg:text-[22px] xl:text-[24px] 2xl:text-[27px]"></i>
            </button>
            <div class="relative">
 <button
    id="notificationBtn"
    class="relative px-3 lg:px-4 cursor-pointer
    sm:py-2.5 py-2 lg:py-3 xl:py-[13px] 2xl:py-[14px]
    rounded-lg
    border border-[#EEEEEE]">
    <i
        class="fa-regular fa-bell
        text-[#133754]
        text-[20px] lg:text-[22px] xl:text-[24px] 2xl:text-[27px]"></i>

    @if(($unreadCount ?? 0) > 0)
    <span id="notificationDropdownCount"
        class="notificationDropdownCount
        absolute top-0 right-0 translate-x-1/2 -translate-y-1/2
        w-[18px] h-[18px]
        bg-[#133754] text-white
        text-[10px] font-semibold
        rounded-full
        flex items-center justify-center
        pointer-events-none" style="width:17px;height:17px">
        {{ $unreadCount > 99 ? '99+' : $unreadCount }}
    </span>
@endif
</button>

    @include('components.notification', $notifications)
</div>
        </div>

    </header>

    <script>
        const btn = document.getElementById('notificationBtn');
        const dropdown = document.getElementById('notificationDropdown');

        btn.addEventListener('click', () => {
            dropdown.classList.toggle('hidden'); // Toggle visibility
        });

        // Close if clicked outside
        document.addEventListener('click', (e) => {
            if (!btn.contains(e.target) && !dropdown.contains(e.target)) {
                dropdown.classList.add('hidden');
            }
        });
    </script>