@extends('layouts.app')

@section('title', 'Dashboard Admin - TUNJUK-i')

@section('content')
<div class="mb-6">
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-[#0b2b4a] flex items-center gap-2">
                <i class="fas fa-tachometer-alt text-[#c9a84c]"></i>
                Dashboard Admin
            </h1>
            <p class="text-gray-500 text-sm mt-1">Selamat datang, {{ Auth::user()->name }}! 🎉</p>
        </div>
        <span class="text-xs bg-green-100 text-green-800 px-3 py-1 rounded-full">
            <i class="fas fa-circle text-[8px] mr-1 text-green-500"></i>
            Sistem Aktif
        </span>
    </div>
</div>

<!-- Statistics -->
<livewire:admin-statistics />

<!-- Charts -->
<livewire:admin-chart />

<!-- Quick Actions -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
    <a href="{{ route('admin.users.index') }}" class="bg-white p-6 rounded-2xl shadow-sm hover:shadow-xl transition-all border border-gray-100 hover:border-[#c9a84c] group">
        <div class="flex items-center gap-4">
            <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 group-hover:scale-110 transition">
                <i class="fas fa-users text-xl"></i>
            </div>
            <div>
                <p class="font-semibold text-gray-800">Users</p>
                <p class="text-sm text-gray-400">Kelola akun</p>
            </div>
        </div>
    </a>
    <a href="{{ route('admin.contractors.index') }}" class="bg-white p-6 rounded-2xl shadow-sm hover:shadow-xl transition-all border border-gray-100 hover:border-[#c9a84c] group">
        <div class="flex items-center gap-4">
            <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-500 group-hover:scale-110 transition">
                <i class="fas fa-hard-hat text-xl"></i>
            </div>
            <div>
                <p class="font-semibold text-gray-800">Kontraktor</p>
                <p class="text-sm text-gray-400">Kelola kontraktor</p>
            </div>
        </div>
    </a>
    <a href="{{ route('admin.statistics') }}" class="bg-white p-6 rounded-2xl shadow-sm hover:shadow-xl transition-all border border-gray-100 hover:border-[#c9a84c] group">
        <div class="flex items-center gap-4">
            <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-500 group-hover:scale-110 transition">
                <i class="fas fa-chart-bar text-xl"></i>
            </div>
            <div>
                <p class="font-semibold text-gray-800">Statistik</p>
                <p class="text-sm text-gray-400">Lihat grafik</p>
            </div>
        </div>
    </a>
</div>

<!-- Recent Activity -->
<div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
    <h3 class="text-lg font-semibold text-[#0b2b4a] flex items-center gap-2 mb-4">
        <i class="fas fa-clock text-[#c9a84c]"></i>
        Aktivitas Terakhir
    </h3>
    <div class="space-y-3">
        @php
            $recentUsers = \App\Models\User::orderBy('created_at', 'desc')->limit(5)->get();
        @endphp
        @forelse($recentUsers as $user)
            <div class="flex items-center gap-4 p-3 bg-gray-50 rounded-xl hover:bg-gray-100 transition">
                <div class="w-10 h-10 rounded-full {{ $user->role === 'admin' ? 'bg-red-100' : ($user->role === 'ppk' ? 'bg-blue-100' : ($user->role === 'contractor' ? 'bg-green-100' : 'bg-gray-100')) }} flex items-center justify-center">
                    <i class="fas fa-user {{ $user->role === 'admin' ? 'text-red-500' : ($user->role === 'ppk' ? 'text-blue-500' : ($user->role === 'contractor' ? 'text-green-500' : 'text-gray-500')) }}"></i>
                </div>
                <div class="flex-1">
                    <p class="text-sm font-medium text-gray-800">{{ $user->name }}</p>
                    <p class="text-xs text-gray-400">Bergabung {{ $user->created_at->diffForHumans() }} • {{ $user->email }}</p>
                </div>
                <span class="text-xs px-3 py-1 rounded-full font-medium
                    {{ $user->role === 'admin' ? 'bg-red-100 text-red-700' :
                       ($user->role === 'ppk' ? 'bg-blue-100 text-blue-700' :
                       ($user->role === 'contractor' ? 'bg-green-100 text-green-700' :
                       'bg-gray-100 text-gray-700')) }}">
                    {{ ucfirst($user->role) }}
                </span>
            </div>
        @empty
            <p class="text-gray-500 text-center py-4">Belum ada user terdaftar</p>
        @endforelse
    </div>
</div>
@endsection