<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Data Produk - Glow Beauty</title>

    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <style>
        * { font-family: 'Poppins', 'Inter', sans-serif; }
        body { margin: 0; padding: 0; width: 100%; overflow-x: hidden; background: linear-gradient(135deg, #fdf2f8 0%, #fff1f3 100%); }
        .btn-primary { background: linear-gradient(135deg, #f472b6 0%, #ec489a 100%); transition: all 0.3s ease; }
        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(244, 114, 182, 0.3); }
        .action-btn { transition: all 0.2s ease; }
        .action-btn:hover { transform: translateY(-2px); }
        .product-card { transition: all 0.3s ease; border: 1px solid #fbcfe8; background: white; }
        .product-card:hover { transform: translateY(-6px); box-shadow: 0 20px 25px -5px rgba(244, 114, 182, 0.2); border-color: #f9a8d4; }
        .dropdown-enter { opacity: 0; transform: scale(0.95); }
        .dropdown-enter-active { opacity: 1; transform: scale(1); transition: opacity 200ms ease-out, transform 200ms ease-out; }
        .dropdown-leave { opacity: 1; transform: scale(1); }
        .dropdown-leave-active { opacity: 0; transform: scale(0.95); transition: opacity 200ms ease-in, transform 200ms ease-in; }
        @keyframes fadeInDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
        .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        /* Terjual selalu tampil, tidak bisa disembunyikan JS */
        .terjual-info {
            display: flex !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
        @keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

.animate-shake {
    animation: shake 0.5s ease-in-out infinite;
}

/* Atau efek ring/bell */
@keyframes ring {
    0% { transform: rotate(0); }
    25% { transform: rotate(15deg); }
    75% { transform: rotate(-15deg); }
    100% { transform: rotate(0); }
}

.animate-ring {
    animation: ring 0.5s ease-in-out infinite;
    transform-origin: top center;
}

.border-pink-light { border-color: #fbcfe8; }
.bg-gradient-pink { background: linear-gradient(135deg, #fdf2f8 0%, #fff1f3 100%); }
    </style>
</head>

<body class="bg-gradient-pink">

    <!-- ========== NAVBAR ========== -->
    <nav class="bg-white/95 backdrop-blur-md border-b border-pink-light shadow-sm sticky top-0 z-50 w-full">
        <div class="px-4 sm:px-6 lg:px-8 py-3">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between">

                <!-- LOGO -->
                <div class="flex items-center gap-3 mb-3 md:mb-0">
                    <div class="w-10 h-10 bg-gradient-to-br from-pink-400 to-pink-500 rounded-lg flex items-center justify-center shadow-md">
                        <span class="text-white font-bold text-lg">✨</span>
                    </div>
                    <div>
                        <h1 class="font-bold text-lg text-gray-800">Glow Beauty</h1>
                        <p class="text-xs text-pink-400">Manajemen Produk Skincare</p>
                    </div>
                </div>

                <!-- MENU -->
                <div class="flex flex-wrap items-center gap-1">
                    <a href="{{ route('dashboard') }}"
                        class="flex items-center gap-2 px-4 py-2 rounded-lg {{ request()->routeIs('dashboard') ? 'bg-pink-100 text-pink-600' : 'text-gray-600 hover:bg-pink-50 hover:text-pink-600' }} transition">
                        <i class="fas fa-home"></i> Dashboard
                    </a>

                    @auth
                    @if(auth()->user()->role === 'penjual')
                        @php
                            $pendingPesananCount = \App\Models\Pesanan::where('status', 'pending')
                                ->whereHas('detail', function($q) {
                                    $q->whereHas('produk', function($q2) { $q2->where('user_id', auth()->id()); });
                                })->count();
                            $restokCount = \App\Models\Produk::where('user_id', auth()->id())->where('stok', '<', 5)->count();
                            $unreadChatCount = 0;
                            $chats = \App\Models\Chat::where('penjual_id', auth()->id())->get();
                            foreach ($chats as $chatItem) {
                                $unreadChatCount += \App\Models\ChatMessage::where('chat_id', $chatItem->id)
                                    ->where('sender_id', $chatItem->user_id)->where('is_read', false)->count();
                            }
                        @endphp
                        <a href="{{ route('kategori.index') }}"
                            class="flex items-center gap-2 px-4 py-2 rounded-lg {{ request()->routeIs('kategori.*') ? 'bg-pink-100 text-pink-600' : 'text-gray-600 hover:bg-pink-50 hover:text-pink-600' }} transition">
                            <i class="fas fa-tags"></i> Kategori
                        </a>
                        <a href="{{ route('produk.index') }}"
                            class="flex items-center gap-2 px-4 py-2 rounded-lg {{ request()->routeIs('produk.*') ? 'bg-pink-100 text-pink-600' : 'text-gray-600 hover:bg-pink-50 hover:text-pink-600' }} transition">
                            <i class="fas fa-store"></i> Produk
                        </a>
                        <a href="{{ route('pesanan.masuk.index') }}"
                            class="flex items-center gap-2 px-4 py-2 rounded-lg {{ request()->routeIs('pesanan.masuk.*') ? 'bg-pink-100 text-pink-600' : 'text-gray-600 hover:bg-pink-50 hover:text-pink-600' }} transition">
                            <i class="fas fa-truck"></i> Pesanan Masuk
                            @if($pendingPesananCount > 0)
                                <span class="bg-red-500 text-white text-xs font-bold px-1.5 py-0.5 rounded-full min-w-[18px] text-center">{{ $pendingPesananCount > 99 ? '99+' : $pendingPesananCount }}</span>
                            @endif
                        </a>
<a href="{{ route('restok.index') }}" class="flex items-center gap-2 px-4 py-2 rounded-lg {{ request()->routeIs('restok.*') ? 'bg-pink-500 text-white shadow' : 'text-gray-600 hover:bg-pink-50 hover:text-pink-600' }} transition">
    <i class="fas fa-boxes"></i>Restok
    @if($restokCount > 0)
        <span class="bg-red-500 text-white text-xs font-bold px-1.5 py-0.5 rounded-full min-w-[18px] text-center notification-badge animate-pulse">
            {{ $restokCount > 99 ? '99+' : $restokCount }}
        </span>
    @endif
</a>
<a href="{{ route('chat.index') }}" class="flex items-center gap-2 px-4 py-2 rounded-lg {{ request()->routeIs('chat.*') ? 'bg-pink-500 text-white shadow' : 'text-gray-600 hover:bg-pink-50 hover:text-pink-600' }} transition">
    <i class="fas fa-comments"></i>Chat
    @if($unreadChatCount > 0)
        <span class="bg-red-500 text-white text-xs font-bold px-1.5 py-0.5 rounded-full min-w-[18px] text-center notification-badge animate-pulse">
            {{ $unreadChatCount > 99 ? '99+' : $unreadChatCount }}
        </span>
    @endif
</a>
                        <a href="{{ route('user.index') }}"
                            class="flex items-center gap-2 px-4 py-2 rounded-lg {{ request()->routeIs('user.*') ? 'bg-pink-500 text-white shadow' : 'text-gray-600 hover:bg-pink-50 hover:text-pink-600' }} transition">
                            <i class="fas fa-users mr-2"></i>User
                        </a>
                    @endif

                    @if(auth()->user()->role === 'user')
                        @php
                            $jumlahKeranjang = \App\Models\Keranjang::where('user_id', auth()->id())->count();
                            $unreadChatCountUser = 0;
                            $chatsUser = \App\Models\Chat::where('user_id', auth()->id())->get();
                            foreach ($chatsUser as $chatItem) {
                                $unreadChatCountUser += \App\Models\ChatMessage::where('chat_id', $chatItem->id)
                                    ->where('sender_id', $chatItem->penjual_id)->where('is_read', false)->count();
                            }
                        @endphp
                        <a href="{{ route('produk.index') }}"
                            class="flex items-center gap-2 px-4 py-2 rounded-lg {{ request()->routeIs('produk.*') ? 'bg-pink-100 text-pink-600' : 'text-gray-600 hover:bg-pink-50 hover:text-pink-600' }} transition">
                            <i class="fas fa-store"></i> Produk
                        </a>
                        <a href="/keranjang"
                            class="relative flex items-center gap-2 px-4 py-2 rounded-lg {{ request()->is('keranjang*') ? 'bg-pink-100 text-pink-600' : 'text-gray-600 hover:bg-pink-50 hover:text-pink-600' }} transition">
                            <i class="fas fa-shopping-cart"></i> Keranjang
                            @if($jumlahKeranjang > 0)
                                <span class="absolute -top-1 -right-2 bg-red-500 text-white text-[10px] px-1.5 py-0.5 rounded-full leading-none">{{ $jumlahKeranjang > 99 ? '99+' : $jumlahKeranjang }}</span>
                            @endif
                        </a>
                        <a href="{{ route('pesanan.index') }}"
                            class="flex items-center gap-2 px-4 py-2 rounded-lg {{ request()->routeIs('pesanan.*') ? 'bg-pink-100 text-pink-600' : 'text-gray-600 hover:bg-pink-50 hover:text-pink-600' }} transition">
                            <i class="fas fa-clipboard-list"></i> Pesanan
                        </a>
                        <a href="{{ route('chat.index') }}"
                            class="flex items-center gap-2 px-4 py-2 rounded-lg {{ request()->routeIs('chat.*') ? 'bg-pink-100 text-pink-600' : 'text-gray-600 hover:bg-pink-50 hover:text-pink-600' }} transition">
                            <i class="fas fa-comments"></i> Chat
                            @if($unreadChatCountUser > 0)
                                <span class="bg-red-500 text-white text-xs font-bold px-1.5 py-0.5 rounded-full min-w-[18px] text-center">{{ $unreadChatCountUser > 99 ? '99+' : $unreadChatCountUser }}</span>
                            @endif
                        </a>
                    @endif
                    @endauth
                </div>

                <!-- USER MENU -->
                <div class="flex items-center gap-2 mt-3 md:mt-0">
                    <div class="relative" id="userDropdown">
                        <button onclick="toggleUserDropdown(event)" class="flex items-center gap-3 px-3 py-2 hover:bg-pink-50 rounded-xl transition-all duration-200 border border-transparent hover:border-pink-200 group">
                            <div class="w-9 h-9 bg-gradient-to-br from-pink-400 to-pink-500 rounded-full flex items-center justify-center text-white font-semibold shadow-md">
                                {{ substr(Auth::user()->name, 0, 1) }}
                            </div>
                            <div class="hidden md:block text-left">
                                <p class="text-sm font-medium text-gray-700 group-hover:text-pink-600">{{ Auth::user()->name }}</p>
                                <p class="text-xs text-gray-500">
                                    @if(Auth::user()->role == 'penjual') <i class="fas fa-store mr-1 text-pink-500"></i> Penjual
                                    @elseif(Auth::user()->role == 'admin') <i class="fas fa-shield-alt mr-1 text-purple-500"></i> Admin
                                    @else <i class="fas fa-user mr-1 text-pink-500"></i> Customer @endif
                                </p>
                            </div>
                            <i class="fas fa-chevron-down text-sm text-gray-400 group-hover:text-pink-600 transition-transform duration-200" id="dropdownIcon"></i>
                        </button>

                        <div id="dropdownMenu" class="hidden absolute right-0 mt-2 w-64 bg-white rounded-xl shadow-xl border border-gray-100 py-2 z-50">
                            <div class="px-4 py-4 border-b border-gray-100">
                                <div class="flex items-center gap-3">
                                    <div class="w-12 h-12 bg-gradient-to-br from-pink-400 to-pink-500 rounded-full flex items-center justify-center text-white font-bold text-xl shadow-md">
                                        {{ substr(Auth::user()->name, 0, 1) }}
                                    </div>
                                    <div>
                                        <p class="font-semibold text-gray-800">{{ Auth::user()->name }}</p>
                                        <p class="text-sm text-gray-500">{{ Auth::user()->email }}</p>
                                        <span class="inline-block mt-1 px-2 py-0.5 rounded-full text-xs font-medium @if(Auth::user()->role == 'penjual') bg-pink-100 text-pink-600 @elseif(Auth::user()->role == 'admin') bg-purple-100 text-purple-600 @else bg-pink-100 text-pink-600 @endif">
                                            @if(Auth::user()->role == 'penjual') <i class="fas fa-store mr-1"></i> Penjual
                                            @elseif(Auth::user()->role == 'admin') <i class="fas fa-shield-alt mr-1"></i> Admin
                                            @else <i class="fas fa-user mr-1"></i> Customer @endif
                                        </span>
                                    </div>
                                </div>
                            </div>

                            @if(Auth::user()->role == 'penjual')
                                @php $toko = App\Models\Toko::where('user_id', auth()->id())->first(); @endphp
                                @if($toko)
                                    <a href="{{ route('toko.edit', $toko->id) }}" class="flex items-center gap-3 px-4 py-3 hover:bg-pink-50 text-gray-700 transition group">
                                        <div class="w-8 h-8 bg-pink-100 rounded-lg flex items-center justify-center group-hover:bg-pink-200"><i class="fas fa-store text-pink-600"></i></div>
                                        <div><p class="font-medium">Pengaturan Toko</p><p class="text-xs text-gray-500">Kelola informasi toko Anda</p></div>
                                    </a>
                                @else
                                    <a href="{{ route('toko.create') }}" class="flex items-center gap-3 px-4 py-3 hover:bg-pink-50 text-gray-700 transition group">
                                        <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center group-hover:bg-green-200"><i class="fas fa-store-alt text-green-600"></i></div>
                                        <div><p class="font-medium">Buka Toko</p><p class="text-xs text-gray-500">Mulai berjualan sekarang</p></div>
                                    </a>
                                @endif
                            @else
                                <a href="{{ route('profile.edit') }}" class="flex items-center gap-3 px-4 py-3 hover:bg-pink-50 text-gray-700 transition group">
                                    <div class="w-8 h-8 bg-gray-100 rounded-lg flex items-center justify-center group-hover:bg-pink-100"><i class="fas fa-user text-gray-500 group-hover:text-pink-600"></i></div>
                                    <div><p class="font-medium">Profil Saya</p><p class="text-xs text-gray-500">Lihat dan edit profil</p></div>
                                </a>
                            @endif

                            <div class="border-t border-gray-100 mt-1 pt-1">
                                <form method="POST" action="{{ route('logout') }}">
                                    @csrf
                                    <button type="submit" class="w-full flex items-center gap-3 px-4 py-3 hover:bg-red-50 text-red-600 transition group">
                                        <div class="w-8 h-8 bg-red-50 rounded-lg flex items-center justify-center group-hover:bg-red-100"><i class="fas fa-sign-out-alt text-red-500"></i></div>
                                        <div class="text-left"><p class="font-medium">Keluar</p><p class="text-xs text-red-400">Akhiri sesi</p></div>
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- ========== KONTEN UTAMA ========== -->
    <div class="w-full px-4 sm:px-6 lg:px-8 py-6">

        <!-- HEADER -->
        <div class="relative mb-8 bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 rounded-2xl p-6 text-white shadow-lg overflow-hidden w-full">
            <div class="absolute top-0 right-0 w-64 h-64 opacity-10">
                <i class="fas fa-spa text-8xl absolute top-10 right-10"></i>
                <i class="fas fa-leaf text-7xl absolute bottom-0 right-32"></i>
                <i class="fas fa-fill-drip text-6xl absolute top-20 right-48"></i>
            </div>
            <div class="relative flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                <div>
                    <div class="flex items-center gap-3 mb-2">
                        <div class="w-12 h-12 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
                            <i class="fas fa-cubes text-white text-2xl"></i>
                        </div>
                        <h2 class="text-2xl font-bold flex items-center gap-2">Manajemen Produk Skincare</h2>
                    </div>
                    <p class="text-pink-100">Kelola semua produk skincare Anda dengan mudah dan efisien</p>
                    <div class="flex items-center gap-4 mt-3">
                        <span class="bg-white/20 backdrop-blur-sm px-3 py-1.5 rounded-lg text-sm flex items-center gap-2">
                            <i class="fas fa-boxes"></i> Total Produk: <span class="font-bold">{{ count($produks) }}</span>
                        </span>
                        <span class="bg-white/20 backdrop-blur-sm px-3 py-1.5 rounded-lg text-sm flex items-center gap-2">
                            <i class="fas fa-cubes"></i> Total Stok: <span class="font-bold">{{ $produks->sum('stok') }}</span>
                        </span>
                    </div>
                </div>
                @auth
                    @if(auth()->user()->role === 'penjual')
                    <div class="flex-shrink-0">
                        <a href="{{ route('produk.create') }}"
                            class="inline-flex items-center gap-2 border-2 border-white/30 text-white bg-white/20 backdrop-blur-sm px-6 py-2.5 rounded-xl font-semibold hover:bg-white/30 transition-all action-btn">
                            <i class="fas fa-plus-circle"></i> Tambah Produk Baru
                        </a>
                    </div>
                    @endif
                @endauth
            </div>
        </div>

        <!-- ===== FILTER & SEARCH ===== -->
        <div class="bg-white rounded-xl shadow-lg border border-pink-100 p-4 mb-6 w-full">
            <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">

                <!-- SEARCH -->
                <div class="flex items-center gap-3 flex-1">
                    <div class="relative flex-1">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fas fa-search text-gray-400"></i>
                        </div>
                        <input type="text" id="searchProduct"
                            placeholder="Cari Berdasarkan Nama Produk Skincare..."
                            class="pl-10 pr-4 py-2.5 border border-pink-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent text-sm w-full">
                    </div>
                </div>

                <div class="flex items-center gap-3 flex-wrap">

                    <!-- FILTER KATEGORI -->
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fas fa-tags text-gray-400"></i>
                        </div>
                        <select id="categoryFilter"
                                class="pl-10 pr-8 py-2.5 border border-pink-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500 text-sm appearance-none bg-white min-w-[180px]">
                            <option value="">Filter Kategori Skincare</option>
                            @foreach($kategoris as $kat)
                                <option value="{{ $kat->ID }}">{{ $kat->nama }}</option>
                            @endforeach
                        </select>
                        <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                            <i class="fas fa-chevron-down text-gray-400 text-xs"></i>
                        </div>
                    </div>

                    <!-- FILTER SORT -->
                    <div class="flex gap-2">
                        <button onclick="setSortFilter('latest')" id="btnLatest"
                            class="flex items-center gap-1.5 px-4 py-2.5 rounded-lg text-sm font-semibold transition border border-pink-200 bg-white text-gray-600 hover:border-pink-400 hover:text-pink-500">
                            <i class="fas fa-clock text-xs"></i> Terbaru
                        </button>
                        <button onclick="setSortFilter('terlaris')" id="btnTerlaris"
                            class="flex items-center gap-1.5 px-4 py-2.5 rounded-lg text-sm font-semibold transition border border-pink-200 bg-white text-gray-600 hover:border-pink-400 hover:text-pink-500">
                            <i class="fas fa-fire text-xs"></i> Terlaris
                        </button>
                    </div>

                    <!-- RESET -->
                    <button onclick="resetFilters()" title="Reset Filter"
                        class="p-2.5 bg-gray-100 text-gray-700 border border-pink-200 rounded-lg hover:bg-gray-200 transition">
                        <i class="fas fa-undo-alt"></i>
                    </button>
                </div>
            </div>

            <!-- FILTER AKTIF TAGS -->
            <div id="activeFilterTags" class="hidden flex-wrap items-center gap-2 mt-3 pt-3 border-t border-pink-100">
                <span class="text-xs text-gray-500 flex items-center gap-1">
                    <i class="fas fa-filter text-pink-400"></i> Filter aktif:
                </span>
            </div>
        </div>

        <!-- TOAST SUCCESS ALERT - POJOK KANAN BAWAH (HIJAU) -->
        @if(session('success'))
        <div id="toast-success"
            class="fixed bottom-6 right-6 z-50 flex items-center gap-3 bg-white border border-green-200 shadow-2xl rounded-2xl px-5 py-4 max-w-sm w-full"
            style="animation: slideInRight 0.4s ease;">
            <div class="w-10 h-10 bg-green-500 rounded-xl flex items-center justify-center flex-shrink-0">
                <i class="fas fa-check-circle text-white text-lg"></i>
            </div>
            <div class="flex-1 min-w-0">
                <p class="font-semibold text-gray-800 text-sm">Berhasil!</p>
                <p class="text-gray-500 text-xs mt-0.5 truncate">{{ session('success') }}</p>
            </div>
            <button onclick="closeToast()" class="text-gray-400 hover:text-gray-600 flex-shrink-0 ml-1">
                <i class="fas fa-times text-xs"></i>
            </button>
            <!-- Progress bar -->
            <div class="absolute bottom-0 left-0 h-1 bg-green-500 rounded-b-2xl" id="toastProgress"
                style="width: 100%; transition: width 5s linear;"></div>
        </div>

        <style>
        @keyframes slideInRight {
            from { opacity: 0; transform: translateX(100px); }
            to   { opacity: 1; transform: translateX(0); }
        }
        @keyframes slideOutRight {
            from { opacity: 1; transform: translateX(0); }
            to   { opacity: 0; transform: translateX(100px); }
        }
        </style>

        <script>
            // Jalankan progress bar
            setTimeout(() => {
                const bar = document.getElementById('toastProgress');
                if (bar) bar.style.width = '0%';
            }, 100);

            // Auto-hide setelah 5 detik
            setTimeout(() => closeToast(), 5100);

            function closeToast() {
                const toast = document.getElementById('toast-success');
                if (toast) {
                    toast.style.animation = 'slideOutRight 0.3s ease forwards';
                    setTimeout(() => toast.remove(), 300);
                }
            }
        </script>
        @endif

        <!-- GRID PRODUK -->
        @if($produks->isEmpty())
            <div class="bg-white rounded-xl shadow-lg border border-pink-100 p-12 text-center w-full">
                <div class="mx-auto w-24 h-24 bg-pink-50 rounded-full flex items-center justify-center mb-4">
                    <i class="fas fa-box-open text-pink-400 text-3xl"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-800 mb-2">Belum Ada Produk Skincare</h3>
                <p class="text-gray-500 mb-6">Mulai dengan menambahkan produk skincare pertama Anda</p>
                <a href="{{ route('produk.create') }}"
                   class="btn-primary text-white px-6 py-3 rounded-lg font-semibold inline-flex items-center gap-2 shadow-lg">
                    <i class="fas fa-plus"></i> Tambah Produk Pertama
                </a>
            </div>
        @else

        {{-- BANNER DISKON - hanya untuk user --}}
        @if(auth()->user()->role === 'user')
        <div class="relative bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 rounded-2xl p-5 mb-6 shadow-lg overflow-hidden">
            {{-- Background Decoration --}}
            <div class="absolute top-0 right-0 w-48 h-48 opacity-10">
                <i class="fas fa-tags text-8xl absolute top-5 right-5"></i>
                <i class="fas fa-percent text-7xl absolute bottom-0 right-20"></i>
                <i class="fas fa-gift text-6xl absolute top-20 right-40"></i>
            </div>
            
            <div class="relative flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                <div class="flex items-center gap-4 flex-1">
                    {{-- Icon Container --}}
                    <div class="w-14 h-14 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-center flex-shrink-0 shadow-inner">
                        <i class="fas fa-tags text-white text-2xl"></i>
                    </div>
                    
                    {{-- Content --}}
                    <div class="flex-1">
                        <div class="flex items-center gap-2 mb-1">
                            <span class="bg-white/30 backdrop-blur-sm px-2 py-0.5 rounded-full text-xs font-semibold text-white">
                                🎉 PROMO TERBATAS
                            </span>
                        </div>
                        <h3 class="text-white font-bold text-lg mb-1">Spesial Diskon 10%!</h3>
                        <p class="text-pink-100 text-sm">
                            Belanja minimal <span class="font-bold text-white">Rp 200.000</span> dan dapatkan potongan 
                            <span class="font-bold text-white">10%</span> untuk semua produk skincare favoritmu!
                        </p>
                        <div class="flex items-center gap-3 mt-2">
                            <div class="flex items-center gap-1">
                                <i class="fas fa-check-circle text-pink-200 text-xs"></i>
                                <span class="text-pink-200 text-xs">Berlaku untuk semua produk</span>
                            </div>
                            <div class="flex items-center gap-1">
                                <i class="fas fa-clock text-pink-200 text-xs"></i>
                                <span class="text-pink-200 text-xs">Terbatas!</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                {{-- Discount Badge --}}
                <div class="flex-shrink-0 bg-white/20 backdrop-blur-sm px-5 py-3 rounded-2xl text-center shadow-inner border border-white/30">
                    <span class="text-white font-bold text-2xl">10%</span>
                    <p class="text-pink-100 text-xs font-medium">DISKON</p>
                </div>
            </div>
        </div>
        @endif

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6 w-full" id="productGrid">
                @foreach ($produks as $p)
                @php
                    $firstFoto = null;
                    if ($p->foto) {
                        foreach(explode('|', $p->foto) as $item) {
                            $item = trim($item);
                            if (str_contains($item, ':')) {
                                [, $path] = explode(':', $item, 2);
                                $path = trim($path);
                                if ($path) { $firstFoto = $path; break; }
                            } elseif ($item) {
                                $firstFoto = $item; break;
                            }
                        }
                    }
                    $stokColor = $p->stok > 10 ? 'bg-pink-500' : ($p->stok > 0 ? 'bg-amber-400' : 'bg-red-500');
                    $terjualP = \App\Models\PesananDetail::where('produk_id', $p->id)
                        ->whereHas('pesanan', function($q) {
                            $q->whereIn('status', ['selesai','dibayar','diproses','dikirim']);
                        })->sum('qty');
                    $ulasanP = \App\Models\Ulasan::where('produk_id', $p->id)->get();
                    $avgRatingP = $ulasanP->count() > 0 ? round($ulasanP->avg('bintang'), 1) : 0;
                    $jumlahUlasanP = $ulasanP->count();
                    $tokoP = \App\Models\Toko::where('user_id', $p->user_id)->first();
                    $lokasiP = $tokoP && $tokoP->city ? $tokoP->city->name
                        : ($tokoP && $tokoP->district ? $tokoP->district->name : 'Lokasi tidak tersedia');
                    $namaKatP = $p->kategori->nama ?? $p->kategori->nama_kategori ?? 'Skincare';
                    $warnaArr = $p->warna ? array_filter(explode(',', $p->warna)) : [];
                    $ukuranArr = $p->ukuran ? array_filter(explode(',', $p->ukuran)) : [];
                    $isNew = $p->created_at >= now()->subDays(7) ? '1' : '0';
                @endphp

                {{-- PENTING: data-isnew harus dalam satu tag div, tidak boleh ada baris terpisah --}}
                <div class="product-card bg-white rounded-2xl shadow-sm border border-pink-100 overflow-hidden flex flex-col"
                     data-name="{{ strtolower($p->nama_produk) }}"
                     data-stock="{{ $p->stok }}"
                     data-kategori="{{ $p->kategori_id }}"
                     data-terjual="{{ $terjualP }}"
                     data-index="{{ $loop->index }}"
                     data-isnew="{{ $isNew }}">

                    {{-- IMAGE --}}
                    <div class="relative bg-gradient-to-br from-pink-50 to-white overflow-hidden" style="height:320px;">
                        @if($firstFoto)
                            <img src="{{ asset('storage/'.$firstFoto) }}"
                                class="w-full h-full object-contain p-3 transition-transform duration-500"
                                alt="{{ $p->nama_produk }}">
                        @else
                            <div class="w-full h-full flex flex-col items-center justify-center text-gray-200">
                                <i class="fas fa-fill-drip text-6xl mb-2"></i>
                                <span class="text-xs text-gray-300">Tidak ada gambar</span>
                            </div>
                        @endif

                        {{-- Badge Kategori kiri atas --}}
                        <span class="absolute top-2 left-2 bg-pink-500 text-white text-[10px] font-semibold px-2.5 py-1 rounded-full shadow-sm">
                            {{ $namaKatP }}
                        </span>

                        {{-- Badge Stok kanan atas --}}
                        <span class="absolute top-2 right-2 {{ $stokColor }} text-white text-[10px] font-semibold px-2.5 py-1 rounded-full shadow-sm">
                            {{ $p->stok > 0 ? 'Stok ' . $p->stok : 'Habis' }}
                        </span>

                        {{-- Badge BEST SELLER --}}
                        <div class="badge-bestseller absolute bottom-2 left-2 flex items-center gap-1 bg-[#ffc107] text-[#6d4c41] text-[10px] font-bold px-2.5 py-1 rounded-full shadow-md"
                            style="display:none;">
                            <i class="fas fa-crown text-[9px]"></i> BEST SELLER
                        </div>

                        {{-- Badge NEW --}}
                        <div class="badge-new absolute bottom-2 left-2 flex items-center gap-1 bg-[#f472b6] text-white text-[10px] font-bold px-2.5 py-1 rounded-full shadow-md"
                            style="display:none;">
                            <i class="fas fa-seedling text-[9px]"></i> NEW
                        </div>

                        {{-- Overlay hover --}}
                        <div class="absolute inset-0 bg-black/0 hover:bg-black/20 transition-all duration-300 flex items-center justify-center opacity-0 hover:opacity-100">
                            <a href="{{ route('produk.show', $p->id) }}"
                               class="w-11 h-11 bg-white rounded-full flex items-center justify-center text-pink-500 hover:bg-pink-500 hover:text-white transition shadow-lg"
                               title="Lihat Detail">
                                <i class="fas fa-eye"></i>
                            </a>
                        </div>
                    </div>

                    {{-- BODY --}}
                    <div class="p-4 flex flex-col flex-1">

                        {{-- Nama --}}
                        <h3 class="font-semibold text-gray-800 text-sm line-clamp-2 mb-2 leading-snug" style="min-height:40px;">
                            {{ $p->nama_produk }}
                        </h3>

                        {{-- Warna & Ukuran --}}
                        <div class="flex items-center gap-2 mb-3">
                            @if(count($warnaArr) > 0)
                                <span class="flex items-center gap-1 text-[11px] text-gray-500 bg-pink-50 px-2 py-0.5 rounded-full border border-pink-100">
                                    <i class="fas fa-palette text-purple-400 text-[9px]"></i>
                                    {{ count($warnaArr) }} varian
                                </span>
                            @endif
                            @if(count($ukuranArr) > 0)
                                <span class="flex items-center gap-1 text-[11px] text-gray-500 bg-pink-50 px-2 py-0.5 rounded-full border border-pink-100">
                                    <i class="fas fa-ruler text-blue-400 text-[9px]"></i>
                                    {{ count($ukuranArr) }} ukuran
                                </span>
                            @endif
                        </div>

                        {{-- Harga & Terjual --}}
                        <div class="flex items-center justify-between mb-3">
                            <span class="text-lg font-bold text-pink-500">
                                Rp {{ number_format($p->harga, 0, ',', '.') }}
                            </span>
                            @if($terjualP > 0)
                                <span class="flex items-center gap-1 text-[11px] text-pink-500 bg-pink-50 px-2 py-0.5 rounded-full">
                                    <i class="fas fa-fire text-[9px]"></i>
                                    {{ number_format($terjualP) }} terjual
                                </span>
                            @else
                                <span class="flex items-center gap-1 text-[11px] text-gray-400 bg-gray-50 px-2 py-0.5 rounded-full">
                                    <i class="fas fa-fire text-[9px]"></i>
                                    0 terjual
                                </span>
                            @endif
                        </div>
                        {{-- Divider --}}
                        <div class="border-t border-pink-100 mb-3"></div>

                        {{-- Rating & Lokasi --}}
                        <div class="flex items-center justify-between mb-3">
                            <div class="flex items-center gap-0.5">
                                @if($avgRatingP > 0)
                                    @for($star = 1; $star <= 5; $star++)
                                        @if($star <= floor($avgRatingP))
                                            <i class="fas fa-star text-yellow-400 text-[11px]"></i>
                                        @elseif($star - $avgRatingP < 1)
                                            <i class="fas fa-star-half-alt text-yellow-400 text-[11px]"></i>
                                        @else
                                            <i class="far fa-star text-gray-200 text-[11px]"></i>
                                        @endif
                                    @endfor
                                    <span class="text-[11px] font-semibold text-gray-600 ml-1">{{ $avgRatingP }}</span>
                                    <span class="text-[11px] text-gray-400">({{ $jumlahUlasanP }})</span>
                                @else
                                    @for($star = 1; $star <= 5; $star++)
                                        <i class="far fa-star text-gray-200 text-[11px]"></i>
                                    @endfor
                                    <span class="text-[11px] text-gray-400 ml-1">Belum ada</span>
                                @endif
                            </div>
                            <div class="flex items-center gap-1 text-[11px] text-gray-400">
                                <i class="fas fa-map-marker-alt text-pink-300 text-[10px]"></i>
                                <span class="truncate max-w-[80px]">{{ $lokasiP }}</span>
                            </div>
                        </div>

                        {{-- Hint --}}
                        <p class="text-[10px] text-gray-300 text-center italic mb-3">
                            Klik untuk lihat detail & beli produk ini
                        </p>

                        {{-- Action Buttons --}}
                        <div class="mt-auto">
                            @auth
                            @if(auth()->user()->role === 'penjual')
                                <div class="flex gap-2">
                                    <a href="{{ route('produk.edit', $p->id) }}"
                                       class="flex-1 text-center text-xs font-semibold border border-pink-300 text-gray-600 bg-white px-3 py-2 rounded-xl hover:border-pink-400 hover:text-pink-500 transition flex items-center justify-center gap-1">
                                        <i class="fas fa-edit"></i> Edit
                                    </a>
                                    <form action="{{ route('produk.destroy', $p->id) }}" method="POST" class="flex-1"
                                          onsubmit="return confirm('Yakin ingin menghapus produk {{ addslashes($p->nama_produk) }}?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit"
                                                class="w-full text-xs font-semibold bg-pink-500 hover:bg-pink-600 text-white px-3 py-2 rounded-xl transition flex items-center justify-center gap-1">
                                            <i class="fas fa-trash"></i> Hapus
                                        </button>
                                    </form>
                                </div>
                            @else
                                <div class="flex gap-2">
                                    <a href="{{ route('produk.show', $p->id) }}"
                                       class="flex-1 flex items-center justify-center gap-1.5 py-2.5 bg-white hover:bg-pink-50 border border-pink-400 text-pink-500 rounded-xl text-xs font-semibold transition shadow-sm">
                                        <i class="fas fa-shopping-cart text-[11px]"></i> Keranjang
                                    </a>
                                    <a href="{{ route('produk.show', $p->id) }}"
                                       class="flex-1 flex items-center justify-center gap-1.5 py-2.5 bg-pink-500 hover:bg-pink-600 text-white rounded-xl text-xs font-semibold transition shadow-sm">
                                        <i class="fas fa-bolt text-[11px]"></i> Beli
                                    </a>
                                </div>
                            @endif
                            @endauth
                        </div>

                    </div>
                </div>
                @endforeach
            </div>

            <!-- NO RESULTS -->
            <div id="noResults" class="hidden bg-white rounded-xl shadow-lg border border-pink-100 p-8 text-center mt-6 w-full">
                <div class="mx-auto w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-3">
                    <i class="fas fa-search text-gray-400 text-xl"></i>
                </div>
                <h4 class="font-bold text-gray-800 mb-1">Produk Tidak Ditemukan</h4>
                <p class="text-gray-500 text-sm">Coba gunakan kata kunci pencarian yang berbeda</p>
            </div>

            @if(method_exists($produks, 'hasPages') && $produks->hasPages())
                <div class="mt-8 flex justify-center w-full">
                    {{ $produks->links() }}
                </div>
            @endif
        @endif
    </div>

<script>
    // ====================== FILTER PRODUK ======================
    // Global Config
    const MIN_BESTSELLER = 1; // Produk dianggap Best Seller jika terjual >= 1
    let currentSort = null;
    const activeClass = 'flex items-center gap-1.5 px-4 py-2.5 rounded-lg text-sm font-semibold transition border bg-pink-500 text-white border-pink-500';
    const inactiveClass = 'flex items-center gap-1.5 px-4 py-2.5 rounded-lg text-sm font-semibold transition border bg-white text-gray-600 border-pink-200 hover:border-pink-400 hover:text-pink-500';

    // 1. Logika Tampilan Badge (New & Best Seller)
    function updateBadges() {
        const grid = document.getElementById('productGrid');
        if (!grid) return;
        
        grid.querySelectorAll('.product-card').forEach(card => {
            const terjual = parseInt(card.getAttribute('data-terjual') || '0');
            const isNewAttr = card.getAttribute('data-isnew') === '1';
            
            const badgeBestSeller = card.querySelector('.badge-bestseller');
            const badgeNew = card.querySelector('.badge-new');

            // Logika Badge:
            // Best Seller jika terjual >= 1
            const isBestSeller = terjual >= MIN_BESTSELLER;
            // NEW jika ditandai baru DAN belum jadi Best Seller (agar tidak double badge)
            const isNewProduct = isNewAttr && !isBestSeller;

            if (badgeBestSeller) badgeBestSeller.style.display = isBestSeller ? 'flex' : 'none';
            if (badgeNew) badgeNew.style.display = isNewProduct ? 'flex' : 'none';
        });
    }

    // 2. Fungsi Utama Filter & Saring Produk
    function sortAndFilter() {
        const searchTerm = document.getElementById('searchProduct')?.value.toLowerCase().trim() || '';
        const categoryId = document.getElementById('categoryFilter')?.value || '';
        const grid = document.getElementById('productGrid');
        const noResults = document.getElementById('noResults');
        
        if (!grid) return;

        const cards = Array.from(grid.querySelectorAll('.product-card'));

        let visibleCount = 0;
        cards.forEach(card => {
            const nama = card.getAttribute('data-name') || '';
            const kategori = card.getAttribute('data-kategori') || '';
            const terjual = parseInt(card.getAttribute('data-terjual') || '0');

            // Kriteria 1: Pencarian & Kategori
            const matchSearch = !searchTerm || nama.includes(searchTerm);
            const matchCategory = !categoryId || kategori == categoryId;

            // Kriteria 2: Logika Tombol Filter (Terbaru & Terlaris)
            let matchStatus = true;
            if (currentSort === 'latest') {
                // Klik "Terbaru" -> Munculkan yang BELUM TERJUAL (0 terjual)
                matchStatus = (terjual === 0);
            } else if (currentSort === 'terlaris') {
                // Klik "Terlaris" -> Munculkan yang ada logo BEST SELLER (terjual >= 1)
                matchStatus = (terjual >= MIN_BESTSELLER);
            }

            const isVisible = matchSearch && matchCategory && matchStatus;
            card.style.display = isVisible ? 'flex' : 'none';
            if (isVisible) visibleCount++;
        });

        // Tampilkan pesan jika hasil kosong
        if (noResults) noResults.classList.toggle('hidden', visibleCount > 0);
        
        updateBadges();
    }

    // 3. UI Helpers (Handler Klik Tombol)
    function setSortFilter(sort) {
        // Toggle Filter: Jika klik tombol yang sama, reset ke semua produk
        currentSort = (currentSort === sort) ? null : sort;

        // Update visual tombol (Pink jika aktif, Putih jika tidak)
        const btnLatest = document.getElementById('btnLatest');
        const btnTerlaris = document.getElementById('btnTerlaris');
        
        if(btnLatest) btnLatest.className = currentSort === 'latest' ? activeClass : inactiveClass;
        if(btnTerlaris) btnTerlaris.className = currentSort === 'terlaris' ? activeClass : inactiveClass;

        sortAndFilter();
    }

    // Fungsi Reset (Tombol Refresh)
    function resetFilters() {
        if(document.getElementById('searchProduct')) document.getElementById('searchProduct').value = '';
        if(document.getElementById('categoryFilter')) document.getElementById('categoryFilter').value = '';
        currentSort = null;
        
        const btnLatest = document.getElementById('btnLatest');
        const btnTerlaris = document.getElementById('btnTerlaris');
        if(btnLatest) btnLatest.className = inactiveClass;
        if(btnTerlaris) btnTerlaris.className = inactiveClass;
        
        sortAndFilter();
    }

    // ====================== DROPDOWN MENU ======================
    // Toggle User Dropdown
    function toggleUserDropdown(event) {
        if (event) {
            event.preventDefault();
            event.stopPropagation();
        }
        
        const dropdown = document.getElementById('dropdownMenu');
        const icon = document.getElementById('dropdownIcon');
        
        if (!dropdown) return;
        
        if (dropdown.classList.contains('hidden')) {
            // Tutup dropdown notif jika terbuka
            const notifDropdown = document.getElementById('notifDropdown');
            if (notifDropdown && !notifDropdown.classList.contains('hidden')) {
                notifDropdown.classList.add('hidden');
            }
            
            dropdown.classList.remove('hidden');
            if (icon) icon.style.transform = 'rotate(180deg)';
        } else {
            dropdown.classList.add('hidden');
            if (icon) icon.style.transform = 'rotate(0deg)';
        }
    }

    // Toggle Notifikasi
    function toggleNotif(event) {
        if (event) {
            event.preventDefault();
            event.stopPropagation();
        }
        
        const dropdown = document.getElementById('notifDropdown');
        if (!dropdown) return;
        
        const isHidden = dropdown.classList.contains('hidden');
        
        // Tutup dropdown user jika terbuka
        const userDropdownMenu = document.getElementById('dropdownMenu');
        const userIcon = document.getElementById('dropdownIcon');
        if (userDropdownMenu && !userDropdownMenu.classList.contains('hidden')) {
            userDropdownMenu.classList.add('hidden');
            if (userIcon) userIcon.style.transform = 'rotate(0deg)';
        }
        
        dropdown.classList.toggle('hidden');
        if (isHidden) loadNotifikasi();
    }

    // Fungsi untuk menutup dropdown saat klik di luar
    document.addEventListener('click', function(event) {
        const userDropdown = document.getElementById('userDropdown');
        const notifWrapper = document.getElementById('notifWrapper');
        const dropdownMenu = document.getElementById('dropdownMenu');
        const notifDropdown = document.getElementById('notifDropdown');
        const dropdownIcon = document.getElementById('dropdownIcon');
        
        // Tutup user dropdown jika klik di luar
        if (userDropdown && !userDropdown.contains(event.target)) {
            if (dropdownMenu && !dropdownMenu.classList.contains('hidden')) {
                dropdownMenu.classList.add('hidden');
                if (dropdownIcon) dropdownIcon.style.transform = 'rotate(0deg)';
            }
        }
        
        // Tutup notif dropdown jika klik di luar
        if (notifWrapper && !notifWrapper.contains(event.target)) {
            if (notifDropdown && !notifDropdown.classList.contains('hidden')) {
                notifDropdown.classList.add('hidden');
            }
        }
    });

    // Mencegah event bubbling pada dropdown
    document.getElementById('dropdownMenu')?.addEventListener('click', function(event) {
        event.stopPropagation();
    });

    document.getElementById('notifDropdown')?.addEventListener('click', function(event) {
        event.stopPropagation();
    });

    // ====================== NOTIFIKASI ======================
    // Load notifikasi (langsung dijalankan saat halaman dimuat)
    async function loadNotifikasi() {
        try {
            const res = await fetch('{{ route("restok.list") }}');
            const data = await res.json();
            const list = document.getElementById('notifList');
            const badge = document.getElementById('notifBadge');
            if (!list || !badge) return;

            console.log('Data notifikasi:', data); // Debug

            if (data.length === 0) {
                list.innerHTML = `
                    <div class="px-4 py-8 text-center">
                        <div class="w-12 h-12 bg-green-50 rounded-full flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-check text-green-500"></i>
                        </div>
                        <p class="text-gray-500 text-sm">Stok semua produk aman</p>
                    </div>`;
                badge.style.display = 'none';
            } else {
                badge.style.display = 'flex'; 
                badge.textContent = data.length > 99 ? '99+' : data.length;
                list.innerHTML = data.map(p => `
                    <a href="{{ route('restok.index') }}" class="flex items-center gap-3 px-4 py-4 hover:bg-pink-50 border-b border-gray-50 transition">
                        <div class="w-10 h-10 ${p.stok === 0 ? 'bg-red-100 text-red-600' : 'bg-amber-100 text-amber-600'} rounded-full flex items-center justify-center flex-shrink-0">
                            <i class="fas ${p.stok === 0 ? 'fa-times-circle' : 'fa-exclamation-triangle'} text-sm"></i>
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-bold text-gray-800 truncate">${escapeHtml(p.nama_produk)}</p>
                            <p class="text-xs ${p.stok === 0 ? 'text-red-500 font-bold' : 'text-amber-600'}">
                                ${p.stok === 0 ? '⚠️ Stok Habis!' : '📦 Tersisa ' + p.stok + ' unit'}
                            </p>
                        </div>
                    </a>`).join('');
            }
        } catch(e) {
            console.error("Gagal memuat notifikasi:", e);
            const list = document.getElementById('notifList');
            if (list) {
                list.innerHTML = `
                    <div class="px-4 py-8 text-center">
                        <i class="fas fa-exclamation-circle text-red-400 text-2xl mb-2 block"></i>
                        <p class="text-gray-500 text-sm">Gagal memuat notifikasi</p>
                    </div>`;
            }
        }
    }
    
    // Fungsi untuk menghindari XSS
    function escapeHtml(text) {
        if (!text) return '';
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    // ====================== INISIALISASI ======================
    // Jalankan saat halaman siap
    document.addEventListener('DOMContentLoaded', function() {
        // Filter produk event listeners
        const searchInput = document.getElementById('searchProduct');
        const categoryFilter = document.getElementById('categoryFilter');
        
        if (searchInput) searchInput.addEventListener('input', sortAndFilter);
        if (categoryFilter) categoryFilter.addEventListener('change', sortAndFilter);
        
        sortAndFilter(); // Inisialisasi awal filter
        
        // Inisialisasi data untuk card
        const cards = document.querySelectorAll('.product-card');
        cards.forEach((card, index) => {
            if (!card.getAttribute('data-index')) {
                card.setAttribute('data-index', index);
            }
        });
        
        // ===== LANGSUNG LOAD NOTIFIKASI SAAT HALAMAN DIMUAT =====
        loadNotifikasi();
        
        // Optional: Refresh notifikasi setiap 30 detik
        setInterval(loadNotifikasi, 30000);
        
        // Debug - lihat berapa banyak produk dengan badge
        setTimeout(() => {
            const newProducts = document.querySelectorAll('.badge-new');
            const bestSeller = document.querySelectorAll('.badge-bestseller');
            console.log('Produk dengan badge NEW:', newProducts.length);
            console.log('Produk dengan badge BEST SELLER:', bestSeller.length);
        }, 500);
    });
    
    // Export fungsi ke global scope
    window.setSortFilter = setSortFilter;
    window.resetFilters = resetFilters;
    window.toggleUserDropdown = toggleUserDropdown;
    window.toggleNotif = toggleNotif;
</script>
</body>
</html>