@extends('layouts.app')

@section('title', $metaTitle)

@section('body-class', 'lib-hub-page')

@section('content')
    <div class="lib-hub">
        @include('library.partials.topbar')

        <section class="lib-hub__hero" aria-labelledby="lib-hub-heading">
            <div class="lib-hub__hero-inner">
                <p class="lib-hub__eyebrow">مركز المساعدة · شبكة نمو</p>
                <h1 id="lib-hub-heading" class="lib-hub__title">كيف نقدر نساعدك اليوم؟</h1>
                <p class="lib-hub__subtitle">مكتبة شروحات منصة نمو</p>
                <p class="lib-hub__lead">
                    ابحث عن أي موضوع يهمك للوصول لشرح واضح خطوة بخطوة.
                </p>

                <div class="lib-hub__search-card">
                    <form class="lib-hub__search" method="get" action="{{ route('library.home') }}" role="search">
                        <label class="visually-hidden" for="lib-hub-q">بحث في المقالات</label>
                        <div class="lib-hub__search-row">
                            <input
                                id="lib-hub-q"
                                type="search"
                                name="q"
                                class="lib-hub__search-input input-control"
                                value="{{ $q }}"
                                placeholder="مثال: ربط واتساب، المتجر، الدفع…"
                                autocomplete="off"
                                enterkeyhint="search"
                            >
                            <button type="submit" class="btn btn--primary lib-hub__search-btn">بحث</button>
                        </div>
                        @if ($q !== '')
                            <div class="lib-hub__search-meta">
                                <a href="{{ route('library.home') }}" class="lib-hub__clear-filters">مسح البحث</a>
                            </div>
                        @endif
                    </form>
                </div>

                @if ($tags->isNotEmpty())
                    <div class="lib-hub__hero-tags" aria-labelledby="lib-hero-tags-heading">
                        <div class="lib-hub__hero-tags-head">
                            <p class="lib-hub__hero-tags-kicker">الوسوم</p>
                            <h2 id="lib-hero-tags-heading" class="lib-hub__hero-tags-title">تصفّح المقالات حسب الموضوع</h2>
                            <p class="lib-hub__hero-tags-desc">
                                تصفّح المقالات حسب الوسوم ، وتعرف على جميع المميزات المرتبطة بسؤالك .
                            </p>
                        </div>
                        <nav class="lib-hub__hero-tags-list" aria-label="وسوم المقالات">
                            @foreach ($tags as $tag)
                                <a href="{{ route('library.tag', $tag) }}" class="lib-hub__hero-tag-pill">
                                    <span class="lib-hub__hero-tag-pill-text">{{ $tag->name }}</span>
                                    <x-new-badge :show="$tag->show_new_badge" class="new-badge--on-pill" />
                                </a>
                            @endforeach
                        </nav>
                    </div>
                @endif
            </div>
        </section>

        <div class="lib-hub__shell lib-hub__shell--full">
            <div class="lib-hub__main">
                @if ($parentCategories->isNotEmpty())
                    <section class="lib-hub__section lib-hub__section--categories" aria-labelledby="lib-categories-heading">
                        <p class="lib-hub__section-kicker">دليل المنصة</p>
                        <h2 id="lib-categories-heading" class="lib-hub__section-title lib-hub__section-title--center">دليل استخدام منصة نمو</h2>
                        <p class="lib-hub__section-desc lib-hub__section-desc--center">
                            تعرّف على الميزات والإعدادات من خلال التصنيفات أدناه — كل تصنيف يجمع المقالات ذات الصلة.
                        </p>
                        <div class="lib-hub__category-grid">
                            @foreach ($parentCategories as $cat)
                                <article class="lib-hub__category-card">
                                    <a href="{{ route('library.category', $cat) }}" class="lib-hub__category-link">
                                        <div class="lib-hub__category-icon-wrap" aria-hidden="true">
                                            @if ($cat->iconUrl())
                                                <img
                                                    src="{{ $cat->iconUrl() }}"
                                                    alt=""
                                                    class="lib-hub__category-icon-img"
                                                    width="56"
                                                    height="56"
                                                    loading="lazy"
                                                    decoding="async"
                                                >
                                            @else
                                                <span class="lib-hub__category-icon-fallback">📁</span>
                                            @endif
                                        </div>
                                        <div class="lib-hub__category-body">
                                            <h3 class="lib-hub__category-title">
                                                <span class="lib-hub__category-title-text">{{ $cat->name }}</span>
                                                <x-new-badge :show="$cat->show_new_badge" />
                                            </h3>
                                            @if ($cat->description)
                                                <p class="lib-hub__category-desc">{{ $cat->description }}</p>
                                            @endif
                                        </div>
                                        <span class="lib-hub__category-all">
                                            جميع المقالات ({{ $cat->published_articles_count }})
                                            <span class="lib-hub__category-all-arrow" aria-hidden="true">←</span>
                                        </span>
                                    </a>
                                </article>
                            @endforeach
                        </div>
                    </section>
                @endif

                <section class="lib-hub__section lib-hub__section--articles" aria-labelledby="lib-articles-heading">
                    <div class="lib-hub__section-head lib-hub__section-head--row lib-hub__section-head--articles">
                        <div>
                            <p class="lib-hub__section-kicker lib-hub__section-kicker--inline">المحتوى</p>
                            <h2 id="lib-articles-heading" class="lib-hub__section-title">
                                @if ($q !== '')
                                    نتائج البحث
                                @else
                                    أحدث المقالات
                                @endif
                            </h2>
                            <p class="lib-hub__section-desc">
                            أطلع على أحدث الخصائص والتحديثات لمنصة نمو !
                            </p>
                        </div>
                        @if ($articles->isNotEmpty())
                            <div class="lib-hub__article-toolbar">

                                <div class="lib-hub__view-toggle" role="group" aria-labelledby="lib-hub-view-label">
                                    <button
                                        type="button"
                                        class="lib-hub__view-btn is-active"
                                        data-lib-hub-view-btn
                                        data-view="grid"
                                        aria-pressed="true"
                                        title="عرض شبكي"
                                    >
                                        <span class="lib-hub__view-icon" aria-hidden="true">▦</span>
                                        شبكة
                                    </button>
                                    <button
                                        type="button"
                                        class="lib-hub__view-btn"
                                        data-lib-hub-view-btn
                                        data-view="list"
                                        aria-pressed="false"
                                        title="عرض قائمة"
                                    >
                                        <span class="lib-hub__view-icon" aria-hidden="true">☰</span>
                                        قائمة
                                    </button>
                                </div>
                            </div>
                        @endif
                    </div>

                    @if ($articles->isEmpty())
                        <div class="lib-hub__empty">
                            <p class="lib-hub__empty-title">لا توجد مقالات مطابقة</p>
                            <p class="lib-hub__empty-text">جرّب كلمات أخرى، أو تصفّح التصنيفات، أو تواصل معنا عبر واتساب.</p>
                        </div>
                    @else
                        <div id="lib-hub-articles" class="lib-hub__article-grid lib-hub__article-grid--grid">
                            @foreach ($articles as $article)
                                <article class="lib-hub__article-card">
                                    @php
                                        $lastTouch = $article->updated_at ?? $article->published_at;
                                    @endphp
                                    <a href="{{ route('library.article.show', $article->slug) }}" class="lib-hub__article-link">
                                        <div class="lib-hub__article-text">
                                            <h3 class="lib-hub__article-title">
                                                <span class="lib-hub__article-title-text">{{ $article->title }}</span>
                                                <x-new-badge :show="$article->show_new_badge" />
                                            </h3>
                                            @if ($lastTouch)
                                                <p class="lib-hub__article-updated">
                                                    آخر تحديث
                                                    <time datetime="{{ $lastTouch->toIso8601String() }}">{{ $lastTouch->locale('ar')->translatedFormat('j F Y') }}</time>
                                                </p>
                                            @endif
                                        </div>
                                        <span class="lib-hub__article-read">
                                            قراءة المقال
                                            <span class="lib-hub__article-read-arrow" aria-hidden="true">←</span>
                                        </span>
                                    </a>
                                </article>
                            @endforeach
                        </div>

                        <div class="lib-hub__pagination">
                            {{ $articles->links() }}
                        </div>
                    @endif
                </section>

                <section class="lib-hub__wa" aria-label="تواصل عبر واتساب">
                    <div class="lib-hub__wa-inner">
                        <div class="lib-hub__wa-text">
                            <h2 class="lib-hub__wa-title">لم تجد ما تبحث عنه؟</h2>
                            <p class="lib-hub__wa-desc">فريق الدعم جاهز لمساعدتك مباشرة عبر واتساب.</p>
                        </div>
                        <a
                            href="https://wa.me/966920032582"
                            class="lib-hub__wa-btn"
                            target="_blank"
                            rel="noopener noreferrer"
                        >
                            <span class="lib-hub__wa-icon" aria-hidden="true">💬</span>
                            تواصل معنا عبر واتساب
                        </a>
                    </div>
                </section>

                @include('library.partials.site-footer')
            </div>
        </div>
    </div>
@endsection