@extends('admin.layout')
@section('title', 'Service')
@section('subtitle', 'Jenis jasa yang bisa dipilih mitra & customer')

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

    <div class="flex flex-wrap items-center gap-2 mb-4">
        <a href="{{ route('admin.services', array_filter(['q' => request('q')])) }}"
           class="px-3.5 py-2 rounded-xl text-sm font-semibold transition
           {{ $parentId ? 'bg-white border border-line text-sub hover:text-brand' : 'bg-brand text-white' }}">Semua</a>
        @foreach ($categories as $category)
            <a href="{{ route('admin.services', array_filter(['category' => $category->id, 'q' => request('q')])) }}"
               class="px-3.5 py-2 rounded-xl text-sm font-semibold transition
               {{ (int) $parentId === $category->id ? 'bg-brand text-white' : 'bg-white border border-line text-sub hover:text-brand' }}">
                {{ $category->name }}
            </a>
        @endforeach

        <form method="GET" class="ml-auto">
            @if ($parentId)<input type="hidden" name="category" value="{{ $parentId }}">@endif
            <input name="q" value="{{ request('q') }}" placeholder="Cari service…"
                   class="w-56 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="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 service
            </summary>
            <form method="POST" action="{{ route('admin.services.store') }}" enctype="multipart/form-data"
                  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 :categories="$categories" :parent-id="$parentId" icon />
                <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">Ikon</th>
                        <th class="text-left font-semibold px-5 py-3">Nama</th>
                        <th class="text-left font-semibold px-5 py-3">Kategori</th>
                        <th class="text-left font-semibold px-5 py-3">Slug</th>
                        <th class="text-left font-semibold px-5 py-3">Mitra</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 ($services as $service)
                        <tr class="hover:bg-canvas transition align-top">
                            <td class="px-5 py-3">
                                @if ($service->iconUrl())
                                    <img src="{{ $service->iconUrl() }}" alt="Ikon {{ $service->name }}"
                                         class="w-9 h-9 object-contain rounded-lg border border-line bg-white p-0.5">
                                @else
                                    <span class="text-sub text-xs">—</span>
                                @endif
                            </td>
                            <td class="px-5 py-3 font-semibold">{{ $service->name }}</td>
                            <td class="px-5 py-3"><x-badge color="blue">{{ $service->parent?->name ?? '—' }}</x-badge></td>
                            <td class="px-5 py-3 text-sub font-mono text-xs">{{ $service->slug }}</td>
                            <td class="px-5 py-3 text-sub">{{ $service->mitra_profiles_count }}</td>
                            <td class="px-5 py-3 text-sub">{{ $service->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.services.update', $service) }}" enctype="multipart/form-data"
                                          class="mt-2 w-72 bg-canvas rounded-xl border border-line p-3 space-y-3">
                                        @csrf @method('PUT')
                                        <x-catalog-fields :model="$service" :categories="$categories" icon />
                                        <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.services.destroy', $service) }}" class="inline-block ml-3"
                                      onsubmit="return confirm('Hapus service {{ $service->name }}?')">
                                    @csrf @method('DELETE')
                                    <button class="text-red-500 font-semibold hover:text-red-600">Hapus</button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="7" class="px-5 py-8 text-center text-sub">Tidak ada service.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <x-pagination :paginator="$services" unit="jasa" />
@endsection