@use('Illuminate\Support\Str')
<x-app-layout>
    <div
        x-data='{
        showModal: @json($errors->any()),
        editing: @json(old('_method') === 'PUT'),
        form: {
            id: @json(old('temp_id')),
            name: @json(old('name', '')),
            description: @json(old('description', '')),
            parent_id: @json(old('parent_id', '')),
            sub_categories: []
        },
        openCreate() {
            this.showModal = true;
            this.editing = false;
            this.form = { id: "", name: "", description: "", parent_id: "", sub_categories: [] };
        },
        openEdit(category) {
            this.showModal = true;
            this.editing = true;
            this.form = {
                id: category.id,
                name: category.name,
                description: category.description,
                parent_id: category.parent_id || ""
            };
        }
    }'>
        <x-slot name="header">
            <h2 class="text-2xl font-bold tracking-tight text-slate-900">Asset Categories</h2>
        </x-slot>

        <div class="space-y-6">
            <x-ui.card>
                <div class="flex justify-between items-center p-6 border-b border-gray-100">
                    <h3 class="font-bold text-slate-900">All Categories</h3>
                    <x-ui.button variant="primary" type="button" @click="openCreate()">+ New Category</x-ui.button>
                </div>

                <div class="p-0">
                    {{-- Mobile Cards --}}
                    <div class="md:hidden space-y-4 p-4">
                        @forelse($categories as $category)
                            <div class="bg-white p-5 rounded-xl border border-slate-100 shadow-xs">
                                <div class="flex justify-between items-start mb-3">
                                    <div>
                                        <h4 class="text-base font-bold text-slate-900">
                                            {{ $category->name }}
                                        </h4>
                                        <p class="text-sm text-slate-500 mt-1">
                                            {{ Str::limit($category->description, 50) }}</p>
                                    </div>
                                    <span
                                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                        {{ $category->assets_count }} Assets
                                    </span>
                                </div>

                                <div class="flex items-center justify-end pt-3 mt-3 border-t border-slate-50 gap-2">
                                    <x-ui.button variant="primary" size="sm" type="button"
                                        href="{{ route('admin.categories.show', $category) }}">
                                        Manage
                                    </x-ui.button>
                                    <x-ui.button variant="outline" size="sm" type="button"
                                        @click="openEdit({{ json_encode(['id' => $category->uuid, 'name' => $category->name, 'description' => $category->description]) }})">
                                        Edit
                                    </x-ui.button>
                                    <form action="{{ route('admin.categories.destroy', $category) }}" method="POST"
                                        class="inline"
                                        onsubmit="return confirm('Are you sure? This cannot be undone.')">
                                        @csrf @method('DELETE')
                                        <button type="submit"
                                            class="text-red-500 text-sm font-medium hover:text-red-700 p-2">
                                            Delete
                                        </button>
                                    </form>
                                </div>
                            </div>
                        @empty
                            <div class="bg-white p-8 text-center rounded-xl border border-dashed border-slate-200">
                                <x-ui.empty-state icon="tag" title="No categories found"
                                    description="Start by adding a new asset category." />
                            </div>
                        @endforelse
                    </div>

                    {{-- Desktop Table --}}
                    <div class="hidden md:block overflow-x-auto">
                        <table class="w-full text-sm text-left">
                            <thead class="text-xs text-slate-500 uppercase bg-slate-50 border-b border-gray-100">
                                <tr>
                                    <th class="px-6 py-4 font-bold">S/N</th>
                                    <th class="px-6 py-4 font-bold">Name</th>
                                    <th class="px-6 py-4 font-bold">Description</th>
                                    <th class="px-6 py-4 font-bold">Assets</th>
                                    <th class="px-6 py-4 font-bold">Actions</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-50">
                                @forelse($categories as $category)
                                    <tr class="hover:bg-slate-50/50 transition-colors">
                                        <td class="px-6 py-4 font-medium text-slate-900">{{ $loop->iteration }}</td>
                                        <td class="px-6 py-4 font-medium text-slate-900">
                                            {{ $category->name }}
                                        </td>
                                        <td class="px-6 py-4 text-slate-600">
                                            {{ Str::limit($category->description, 50) }}</td>
                                        <td class="px-6 py-4">
                                            <span
                                                class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                                {{ $category->assets_count }}
                                            </span>
                                        </td>
                                        <td class="px-6 py-4 flex items-center gap-2">
                                            <x-ui.button variant="faint" size="sm" type="button"
                                                href="{{ route('admin.categories.show', $category) }}">
                                                Manage Subcategories
                                            </x-ui.button>
                                            <x-ui.button variant="outline" size="sm" type="button"
                                                @click="openEdit({{ json_encode(['id' => $category->uuid, 'name' => $category->name, 'description' => $category->description]) }})">
                                                Edit
                                            </x-ui.button>
                                            <form action="{{ route('admin.categories.destroy', $category) }}"
                                                method="POST" class="inline"
                                                onsubmit="return confirm('Are you sure? This cannot be undone.')">
                                                @csrf @method('DELETE')
                                                <button type="submit"
                                                    class="text-red-500 text-sm font-medium hover:text-red-700 ml-2">
                                                    Delete
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="px-6 py-8 text-center text-slate-500">No categories
                                            found.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="p-4 border-t border-gray-100">
                    {{ $categories->links() }}
                </div>
            </x-ui.card>
        </div>

        <!-- Modal -->
        <div x-show="showModal" style="display: none;" class="fixed inset-0 z-50 overflow-y-auto"
            aria-labelledby="modal-title" role="dialog" aria-modal="true">
            <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                <div x-show="showModal" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0"
                    x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200"
                    x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
                    class="fixed inset-0 bg-slate-900 bg-opacity-50 transition-opacity" @click="showModal = false"
                    aria-hidden="true"></div>

                <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

                <div x-show="showModal" x-transition:enter="ease-out duration-300"
                    x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                    x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                    x-transition:leave="ease-in duration-200"
                    x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                    x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                    class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xs transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                    <form
                        :action="editing ? '{{ route('admin.categories.index') }}/' + form.id :
                            '{{ route('admin.categories.store') }}'"
                        method="POST">
                        @csrf
                        <input type="hidden" name="_method" :value="editing ? 'PUT' : 'POST'">
                        <input type="hidden" name="temp_id" x-model="form.id">

                        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                            <h3 class="text-lg leading-6 font-bold text-slate-900 mb-4" id="modal-title"
                                x-text="editing ? 'Edit Category' : 'New Category'"></h3>

                            <div class="space-y-4">
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 mb-1">Name</label>
                                    <input type="text" name="name" x-model="form.name" required
                                        class="w-full text-sm border-slate-200 rounded-lg focus:border-green-500 focus:ring-green-500">
                                    @error('name')
                                        <span class="text-xs text-red-500 mt-1">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-slate-700 mb-1">Description</label>
                                    <textarea name="description" x-model="form.description" rows="3"
                                        class="w-full text-sm border-slate-200 rounded-lg focus:border-green-500 focus:ring-green-500"></textarea>
                                    @error('description')
                                        <span class="text-xs text-red-500 mt-1">{{ $message }}</span>
                                    @enderror
                                </div>

                                <!-- Dynamic Sub-categories Section -->
                                <div x-show="!editing && form.parent_id === ''" x-transition class="mt-6 pt-6 border-t border-slate-100">
                                    <div class="flex justify-between items-center mb-3">
                                        <div>
                                            <h4 class="text-sm font-bold text-slate-800">Add Sub-Categories</h4>
                                            <p class="text-xs text-slate-500">Quickly create sub-categories for this parent category.</p>
                                        </div>
                                        <button type="button" @click="form.sub_categories.push({name: '', description: ''})" 
                                            class="text-xs font-medium text-green-700 hover:text-green-800 bg-green-50 px-3 py-1.5 rounded-lg border border-green-200 transition-colors shadow-sm flex items-center gap-1">
                                            <span>&#43;</span> Add Row
                                        </button>
                                    </div>
                                    
                                    <div class="space-y-3">
                                        <template x-for="(sub, index) in form.sub_categories" :key="index">
                                            <div class="flex gap-3 items-start bg-slate-50 p-3 rounded-xl border border-slate-100 shadow-sm">
                                                <div class="flex-1 space-y-3">
                                                    <div>
                                                        <input type="text" :name="'sub_categories['+index+'][name]'" x-model="sub.name" placeholder="Sub-category Name" required
                                                            class="w-full text-sm border-slate-200 rounded-lg focus:border-green-500 focus:ring-green-500 shadow-sm">
                                                    </div>
                                                    <div>
                                                        <input type="text" :name="'sub_categories['+index+'][description]'" x-model="sub.description" placeholder="Description (optional)"
                                                            class="w-full text-sm border-slate-200 rounded-lg focus:border-green-500 focus:ring-green-500 shadow-sm">
                                                    </div>
                                                </div>
                                                <button type="button" @click="form.sub_categories.splice(index, 1)" class="text-slate-400 hover:text-red-500 p-2 rounded-lg hover:bg-white transition-colors">
                                                    <svg class="w-5 h-5" 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"></path></svg>
                                                </button>
                                            </div>
                                        </template>
                                        <div x-show="form.sub_categories.length === 0" class="text-center py-4 bg-slate-50/50 rounded-xl border border-dashed border-slate-200">
                                            <p class="text-xs text-slate-500 italic">No sub-categories added. Click "Add Row" to start.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div
                            class="bg-slate-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse border-t border-slate-100">
                            <x-ui.button variant="primary" type="submit" class="w-full sm:w-auto sm:ml-3">
                                Save Category
                            </x-ui.button>
                            <x-ui.button type="button" variant="outline" class="mt-3 w-full sm:mt-0 sm:w-auto"
                                @click="showModal = false">
                                Cancel
                            </x-ui.button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>