<header class="header fixed top-0 z-10 left-0 right-0 flex items-stretch shrink-0 bg-[#fefefe] dark:bg-coal-500"
        data-sticky="true" data-sticky-class="shadow-sm dark:border-b dark:border-b-coal-100" data-sticky-name="header"
        id="header">
    <!-- begin: container -->
    <div class="container-fluid flex justify-between items-stretch lg:gap-4" id="header_container">
        <div class="flex gap-1 lg:hidden items-center -ml-1">
            <a class="shrink-0" href="{{ url('/') }}">
                <img class="max-h-[25px] w-full" src="assets/media/app/logo-agi-mini.png"/>
            </a>
            <div class="flex items-center">
                <button class="btn btn-icon btn-light btn-clear btn-sm" data-drawer-toggle="#sidebar">
                    <i class="ki-filled ki-menu">
                    </i>
                </button>
                <button class="btn btn-icon btn-light btn-clear btn-sm" data-drawer-toggle="#megamenu_wrapper">
                    <i class="ki-filled ki-burger-menu-2">
                    </i>
                </button>
            </div>
        </div>
        <div class="flex items-stretch" id="megamenu_container">
            <div class="flex items-stretch" data-reparent="true" data-reparent-mode="prepend|lg:prepend"
                 data-reparent-target="body|lg:#megamenu_container">
            </div>

            @yield('breadcrumbs')
        </div>

        <div class="flex items-center gap-2 lg:gap-3.5">
            <div class="dropdown" data-dropdown="true" data-dropdown-offset="70px, 10px" data-dropdown-placement="bottom-end"
                 data-dropdown-trigger="click|lg:click">
                <button
                    class="dropdown-toggle btn btn-icon btn-icon-lg relative cursor-pointer size-9 rounded-full hover:bg-primary-light hover:text-primary dropdown-open:bg-primary-light dropdown-open:text-primary text-gray-500">
                    <i class="ki-filled ki-notification-on">
                    </i>
                    <span class="badge badge-dot badge-success size-[5px] absolute top-0.5 right-0.5 transform translate-y-1/2">
					</span>
                </button>
                <div class="dropdown-content light:border-gray-300 w-full max-w-[460px]">
                    <div class="flex items-center justify-between gap-2.5 text-sm text-gray-900 font-semibold px-5 py-2.5"
                         id="notifications_header">
                        Notifications
                        <button class="btn btn-sm btn-icon btn-light btn-clear shrink-0" data-dropdown-dismiss="true">
                            <i class="ki-filled ki-cross">
                            </i>
                        </button>
                    </div>
                    <div class="border-b border-b-gray-200">
                    </div>
                </div>
            </div>
            <div class="menu" data-menu="true">
                <div class="menu-item" data-menu-item-offset="20px, 10px" data-menu-item-placement="bottom-end"
                     data-menu-item-toggle="dropdown" data-menu-item-trigger="click|lg:click">
                    <div class="menu-toggle btn btn-icon rounded-full">
                        <img alt="" class="size-9 rounded-full border-2 border-success shrink-0"
                             src="assets/media/avatars/300-2.png"/>
                    </div>
                    <div class="menu-dropdown menu-default light:border-gray-300 w-full max-w-[350px]">
                        <div class="flex items-start justify-between px-5 py-1.5 gap-1.5">
                            <div class="flex items-start gap-2">
                                <img alt="" class="size-9 rounded-full border-2 border-success" src="assets/media/avatars/300-2.png"/>
                                <div class="flex flex-col gap-1.5">
									<span class="text-sm text-gray-800 font-semibold leading-none">
										{{ Auth::user()->name }}
									</span>
                                    <span class="text-xs text-gray-600 hover:text-primary font-medium leading-none">
                                        {{ Auth::user()->nik ?? "" }} | {{ Auth::user()->branch->name ?? "" }}
                                    </span>
                                </div>
                            </div>
                            <span class="badge badge-xs badge-primary badge-outline">
                                {{ Auth::user()->roles[0]->name?? "" }}
                            </span>
                        </div>
                        <div class="menu-separator">
                        </div>
                        <div class="flex flex-col" data-menu-dismiss="true">
                            <div class="menu-item">
                                <a class="menu-link" href="{{ route('users.profile') }}">
									<span class="menu-icon">
										<i class="ki-filled ki-profile-circle">
										</i>
									</span>
                                    <span class="menu-title">
										My Profile
									</span>
                                </a>
                            </div>
                        </div>
                        <div class="menu-separator">
                        </div>
                        <div class="flex flex-col">
                            <div class="menu-item mb-0.5">
                                <div class="menu-link">
									<span class="menu-icon">
										<i class="ki-filled ki-moon">
										</i>
									</span>
                                    <span class="menu-title">
										Dark Mode
									</span>
                                    <label class="switch switch-sm">
                                        <input data-theme-state="dark" data-theme-toggle="true" name="check" type="checkbox" value="1"/>
                                    </label>
                                </div>
                            </div>
                            <div class="menu-item px-4 py-1.5">
                                <a class="btn btn-sm btn-light justify-center" href="{{ route('logout') }}">
                                    Log out
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end: container -->
</header>
