@extends('admin.layouts.app')

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/admin/clubs.css') }}">
@endpush

@section('content')
    <div class="azp-page">

        <div class="azp-page-header">
            <div class="azp-page-title-wrap">
                <div class="azp-page-title">Subcategorias</div>
                <div class="azp-page-subtitle">Gerir subcategorias por categoria</div>
            </div>

            <a class="btn primary" href="{{ route('admin.subcategories.create') }}">Nova subcategoria</a>
        </div>

        @if(session('success'))
            <div class="flash success">{{ session('success') }}</div>
        @endif

        <div class="azp-card">
            <form method="GET" action="{{ route('admin.subcategories.index') }}" class="field-group">
                <div class="azp-form-grid">
                    <div class="field">
                        <div class="label">Pesquisar</div>
                        <input type="text" name="q" value="{{ $q ?? '' }}" placeholder="nome ou slug">
                        <div class="hint">Filtra rapidamente.</div>
                    </div>
                </div>
                <div class="form-actions">
                    <button class="btn outline" type="submit">Filtrar</button>
                    <a class="btn" href="{{ route('admin.subcategories.index') }}">Limpar</a>
                </div>
            </form>
        </div>

        <div class="azp-card">
            <div class="azp-table-wrap">
                <table class="azp-table">
                    <thead>
                    <tr>
                        <th>Nome</th>
                        <th>Categoria</th>
                        <th>Slug</th>
                        <th>Estado</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse($subcategories as $sc)
                        <tr>
                            <td class="azp-table-primary" data-label="Nome">{{ $sc->name }}</td>
                            <td data-label="Categoria">{{ $sc->category ? $sc->category->name : '-' }}</td>
                            <td data-label="Slug">{{ $sc->slug }}</td>
                            <td data-label="Estado">
                                <span class="azp-tag">
                                    <span class="azp-dot {{ $sc->is_active ? 'active' : 'inactive' }}"></span>
                                    {{ $sc->is_active ? 'Ativa' : 'Inativa' }}
                                </span>
                            </td>
                            <td data-label="Ações">
                                <span class="azp-actions">
                                    <a class="btn xs outline" href="{{ route('admin.subcategories.edit', $sc->id) }}">Editar</a>
                                </span>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" style="color:#777;">Sem subcategorias.</td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>

            <div style="margin-top:12px;">
                {{ $subcategories->appends(['q' => $q])->links() }}
            </div>
        </div>

    </div>
@endsection