@extends('layouts.public')
@section('title', $article->meta_title ?: $article->title)
@section('meta_description', $article->meta_description ?: \Illuminate\Support\Str::limit(strip_tags($article->body), 155))
@section('og_type', 'article')
@if ($article->featured_image)
@section('og_image', Storage::url($article->featured_image))
@endif

@push('head')
<link rel="amphtml" href="{{ route('tenant.article.amp', $article->slug) }}">
<meta property="article:published_time" content="{{ $article->published_at?->toIso8601String() }}">
<meta property="article:modified_time" content="{{ $article->updated_at->toIso8601String() }}">
@if ($article->author)
<meta property="article:author" content="{{ $article->author->name }}">
@endif
@if ($article->category)
<meta property="article:section" content="{{ $article->category->name }}">
@endif

{{-- بيانات منظّمة NewsArticle — أهم عنصر لأهلية ظهور المقال بـ Google News --}}
<script type="application/ld+json">
{!! json_encode([
    '@context' => 'https://schema.org',
    '@type' => 'NewsArticle',
    'headline' => $article->title,
    'image' => $article->featured_image ? [Storage::url($article->featured_image)] : [],
    'datePublished' => $article->published_at?->toIso8601String(),
    'dateModified' => $article->updated_at->toIso8601String(),
    'author' => [
        '@type' => 'Person',
        'name' => $article->author->name ?? $tenant->name,
    ],
    'publisher' => [
        '@type' => 'Organization',
        'name' => $tenant->name,
        'logo' => [
            '@type' => 'ImageObject',
            'url' => !empty($tenant->themeSettings->customizations['logo_path'] ?? null)
                ? Storage::url($tenant->themeSettings->customizations['logo_path'])
                : url('/'),
        ],
    ],
    'mainEntityOfPage' => [
        '@type' => 'WebPage',
        '@id' => url()->current(),
    ],
    'description' => $article->meta_description ?: \Illuminate\Support\Str::limit(strip_tags($article->body), 155),
], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}
</script>

{{-- مسار التنقّل (Breadcrumb) — يساعد قوقل يعرض مسار الصفحة بنتائج البحث --}}
<script type="application/ld+json">
{!! json_encode([
    '@context' => 'https://schema.org',
    '@type' => 'BreadcrumbList',
    'itemListElement' => array_values(array_filter([
        ['@type' => 'ListItem', 'position' => 1, 'name' => $tenant->name, 'item' => url('/')],
        $article->category ? ['@type' => 'ListItem', 'position' => 2, 'name' => $article->category->name, 'item' => url('/category/'.$article->category->slug)] : null,
        ['@type' => 'ListItem', 'position' => $article->category ? 3 : 2, 'name' => $article->title, 'item' => url()->current()],
    ])),
], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}
</script>
@endpush

@section('content')

{{--
    تخطيط الصفحة يفصل بوضوح بين:
    - MC (Main Content): نص المقال نفسه — بالعمود الرئيسي
    - SC (Supplementary Content): مقالات ذات صلة + تصفح الأقسام — بالشريط الجانبي
    - Ads: إعلانات منفصلة تماماً عن المحتوى، معلَّمة بوضوح
    هذا الفصل يحسّن تجربة المستخدم ويطابق معايير جودة الصفحة (Main/Supplementary/Ads).
--}}
<div class="grid" style="grid-template-columns: 2fr 1fr; gap:32px;">

    {{-- ===== المحتوى الرئيسي (MC) ===== --}}
    <article>
        @include('public._breadcrumb', ['items' => array_values(array_filter([
            $article->category ? ['label' => $article->category->name, 'url' => '/category/'.$article->category->slug] : null,
            ['label' => $article->title],
        ]))])
        <h1 class="text-3xl font-bold mb-3">{{ $article->title }}</h1>
        <p class="text-gray-500 mb-2">{{ $article->published_at?->format('Y-m-d') }} — {{ $article->author->name ?? '' }}</p>

        @include('public._share-buttons', ['shareTitle' => $article->title])

        @if ($article->featured_image)
            <img src="{{ Storage::url($article->featured_image) }}" alt="{{ $article->title }}" class="w-full rounded-lg mb-6">
        @endif

        {{-- === إعلان (Ads) — منفصل بوضوح عن نص المقال === --}}
        @foreach (\App\Models\Ad::forSlot($tenant->id, 'inside_article') as $ad)
            <div class="my-6 text-center">
                <p class="text-xs text-gray-400 mb-1">إعلان</p>
                @if ($ad->type === 'adsense_code')
                    {!! $ad->adsense_code !!}
                @else
                    <a href="{{ $ad->banner_link }}" target="_blank"><img src="{{ Storage::url($ad->banner_image) }}" alt="إعلان" class="mx-auto max-h-40"></a>
                @endif
            </div>
        @endforeach

        <div class="prose max-w-none">
            {!! $article->body !!}
        </div>

        @include('public._share-buttons', ['shareTitle' => $article->title])

        {{-- === التعليقات === --}}
        <div class="mt-10 border-t pt-6">
            <h3 class="font-bold mb-4">التعليقات ({{ $article->comments()->where('status', 'approved')->whereNull('parent_id')->count() }})</h3>

            @if (session('status'))
                <div class="bg-green-100 text-green-700 text-sm px-3 py-2 rounded mb-4">{{ session('status') }}</div>
            @endif

            @foreach ($article->comments()->where('status', 'approved')->whereNull('parent_id')->with('replies')->latest()->get() as $comment)
            <div class="border-b pb-4 mb-4">
                <p class="font-bold text-sm">{{ $comment->name }}</p>
                <p class="text-xs text-gray-400 mb-1">{{ $comment->created_at->diffForHumans() }}</p>
                <p class="text-sm text-gray-700">{{ $comment->body }}</p>

                @foreach ($comment->replies as $reply)
                <div class="mr-8 mt-3 border-r-2 pr-3">
                    <p class="font-bold text-sm">{{ $reply->name }}</p>
                    <p class="text-xs text-gray-400 mb-1">{{ $reply->created_at->diffForHumans() }}</p>
                    <p class="text-sm text-gray-700">{{ $reply->body }}</p>
                </div>
                @endforeach
            </div>
            @endforeach

            <h4 class="font-bold text-sm mb-3 mt-6">أضف تعليقاً</h4>
            <form method="post" action="{{ route('tenant.comments.store', $article->slug) }}" class="space-y-3 max-w-lg">
                @csrf
                <input type="text" name="website" tabindex="-1" autocomplete="off" style="position:absolute; left:-9999px;" aria-hidden="true">
                <input type="hidden" name="form_loaded_at" value="{{ time() }}">
                <div class="grid grid-cols-2 gap-3">
                    <input type="text" name="name" placeholder="اسمك" required class="border rounded p-2 text-sm">
                    <input type="email" name="email" placeholder="بريدك الإلكتروني (لن يُنشر)" required class="border rounded p-2 text-sm">
                </div>
                <textarea name="body" rows="3" placeholder="تعليقك..." required class="w-full border rounded p-2 text-sm"></textarea>
                <button type="submit" class="bg-blue-600 text-white px-5 py-2 rounded text-sm">إرسال التعليق</button>
            </form>
        </div>
    </article>

    {{-- ===== المحتوى التكميلي (SC) + الإعلانات ===== --}}
    <aside>
        {{-- إعلان جانبي (Ads) --}}
        @foreach (\App\Models\Ad::forSlot($tenant->id, 'sidebar') as $ad)
        <div class="mb-6 text-center bg-gray-50 rounded-lg p-3">
            <p class="text-xs text-gray-400 mb-1">إعلان</p>
            @if ($ad->type === 'adsense_code')
                {!! $ad->adsense_code !!}
            @else
                <a href="{{ $ad->banner_link }}" target="_blank"><img src="{{ Storage::url($ad->banner_image) }}" alt="إعلان" class="mx-auto max-h-32"></a>
            @endif
        </div>
        @endforeach

        {{-- SC: مقالات ذات صلة --}}
        @if ($related->count())
        <div class="bg-gray-50 rounded-lg p-4 mb-6">
            <h3 class="font-bold mb-3 border-r-4 pr-3" style="border-color:var(--primary-color);">مقالات ذات صلة</h3>
            <ul class="space-y-3">
                @foreach ($related as $r)
                <li>
                    <a href="/article/{{ $r->slug }}" class="text-sm hover:text-blue-600 flex gap-2">
                        @if ($r->featured_image)
                            <img src="{{ $r->thumb_url }}" alt="{{ $r->title }}" class="w-14 h-14 object-cover rounded flex-shrink-0">
                        @endif
                        <span>{{ $r->title }}</span>
                    </a>
                </li>
                @endforeach
            </ul>
        </div>
        @endif

        {{-- SC: تصفح الأقسام --}}
        @if ($categories->count())
        <div class="bg-gray-50 rounded-lg p-4">
            <h3 class="font-bold mb-3 border-r-4 pr-3" style="border-color:var(--primary-color);">تصفح الأقسام</h3>
            <ul class="space-y-2">
                @foreach ($categories as $cat)
                <li><a href="/category/{{ $cat->slug }}" class="text-sm hover:text-blue-600">{{ $cat->name }}</a></li>
                @endforeach
            </ul>
        </div>
        @endif
    </aside>
</div>

<style>
@media (max-width: 768px) {
    div[style*="grid-template-columns: 2fr 1fr"] { grid-template-columns: 1fr !important; }
}
</style>
@endsection