@extends('admin.layout')
@section('title', 'Kategori')
@section('subtitle', 'Kelompok utama jasa (Service, Layanan, Sewa, …)')

@section('content')
    <x-flash />

    <div class="flex flex-wrap items-center gap-2 mb-4">
        <form method="GET">
            <input name="q" value="{{ request('q') }}" placeholder="Cari kategori…"
                   class="w-64 max-w-full rounded-xl border border-line px-3.5 py-2 text-sm outline-none focus:border-brand focus:ring-2 focus:ring-brand/20">
        </form>
        <details class="ml-auto relative">
            <summary class="cursor-pointer list-none px-4 py-2 rounded-xl bg-brand text-white text-sm font-semibold hover:bg-brand-dark transition">
                + Tambah kategori
            </summary>
            <form method="POST" action="{{ route('admin.categories.store') }}"
                  class="absolute right-0 mt-2 z-20 w-80 bg-white rounded-2xl border border-line shadow-lg p-4 space-y-3">
                @csrf
                <x-catalog-fields />
                <button class="w-full py-2 rounded-xl bg-brand text-white text-sm font-semibold hover:bg-brand-dark transition">Simpan</button>
            </form>
        </details>
    </div>

    <div class="bg-white rounded-2xl border border-line overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-canvas text-sub text-xs uppercase tracking-wide">
                    <tr>
                        <th class="text-left font-semibold px-5 py-3">Nama</th>
                        <th class="text-left font-semibold px-5 py-3">Slug</th>
                        <th class="text-left font-semibold px-5 py-3">Jumlah service</th>
                        <th class="text-left font-semibold px-5 py-3">Urutan</th>
                        <th class="px-5 py-3"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-line">
                    @forelse ($categories as $category)
                        <tr class="hover:bg-canvas transition align-top">
                            <td class="px-5 py-3 font-semibold">{{ $category->name }}</td>
                            <td class="px-5 py-3 text-sub font-mono text-xs">{{ $category->slug }}</td>
                            <td class="px-5 py-3">
                                <a href="{{ route('admin.services', ['category' => $category->id]) }}" class="text-brand font-semibold hover:text-brand-dark">
                                    {{ $category->children_count }} service ›
                                </a>
                            </td>
                            <td class="px-5 py-3 text-sub">{{ $category->sort_order }}</td>
                            <td class="px-5 py-3 text-right whitespace-nowrap">
                                <details class="inline-block text-left">
                                    <summary class="cursor-pointer list-none text-brand font-semibold hover:text-brand-dark">Ubah</summary>
                                    <form method="POST" action="{{ route('admin.categories.update', $category) }}"
                                          class="mt-2 w-72 bg-canvas rounded-xl border border-line p-3 space-y-3">
                                        @csrf @method('PUT')
                                        <x-catalog-fields :model="$category" />
                                        <button class="w-full py-2 rounded-xl bg-brand text-white text-sm font-semibold hover:bg-brand-dark transition">Simpan</button>
                                    </form>
                                </details>
                                <form method="POST" action="{{ route('admin.categories.destroy', $category) }}" class="inline-block ml-3"
                                      onsubmit="return confirm('Hapus kategori {{ $category->name }}?')">
                                    @csrf @method('DELETE')
                                    <button class="text-red-500 font-semibold hover:text-red-600">Hapus</button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="5" class="px-5 py-8 text-center text-sub">Belum ada kategori.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <x-pagination :paginator="$categories" unit="kategori" />
@endsection