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

@section('content')
<div class="max-w-lg">
    <form method="POST" action="{{ route('admin.taxonomies.update', [$type, $taxonomy->id]) }}"
          x-data="postForm()" @submit.prevent="submit($event)"
          class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 space-y-4">
        @csrf
        <input type="hidden" name="_method" value="PUT">

        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Name</label>
            <input type="text" name="name" value="{{ $taxonomy->name }}" required
                   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">
            <p x-show="hasError('name')" x-text="getError('name')" class="text-xs text-red-500 mt-1"></p>
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Slug</label>
            <input type="text" name="slug" value="{{ $taxonomy->slug }}"
                   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">
            <p x-show="hasError('slug')" x-text="getError('slug')" class="text-xs text-red-500 mt-1"></p>
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Description</label>
            <textarea name="description" rows="3"
                      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">{{ $taxonomy->description }}</textarea>
        </div>
        <div x-data="selectSearch(
                [{ value: '', label: 'None (top level)' }, @foreach($parents as $p){ value: '{{ $p->id }}', label: '{{ addslashes($p->name) }}' },@endforeach],
                '{{ $taxonomy->parent_id ?? '' }}',
                'Search parent...'
             )"
             @keydown.escape="open = false"
             class="relative">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Parent</label>
            <input type="hidden" name="parent_id" :value="value">
            <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" x-ref="searchInput" @keydown="onKeydown($event)"
                           placeholder="Search..." autofocus
                           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-48 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="message" x-text="message"
             :class="saved ? 'bg-green-50 text-green-700 dark:bg-green-900/20 dark:text-green-300' : 'bg-red-50 text-red-700 dark:bg-red-900/20 dark:text-red-300'"
             class="text-xs p-2 rounded border" style="display:none"></div>

        <div class="flex gap-3 pt-2">
            <button type="submit" :disabled="saving"
                    class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 disabled:opacity-60 text-white rounded-lg text-sm font-medium flex items-center gap-2">
                <svg x-show="saving" 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="saving ? 'Saving...' : 'Update'"></span>
            </button>
            <a href="{{ route('admin.taxonomies.index', $type) }}"
               class="px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg text-sm font-medium">Cancel</a>
        </div>
    </form>
</div>
@endsection
