<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Data Admin & User - Glow Beauty</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Google Fonts -->
    <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;
        }

        .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;
        }

        .table-row-hover:hover {
            background-color: #fef2f8;
            transform: translateY(-1px);
            transition: all 0.3s ease;
        }

        .btn-primary {
            background: linear-gradient(135deg, #f472b6 0%, #ec489a 100%);
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(244, 114, 182, 0.3);
        }

        .action-btn {
            transition: all 0.2s ease;
        }

        .action-btn:hover {
            transform: translateY(-2px);
        }

        .role-badge {
            font-size: 0.75rem;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
        }

        .role-admin {
            background: linear-gradient(135deg, #f472b6 0%, #ec489a 100%);
            color: white;
        }

        .role-user {
            background-color: #e5e7eb;
            color: #374151;
        }

        .status-active {
            background-color: #d1fae5;
            color: #065f46;
        }

        .status-inactive {
            background-color: #fee2e2;
            color: #991b1b;
        }

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

        /* Notification badge */
        .notification-badge {
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }

        /* Shake animation */
        @keyframes shake {
            0%, 100% { transform: rotate(0); }
            25% { transform: rotate(15deg); }
            75% { transform: rotate(-15deg); }
        }
        .group:hover .group-hover\:animate-shake {
            animation: shake 0.3s ease-in-out;
        }

        .stat-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }

        @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 min-h-screen">
    <!-- ========== NAVBAR ATAS (MENU UTAMA) FULL WIDTH ========== -->
    <nav class="bg-white/95 backdrop-blur-md border-b border-pink-light shadow-sm sticky top-0 z-50 w-full">
        <div class="px-4 sm:px-6 lg:px-8 py-3">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between">

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

                <!-- MENU NAVIGASI DENGAN ICON -->
                <div class="flex flex-wrap items-center gap-1">

                    @php
                        // Badge Pesanan Masuk
                        $pendingPesananCount = \App\Models\Pesanan::where('status', 'pending')
                            ->whereHas('detail', function($q) {
                                $q->whereHas('produk', function($q2) {
                                    $q2->where('user_id', auth()->id());
                                });
                            })
                            ->count();

                        // Badge Restok
                        $restokCount = \App\Models\Produk::where('user_id', auth()->id())
                            ->where('stok', '<', 5)
                            ->count();

                        // Badge Chat
                        $unreadChatCount = 0;
                        $chats = \App\Models\Chat::where('penjual_id', auth()->id())->get();
                        foreach ($chats as $chatItem) {
                            $unreadChatCount += \App\Models\ChatMessage::where('chat_id', $chatItem->id)
                                ->where('sender_id', $chatItem->user_id)
                                ->where('is_read', false)
                                ->count();
                        }
                    @endphp

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

                    <a href="{{ route('kategori.index') }}"
                        class="flex items-center gap-2 px-4 py-2 rounded-lg
                        {{ request()->routeIs('kategori.*') ? 'bg-pink-100 text-pink-600' : 'text-gray-600 hover:bg-pink-50 hover:text-pink-600' }}
                        transition">
                        <i class="fas fa-tags"></i> Kategori
                    </a>

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

                    {{-- Pesanan Masuk --}}
                    <a href="{{ route('pesanan.masuk.index') }}"
                        class="flex items-center gap-2 px-4 py-2 rounded-lg {{ 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
                        @if($pendingPesananCount > 0)
                            <span class="bg-red-500 text-white text-xs font-bold px-1.5 py-0.5 rounded-full min-w-[18px] text-center">
                                {{ $pendingPesananCount > 99 ? '99+' : $pendingPesananCount }}
                            </span>
                        @endif
                    </a>

                    {{-- Restok --}}
                    <a href="{{ route('restok.index') }}"
                        class="flex items-center gap-2 px-4 py-2 rounded-lg {{ request()->routeIs('restok.*') ? 'bg-pink-500 text-white shadow' : 'text-gray-600 hover:bg-pink-50 hover:text-pink-600' }} transition">
                        <i class="fas fa-boxes"></i> Restok
                        @if($restokCount > 0)
                            <span class="bg-red-500 text-white text-xs font-bold px-1.5 py-0.5 rounded-full min-w-[18px] text-center animate-pulse">
                                {{ $restokCount > 99 ? '99+' : $restokCount }}
                            </span>
                        @endif
                    </a>

                    {{-- Chat --}}
                    <a href="{{ route('chat.index') }}"
                        class="flex items-center gap-2 px-4 py-2 rounded-lg
                        {{ request()->routeIs('chat.*') ? 'bg-pink-100 text-pink-600' : 'text-gray-600 hover:bg-pink-50 hover:text-pink-600' }}
                        transition">
                        <i class="fas fa-comments"></i> Chat
                        @if($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">
                                {{ $unreadChatCount > 99 ? '99+' : $unreadChatCount }}
                            </span>
                        @endif
                    </a>

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

                </div>

                <!-- USER MENU -->
                <div class="flex items-center gap-2 mt-3 md:mt-0">

                    <!-- USER MENU -->
                    <div class="flex items-center gap-2 mt-3 md:mt-0">

                        <!-- USER DROPDOWN -->
                        <div class="relative" id="userDropdown">
                            <button onclick="toggleDropdown()" 
                            class="flex items-center gap-3 px-3 py-2 hover:bg-pink-50 rounded-xl transition-all duration-200 border border-transparent hover:border-pink-200 group">

                                <div class="w-9 h-9 bg-gradient-to-br from-pink-400 to-pink-500 rounded-full 
                                            flex items-center justify-center text-white font-semibold shadow-md">
                                    {{ substr(Auth::user()->name,0,1) }}
                                </div>

                                <div class="hidden md:block text-left">
                                    <p class="text-sm font-medium text-gray-700 group-hover:text-pink-600">
                                        {{ Auth::user()->name }}
                                    </p>
                                   <p class="text-xs text-gray-500 capitalize flex items-center gap-1">
                                        <i class="fas fa-store text-pink-500 mr-1"></i>
                                        Penjual
                                    </p>
                                </div>

                                <i id="dropdownIcon"
                                class="fas fa-chevron-down text-sm text-gray-400 group-hover:text-pink-600 
                                        transition-transform duration-200"></i>
                            </button>

                            <!-- DROPDOWN -->
                            <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">

                                <!-- USER INFO -->
                                <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">
                                            {{ 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-flex items-center gap-1 mt-1 px-2 py-0.5 
                                                        bg-pink-100 text-pink-600 rounded-full 
                                                        text-xs font-medium">
                                                <i class="fas fa-store text-pink-500 mr-1"></i>
                                                Penjual
                                            </span>
                                        </div>
                                    </div>
                                </div>

                                <!-- PROFILE -->
                                <a href="{{ route('profile.edit') }}"
                                class="flex items-center gap-3 px-4 py-3 hover:bg-pink-50 
                                        text-gray-700 transition group">

                                    <div class="w-8 h-8 bg-gray-100 rounded-lg flex items-center 
                                                justify-center group-hover:bg-pink-100">
                                        <i class="fas fa-user text-gray-500 group-hover:text-pink-600"></i>
                                    </div>

                                    <div>
                                        <p class="font-medium">Profil Saya</p>
                                        <p class="text-xs text-gray-500">Lihat dan edit profil</p>
                                    </div>
                                </a>

                                <!-- LOGOUT -->
                                <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>
        </div>
    </nav>

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

        <div class="relative mb-8 overflow-hidden rounded-2xl bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 p-6 text-white shadow-xl w-full">
            {{-- Background Decorations --}}
            <div class="absolute top-0 right-0 w-64 h-64 opacity-10">
                <i class="fas fa-users text-8xl absolute top-10 right-10"></i>
                <i class="fas fa-user-shield text-7xl absolute bottom-0 right-32"></i>
                <i class="fas fa-user-plus text-6xl absolute top-20 right-48"></i>
                <i class="fas fa-spa text-7xl absolute bottom-10 left-10"></i>
            </div>
            <div class="absolute bottom-0 left-0 w-48 h-48 bg-white opacity-5 rounded-full -ml-16 -mb-16"></div>
            
            <div class="relative">
                {{-- Top Section --}}
                <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-4">
                    <div class="flex items-center gap-3">
                        <div class="w-12 h-12 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center shadow-inner border border-white/30">
                            <i class="fas fa-users text-white text-2xl"></i>
                        </div>
                        <div>
                            <h2 class="text-2xl font-bold text-white">Manajemen Pengguna Skincare</h2>
                            <p class="text-pink-100 text-sm">Kelola semua akun penjual skincare, kurir, dan pengguna sistem</p>
                        </div>
                    </div>
                    
                    <div class="flex-shrink-0">
                        <a href="{{ route('user.create') }}"
                        class="inline-flex items-center gap-2 border-2 border-white/30 text-white bg-white/20 backdrop-blur-sm px-6 py-2.5 rounded-xl font-semibold hover:bg-white/30 transition-all action-btn">
                            <i class="fas fa-plus-circle"></i>
                            <span>Tambah User</span>
                        </a>
                    </div>
                </div>
                
                {{-- Bottom Section - Stats --}}
                <div class="flex flex-wrap items-center gap-3 pt-4 border-t border-white/20">
                    <div class="flex items-center gap-2 bg-white/20 backdrop-blur-sm px-3 py-1.5 rounded-xl">
                        <i class="fas fa-store text-pink-200 text-xs"></i>
                        <span class="text-pink-100 text-sm">Total Penjual Skincare:</span>
                        <span class="font-bold text-white">{{ $totalPenjual ?? 0 }}</span>
                    </div>
                    <div class="flex items-center gap-2 bg-white/20 backdrop-blur-sm px-3 py-1.5 rounded-xl">
                        <i class="fas fa-truck text-pink-200 text-xs"></i>
                        <span class="text-pink-100 text-sm">Total Kurir:</span>
                        <span class="font-bold text-white">{{ $totalKurir ?? 0 }}</span>
                    </div>
                    <div class="flex items-center gap-2 bg-white/20 backdrop-blur-sm px-3 py-1.5 rounded-xl">
                        <i class="fas fa-users text-pink-200 text-xs"></i>
                        <span class="text-pink-100 text-sm">Total User:</span>
                        <span class="font-bold text-white">{{ $totalUser ?? 0 }}</span>
                    </div>
                </div>
            </div>
        </div>
                <!-- MAIN CONTENT CARD -->
                <div class="bg-white rounded-xl shadow-lg border border-pink-100 overflow-hidden w-full">
                        <!-- HEADER CARD -->
                        <div class="px-6 py-4 border-b border-pink-100 bg-gradient-to-r from-pink-50 to-white flex flex-col md:flex-row md:justify-between md:items-center gap-4">
                        <div>
                    <h3 class="font-bold text-gray-800 text-lg flex items-center gap-2">
                        <i class="fas fa-list text-pink-500"></i>
                        Daftar Pengguna
                    </h3>
                    <p class="text-sm text-gray-500 mt-1">Kelola semua akun penjual skincare, kurir, dan user sistem</p>
                </div>

                <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
                    <!-- SEARCH -->
                    <form method="GET" action="{{ route('user.index') }}" id="searchForm">
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-search text-gray-400"></i>
                            </div>
                            <input type="text"
                                name="search"
                                id="searchInput"
                                value="{{ request('search') }}"
                                placeholder="Cari user..."
                                onchange="this.form.submit()"
                                class="pl-10 pr-4 py-2.5 border border-pink-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent text-sm w-full sm:w-64">
                        </div>
                    </form>

                    <!-- RESET -->
                    <a href="{{ route('user.index') }}" title="Reset Filter"
                        class="p-2.5 bg-gray-100 text-gray-700 border border-pink-200 rounded-lg hover:bg-gray-200 transition flex items-center justify-center">
                        <i class="fas fa-undo-alt"></i>
                    </a>
                </div>
            </div>

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

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

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

    setTimeout(() => closeToast(), 5100);

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

            <!-- TABLE -->
            <div class="overflow-x-auto">
                @if($users->isEmpty())
                    <!-- EMPTY STATE -->
                    <div class="py-16 text-center">
                        <div class="mx-auto w-24 h-24 bg-pink-50 rounded-full flex items-center justify-center mb-6">
                            <i class="fas fa-user-friends text-pink-400 text-3xl"></i>
                        </div>
                        <h4 class="text-lg font-medium text-gray-700 mb-2">Belum ada data pengguna</h4>
                        <p class="text-gray-500 mb-6">Mulai dengan menambahkan pengguna pertama Anda</p>
                        <a href="{{ route('user.create') }}"
                           class="btn-primary text-white px-5 py-2.5 rounded-lg font-medium inline-flex items-center gap-2">
                            <i class="fas fa-user-plus"></i>
                            Tambah Pengguna Pertama
                        </a>
                    </div>
                @else
                    <div class="overflow-x-auto">
                        <table class="w-full">
                            <thead class="bg-pink-50">
                                <tr>
                                    <th class="px-6 py-4 text-left text-xs font-semibold text-pink-800 uppercase tracking-wider w-20">
                                        <i class="fas fa-hashtag mr-1"></i>
                                        No
                                    </th>
                                    <th class="px-6 py-4 text-left text-xs font-semibold text-pink-800 uppercase tracking-wider">
                                        <i class="fas fa-address-book mr-1"></i>
                                        Kontak
                                    </th>
                                    <th class="px-6 py-4 text-left text-xs font-semibold text-pink-800 uppercase tracking-wider">
                                        <i class="fas fa-tag mr-1"></i>
                                        Role & Status
                                    </th>
                                    <th class="px-6 py-4 text-left text-xs font-semibold text-pink-800 uppercase tracking-wider w-48">
                                        <i class="fas fa-cog mr-1"></i>
                                        Aksi
                                    </th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-pink-100" id="userTableBody">
                                @foreach($users as $index => $u)
                                    <tr class="table-row-hover">
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm font-medium text-gray-600">
                                                {{ $index + 1 }}
                                            </div>
                                        </td>
                                        <td class="px-6 py-4">
                                            <div class="space-y-1">
                                                <div class="flex items-center gap-2">
                                                    <i class="fas fa-envelope text-pink-400 text-xs w-4"></i>
                                                    <span class="text-sm text-gray-700 break-all">{{ $u->email }}</span>
                                                </div>
                                                @if($u->no_hp)
                                                    <div class="flex items-center gap-2">
                                                        <i class="fas fa-phone text-pink-400 text-xs w-4"></i>
                                                        <span class="text-sm text-gray-700">{{ $u->no_hp }}</span>
                                                    </div>
                                                @endif
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="flex flex-col gap-2">
                                                <span class="role-badge {{ $u->role === 'admin' ? 'role-admin' : 'role-user' }}">
                                                    <i class="fas {{ $u->role === 'admin' ? 'fa-user-shield' : 'fa-user' }}"></i>
                                                    {{ ucfirst($u->role) }}
                                                </span>

                                                <!-- Status Active/Inactive -->
                                                @php
                                                    $status = isset($u->status) ? $u->status : 'active';
                                                @endphp
                                                <span class="role-badge {{ $status === 'active' ? 'status-active' : 'status-inactive' }}">
                                                    <i class="fas fa-circle" style="font-size: 6px;"></i>
                                                    {{ ucfirst($status) }}
                                                </span>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="flex items-center gap-2">
                                                <!-- EDIT BUTTON -->
                                                <a href="{{ route('user.edit', $u->ID) }}"
                                                   class="action-btn px-4 py-2 bg-blue-100 text-blue-700 rounded-lg font-medium text-sm hover:bg-blue-200 flex items-center gap-2">
                                                    <i class="fas fa-edit"></i>
                                                    Edit
                                                </a>

                                                <!-- DELETE BUTTON -->
                                                <form action="{{ route('user.destroy', $u->ID) }}" method="POST" class="inline" id="deleteForm{{ $u->ID }}">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="button"
                                                        data-id="{{ $u->ID }}"
                                                        data-nama="{{ $u->nama }}"
                                                        onclick="confirmDelete(this.dataset.id, this.dataset.nama)"
                                                        class="action-btn px-4 py-2 bg-red-100 text-red-700 rounded-lg font-medium text-sm hover:bg-red-200 flex items-center gap-2">
                                                        <i class="fas fa-trash"></i>
                                                        Hapus
                                                    </button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <!-- PAGINATION -->
                    @if(method_exists($users, 'hasPages') && $users->hasPages())
                        <div class="px-6 py-4 border-t border-pink-100">
                            {{ $users->links() }}
                        </div>
                    @endif
                @endif
            </div>
        </div>
    </div>

    <!-- DELETE CONFIRMATION MODAL -->
    <div id="deleteModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
        <div class="bg-white rounded-2xl p-6 max-w-md w-full mx-4 shadow-2xl transform transition-all">
            <div class="flex items-center gap-4 mb-4">
                <div class="w-14 h-14 bg-red-100 rounded-full flex items-center justify-center">
                    <i class="fas fa-exclamation-triangle text-red-600 text-2xl"></i>
                </div>
                <div>
                    <h3 class="font-bold text-gray-800 text-lg" id="deleteModalTitle">Hapus User?</h3>
                    <p class="text-gray-600 text-sm" id="deleteModalSubtitle"></p>
                </div>
                <button onclick="closeDeleteModal()" class="ml-auto text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <div class="p-4 bg-red-50 rounded-lg mb-6 border border-red-100">
                <p class="text-red-700 text-sm flex items-start gap-2">
                    <i class="fas fa-exclamation-circle mt-0.5"></i>
                    <span>
                        Aksi ini akan menghapus user <strong id="userNameToDelete" class="font-bold"></strong> secara permanen.
                        <br>Semua data terkait user ini juga akan ikut terhapus.
                    </span>
                </p>
            </div>

            <div class="flex justify-end gap-3">
                <button onclick="closeDeleteModal()"
                        class="px-5 py-2.5 text-gray-700 font-medium hover:bg-gray-100 rounded-lg transition border border-gray-300 flex items-center gap-2">
                    <i class="fas fa-times"></i>
                    Batal
                </button>
                <form id="deleteForm" method="POST" class="inline">
                    @csrf
                    @method('DELETE')
                    <button type="submit"
                            class="px-5 py-2.5 bg-red-600 text-white font-medium hover:bg-red-700 rounded-lg transition flex items-center gap-2 shadow-lg hover:shadow-xl">
                        <i class="fas fa-trash"></i>
                        Ya, Hapus
                    </button>
                </form>
            </div>
        </div>
    </div>

    <script>
        // Toggle Dropdown dengan animasi
        function toggleDropdown() {
            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)';
            }
        }

        // Toggle Notifications
        function toggleNotifications() {
            alert('Fitur notifikasi akan segera hadir!');
        }

        // Close dropdown when clicking outside
        window.addEventListener('click', function(event) {
            const dropdown = document.getElementById('dropdownMenu');
            const button = event.target.closest('button');
            const isDropdownButton = button && button.getAttribute('onclick')?.includes('toggleDropdown');

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

        // Delete Confirmation
        function confirmDelete(userId, userName) {
            document.getElementById('userNameToDelete').innerHTML = userName;
            document.getElementById('deleteModalTitle').innerHTML = 'Hapus ' + userName + '?';
            document.getElementById('deleteModalSubtitle').innerHTML = 'User ID: #' + userId;

            // Set form action
            document.getElementById('deleteForm').action = '/user/' + userId;

            // Show modal
            document.getElementById('deleteModal').classList.remove('hidden');
            document.getElementById('deleteModal').classList.add('flex');

            // Prevent body scroll
            document.body.style.overflow = 'hidden';
        }

        function closeDeleteModal() {
            document.getElementById('deleteModal').classList.add('hidden');
            document.getElementById('deleteModal').classList.remove('flex');
            document.body.style.overflow = 'auto';
        }

        // Close modal when clicking outside
        document.getElementById('deleteModal').addEventListener('click', function(e) {
            if (e.target.id === 'deleteModal') {
                closeDeleteModal();
            }
        });

        // Close modal with ESC key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && !document.getElementById('deleteModal').classList.contains('hidden')) {
                closeDeleteModal();
            }
        });

        // Auto-hide success alert after 5 seconds
        // @if (session('success'))
            setTimeout(function() {
                const alert = document.querySelector('.bg-pink-50');
                if (alert) {
                    alert.style.transition = 'opacity 0.5s';
                    alert.style.opacity = '0';
                    setTimeout(() => alert.remove(), 500);
                }
            }, 5000);
        // @endif

        // Search functionality
        document.addEventListener('DOMContentLoaded', function() {
            const searchInput = document.getElementById('searchInput');
            if (searchInput) {
                searchInput.addEventListener('input', function(e) {
                    const searchTerm = e.target.value.toLowerCase().trim();
                    const rows = document.querySelectorAll('#userTableBody tr');
                    let visibleCount = 0;

                    rows.forEach(row => {
                        const userName = row.querySelector('.font-semibold')?.textContent.toLowerCase() || '';
                        const userEmail = row.querySelector('.fa-envelope + span')?.textContent.toLowerCase() || '';
                        const userRole = row.querySelector('.role-badge:first-child')?.textContent.toLowerCase() || '';

                        if (userName.includes(searchTerm) || userEmail.includes(searchTerm) || userRole.includes(searchTerm)) {
                            row.style.display = '';
                            visibleCount++;
                        } else {
                            row.style.display = 'none';
                        }
                    });

                    // Show no results message
                    const noResultsRow = document.getElementById('noResultsRow');
                    if (visibleCount === 0) {
                        if (!noResultsRow) {
                            const tbody = document.getElementById('userTableBody');
                            const tr = document.createElement('tr');
                            tr.id = 'noResultsRow';
                            tr.innerHTML = `
                                <td colspan="5" class="px-6 py-12 text-center">
                                    <div class="flex flex-col items-center">
                                        <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
                                            <i class="fas fa-search text-gray-400 text-2xl"></i>
                                        </div>
                                        <p class="text-gray-500 font-medium">Tidak ada user yang ditemukan</p>
                                        <p class="text-gray-400 text-sm mt-1">Coba gunakan kata kunci lain</p>
                                    </div>
                                </td>
                            `;
                            tbody.appendChild(tr);
                        }
                    } else {
                        if (noResultsRow) {
                            noResultsRow.remove();
                        }
                    }
                });
            }
        });
    </script>
</body>
</html>