<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Koleksi Buku Interaktif</title>
<link rel="icon" href="{{ asset('images/pustaka.jpeg') }}" type="image/png">

<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-green-50 min-h-screen">

<div class="max-w-7xl mx-auto py-10 px-6">

    <h1 class="text-5xl font-extrabold text-green-700 mb-6 text-center drop-shadow-lg animate-bounce">
        Koleksi Buku Kami
    </h1>

    <div class="text-center mb-6">
        <span class="text-xl text-green-800 font-semibold animate-pulse">
            Total Buku: {{ $koleksi->count() }}
        </span>
    </div>

    <div class="h-[80vh] overflow-y-auto pr-4">
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
            @forelse ($koleksi as $buku)
            <div class="bg-white shadow-2xl rounded-3xl overflow-hidden transform transition duration-500 hover:scale-105 hover:-translate-y-2 hover:shadow-2xl cursor-pointer"
                 onclick="openModal({{ $buku->id }})">
                @if($buku->cover)
                    <img src="{{ asset('storage/' . $buku->cover) }}" alt="{{ $buku->judul }}" class="w-full h-64 object-cover">
                @else
                    <div class="w-full h-64 bg-green-100 flex items-center justify-center text-green-400 font-bold text-xl">
                        No Cover
                    </div>
                @endif
                <div class="p-4">
                    <h3 class="text-xl font-semibold mb-1 text-green-700">{{ $buku->judul }}</h3>
                    <p class="text-gray-700 mb-1"><span class="font-medium">Penulis:</span> {{ $buku->penulis }}</p>
                    <p class="text-gray-700 mb-1"><span class="font-medium">Kategori:</span> {{ $buku->kategori ?? '-' }}</p>
                    <p class="text-gray-700 mb-2"><span class="font-medium">Tahun:</span> {{ $buku->tahun_terbit ?? '-' }}</p>
                    <p class="text-gray-600 text-sm">{{ \Illuminate\Support\Str::limit($buku->deskripsi ?? '-', 100) }}</p>
                </div>
            </div>
            @empty
            <div class="col-span-full text-center text-gray-500 italic py-10">
                Belum a

