@extends('layouts.app')

@section('title', ($article->meta_title ?: $article->news_title) . ' | ' . config('app.name'))
@section('meta_description', $article->meta_description ?: Str::limit(strip_tags($article->news_content_short), 155))
@section('meta_keywords', $article->meta_keyword ?? '')
@section('canonical', $article->canonical_url)
@section('og_type', 'article')
@section('og_image', $article->photo_url)
@section('article_author', $article->author->name ?? 'The Hindu Bureau')
@section('article_published', $article->published_at?->toIso8601String())
@section('article_section', $article->category->category_name ?? '')

@section('schema_json')
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "NewsArticle",
  "headline": "{{ addslashes($article->news_title) }}",
  "description": "{{ addslashes(Str::limit(strip_tags($article->news_content_short), 155)) }}",
  "image": ["{{ $article->photo_url }}"],
  "datePublished": "{{ $article->published_at?->toIso8601String() }}",
  "dateModified": "{{ $article->published_at?->toIso8601String() }}",
  "author": {
    "@type": "Person",
    "name": "{{ $article->author->name ?? 'The Hindu Bureau' }}"
  },
  "publisher": {
    "@type": "Organization",
    "name": "{{ config('app.name', 'The Hindu') }}",
    "logo": {
      "@type": "ImageObject",
      "url": "{{ asset('img/thehindu-logo.svg') }}"
    }
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "{{ $article->canonical_url }}"
  },
  "articleSection": "{{ $article->category->category_name ?? '' }}"
}
</script>
@endsection

@section('content')

{{-- ── Ad banner (matches detail.html: img.adv) ── --}}
{{-- ══════════════════════════════════════════════════════════════
     AD BANNER
══════════════════════════════════════════════════════════════ --}}
<div class="adver" aria-label="Advertisement">
  <img src="{{ asset('img/add3.jpg') }}" alt="Advertisement" loading="lazy" width="auto" height="auto">
</div>

<div class="detail-container">

  {{-- ══════════════════════════════════════════════════════════
       LEFT CONTENT — matches .detail-left in detail.html
  ══════════════════════════════════════════════════════════ --}}
  <div class="detail-left">

    {{-- Breadcrumb --}}
    <div class="detail-breadcrumb">
      <a href="{{ route('index') }}">HOME</a>
      @if($category)
      / <a href="{{ route('category.show', $category->slug) }}">{{ strtoupper($category->category_name) }}</a>
      @endif
      / <span>{{ strtoupper(Str::limit($article->news_title, 50)) }}</span>
    </div>

    {{-- Headline --}}
    <h1 class="detail-title" itemprop="headline">
      {{ $article->news_title }}
    </h1>

    {{-- Summary / subtitle --}}
    <p class="detail-subtitle">
      {{ strip_tags($article->news_content_short) }}
    </p>

    {{-- Meta: date + author --}}
    <div class="detail-meta">
      <span class="published">
        {{ $article->published_at ? 'Published - ' . $article->published_at->format('F d, Y') : '' }}
      </span>
      @if($article->author)
      <span class="author">{{ strtoupper($article->author->name) }}</span>
      @endif
    </div>

    {{-- Read later button --}}
    <div class="detail-actions">
      <button>🔖 Read Later</button>
    </div>

    {{-- Hero image --}}
    <div class="detail-image">
      <img src="{{ $article->photo_url }}"
           alt="{{ $article->img_alt ?: $article->news_title }}"
           itemprop="image"
           loading="eager">
    </div>

    {{-- Article body --}}
    <div class="detail-content" itemprop="articleBody">
      {!! $article->news_content !!}
    </div>

    {{-- Subscribe box (matches detail.html .detail-subscribe-box) --}}
    <div class="detail-subscribe-box">
      <div class="detail-subscribe-content">
        <h2>Read this subscriber-exclusive article for free!</h2>
        <p>
          This is one of 500+ premium articles we publish monthly.
          <a href="#">Create a free account</a> and sample the best of our journalism now!
        </p>
        <p class="detail-login-text">
          Already a subscriber? <a href="#">login</a>
        </p>
        <button class="detail-subscribe-btn">
          SIGN UP/LOGIN TO UNLOCK
        </button>
        <p class="detail-learn-more">
          Learn more about The Hindu subscription
        </p>
      </div>
      <div class="detail-subscribe-logo">
        TH
      </div>
    </div>

    {{-- Live updates block (wrapperX / promoBoxZ / articleZone) --}}
    @if($mostRead->isNotEmpty())
    <div class="wrapperX">

      {{-- Left red promo panel --}}
      <div class="promoBoxZ">
        <div class="promoCloseBtn">✕</div>
        <div class="promoHeading">
          Don't let the best of journalism slip by!
        </div>
        <div class="promoText">
          From breaking news to definitive insights, catch the most critical stories from a reliable source.
        </div>
        <button class="promoBtn">SUBSCRIBE</button>
      </div>

      {{-- Article / live updates zone --}}
      <div class="articleZone">
        @foreach($mostRead as $mr)
        <div class="metaLine">
          {{ $mr->published_at ? strtoupper($mr->published_at->format('F d, Y H:i')) : '' }}
        </div>
        <div class="newsTitleX">
          <a href="{{ $mr->canonical_url }}">{{ $mr->news_title }}</a>
        </div>
        <div class="newsParaX">
          {{ Str::limit(strip_tags($mr->news_content_short), 200) }}
        </div>
        <div class="sepLineX"></div>
        @endforeach

        {{-- Ad section --}}
        <div class="adSectionWrap">
          <div class="adLabelTxt">Continue reading after this ADVERTISEMENT</div>
          <div class="adCardBox">AD SPACE</div>
        </div>
      </div>

    </div>
    @endif

  </div>{{-- end .detail-left --}}


  {{-- ══════════════════════════════════════════════════════════
       RIGHT SIDEBAR — matches .detail-right in detail.html
  ══════════════════════════════════════════════════════════ --}}
  <div class="detail-right">

    {{-- Ad --}}
    <div class="detail-ad">
      <img src="{{ asset('img/aad.jpg') }}" alt="Advertisement" loading="lazy">
    </div>

    {{-- Most Popular / Most Read --}}
    <div class="detail-popular">
      <h3>Most Popular</h3>

      @foreach($latestSidebar as $ls)
      <div class="detail-popular-item">
        <img src="{{ $ls->photo_url }}"
             alt="{{ $ls->news_title }}"
             loading="lazy">
        <p>
          <a href="{{ $ls->canonical_url }}">{{ Str::limit($ls->news_title, 80) }}</a>
        </p>
      </div>
      @endforeach
    </div>

  </div>{{-- end .detail-right --}}

</div>{{-- end .detail-container --}}


{{-- ══════════════════════════════════════════════════════════
     SPONSORED / RELATED NEWS — matches .newsShellX in detail.html
══════════════════════════════════════════════════════════ --}}
@if($related->isNotEmpty())
<div class="newsShellX">

  <div class="sponTitleX">Related Articles</div>

  {{-- First 3 in 3-column grid --}}
  <div class="gridThreeX">
    @foreach($related->take(3) as $rel)
    <div class="cardUnitX">
      <div class="thumbWrapX">
        <img src="{{ $rel->photo_url }}"
             alt="{{ $rel->news_title }}"
             loading="lazy">
      </div>
      <div class="textWrapX">
        <div class="headLineX">
          <a href="{{ $rel->canonical_url }}">{{ Str::limit($rel->news_title, 80) }}</a>
        </div>
        <div class="metaInfoX">
          {{ strtoupper($rel->author->name ?? 'THE HINDU BUREAU') }}
        </div>
      </div>
    </div>
    @endforeach
  </div>

  {{-- Remaining in 2-column grid --}}
  @if($related->count() > 3)
  <div class="gridTwoX">
    @foreach($related->skip(3) as $rel)
    <div class="cardUnitX">
      <div class="thumbWrapX">
        <img src="{{ $rel->photo_url }}"
             alt="{{ $rel->news_title }}"
             loading="lazy">
      </div>
      <div class="textWrapX">
        <div class="headLineX">
          <a href="{{ $rel->canonical_url }}">{{ Str::limit($rel->news_title, 80) }}</a>
        </div>
        <div class="metaInfoX">
          {{ strtoupper($rel->author->name ?? 'THE HINDU BUREAU') }}
        </div>
      </div>
    </div>
    @endforeach
  </div>
  @endif

</div>
@endif


{{-- ══════════════════════════════════════════════════════════
     IN CASE YOU MISSED IT — matches .det-final-part-container
══════════════════════════════════════════════════════════ --}}
@php
  $missed = \App\Models\News::with('category')
      ->where('news_id', '!=', $article->news_id)
      ->orderByDesc('news_id')
      ->take(8)
      ->get();
@endphp

@if($missed->isNotEmpty())
<div class="det-final-part-container">

  <h2 class="det-final-part-title">In Case You Missed It</h2>

  <div class="det-final-part-grid">
    @foreach($missed as $m)
    <div class="det-final-part-card">
      <a href="{{ $m->canonical_url }}">
        <img src="{{ $m->photo_url }}"
             alt="{{ $m->news_title }}"
             loading="lazy">
      </a>
      <p>
        <a href="{{ $m->canonical_url }}">{{ Str::limit($m->news_title, 80) }}</a>
      </p>
    </div>
    @endforeach
  </div>

</div>
@endif

@endsection