<!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</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; }
        .chat-item { transition: all 0.2s ease; border-left: 3px solid transparent; }
        .chat-item:hover { transform: translateX(5px); border-left-color: #f97316; background-color: #fff7ed; }
        .chat-item.unread { background-color: #fff7ed; border-left-color: #f97316; }
        .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; }
        @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;
        }
    </style>
</head>
<body class="bg-gray-50" data-unread-count-url="<?php echo e(route('chat.unread-count')); ?>">

    <!-- NAVBAR -->
    <nav class="bg-white/80 backdrop-blur-md border-b border-gray-200 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">
                    <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 Chat</p>
                    </div>
                </div>

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

                        <?php if(auth()->user()->role === 'user'): ?>

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

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

                        <a href="<?php echo e(route('chat.index')); ?>"
                            class="flex items-center gap-2 px-4 py-2 rounded-xl font-medium transition
                            <?php echo e(request()->routeIs('chat.*') ? '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-comments"></i> Chat
                        </a>

                    <?php elseif(auth()->user()->role === 'penjual'): ?>

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

                        <a href="<?php echo e(route('kategori.index')); ?>"
                            class="px-4 py-2 rounded-lg <?php echo e(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 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-orange-500 text-white shadow' : 'text-gray-600 hover:bg-orange-50 hover:text-orange-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-orange-500 text-white shadow' : 'text-gray-600 hover:bg-orange-50 hover:text-orange-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 notification-badge">
                                    <?php echo e($pendingPesananCount > 99 ? '99+' : $pendingPesananCount); ?>

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

                   

                        <a href="<?php echo e(route('chat.index')); ?>"
                            class="flex items-center gap-2 px-4 py-2 rounded-xl font-medium transition
                            <?php echo e(request()->routeIs('chat.*') ? '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-comments"></i> Chat
                        </a>
                    

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

                    <?php endif; ?>
                </div>

                <div class="flex items-center gap-4 mt-3 md:mt-0">
                    <!-- CART & CHAT NOTIF FOR USER -->
                    <?php if(auth()->check() && auth()->user()->role === 'user'): ?>
                        <!-- Cart Icon -->
                        <a href="<?php echo e(route('keranjang.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">
                            <i class="fas fa-shopping-cart text-xl"></i>
                            <?php if(isset($cartCount) && $cartCount > 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">
                                        <?php echo e($cartCount > 99 ? '99+' : $cartCount); ?>

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

                        <!-- Chat Icon -->
                        <a href="<?php echo e(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">
                            <i class="fas fa-comments text-xl"></i>
                            <?php if(isset($unreadChatCount) && $unreadChatCount > 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">
                                        <?php echo e($unreadChatCount > 99 ? '99+' : $unreadChatCount); ?>

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

                        <!-- NOTIF BELL FOR USER -->
                        <div class="relative">
                            <button id="notifButtonUser" onclick="toggleNotifDropdown(event)" 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">
                                <i class="fas fa-bell text-xl"></i>
                                <?php
                                    // Data from View Composer ($unreadReviews) is available globally
                                ?>
                                <?php if(isset($unreadReviews) && $unreadReviews->count() > 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">
                                            <?php echo e($unreadReviews->count()); ?>

                                        </span>
                                    </span>
                                <?php endif; ?>
                            </button>
                            <!-- Dropdown Notif -->
                            <div id="notifDropdownUser" class="hidden absolute right-0 mt-3 w-80 bg-white rounded-2xl shadow-2xl border border-gray-100 py-0 z-50 overflow-hidden">
                                <div class="px-4 py-4 border-b bg-gradient-to-r from-orange-50 to-white">
                                    <h3 class="text-sm font-bold text-gray-800 flex items-center gap-2">
                                        <i class="fas fa-bell text-orange-500"></i> Notifikasi
                                    </h3>
                                </div>
                                <div class="max-h-[400px] overflow-y-auto custom-scrollbar">
                                    <?php if(isset($unreadReviews)): ?>
                                        <?php $__empty_1 = true; $__currentLoopData = $unreadReviews; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                            <a href="<?php echo e(route('pesanan.show', $item['pesanan_id'])); ?>?review_produk=<?php echo e($item['produk_id']); ?>" class="block px-4 py-4 border-b last:border-0 hover:bg-orange-50 transition border-gray-50">
                                                <div class="flex gap-3 items-start">
                                                    <div class="w-12 h-12 rounded-xl bg-gray-50 flex-shrink-0 overflow-hidden border border-gray-100">
                                                        <img src="<?php echo e($item['foto'] ? asset('storage/'.$item['foto']) : asset('images/no-image.png')); ?>" class="w-full h-full object-cover">
                                                    </div>
                                                    <div class="flex-1 min-w-0">
                                                        <p class="text-xs font-bold text-orange-600 mb-1 uppercase tracking-wider">Silahkan mengulas produk ini</p>
                                                        <p class="text-sm text-gray-800 font-semibold line-clamp-2 leading-snug mb-2"><?php echo e($item['nama_produk']); ?></p>
                                                        <div class="flex items-center justify-between">
                                                            <p class="text-[10px] text-gray-400 flex items-center gap-1">
                                                                <i class="fas fa-receipt text-[9px]"></i> <?php echo e($item['kode_pesanan']); ?>

                                                            </p>
                                                            <span class="text-[10px] bg-orange-100 text-orange-600 px-2 py-0.5 rounded-full font-bold">BELUM DIULAS</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                                            <div class="px-6 py-10 text-center">
                                                <div class="w-16 h-16 bg-gray-50 rounded-full flex items-center justify-center mx-auto mb-4 border border-gray-100">
                                                    <i class="fas fa-bell-slash text-gray-300 text-2xl"></i>
                                                </div>
                                                <p class="text-sm text-gray-500 font-bold">Tidak ada notifikasi baru</p>
                                                <p class="text-xs text-gray-400 mt-2 px-10">Semua produk yang Anda beli sudah diulas. Terima kasih!</p>
                                            </div>
                                        <?php endif; ?>
                                    <?php endif; ?>
                                </div>
                                <?php if(isset($unreadReviews) && $unreadReviews->count() > 0): ?>
                                    <div class="px-4 py-3 bg-gray-50 text-center border-t border-gray-100">
                                        <p class="text-[10px] text-gray-400 italic">* Klik pada notifikasi untuk memberikan ulasan</p>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>
                    <?php endif; ?>

                    <?php if(auth()->check() && auth()->user()->role === 'penjual'): ?>
                        <!-- NOTIF ICONS FOR SELLER -->
                        <!-- Restok Icon -->
                        <a href="<?php echo e(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>
                            <?php 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">
                                        <?php echo e($sellerRestokCount > 99 ? '99+' : $sellerRestokCount); ?>

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

                        <!-- Chat Icon -->
                        <a href="<?php echo e(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>
                            <?php 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">
                                        <?php echo e($sellerUnreadChatCount > 99 ? '99+' : $sellerUnreadChatCount); ?>

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

                        <!-- Ulasan Icon -->
                        <a href="<?php echo e(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>
                            <?php 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">
                                        <?php echo e($sellerUnreadUlasanCount > 99 ? '99+' : $sellerUnreadUlasanCount); ?>

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

                    <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">
                                <?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-orange-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-orange-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-blue-500"></i> Customer <?php 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">
                                        <?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-orange-100 text-orange-600 <?php elseif(Auth::user()->role == 'admin'): ?> bg-purple-100 text-purple-600 <?php else: ?> bg-blue-100 text-blue-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-orange-50 text-gray-700 transition group">
                                        <div class="w-8 h-8 bg-orange-100 rounded-lg flex items-center justify-center group-hover:bg-orange-200"><i class="fas fa-store text-orange-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-orange-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-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>
                            <?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-orange-500 via-orange-600 to-orange-700 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>
    </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</h1>
            <p class="text-orange-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' : 'pembeli'); ?>

            </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-gray-100 overflow-hidden">
    <div class="p-5 bg-gradient-to-r from-orange-50 to-white border-b border-black" style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #000000;">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 bg-orange-100 rounded-xl flex items-center justify-center">
                    <i class="fas fa-comment-dots text-orange-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';
                            $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-black hover:bg-gray-50 transition" style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #000000;">
                        <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-orange-100 to-orange-200 rounded-full flex items-center justify-center text-orange-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 setelah melakukan pemesanan.
                                <?php else: ?>
                                    Anda akan melihat ch``at dengan pembeli setelah ada yang memesan produk Anda.
                                <?php endif; ?>
                            </p>
                        </td>
                    </tr>
                <?php endif; ?>
            </tbody>
        </table>
        
        <?php if($chats->hasPages()): ?>
            <div class="px-4 py-3 border-t border-gray-100">
                <?php echo e($chats->links()); ?>

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

    <script>
    // ============================================================
    // NOTIFIKASI TOGGLE (untuk user)
    // ============================================================
    function toggleNotifDropdown(event) {
        if (event) { event.preventDefault(); event.stopPropagation(); }
        const dropdown = document.getElementById('notifDropdownUser');
        if (dropdown) {
            dropdown.classList.toggle('hidden');
        }
        // Close user dropdown if open
        const userDropdown = document.getElementById('dropdownMenu');
        if (userDropdown) userDropdown.classList.add('hidden');
    }

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

        if (dropdown.classList.contains('hidden')) {
            dropdown.classList.remove('hidden');
            if (icon) icon.style.transform = 'rotate(180deg)';
        } else {
            dropdown.classList.add('hidden');
            if (icon) icon.style.transform = 'rotate(0deg)';
        }
        // Close notif dropdown if open
        const notifDropdown = document.getElementById('notifDropdownUser');
        if (notifDropdown) notifDropdown.classList.add('hidden');
    }

    // Tutup dropdown saat klik di luar
    document.addEventListener('click', function(event) {
        const userDropdown = document.getElementById('userDropdown');
        const dropdownMenu = document.getElementById('dropdownMenu');
        const notifDropdown = document.getElementById('notifDropdownUser');
        const notifButton = document.getElementById('notifButtonUser');

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

        if (notifDropdown && notifButton && !notifButton.contains(event.target) && !notifDropdown.contains(event.target)) {
            if (!notifDropdown.classList.contains('hidden')) {
                notifDropdown.classList.add('hidden');
            }
        }
    });


        // Refresh unread count setiap 30 detik
        function refreshUnreadCount() {
            fetch(document.body.dataset.unreadCountUrl)
                .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**/ ?>