@extends('layouts.admin')
@section('title', 'Kategori')
@section('page-title', 'Manajemen Kategori')
@section('breadcrumb')
<span class="current">Kategori</span>
@endsection

@section('content')
<!-- Header -->
<div class="flex items-center justify-between mb-6">
    <div class="flex items-center gap-3">
        <span class="admin-badge admin-badge-info">{{ $categories->total() }} kategori</span>
    </div>
    <a href="{{ route('admin.categories.create') }}" class="admin-btn admin-btn-primary">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
        Tambah Kategori
    </a>
</div>

<!-- Table -->
<div class="admin-card">
    <table class="admin-table">
        <thead>
            <tr>
                <th>Nama Kategori</th>
                <th>Slug</th>
                <th>Jumlah Buku</th>
                <th>Aksi</th>
            </tr>
        </thead>
        <tbody>
            @forelse($categories as $category)
            <tr>
                <td class="font-semibold text-gray-800">{{ $category->name }}</td>
                <td><span class="text-gray-400 font-mono text-xs bg-gray-50 px-2 py-0.5 rounded">{{ $category->slug }}</span></td>
                <td>
                    <span class="admin-badge admin-badge-info">
                        {{ $category->books_count }} buku
                    </span>
                </td>
                <td>
                    <div class="flex items-center gap-1">
                        <a href="{{ route('admin.categories.edit', $category) }}" class="admin-action-link admin-action-edit">
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                            Edit
                        </a>
                        <form action="{{ route('admin.categories.destroy', $category) }}" method="POST" onsubmit="return confirm('Hapus kategori {{ $category->name }}?')">
                            @csrf @method('DELETE')
                            <button type="submit" class="admin-action-link admin-action-delete">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                Hapus
                            </button>
                        </form>
                    </div>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="4" class="admin-empty">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/></svg>
                    <p>Belum ada kategori.</p>
                    <a href="{{ route('admin.categories.create') }}" class="text-[#ff6b2b] hover:underline text-sm font-semibold mt-1 inline-block">Tambah sekarang</a>
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
    @if($categories->hasPages())
    <div class="px-5 py-4 border-t border-gray-100">{{ $categories->links() }}</div>
    @endif
</div>
@endsection