{{-- desktop --}}
<aside
    class="hidden lg:flex flex-col bg-white lg:w-[280px] 2xl:w-[280px] shrink-0 h-screen z-[100] lg:sticky left-0 top-0 shadow-[0_4px_4px_rgba(0,0,0,0.25)] p-5 overflow-hidden">

    {{-- header --}}
    <div class="flex items-center mb-6 shrink-0">
        <div class="flex items-center mr-4">
            <img src="{{ asset('image/bhos-logo.png') }}" alt="BHOS Technology" class="h-12 w-auto">
        </div>

        <div class="text-left leading-tight">
            <div class="text-[20px] font-black tracking-wide">PT</div>
            <div class="text-[10px] font-semibold text-slate-500">GRACE INDO</div>
            <div class="text-[10px] font-semibold text-slate-500">PRATAMA</div>
        </div>
    </div>

    {{-- menu --}}
    <div
        class="menu flex-1 overflow-y-auto space-y-2 text-slate-700
            [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
        {{-- Dashboard --}}
        @can('akses dashboard')
            <a href="{{ route('admin.dashboard') }}"
                class="cursor-pointer flex gap-3 items-center px-3 py-2 rounded-xl duration-300 ease-in-out hover:bg-slate-100 @yield('menu-dashboard')">
                <span class="h-8 w-8 rounded-full bg-slate-200 grid place-items-center">
                    <svg class="fill-slate-600" width="18" height="18" viewBox="0 0 24 24">
                        <path d="M4 4h16v4H4V4zm0 6h16v10H4V10z" />
                    </svg>
                </span>
                <span class="font-semibold text-[14px]">Dashboard</span>
            </a>
        @endcan

        {{-- Gudang --}}
        @canany([
            'baca gudang',
            'baca pengadaan bahan baku',
            'baca bahan baku masuk',
            'baca bahan baku masuk gudang sendiri',
            'baca produksi',
            'baca pengiriman
            produk',
            'baca bahan baku',
            'baca stok bahan baku',
            ])
            <details class="group" @yield('open-gudang')>
                <summary
                    class="list-none cursor-pointer flex items-center justify-between px-3 py-2 rounded-xl
               duration-300 ease-in-out hover:bg-slate-100
               group-open:bg-gradient-to-r group-open:from-[#53BF6A]/80 group-open:to-[#275931]/80
               group-open:text-white
               @yield('menu-gudang')">

                    <div class="flex items-center gap-3">
                        <span
                            class="h-8 w-8 rounded-full bg-slate-200 grid place-items-center transition group-open:bg-white/20">
                            <svg class="fill-slate-600 transition group-open:fill-white" width="18" height="18"
                                viewBox="0 0 24 24">
                                <path d="M3 10l9-7 9 7v11H3V10zm2 2v7h14v-7H5z" />
                            </svg>
                        </span>
                        <span class="font-semibold text-[14px]">Gudang</span>
                    </div>

                    <svg class="h-4 w-4 text-slate-700 transition group-open:text-white group-open:rotate-180"
                        viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd"
                            d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.94a.75.75 0 111.08 1.04l-4.24 4.5a.75.75 0 01-1.08 0l-4.24-4.5a.75.75 0 01.02-1.06z"
                            clip-rule="evenodd" />
                    </svg>
                </summary>

                <div class="mt-2 ml-11 mr-2 rounded-2xl bg-white shadow-md p-2 space-y-1">

                    @can('baca gudang')
                        <a href="{{ route('warehouses') }}"
                            class="block px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-gudang-gudang')">
                            Gudang
                        </a>
                    @endcan

                    @can('baca pengadaan bahan baku')
                        <a href="{{ route('procurements') }}"
                            class="flex items-center justify-between px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-pengadaan')">

                            <span>Pengadaan Bahan Baku</span>

                            @if (($totalProcurementMenunggu ?? 0) > 0)
                                <span class="bg-yellow-500 text-white text-[11px] px-2 py-0.5 rounded-full">
                                    {{ $totalProcurementMenunggu }}
                                </span>
                            @endif
                        </a>
                    @endcan

                    @canany(['baca bahan baku masuk', 'baca bahan baku masuk gudang sendiri'])
                        <a href="{{ route('purchase-receipts') }}"
                            class="block px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-gudang-barang-masuk')">
                            Bahan Baku Masuk
                        </a>
                    @endcanany

                    @can('baca produksi')
                        <a href="{{ route('admin.gudang-laporan-produksi') }}"
                            class="block px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-gudang-laporan-produksi')">
                            Laporan Produksi
                        </a>
                    @endcan

                    @can('baca pengiriman produk')
                        <a href="{{ route('shipments') }}"
                            class="block px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-gudang-permintaan-pengiriman')">
                            <span>Permintaan Pengiriman Produk </span>
                            @if (($totalNotifPermintaanPengirimanProduk ?? 0) > 0)
                                <span class="bg-yellow-500 text-white text-[11px] px-2 py-0.5 rounded-full">
                                    {{ $totalNotifPermintaanPengirimanProduk }}
                                </span>
                            @endif
                        </a>
                    @endcan

                    @can('baca bahan baku')
                        <a href="{{ route('admin.gudang-bahan-baku') }}"
                            class="block px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-gudang-bahan-baku')">
                            Bahan Baku
                        </a>
                    @endcan

                    @can('baca stok bahan baku')
                        <a href="{{ route('admin.gudang-stok-bahan-baku') }}"
                            class="block px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-gudang-stok-bahan-baku')">
                            Stok Bahan Baku
                        </a>
                    @endcan

                    @canany(['baca history stok bahan baku', 'baca history stok produk'])
                        <a href="{{ route('admin.gudang-stok-movement') }}"
                            class="block px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-gudang-stok-movement')">
                            History Stok
                        </a>
                    @endcanany

                </div>
            </details>
        @endcanany

        {{-- Pemasaran --}}
        @canany(['baca pengiriman produk', 'baca penerimaan pengiriman produk', 'baca penjualan'])
            <details class="group" @yield('open-pemasaran')>
                <summary
                    class="list-none cursor-pointer flex items-center justify-between px-3 py-2 rounded-xl
               duration-300 ease-in-out hover:bg-slate-100
               group-open:bg-gradient-to-r group-open:from-[#53BF6A]/80 group-open:to-[#275931]/80
               group-open:text-white
               @yield('menu-pemasaran')">

                    <div class="flex items-center gap-3">
                        <span
                            class="h-8 w-8 rounded-full bg-slate-200 grid place-items-center transition group-open:bg-white/20">
                            <svg class="fill-slate-600 transition group-open:fill-white" width="18" height="18"
                                viewBox="0 0 24 24">
                                <path d="M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h16v2H4v-2z" />
                            </svg>
                        </span>
                        <span class="font-semibold text-[14px]">Pemasaran</span>
                    </div>

                    <svg class="h-4 w-4 text-slate-700 transition group-open:text-white group-open:rotate-180"
                        viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd"
                            d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.94a.75.75 0 111.08 1.04l-4.24 4.5a.75.75 0 01-1.08 0l-4.24-4.5a.75.75 0 01.02-1.06z"
                            clip-rule="evenodd" />
                    </svg>
                </summary>

                <div class="mt-2 ml-11 mr-2 rounded-2xl bg-white shadow-md p-2 space-y-1">
                    @can('baca pengiriman produk')
                        <a href="{{ route('shipments') }}"
                            class="block px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-pemasaran-permintaan-pengiriman')">
                            <span>Permintaan Pengiriman Produk </span>
                            @if (($totalNotifPermintaanPengirimanProduk ?? 0) > 0)
                                <span class="bg-yellow-500 text-white text-[11px] px-2 py-0.5 rounded-full">
                                    {{ $totalNotifPermintaanPengirimanProduk }}
                                </span>
                            @endif
                        </a>
                    @endcan

                    @can('baca penerimaan pengiriman produk')
                        <a href="{{ route('shipment-receipts') }}"
                            class="block px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-pemasaran-penerimaan-pengiriman-produk')">
                            <span>Penerimaan Pengiriman Produk</span>
                            @if (($totalNotifPenerimaanPengirimanProduk ?? 0) > 0)
                                <span class="bg-yellow-500 text-white text-[11px] px-2 py-0.5 rounded-full">
                                    {{ $totalNotifPenerimaanPengirimanProduk }}
                                </span>
                            @endif
                        </a>
                    @endcan

                    @can('baca penjualan')
                        <a href="{{ route('admin.pemasaran-laporan-penjualan') }}"
                            class="block px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-pemasaran-laporan-penjualan')">
                            Laporan Penjualan
                        </a>
                    @endcan
                </div>
            </details>
        @endcanany

        {{-- Executive Team --}}
        @canany([
            'baca karyawan',
            'baca akun',
            'baca produk',
            'baca produk varian',
            'baca izin',
            'baca role',
            'baca log
            error',
            ])
            <details class="group" @yield('open-executive')>
                <summary
                    class="list-none cursor-pointer flex items-center justify-between px-3 py-2 rounded-xl
                   duration-300 ease-in-out hover:bg-slate-100
                   group-open:bg-gradient-to-r group-open:from-[#53BF6A]/80 group-open:to-[#275931]/80
                   group-open:text-white
                   @yield('menu-executive')">

                    <div class="flex items-center gap-3">
                        <span
                            class="h-8 w-8 rounded-full bg-slate-200 grid place-items-center transition group-open:bg-white/20">
                            <svg class="fill-slate-600 transition group-open:fill-white" width="18" height="18"
                                viewBox="0 0 24 24">
                                <path d="M12 12a5 5 0 100-10 5 5 0 000 10zm-8 10a8 8 0 0116 0H4z" />
                            </svg>
                        </span>
                        <span class="font-semibold text-[14px]">Executive Team</span>
                    </div>

                    <svg class="h-4 w-4 text-slate-700 transition group-open:text-white group-open:rotate-180"
                        viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd"
                            d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.94a.75.75 0 111.08 1.04l-4.24 4.5a.75.75 0 01-1.08 0l-4.24-4.5a.75.75 0 01.02-1.06z"
                            clip-rule="evenodd" />
                    </svg>
                </summary>

                <div class="mt-2 ml-11 mr-2 rounded-2xl bg-white shadow-md p-2 space-y-1">
                    @can('baca karyawan')
                        <a href="{{ route('employees') }}"
                            class="block px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-executive-karyawan')">
                            Karyawan
                        </a>
                    @endcan

                    @can('baca akun')
                        <a href="{{ route('users') }}"
                            class="block px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-executive-user')">
                            Akun
                        </a>
                    @endcan

                    @can('baca produk')
                        <a href="{{ route('admin.executive-produk') }}"
                            class="block px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-executive-produk')">
                            Produk
                        </a>

                        <a href="{{ route('product-stocks') }}"
                            class="block px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-executive-produk-stock')">
                            Produk Stock
                        </a>
                    @endcan

                    @can('baca produk varian')
                        <a href="{{ route('admin.executive-produk-variant') }}"
                            class="block px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-executive-produk-variant')">
                            Produk Varian
                        </a>
                    @endcan

                    @can('baca izin')
                        <a href="{{ route('permissions') }}"
                            class="block px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-executive-permission')">
                            Permissions
                        </a>
                    @endcan

                    @can('baca role')
                        <a href="{{ route('roles') }}"
                            class="block px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-executive-role')">
                            Role
                        </a>
                    @endcan

                    @can('baca log error')
                        <a href="{{ route('log-errors') }}"
                            class="block px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-executive-log')">
                            Log Error
                        </a>
                    @endcan
                    @can('baca history aktivitas')
                        <a href="{{ route('activity-history') }}"
                            class="block px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-history-activity')">
                            History Aktivitas
                        </a>
                    @endcan
                </div>
            </details>
        @endcanany

        {{-- Profile --}}
        <a href="{{ route('admin.profile') }}"
            class="cursor-pointer flex gap-3 items-center px-3 py-2 rounded-xl duration-300 ease-in-out hover:bg-slate-100 @yield('menu-profile')">
            <span class="h-8 w-8 rounded-full bg-slate-200 grid place-items-center">
                <svg class="fill-slate-600" width="18" height="18" viewBox="0 0 24 24">
                    <path d="M12 2a7 7 0 00-7 7v3a7 7 0 0014 0V9a7 7 0 00-7-7zm-7 19a7 7 0 0114 0H5z" />
                </svg>
            </span>
            <span class="font-semibold text-[14px]">Profile</span>
        </a>

        {{-- Logout --}}
        <form action="{{ route('logout') }}" method="post">
            @csrf
            <button type="submit"
                class="w-full text-left flex gap-3 items-center px-3 py-2 rounded-xl duration-300 ease-in-out hover:bg-slate-100">
                <span class="h-8 w-8 rounded-full bg-slate-200 grid place-items-center">
                    <svg class="fill-slate-600" width="18" height="18" viewBox="0 0 24 24">
                        <path
                            d="M16 13v-2H7V8l-5 4 5 4v-3h9zm3-10H5c-1.1 0-2 .9-2 2v6h2V5h14v14H5v-6H3v6c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" />
                    </svg>
                </span>
                <span class="font-semibold text-[14px]">Logout</span>
            </button>
        </form>

    </div>
</aside>


{{-- mobile --}}
<aside id="navbar-default"
    class="hidden bg-white w-[280px] sm:w-[320px] h-screen z-[100] fixed left-0 top-0 shadow-[0_4px_4px_rgba(0,0,0,0.25)] p-5 overflow-hidden flex flex-col">

    {{-- header --}}
    <div class="flex items-center justify-between mb-6 shrink-0">
        <div class="flex items-center gap-3">
            <img src="{{ asset('image/bhos-logo.png') }}" alt="BHOS Technology" class="h-12 w-auto">
        </div>

        <div class="text-right leading-tight">
            <div class="text-[18px] font-black tracking-wide">PT</div>
            <div class="text-[10px] font-semibold text-slate-500">GRACE INDO</div>
            <div class="text-[10px] font-semibold text-slate-500">PRATAMA</div>
        </div>
    </div>

    {{-- menu --}}
    <div
        class="menu flex-1 overflow-y-auto space-y-2 text-slate-700
            [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
        {{-- Dashboard --}}
        @can('akses dashboard')
            <a href="{{ route('admin.dashboard') }}"
                class="cursor-pointer flex gap-3 items-center px-3 py-2 rounded-xl duration-300 ease-in-out hover:bg-slate-100 @yield('menu-dashboard')">
                <span class="h-8 w-8 rounded-full bg-slate-200 grid place-items-center">
                    <svg class="fill-slate-600" width="18" height="18" viewBox="0 0 24 24">
                        <path d="M4 4h16v4H4V4zm0 6h16v10H4V10z" />
                    </svg>
                </span>
                <span class="font-semibold text-[14px]">Dashboard</span>
            </a>
        @endcan

        {{-- Gudang --}}
        @canany([
            'baca gudang',
            'baca pengadaan bahan baku',
            'baca bahan baku masuk',
            'baca bahan baku masuk gudang sendiri',
            'baca produksi',
            'baca pengiriman
            produk',
            'baca bahan baku',
            'baca stok bahan baku',
            ])
            <details class="group" @yield('open-gudang')>
                <summary
                    class="list-none cursor-pointer flex items-center justify-between px-3 py-2 rounded-xl
               duration-300 ease-in-out hover:bg-slate-100
               group-open:bg-gradient-to-r group-open:from-[#53BF6A]/80 group-open:to-[#275931]/80
               group-open:text-white
               @yield('menu-gudang')">

                    <div class="flex items-center gap-3">
                        <span
                            class="h-8 w-8 rounded-full bg-slate-200 grid place-items-center transition group-open:bg-white/20">
                            <svg class="fill-slate-600 transition group-open:fill-white" width="18" height="18"
                                viewBox="0 0 24 24">
                                <path d="M3 10l9-7 9 7v11H3V10zm2 2v7h14v-7H5z" />
                            </svg>
                        </span>
                        <span class="font-semibold text-[14px]">Gudang</span>
                    </div>

                    <svg class="h-4 w-4 text-slate-700 transition group-open:text-white group-open:rotate-180"
                        viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd"
                            d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.94a.75.75 0 111.08 1.04l-4.24 4.5a.75.75 0 01-1.08 0l-4.24-4.5a.75.75 0 01.02-1.06z"
                            clip-rule="evenodd" />
                    </svg>
                </summary>

                <div class="mt-2 ml-11 mr-2 rounded-2xl bg-white shadow-md p-2 space-y-1">

                    @can('baca gudang')
                        <a href="{{ route('warehouses') }}"
                            class="block px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-gudang-gudang')">
                            Gudang
                        </a>
                    @endcan

                    @can('baca pengadaan bahan baku')
                        <a href="{{ route('procurements') }}"
                            class="flex items-center justify-between px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-pengadaan')">

                            <span>Pengadaan Bahan Baku</span>

                            @if (($totalProcurementMenunggu ?? 0) > 0 && Auth::user()->hasPermissionTo('edit status pengadaan bahan baku'))
                                <span class="bg-yellow-500 text-white text-[11px] px-2 py-0.5 rounded-full">
                                    {{ $totalProcurementMenunggu }}
                                </span>
                            @endif
                        </a>
                    @endcan

                    @canany(['baca bahan baku masuk', 'baca bahan baku masuk gudang sendiri'])
                        <a href="{{ route('purchase-receipts') }}"
                            class="block px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-gudang-barang-masuk')">
                            Bahan Baku Masuk
                        </a>
                    @endcanany

                    @can('baca produksi')
                        <a href="{{ route('admin.gudang-laporan-produksi') }}"
                            class="block px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-gudang-laporan-produksi')">
                            Laporan Produksi
                        </a>
                    @endcan

                    @can('baca pengiriman produk')
                        <a href="{{ route('shipments') }}"
                            class="block px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-gudang-permintaan-pengiriman')">
                            <span>Permintaan Pengiriman Produk </span>
                            @if (($totalNotifPermintaanPengirimanProduk ?? 0) > 0)
                                <span class="bg-yellow-500 text-white text-[11px] px-2 py-0.5 rounded-full">
                                    {{ $totalNotifPermintaanPengirimanProduk }}
                                </span>
                            @endif
                        </a>
                    @endcan

                    @can('baca bahan baku')
                        <a href="{{ route('admin.gudang-bahan-baku') }}"
                            class="block px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-gudang-bahan-baku')">
                            Bahan Baku
                        </a>
                    @endcan

                    @can('baca stok bahan baku')
                        <a href="{{ route('admin.gudang-stok-bahan-baku') }}"
                            class="block px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-gudang-stok-bahan-baku')">
                            Stok Bahan Baku
                        </a>
                    @endcan

                    @canany(['baca history stok bahan baku', 'baca history stok produk'])
                        <a href="{{ route('admin.gudang-stok-movement') }}"
                            class="block px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-gudang-stok-movement')">
                            History Stok
                        </a>
                    @endcanany

                </div>
            </details>
        @endcanany

        {{-- Pemasaran --}}
        @canany(['baca pengiriman produk', 'baca penerimaan pengiriman produk', 'baca penjualan'])
            <details class="group" @yield('open-pemasaran')>
                <summary
                    class="list-none cursor-pointer flex items-center justify-between px-3 py-2 rounded-xl
               duration-300 ease-in-out hover:bg-slate-100
               group-open:bg-gradient-to-r group-open:from-[#53BF6A]/80 group-open:to-[#275931]/80
               group-open:text-white
               @yield('menu-pemasaran')">

                    <div class="flex items-center gap-3">
                        <span
                            class="h-8 w-8 rounded-full bg-slate-200 grid place-items-center transition group-open:bg-white/20">
                            <svg class="fill-slate-600 transition group-open:fill-white" width="18" height="18"
                                viewBox="0 0 24 24">
                                <path d="M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h16v2H4v-2z" />
                            </svg>
                        </span>
                        <span class="font-semibold text-[14px]">Pemasaran</span>
                    </div>

                    <svg class="h-4 w-4 text-slate-700 transition group-open:text-white group-open:rotate-180"
                        viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd"
                            d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.94a.75.75 0 111.08 1.04l-4.24 4.5a.75.75 0 01-1.08 0l-4.24-4.5a.75.75 0 01.02-1.06z"
                            clip-rule="evenodd" />
                    </svg>
                </summary>

                <div class="mt-2 ml-11 mr-2 rounded-2xl bg-white shadow-md p-2 space-y-1">
                    @can('baca pengiriman produk')
                        <a href="{{ route('shipments') }}"
                            class="block px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-pemasaran-permintaan-pengiriman')">
                            <span>Permintaan Pengiriman Produk </span>
                            @if (($totalNotifPermintaanPengirimanProduk ?? 0) > 0)
                                <span class="bg-yellow-500 text-white text-[11px] px-2 py-0.5 rounded-full">
                                    {{ $totalNotifPermintaanPengirimanProduk }}
                                </span>
                            @endif
                        </a>
                    @endcan

                    @can('baca penerimaan pengiriman produk')
                        <a href="{{ route('shipment-receipts') }}"
                            class="block px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-pemasaran-penerimaan-pengiriman-produk')">
                            <span>Penerimaan Pengiriman Produk</span>
                            @if (($totalNotifPenerimaanPengirimanProduk ?? 0) > 0)
                                <span class="bg-yellow-500 text-white text-[11px] px-2 py-0.5 rounded-full">
                                    {{ $totalNotifPenerimaanPengirimanProduk }}
                                </span>
                            @endif
                        </a>
                    @endcan

                    @can('baca penjualan')
                        <a href="{{ route('admin.pemasaran-laporan-penjualan') }}"
                            class="block px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-pemasaran-laporan-penjualan')">
                            Laporan Penjualan
                        </a>
                    @endcan
                </div>
            </details>
        @endcanany

        {{-- Executive Team --}}
        @canany([
            'baca karyawan',
            'baca akun',
            'baca produk',
            'baca produk varian',
            'baca izin',
            'baca role',
            'baca log
            error',
            ])
            <details class="group" @yield('open-executive')>
                <summary
                    class="list-none cursor-pointer flex items-center justify-between px-3 py-2 rounded-xl
                   duration-300 ease-in-out hover:bg-slate-100
                   group-open:bg-gradient-to-r group-open:from-[#53BF6A]/80 group-open:to-[#275931]/80
                   group-open:text-white
                   @yield('menu-executive')">

                    <div class="flex items-center gap-3">
                        <span
                            class="h-8 w-8 rounded-full bg-slate-200 grid place-items-center transition group-open:bg-white/20">
                            <svg class="fill-slate-600 transition group-open:fill-white" width="18" height="18"
                                viewBox="0 0 24 24">
                                <path d="M12 12a5 5 0 100-10 5 5 0 000 10zm-8 10a8 8 0 0116 0H4z" />
                            </svg>
                        </span>
                        <span class="font-semibold text-[14px]">Executive Team</span>
                    </div>

                    <svg class="h-4 w-4 text-slate-700 transition group-open:text-white group-open:rotate-180"
                        viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd"
                            d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.94a.75.75 0 111.08 1.04l-4.24 4.5a.75.75 0 01-1.08 0l-4.24-4.5a.75.75 0 01.02-1.06z"
                            clip-rule="evenodd" />
                    </svg>
                </summary>

                <div class="mt-2 ml-11 mr-2 rounded-2xl bg-white shadow-md p-2 space-y-1">
                    @can('baca karyawan')
                        <a href="{{ route('employees') }}"
                            class="block px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-executive-karyawan')">
                            Karyawan
                        </a>
                    @endcan

                    @can('baca akun')
                        <a href="{{ route('users') }}"
                            class="block px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-executive-user')">
                            Akun
                        </a>
                    @endcan

                    @can('baca produk')
                        <a href="{{ route('admin.executive-produk') }}"
                            class="block px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-executive-produk')">
                            Produk
                        </a>

                        <a href="{{ route('product-stocks') }}"
                            class="block px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-executive-produk-stock')">
                            Produk Stock
                        </a>
                    @endcan

                    @can('baca produk varian')
                        <a href="{{ route('admin.executive-produk-variant') }}"
                            class="block px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-executive-produk-variant')">
                            Produk Varian
                        </a>
                    @endcan

                    @can('baca izin')
                        <a href="{{ route('permissions') }}"
                            class="block px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-executive-permission')">
                            Permissions
                        </a>
                    @endcan

                    @can('baca role')
                        <a href="{{ route('roles') }}"
                            class="block px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-executive-role')">
                            Role
                        </a>
                    @endcan

                    @can('baca log error')
                        <a href="{{ route('log-errors') }}"
                            class="block px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-executive-log')">
                            Log Error
                        </a>
                    @endcan
                    @can('baca history aktivitas')
                        <a href="{{ route('activity-history') }}"
                            class="block px-3 py-2 rounded-xl text-[13px] font-medium hover:bg-slate-100 @yield('menu-history-activity')">
                            History Aktivitas
                        </a>
                    @endcan
                </div>
            </details>
        @endcanany

        {{-- Profile --}}
        <a href="{{ route('admin.profile') }}"
            class="cursor-pointer flex gap-3 items-center px-3 py-2 rounded-xl duration-300 ease-in-out hover:bg-slate-100 @yield('menu-profile')">
            <span class="h-8 w-8 rounded-full bg-slate-200 grid place-items-center">
                <svg class="fill-slate-600" width="18" height="18" viewBox="0 0 24 24">
                    <path d="M12 2a7 7 0 00-7 7v3a7 7 0 0014 0V9a7 7 0 00-7-7zm-7 19a7 7 0 0114 0H5z" />
                </svg>
            </span>
            <span class="font-semibold text-[14px]">Profile</span>
        </a>

        {{-- Logout --}}
        <form action="{{ route('logout') }}" method="post">
            @csrf
            <button type="submit"
                class="w-full text-left flex gap-3 items-center px-3 py-2 rounded-xl duration-300 ease-in-out hover:bg-slate-100">
                <span class="h-8 w-8 rounded-full bg-slate-200 grid place-items-center">
                    <svg class="fill-slate-600" width="18" height="18" viewBox="0 0 24 24">
                        <path
                            d="M16 13v-2H7V8l-5 4 5 4v-3h9zm3-10H5c-1.1 0-2 .9-2 2v6h2V5h14v14H5v-6H3v6c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" />
                    </svg>
                </span>
                <span class="font-semibold text-[14px]">Logout</span>
            </button>
        </form>

    </div>
</aside>