@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', '')),
        },
        openCreate() {
            this.showModal = true;
            this.editing = false;
            this.form = { id: "", name: "", description: "" };
        },
        openEdit(subcategory) {
            this.showModal = true;
            this.editing = true;
            this.form = {
                id: subcategory.id,
                name: subcategory.name,
                description: subcategory.description
            };
        }
    }'>
        <x-slot name="header">
            <div class="flex items-center justify-between">
                <div>
                    <h2 class="text-2xl font-bold tracking-tight text-slate-900">{{ $category->name }} Subcategories</h2>
                    <nav class="flex mt-1" aria-label="Breadcrumb">
                        <ol class="inline-flex items-center space-x-1 md:space-x-3">
                            <li class="inline-flex items-center">
                                <a href="{{ route('admin.categories.index') }}" class="text-sm text-slate-500 hover:text-green-600">Categories</a>
                            </li>
                            <li aria-current="page">
                                <div class="flex items-center">
                                    <span class="mx-2 text-slate-400">/</span>
                                    <span class="text-sm font-medium text-slate-500">{{ $category->name }}</span>
                                </div>
                            </li>
                        </ol>
                    </nav>
                </div>
                <x-ui.button variant="outline" href="{{ route('admin.categories.index') }}">
                    &larr; Back to Categories
                </x-ui.button>
            </div>
        </x-slot>

        <div class="space-y-6">
            <x-ui.card>
                <div class="px-6 py-5 border-b border-slate-100 flex items-center justify-between">
                    <div>
                        <h3 class="font-bold text-slate-900">Subcategories</h3>
                        <p class="text-sm text-slate-500 mt-1">Manage specific subcategories under {{ $category->name }}.</p>
                    </div>
                    <x-ui.button variant="primary" type="button" @click="openCreate()">+ Add Subcategory</x-ui.button>
                </div>

                <div class="p-0">
                    {{-- Mobile Cards --}}
                    <div class="md:hidden space-y-4 p-4">
                        @forelse($category->children as $sub)
                            <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">{{ $sub->name }}</h4>
                                        <p class="text-sm text-slate-500 mt-1">{{ Str::limit($sub->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">
                                        {{ $sub->assets_count ?? 0 }} 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="outline" size="sm" type="button" @click="openEdit({{ json_encode(['id' => $sub->uuid, 'name' => $sub->name, 'description' => $sub->description]) }})">
                                        Edit
                                    </x-ui.button>
                                    <form action="{{ route('admin.categories.destroy', $sub) }}" 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="collection" title="No subcategories found" description="This category currently has no subcategories." />
                            </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-slate-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 text-right">Actions</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-50">
                                @forelse($category->children as $sub)
                                    <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">{{ $sub->name }}</td>
                                        <td class="px-6 py-4 text-slate-600">{{ Str::limit($sub->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">
                                                {{ $sub->assets_count ?? 0 }}
                                            </span>
                                        </td>
                                        <td class="px-6 py-4 flex items-center justify-end gap-2">
                                            <x-ui.button variant="outline" size="sm" type="button" @click="openEdit({{ json_encode(['id' => $sub->uuid, 'name' => $sub->name, 'description' => $sub->description]) }})">
                                                Edit
                                            </x-ui.button>
                                            <form action="{{ route('admin.categories.destroy', $sub) }}" 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 subcategories found.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </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">
                        <!-- Implicit parent_id for subcategories -->
                        <input type="hidden" name="parent_id" value="{{ $category->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 Subcategory' : 'Add Subcategory'"></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>
                            </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" x-text="editing ? 'Save Changes' : 'Create Subcategory'"></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>