@extends('layouts.app')
@section('title','Categorías — '.config('app.name'))

@section('content')
<div class="dashboard-page admin-workspace">
    <div class="container-shell dashboard-shell">
        <x-dashboard-sidebar/>
        <section class="dashboard-main">
            <header class="admin-page-header">
                <div><span class="dashboard-kicker">Arquitectura del catálogo</span><h1>Categorías</h1><p>Organiza la oferta académica en rutas fáciles de explorar.</p></div>
                <a class="btn btn-primary" href="#nueva-categoria">+ Nueva categoría</a>
            </header>

            <section class="admin-stat-strip">
                <article><span>Total</span><strong>{{ number_format($categoryStats['total']) }}</strong><small>categorías y subcategorías</small></article>
                <article><span>Visibles</span><strong>{{ number_format($categoryStats['active']) }}</strong><small>activas en el catálogo</small></article>
                <article><span>Subcategorías</span><strong>{{ number_format($categoryStats['subcategories']) }}</strong><small>niveles secundarios</small></article>
                <article class="{{ $categoryStats['uncategorized_courses'] ? 'needs-attention' : '' }}"><span>Sin clasificar</span><strong>{{ number_format($categoryStats['uncategorized_courses']) }}</strong><small>cursos requieren categoría</small></article>
            </section>

            <form class="admin-toolbar" method="GET">
                <label class="admin-search-field"><span>Buscar</span><input class="form-input" name="q" value="{{ request('q') }}" placeholder="Nombre de categoría"></label>
                <label><span>Estado</span><select class="form-select" name="status"><option value="">Todos</option><option value="active" @selected(request('status')==='active')>Visibles</option><option value="inactive" @selected(request('status')==='inactive')>Ocultas</option></select></label>
                <button class="btn btn-secondary">Aplicar filtros</button>
                @if(request()->hasAny(['q','status']))<a href="{{ route('admin.categories.index') }}">Limpiar</a>@endif
            </form>

            <div class="admin-module-layout">
                <section class="panel module-list-panel">
                    <header class="panel-head"><div><h2>Estructura actual</h2><p>Edita nombre, jerarquía, orden y visibilidad.</p></div><span class="settings-count">{{ $categories->total() }}</span></header>
                    <div class="module-record-list">
                        @forelse($categories as $category)
                            <details class="module-record">
                                <summary>
                                    <span class="module-record-icon">{{ $category->icon ?: mb_strtoupper(mb_substr($category->name,0,1)) }}</span>
                                    <span><strong>{{ $category->name }}</strong><small>{{ $category->parent?->name ?? 'Categoría principal' }} · {{ $category->courses_count }} cursos</small></span>
                                    <span class="status {{ $category->is_active ? 'status-active' : 'status-suspended' }}">{{ $category->is_active ? 'Visible' : 'Oculta' }}</span><i>⌄</i>
                                </summary>
                                <form class="module-record-form" method="POST" action="{{ route('admin.categories.update',$category) }}">
                                    @csrf @method('PUT')
                                    <div class="form-grid"><label><span class="form-label">Nombre</span><input class="form-input" name="name" value="{{ $category->name }}" required></label><label><span class="form-label">Categoría superior</span><select class="form-select" name="parent_id"><option value="">Ninguna</option>@foreach($parentCategories->where('id','!=',$category->id) as $parent)<option value="{{ $parent->id }}" @selected($category->parent_id===$parent->id)>{{ $parent->name }}</option>@endforeach</select></label><label><span class="form-label">Icono o abreviatura</span><input class="form-input" name="icon" value="{{ $category->icon }}" maxlength="80" placeholder="Ej. UX"></label><label><span class="form-label">Orden</span><input class="form-input" type="number" name="position" value="{{ $category->position }}" min="0" required></label><label class="field-full"><span class="form-label">Descripción</span><textarea class="form-textarea" name="description">{{ $category->description }}</textarea></label></div>
                                    <div class="record-form-actions"><label class="switch-row compact"><span><strong>Visible en el catálogo</strong><small>Los cursos conservan esta categoría aunque se oculte.</small></span><input type="checkbox" name="is_active" value="1" @checked($category->is_active)><i></i></label><button class="btn btn-primary">Guardar categoría</button></div>
                                </form>
                            </details>
                        @empty<div class="empty-state"><strong>No hay categorías con estos filtros</strong><span>Crea la primera o modifica la búsqueda.</span></div>@endforelse
                    </div>
                    @if($categories->hasPages())<div class="panel-pagination">{{ $categories->links() }}</div>@endif
                </section>

                <aside class="panel module-create-panel" id="nueva-categoria">
                    <header class="panel-head"><div><span>Nueva estructura</span><h2>Crear categoría</h2><p>Usa nombres breves y reconocibles.</p></div></header>
                    <form class="panel-body" method="POST" action="{{ route('admin.categories.store') }}">@csrf
                        <label><span class="form-label">Nombre</span><input class="form-input" name="name" value="{{ old('name') }}" placeholder="Ej. Tecnología y datos" required></label>
                        <label><span class="form-label">Pertenece a</span><select class="form-select" name="parent_id"><option value="">Categoría principal</option>@foreach($parentCategories as $parent)<option value="{{ $parent->id }}">{{ $parent->name }}</option>@endforeach</select></label>
                        <label><span class="form-label">Icono o abreviatura</span><input class="form-input" name="icon" maxlength="80" placeholder="Ej. TD"></label>
                        <label><span class="form-label">Descripción</span><textarea class="form-textarea" name="description" placeholder="Qué encontrará el estudiante en esta categoría."></textarea></label>
                        <button class="btn btn-primary">Crear categoría</button>
                    </form>
                </aside>
            </div>
        </section>
    </div>
</div>
@endsection