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

@section('content')
    @php
        $detailPublishedAt = $newsItem->published_at ?? $newsItem->created_at;
        $detailImagePath = trim((string) ($newsItem->image ?? ''));
        $detailImageUrl = $detailImagePath !== ''
            ? (\Illuminate\Support\Str::startsWith($detailImagePath, ['http://', 'https://', '//'])
                ? $detailImagePath
                : asset(ltrim($detailImagePath, '/')))
            : '';
        $creatorName = trim((string) ($newsItem->author ?? ''));
        $creatorName = $creatorName !== '' ? $creatorName : 'Fitness Plus Indonesia';
        $creatorImagePath = trim((string) (data_get($newsItem, 'author_image') ?: data_get($newsItem, 'creator_image') ?: ''));
        $creatorImageUrl = $creatorImagePath !== ''
            ? (\Illuminate\Support\Str::startsWith($creatorImagePath, ['http://', 'https://', '//'])
                ? $creatorImagePath
                : asset(ltrim($creatorImagePath, '/')))
            : '';
        $creatorInitials = collect(array_filter(preg_split('/\s+/', $creatorName)))
            ->take(2)
            ->map(fn ($segment) => \Illuminate\Support\Str::upper(\Illuminate\Support\Str::substr($segment, 0, 1)))
            ->implode('');
        $creatorInitials = $creatorInitials !== '' ? $creatorInitials : 'FP';
        $shareUrl = url()->current();
        $shareTitle = trim((string) ($newsItem->title ?? 'Media Fitness Plus Indonesia'));
        $shareSummary = trim((string) preg_replace('/\s+/', ' ', strip_tags((string) ($newsItem->content ?? ''))));
        $shareText = trim($shareTitle . ($shareSummary !== '' ? ' - ' . \Illuminate\Support\Str::limit($shareSummary, 120, '...') : ''));
        $whatsAppShareUrl = 'https://wa.me/?text=' . rawurlencode($shareText . ' ' . $shareUrl);
        $tiktokShareUrl = 'https://www.tiktok.com/share?url=' . rawurlencode($shareUrl) . '&text=' . rawurlencode($shareTitle);
        $emailShareUrl = 'mailto:?subject=' . rawurlencode($shareTitle) . '&body=' . rawurlencode($shareText . "\n\n" . $shareUrl);
        $facebookShareUrl = 'https://www.facebook.com/sharer/sharer.php?u=' . rawurlencode($shareUrl);
    @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('{{ $detailImageUrl }}') 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="#article-content" 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="article-content" class="media-news-sections media-detail-section" aria-label="Detail artikel media">
            <div class="container media-detail-container">
                <div class="media-detail-layout">

                    {{-- Main article content (left) --}}
                    <article class="media-detail-card">
                        @if ($detailPublishedAt)
                            <p class="media-card-meta">{{ $detailPublishedAt->format('l, j M Y') }}</p>
                        @endif

                        <h1 class="media-detail-title">{{ $newsItem->title }}</h1>

                        <div class="media-detail-badges">
                            <span class="media-card-badge">{{ optional($newsItem->newsCategory)->name_category ?: 'Media' }}</span>
                        </div>

                        @if ($detailImageUrl !== '')
                            <figure class="media-detail-media">
                                <img src="{{ $detailImageUrl }}" alt="{{ $newsItem->title }}" loading="eager" decoding="async">
                            </figure>
                        @endif

                        <div class="media-detail-meta-bar">
                            <div class="media-detail-creator" aria-label="Creator artikel">
                                <div class="media-detail-creator-avatar" aria-hidden="true">
                                    @if ($creatorImageUrl !== '')
                                        <img src="{{ $creatorImageUrl }}" alt="{{ $creatorName }}" loading="lazy" decoding="async">
                                    @else
                                        <span>{{ $creatorInitials }}</span>
                                    @endif
                                </div>
                                <div class="media-detail-creator-copy">
                                    <p class="media-detail-creator-label">Creator</p>
                                    <p class="media-detail-creator-name">{{ $creatorName }}</p>
                                </div>
                            </div>

                            <div class="media-detail-share" aria-label="Bagikan artikel">
                                <p class="media-detail-share-label">Bagikan</p>
                                <div class="media-detail-share-links">
                                    <a class="media-detail-share-link media-detail-share-link--wa" href="{{ $whatsAppShareUrl }}" target="_blank" rel="noopener noreferrer" aria-label="Bagikan ke WhatsApp">WA</a>
                                    <a class="media-detail-share-link media-detail-share-link--tiktok" href="{{ $tiktokShareUrl }}" target="_blank" rel="noopener noreferrer" aria-label="Bagikan ke TikTok">TikTok</a>
                                    <a class="media-detail-share-link media-detail-share-link--facebook" href="{{ $facebookShareUrl }}" target="_blank" rel="noopener noreferrer" aria-label="Bagikan ke Facebook">FB</a>
                                    <a class="media-detail-share-link media-detail-share-link--email" href="{{ $emailShareUrl }}" aria-label="Bagikan lewat email">Email</a>
                                </div>
                            </div>
                        </div>

                        <div class="media-detail-content">{!! nl2br(e((string) ($newsItem->content ?? ''))) !!}</div>
                        
                        
                        
                        <div class="media-detail-actions">
                            <a class="media-section-action" href="{{ route('media') }}" aria-label="Kembali ke halaman media">
                                <span aria-hidden="true">&#8592;</span>
                                <span>Kembali ke Media</span>
                            </a>
                        </div>
                    </article>

                    {{-- Right column: related articles + ads --}}
                    <div class="media-detail-right">

                        <div class="media-sidebar-ads" aria-label="Advertisement">
                            {{-- Ads slot --}} ADS GO HERE 300 x 250 
                        </div>

                        @if ($relatedNews->isNotEmpty())
                            <aside class="media-detail-sidebar" aria-label="Artikel terkait">
                                <h2 class="media-detail-sidebar-title">Artikel Terkait</h2>
                                <ul class="media-sidebar-list">
                                    @foreach ($relatedNews as $item)
                                        @php
                                            $itemUrl = !empty($item->slug) ? route('media.detail', ['slug' => $item->slug]) : '#';
                                            $imagePath = trim((string) ($item->image ?? ''));
                                            $imageUrl = $imagePath !== ''
                                                ? (\Illuminate\Support\Str::startsWith($imagePath, ['http://', 'https://', '//'])
                                                    ? $imagePath
                                                    : asset(ltrim($imagePath, '/')))
                                                : asset('themes1/images/class/frame1.png');
                                            $relPublishedAt = $item->published_at ?? $item->created_at;
                                        @endphp
                                        <li class="media-sidebar-item">
                                            <a class="media-sidebar-link" href="{{ $itemUrl }}">
                                                <img class="media-sidebar-thumb" src="{{ $imageUrl }}" alt="{{ $item->title }}" loading="lazy" decoding="async">
                                                <div class="media-sidebar-copy">
                                                    @if ($relPublishedAt)
                                                        <p class="media-sidebar-date">{{ $relPublishedAt->format('j M Y') }}</p>
                                                    @endif
                                                    <p class="media-sidebar-name">{{ $item->title }}</p>
                                                </div>
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>
                            </aside>
                        @endif

                    </div>

                </div>
            </div>
        </section>
    </div>
@endsection