@extends('admin.layouts.app')
@section('title', ucfirst($type) . 's')
@section('page-title', ucfirst($type) . 's')

@section('content')
<div x-data="taxonomiesManager('{{ $type }}')" x-init="init()">
    <div class="flex flex-col md:flex-row gap-6">

        {{-- Left: Add New --}}
        <div class="w-full md:w-72 md:flex-shrink-0">
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-5 md:sticky md:top-6">
                <h3 class="font-semibold text-gray-900 dark:text-white mb-4">Add New {{ ucfirst($type) }}</h3>
                <div class="space-y-3">
                    <div>
                        <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Name <span class="text-red-400">*</span></label>
                        <input type="text" x-model="form.name" placeholder="{{ ucfirst($type) }} name"
                               class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Slug</label>
                        <input type="text" x-model="form.slug" placeholder="auto-generated"
                               class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white font-mono">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Description</label>
                        <textarea x-model="form.description" rows="2" placeholder="Optional description"
                                  class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white resize-none"></textarea>
                    </div>
                    <div x-data="selectSearch(
                            [{ value: '', label: 'None (top level)' }, @foreach($parents as $p){ value: '{{ $p->id }}', label: '{{ addslashes($p->name) }}' },@endforeach],
                            '',
                            'Search parent...'
                         )"
                         x-init="$watch('value', v => { $root.form.parent_id = v })"
                         @keydown.escape="open = false"
                         class="relative">
                        <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Parent</label>
                        <button type="button" @click="open = !open"
                                class="w-full flex items-center justify-between border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-left">
                            <span x-text="selectedLabel || 'None (top level)'" :class="!value ? 'text-gray-400' : ''"></span>
                            <svg class="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                            </svg>
                        </button>
                        <div x-show="open" x-cloak @click.outside="open = false"
                             class="absolute z-50 mt-1 w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden">
                            <div class="p-2 border-b border-gray-100 dark:border-gray-700">
                                <input type="text" x-model="search" @keydown="onKeydown($event)"
                                       placeholder="Search..."
                                       class="w-full px-3 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500">
                            </div>
                            <ul class="max-h-40 overflow-y-auto py-1">
                                <template x-for="opt in filtered" :key="opt.value">
                                    <li @click="select(opt)"
                                        class="flex items-center justify-between px-3 py-2 text-sm cursor-pointer hover:bg-indigo-50 dark:hover:bg-indigo-900/20"
                                        :class="String(value) === String(opt.value) ? 'bg-indigo-50 dark:bg-indigo-900/20 text-indigo-600' : 'text-gray-700 dark:text-gray-300'">
                                        <span x-text="opt.label"></span>
                                        <svg x-show="String(value) === String(opt.value)" class="w-4 h-4 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                        </svg>
                                    </li>
                                </template>
                                <li x-show="filtered.length === 0" class="px-3 py-2 text-sm text-gray-400">No results</li>
                            </ul>
                        </div>
                    </div>

                    <div x-show="formMessage" x-text="formMessage"
                         :class="formError ? 'bg-red-50 text-red-700 dark:bg-red-900/20 dark:text-red-300' : 'bg-green-50 text-green-700 dark:bg-green-900/20 dark:text-green-300'"
                         class="text-xs p-2 rounded border" style="display:none"></div>

                    <button @click="create()" :disabled="creating || !form.name.trim()"
                            class="w-full py-2 bg-indigo-600 hover:bg-indigo-700 disabled:opacity-50 text-white rounded-lg text-sm font-medium flex items-center justify-center gap-2">
                        <svg x-show="creating" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
                        </svg>
                        <span x-text="creating ? 'Adding...' : 'Add {{ ucfirst($type) }}'"></span>
                    </button>
                </div>
            </div>

        </div>

        {{-- Right: List --}}
        <div class="flex-1">
            <div class="flex items-center gap-3 mb-4">
                <div class="relative flex-1 max-w-xs">
                    <svg class="absolute left-3 top-2.5 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                    </svg>
                    <input type="text" x-model="search" @input="onSearch()" placeholder="Search {{ $type }}s..."
                           class="pl-9 w-full text-sm border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-indigo-500 outline-none">
                </div>
                <p class="text-sm text-gray-500 dark:text-gray-400">Total: <span x-text="meta.total"></span></p>
            </div>

            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm overflow-hidden">
                <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="bg-gray-50 dark:bg-gray-700/50">
                        <tr>
                            <th class="text-left px-4 py-3 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Name</th>
                            <th class="hidden sm:table-cell text-left px-4 py-3 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Slug</th>
                            <th class="hidden md:table-cell text-left px-4 py-3 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Parent</th>
                            <th class="hidden sm:table-cell text-left px-4 py-3 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Posts</th>
                            <th class="px-4 py-3"></th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                        <template x-if="loading">
                            <tr><td colspan="5" class="px-4 py-12 text-center">
                                <div class="flex items-center justify-center gap-2 text-gray-400">
                                    <svg class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
                                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
                                    </svg>
                                    Loading...
                                </div>
                            </td></tr>
                        </template>
                        <template x-if="!loading">
                            <template x-for="term in items" :key="term.id">
                                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/30 transition-colors">
                                    <td class="px-4 py-3 font-medium text-gray-900 dark:text-white" x-text="term.name"></td>
                                    <td class="hidden sm:table-cell px-4 py-3 font-mono text-xs text-gray-500 dark:text-gray-400" x-text="term.slug"></td>
                                    <td class="hidden md:table-cell px-4 py-3 text-gray-500 dark:text-gray-400 text-xs" x-text="term.parent ?? '—'"></td>
                                    <td class="hidden sm:table-cell px-4 py-3 text-gray-500 dark:text-gray-400" x-text="term.posts_count"></td>
                                    <td class="px-4 py-3">
                                        <div class="flex items-center justify-end gap-1">
                                        <a :href="term.edit_url" class="p-1.5 text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 rounded">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>
                                        </a>
                                        <button type="button" @click="deleteTerm(term.id)" :disabled="deletingId === term.id"
                                                class="p-1.5 text-gray-400 hover:text-red-600 dark:hover:text-red-400 rounded disabled:opacity-50">
                                            <svg x-show="deletingId === term.id" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                                            <svg x-show="deletingId !== term.id" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                        </button>
                                        </div>
                                    </td>
                                </tr>
                            </template>
                        </template>
                        <template x-if="!loading && items.length === 0">
                            <tr><td colspan="5" class="px-4 py-12 text-center text-gray-400">No {{ $type }}s found.</td></tr>
                        </template>
                    </tbody>
                </table>
                </div>

                <div x-show="meta.last_page > 1" class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
                    <p class="text-sm text-gray-500 dark:text-gray-400">Total: <span x-text="meta.total"></span></p>
                    <div class="flex items-center gap-1">
                        <button @click="fetch(meta.current_page - 1)" :disabled="meta.current_page === 1"
                                class="px-3 py-1.5 text-sm rounded border border-gray-300 dark:border-gray-600 disabled:opacity-40">←</button>
                        <template x-for="p in pages()" :key="p">
                            <button @click="fetch(p)"
                                    :class="p === meta.current_page ? 'bg-indigo-600 text-white border-indigo-600' : 'border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300'"
                                    class="px-3 py-1.5 text-sm rounded border" x-text="p"></button>
                        </template>
                        <button @click="fetch(meta.current_page + 1)" :disabled="meta.current_page === meta.last_page"
                                class="px-3 py-1.5 text-sm rounded border border-gray-300 dark:border-gray-600 disabled:opacity-40">→</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
