@extends('layouts.admin')

@section('title', 'إدارة المقالات | Help Numo')
@section('page-title', 'إدارة المقالات')

@section('admin_content')
    <div class="card">
        <div class="list-header">
            <div>
                <h2 class="heading-m">📝 قائمة المقالات</h2>
            </div>
            <div class="list-header__actions">
                <a class="btn btn--secondary" href="{{ route('admin.articles.ordering') }}">↕ ترتيب الظهور</a>
                <a class="btn btn--primary" href="{{ route('admin.articles.create') }}">➕ إضافة مقالة</a>
            </div>
        </div>

        <form class="article-search article-search--compact" method="get" action="{{ route('admin.articles.index') }}" role="search" aria-label="بحث في المقالات">
            <div class="article-search__row">
                <div class="article-search__field article-search__field--grow">
                    <label class="form-label article-search__label" for="article-search-q">بحث</label>
                    <input
                        id="article-search-q"
                        type="search"
                        name="search"
                        class="input-control article-search__input"
                        value="{{ request('search') }}"
                        placeholder="العنوان أو المحتوى…"
                        title="عدة كلمات: تُطابق كل كلمة في العنوان أو النص."
                        autocomplete="off"
                    >
                </div>
                <div class="article-search__field article-search__field--date">
                    <label class="form-label article-search__label" for="article-search-from">من</label>
                    <input
                        id="article-search-from"
                        type="date"
                        name="updated_from"
                        class="input-control article-search__input article-search__input--date"
                        value="{{ request('updated_from') }}"
                        aria-label="آخر تحديث من"
                    >
                </div>
                <div class="article-search__field article-search__field--date">
                    <label class="form-label article-search__label" for="article-search-to">إلى</label>
                    <input
                        id="article-search-to"
                        type="date"
                        name="updated_to"
                        class="input-control article-search__input article-search__input--date"
                        value="{{ request('updated_to') }}"
                        aria-label="آخر تحديث إلى"
                    >
                </div>
                <div class="article-search__actions">
                    <button type="submit" class="btn btn--primary">🔍 بحث</button>
                    <a href="{{ route('admin.articles.index') }}" class="btn btn--secondary">مسح</a>
                </div>
            </div>
            <div class="article-search__row article-search__row--filters">
                <div class="article-search__field article-search__field--select">
                    <label class="form-label article-search__label" for="article-search-category">التصنيف</label>
                    <select id="article-search-category" name="category_id" class="input-control article-search__input article-search__select">
                        <option value="">كل التصنيفات</option>
                        @foreach ($filterCategories as $cat)
                            <option value="{{ $cat->id }}" @selected((string) request('category_id') === (string) $cat->id)>{{ $cat->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="article-search__field article-search__field--select">
                    <label class="form-label article-search__label" for="article-search-tag">الوسم</label>
                    <select id="article-search-tag" name="tag_id" class="input-control article-search__input article-search__select">
                        <option value="">كل الوسوم</option>
                        @foreach ($filterTags as $tag)
                            <option value="{{ $tag->id }}" @selected((string) request('tag_id') === (string) $tag->id)>{{ $tag->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </form>

        <div class="article-index-table mt-3">
            <div class="article-index-table__columns" aria-hidden="true">
                <span class="article-index-table__col-expand" aria-hidden="true"></span>
                <span>العنوان</span>
                <span>الحالة</span>
                <span class="article-index-table__col-actions">إجراءات</span>
            </div>

            @forelse ($articles as $article)
                @php
                    $catNames = $article->categories->pluck('name')->values()->all();
                    $tagNames = $article->tags->pluck('name')->values()->all();
                    $detailsId = 'article-row-details-'.$article->id;
                @endphp
                <div class="article-index-block">
                    <div class="article-index-row article-index-row--main">
                        <div class="article-index-row__expand-cell">
                            <button
                                type="button"
                                class="article-index-row__expand"
                                data-toggle-article-row
                                aria-expanded="false"
                                aria-controls="{{ $detailsId }}"
                                aria-label="إظهار التصنيفات والوسوم والكاتب وآخر تعديل"
                            >+</button>
                        </div>
                        <div class="article-index-row__title">
                            <span class="article-index-row__name">{{ $article->title }}</span>
                            <x-new-badge :show="$article->show_new_badge" class="new-badge--admin-row" />
                            <span class="article-index-row__sep" aria-hidden="true">·</span>
                            <span class="article-index-row__slug">/{{ $article->slug }}</span>
                        </div>
                        <div class="article-index-row__status">
                            <span class="badge badge--{{ $article->status === 'published' ? 'seafoam' : 'primary' }}">
                                {{ $article->status === 'published' ? 'منشور' : 'مسودة' }}
                            </span>
                        </div>
                        <div class="article-index-row__actions">
                            @include('admin.articles.partials.article-row-actions', ['article' => $article, 'variant' => 'listed'])
                        </div>
                    </div>
                    <div id="{{ $detailsId }}" class="article-index-row__details" hidden>
                        <div class="article-index-row__detail-group">
                            <span class="article-index-row__detail-label">التصنيفات</span>
                            <div class="article-index-row__chips">
                                @if ($article->categories->isNotEmpty())
                                    <div class="article-chips-line article-chips-line--wrap">
                                        @foreach ($catNames as $name)
                                            <span class="article-chip article-chip--category">{{ $name }}</span>
                                        @endforeach
                                    </div>
                                @else
                                    <span class="article-index-row__empty">—</span>
                                @endif
                            </div>
                        </div>
                        <div class="article-index-row__detail-group">
                            <span class="article-index-row__detail-label">الوسوم</span>
                            <div class="article-index-row__chips">
                                @if ($article->tags->isNotEmpty())
                                    <div class="article-chips-line article-chips-line--wrap">
                                        @foreach ($tagNames as $name)
                                            <span class="article-chip article-chip--tag">{{ $name }}</span>
                                        @endforeach
                                    </div>
                                @else
                                    <span class="article-index-row__empty">—</span>
                                @endif
                            </div>
                        </div>
                        <div class="article-index-row__detail-group">
                            <span class="article-index-row__detail-label">الكاتب</span>
                            <span class="body-s text-muted article-index-row__date-value">
                                {{ $article->authorDisplayNamePlain() }}@if ($article->authorIsInactive())<span class="article-index-row__author-inactive"> (مستخدم غير نشط)</span>@endif
                            </span>
                        </div>
                        <div class="article-index-row__detail-group article-index-row__detail-group--date">
                            <span class="article-index-row__detail-label">آخر تعديل</span>
                            <span class="body-s text-muted article-index-row__date-value">{{ $article->updated_at?->diffForHumans() }}</span>
                        </div>
                    </div>
                </div>
            @empty
                <div class="article-index-table__empty">
                    @if (request()->filled('search') || request()->filled('updated_from') || request()->filled('updated_to') || request()->filled('category_id') || request()->filled('tag_id'))
                        لا توجد نتائج مطابقة. جرّب تغيير كلمات البحث أو نطاق التاريخ أو التصفية.
                    @else
                        📭 لا توجد مقالات حتى الآن. ابدأ بإضافة أول مقالة.
                    @endif
                </div>
            @endforelse
        </div>

        <div class="mt-3">
            {{ $articles->links() }}
        </div>
    </div>
@endsection