@extends('layouts.app')

@section('content')
<div class="space-y-6 animate-in fade-in duration-500">
    
    <div class="grid grid-cols-4 gap-4">
        <div class="bg-white p-4 rounded-lg border shadow-sm">
            <div class="text-xs text-gray-500 uppercase">Total User</div>
            <div class="text-xl font-bold">{{ $total }}</div>
        </div>
        <div class="bg-white p-4 rounded-lg border shadow-sm">
            <div class="text-xs text-gray-500 uppercase">Admin</div>
            <div class="text-xl font-bold text-red-600">{{ $admin }}</div>
        </div>
        <div class="bg-white p-4 rounded-lg border shadow-sm">
            <div class="text-xs text-gray-500 uppercase">Staff</div>
            <div class="text-xl font-bold text-blue-600">{{ $staff }}</div>
        </div>
        <div class="bg-white p-4 rounded-lg border shadow-sm">
            <div class="text-xs text-gray-500 uppercase">User Biasa</div>
            <div class="text-xl font-bold text-green-600">{{ $user }}</div>
        </div>
    </div>

    <div class="grid grid-cols-3 gap-4">
        <div class="bg-[#1c1d56] text-white p-5 rounded-xl shadow-lg">
            <div class="text-sm opacity-80">Kunjungan Hari Ini</div>
            <div class="text-2xl font-bold">{{ $kunjungan_hari_ini }}</div>
        </div>
        <div class="bg-[#1c1d56] text-white p-5 rounded-xl shadow-lg">
            <div class="text-sm opacity-80">Menunggu Persetujuan</div>
            <div class="text-2xl font-bold">{{ $menunggu_persetujuan }}</div>
        </div>
        <div class="bg-[#1c1d56] text-white p-5 rounded-xl shadow-lg">
            <div class="text-sm opacity-80">Surat Masuk Hari Ini</div>
            <div class="text-2xl font-bold">{{ $surat_masuk_hari_ini }}</div>
        </div>
    </div>

    <div class="bg-white p-6 rounded-xl shadow-sm border">
        <h3 class="font-bold text-gray-700 mb-4">Daftar Tugas Menunggu</h3>
        <div class="space-y-3">
            @forelse($tasks as $task)
                <div class="flex justify-between items-center p-3 border-b hover:bg-slate-50 transition rounded-lg">
                    <div class="flex flex-col truncate mr-4">
                        {{-- Judul Keperluan dengan batas 40 karakter --}}
                        <span class="text-sm font-semibold text-slate-800 truncate">
                            {{ \Illuminate\Support\Str::limit($task->keperluan, 40, '...') }}
                        </span>
                        {{-- Tanggal di bawahnya --}}
                        <span class="text-[11px] text-slate-400 uppercase tracking-wide">
                            {{ \Carbon\Carbon::parse($task->tanggal)->format('d M Y') }}
                        </span>
                    </div>
                    
                    <a href="{{ route('admin.pemanggilan.show', $task->id) }}" 
                    class="shrink-0 px-4 py-1.5 bg-[#1c1d56] text-white text-xs font-bold rounded-lg hover:opacity-90 transition shadow-sm">
                    DETAIL
                    </a>
                </div>
            @empty
                <p class="text-sm text-gray-400 italic">Tidak ada tugas tertunda saat ini.</p>
            @endforelse
        </div>
    </div>

</div>
@endsection