@extends('layouts.app')

@section('title', ($category->meta_title ?: $category->category_name . ' News') . ' | ' . config('app.name'))
@section('meta_description', $category->meta_description ?: 'Read the latest ' . $category->category_name . ' news from The Hindu.')
@section('meta_keywords', $category->meta_keyword ?? $category->category_name . ', india news')
@section('canonical', route('category.show', $category->slug))

@section('schema_json')
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "CollectionPage",
  "name": "{{ addslashes($category->category_name_english ?? $category->category_name) }} News",
  "url": "{{ route('category.show', $category->slug) }}",
  "publisher": {
    "@type": "Organization",
    "name": "{{ config('app.name', 'The Hindu') }}"
  }
}
</script>
@endsection

@section('content')

{{-- ══════════════════════════════════════════════════════════════
     SECTION 1 — Category Header + 3-Column Featured Grid
══════════════════════════════════════════════════════════════ --}}
<div class="category-and-set-container">

  {{-- Section title with decorative lines --}}
  <div class="category-and-set-header">
    <span class="category-and-set-line"></span>
    <h2>{{ $category->category_name }}</h2>
    <span class="category-and-set-line"></span>
    @if($category->meta_description)
      <div class="category-and-set-dropdown">{{ Str::limit($category->meta_description, 40) }} ▼</div>
    @endif
  </div>

  {{-- Sub-category / tag navigation menu --}}
  @if($otherCategories->isNotEmpty())
  <div class="category-and-set-menu">
    <a href="{{ route('category.show', $category->slug) }}" class="active" title="{{ $category->category_name }}">{{ strtoupper($category->category_name) }}</a>
    @foreach($otherCategories->take(6) as $oc)
      /
      <a href="{{ route('category.show', $oc->slug) }}" title="{{ $oc->category_name }}">{{ strtoupper($oc->category_name) }}</a>
    @endforeach
  </div>
  @endif

  {{-- 3-Column featured layout --}}
  <div class="category-and-set-grid">

    {{-- ── LEFT: small articles list ──────────────────────── --}}
    <div class="category-and-set-left">

      @if($articles->count() > 0)
        @php $leftArticle = $articles->get(1) ?? $articles->first(); @endphp
        <a href="{{ $leftArticle->canonical_url }}" title="{{ $leftArticle->news_title }}">
          <img src="{{ $leftArticle->photo_url }}"
               alt="{{ $leftArticle->img_alt ?: $leftArticle->news_title }}">
        </a>
        <p><a href="{{ $leftArticle->canonical_url }}" title="{{ $leftArticle->news_title }}">{{ $leftArticle->news_title }}</a></p>
      @endif

      {{-- Mini article list (items 3–6) --}}
      <div class="cate-sec-grow-container">
        @foreach($articles->slice(2, 4) as $art)
        <div class="cate-sec-grow-item">
          <div class="cate-sec-grow-img-wrap">
            <a href="{{ $art->canonical_url }}" title="{{ $art->news_title }}">
              <img src="{{ $art->photo_url }}"
                   alt="{{ $art->img_alt ?: $art->news_title }}"
                   class="cate-sec-grow-img">
            </a>
          </div>
          <div class="cate-sec-grow-content">
            <span class="cate-sec-grow-tag">{{ strtoupper($category->category_name) }}</span>
            <h3 class="cate-sec-grow-title">
              <a href="{{ $art->canonical_url }}" title="{{ $art->news_title }}">
                {{ Str::limit($art->news_title, 90) }}
              </a>
            </h3>
          </div>
        </div>
        @endforeach
      </div>

    </div>

    {{-- ── CENTER: Featured / Hero article ───────────────── --}}
    <div class="category-and-set-center">

      @if($featuredArticle)
        <h1><a href="{{ $featuredArticle->canonical_url }}" title="{{ $featuredArticle->news_title }}">{{ $featuredArticle->news_title }}</a></h1>
        <p class="category-and-set-subtext">
          {{ Str::limit(strip_tags($featuredArticle->news_content_short), 160) }}
        </p>
        <span class="category-and-set-author">
          {!! ($featuredArticle->author ? '<a href="'.route('author.show', $featuredArticle->author->slug).'" class="author-link">'.strtoupper($featuredArticle->author->name).'</a>' : '<span class="author-link-plain">THE HINDU BUREAU</span>') !!}
        </span>
        <a href="{{ $featuredArticle->canonical_url }}" title="{{ $featuredArticle->news_title }}">
          <img src="{{ $featuredArticle->photo_url }}"
               alt="{{ $featuredArticle->img_alt ?: $featuredArticle->news_title }}"
               loading="eager">
        </a>
      @endif

    </div>

    {{-- ── RIGHT: sidebar story list ───────────────────────── --}}
    <div class="category-and-set-right">

      @foreach($latestSidebar->take(4) as $ls)
      <div class="category-and-set-side-item">
        <span class="tag">{{ strtoupper($ls->category->category_name ?? $category->category_name) }}</span>
        <p>
          <a href="{{ $ls->canonical_url }}" title="{{ $ls->news_title }}">
            {{ Str::limit($ls->news_title, 110) }}
          </a>
        </p>
        <span class="source">{!! ($ls->author ? '<a href="'.route('author.show', $ls->author->slug).'" class="author-link">'.strtoupper($ls->author->name).'</a>' : '<span class="author-link-plain">THE HINDU BUREAU</span>') !!}</span>
      </div>
      @endforeach

    </div>

  </div>{{-- /category-and-set-grid --}}

</div>{{-- /category-and-set-container --}}


{{-- ══════════════════════════════════════════════════════════════
     SECTION 2 — Sub-section rows (4-column article grids)
     Groups of ~4 articles, each in a wrap-main block.
     Mirrors the HTML's wrap-main / row-news / col layout.
══════════════════════════════════════════════════════════════ --}}

@php
  // Articles already shown: 0 (featured), 1 (left thumb), 2–5 (grow list).
  // The remaining articles (from index 6 onward) are split into groups of 4
  // for the wrap-main row sections.
  $remaining = $articles->slice(6);
  $chunks    = $remaining->chunk(4);
@endphp

@foreach($chunks as $chunkIndex => $chunk)

  <div class="wrap-main">

    {{-- Section heading --}}
    <h1 class="title-head">{{ $category->category_name }}</h1>

    <div class="row-news">

      @foreach($chunk as $colIndex => $art)

        @if($colIndex === 0)
          {{-- First column: large image + headline --}}
          <div class="col col-left">
            <a href="{{ $art->canonical_url }}" title="{{ $art->news_title }}">
              <img src="{{ $art->photo_url }}"
                   alt="{{ $art->img_alt ?: $art->news_title }}"
                   class="img-main">
            </a>
            <h2 class="headline-det">
              <a href="{{ $art->canonical_url }}" title="{{ $art->news_title }}">
                {{ $art->news_title }}
              </a>
            </h2>
            <p class="source">{!! ($art->author ? '<a href="'.route('author.show', $art->author->slug).'" class="author-link">'.strtoupper($art->author->name).'</a>' : '<span class="author-link-plain">THE HINDU BUREAU</span>') !!}</p>
          </div>

        @elseif($colIndex === 1)
          {{-- Second column: text-only double story --}}
          <div class="col col-mid">
            <span class="tag">{{ strtoupper($category->category_name) }}</span>
            <h3 class="headline-det">
              <a href="{{ $art->canonical_url }}" title="{{ $art->news_title }}">
                {{ $art->news_title }}
              </a>
            </h3>
            <p class="source">{!! ($art->author ? '<a href="'.route('author.show', $art->author->slug).'" class="author-link">'.strtoupper($art->author->name).'</a>' : '<span class="author-link-plain">THE HINDU BUREAU</span>') !!}</p>

            @if($chunk->get(4) || $chunk->count() > 2)
              {{-- If there's a bonus 5th item from the next chunk, show inline; else skip --}}
            @endif

          </div>

        @else
          {{-- Third and fourth columns: small image + headline --}}
          <div class="col col-imgtext">
            <a href="{{ $art->canonical_url }}" title="{{ $art->news_title }}">
              <img src="{{ $art->photo_url }}"
                   alt="{{ $art->img_alt ?: $art->news_title }}"
                   class="img-small">
            </a>
            @if($art->category)
              <p class="tag">{{ strtoupper($art->category->category_name) }}</p>
            @endif
            <h3 class="headline-det">
              <a href="{{ $art->canonical_url }}" title="{{ $art->news_title }}">
                {{ $art->news_title }}
              </a>
            </h3>
            @if($art->author)
              <p class="source">{!! ($art->author ? '<a href="'.route('author.show', $art->author->slug).'" class="author-link">'.strtoupper($art->author->name).'</a>' : '<span class="author-link-plain">THE HINDU BUREAU</span>') !!}</p>
            @endif
          </div>
        @endif

      @endforeach

    </div>{{-- /row-news --}}

    <div class="see-more-f">SEE MORE →</div>

  </div>{{-- /wrap-main --}}

  @if(!$loop->last)
    <hr>
  @endif

@endforeach


{{-- ══════════════════════════════════════════════════════════════
     SECTION 3 — Advertisement banner
══════════════════════════════════════════════════════════════ --}}
<div class="adv">
  {{-- Slot for ad image; replace with your ad component or blade include --}}
  @isset($adBanner)
    <img src="{{ $adBanner }}" alt="ADVERTISEMENT">
  @endisset
</div>


{{-- ══════════════════════════════════════════════════════════════
     SECTION 4 — "In Case You Missed It" 4-column grid
     Uses the remaining latestSidebar items as a fallback,
     or a dedicated $missedArticles collection if passed.
══════════════════════════════════════════════════════════════ --}}
@if($articles->count() > 0)
<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($articles->take(8) as $art)
    <div class="det-final-part-card">
      <a href="{{ $art->canonical_url }}" title="{{ $art->news_title }}">
        <img src="{{ $art->photo_url }}"
             alt="{{ $art->img_alt ?: $art->news_title }}">
      </a>
      <p>
        <a href="{{ $art->canonical_url }}" title="{{ $art->news_title }}">
          {{ Str::limit($art->news_title, 100) }}
        </a>
      </p>
    </div>
    @endforeach

  </div>

</div>
@endif


{{-- ══════════════════════════════════════════════════════════════
     SECTION 5 — Pagination
══════════════════════════════════════════════════════════════ --}}
@if($articles->hasPages())
<div class="hindu-pagination" style="margin: 30px auto; max-width:1300px; padding:0 20px;">
  {{ $articles->links('partials.pagination') }}
</div>
@endif

@endsection