@extends('layouts.admin')

@section('title', 'التصنيفات | Help Numo')
@section('page-title', 'إدارة التصنيفات')

@section('admin_content')
    <div class="card category-table" data-category-table data-reorder-url="{{ route('admin.categories.reorder') }}">
        <div class="category-table__header">
            <div>
                <h3 class="heading-m">🗂️ التصنيفات الرئيسية</h3>
                <p class="body-s text-muted category-table__hint">
                    اسحب الصفوف من المقبض ⋮⋮ لترتيب التصنيفات والفروع؛ يُحفظ الترتيب تلقائياً.
                </p>
            </div>
            <a class="btn btn--primary" href="{{ route('admin.categories.create') }}">➕ إنشاء تصنيف</a>
        </div>

        <div class="category-table__body" data-sortable data-parent-id="">
            @forelse ($categories as $category)
                <div class="category-row" data-category-row data-id="{{ $category->id }}" draggable="true">
                    <span class="category-row__grip" aria-hidden="true" title="سحب لإعادة الترتيب">⋮⋮</span>
                    <div class="category-row__info">
                        <span class="category-row__name">{{ $category->name }}</span>
                        <x-new-badge :show="$category->show_new_badge" class="new-badge--admin-row" />
                        <span class="category-row__sep" aria-hidden="true">·</span>
                        <span class="category-row__slug">/{{ $category->slug }}</span>
                    </div>
                    <div class="category-row__actions">
                        <a class="action-btn action-btn--compact" href="{{ route('admin.categories.edit', $category) }}">تعديل</a>
                        <form action="{{ route('admin.categories.toggle', $category) }}" method="POST">
                            @csrf
                            <button type="submit" class="action-btn action-btn--ghost action-btn--compact">
                                {{ $category->is_visible ? 'إخفاء' : 'إظهار' }}
                            </button>
                        </form>
                        <form action="{{ route('admin.categories.destroy', $category) }}" method="POST" onsubmit="return confirm('متأكد من الحذف؟');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="action-btn action-btn--danger action-btn--compact">حذف</button>
                        </form>
                        <button
                            type="button"
                            class="category-row__expand"
                            data-toggle-sublist
                            aria-expanded="false"
                            aria-label="إظهار أو إخفاء التصنيفات الفرعية"
                            title="التصنيفات الفرعية"
                        >
                            <span data-expand-icon aria-hidden="true">+</span>
                        </button>
                    </div>
                </div>
                <div class="subcategory-table" data-sublist hidden data-sortable data-parent-id="{{ $category->id }}">
                    @forelse ($category->children as $child)
                        <div class="subcategory-row" data-id="{{ $child->id }}" draggable="true">
                            <span class="category-row__grip" aria-hidden="true" title="سحب لإعادة الترتيب">⋮⋮</span>
                            <div class="category-row__info category-row__info--sub">
                                <span class="category-row__name">{{ $child->name }}</span>
                                <x-new-badge :show="$child->show_new_badge" class="new-badge--admin-row" />
                                <span class="category-row__sep" aria-hidden="true">·</span>
                                <span class="category-row__slug">/{{ $child->slug }}</span>
                            </div>
                            <div class="category-row__actions">
                                <a class="action-btn action-btn--compact" href="{{ route('admin.categories.edit', $child) }}">تعديل</a>
                                <form action="{{ route('admin.categories.toggle', $child) }}" method="POST">
                                    @csrf
                                    <button type="submit" class="action-btn action-btn--ghost action-btn--compact">
                                        {{ $child->is_visible ? 'إخفاء' : 'إظهار' }}
                                    </button>
                                </form>
                                <form action="{{ route('admin.categories.destroy', $child) }}" method="POST" onsubmit="return confirm('متأكد من الحذف؟');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="action-btn action-btn--danger action-btn--compact">حذف</button>
                                </form>
                            </div>
                        </div>
                    @empty
                        <div class="category-empty">
                            📁 لا توجد تصنيفات فرعية. <a href="{{ route('admin.categories.create', ['parent' => $category->id]) }}">أضف تصنيفاً فرعياً.</a>
                        </div>
                    @endforelse
                </div>
            @empty
                <p class="body-s text-muted">📭 لا توجد تصنيفات حتى الآن. أنشئ أول تصنيف للبدء.</p>
            @endforelse
        </div>
    </div>
@endsection