<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard Monitoring - Disnaker Pontianak</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <script src="https://unpkg.com/lucide@latest"></script>
    <style>
        body { font-family: 'Inter', sans-serif; background-color: #F8FAFC; }
        .sidebar-active { background-color: #FFFFFF; color: #0D215C; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05); }
        .custom-scroll::-webkit-scrollbar { width: 6px; }
        .custom-scroll::-webkit-scrollbar-track { background: transparent; }
        .custom-scroll::-webkit-scrollbar-thumb { background: #E2E8F0; border-radius: 10px; }
    </style>
</head>
<body class="flex h-screen overflow-hidden text-slate-700">

    <aside class="w-64 bg-[#F8FAFC] border-r border-slate-200 flex flex-col">
        <div class="p-8 mb-4">
            <h1 class="text-[#0D215C] font-extrabold text-xl tracking-tight">Disnaker</h1>
            <p class="text-slate-400 text-[10px] font-bold tracking-widest uppercase mt-0.5">Kota Pontianak</p>
        </div>

        <nav class="flex-1 px-4 space-y-1">
            <a href="#" class="sidebar-active flex items-center gap-3 p-3 rounded-xl font-bold text-sm transition-all">
                <i data-lucide="layout-grid" class="w-5 h-5"></i> Dashboard
            </a>
           <a href="{{ route('input.activity') }}" class="flex items-center gap-3 p-3 rounded-xl text-slate-400 hover:text-[#0D215C] font-semibold text-sm transition-all group">
                <i data-lucide="bar-chart-3" class="w-5 h-5"></i> Activity Report
            </a>
            <a href="{{ route('input.activity') }}" class="flex items-center gap-3 p-3 rounded-xl text-slate-400 hover:text-[#0D215C] font-semibold text-sm transition-all group">
                <i data-lucide="file-text" class="w-5 h-5"></i> Input Activity
            </a>
        </nav>

        <div class="p-4 border-t border-slate-200 space-y-1 mb-4">
            <a href="#" class="flex items-center gap-3 p-3 rounded-xl text-slate-400 hover:text-[#0D215C] font-semibold text-sm transition-all">
                <i data-lucide="settings" class="w-5 h-5"></i> Pengaturan
            </a>
        <a href="{{ route('logout') }}" class="flex items-center gap-3 p-3 rounded-xl text-red-400 hover:bg-red-50 font-bold text-sm transition-all">
    <i data-lucide="log-out" class="w-5 h-5"></i> Logout
            </a>
        </div>
    </aside>

    <main class="flex-1 overflow-y-auto bg-white m-4 rounded-[32px] border border-slate-100 shadow-sm relative custom-scroll">
        
        <div class="sticky top-0 bg-white/80 backdrop-blur-md px-10 py-6 flex justify-between items-center z-10 border-b border-slate-50 border-dashed">
            <div class="relative w-96 group">
                <i data-lucide="search" class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300 group-focus-within:text-blue-500 transition-colors"></i>
                <input type="text" placeholder="Cari aktivitas atau pegawai..." 
                    class="w-full pl-11 pr-4 py-2.5 bg-slate-50 border border-slate-100 rounded-2xl focus:ring-4 focus:ring-blue-500/5 focus:border-blue-500/20 outline-none text-sm transition-all">
            </div>

            <div class="flex items-center gap-6">
                <button class="relative p-2 text-slate-400 hover:bg-slate-50 rounded-full transition-colors">
                    <i data-lucide="bell" class="w-5 h-5"></i>
                    <span class="absolute top-2.5 right-2.5 w-2 h-2 bg-red-500 rounded-full border-2 border-white"></span>
                </button>
                <div class="flex items-center gap-4 pl-6 border-l border-slate-100">
                    <div class="text-right">
                        <p class="text-xs font-extrabold text-[#0D215C]">Ahmad Ridwan</p>
                        <p class="text-[10px] text-slate-400 font-bold uppercase tracking-wider mt-0.5">Administrator</p>
                    </div>
                    <div class="w-10 h-10 rounded-2xl bg-[#0D215C] flex items-center justify-center shadow-lg shadow-blue-900/20 overflow-hidden border-2 border-slate-50">
                        <img src="https://ui-avatars.com/api/?name=Ahmad+Ridwan&background=0D215C&color=fff" alt="Avatar">
                    </div>
                </div>
            </div>
        </div>

        <div class="p-10">
            <div class="flex flex-col md:flex-row justify-between items-start md:items-end mb-10 gap-4">
                <div>
                    <h2 class="text-[28px] font-black text-[#0D215C] tracking-tight">Dashboard Monitoring</h2>
                    <p class="text-slate-400 text-sm mt-2 font-medium">Pantau progres dan efektivitas kerja pegawai secara real-time.</p>
                </div>
                <button class="bg-[#0D215C] text-white px-7 py-3 rounded-2xl font-bold text-xs uppercase tracking-widest hover:bg-blue-900 shadow-xl shadow-blue-900/20 active:scale-95 transition-all flex items-center gap-2">
                    <i data-lucide="plus" class="w-4 h-4"></i> Tambah Aktivitas
                </button>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
                <div class="bg-white p-6 rounded-[28px] border border-slate-100 shadow-sm border-l-4 border-blue-500 flex justify-between items-start hover:scale-[1.02] transition-all">
                    <div>
                        <p class="text-[11px] font-bold text-slate-400 uppercase tracking-widest mb-1">Total Activities</p>
                        <h3 class="text-3xl font-black text-[#0D215C]">1,284</h3>
                        <p class="text-[10px] text-green-500 font-bold mt-3 flex items-center gap-1">
                            <i data-lucide="trending-up" class="w-3 h-3"></i> +12% dari bulan lalu
                        </p>
                    </div>
                    <div class="w-12 h-12 bg-blue-50 rounded-2xl flex items-center justify-center">
                        <i data-lucide="archive" class="text-blue-500 w-6 h-6"></i>
                    </div>
                </div>
                <div class="bg-white p-6 rounded-[28px] border border-slate-100 shadow-sm border-l-4 border-green-500 flex justify-between items-start hover:scale-[1.02] transition-all">
                    <div>
                        <p class="text-[11px] font-bold text-slate-400 uppercase tracking-widest mb-1">Completed</p>
                        <h3 class="text-3xl font-black text-[#0D215C]">942</h3>
                        <div class="w-32 h-1.5 bg-slate-100 rounded-full mt-5 overflow-hidden">
                            <div class="w-[75%] h-full bg-green-500"></div>
                        </div>
                    </div>
                    <div class="w-12 h-12 bg-green-50 rounded-2xl flex items-center justify-center">
                        <i data-lucide="check-circle" class="text-green-500 w-6 h-6"></i>
                    </div>
                </div>
                <div class="bg-white p-6 rounded-[28px] border border-slate-100 shadow-sm border-l-4 border-amber-500 flex justify-between items-start hover:scale-[1.02] transition-all">
                    <div>
                        <p class="text-[11px] font-bold text-slate-400 uppercase tracking-widest mb-1">Ongoing</p>
                        <h3 class="text-3xl font-black text-[#0D215C]">215</h3>
                        <p class="text-[10px] text-slate-400 font-medium mt-4 italic">Dalam peninjauan aktif</p>
                    </div>
                    <div class="w-12 h-12 bg-amber-50 rounded-2xl flex items-center justify-center">
                        <i data-lucide="clock" class="text-amber-500 w-6 h-6"></i>
                    </div>
                </div>
                <div class="bg-white p-6 rounded-[28px] border border-slate-100 shadow-sm border-l-4 border-red-500 flex justify-between items-start hover:scale-[1.02] transition-all">
                    <div>
                        <p class="text-[11px] font-bold text-slate-400 uppercase tracking-widest mb-1">Pending</p>
                        <h3 class="text-3xl font-black text-[#0D215C]">127</h3>
                        <p class="text-[10px] text-red-500 font-bold mt-4 uppercase tracking-tighter">Perlu tindakan segera</p>
                    </div>
                    <div class="w-12 h-12 bg-red-50 rounded-2xl flex items-center justify-center">
                        <i data-lucide="alert-circle" class="text-red-500 w-6 h-6"></i>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-[32px] border border-slate-100 shadow-sm overflow-hidden">
                <div class="px-8 py-6 flex justify-between items-center border-b border-slate-50">
                    <h4 class="font-extrabold text-[#0D215C] tracking-tight">Recent Activities</h4>
                    <a href="#" class="text-[11px] font-black text-blue-600 uppercase tracking-widest hover:text-blue-800 transition-colors">Lihat Semua</a>
                </div>

                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead class="bg-slate-50/50">
                            <tr class="text-left text-[10px] font-black text-slate-400 uppercase tracking-[0.15em]">
                                <th class="px-8 py-5">Employee Name</th>
                                <th class="px-8 py-5">Activity</th>
                                <th class="px-8 py-5">Location</th>
                                <th class="px-8 py-5">Date</th>
                                <th class="px-8 py-5 text-center">Status</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-50">
                            <tr class="hover:bg-slate-50/50 transition-colors group">
                                <td class="px-8 py-5">
                                    <div class="flex items-center gap-3">
                                        <div class="w-9 h-9 rounded-xl bg-blue-50 flex items-center justify-center text-[10px] font-bold text-blue-600">BP</div>
                                        <span class="text-xs font-extrabold text-slate-700">Bambang Pamungkas</span>
                                    </div>
                                </td>
                                <td class="px-8 py-5 text-xs font-semibold text-slate-500">Audit K3 Lapangan</td>
                                <td class="px-8 py-5">
                                    <div class="flex items-center gap-1.5 text-xs font-semibold text-slate-400">
                                        <i data-lucide="map-pin" class="w-3 h-3"></i> Kawasan Industri
                                    </div>
                                </td>
                                <td class="px-8 py-5 text-xs font-bold text-slate-400">24 Okt 2023</td>
                                <td class="px-8 py-5 text-center">
                                    <span class="bg-green-100 text-green-600 px-4 py-1.5 rounded-lg text-[9px] font-black uppercase tracking-widest">Completed</span>
                                </td>
                            </tr>
                            <tr class="hover:bg-slate-50/50 transition-colors group">
                                <td class="px-8 py-5">
                                    <div class="flex items-center gap-3">
                                        <div class="w-9 h-9 rounded-xl bg-purple-50 flex items-center justify-center text-[10px] font-bold text-purple-600">SP</div>
                                        <span class="text-xs font-extrabold text-slate-700">Siti Permata</span>
                                    </div>
                                </td>
                                <td class="px-8 py-5 text-xs font-semibold text-slate-500">Sosialisasi BPJS TK</td>
                                <td class="px-8 py-5">
                                    <div class="flex items-center gap-1.5 text-xs font-semibold text-slate-400">
                                        <i data-lucide="map-pin" class="w-3 h-3"></i> Aula Kantor Camat
                                    </div>
                                </td>
                                <td class="px-8 py-5 text-xs font-bold text-slate-400">24 Okt 2023</td>
                                <td class="px-8 py-5 text-center">
                                    <span class="bg-amber-100 text-amber-600 px-4 py-1.5 rounded-lg text-[9px] font-black uppercase tracking-widest">Ongoing</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </main>

    <script>
        // Inisialisasi Ikon Lucide
        lucide.createIcons();
    </script>
</body>
</html>