@extends('admin.layout')

@section('title', 'Kategori Layanan')
@section('page_heading', 'Kategori Layanan')

@section('content')
<div class="space-y-6">

    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8">
        <div>
            <h2 class="font-headline-lg text-3xl font-bold text-on-surface">Kategori Layanan</h2>
            <p class="text-sm text-on-surface-variant mt-1">Kelola kategori untuk pengelompokan dan filter layanan di halaman publik.</p>
        </div>
        <a href="{{ route('admin.service-categories.create') }}" class="px-6 py-2.5 rounded-xl bg-primary text-on-primary font-bold text-sm hover:bg-opacity-90 transition-all shadow flex items-center gap-2">
            <span class="material-symbols-outlined text-[20px]">add</span>
            <span>Tambah Kategori</span>
        </a>
    </div>

    @if(session('success'))
    <div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-[#E1F2E8] text-[#1E5128] text-sm font-bold border border-[#A3D9B1]">
        <span class="material-symbols-outlined text-lg">check_circle</span>
        {{ session('success') }}
    </div>
    @endif

    <div class="bg-surface-container-lowest border border-outline-variant rounded-2xl shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs whitespace-nowrap min-w-[600px]">
                <thead class="bg-surface-container-low border-b border-outline-variant text-on-surface-variant font-bold text-[11px] uppercase tracking-wider">
                    <tr>
                        <th class="px-5 py-3.5 w-12 text-center">No</th>
                        <th class="px-5 py-3.5">Nama Kategori</th>
                        <th class="px-5 py-3.5">Slug (Filter Key)</th>
                        <th class="px-5 py-3.5 text-center">Jumlah Layanan</th>
                        <th class="px-5 py-3.5 w-24 text-center">Status</th>
                        <th class="px-5 py-3.5 w-24 text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-outline-variant/60">
                    @forelse($categories as $category)
                    <tr class="hover:bg-surface-container-low/50 transition-colors">
                        <td class="px-5 py-3.5 text-center font-bold text-on-surface-variant">#{{ $loop->iteration }}</td>
                        <td class="px-5 py-3.5 font-bold text-on-surface">{{ $category->name }}</td>
                        <td class="px-5 py-3.5">
                            <code class="text-[11px] bg-surface-container-low px-2 py-0.5 rounded font-mono text-primary">{{ $category->slug }}</code>
                        </td>
                        <td class="px-5 py-3.5 text-center">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-primary/10 text-primary">
                                {{ $category->services_count }} Layanan
                            </span>
                        </td>
                        <td class="px-5 py-3.5 text-center">
                            @if($category->is_active)
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-[#E1F2E8] text-[#1E5128]">Aktif</span>
                            @else
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-surface-variant text-on-surface-variant">Non-aktif</span>
                            @endif
                        </td>
                        <td class="px-5 py-3.5 text-center">
                            <div class="flex items-center justify-center gap-1">
                                <a href="{{ route('admin.service-categories.edit', $category) }}"
                                   title="Edit Kategori"
                                   class="p-1.5 rounded-lg text-tertiary hover:bg-tertiary-container/20 transition-colors flex items-center justify-center">
                                    <span class="material-symbols-outlined text-lg">edit</span>
                                </a>
                                <form action="{{ route('admin.service-categories.destroy', $category) }}" method="POST" class="inline-block delete-form">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" title="Hapus Kategori"
                                            class="p-1.5 rounded-lg text-error hover:bg-error-container transition-colors flex items-center justify-center">
                                        <span class="material-symbols-outlined text-lg">delete</span>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="px-6 py-10 text-center text-on-surface-variant text-xs">
                            Belum ada kategori. Klik "Tambah Kategori" untuk membuat kategori pertama.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div class="p-4 bg-primary/5 border border-primary/20 rounded-xl text-xs text-on-surface-variant">
        <p class="font-bold text-primary mb-1">💡 Cara kerja filter kategori</p>
        <p>Kolom <strong>Slug</strong> digunakan sebagai <code class="bg-surface-container-low px-1 py-0.5 rounded font-mono">data-filter</code> pada filter chip di halaman Layanan publik. Pastikan slug unik dan menggunakan huruf kecil tanpa spasi.</p>
    </div>

</div>
@endsection