<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
    <title>Chat - 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; }
        .chat-item { transition: all 0.2s ease; border-left: 3px solid transparent; }
        .chat-item:hover { transform: translateX(5px); border-left-color: #f472b6; background-color: #fef2f8; }
        .chat-item.unread { background-color: #fef2f8; border-left-color: #f472b6; }
        .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: #fef2f8; color: #ec489a; }
        .active-nav { background-color: #fef2f8; color: #ec489a; font-weight: 600; }
        @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
        .pulse { animation: pulse 2s infinite; }

        @keyframes bounce {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.2); }
        }

        .animate-bounce-custom {
            animation: bounce 0.5s ease-in-out infinite;
        }
        
        .bg-gradient-pink {
            background: linear-gradient(135deg, #fdf2f8 0%, #fff1f3 100%);
        }
        
        .border-pink-light {
            border-color: #fbcfe8;
        }
    </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 gap-3">

                <!-- LOGO -->
                <div class="flex items-center gap-3">
                    <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 Chat</p>
                    </div>
                </div>

                <!-- MENU -->
                <div class="flex flex-wrap items-center gap-1">
                    <a href="<?php echo e(route('dashboard')); ?>" class="nav-link <?php echo e(request()->routeIs('dashboard') ? 'active-nav' : 'text-gray-700 hover:text-pink-600'); ?>">
                        <i class="fas fa-home"></i> Dashboard
                    </a>

                    <?php 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();
                            }
                        ?>

                        <a href="<?php echo e(route('produk.index')); ?>" class="nav-link text-gray-700 hover:text-pink-600">
                            <i class="fas fa-store"></i> Produk
                        </a>

                        <a href="<?php echo e(route('keranjang.index')); ?>" class="relative nav-link text-gray-700 hover:text-pink-600">
                            <i class="fas fa-shopping-cart"></i> Keranjang
                            <?php 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">
                                    <?php echo e($jumlahKeranjang > 99 ? '99+' : $jumlahKeranjang); ?>

                                </span>
                            <?php endif; ?>
                        </a>

                        <a href="<?php echo e(route('pesanan.index')); ?>" class="nav-link text-gray-700 hover:text-pink-600">
                            <i class="fas fa-clipboard-list"></i> Pesanan
                        </a>

                        <a href="<?php echo e(route('chat.index')); ?>" class="flex items-center gap-2 nav-link <?php echo e(request()->routeIs('chat.*') ? 'active-nav' : 'text-gray-700 hover:text-pink-600'); ?>">
                            <i class="fas fa-comments"></i> Chat
                            <?php 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">
                                    <?php echo e($unreadChatCountUser > 99 ? '99+' : $unreadChatCountUser); ?>

                                </span>
                            <?php endif; ?>
                        </a>

                    <?php elseif(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;
                            $navChats = \App\Models\Chat::where('penjual_id', auth()->id())->get();
                            foreach ($navChats as $chatItem) {
                                $unreadChatCount += \App\Models\ChatMessage::where('chat_id', $chatItem->id)
                                    ->where('sender_id', $chatItem->user_id)
                                    ->where('is_read', false)
                                    ->count();
                            }
                        ?>

                        <a href="<?php echo e(route('kategori.index')); ?>"
                            class="px-4 py-2 rounded-lg <?php echo e(request()->routeIs('kategori.*') ? 'bg-pink-500 text-white shadow' : 'text-gray-600 hover:bg-pink-50 hover:text-pink-600'); ?> transition">
                            <i class="fas fa-tags mr-2"></i>Kategori
                        </a>

                        <a href="<?php echo e(route('produk.index')); ?>"
                            class="flex items-center gap-2 px-4 py-2 rounded-lg <?php echo e(request()->routeIs('produk.*') ? 'bg-pink-500 text-white shadow' : 'text-gray-600 hover:bg-pink-50 hover:text-pink-600'); ?> transition">
                            <i class="fas fa-store"></i> Produk
                        </a>

                        <a href="<?php echo e(route('pesanan.masuk.index')); ?>"
                            class="flex items-center gap-2 px-4 py-2 rounded-lg <?php echo e(request()->routeIs('pesanan.masuk.*') ? 'bg-pink-500 text-white shadow' : 'text-gray-600 hover:bg-pink-50 hover:text-pink-600'); ?> transition">
                            <i class="fas fa-truck"></i> Pesanan Masuk
                            <?php 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">
                                    <?php echo e($pendingPesananCount > 99 ? '99+' : $pendingPesananCount); ?>

                                </span>
                            <?php endif; ?>
                        </a>

                        <a href="<?php echo e(route('restok.index')); ?>"
                            class="flex items-center gap-2 px-4 py-2 rounded-lg <?php echo e(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
                            <?php 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 animate-pulse">
                                    <?php echo e($restokCount > 99 ? '99+' : $restokCount); ?>

                                </span>
                            <?php endif; ?>
                        </a>

                        <a href="<?php echo e(route('chat.index')); ?>"
                            class="flex items-center gap-2 px-4 py-2 rounded-lg <?php echo e(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
                            <?php 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 animate-pulse">
                                    <?php echo e($unreadChatCount > 99 ? '99+' : $unreadChatCount); ?>

                                </span>
                            <?php endif; ?>
                        </a>

                        <a href="<?php echo e(route('user.index')); ?>"
                            class="px-4 py-2 rounded-lg <?php echo e(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>

                    <?php endif; ?>
                </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">
                                <?php echo e(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"><?php echo e(Auth::user()->name); ?></p>
                                <p class="text-xs text-gray-500">
                                    <?php if(Auth::user()->role == 'penjual'): ?> <i class="fas fa-store mr-1 text-pink-500"></i> Penjual
                                    <?php elseif(Auth::user()->role == 'admin'): ?> <i class="fas fa-shield-alt mr-1 text-purple-500"></i> Admin
                                    <?php else: ?> <i class="fas fa-user mr-1 text-pink-500"></i> Customer <?php 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">
                                        <?php echo e(substr(Auth::user()->name, 0, 1)); ?>

                                    </div>
                                    <div>
                                        <p class="font-semibold text-gray-800"><?php echo e(Auth::user()->name); ?></p>
                                        <p class="text-sm text-gray-500"><?php echo e(Auth::user()->email); ?></p>
                                        <span class="inline-block mt-1 px-2 py-0.5 rounded-full text-xs font-medium <?php if(Auth::user()->role == 'penjual'): ?> bg-pink-100 text-pink-600 <?php elseif(Auth::user()->role == 'admin'): ?> bg-purple-100 text-purple-600 <?php else: ?> bg-pink-100 text-pink-600 <?php endif; ?>">
                                            <?php if(Auth::user()->role == 'penjual'): ?> <i class="fas fa-store mr-1"></i> Penjual
                                            <?php elseif(Auth::user()->role == 'admin'): ?> <i class="fas fa-shield-alt mr-1"></i> Admin
                                            <?php else: ?> <i class="fas fa-user mr-1"></i> Customer <?php endif; ?>
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <?php if(Auth::user()->role == 'penjual'): ?>
                                <?php $toko = App\Models\Toko::where('user_id', auth()->id())->first(); ?>
                                <?php if($toko): ?>
                                    <a href="<?php echo e(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>
                                <?php else: ?>
                                    <a href="<?php echo e(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>
                                <?php endif; ?>
                            <?php else: ?>
                                <a href="<?php echo e(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>
                            <?php endif; ?>

                            <div class="border-t border-gray-100 mt-1 pt-1">
                                <form method="POST" action="<?php echo e(route('logout')); ?>">
                                    <?php echo csrf_field(); ?>
                                    <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>

    <!-- MAIN CONTENT -->
    <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-xl overflow-hidden">
    <!-- Background Decoration -->
    <div class="absolute top-0 right-0 opacity-10">
        <i class="fas fa-comments text-9xl absolute top-4 right-8"></i>
        <i class="fas fa-spa text-7xl absolute bottom-0 right-32"></i>
    </div>
    
    <div class="relative flex items-center gap-4 flex-wrap">
        <div class="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-center shadow-lg border border-white/30">
            <i class="fas fa-comments text-3xl"></i>
        </div>
        <div>
            <h1 class="text-3xl font-bold tracking-tight">Manajemen Chat Skincare</h1>
            <p class="text-pink-100 flex items-center gap-2 mt-1">
                <i class="fas fa-comment-dots text-sm"></i>
                Komunikasi dengan <?php echo e(auth()->user()->role === 'user' ? 'penjual skincare' : 'pembeli skincare'); ?>

            </p>
        </div>
        <?php if($totalUnread > 0): ?>
            <div class="ml-auto bg-white/20 backdrop-blur-sm border border-white/30 px-5 py-2.5 rounded-xl flex items-center gap-2 shadow-md">
                <div class="relative">
                    <i class="fas fa-bell text-white animate-pulse"></i>
                </div>
                <span class="font-bold text-lg total-unread-badge"><?php echo e($totalUnread); ?></span>
                <span class="text-sm">pesan belum dibaca</span>
            </div>
        <?php endif; ?>
    </div>
</div>

<!-- CHAT LIST -->
<div class="bg-white rounded-2xl shadow-xl border border-pink-100 overflow-hidden">
    <div class="p-5 bg-gradient-to-r from-pink-50 to-white border-b border-pink-100">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 bg-pink-100 rounded-xl flex items-center justify-center">
                    <i class="fas fa-comment-dots text-pink-500"></i>
                </div>
                <h2 class="font-bold text-gray-800">Daftar Percakapan</h2>
            </div>
            <div class="flex items-center gap-3">
                <p class="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded-full">
                    <i class="fas fa-comments text-gray-400 mr-1"></i>
                    <?php echo e($chats->count()); ?> percakapan
                </p>
                <?php if($totalUnread > 0): ?>
                    <span class="bg-red-100 text-red-600 text-sm font-semibold px-3 py-1 rounded-full">
                        <i class="fas fa-envelope mr-1"></i>
                        <span class="total-unread-badge"><?php echo e($totalUnread); ?></span> belum dibaca
                    </span>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <div class="max-h-[600px] overflow-y-auto" id="chatList">
        <table class="w-full border-collapse">
            <tbody>
                <?php $__empty_1 = true; $__currentLoopData = $chats; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $chat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                    <?php
                        $lastMessage = $chat->latestMessage;

                        // Hitung unread langsung dari database
                        if(auth()->user()->role === 'user') {
                            $unreadCount = \App\Models\ChatMessage::where('chat_id', $chat->id)
                                ->where('sender_id', $chat->penjual_id)
                                ->where('is_read', false)
                                ->count();
                            $otherParty = $chat->penjual;
                            $otherName  = $otherParty->name ?? 'Penjual Skincare';
                            $otherRole  = 'Penjual';
                        } else {
                            $unreadCount = \App\Models\ChatMessage::where('chat_id', $chat->id)
                                ->where('sender_id', $chat->user_id)
                                ->where('is_read', false)
                                ->count();
                            $otherParty = $chat->user;
                            $otherName  = $otherParty->name ?? 'Pembeli';
                            $otherRole  = 'Pembeli';
                        }

                        $otherInitial = strtoupper(substr($otherName, 0, 1));
                    ?>

                    <tr class="border-b border-pink-100 hover:bg-pink-50 transition">
                        <td class="p-5 align-middle">
                            <a href="<?php echo e(route('chat.show', $chat->id)); ?>" class="block chat-item <?php echo e($unreadCount > 0 ? 'unread' : ''); ?>" data-chat-id="<?php echo e($chat->id); ?>">
                                <div class="flex items-center gap-4">
                                    
                                    <div class="relative flex-shrink-0">
                                        <div class="w-14 h-14 bg-gradient-to-br from-pink-100 to-pink-200 rounded-full flex items-center justify-center text-pink-600 font-bold text-xl shadow-md">
                                            <?php echo e($otherInitial); ?>

                                        </div>
                                        <?php if($unreadCount > 0): ?>
                                            <div class="absolute -top-1 -right-1 w-5 h-5 bg-red-500 rounded-full flex items-center justify-center text-white text-xs font-bold pulse unread-bubble">
                                                <?php echo e($unreadCount); ?>

                                            </div>
                                        <?php endif; ?>
                                    </div>

                                    
                                    <div class="flex-1 min-w-0">
                                        <div class="flex items-center justify-between mb-1">
                                            <h3 class="font-semibold text-gray-800 truncate">
                                                <?php echo e($otherName); ?>

                                                <span class="ml-2 text-xs font-normal text-gray-400 bg-gray-100 px-2 py-0.5 rounded-full">
                                                    <?php echo e($otherRole); ?>

                                                </span>
                                            </h3>
                                            <?php if($lastMessage): ?>
                                                <span class="text-xs text-gray-400 flex-shrink-0 ml-2">
                                                    <?php echo e($lastMessage->formatted_time); ?>

                                                </span>
                                            <?php endif; ?>
                                        </div>

                                        <div class="flex items-center justify-between gap-2">
                                            <p class="text-sm truncate max-w-xs
                                                <?php echo e($unreadCount > 0 ? 'text-gray-800 font-semibold' : 'text-gray-500'); ?>">
                                                <?php if($lastMessage): ?>
                                                    <?php if($lastMessage->sender_id == auth()->id()): ?>
                                                        <span class="text-gray-400 font-normal">Anda: </span>
                                                    <?php endif; ?>
                                                    <?php echo e($lastMessage->pesan); ?>

                                                <?php else: ?>
                                                    <span class="text-gray-400 italic">Belum ada pesan</span>
                                                <?php endif; ?>
                                            </p>

                                            <div class="flex items-center gap-2 flex-shrink-0">
                                                <?php if($unreadCount > 0): ?>
                                                    <span class="bg-red-500 text-white text-xs font-bold px-2 py-0.5 rounded-full min-w-[20px] text-center unread-count-label">
                                                        <?php echo e($unreadCount); ?>

                                                    </span>
                                                <?php endif; ?>
                                                <span class="text-xs px-2 py-1 bg-gray-100 text-gray-600 rounded-full">
                                                    #<?php echo e($chat->pesanan->kode_pesanan ?? 'Pesanan'); ?>

                                                </span>
                                                <i class="fas fa-chevron-right text-gray-400 text-sm"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                         </td>
                     </tr>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                     <tr>
                        <td class="p-12 text-center">
                            <div class="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                                <i class="fas fa-comments text-gray-400 text-3xl"></i>
                            </div>
                            <h3 class="text-lg font-semibold text-gray-800 mb-2">Belum Ada Percakapan</h3>
                            <p class="text-gray-500 text-sm max-w-md mx-auto">
                                <?php if(auth()->user()->role === 'user'): ?>
                                    Anda akan melihat chat dengan penjual skincare setelah melakukan pemesanan.
                                <?php else: ?>
                                    Anda akan melihat chat dengan pembeli setelah ada yang memesan produk skincare Anda.
                                <?php endif; ?>
                            </p>
                        </td>
                     </tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>
    </div>

    <script>
// ============================================================
    // USER DROPDOWN TOGGLE
    // ============================================================
    function toggleUserDropdown(event) {
        event.stopPropagation();
        const dropdown = document.getElementById('dropdownMenu');
        const icon = document.getElementById('dropdownIcon');
        
        if (dropdown.classList.contains('hidden')) {
            dropdown.classList.remove('hidden');
            if (icon) icon.style.transform = 'rotate(180deg)';
        } else {
            dropdown.classList.add('hidden');
            if (icon) icon.style.transform = 'rotate(0deg)';
        }
    }

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

    // ============================================================
    // NOTIFIKASI TOGGLE (untuk penjual)
    // ============================================================
    function toggleNotif(event) {
        event.stopPropagation();
        const notifDropdown = document.getElementById('notifDropdown');
        if (notifDropdown) {
            notifDropdown.classList.toggle('hidden');
        }
    }

    // Tutup notifikasi saat klik di luar
    document.addEventListener('click', function(event) {
        const notifDropdown = document.getElementById('notifDropdown');
        const notifWrapper = document.getElementById('notifWrapper');
        
        if (notifDropdown && notifWrapper && !notifWrapper.contains(event.target)) {
            if (!notifDropdown.classList.contains('hidden')) {
                notifDropdown.classList.add('hidden');
            }
        }
    });


        // Refresh unread count setiap 30 detik
        function refreshUnreadCount() {
            fetch('<?php echo e(route("chat.unread-count")); ?>')
                .then(res => res.json())
                .then(data => {
                    const count = data.unread_count;

                    // Update semua badge total unread
                    document.querySelectorAll('.total-unread-badge').forEach(el => {
                        el.textContent = count;
                        el.closest('[class*="bg-red"]')?.classList.toggle('hidden', count === 0);
                    });
                })
                .catch(err => console.error('Gagal refresh unread:', err));
        }

        setInterval(refreshUnreadCount, 30000);
    </script>

</body>
</html><?php /**PATH C:\laragon\www\ecommerce\resources\views/chat/index.blade.php ENDPATH**/ ?>