@csrf
<div class="grid gap-4 sm:grid-cols-2">
    <div class="sm:col-span-1">
        <label for="name" class="block text-sm font-medium text-slate-700">Name <span class="text-red-600">*</span></label>
        <input id="name" name="name" value="{{ old('name', $category->name ?? '') }}" required class="mt-1 w-full rounded-xl border border-slate-300 bg-slate-50 px-3 py-2.5 focus:border-cyan-500 focus:bg-white focus:outline-none">
        @error('name')
            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
        @enderror
    </div>

    <div class="sm:col-span-1">
        <label for="slug" class="block text-sm font-medium text-slate-700">Slug (optional)</label>
        <input id="slug" name="slug" value="{{ old('slug', $category->slug ?? '') }}" class="mt-1 w-full rounded-xl border border-slate-300 bg-slate-50 px-3 py-2.5 focus:border-cyan-500 focus:bg-white focus:outline-none">
        @error('slug')
            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
        @enderror
    </div>

    <div class="sm:col-span-2">
        <label for="parent_id" class="block text-sm font-medium text-slate-700">Parent Category</label>
        <select id="parent_id" name="parent_id" class="mt-1 w-full rounded-xl border border-slate-300 bg-slate-50 px-3 py-2.5 focus:border-cyan-500 focus:bg-white focus:outline-none">
            <option value="">Top Level</option>
            @foreach ($parents as $parent)
                <option value="{{ $parent->id }}" @selected((string) old('parent_id', $category->parent_id ?? ($selectedParentId ?? '')) === (string) $parent->id)>
                    {{ $parent->slug_path }}
                </option>
            @endforeach
        </select>
        <p class="mt-1 text-xs text-slate-500">Only categories without content can be selected as parent.</p>
        @error('parent_id')
            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
        @enderror
    </div>

    <div class="sm:col-span-2">
        <label for="description" class="block text-sm font-medium text-slate-700">Description</label>
        <textarea id="description" name="description" rows="4" class="mt-1 w-full rounded-xl border border-slate-300 bg-slate-50 px-3 py-2.5 focus:border-cyan-500 focus:bg-white focus:outline-none">{{ old('description', $category->description ?? '') }}</textarea>
    </div>

    <div class="sm:col-span-2 rounded-xl border border-slate-200 bg-slate-50 p-4">
        <div class="mb-3 flex items-center justify-between">
            <h3 class="text-sm font-semibold text-slate-800">SEO Settings</h3>
            <button type="button" id="auto-seo-category" class="rounded-lg border border-cyan-200 bg-cyan-50 px-2.5 py-1 text-xs font-medium text-cyan-700 hover:bg-cyan-100">
                Auto Generate
            </button>
        </div>
        <div class="grid gap-3 sm:grid-cols-2">
            <div class="sm:col-span-2">
                <label for="seo_title" class="block text-xs font-medium text-slate-700">SEO Title</label>
                <input id="seo_title" name="seo_title" value="{{ old('seo_title', $category->seo_title ?? '') }}" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-500 focus:outline-none">
                @error('seo_title')
                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>
            <div class="sm:col-span-2">
                <label for="seo_description" class="block text-xs font-medium text-slate-700">SEO Description</label>
                <textarea id="seo_description" name="seo_description" rows="3" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-500 focus:outline-none">{{ old('seo_description', $category->seo_description ?? '') }}</textarea>
                @error('seo_description')
                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>
            <div class="sm:col-span-2">
                <label for="seo_keywords" class="block text-xs font-medium text-slate-700">SEO Keywords (comma separated)</label>
                <input id="seo_keywords" name="seo_keywords" value="{{ old('seo_keywords', $category->seo_keywords ?? '') }}" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-500 focus:outline-none">
                @error('seo_keywords')
                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>
        </div>
    </div>

    <label class="sm:col-span-2 inline-flex items-center gap-2 rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm">
        <input type="checkbox" name="is_active" value="1" class="h-4 w-4 rounded border-slate-300 text-cyan-600 focus:ring-cyan-500" @checked((bool) old('is_active', $category->is_active ?? true))>
        <span>Active Category</span>
    </label>
</div>

<script>
    (() => {
        const nameInput = document.getElementById('name');
        const slugInput = document.getElementById('slug');
        const descriptionInput = document.getElementById('description');
        const seoTitleInput = document.getElementById('seo_title');
        const seoDescriptionInput = document.getElementById('seo_description');
        const seoKeywordsInput = document.getElementById('seo_keywords');
        const autoSeoBtn = document.getElementById('auto-seo-category');
        if (!nameInput || !slugInput) return;

        let slugTouched = slugInput.value.trim() !== '';

        const toSlug = (value) =>
            value
                .toLowerCase()
                .trim()
                .replace(/[^a-z0-9\s-]/g, '')
                .replace(/\s+/g, '-')
                .replace(/-+/g, '-');

        slugInput.addEventListener('input', () => {
            slugTouched = slugInput.value.trim() !== '';
        });

        nameInput.addEventListener('input', () => {
            if (!slugTouched) {
                slugInput.value = toSlug(nameInput.value);
            }
        });

        const autoSeo = (force = false) => {
            const name = nameInput.value.trim();
            const description = (descriptionInput?.value || '').trim();
            const generatedTitle = name ? `${name} Content` : '';
            const generatedDescription = (description || (name ? `Download ${name} content free.` : '')).slice(0, 155);
            const generatedKeywords = name ? `${name}, ${name} content, free content`.toLowerCase() : '';

            if (seoTitleInput && (force || !seoTitleInput.value.trim())) seoTitleInput.value = generatedTitle;
            if (seoDescriptionInput && (force || !seoDescriptionInput.value.trim())) seoDescriptionInput.value = generatedDescription;
            if (seoKeywordsInput && (force || !seoKeywordsInput.value.trim())) seoKeywordsInput.value = generatedKeywords;
        };

        autoSeoBtn?.addEventListener('click', () => autoSeo(true));
        nameInput.addEventListener('input', () => autoSeo(false));
        descriptionInput?.addEventListener('input', () => autoSeo(false));
    })();
</script>