@extends('theme-News::layouts.base')
@section('title', $post->title . ' — ' . AleshaSetting::get('site_name', ''))
@section('description', $post->excerpt ?? '')

@php
    $related = AleshaPost::ofType($post->content_type)->published()
        ->where('id', '!=', $post->id)
        ->when($post->taxonomies->isNotEmpty(), fn($q) =>
            $q->whereHas('taxonomies', fn($q2) =>
                $q2->whereIn('taxonomies.id', $post->taxonomies->pluck('id'))
            )
        )
        ->latest('published_at')->take(4)->get();

    $trending = AleshaPost::ofType('post')->published()->where('id','!=',$post->id)->latest('published_at')->take(6)->get();
    $categories = $post->taxonomies->where('type','category');
    $tags = $post->taxonomies->where('type','tag');
    $sidebarTopics = AleshaTaxonomy::where('type','category')
        ->withCount(['posts' => fn($q) => $q->ofType('post')->published()])
        ->having('posts_count','>',0)->orderBy('posts_count','desc')->get();
    $sidebarTags = AleshaTaxonomy::where('type','tag')
        ->withCount(['posts' => fn($q) => $q->ofType('post')->published()])
        ->having('posts_count','>',0)->orderBy('posts_count','desc')->take(20)->get();
@endphp

@section('content')

@if($builderFullpage ?? false)
{{-- Full Page Builder mode --}}
{!! $pageBuilderHtml !!}
@else

<div style="max-width:1280px; margin:0 auto; padding:40px 20px 48px; display:grid; grid-template-columns:1fr 320px; gap:32px;" class="single-grid">

    {{-- Article --}}
    <article>
        {{-- Breadcrumb --}}
        <nav class="news-breadcrumb" style="font-size:12px; color:#9ca3af; margin-bottom:16px; display:flex; align-items:center; gap:6px; overflow:hidden;">
            <a href="/" style="color:var(--news-red); text-decoration:none; white-space:nowrap;">Home</a>
            <span style="flex-shrink:0;">›</span>
            @foreach($categories as $cat)
            <a href="/category/{{ $cat->slug }}" style="color:var(--news-red); text-decoration:none; white-space:nowrap;">{{ $cat->name }}</a>
            <span style="flex-shrink:0;">›</span>
            @endforeach
            <span class="news-breadcrumb-title" style="color:#6b7280; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1;">{{ $post->title }}</span>
        </nav>

        {{-- Category badges --}}
        <div style="display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;">
            @foreach($categories as $cat)
            <a href="/category/{{ $cat->slug }}" class="category-badge" style="text-decoration:none;">{{ $cat->name }}</a>
            @endforeach
        </div>

        {{-- Headline --}}
        <h1 class="news-headline news-post-title" style="font-size:2.2rem; font-weight:900; color:#111; line-height:1.25; margin-bottom:20px;">
            {{ $post->title }}
        </h1>

        @if($post->excerpt)
        <p style="font-size:1.1rem; color:#374151; line-height:1.7; font-weight:500; border-left:4px solid var(--news-red); padding-left:16px; margin-bottom:20px;">
            {{ $post->excerpt }}
        </p>
        @endif

        {{-- Meta bar --}}
        <div style="display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid #f3f4f6; border-bottom:1px solid #f3f4f6; margin-bottom:24px;">
            <div style="display:flex; align-items:center; gap:10px;">
                <div style="width:36px; height:36px; border-radius:50%; background:var(--news-red-bg); display:flex; align-items:center; justify-content:center; color:var(--news-red); font-weight:800; font-size:14px;">
                    {{ substr($post->author->name ?? 'E', 0, 1) }}
                </div>
                <div>
                    <p style="font-size:13px; font-weight:700; color:#111; margin:0;">{{ $post->author->name ?? 'Editorial Team' }}</p>
                    <p style="font-size:12px; color:#9ca3af; margin:0;">{{ $post->published_at?->format('d F Y, H:i') }} WIB</p>
                </div>
            </div>
            @if(!empty($disqusShortname) && app()->environment('production'))
            <a href="#disqus_thread" data-disqus-identifier="post-{{ $post->id }}"
               style="display:flex; align-items:center; gap:6px; font-size:13px; color:#6b7280; text-decoration:none;"
               onmouseover="this.style.color='var(--news-red)'" onmouseout="this.style.color='#6b7280'">
                <svg style="width:16px; height:16px; flex-shrink:0;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                </svg>
                <span>Comments</span>
            </a>
            @endif
        </div>

        {{-- Featured image --}}
        @php $featuredMedia = $post->getFirstMedia('featured'); @endphp
        @if($featuredMedia)
        <figure style="margin:0 0 28px;">
            <img src="{{ $post->getFirstMediaUrl('featured') }}" alt="{{ $featuredMedia->getCustomProperty('caption') ?: $post->title }}"
                 style="width:100%; border-radius:10px; display:block; max-height:480px; object-fit:cover;">
            @if($featuredMedia->getCustomProperty('caption'))
            <figcaption style="margin-top:8px; font-size:12px; color:#9ca3af; text-align:center; font-style:italic; line-height:1.5;">
                {{ $featuredMedia->getCustomProperty('caption') }}
            </figcaption>
            @endif
        </figure>
        @endif

        {{-- Content --}}
        <div class="prose" style="font-size:16px; line-height:1.85; color:#1f2937; max-width:none; text-align:justify;">
            @if(!empty($pageBuilderHtml))
                {!! $pageBuilderHtml !!}
            @else
                {!! $post->content !!}
            @endif
        </div>

        {{-- Tags --}}
        @if($tags->count())
        <div style="margin-top:32px; padding-top:20px; border-top:1px solid #e5e7eb;">
            <span style="font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:#6b7280; margin-right:8px;">Tags:</span>
            @foreach($tags as $tag)
            <a href="/tag/{{ $tag->slug }}"
               style="display:inline-flex; margin:3px; padding:4px 12px; background:#f3f4f6; color:#374151; font-size:12px; font-weight:600; border-radius:20px; text-decoration:none; transition:all 0.15s;"
               onmouseover="this.style.background='var(--news-red)'; this.style.color='#fff'" onmouseout="this.style.background='#f3f4f6'; this.style.color='#374151'">
                #{{ $tag->name }}
            </a>
            @endforeach
        </div>
        @endif

        {{-- Disqus Comments --}}
        @if(!empty($disqusShortname))
        <div style="margin-top:40px; padding-top:32px; border-top:1px solid #e5e7eb;">
            <div class="section-title">Comments</div>
            <div id="disqus_thread"></div>
            <script>
                var disqus_config = function () {
                    this.page.url = '{{ url()->current() }}';
                    this.page.identifier = 'post-{{ $post->id }}';
                };
                (function() {
                    var d = document, s = d.createElement('script');
                    s.src = 'https://{{ $disqusShortname }}.disqus.com/embed.js';
                    s.setAttribute('data-timestamp', +new Date());
                    (d.head || d.body).appendChild(s);
                })();
            </script>
            <script id="dsq-count-scr" src="//{{ $disqusShortname }}.disqus.com/count.js" async></script>
        </div>
        @endif

        {{-- Related articles --}}
        @if($related->count())
        <div style="margin-top:40px;">
            <div class="section-title">Related News</div>
            <div style="display:grid; grid-template-columns:repeat(2,1fr); gap:16px;" class="news-related-grid">
                @foreach($related as $rel)
                <article style="background:#fff; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden; display:flex; gap:12px; padding:12px;">
                    @if($rel->getFirstMedia('featured'))
                    <div style="width:80px; height:60px; flex-shrink:0; overflow:hidden; border-radius:6px;">
                        <img src="{{ $rel->getFirstMediaUrl('featured') }}" alt="{{ $rel->title }}" style="width:100%; height:100%; object-fit:cover;">
                    </div>
                    @endif
                    <div>
                        <a href="/{{ $rel->content_type }}/{{ $rel->slug }}" style="text-decoration:none;">
                            <p style="font-size:13px; font-weight:700; color:#111; margin:0 0 4px; line-height:1.4;"
                               onmouseover="this.style.color='var(--news-red)'" onmouseout="this.style.color='#111'">{{ $rel->title }}</p>
                        </a>
                        <p class="article-meta">{{ $rel->published_at?->diffForHumans() }}</p>
                    </div>
                </article>
                @endforeach
            </div>
        </div>
        @endif
    </article>

    {{-- Sidebar --}}
    <aside>
        {{-- Trending --}}
        @if($trending->count())
        <div style="background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:16px; margin-bottom:20px;">
            <div class="section-title">Trending Now</div>
            @foreach($trending as $t)
            <div style="display:flex; gap:10px; padding:10px 0; {{ !$loop->last ? 'border-bottom:1px solid #f9fafb;' : '' }} align-items:flex-start;">
                <span style="font-size:18px; font-weight:900; color:var(--news-red-light); font-family:'Playfair Display',serif; line-height:1; flex-shrink:0; width:20px;">{{ $loop->iteration }}</span>
                <div>
                    <a href="/{{ $t->content_type }}/{{ $t->slug }}" style="text-decoration:none;">
                        <p style="font-size:12px; font-weight:700; color:#111; margin:0 0 3px; line-height:1.4;"
                           onmouseover="this.style.color='var(--news-red)'" onmouseout="this.style.color='#111'">{{ $t->title }}</p>
                    </a>
                    <p class="article-meta">{{ $t->published_at?->diffForHumans() }}</p>
                </div>
            </div>
            @endforeach
        </div>
        @endif

        {{-- Topics --}}
        @if($sidebarTopics->count())
        <div style="background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:16px; margin-bottom:20px;">
            <div class="section-title">Topics</div>
            <div style="display:flex; flex-direction:column; gap:2px;">
                @foreach($sidebarTopics as $cat)
                <a href="/category/{{ $cat->slug }}"
                   style="display:flex; align-items:center; justify-content:space-between; padding:9px 12px; border-radius:6px; text-decoration:none; color:#374151; font-size:13px; font-weight:600; transition:all 0.15s;"
                   onmouseover="this.style.background='var(--news-red-bg)'; this.style.color='var(--news-red)'" onmouseout="this.style.background='transparent'; this.style.color='#374151'">
                    <span>{{ $cat->name }}</span>
                    <span style="background:#f3f4f6; color:#6b7280; font-size:11px; font-weight:700; padding:2px 7px; border-radius:10px;">{{ $cat->posts_count }}</span>
                </a>
                @endforeach
            </div>
        </div>
        @endif

        {{-- Tags --}}
        @if($sidebarTags->count())
        <div style="background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:16px; margin-bottom:20px;">
            <div class="section-title">Tags</div>
            <div style="display:flex; flex-wrap:wrap; gap:6px;">
                @foreach($sidebarTags as $tag)
                <a href="/tag/{{ $tag->slug }}"
                   style="display:inline-flex; align-items:center; gap:4px; padding:4px 10px; background:#f3f4f6; color:#374151; font-size:12px; font-weight:600; border-radius:20px; text-decoration:none; transition:all 0.15s;"
                   onmouseover="this.style.background='var(--news-red)'; this.style.color='#fff'" onmouseout="this.style.background='#f3f4f6'; this.style.color='#374151'">
                    #{{ $tag->name }}
                    <span style="font-size:10px; color:#9ca3af; font-weight:400;">{{ $tag->posts_count }}</span>
                </a>
                @endforeach
            </div>
        </div>
        @endif

    </aside>
</div>

<style>
@media (max-width: 768px) {
    .single-grid { grid-template-columns: 1fr !important; }
    .news-related-grid { grid-template-columns: 1fr !important; }
    .news-breadcrumb-title { display: none; }
    .news-post-title { font-size: 1.4rem !important; }
}
</style>

@endif {{-- end fullpage check --}}

@endsection
