@extends('admin.layout')

@section('title', $category->exists ? 'Edit Kategori' : 'Tambah Kategori Layanan')
@section('page_heading', $category->exists ? 'Edit Kategori' : 'Tambah Kategori Layanan')

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

    <div class="flex justify-between items-center mb-8">
        <div>
            <h2 class="font-headline-lg text-3xl font-bold text-on-surface">{{ $category->exists ? 'Edit Kategori' : 'Tambah Kategori Layanan' }}</h2>
            <p class="text-sm text-on-surface-variant mt-1">Kategori digunakan sebagai filter chip di halaman Layanan publik.</p>
        </div>
        <a href="{{ route('admin.service-categories.index') }}" class="px-6 py-2.5 bg-surface-container text-on-surface rounded-xl font-label-lg hover:bg-surface-container-high transition-colors flex items-center gap-2">
            <span class="material-symbols-outlined">arrow_back</span> Kembali
        </a>
    </div>

    <div class="p-6 bg-surface-container-lowest border border-outline-variant rounded-2xl shadow-sm space-y-6">
        <form action="{{ $category->exists ? route('admin.service-categories.update', $category) : route('admin.service-categories.store') }}"
              method="POST" class="space-y-5 crud-form">
            @csrf
            @if($category->exists)
                @method('PUT')
            @endif

            {{-- Error messages --}}
            @if($errors->any())
            <div class="p-3 rounded-xl bg-error-container border border-error/20 text-error text-xs space-y-1">
                @foreach($errors->all() as $error)
                <p>• {{ $error }}</p>
                @endforeach
            </div>
            @endif

            {{-- Nama Kategori --}}
            <div>
                <label for="name" class="block text-xs font-bold text-on-surface mb-1">
                    Nama Kategori <span class="text-error">*</span>
                </label>
                <input type="text" name="name" id="name"
                       value="{{ old('name', $category->name) }}"
                       required
                       oninput="generateSlug(this.value)"
                       class="w-full px-4 py-2.5 rounded-xl bg-surface-container-low border border-outline-variant text-sm text-on-surface focus:ring-1 focus:ring-primary focus:border-primary placeholder:text-outline"
                       placeholder="Contoh: Pijat, Refleksi, Spa & Relaksasi">
            </div>

            {{-- Slug --}}
            <div>
                <label for="slug" class="block text-xs font-bold text-on-surface mb-1">
                    Slug (Filter Key)
                    <span class="text-on-surface-variant font-normal ml-1">— auto-generate dari nama, bisa diubah manual</span>
                </label>
                <div class="relative">
                    <span class="absolute left-4 top-1/2 -translate-y-1/2 text-xs text-outline-variant font-mono">key:</span>
                    <input type="text" name="slug" id="slug"
                           value="{{ old('slug', $category->slug) }}"
                           class="w-full pl-12 pr-4 py-2.5 rounded-xl bg-surface-container-low border border-outline-variant text-sm text-on-surface focus:ring-1 focus:ring-primary focus:border-primary placeholder:text-outline font-mono"
                           placeholder="pijat-tradisional">
                </div>
                <p class="text-[10px] text-on-surface-variant mt-1">Hanya huruf kecil, angka, dan tanda hubung. Digunakan sebagai <code class="bg-surface-container-low px-1 rounded">data-filter</code> pada filter chip.</p>
            </div>

            {{-- Status --}}
            <div class="pt-2">
                <label class="inline-flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" name="is_active" value="1"
                           {{ old('is_active', $category->exists ? $category->is_active : true) ? 'checked' : '' }}
                           class="rounded bg-surface-container-low border-outline-variant text-primary focus:ring-primary">
                    <span class="text-xs font-bold text-on-surface">Aktifkan kategori ini (tampil sebagai filter chip)</span>
                </label>
            </div>

            {{-- Buttons --}}
            <div class="pt-4 border-t border-outline-variant flex items-center justify-end gap-3">
                <a href="{{ route('admin.service-categories.index') }}"
                   class="px-5 py-2.5 rounded-xl border border-outline-variant text-on-surface-variant hover:bg-surface-variant font-bold text-xs transition-colors">
                    Batal
                </a>
                <button type="submit"
                        class="px-6 py-2.5 rounded-xl bg-primary text-on-primary font-bold text-xs hover:bg-opacity-90 transition-all active:scale-95 shadow">
                    {{ $category->exists ? 'Simpan Perubahan' : 'Tambah Kategori' }}
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function generateSlug(name) {
    const slug = name
        .toLowerCase()
        .replace(/[^a-z0-9\s-]/g, '')
        .trim()
        .replace(/\s+/g, '-')
        .replace(/-+/g, '-');
    document.getElementById('slug').value = slug;
}
</script>
@endsection