    <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('tutor/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('tutor/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 items-center gap-2 lg:gap-3">


            @if (auth()->user()->tutorActiveSubscription)
                <button
                    class="flex items-center gap-2
            cursor-pointer
            sm:px-6 px-3 lg:px-10 xl:px-[52px] 2xl:px-[62px]
            sm:py-2.5 py-2 lg:py-3 xl:py-[16px] 2xl:py-[18px]
            rounded-[5px]
            font-semibold
            text-[13px] lg:text-[14px] 2xl:text-[15px]
            Poppins
            bg-[#F4C701] text-[#133754]">

                    <span
                        class="bg-[#133754]
                w-[10px] h-[10px]
                lg:w-[12px] lg:h-[12px]
                2xl:w-[13px] 2xl:h-[13px]
                rounded-[2px] inline-block"></span>

                    <span>{{ auth()->user()->tutorActiveSubscription->plan_name }}</span>
                </button>
            @endif

          <div class="relative">

    <button id="notificationBtn"
        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] relative">

        <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="absolute -top-1 -right-1 -->
        <!--        bg-blue-100 text-[#1CD8C4]-->
        <!--        px-1.5 py-0.5 -->
        <!--        rounded-full text-xs font-medium">-->
        <!--        {{ $unreadCount ?? 0 }}-->
        <!--    </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>
