@extends('frontend.theme1.index', ['title' => ($categoryTitle ?? 'Media Category') . ' - Fitness Plus Indonesia', 'count' => $count ?? 0])

@section('content')
    @php
        $newsCollection = $news ?? collect();
    @endphp

    <div class="tentang-page-root media-page-root">

        <section id="media" class="media-news-sections-category" aria-label="Media Kategori {{ $categoryTitle }}">
            <div class="container">
                <section id="{{ $categorySlug }}" style="margin-top: 100px; margin-bottom: 100px;" class="media-section" aria-label="{{ $categoryTitle }}">
                    <div class="media-category-head">
                        <h2 class="media-category-title">{{ $categoryTitle }}</h2>
                        <a href="{{ route('media') }}" class="media-category-back" aria-label="Kembali ke halaman Media">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5"/><path d="M12 5l-7 7 7 7"/></svg>
                            Media
                        </a>
                    </div>

                    <form class="media-category-search" method="get" action="{{ route('media.category', ['category' => $categorySlug]) }}">
                        <div class="media-category-search-row">
                            <input type="search" name="search" value="{{ $search ?? '' }}" placeholder="Cari {{ strtolower($categoryTitle) }}..." aria-label="Cari {{ strtolower($categoryTitle) }}" autocomplete="off">
                            <button type="submit">Cari</button>
                            @if (!empty($search))
                                <a class="media-category-search-reset" href="{{ route('media.category', ['category' => $categorySlug]) }}">Reset</a>
                            @endif
                        </div>
                    </form>

                    @if (!empty($search))
                        <p class="media-category-search-meta">Hasil pencarian untuk: <strong>{{ $search }}</strong></p>
                    @endif

                    <div id="{{ $categorySlug }}-grid" class="media-card-grid">
                        @forelse ($newsCollection as $item)
                            @php
                                $publishedAt = $item->published_at ?? $item->created_at;
                                $imagePath = trim((string) ($item->image ?? ''));
                                $itemUrl = !empty($item->slug) ? route('media.detail', ['slug' => $item->slug]) : '#';
                                $imageUrl = $imagePath !== ''
                                    ? (\Illuminate\Support\Str::startsWith($imagePath, ['http://', 'https://', '//'])
                                        ? $imagePath
                                        : asset(ltrim($imagePath, '/')))
                                    : asset('themes1/images/class/frame1.png');
                                $summary = \Illuminate\Support\Str::limit(
                                    trim((string) preg_replace('/\s+/', ' ', strip_tags((string) ($item->content ?? '')))),
                                    118
                                );
                                $label = $item->tag ?: (optional($item->newsCategory)->name_category ?: 'Media');
                            @endphp

                            <article class="media-card">
                                <figure class="media-card-media">
                                    <a class="media-card-media-link" href="{{ $itemUrl }}" aria-label="Buka artikel {{ $item->title }}">
                                        <img src="{{ $imageUrl }}" alt="{{ $item->title }}" loading="lazy" decoding="async">
                                    </a>
                                </figure>

                                <div class="media-card-copy">
                                    @if ($publishedAt)
                                        <p class="media-card-meta">{{ $publishedAt->format('l, j M Y') }}</p>
                                    @endif

                                    <h3 class="media-card-title">
                                        <a class="media-card-title-link" href="{{ $itemUrl }}">{{ $item->title }}</a>
                                    </h3>
                                    <p class="media-card-summary">{{ $summary }}</p>
                                    <span class="media-card-badge">{{ $label }}</span>
                                </div>
                            </article>
                        @empty
                            <article class="media-card media-card-empty">
                                <div class="media-card-copy">
                                    <h3 class="media-card-title">{{ !empty($search) ? 'Hasil tidak ditemukan' : 'Konten belum tersedia' }}</h3>
                                    <p class="media-card-summary">{{ !empty($search) ? 'Coba kata kunci lain untuk mencari artikel.' : 'Data media untuk kategori ini belum tersedia.' }}</p>
                                </div>
                            </article>
                        @endforelse
                    </div>

                    @if ($newsCollection->lastPage() > 1)
                        @php
                            $currentPage = $newsCollection->currentPage();
                            $lastPage = $newsCollection->lastPage();
                            $pageLinks = [];

                            if ($lastPage <= 7) {
                                $pageLinks = range(1, $lastPage);
                            } else {
                                $pageLinks[] = 1;

                                if ($currentPage > 4) {
                                    $pageLinks[] = 'ellipsis-left';
                                }

                                $start = max(2, $currentPage - 1);
                                $end = min($lastPage - 1, $currentPage + 1);

                                if ($currentPage <= 4) {
                                    $start = 2;
                                    $end = 4;
                                } elseif ($currentPage >= $lastPage - 3) {
                                    $start = $lastPage - 3;
                                    $end = $lastPage - 1;
                                }

                                for ($i = $start; $i <= $end; $i++) {
                                    if ($i > 1 && $i < $lastPage) {
                                        $pageLinks[] = $i;
                                    }
                                }

                                if ($currentPage < $lastPage - 3) {
                                    $pageLinks[] = 'ellipsis-right';
                                }

                                $pageLinks[] = $lastPage;
                            }
                        @endphp

                        <nav class="media-pagination" aria-label="Navigasi halaman">
                            <p class="media-pagination-info">
                                Showing {{ $newsCollection->firstItem() }} to {{ $newsCollection->lastItem() }} of {{ $newsCollection->total() }} entries
                            </p>

                            <div class="media-pagination-controls">
                            @if ($newsCollection->onFirstPage())
                                <span class="media-page-action is-disabled" aria-disabled="true">Sebelumnya</span>
                            @else
                                <a class="media-page-action" href="{{ $newsCollection->previousPageUrl() }}">Sebelumnya</a>
                            @endif

                            @foreach ($pageLinks as $pageLink)
                                @if (is_string($pageLink))
                                    <span class="media-page-ellipsis" aria-hidden="true">...</span>
                                @elseif ($pageLink === $currentPage)
                                    <span class="media-page-number is-active" aria-current="page">{{ $pageLink }}</span>
                                @else
                                    <a class="media-page-number" href="{{ $newsCollection->url($pageLink) }}">{{ $pageLink }}</a>
                                @endif
                            @endforeach

                            @if ($newsCollection->hasMorePages())
                                <a class="media-page-action" href="{{ $newsCollection->nextPageUrl() }}">Selanjutnya</a>
                            @else
                                <span class="media-page-action is-disabled" aria-disabled="true">Selanjutnya</span>
                            @endif
                            </div>
                        </nav>
                    @endif
                </section>
            </div>
        </section>
    </div>
@endsection