@extends('admin.layout')
@section('title', 'Home Jasa')
@section('subtitle', 'Pilih jasa yang tampil di halaman home customer')

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

    <form method="POST" action="{{ route('admin.home-services.update') }}">
        @csrf @method('PUT')

        <div class="flex flex-wrap items-center gap-3 mb-4">
            <div class="text-sm text-sub">
                Terpilih saat ini: <span class="font-bold text-ink">{{ $selected->count() }} jasa</span>.
                Angka di sebelah kanan menentukan urutan tampil (kecil = duluan).
            </div>
            <button class="ml-auto px-4 py-2 rounded-xl bg-brand text-white text-sm font-semibold hover:bg-brand-dark transition">
                Simpan pilihan
            </button>
        </div>

        @if ($selected->isNotEmpty())
            <div class="bg-white rounded-2xl border border-line p-5 mb-4">
                <h2 class="text-xs font-semibold uppercase tracking-wide text-sub mb-3">Pratinjau urutan di home</h2>
                <div class="flex flex-wrap gap-2">
                    @foreach ($selected as $i => $item)
                        <span class="inline-flex items-center gap-2 px-3 py-2 rounded-xl bg-brand-soft text-brand-dark text-sm font-semibold">
                            <span class="w-5 h-5 rounded-full bg-white text-[11px] grid place-items-center">{{ $i + 1 }}</span>
                            {{ $item->name }}
                        </span>
                    @endforeach
                </div>
            </div>
        @endif

        <div class="grid lg:grid-cols-2 gap-4">
            @foreach ($categories as $category)
                <div class="bg-white rounded-2xl border border-line overflow-hidden">
                    <div class="px-5 py-3 border-b border-line flex items-center justify-between">
                        <h2 class="font-extrabold">{{ $category->name }}</h2>
                        <x-badge color="gray">{{ $category->children->where('show_on_home', true)->count() }} / {{ $category->children->count() }}</x-badge>
                    </div>
                    <div class="divide-y divide-line">
                        @forelse ($category->children as $service)
                            <label class="flex items-center gap-3 px-5 py-2.5 hover:bg-canvas transition cursor-pointer">
                                <input type="checkbox" name="services[]" value="{{ $service->id }}"
                                       @checked($service->show_on_home)
                                       class="w-4 h-4 rounded border-line text-brand focus:ring-brand/30">
                                <span class="flex-1 text-sm font-medium">{{ $service->name }}</span>
                                <input type="number" name="order[{{ $service->id }}]" value="{{ $service->home_sort_order }}"
                                       min="0" max="9999" aria-label="Urutan {{ $service->name }}"
                                       class="w-16 rounded-lg border border-line px-2 py-1 text-sm text-center outline-none focus:border-brand focus:ring-2 focus:ring-brand/20">
                            </label>
                        @empty
                            <p class="px-5 py-4 text-sm text-sub">Belum ada service di kategori ini.</p>
                        @endforelse
                    </div>
                </div>
            @endforeach
        </div>

        <div class="mt-4 flex justify-end">
            <button class="px-4 py-2 rounded-xl bg-brand text-white text-sm font-semibold hover:bg-brand-dark transition">
                Simpan pilihan
            </button>
        </div>
    </form>
@endsection