<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Restok Produk - Raja Futsal</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&display=swap" rel="stylesheet">
    <style>
        * { font-family: 'Inter', sans-serif; }
        body { margin: 0; padding: 0; width: 100%; overflow-x: hidden; }

        .nav-link {
            transition: all 0.2s ease;
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }
        .nav-link:hover { background-color: #fff7ed; color: #ea580c; }
        .active-nav { background-color: #fff7ed; color: #ea580c; font-weight: 600; }

        .btn-primary {
            background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
            transition: all 0.3s ease;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
        }

        .card-hover {
            transition: all 0.3s ease;
            border: 1px solid #f3f4f6;
        }
        .card-hover:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
            border-color: #fed7aa;
        }

        .stok-bar {
            transition: width 0.8s ease;
        }

        /* Notifikasi dropdown */
        #notifDropdown {
            animation: fadeInDown 0.2s ease;
        }
        @keyframes fadeInDown {
            from { opacity: 0; transform: translateY(-10px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* Modal */
        #modalRestok {
            backdrop-filter: blur(4px);
        }
        .modal-content {
            animation: slideUp 0.3s ease;
        }
        @keyframes slideUp {
            from { opacity: 0; transform: translateY(40px) scale(0.97); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }

        /* Shake animation for bell */
        @keyframes shake {
            0%, 100% { transform: rotate(0); }
            25% { transform: rotate(15deg); }
            75% { transform: rotate(-15deg); }
        }
        .bell-shake { animation: shake 0.4s ease-in-out; }

        /* Dropdown user */
        .dropdown-enter { opacity: 0; transform: scale(0.95); }
        .dropdown-enter-active { opacity: 1; transform: scale(1); transition: opacity 200ms, transform 200ms; }

        /* Animasi peringatan stok habis */
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }
        .stok-habis-warning {
            animation: pulse 1s ease-in-out infinite;
        }
        
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(-100px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        .warning-slide {
            animation: slideIn 0.5s ease-out;
        }
@keyframes bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.animate-bounce-custom {
    animation: bounce 0.5s ease-in-out infinite;
}
    </style>
</head>

<body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen"
    data-restok-list-url="{{ route('restok.list') }}"
    data-restok-index-url="{{ route('restok.index') }}"
    data-produk-data='@json($semuaProduk->keyBy("id")->map(fn($p) => ["nama" => $p->nama_produk, "stok" => $p->stok]))'>

    <!-- ===== NAVBAR ===== -->
    <nav class="bg-white/80 backdrop-blur-md border-b shadow-sm sticky top-0 z-50 w-full">
        <div class="px-4 sm:px-6 lg:px-8 py-3">
            <div class="relative 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-orange-500 to-orange-600 rounded-lg flex items-center justify-center shadow-md">
                        <span class="text-white font-bold text-lg">R</span>
                    </div>
                    <div>
                        <h1 class="font-bold text-lg text-gray-800">Raja Futsal</h1>
                        <p class="text-xs text-gray-500">Manajemen Restok</p>
                    </div>
                </div>

                <!-- MENU -->
                <div class="hidden md:flex flex-wrap items-center gap-3 absolute left-1/2 transform -translate-x-1/2">
                        @php
                        $uid = auth()->user()->getAttribute('ID');

                        // Badge Pesanan Masuk (pending + dibayar)
                        $pendingPesananCount = \App\Models\Pesanan::whereIn('status', ['pending', 'dibayar'])
                            ->whereHas('detail', function($q) use ($uid) {
                                $q->whereHas('produk', function($q2) use ($uid) {
                                    $q2->where('user_id', $uid);
                                });
                            })->count();
                    @endphp

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

                    <a href="{{ route('kategori.index') }}"
                        class="flex items-center gap-2 px-4 py-2 rounded-lg {{ request()->routeIs('kategori.*') ? 'bg-orange-500 text-white shadow' : 'text-gray-600 hover:bg-orange-50 hover:text-orange-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-orange-100 text-orange-600' : 'text-gray-600 hover:bg-orange-50 hover:text-orange-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.*') ? 'bg-orange-100 text-orange-600' : 'text-gray-600 hover:bg-orange-50 hover:text-orange-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 notification-badge">
                                {{ $pendingPesananCount > 99 ? '99+' : $pendingPesananCount }}
                            </span>
                        @endif
                    </a>


                    <a href="{{ route('restok.index') }}"
                        class="flex items-center gap-2 px-4 py-2 rounded-xl font-medium transition
                        {{ request()->routeIs('restok.*') ? 'bg-orange-50 text-orange-600 border border-orange-100' : 'text-gray-600 hover:bg-orange-50 hover:text-orange-600' }}">
                        <i class="fas fa-boxes"></i> Restok
                    </a>
                    

                    <a href="{{ route('user.index') }}"
                        class="flex items-center gap-2 px-4 py-2 rounded-lg {{ request()->routeIs('user.*') ? 'bg-orange-500 text-white shadow' : 'text-gray-600 hover:bg-orange-50 hover:text-orange-600' }} transition">
                        <i class="fas fa-users"></i> User
                    </a>
                </div>

                <!-- USER MENU -->
                <div class="flex items-center gap-4 mt-3 md:mt-0">
                    <!-- NOTIF ICONS FOR SELLER -->
                    <!-- Restok Icon -->
                    <a href="{{ route('restok.index') }}" class="relative p-2 text-gray-500 hover:text-orange-600 transition-all duration-200 focus:outline-none bg-gray-50 hover:bg-orange-50 rounded-xl border border-transparent hover:border-orange-100 flex items-center justify-center" title="Restok">
                        <i class="fas fa-boxes text-xl"></i>
                        @if(isset($sellerRestokCount) && $sellerRestokCount > 0)
                            <span class="absolute top-1.5 right-1.5 flex h-4 w-4">
                                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
                                <span class="relative inline-flex rounded-full h-4 w-4 bg-red-500 text-white text-[10px] items-center justify-center font-bold">
                                    {{ $sellerRestokCount > 99 ? '99+' : $sellerRestokCount }}
                                </span>
                            </span>
                        @endif
                    </a>

                    <!-- Chat Icon -->
                    <a href="{{ route('chat.index') }}" class="relative p-2 text-gray-500 hover:text-orange-600 transition-all duration-200 focus:outline-none bg-gray-50 hover:bg-orange-50 rounded-xl border border-transparent hover:border-orange-100 flex items-center justify-center" title="Chat">
                        <i class="fas fa-comments text-xl"></i>
                        @if(isset($sellerUnreadChatCount) && $sellerUnreadChatCount > 0)
                            <span class="absolute top-1.5 right-1.5 flex h-4 w-4">
                                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
                                <span class="relative inline-flex rounded-full h-4 w-4 bg-red-500 text-white text-[10px] items-center justify-center font-bold">
                                    {{ $sellerUnreadChatCount > 99 ? '99+' : $sellerUnreadChatCount }}
                                </span>
                            </span>
                        @endif
                    </a>

                    <!-- Ulasan Icon -->
                    <a href="{{ route('ulasan.penjual.index') }}" class="relative p-2 text-gray-500 hover:text-orange-600 transition-all duration-200 focus:outline-none bg-gray-50 hover:bg-orange-50 rounded-xl border border-transparent hover:border-orange-100 flex items-center justify-center" title="Ulasan">
                        <i class="fas fa-star text-xl"></i>
                        @if(isset($sellerUnreadUlasanCount) && $sellerUnreadUlasanCount > 0)
                            <span class="absolute top-1.5 right-1.5 flex h-4 w-4">
                                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
                                <span class="relative inline-flex rounded-full h-4 w-4 bg-red-500 text-white text-[10px] items-center justify-center font-bold">
                                    {{ $sellerUnreadUlasanCount > 99 ? '99+' : $sellerUnreadUlasanCount }}
                                </span>
                            </span>
                        @endif
                    </a>

                    <!-- USER DROPDOWN -->
                    <div class="relative" id="userDropdown">
                        <button onclick="toggleUserDropdown(event)"
                            class="flex items-center gap-3 px-3 py-2 hover:bg-orange-50 rounded-xl transition-all duration-200 border border-transparent hover:border-orange-200 group">
                            <div class="w-9 h-9 bg-gradient-to-br from-orange-500 to-orange-600 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-orange-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-orange-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-blue-500"></i> Customer @endif
                                </p>
                            </div>
                            <i class="fas fa-chevron-down text-sm text-gray-400 group-hover:text-orange-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-orange-500 to-orange-600 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-orange-100 text-orange-600
                                            @elseif(Auth::user()->role == 'admin') bg-purple-100 text-purple-600
                                            @else bg-blue-100 text-blue-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>

                            <a href="{{ route('profile.edit') }}" class="flex items-center gap-3 px-4 py-3 hover:bg-orange-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-orange-100">
                                    <i class="fas fa-user text-gray-500 group-hover:text-orange-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>

                            @if(Auth::user()->role == 'admin')
                                <a href="{{ route('ulasan.penjual.index') }}" class="flex items-center gap-3 px-4 py-3 hover:bg-orange-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-orange-100">
                                        <i class="fas fa-star text-gray-500 group-hover:text-orange-600"></i>
                                    </div>
                                    <div>
                                        <p class="font-medium">Ulasan</p>
                                        <p class="text-xs text-gray-500">Lihat ulasan produk</p>
                                    </div>
                                </a>
                                <a href="{{ route('user.index') }}" class="flex items-center gap-3 px-4 py-3 hover:bg-orange-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-orange-100">
                                        <i class="fas fa-users text-gray-500 group-hover:text-orange-600"></i>
                                    </div>
                                    <div>
                                        <p class="font-medium">Kelola User</p>
                                        <p class="text-xs text-gray-500">Atur pengguna</p>
                                    </div>
                                </a>
                                <a href="{{ route('kategori.index') }}" class="flex items-center gap-3 px-4 py-3 hover:bg-orange-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-orange-100">
                                        <i class="fas fa-tags text-gray-500 group-hover:text-orange-600"></i>
                                    </div>
                                    <div>
                                        <p class="font-medium">Kelola Kategori</p>
                                        <p class="text-xs text-gray-500">Atur kategori produk</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-orange-500 via-orange-600 to-orange-700 rounded-2xl p-6 text-white shadow-lg overflow-hidden">
            <div class="absolute top-0 right-0 opacity-10">
                <i class="fas fa-boxes text-9xl absolute top-4 right-8"></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 rounded-xl flex items-center justify-center">
                            <i class="fas fa-boxes text-white text-2xl"></i>
                        </div>
                        <h2 class="text-2xl font-bold">Manajemen Restok</h2>
                    </div>
                    <p class="text-orange-100">Pantau dan tambah stok produk Anda</p>
                    <div class="flex items-center gap-4 mt-3">
                        <span class="bg-white/20 px-3 py-1.5 rounded-lg text-sm flex items-center gap-2">
                            <i class="fas fa-exclamation-triangle"></i>
                            Hampir Habis: <span class="font-bold ml-1">{{ $produkHampirHabis->count() }}</span>
                        </span>
                        <span class="bg-white/20 px-3 py-1.5 rounded-lg text-sm flex items-center gap-2">
                            <i class="fas fa-box"></i>
                            Total Produk: <span class="font-bold ml-1">{{ $semuaProduk->count() }}</span>
                        </span>
                    </div>
                </div>
                    <button onclick="openModal(null)"
                        class="inline-flex items-center gap-2 border-2 border-gray-300 text-gray-600 bg-white px-6 py-2.5 rounded-xl font-semibold hover:border-gray-400 transition-all action-btn">
                        <i class="fas fa-plus-circle"></i> Tambah Stok Produk
                    </button>
            </div>
        </div>

        {{-- ALERT PERINGATAN STOK HABIS --}}
        @php
            $produkStokHabis = $semuaProduk->filter(function($p) {
                return $p->stok == 0;
            });
        @endphp
        
        @if($produkStokHabis->count() > 0)
        <div class="mb-6 warning-slide">
            <div class="bg-red-50 border-l-4 border-red-500 rounded-xl p-5 shadow-md">
                <div class="flex items-start gap-4">
                    <div class="flex-shrink-0">
                        <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center stok-habis-warning">
                            <i class="fas fa-exclamation-triangle text-red-500 text-xl"></i>
                        </div>
                    </div>
                    <div class="flex-1">
                        <div class="flex items-center gap-2 mb-2">
                            <h4 class="font-bold text-red-700 text-lg">⚠️ PERINGATAN STOK HABIS!</h4>
                            <span class="bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">
                                {{ $produkStokHabis->count() }} Produk
                            </span>
                        </div>
                        <p class="text-red-600 text-sm mb-3">Berikut adalah produk yang stoknya sudah habis (0 unit). Segera lakukan restok untuk memenuhi pesanan!</p>
                        <div class="flex flex-wrap gap-2">
                            @foreach($produkStokHabis as $p)
                                <div class="bg-white rounded-lg px-3 py-2 flex items-center gap-2 shadow-sm border border-red-200">
                                    <i class="fas fa-box-open text-red-500 text-xs"></i>
                                    <span class="text-sm font-medium text-gray-700">{{ $p->nama_produk }}</span>
                                    <button data-id="{{ $p->id }}" data-nama="{{ $p->nama_produk }}" data-stok="{{ $p->stok }}"
                                        onclick="window.openModal(this.dataset.id, this.dataset.nama, this.dataset.stok)"
                                        class="bg-red-500 hover:bg-red-600 text-white text-xs font-semibold px-3 py-1 rounded-lg transition">
                                        Restok Sekarang
                                    </button>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif

        <!-- TOAST NOTIFICATION -->
        @if (session('success') || session('error'))
        <div id="toast-notification"
            class="fixed bottom-6 right-6 z-50 flex items-center gap-3 bg-white border {{ session('success') ? 'border-green-200' : 'border-red-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 {{ session('success') ? 'bg-green-500' : 'bg-red-500' }} rounded-xl flex items-center justify-center flex-shrink-0">
                <i class="fas {{ session('success') ? 'fa-check' : 'fa-exclamation' }} text-white text-sm"></i>
            </div>
            <div class="flex-1 min-w-0">
                <p class="toast-title font-semibold text-gray-800 text-sm">{{ session('success') ? 'Berhasil!' : 'Gagal!' }}</p>
                <p class="toast-message text-gray-500 text-xs mt-0.5 truncate">{{ session('success') ?? session('error') }}</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>
            <div class="absolute bottom-0 left-0 h-1 {{ session('success') ? 'bg-green-500' : 'bg-red-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>
            setTimeout(() => {
                const bar = document.getElementById('toastProgress');
                if (bar) bar.style.width = '0%';
            }, 100);
            setTimeout(() => closeToast(), 5100);
            function closeToast() {
                const toast = document.getElementById('toast-notification');
                if (toast) {
                    toast.style.animation = 'slideOutRight 0.3s ease forwards';
                    setTimeout(() => toast.remove(), 300);
                }
            }
        </script>
        @endif

        @if($errors->any())
            <div class="mb-6 p-4 bg-red-50 border-l-4 border-red-500 rounded-r-lg flex items-center shadow-md">
                <div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center mr-3">
                    <i class="fas fa-times-circle text-red-600 text-xl"></i>
                </div>
                <div class="flex-1">
                    <p class="font-medium text-red-800">Terjadi Kesalahan!</p>
                    <ul class="text-red-700 text-sm mt-1 list-disc list-inside">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        @endif

        <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">

            <!-- ===== KOLOM KIRI: PRODUK HAMPIR HABIS ===== -->
            <div class="xl:col-span-2">
                <div class="bg-white rounded-xl shadow-lg border border-gray-100 overflow-hidden">
         <div class="p-5 border-b border-black flex items-center justify-between" style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #000000;">
    <div class="flex items-center gap-3">
        <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
            <i class="fas fa-exclamation-triangle text-red-500"></i>
        </div>
        <div>
            <h3 class="font-bold text-gray-800">Produk Hampir Habis</h3>
            <p class="text-xs text-gray-500">Stok tersisa ≤ 5 unit</p>
        </div>
    </div>
    @if($produkHampirHabis->count() > 0)
        <span class="bg-red-100 text-red-600 text-sm font-semibold px-3 py-1 rounded-full">
            {{ $produkHampirHabis->count() }} produk
        </span>
    @endif
</div>

                    @if($produkHampirHabis->isEmpty())
                        <div class="p-12 text-center">
                            <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                                <i class="fas fa-check-circle text-green-500 text-3xl"></i>
                            </div>
                            <h4 class="font-bold text-gray-700 text-lg mb-1">Semua Stok Aman!</h4>
                            <p class="text-gray-500 text-sm">Tidak ada produk dengan stok kritis saat ini.</p>
                        </div>
                    @else
                        <div class="divide-y divide-gray-50">
                            @foreach($produkHampirHabis as $p)
                                @php
                                    $productImages = [
                                        'mizuno' => 'https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?w=400&h=400&fit=crop',
                                        'specs sweep' => 'https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?w=400&h=400&fit=crop',
                                        'joma top flex pro' => 'https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?w=400&h=400&fit=crop',
                                        'erke pro' => 'https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?w=400&h=400&fit=crop',
                                        'nike tiempo pro' => 'https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?w=400&h=400&fit=crop',
                                    ];
                                    $productNameLower = strtolower($p->nama_produk);
                                    $defaultImage = 'https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?w=400&h=400&fit=crop';
                                    
                                    $firstFoto = $defaultImage;
                                    foreach ($productImages as $key => $imageUrl) {
                                        if (strpos($productNameLower, $key) !== false) {
                                            $firstFoto = $imageUrl;
                                            break;
                                        }
                                    }

                                    if ($p->foto) {
                                        foreach(explode('|', $p->foto) as $item) {
                                            $item = trim($item);
                                            if (preg_match('/^https?:\/\//i', $item)) {
                                                $firstFoto = $item; break;
                                            } elseif (str_contains($item, ':')) {
                                                $parts = explode(':', $item, 2);
                                                $path = trim($parts[1]);
                                                if ($path) { $firstFoto = asset('storage/'.$path); break; }
                                            } elseif ($item) {
                                                $firstFoto = asset('storage/'.$item); break;
                                            }
                                        }
                                    }
                                    $stokColor = $p->stok == 0 ? 'bg-red-500' : ($p->stok <= 2 ? 'bg-red-400' : 'bg-yellow-400');
                                    $stokPersen = $p->stok == 0 ? 0 : min(100, ($p->stok / 5) * 100);
                                    $barColor = $p->stok == 0 ? 'bg-red-500' : ($p->stok <= 2 ? 'bg-red-400' : 'bg-yellow-400');
                                @endphp

                                <div class="p-4 hover:bg-orange-50/30 transition-colors">
                                    <div class="flex items-center gap-4">
                                        <!-- FOTO -->
                                        <div class="w-14 h-14 rounded-xl overflow-hidden bg-gray-100 flex-shrink-0">
                                            @if($firstFoto)
                                                <img src="{{ $firstFoto }}" class="w-full h-full object-cover" alt="{{ $p->nama_produk }}">
                                            @else
                                                <div class="w-full h-full flex items-center justify-center">
                                                    <i class="fas fa-image text-gray-400 text-xl"></i>
                                                </div>
                                            @endif
                                        </div>

                                        <!-- INFO -->
                                        <div class="flex-1 min-w-0">
                                            <div class="flex items-start justify-between gap-2">
                                                <div class="min-w-0">
                                                    <h4 class="font-semibold text-gray-800 truncate">{{ $p->nama_produk }}</h4>
                                                    <p class="text-xs text-gray-500 mt-0.5">
                                                        {{ $p->kategori->nama ?? 'Tanpa Kategori' }} &bull;
                                                        Rp {{ number_format($p->harga, 0, ',', '.') }}
                                                    </p>
                                                </div>
                                                <div class="flex items-center gap-2 flex-shrink-0">
                                                    @if($p->stok == 0)
                                                        <span class="inline-flex items-center gap-1 bg-red-500 text-white text-xs font-bold px-3 py-1.5 rounded-full stok-habis-warning">
                                                            <i class="fas fa-times-circle"></i>
                                                            HABIS!
                                                        </span>
                                                    @else
                                                        <span class="inline-flex items-center gap-1 {{ $stokColor }} text-white text-xs font-bold px-3 py-1.5 rounded-full">
                                                            <i class="fas fa-layer-group"></i>
                                                            {{ $p->stok }} unit
                                                        </span>
                                                    @endif
                                                </div>
                                            </div>

                                            <div class="mt-2">
                                                <div class="h-2 bg-gray-100 rounded-full overflow-hidden">
                                                    <div @style(['width: ' . $stokPersen . '%']) 
                                                        @class(['h-full stok-bar rounded-full', $barColor])>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="mt-3 flex gap-2">
                                                    <button type="button"
                                                        data-id="{{ $p->id }}"
                                                        data-nama="{{ $p->nama_produk }}"
                                                        data-stok="{{ $p->stok }}"
                                                        onclick="window.openModal(this.dataset.id, this.dataset.nama, this.dataset.stok)"
                                                        class="flex-1 {{ $p->stok == 0 ? 'bg-red-500 hover:bg-red-600' : 'btn-primary' }} text-white text-xs font-semibold py-2 px-3 rounded-lg flex items-center justify-center gap-1">
                                                        <i class="fas fa-plus"></i>
                                                        Tambah Stok
                                                    </button>

                                                <a href="{{ route('restok.show', $p->id) }}"
                                                    class="flex-1 bg-gray-100 text-gray-700 text-xs font-semibold py-2 px-3 rounded-lg flex items-center justify-center gap-1 hover:bg-gray-200 transition">
                                                    <i class="fas fa-history"></i>
                                                    Riwayat
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>

                <!-- SEMUA PRODUK (untuk restok produk yang tidak hampir habis) -->
                <div class="bg-white rounded-xl shadow-lg border border-gray-100 overflow-hidden mt-6">
              <div class="p-5 border-b border-black flex items-center gap-3" style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #000000;">
    <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
        <i class="fas fa-cubes text-blue-500"></i>
    </div>
    <div>
        <h3 class="font-bold text-gray-800">Semua Produk</h3>
        <p class="text-xs text-gray-500">Restok produk mana saja kapan saja</p>
    </div>
</div>

                    <div class="divide-y divide-gray-50 max-h-96 overflow-y-auto">
                        @foreach($semuaProduk as $p)
                            @php
                                $productImages = [
                                    'mizuno' => 'https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?w=400&h=400&fit=crop',
                                    'specs sweep' => 'https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?w=400&h=400&fit=crop',
                                    'joma top flex pro' => 'https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?w=400&h=400&fit=crop',
                                    'erke pro' => 'https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?w=400&h=400&fit=crop',
                                    'nike tiempo pro' => 'https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?w=400&h=400&fit=crop',
                                ];
                                $productNameLower = strtolower($p->nama_produk);
                                $defaultImage = 'https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?w=400&h=400&fit=crop';
                                
                                $firstFoto = $defaultImage;
                                foreach ($productImages as $key => $imageUrl) {
                                    if (strpos($productNameLower, $key) !== false) {
                                        $firstFoto = $imageUrl;
                                        break;
                                    }
                                }

                                if ($p->foto) {
                                    foreach(explode('|', $p->foto) as $item) {
                                        $item = trim($item);
                                        if (preg_match('/^https?:\/\//i', $item)) {
                                            $firstFoto = $item; break;
                                        } elseif (str_contains($item, ':')) {
                                            $parts = explode(':', $item, 2);
                                            $path = trim($parts[1]);
                                            if ($path) { $firstFoto = asset('storage/'.$path); break; }
                                        } elseif ($item) {
                                            $firstFoto = asset('storage/'.$item); break;
                                        }
                                    }
                                }
                                $stokClass = $p->stok == 0 ? 'bg-red-100 text-red-700 font-bold' : ($p->stok > 10 ? 'bg-green-100 text-green-700' : ($p->stok > 5 ? 'bg-yellow-100 text-yellow-700' : 'bg-red-100 text-red-700'));
                            @endphp

                            <div class="p-3 hover:bg-gray-50 transition flex items-center gap-3">
                                <div class="w-10 h-10 rounded-lg overflow-hidden bg-gray-100 flex-shrink-0">
                                    @if($firstFoto)
                                        <img src="{{ $firstFoto }}" class="w-full h-full object-cover" alt="{{ $p->nama_produk }}">
                                    @else
                                        <div class="w-full h-full flex items-center justify-center">
                                            <i class="fas fa-image text-gray-300 text-sm"></i>
                                        </div>
                                    @endif
                                </div>
                                <div class="flex-1 min-w-0">
                                    <p class="font-medium text-gray-800 text-sm truncate">{{ $p->nama_produk }}</p>
                                    <p class="text-xs text-gray-500">{{ $p->kategori->nama ?? '-' }}</p>
                                </div>
                                <span class="text-xs font-semibold px-2 py-1 rounded-full {{ $stokClass }}">
                                    @if($p->stok == 0)
                                        <i class="fas fa-exclamation-circle mr-1"></i> HABIS!
                                    @else
                                        {{ $p->stok }} unit
                                    @endif
                                </span>
                                <button type="button"
                                    data-id="{{ $p->id }}"
                                    data-nama="{{ $p->nama_produk }}"
                                    data-stok="{{ $p->stok }}"
                                    onclick="openModal(this.dataset.id, this.dataset.nama, this.dataset.stok)"
                                    class="{{ $p->stok == 0 ? 'bg-red-500 hover:bg-red-600' : 'btn-primary' }} text-white text-xs font-semibold py-1.5 px-3 rounded-lg flex items-center gap-1 flex-shrink-0">
                                    <i class="fas fa-plus"></i>
                                    Restok
                                </button>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <!-- ===== KOLOM KANAN: RIWAYAT RESTOK ===== -->
            <div>
                <div class="bg-white rounded-xl shadow-lg border border-gray-100 overflow-hidden sticky top-24">
                  <div class="p-5 border-b border-black flex items-center gap-3" style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #000000;">
                        <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-history text-purple-500"></i>
                        </div>
                        <div>
                            <h3 class="font-bold text-gray-800">Riwayat Restok</h3>
                            <p class="text-xs text-gray-500">10 aktivitas terakhir</p>
                        </div>
                    </div>
                    @if($riwayatRestok->isEmpty())
                        <div class="p-8 text-center">
                            <i class="fas fa-history text-gray-300 text-4xl mb-3"></i>
                            <p class="text-gray-500 text-sm">Belum ada riwayat restok.</p>
                        </div>
                    @else
                        <div class="divide-y divide-gray-50 max-h-[600px] overflow-y-auto">
                            @foreach($riwayatRestok as $log)
                                <div class="p-4">
                                    <div class="flex items-start gap-3">
                                        <div class="w-9 h-9 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                                            <i class="fas fa-plus text-green-600 text-xs"></i>
                                        </div>
                                        <div class="flex-1 min-w-0">
                                            <p class="font-medium text-gray-800 text-sm truncate">{{ $log->produk->nama_produk ?? 'Produk dihapus' }}</p>
                                            <div class="flex items-center gap-2 mt-1">
                                                <span class="text-xs text-gray-500">{{ $log->stok_sebelum }}</span>
                                                <i class="fas fa-arrow-right text-gray-400 text-xs"></i>
                                                <span class="text-xs font-bold text-green-600">{{ $log->stok_sesudah }}</span>
                                                <span class="text-xs bg-green-100 text-green-700 px-1.5 py-0.5 rounded-full font-semibold">
                                                    +{{ $log->jumlah_tambah }}
                                                </span>
                                            </div>
                                            @if($log->catatan)
                                                <p class="text-xs text-gray-400 mt-1 italic truncate">{{ $log->catatan }}</p>
                                            @endif
                                            <p class="text-xs text-gray-400 mt-1">
                                                {{ $log->created_at->diffForHumans() }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- ===== MODAL TAMBAH STOK ===== -->
    <div id="modalRestok" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center p-4">
        <div class="modal-content bg-white rounded-2xl shadow-2xl w-full max-w-md">

           {{-- MODAL HEADER --}}
<div class="relative bg-gradient-to-r from-orange-500 via-orange-600 to-orange-700 p-5 rounded-t-2xl overflow-hidden">
    {{-- Background Decoration --}}
    <div class="absolute top-0 right-0 w-32 h-32 opacity-10">
        <i class="fas fa-boxes text-7xl absolute top-2 right-2"></i>
    </div>
    
    <div class="relative flex items-center justify-between">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center shadow-inner border border-white/30">
                <i class="fas fa-boxes text-white text-lg"></i>
            </div>
            <div>
                <h3 class="text-white font-bold text-xl">Tambah Stok</h3>
                <p class="text-orange-100 text-xs mt-0.5">Isi jumlah stok yang akan ditambahkan</p>
            </div>
        </div>
        <button onclick="closeModal()" 
            class="text-white/70 hover:text-white transition-all duration-200 p-2 hover:bg-white/20 rounded-xl">
            <i class="fas fa-times text-lg"></i>
        </button>
    </div>
</div>

            <!-- MODAL BODY -->
            <form action="{{ route('restok.store') }}" method="POST" id="formRestok">
                @csrf
                <div class="p-5 space-y-4">

                    <!-- PILIH PRODUK -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-box text-orange-500 mr-1"></i>
                            Pilih Produk
                        </label>
                        <select name="produk_id" id="modalProdukId"
                            onchange="updateStokInfo(this)"
                            class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent" required>
                            <option value="">-- Pilih Produk --</option>
                            @foreach($semuaProduk as $p)
                                <option value="{{ $p->id }}" data-stok="{{ $p->stok }}">
                                    {{ $p->nama_produk }} (Stok: {{ $p->stok }})
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- INFO STOK SAAT INI -->
                    <div id="stokInfoBox" class="hidden">
                        <div class="bg-orange-50 border border-orange-200 rounded-lg p-4">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-xs text-gray-500 mb-1">Stok Saat Ini</p>
                                    <p class="text-2xl font-bold text-orange-600" id="stokSaatIni">0</p>
                                    <p class="text-xs text-gray-500">unit tersedia</p>
                                </div>
                                <div class="w-14 h-14 bg-orange-100 rounded-xl flex items-center justify-center">
                                    <i class="fas fa-layer-group text-orange-500 text-2xl"></i>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- JUMLAH TAMBAH -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-plus-circle text-green-500 mr-1"></i>
                            Jumlah Tambah Stok
                        </label>
                        <div class="flex items-center gap-3">
                            <button type="button" onclick="decrementStok()"
                                class="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center text-gray-700 hover:bg-gray-200 transition text-lg font-bold flex-shrink-0">
                                −
                            </button>
                            <input type="number" name="jumlah_tambah" id="jumlahTambah"
                                value="1" min="1" max="10000"
                                oninput="updatePreview()"
                                class="flex-1 text-center border border-gray-300 rounded-lg px-3 py-2.5 text-sm font-bold text-lg focus:outline-none focus:ring-2 focus:ring-orange-500" required>
                            <button type="button" onclick="incrementStok()"
                                class="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center text-gray-700 hover:bg-gray-200 transition text-lg font-bold flex-shrink-0">
                                +
                            </button>
                        </div>

                        <!-- QUICK BUTTONS -->
                        <div class="flex gap-2 mt-2">
                            @foreach([5, 10, 25, 50, 100] as $qty)
                            <button type="button" 
                                data-qty="{{ $qty }}"
                                onclick="setJumlah(this.dataset.qty)"
                                class="flex-1 text-xs bg-gray-100 text-gray-600 py-1.5 rounded-lg hover:bg-orange-100 hover:text-orange-600 transition font-medium">
                                +{{ $qty }}
                            </button>
                            @endforeach
                        </div>
                    </div>

                    <!-- PREVIEW STOK SETELAH -->
                    <div id="previewBox" class="hidden bg-green-50 border border-green-200 rounded-lg p-3">
                        <div class="flex items-center justify-between">
                            <div class="text-sm text-gray-600">
                                <span id="previewSebelum" class="font-medium">0</span>
                                <i class="fas fa-arrow-right mx-2 text-gray-400"></i>
                                <span id="previewSesudah" class="font-bold text-green-600 text-lg">0</span>
                                <span class="text-xs text-gray-500 ml-1">unit</span>
                            </div>
                            <span class="bg-green-100 text-green-700 text-xs font-bold px-2 py-1 rounded-full" id="previewTambah">+0</span>
                        </div>
                    </div>

                    <!-- CATATAN -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-sticky-note text-blue-500 mr-1"></i>
                            Catatan <span class="text-gray-400 font-normal">(opsional)</span>
                        </label>
                        <textarea name="catatan" rows="2"
                            placeholder="Contoh: Restock dari supplier utama..."
                            class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-orange-500 resize-none"></textarea>
                    </div>
                </div>

                <!-- MODAL FOOTER -->
                <div class="p-5 pt-0 flex gap-3">
                    <button type="submit"
                        class="flex-1 btn-primary text-white py-3 rounded-xl font-semibold flex items-center justify-center gap-2 shadow-lg">
                                <i class="fas fa-save"></i>
                        Simpan Restok
                    </button>
                    <button type="button" onclick="closeModal()"
                        class="flex-1 bg-gray-100 text-gray-700 py-3 rounded-xl font-semibold hover:bg-gray-200 transition">
                        Batal
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script>
        // ===== DATA PRODUK (untuk preview) =====
        const produkData = JSON.parse(document.body.dataset.produkData || '{}');

        // ===== MODAL =====
        function openModal(produkId = null, namaProduk = null, stokSaatIni = null) {
            document.getElementById('modalRestok').classList.remove('hidden');
            document.getElementById('modalRestok').style.display = 'flex';
            document.body.style.overflow = 'hidden';

            if (produkId) {
                document.getElementById('modalProdukId').value = produkId;
                showStokInfo(stokSaatIni || produkData[produkId]?.stok || 0);
            } else {
                document.getElementById('stokInfoBox').classList.add('hidden');
                document.getElementById('previewBox').classList.add('hidden');
            }

            document.getElementById('jumlahTambah').value = 1;
            updatePreview();
        }

        function closeModal() {
            document.getElementById('modalRestok').classList.add('hidden');
            document.getElementById('modalRestok').style.display = '';
            document.body.style.overflow = '';
        }

        // Close modal on backdrop click
        document.getElementById('modalRestok').addEventListener('click', function(e) {
            if (e.target === this) closeModal();
        });

        // ===== STOK INFO =====
        function showStokInfo(stok) {
            document.getElementById('stokInfoBox').classList.remove('hidden');
            document.getElementById('stokSaatIni').textContent = stok;
            updatePreview();
        }

        function updateStokInfo(select) {
            const option = select.options[select.selectedIndex];
            const stok = option ? parseInt(option.getAttribute('data-stok')) || 0 : 0;
            if (select.value) {
                showStokInfo(stok);
            } else {
                document.getElementById('stokInfoBox').classList.add('hidden');
                document.getElementById('previewBox').classList.add('hidden');
            }
        }

        function updatePreview() {
            const stokEl = document.getElementById('stokSaatIni');
            const jumlahEl = document.getElementById('jumlahTambah');

            if (!stokEl || document.getElementById('stokInfoBox').classList.contains('hidden')) return;

            const stokSebelum = parseInt(stokEl.textContent) || 0;
            const jumlah = parseInt(jumlahEl.value) || 0;
            const stokSesudah = stokSebelum + jumlah;

            document.getElementById('previewBox').classList.remove('hidden');
            document.getElementById('previewSebelum').textContent = stokSebelum;
            document.getElementById('previewSesudah').textContent = stokSesudah;
            document.getElementById('previewTambah').textContent = '+' + jumlah;
        }

        function incrementStok() {
            const el = document.getElementById('jumlahTambah');
            el.value = (parseInt(el.value) || 0) + 1;
            updatePreview();
        }

        function decrementStok() {
            const el = document.getElementById('jumlahTambah');
            const val = (parseInt(el.value) || 0) - 1;
            el.value = Math.max(1, val);
            updatePreview();
        }

        function setJumlah(n) {
            document.getElementById('jumlahTambah').value = n;
            updatePreview();
        }

        // ===== NOTIFIKASI DROPDOWN =====
        async function loadNotifikasi() {
            try {
                const res = await fetch(document.body.dataset.restokListUrl);
                const data = await res.json();
                const list = document.getElementById('notifList');
                const badge = document.getElementById('notifBadge');

                if (data.length === 0) {
                    list.innerHTML = `
                        <div class="px-4 py-6 text-center">
                            <i class="fas fa-check-circle text-green-400 text-2xl mb-2 block"></i>
                            <p class="text-gray-500 text-sm">Semua stok aman!</p>
                        </div>`;
                    badge.style.display = 'none';
                } else {
                    badge.style.display = 'flex';
                    badge.textContent = data.length;

                    list.innerHTML = data.map(p => `
                        <a href="${document.body.dataset.restokIndexUrl}" class="flex items-center gap-3 px-4 py-3 hover:bg-orange-50 transition">
                            <div class="w-8 h-8 ${p.stok === 0 ? 'bg-red-100' : 'bg-yellow-100'} rounded-full flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-exclamation ${p.stok === 0 ? 'text-red-500' : 'text-yellow-500'} text-xs"></i>
                            </div>
                            <div class="flex-1 min-w-0">
                                <p class="text-sm font-medium text-gray-800 truncate">${p.nama_produk}</p>
                                <p class="text-xs ${p.stok === 0 ? 'text-red-500 font-semibold' : 'text-yellow-600'}">
                                    ${p.stok === 0 ? '⚠️ Stok habis! Segera restok!' : 'Sisa ' + p.stok + ' unit — segera restok!'}
                                </p>
                            </div>
                        </a>
                    `).join('');
                }
            } catch (e) {
                console.error('Gagal memuat notifikasi:', e);
            }
        }

        function toggleNotif() {
            const dropdown = document.getElementById('notifDropdown');
            const isHidden = dropdown.classList.contains('hidden');
            dropdown.classList.toggle('hidden');
            if (isHidden) loadNotifikasi();
        }

        // Close notif when clicking outside
        window.addEventListener('click', function(event) {
            if (!event.target.closest('#notifWrapper')) {
                document.getElementById('notifDropdown').classList.add('hidden');
            }
            
            const dropdown = document.getElementById('dropdownMenu');
            const button = event.target.closest('button');
            const isDropdownButton = button && (button.getAttribute('onclick')?.includes('toggleUserDropdown'));

            if (!isDropdownButton && !event.target.closest('#dropdownMenu') && !event.target.closest('#userDropdown')) {
                if (dropdown && !dropdown.classList.contains('hidden')) {
                    dropdown.classList.add('hidden');
                    const icon = document.getElementById('dropdownIcon');
                    if (icon) icon.style.transform = 'rotate(0deg)';
                }
            }
        });

        // ===== USER DROPDOWN =====
        function toggleUserDropdown(event) {
            if (event) event.stopPropagation();
            const dropdown = document.getElementById('dropdownMenu');
            const icon = document.getElementById('dropdownIcon');

            if (dropdown.classList.contains('hidden')) {
                dropdown.classList.remove('hidden');
                dropdown.classList.add('dropdown-enter');
                setTimeout(() => {
                    dropdown.classList.remove('dropdown-enter');
                    dropdown.classList.add('dropdown-enter-active');
                }, 10);
                icon.style.transform = 'rotate(180deg)';
            } else {
                dropdown.classList.remove('dropdown-enter-active');
                dropdown.classList.add('dropdown-leave');
                setTimeout(() => {
                    dropdown.classList.add('hidden');
                    dropdown.classList.remove('dropdown-leave');
                }, 200);
                icon.style.transform = 'rotate(0deg)';
            }
        }

        // ===== AUTO LOAD BADGE ON PAGE LOAD =====
        window.addEventListener('DOMContentLoaded', () => {
            loadNotifikasi();
        });

        // Auto-hide success alert
        // @if(session('success'))
        setTimeout(() => {
            const alert = document.querySelector('.bg-green-50');
            if (alert) {
                alert.style.transition = 'opacity 0.5s';
                alert.style.opacity = '0';
                setTimeout(() => alert.remove(), 500);
            }
        }, 5000);
        // @endif
    </script>
</body>
</html>