@extends('simaju.layouts.main')
@section('title', 'Kategori Buku')
@section('page-title', 'Kategori Buku')
@section('page-subtitle', 'Kelola kategori koleksi buku perpustakaan')

@section('content')
<div class="space-y-6">
    <!-- Header Section with Stats -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2">
            <div class="bg-gradient-to-br from-blue-500 via-blue-600 to-indigo-700 rounded-2xl shadow-xl p-8 text-white relative overflow-hidden">
                <div class="absolute top-0 right-0 w-64 h-64 bg-white opacity-5 rounded-full -mr-32 -mt-32"></div>
                <div class="absolute bottom-0 left-0 w-48 h-48 bg-white opacity-5 rounded-full -ml-24 -mb-24"></div>
                <div class="relative">
                    <div class="flex items-center gap-3 mb-4">
                        <div class="w-14 h-14 bg-white bg-opacity-20 backdrop-blur-sm rounded-xl flex items-center justify-center">
                            <i class="fas fa-folder-open text-2xl"></i>
                        </div>
                        <div>
                            <h2 class="text-3xl font-bold font-heading">{{ $kategoris->total() }}</h2>
                            <p class="text-blue-100">Total Kategori</p>
                        </div>
                    </div>
                    <p class="text-blue-50 leading-relaxed">Organisasi kategori membantu pengguna menemukan buku dengan lebih mudah dan cepat</p>
                </div>
            </div>
        </div>
        <div>
            <div class="bg-white rounded-2xl shadow-lg p-6 border border-gray-100 h-full flex flex-col justify-center">
                <a href="{{ route('perpustakaan.kategori.create') }}" class="group">
                    <div class="text-center space-y-4">
                        <div class="w-16 h-16 bg-gradient-to-br from-green-400 to-emerald-600 rounded-2xl mx-auto flex items-center justify-center transform group-hover:scale-110 transition-all duration-300 shadow-lg">
                            <i class="fas fa-plus text-white text-2xl"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-bold text-gray-800 group-hover:text-green-600 transition-colors">Tambah Kategori</h3>
                            <p class="text-sm text-gray-500">Buat kategori baru</p>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>

    @if ($message = Session::get('success'))
        <div class="bg-green-50 border-l-4 border-green-500 rounded-xl p-4 shadow-sm animate-pulse" x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 5000)">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <i class="fas fa-check-circle text-green-500 text-xl"></i>
                </div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-green-800">{{ $message }}</p>
                </div>
                <button @click="show = false" class="ml-auto text-green-500 hover:text-green-700">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
    @endif

    <!-- Search & Filter Section -->
    <div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-6">
        <form action="{{ route('perpustakaan.kategori.index') }}" method="GET">
            <div class="flex flex-col md:flex-row gap-4">
                <div class="flex-1 relative">
                    <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                        <i class="fas fa-search text-gray-400"></i>
                    </div>
                    <input type="text" name="search" value="{{ request('search') }}" 
                           placeholder="Cari nama kategori..." 
                           class="w-full pl-12 pr-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all">
                </div>
                <button type="submit" class="px-8 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-medium rounded-xl hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-200">
                    <i class="fas fa-search mr-2"></i>Cari
                </button>
            </div>
        </form>
    </div>

    <!-- Table Section -->
    <div class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="bg-gradient-to-r from-gray-50 to-gray-100">
                        <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Nama Kategori</th>
                        <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Deskripsi</th>
                        <th class="px-6 py-4 text-center text-xs font-bold text-gray-700 uppercase tracking-wider">Jumlah Buku</th>
                        <th class="px-6 py-4 text-center text-xs font-bold text-gray-700 uppercase tracking-wider">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse($kategoris as $kategori)
                        <tr class="hover:bg-blue-50 transition-colors duration-150">
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-3">
                                    <div class="w-10 h-10 bg-gradient-to-br from-blue-400 to-indigo-600 rounded-lg flex items-center justify-center">
                                        <i class="fas fa-folder text-white"></i>
                                    </div>
                                    <span class="font-semibold text-gray-800">{{ $kategori->nama_kategori }}</span>
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                <p class="text-gray-600 text-sm">{{ Str::limit($kategori->deskripsi, 50) ?: '-' }}</p>
                            </td>
                            <td class="px-6 py-4 text-center">
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
                                    <i class="fas fa-book mr-1.5 text-xs"></i>
                                    {{ $kategori->bukus_count }}
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex items-center justify-center gap-2">
                                    <a href="{{ route('perpustakaan.kategori.show', $kategori) }}" 
                                       class="p-2 bg-blue-100 text-blue-600 rounded-lg hover:bg-blue-600 hover:text-white transition-all duration-200 transform hover:scale-110"
                                       title="Lihat">
                                        <i class="fas fa-eye text-sm"></i>
                                    </a>
                                    <a href="{{ route('perpustakaan.kategori.edit', $kategori) }}" 
                                       class="p-2 bg-amber-100 text-amber-600 rounded-lg hover:bg-amber-600 hover:text-white transition-all duration-200 transform hover:scale-110"
                                       title="Edit">
                                        <i class="fas fa-edit text-sm"></i>
                                    </a>
                                    <form action="{{ route('perpustakaan.kategori.destroy', $kategori) }}" method="POST" class="inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" 
                                                onclick="return confirm('Yakin ingin menghapus kategori ini?')"
                                                class="p-2 bg-red-100 text-red-600 rounded-lg hover:bg-red-600 hover:text-white transition-all duration-200 transform hover:scale-110"
                                                title="Hapus">
                                            <i class="fas fa-trash text-sm"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="px-6 py-16 text-center">
                                <div class="flex flex-col items-center justify-center space-y-4">
                                    <div class="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center">
                                        <i class="fas fa-folder-open text-4xl text-gray-400"></i>
                                    </div>
                                    <div>
                                        <h3 class="text-lg font-semibold text-gray-700 mb-1">Belum Ada Kategori</h3>
                                        <p class="text-gray-500">Mulai dengan menambahkan kategori buku baru</p>
                                    </div>
                                    <a href="{{ route('perpustakaan.kategori.create') }}" 
                                       class="px-6 py-2.5 bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-medium rounded-lg hover:shadow-lg transition-all">
                                        <i class="fas fa-plus mr-2"></i>Tambah Kategori
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($kategoris->hasPages())
            <div class="px-6 py-4 bg-gray-50 border-t border-gray-100">
                {{ $kategoris->links() }}
            </div>
        @endif
    </div>
</div>
@endsection