<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PX360 - Complaint Management System</title>
    <link rel="stylesheet" href="/static/dist/css/tailwind.css">
    <link rel="stylesheet" href="/static/vendor/fonts/noto-kufi-arabic/arabic.css">
    <script src="https://unpkg.com/lucide@latest"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        body { font-family: 'Inter', 'Noto Kufi Arabic', sans-serif; background-color: #f8fafc; }
        [dir="rtl"] body,
        [dir="rtl"] input,
        [dir="rtl"] textarea,
        [dir="rtl"] select,
        [dir="rtl"] button {
            font-family: 'Noto Kufi Arabic', sans-serif;
        }
        .sidebar-active { background-color: #ffffff20; border-left: 4px solid #fff; }
        .status-resolved { background-color: #dcfce7; color: #166534; }
        .status-pending { background-color: #fef9c3; color: #854d0e; }
        .status-investigation { background-color: #e0f2fe; color: #075985; }
        .status-escalated { background-color: #fee2e2; color: #991b1b; }
    </style>
</head>
<body class="flex h-screen overflow-hidden">

    <aside class="w-64 bg-navy text-white flex flex-col shadow-2xl z-20">
        <div class="p-6 flex items-center gap-3 border-b border-white/10">
            <div class="bg-white p-2 rounded-xl"><i data-lucide="activity" class="text-navy w-6 h-6"></i></div>
            <div>
                <h1 class="text-xl font-black tracking-tighter">PX360</h1>
                <p class="text-[8px] font-bold text-blue-200 tracking-widest uppercase">Analytics Platform</p>
            </div>
        </div>
        
        <nav class="flex-1 px-4 py-6 space-y-2">
            <div class="sidebar-item flex items-center gap-3 p-3 rounded-lg opacity-70 hover:opacity-100 cursor-pointer transition">
                <i data-lucide="layout-dashboard" class="w-5 h-5"></i>
                <span class="text-sm font-semibold">Dashboard</span>
            </div>
            <div class="sidebar-active flex items-center gap-3 p-3 rounded-lg cursor-pointer transition">
                <i data-lucide="file-text" class="w-5 h-5"></i>
                <span class="text-sm font-semibold">Complaints List</span>
            </div>
            <div class="sidebar-item flex items-center gap-3 p-3 rounded-lg opacity-70 hover:opacity-100 cursor-pointer transition">
                <i data-lucide="bar-chart-3" class="w-5 h-5"></i>
                <span class="text-sm font-semibold">KPI Reports</span>
            </div>
            <div class="sidebar-item flex items-center gap-3 p-3 rounded-lg opacity-70 hover:opacity-100 cursor-pointer transition">
                <i data-lucide="users" class="w-5 h-5"></i>
                <span class="text-sm font-semibold">Staff Directory</span>
            </div>
        </nav>

        <div class="p-4 border-t border-white/10">
            <div class="flex items-center gap-3 p-2">
                <div class="w-8 h-8 rounded-full bg-blue border-2 border-white/20 flex items-center justify-center font-bold text-xs">AA</div>
                <div class="flex-1 overflow-hidden">
                    <p class="text-xs font-bold truncate">Atheer Alqahtani</p>
                    <p class="text-[10px] text-white/50 truncate">Coordinator</p>
                </div>
                <i data-lucide="log-out" class="w-4 h-4 text-white/40 cursor-pointer"></i>
            </div>
        </div>
    </aside>

    <div class="flex-1 flex flex-col overflow-hidden">
        
        <header class="h-20 bg-white border-b px-8 flex items-center justify-between shadow-sm z-10">
            <div>
                <h2 class="text-xl font-bold text-navy">Complaints Registry</h2>
                <p class="text-xs text-slate font-medium">Manage and monitor patient feedback in real-time</p>
            </div>
            <div class="flex items-center gap-4">
                <div class="relative group">
                    <i data-lucide="search" class="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate group-focus-within:text-navy"></i>
                    <input type="text" placeholder="Search ID, Name or Dept..." class="pl-10 pr-4 py-2 bg-slate-100 border-transparent border focus:border-blue/30 focus:bg-white rounded-xl text-sm outline-none w-64 transition-all">
                </div>
                <button class="bg-navy text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-navy/20 hover:bg-blue flex items-center gap-2 transition">
                    <i data-lucide="plus" class="w-4 h-4"></i> New Case
                </button>
            </div>
        </header>

        <div class="grid grid-cols-4 gap-6 px-8 py-6 bg-slate-50/50 border-b">
            <div class="bg-white p-4 rounded-2xl border shadow-sm flex items-center gap-4">
                <div class="p-3 bg-blue/10 rounded-xl"><i data-lucide="layers" class="text-blue w-5 h-5"></i></div>
                <div><p class="text-[10px] font-bold text-slate uppercase tracking-wider">Total Received</p><p class="text-xl font-black text-navy leading-tight">689</p></div>
            </div>
            <div class="bg-white p-4 rounded-2xl border shadow-sm flex items-center gap-4">
                <div class="p-3 bg-green-50 rounded-xl"><i data-lucide="check-circle" class="text-green-600 w-5 h-5"></i></div>
                <div><p class="text-[10px] font-bold text-slate uppercase tracking-wider">Resolved</p><p class="text-xl font-black text-navy leading-tight">678 <span class="text-xs text-green-600">(98.4%)</span></p></div>
            </div>
            <div class="bg-white p-4 rounded-2xl border shadow-sm flex items-center gap-4">
                <div class="p-3 bg-yellow-50 rounded-xl"><i data-lucide="clock" class="text-yellow-600 w-5 h-5"></i></div>
                <div><p class="text-[10px] font-bold text-slate uppercase tracking-wider">Pending</p><p class="text-xl font-black text-navy leading-tight">11</p></div>
            </div>
            <div class="bg-white p-4 rounded-2xl border shadow-sm flex items-center gap-4">
                <div class="p-3 bg-red-50 rounded-xl"><i data-lucide="alert-triangle" class="text-red-500 w-5 h-5"></i></div>
                <div><p class="text-[10px] font-bold text-slate uppercase tracking-wider">TAT Alert</p><p class="text-xl font-black text-navy leading-tight">3 <span class="text-[10px] font-normal text-slate">Over 72h</span></p></div>
            </div>
        </div>

        <div class="px-8 py-4 bg-white flex items-center justify-between border-b">
            <div class="flex items-center gap-3">
                <button class="px-4 py-1.5 rounded-full bg-navy text-white text-xs font-bold">All Cases</button>
                <button class="px-4 py-1.5 rounded-full border text-slate text-xs font-semibold hover:bg-slate-50">Pending</button>
                <button class="px-4 py-1.5 rounded-full border text-slate text-xs font-semibold hover:bg-slate-50">Escalated</button>
                <button class="px-4 py-1.5 rounded-full border text-slate text-xs font-semibold hover:bg-slate-50">Resolved</button>
                <div class="h-4 w-[1px] bg-slate-200 mx-2"></div>
                <button class="flex items-center gap-2 text-xs font-bold text-blue uppercase tracking-tight"><i data-lucide="filter" class="w-3 h-3"></i> Advanced Filters</button>
            </div>
            <p class="text-[10px] font-bold text-slate uppercase">Showing: <span class="text-navy">1-10 of 689</span></p>
        </div>

        <main class="flex-1 overflow-y-auto p-8">
            <div class="bg-white rounded-2xl shadow-sm border overflow-hidden">
                <table class="w-full text-left border-collapse">
                    <thead class="bg-slate-50 border-b uppercase text-[10px] font-bold text-slate tracking-wider">
                        <tr>
                            <th class="px-6 py-4">Complaint ID</th>
                            <th class="px-6 py-4">Patient Name</th>
                            <th class="px-6 py-4">Source</th>
                            <th class="px-6 py-4">Department</th>
                            <th class="px-6 py-4">Status</th>
                            <th class="px-6 py-4 text-center">Priority</th>
                            <th class="px-6 py-4 text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="text-sm divide-y divide-slate-100">
                        <tr class="hover:bg-light/30 transition-colors cursor-pointer group">
                            <td class="px-6 py-4 font-bold text-navy">#8842</td>
                            <td class="px-6 py-4">
                                <div class="font-semibold text-slate-800">Mohammad Al-Otaibi</div>
                                <div class="text-[10px] text-slate font-medium">Patient Ref: PX-9921</div>
                            </td>
                            <td class="px-6 py-4"><span class="bg-slate-100 px-2 py-0.5 rounded text-[10px] font-bold text-slate-600">MOH TAWASUL</span></td>
                            <td class="px-6 py-4 text-slate-600">Emergency Room (ER)</td>
                            <td class="px-6 py-4">
                                <span class="status-investigation px-2.5 py-1 rounded-full text-[10px] font-bold uppercase">Investigating</span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex justify-center"><span class="w-2 h-2 rounded-full bg-orange-500 shadow-sm shadow-orange-200"></span></div>
                            </td>
                            <td class="px-6 py-4 text-right">
                                <div class="flex justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                                    <button class="p-1.5 text-navy hover:bg-white rounded border border-transparent hover:border-slate-200"><i data-lucide="eye" class="w-4 h-4"></i></button>
                                    <button class="p-1.5 text-blue hover:bg-white rounded border border-transparent hover:border-slate-200"><i data-lucide="user-plus" class="w-4 h-4"></i></button>
                                </div>
                            </td>
                        </tr>
                        <tr class="hover:bg-light/30 transition-colors cursor-pointer group">
                            <td class="px-6 py-4 font-bold text-navy">#8841</td>
                            <td class="px-6 py-4">
                                <div class="font-semibold text-slate-800">Sarah Johnson</div>
                                <div class="text-[10px] text-slate font-medium">Relative (Daughter)</div>
                            </td>
                            <td class="px-6 py-4"><span class="bg-blue/5 px-2 py-0.5 rounded text-[10px] font-bold text-blue">CHI</span></td>
                            <td class="px-6 py-4 text-slate-600">Billing & Approvals</td>
                            <td class="px-6 py-4">
                                <span class="status-resolved px-2.5 py-1 rounded-full text-[10px] font-bold uppercase">Resolved</span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex justify-center"><span class="w-2 h-2 rounded-full bg-green-500"></span></div>
                            </td>
                            <td class="px-6 py-4 text-right">
                                <div class="flex justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                                    <button class="p-1.5 text-navy hover:bg-white rounded border border-transparent hover:border-slate-200"><i data-lucide="eye" class="w-4 h-4"></i></button>
                                    <button class="p-1.5 text-blue hover:bg-white rounded border border-transparent hover:border-slate-200"><i data-lucide="user-plus" class="w-4 h-4"></i></button>
                                </div>
                            </td>
                        </tr>
                        <tr class="hover:bg-light/30 transition-colors cursor-pointer group">
                            <td class="px-6 py-4 font-bold text-navy">#8839</td>
                            <td class="px-6 py-4">
                                <div class="font-semibold text-slate-800">Abdullah Al-Dosari</div>
                                <div class="text-[10px] text-slate font-medium">Patient Ref: PX-4412</div>
                            </td>
                            <td class="px-6 py-4"><span class="bg-slate-100 px-2 py-0.5 rounded text-[10px] font-bold text-slate-600">HOSPITAL APP</span></td>
                            <td class="px-6 py-4 text-slate-600">Internal Medicine</td>
                            <td class="px-6 py-4">
                                <span class="status-pending px-2.5 py-1 rounded-full text-[10px] font-bold uppercase">New</span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex justify-center"><span class="w-2 h-2 rounded-full bg-red-500 animate-pulse"></span></div>
                            </td>
                            <td class="px-6 py-4 text-right">
                                <div class="flex justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                                    <button class="p-1.5 text-navy hover:bg-white rounded border border-transparent hover:border-slate-200"><i data-lucide="eye" class="w-4 h-4"></i></button>
                                    <button class="p-1.5 text-blue hover:bg-white rounded border border-transparent hover:border-slate-200"><i data-lucide="user-plus" class="w-4 h-4"></i></button>
                                </div>
                            </td>
                        </tr>
                        <tr class="hover:bg-light/30 transition-colors cursor-pointer group">
                            <td class="px-6 py-4 font-bold text-navy">#8835</td>
                            <td class="px-6 py-4">
                                <div class="font-semibold text-slate-800">Mariam Shahad</div>
                                <div class="text-[10px] text-slate font-medium">Patient Ref: PX-2201</div>
                            </td>
                            <td class="px-6 py-4"><span class="bg-slate-100 px-2 py-0.5 rounded text-[10px] font-bold text-slate-600">WALK-IN</span></td>
                            <td class="px-6 py-4 text-slate-600">OPD Reception</td>
                            <td class="px-6 py-4">
                                <span class="status-escalated px-2.5 py-1 rounded-full text-[10px] font-bold uppercase">Escalated</span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex justify-center"><span class="w-2 h-2 rounded-full bg-red-500"></span></div>
                            </td>
                            <td class="px-6 py-4 text-right">
                                <div class="flex justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                                    <button class="p-1.5 text-navy hover:bg-white rounded border border-transparent hover:border-slate-200"><i data-lucide="eye" class="w-4 h-4"></i></button>
                                    <button class="p-1.5 text-blue hover:bg-white rounded border border-transparent hover:border-slate-200"><i data-lucide="user-plus" class="w-4 h-4"></i></button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                
                <div class="bg-slate-50 px-8 py-4 flex items-center justify-between border-t">
                    <span class="text-xs text-slate font-medium">Showing <span class="font-bold text-navy">10</span> of <span class="font-bold text-navy">689</span> entries</span>
                    <div class="flex gap-2">
                        <button class="w-8 h-8 flex items-center justify-center rounded-lg border bg-white hover:bg-slate-50 transition"><i data-lucide="chevron-left" class="w-4 h-4 text-slate"></i></button>
                        <button class="w-8 h-8 flex items-center justify-center rounded-lg bg-navy text-white text-xs font-bold">1</button>
                        <button class="w-8 h-8 flex items-center justify-center rounded-lg border bg-white hover:bg-slate-50 text-xs font-bold text-slate transition">2</button>
                        <button class="w-8 h-8 flex items-center justify-center rounded-lg border bg-white hover:bg-slate-50 text-xs font-bold text-slate transition">3</button>
                        <button class="w-8 h-8 flex items-center justify-center rounded-lg border bg-white hover:bg-slate-50 transition"><i data-lucide="chevron-right" class="w-4 h-4 text-slate"></i></button>
                    </div>
                </div>
            </div>
        </main>
    </div>

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