@extends('frontend.theme1.index', ['title' => 'Media - Fitness Plus Indonesia', 'count' => $count ?? 0])
@section('css')
    
@endsection
@section('js')
    
@endsection
@section('content')
    @php
        $newsCollection = collect($news ?? [])->values();
        $activeCategory = strtolower(trim((string) ($selectedCategory ?? '')));

        $articleNews = $newsCollection
            ->filter(function ($item) {
                $categoryName = \Illuminate\Support\Str::lower((string) optional($item->newsCategory)->name_category);
                $categorySlug = \Illuminate\Support\Str::lower((string) optional($item->newsCategory)->slug);

                return $categoryName === 'artikel' || $categorySlug === 'artikel';
            })
            ->take(3)
            ->values();

        $companyNews = $newsCollection
            ->filter(function ($item) {
                $categoryName = \Illuminate\Support\Str::lower((string) optional($item->newsCategory)->name_category);
                $categorySlug = \Illuminate\Support\Str::lower((string) optional($item->newsCategory)->slug);

                return $categoryName === 'berita perusahaan' || $categorySlug === 'berita-perusahaan';
            })
            ->take(3)
            ->values();

        if ($activeCategory === '' && $articleNews->isEmpty()) {
            $articleNews = $newsCollection->take(3)->values();
        }

        if ($activeCategory === '' && $companyNews->isEmpty()) {
            $usedIds = $articleNews->pluck('id')->filter()->all();
            $companyNews = $newsCollection
                ->reject(fn ($item) => in_array($item->id, $usedIds, true))
                ->take(3)
                ->values();
        }

        $sections = [
            [
                'id' => 'artikel',
                'category_slug' => 'artikel',
                'title' => 'Artikel',
                'items' => $articleNews,
            ],
            [
                'id' => 'berita-perusahaan',
                'category_slug' => 'berita-perusahaan',
                'title' => 'Berita Perusahaan',
                'items' => $companyNews,
            ],
        ];

        if ($activeCategory !== '') {
            $sections = collect($sections)
                ->filter(fn ($section) => ($section['category_slug'] ?? '') === $activeCategory)
                ->values()
                ->all();
        }
    @endphp

    <div class="tentang-page-root media-page-root">
        <section class="tentang-location" style="background: linear-gradient(180deg, rgba(35, 30, 26, 0.14) 0%, rgba(0, 0, 0, 0.88) 180%),
    url('/themes1/images/hero/media.png') no-repeat center center/cover;">
            <div class="container tentang-location-inner">
                <h1 class="hero-title-profile" data-text="Media">Media</h1>
                <a class="tentang-scroll-indicator tentang-scroll-indicator--hint" href="#media" aria-label="Scroll for more">
                    <span class="tentang-scroll-indicator-badge" aria-hidden="true">&#8595;</span>
                    <span class="tentang-scroll-indicator-text">Scroll for more</span>
                </a>
            </div>
        </section>

        <section id="cta" class="cta">
            <div class="container" style="padding-top: 100px;">
                <h2 class="scroll-typo-line">Informasi Terkini Seputaran Kesehatan dan Informasi Resmi Perusahaan Khusus Untuk Anda.</h2>
                <h4 class="scroll-typo-line">Siap Memulai Perjalanan Fitness Anda ?</h4>
            </div>
        </section>

        <section id="media" class="media-news-sections" aria-label="Media Fitness Plus">
            <div class="container">
                @foreach ($sections as $section)
                    <section id="{{ $section['id'] }}" class="media-section" aria-label="{{ $section['title'] }}">
                        <div class="media-section-head">
                            <h2 class="media-section-title">{{ $section['title'] }}</h2>
                            <a class="media-section-action" href="{{ route('media.category', ['category' => $section['category_slug']]) }}" aria-label="Lihat kategori {{ $section['title'] }}">
                                <span>Selengkapnya</span>
                                <span aria-hidden="true">&#8594;</span>
                            </a>
                        </div>

                        <div id="{{ $section['id'] }}-grid" class="media-card-grid">
                            @forelse ($section['items'] 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">Konten belum tersedia</h3>
                                        <p class="media-card-summary">Data media untuk kategori ini belum tersedia.</p>
                                    </div>
                                </article>
                            @endforelse
                        </div>
                    </section>
                @endforeach
            </div>
        </section>
    </div>
@endsection