@extends('layouts.admin')

@section('title', 'Manajemen Kategori')

@section('content')
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4">
    <div>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-1 small text-muted">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}" class="text-decoration-none">Dashboard</a></li>
                <li class="breadcrumb-item active" aria-current="page">Kategori</li>
            </ol>
        </nav>
        <h2 class="h3 fw-bold text-slate-800 m-0">🏷️ Manajemen Kategori</h2>
        <p class="text-muted small m-0">Kelola dan atur kategori produk yang ditampilkan di toko online.</p>
    </div>

    <div>
        <a href="{{ route('admin.categories.create') }}" class="btn btn-primary d-inline-flex align-items-center gap-2 shadow-sm">
            <i class="bi bi-plus-circle-fill"></i>
            <span>Tambah Kategori Baru</span>
        </a>
    </div>
</div>

<!-- Card Tabel Kategori -->
<div class="card border-0 shadow-sm overflow-hidden">
    <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center border-bottom">
        <h5 class="card-title fw-bold m-0 small text-uppercase text-secondary">
            <i class="bi bi-table me-1"></i> Daftar Kategori Produk
        </h5>
        <span class="badge bg-primary rounded-pill">
            Total: {{ $categories->total() }} Kategori
        </span>
    </div>

    <div class="table-responsive">
        <table class="table table-hover align-middle m-0">
            <thead class="table-light text-secondary text-uppercase" style="font-size: 0.75rem; letter-spacing: 0.5px;">
                <tr>
                    <th scope="col" class="text-center" style="width: 50px;">No</th>
                    <th scope="col">Nama Kategori</th>
                    <th scope="col">Slug URL</th>
                    <th scope="col">Deskripsi</th>
                    <th scope="col" class="text-center">Jumlah Produk</th>
                    <th scope="col">Dibuat Pada</th>
                    <th scope="col" class="text-center" style="width: 160px;">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($categories as $index => $category)
                    <tr>
                        <td class="text-center text-muted fw-semibold">
                            {{ $categories->firstItem() + $index }}
                        </td>
                        <td>
                            <div class="fw-bold text-dark">{{ $category->name }}</div>
                        </td>
                        <td>
                            <span class="badge bg-light text-dark border font-monospace">
                                {{ $category->slug }}
                            </span>
                        </td>
                        <td>
                            <div class="text-muted small" style="max-width: 280px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">
                                {{ $category->description ?: '-' }}
                            </div>
                        </td>
                        <td class="text-center">
                            @if ($category->products_count > 0)
                                <span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill px-2.5">
                                    {{ $category->products_count }} Produk
                                </span>
                            @else
                                <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle rounded-pill px-2.5">
                                    0 Produk
                                </span>
                            @endif
                        </td>
                        <td class="small text-muted">
                            {{ $category->created_at ? $category->created_at->format('d M Y, H:i') : '-' }}
                        </td>
                        <td class="text-center">
                            <div class="d-inline-flex gap-1">
                                <!-- Tombol Edit -->
                                <a 
                                    href="{{ route('admin.categories.edit', $category) }}" 
                                    class="btn btn-outline-warning btn-sm d-flex align-items-center gap-1"
                                    title="Edit Kategori"
                                >
                                    <i class="bi bi-pencil-square"></i>
                                    <span class="d-none d-md-inline">Edit</span>
                                </a>

                                <!-- Tombol Hapus (Destroy) -->
                                <form 
                                    action="{{ route('admin.categories.destroy', $category) }}" 
                                    method="POST" 
                                    class="d-inline m-0"
                                    onsubmit="return confirm('Apakah Anda yakin ingin menghapus kategori \'{{ $category->name }}\'?');"
                                >
                                    @csrf
                                    @method('DELETE')
                                    <button 
                                        type="submit" 
                                        class="btn btn-outline-danger btn-sm d-flex align-items-center gap-1"
                                        title="Hapus Kategori"
                                    >
                                        <i class="bi bi-trash-fill"></i>
                                        <span class="d-none d-md-inline">Hapus</span>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="text-center py-5">
                            <div class="text-muted">
                                <i class="bi bi-folder-x fs-1 d-block mb-2 text-secondary"></i>
                                <h6 class="fw-bold mb-1">Belum Ada Kategori</h6>
                                <p class="small text-muted mb-3">Silakan tambahkan kategori produk baru untuk toko online Anda.</p>
                                <a href="{{ route('admin.categories.create') }}" class="btn btn-primary btn-sm">
                                    <i class="bi bi-plus-lg me-1"></i> Tambah Kategori
                                </a>
                            </div>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if ($categories->hasPages())
        <div class="card-footer bg-white py-3 border-top d-flex justify-content-end">
            {{ $categories->links() }}
        </div>
    @endif
</div>
@endsection