@extends('layouts.app')

@section('title', 'Kelola Perpus')

@section('content')
<div class="space-y-4 sm:space-y-6 px-3 sm:px-4 lg:px-0">
    <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
        <h1 class="text-xl sm:text-2xl font-bold tracking-tight">Dashboard</h1>
    </div>

    <!-- Stats cards -->
    <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4 lg:grid-cols-4">
        <div class="bg-white rounded-lg border p-4 sm:p-6">
            <div class="flex items-center justify-between">
                <div class="min-w-0">
                    <p class="text-xs sm:text-sm font-medium text-gray-600 truncate">Total Buku</p>
                    <p class="text-xl sm:text-2xl font-bold">{{ $totalBooks }}</p>
                </div>
                <div class="h-10 w-10 sm:h-12 sm:w-12 shrink-0 bg-blue-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-book text-blue-600"></i>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg border p-4 sm:p-6">
            <div class="flex items-center justify-between">
                <div class="min-w-0">
                    <p class="text-xs sm:text-sm font-medium text-gray-600 truncate">Buku yang dipinjam</p>
                    <p class="text-xl sm:text-2xl font-bold">{{ $booksBorrowed }}</p>
                </div>
                <div class="h-10 w-10 sm:h-12 sm:w-12 shrink-0 bg-emerald-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-bookmark text-emerald-600"></i>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg border p-4 sm:p-6">
            <div class="flex items-center justify-between">
                <div class="min-w-0">
                    <p class="text-xs sm:text-sm font-medium text-gray-600 truncate">Buku yang Telat</p>
                    <p class="text-xl sm:text-2xl font-bold">{{ $overdueBooks }}</p>
                </div>
                <div class="h-10 w-10 sm:h-12 sm:w-12 shrink-0 bg-red-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-clock text-red-600"></i>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg border p-4 sm:p-6">
            <div class="flex items-center justify-between">
                <div class="min-w-0">
                    <p class="text-xs sm:text-sm font-medium text-gray-600 truncate">Anggota Aktif</p>
                    <p class="text-xl sm:text-2xl font-bold">{{ $activeMembers }}</p>
                </div>
                <div class="h-10 w-10 sm:h-12 sm:w-12 shrink-0 bg-purple-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-users text-purple-600"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Book Status -->
    <div class="grid gap-4 lg:grid-cols-2">
        <div class="bg-white rounded-lg border p-4 sm:p-6">
            <h3 class="text-base sm:text-lg font-semibold mb-4">Status Buku</h3>
            <div class="grid grid-cols-1 gap-4 xs:grid-cols-2 sm:grid-cols-3 lg:grid-cols-2">
                <div class="flex items-center gap-3">
                    <div class="h-10 w-10 shrink-0 bg-emerald-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-check text-emerald-600"></i>
                    </div>
                    <div class="min-w-0">
                        <p class="text-sm font-medium">Yang Tersedia</p>
                        <p class="text-lg sm:text-xl font-bold">{{ $bookStatus['available'] }}</p>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <div class="h-10 w-10 shrink-0 bg-blue-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-bookmark text-blue-600"></i>
                    </div>
                    <div class="min-w-0">
                        <p class="text-sm font-medium">Dipinjam</p>
                        <p class="text-lg sm:text-xl font-bold">{{ $bookStatus['dipinjam'] }}</p>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <div class="h-10 w-10 shrink-0 bg-red-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-exclamation-triangle text-red-600"></i>
                    </div>
                    <div class="min-w-0">
                        <p class="text-sm font-medium">Telat</p>
                        <p class="text-lg sm:text-xl font-bold">{{ $bookStatus['terlambat'] }}</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg border p-4 sm:p-6">
            <div class="flex items-center justify-between mb-4 gap-2">
                <h3 class="text-base sm:text-lg font-semibold">Aktifitas Terkini</h3>
                <a href="{{ route('borrowing.index') }}" class="text-emerald-600 hover:text-emerald-700 text-xs sm:text-sm font-medium whitespace-nowrap">
                    Lihat semua <i class="fas fa-arrow-right ml-1"></i>
                </a>
            </div>
            <div class="space-y-3">
                @forelse($recentActivity as $activity)
                    <div class="flex items-center gap-2 sm:gap-3 p-3 bg-gray-50 rounded-lg">
                        <div class="h-8 w-8 shrink-0 bg-{{ $activity->status == 'dikembalikan' ? 'emerald' : ($activity->status == 'terlambat' ? 'red' : 'blue') }}-100 rounded-full flex items-center justify-center">
                            <i class="fas fa-{{ $activity->status == 'dikembalikan' ? 'check' : 'bookmark' }} text-{{ $activity->status == 'dikembalikan' ? 'emerald' : ($activity->status == 'terlambat' ? 'red' : 'blue') }}-600 text-xs"></i>
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-medium truncate">{{ $activity->book->title }}</p>
                            <p class="text-xs text-gray-500 truncate">{{ $activity->member->name }} • {{ $activity->created_at->diffForHumans() }}</p>
                        </div>
                        <span class="shrink-0 px-2 py-1 text-xs rounded-full bg-{{ $activity->status == 'dikembalikan' ? 'emerald' : ($activity->status == 'terlambat' ? 'red' : 'blue') }}-100 text-{{ $activity->status == 'dikembalikan' ? 'emerald' : ($activity->status == 'terlambat' ? 'red' : 'blue') }}-600">
                            {{ ucfirst($activity->status) }}
                        </span>
                    </div>
                @empty
                    <p class="text-gray-500 text-center py-4">Tak ada aktivitas terbaru</p>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection