@extends('admin.layouts.app')

@section('content')
<!-- Dashboard Header -->
<div class="px-6 pt-6 pb-2">
    <h1 class="text-2xl font-bold text-slate-800">Overview Dashboard</h1>
    <p class="text-slate-500 text-sm">Welcome back. Here's what's happening with your workforce today.</p>
</div>

<!-- Stat Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-4 px-6">
    <!-- Card 1: Total Employee -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-6 flex flex-col justify-between hover:shadow-md transition-shadow">
        <div class="flex justify-between items-start">
            <div>
                <p class="text-slate-400 font-medium text-sm mb-1 uppercase tracking-wider">Total Employee</p>
                <h3 class="text-3xl font-extrabold text-slate-800">1</h3>
            </div>
            <div class="w-12 h-12 bg-cyan-50 rounded-xl flex items-center justify-center text-cyan-600 text-xl border border-cyan-100">
                <i class="fa-solid fa-users"></i>
            </div>
        </div>
        <div class="mt-4 pt-4 border-t border-slate-50 flex justify-between items-center">
            <span class="text-xs font-semibold text-cyan-600 bg-cyan-50 px-2 py-1 rounded-md">+0% from last month</span>
            <a href="#" class="text-slate-400 text-xs font-bold hover:text-cyan-600 transition group flex items-center">
                Details <i class="fa-solid fa-arrow-right ml-1 text-[10px] transform group-hover:translate-x-1 transition"></i>
            </a>
        </div>
    </div>
    
    <!-- Card 2: Total Present -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-6 flex flex-col justify-between hover:shadow-md transition-shadow">
        <div class="flex justify-between items-start">
            <div>
                <p class="text-slate-400 font-medium text-sm mb-1 uppercase tracking-wider">Total Present</p>
                <h3 class="text-3xl font-extrabold text-slate-800">0</h3>
            </div>
            <div class="w-12 h-12 bg-blue-50 rounded-xl flex items-center justify-center text-blue-600 text-xl border border-blue-100">
                <i class="fa-solid fa-user-check"></i>
            </div>
        </div>
        <div class="mt-4 pt-4 border-t border-slate-50 flex justify-between items-center">
            <span class="text-xs font-semibold text-slate-500">Today's metrics</span>
            <a href="#" class="text-slate-400 text-xs font-bold hover:text-blue-600 transition group flex items-center">
                Details <i class="fa-solid fa-arrow-right ml-1 text-[10px] transform group-hover:translate-x-1 transition"></i>
            </a>
        </div>
    </div>

    <!-- Card 3: Total Absent -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-6 flex flex-col justify-between hover:shadow-md transition-shadow">
        <div class="flex justify-between items-start">
            <div>
                <p class="text-slate-400 font-medium text-sm mb-1 uppercase tracking-wider">Total Absent</p>
                <h3 class="text-3xl font-extrabold text-slate-800">1</h3>
            </div>
            <div class="w-12 h-12 bg-rose-50 rounded-xl flex items-center justify-center text-rose-600 text-xl border border-rose-100">
                <i class="fa-solid fa-user-xmark"></i>
            </div>
        </div>
        <div class="mt-4 pt-4 border-t border-slate-50 flex justify-between items-center">
            <span class="text-xs font-semibold text-rose-500 bg-rose-50 px-2 py-1 rounded-md">Action Required</span>
            <a href="#" class="text-slate-400 text-xs font-bold hover:text-rose-600 transition group flex items-center">
                Details <i class="fa-solid fa-arrow-right ml-1 text-[10px] transform group-hover:translate-x-1 transition"></i>
            </a>
        </div>
    </div>
    
    <!-- Card 4: Total Late -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-6 flex flex-col justify-between hover:shadow-md transition-shadow">
        <div class="flex justify-between items-start">
            <div>
                <p class="text-slate-400 font-medium text-sm mb-1 uppercase tracking-wider">Total Late</p>
                <h3 class="text-3xl font-extrabold text-slate-800">0</h3>
            </div>
            <div class="w-12 h-12 bg-emerald-50 rounded-xl flex items-center justify-center text-emerald-600 text-xl border border-emerald-100">
                <i class="fa-solid fa-user-clock"></i>
            </div>
        </div>
        <div class="mt-4 pt-4 border-t border-slate-50 flex justify-between items-center">
            <span class="text-xs font-semibold text-slate-500">Today's metrics</span>
            <a href="#" class="text-slate-400 text-xs font-bold hover:text-emerald-600 transition group flex items-center">
                Details <i class="fa-solid fa-arrow-right ml-1 text-[10px] transform group-hover:translate-x-1 transition"></i>
            </a>
        </div>
    </div>
</div>

<!-- Charts Area -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8 px-6">
    <!-- Chart 1 -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden flex flex-col">
        <div class="px-6 py-4 border-b border-slate-100 flex justify-between items-center">
            <h3 class="font-bold text-slate-800 flex items-center"><i class="fa-solid fa-chart-pie mr-2 text-cyan-500"></i> Department Attendance</h3>
            <button class="text-slate-400 hover:text-slate-600"><i class="fa-solid fa-ellipsis-vertical"></i></button>
        </div>
        <div class="p-6 flex-1 flex items-center justify-center h-[240px] bg-slate-50/50">
            <!-- Simulated Chart Canvas -->
            <div class="w-full h-full relative flex items-end justify-around pb-4 pt-8">
                <!-- Bars -->
                <div class="w-12 h-3/4 bg-gradient-to-t from-cyan-500 to-cyan-400 rounded-t-sm shadow-sm relative group cursor-pointer"><div class="hidden group-hover:block absolute -top-8 left-1/2 -translate-x-1/2 bg-slate-800 text-white text-xs py-1 px-2 rounded">HR</div></div>
                <div class="w-12 h-full bg-gradient-to-t from-blue-500 to-blue-400 rounded-t-sm shadow-sm relative group cursor-pointer"><div class="hidden group-hover:block absolute -top-8 left-1/2 -translate-x-1/2 bg-slate-800 text-white text-xs py-1 px-2 rounded">IT</div></div>
                <div class="w-12 h-1/2 bg-gradient-to-t from-slate-400 to-slate-300 rounded-t-sm shadow-sm relative group cursor-pointer"><div class="hidden group-hover:block absolute -top-8 left-1/2 -translate-x-1/2 bg-slate-800 text-white text-xs py-1 px-2 rounded">Sales</div></div>
                <div class="w-12 h-1/4 bg-gradient-to-t from-indigo-500 to-indigo-400 rounded-t-sm shadow-sm relative group cursor-pointer"><div class="hidden group-hover:block absolute -top-8 left-1/2 -translate-x-1/2 bg-slate-800 text-white text-xs py-1 px-2 rounded">Admin</div></div>
            </div>
        </div>
    </div>
    <!-- Chart 2 -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden flex flex-col">
        <div class="px-6 py-4 border-b border-slate-100 flex justify-between items-center">
            <h3 class="font-bold text-slate-800 flex items-center"><i class="fa-solid fa-chart-line mr-2 text-rose-500"></i> Department Wise Absent</h3>
            <button class="text-slate-400 hover:text-slate-600"><i class="fa-solid fa-ellipsis-vertical"></i></button>
        </div>
        <div class="p-6 flex-1 flex flex-col items-center justify-center h-[240px] bg-slate-50/50">
            <div class="w-32 h-32 rounded-full border-8 border-slate-200 border-t-rose-500 border-r-rose-400 relative flex items-center justify-center shadow-inner">
                <span class="text-xl font-bold text-slate-700">65%</span>
            </div>
            <p class="text-slate-400 text-xs mt-6 font-medium">Absence distribution across departments</p>
        </div>
    </div>
</div>

<!-- Tables Area -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6 px-6 mb-12">
    <!-- Table 1 -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
        <div class="px-6 py-4 border-b border-slate-100 flex justify-between items-center bg-slate-50/50">
            <h3 class="font-bold text-slate-800 flex items-center"><i class="fa-solid fa-server mr-2 text-emerald-500"></i> Live Connection Status</h3>
            <span class="bg-emerald-100 text-emerald-700 text-xs font-bold px-2 py-1 rounded-full flex items-center">
                <span class="w-1.5 h-1.5 bg-emerald-500 rounded-full mr-1.5 animate-pulse"></span> Live
            </span>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-left text-sm border-collapse">
                <thead>
                    <tr class="bg-slate-50 text-slate-500 border-b border-slate-200 text-xs uppercase tracking-wider">
                        <th class="py-3 px-6 font-semibold">S.N.</th>
                        <th class="py-3 px-6 font-semibold">Machine-No</th>
                        <th class="py-3 px-6 font-semibold">Location</th>
                        <th class="py-3 px-6 font-semibold text-right">Status</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    <tr class="hover:bg-slate-50/50 transition">
                        <td colspan="4" class="py-8 text-center text-slate-400 text-xs">No active connections found today</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    
    <!-- Table 2 -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
        <div class="px-6 py-4 border-b border-slate-100 flex justify-between items-center bg-slate-50/50">
            <h3 class="font-bold text-slate-800 flex items-center"><i class="fa-solid fa-clock-rotate-left mr-2 text-blue-500"></i> Last Sync History</h3>
            <button class="text-cyan-600 hover:text-cyan-700 text-xs font-bold transition">View All</button>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-left text-sm border-collapse">
                <thead>
                    <tr class="bg-slate-50 text-slate-500 border-b border-slate-200 text-xs uppercase tracking-wider">
                        <th class="py-3 px-4 font-semibold">Device</th>
                        <th class="py-3 px-4 font-semibold">Serial No</th>
                        <th class="py-3 px-4 font-semibold">Branch</th>
                        <th class="py-3 px-4 font-semibold text-right">Last Online</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    <tr class="hover:bg-slate-50/50 transition">
                        <td colspan="4" class="py-8 text-center text-slate-400 text-xs">No sync history available</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection