@extends('layouts.app')

@section('title', ($article->meta_title_english ?? $article->meta_title ?? $article->news_title_english ?? $article->news_title) . ' | Business Standard')
@section('meta_description', strip_tags($article->meta_description_english ?? $article->meta_description ?? $article->news_content_short_english ?? $article->news_content_short ?? ''))
@section('meta_keywords', $article->meta_keyword_english ?? $article->meta_keyword ?? '')
@section('canonical', $article->canonical_url)
@section('og_type', 'article')
@section('og_image', $article->photo_url)
@section('article_published', $article->published_at ? $article->published_at->toIso8601String() : '')
@section('article_section', $category->category_name_english ?? $category->category_name ?? '')

@section('schema_json')
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "NewsArticle",
  "headline": "{{ addslashes($article->news_title_english ?? $article->news_title) }}",
  "image": "{{ $article->photo_url }}",
  "datePublished": "{{ $article->published_at ? $article->published_at->toIso8601String() : '' }}",
  "author": {
    "@type": "Person",
    "name": "{{ $article->author->name ?? 'Business Standard' }}"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Business Standard",
    "logo": { "@type": "ImageObject", "url": "{{ asset('images/img.webp') }}" }
  }
}
</script>
@endsection

@section('content')
<div class="mt-6">
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">

    {{-- LEFT CONTENT --}}
    <div class="md:col-span-2">

      {{-- BREADCRUMB --}}
      <div class="text-sm text-gray-500 mb-2">
        <a href="{{ route('index') }}" class="text-red-600 hover:underline">Home</a> /
        @if($category)
        <a href="{{ route('category.show', $category->slug) }}" class="hover:text-red-600">{{ $category->category_name_english ?? $category->category_name }}</a> /
        @endif
        <span class="text-black">{{ Str::limit($article->news_title_english ?? $article->news_title, 50) }}...</span>
      </div>

      {{-- TITLE --}}
      <h1 class="text-3xl md:text-5xl font-bold leading-tight mb-3 logo-font">
        {{ $article->news_title_english ?? $article->news_title }}
      </h1>

      {{-- SUBTEXT HIGHLIGHT --}}
      @if($article->news_content_short_english || $article->news_content_short)
      <div class="bg-[#f5e9df] text-gray-700 italic px-3 py-2 text-sm mb-4">
        {{ strip_tags($article->news_content_short_english ?? $article->news_content_short) }}
      </div>
      @endif

      {{-- IMAGE --}}
      <div class="relative mb-3">
        <img src="{{ $article->photo_url }}" class="w-full rounded-md" alt="{{ $article->img_alt_english ?? $article->img_alt ?? $article->news_title }}"/>
      </div>

      {{-- CAPTION --}}
      @if($article->img_alt_english || $article->img_alt)
      <p class="text-sm text-gray-600 mb-4">{{ $article->img_alt_english ?? $article->img_alt }}</p>
      @endif

      {{-- AUTHOR + SHARE --}}
      <div class="border-b pb-3 mb-4 flex items-start justify-between gap-4">
        <div class="text-sm text-gray-700">
          @if($article->author)
          <a href="{{ $article->author->url }}" class="font-semibold text-black hover:text-red-700">{{ $article->author->name }}</a>
          @if($article->author->location_english || $article->author->location)
          | {{ $article->author->location_english ?? $article->author->location }}
          @endif
          <br/>
          @endif
          <span class="text-xs text-gray-500">
            {{ $article->reading_time }} min read |
            Last Updated: {{ $article->published_at ? $article->published_at->format('M d Y | g:i A T') : '' }}
          </span>
        </div>
        <div class="flex items-center gap-2">
          <span class="text-sm text-gray-600">Share:</span>
          <a href="https://twitter.com/share?url={{ urlencode($article->canonical_url) }}&text={{ urlencode($article->news_title_english ?? $article->news_title) }}" target="_blank" rel="noopener">
            <img src="https://cdn-icons-png.flaticon.com/512/733/733585.png" class="w-6 h-6 border rounded-md p-1 cursor-pointer hover:bg-gray-100" alt="Twitter"/>
          </a>
          <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode($article->canonical_url) }}" target="_blank" rel="noopener">
            <img src="https://cdn-icons-png.flaticon.com/512/733/733547.png" class="w-6 h-6 border rounded-md p-1 cursor-pointer hover:bg-gray-100" alt="Facebook"/>
          </a>
          <a href="https://wa.me/?text={{ urlencode(($article->news_title_english ?? $article->news_title).' '.$article->canonical_url) }}" target="_blank" rel="noopener">
            <img src="https://cdn-icons-png.flaticon.com/512/733/733561.png" class="w-6 h-6 border rounded-md p-1 cursor-pointer hover:bg-gray-100" alt="WhatsApp"/>
          </a>
        </div>
      </div>

      {{-- ARTICLE CONTENT --}}
      <div class="text-[15px] leading-7 space-y-4 text-gray-800">
        {!! $article->news_content_english ?? $article->news_content !!}
      </div>

      {{-- RELATED ARTICLES --}}
      @if($related->isNotEmpty())
      <div class="mt-8 border-t pt-6">
        <h3 class="text-lg font-bold mb-4">Related Articles</h3>
        <div class="grid md:grid-cols-2 gap-4">
          @foreach($related->take(4) as $rel)
          <a href="{{ $rel->canonical_url }}" class="flex gap-3 border rounded p-3 hover:bg-gray-50 transition">
            <img src="{{ $rel->photo_url }}" class="w-20 h-16 object-cover rounded flex-shrink-0" alt="{{ $rel->img_alt_english ?? $rel->news_title }}"/>
            <div>
              <p class="font-semibold text-sm leading-snug hover:text-red-700">{{ $rel->news_title_english ?? $rel->news_title }}</p>
              <span class="text-xs text-gray-500">{{ $rel->reading_time }} min read</span>
            </div>
          </a>
          @endforeach
        </div>
      </div>
      @endif

      {{-- SUBSCRIPTION PROMO SECTION --}}
      <div class="mt-10 border-t pt-8">
        <h2 class="text-2xl md:text-3xl font-bold text-center mb-8 logo-font">Here's what's included in our digital subscription plans</h2>

        <div class="bg-[#efe2d6] rounded-md p-6 md:flex items-center justify-between mb-6">
          <div class="md:w-1/2">
            <h3 class="text-xl md:text-2xl font-bold mb-3 logo-font">Exclusive premium stories online</h3>
            <p class="text-sm flex items-start gap-2"><span class="text-red-600 mt-1">●</span>Over 30 premium stories daily, handpicked by our editors</p>
          </div>
          <div class="md:w-1/2 mt-4 md:mt-0 flex justify-center">
            <img src="{{ asset('images/img.webp') }}" class="w-[250px] md:w-[300px]" alt="Premium Stories"/>
          </div>
        </div>

        <div class="bg-[#f3f3f3] rounded-md p-6 md:flex items-center justify-between mb-6">
          <div class="md:w-1/2 mb-4 md:mb-0 flex justify-center">
            <img src="{{ asset('images/img2.webp') }}" class="w-[220px] md:w-[260px]" alt="Access"/>
          </div>
          <div class="md:w-1/2">
            <h3 class="text-xl md:text-2xl font-bold mb-3 logo-font">Complimentary Access to The New York Times</h3>
            <p class="text-sm flex items-start gap-2"><span class="text-red-600 mt-1">●</span>News, Games, Cooking, Audio, Wirecutter & The Athletic</p>
          </div>
        </div>

        <div class="bg-[#efe2d6] rounded-md p-6 md:flex items-center justify-between">
          <div class="md:w-1/2">
            <h3 class="text-xl md:text-2xl font-bold mb-3 logo-font">Business Standard Epaper</h3>
            <p class="text-sm flex items-start gap-2"><span class="text-red-600 mt-1">●</span>Digital replica of our daily newspaper — with options to read, save, and share</p>
          </div>
          <div class="md:w-1/2 mt-4 md:mt-0 flex justify-center">
            <img src="{{ asset('images/img3.webp') }}" class="w-[220px] md:w-[260px]" alt="Epaper"/>
          </div>
        </div>
      </div>

    </div>

    {{-- RIGHT SIDEBAR (STICKY) --}}
    <div class="hidden md:block">
      <div class="sticky top-6 border p-4">
        <p class="text-sm mb-3">Subscribe to Business Standard digital and get complimentary access to <span class="font-semibold">The New York Times</span></p>
        <h2 class="text-red-700 text-xl font-bold logo-font mb-2">Business Standard</h2>
        <p class="text-sm font-semibold mb-4">+ The New York Times</p>

        <div class="border p-3 mb-3 flex justify-between items-center">
          <div>
            <p class="font-semibold">Smart Quarterly</p>
            <p class="text-xs text-gray-500">3 Months</p>
          </div>
          <div class="text-right">
            <p class="font-semibold">₹900</p>
            <p class="text-xs text-gray-500">₹300/Month</p>
          </div>
        </div>

        <div class="border-2 border-red-600 p-3 mb-3 relative">
          <span class="absolute -top-2 left-2 bg-white text-xs px-2 text-red-600 font-semibold">SAVE 25%</span>
          <div class="flex justify-between items-center">
            <div>
              <p class="font-semibold">Smart Essential</p>
              <p class="text-xs text-gray-500">1 Year</p>
            </div>
            <div class="text-right">
              <p class="font-semibold">₹2,700</p>
              <p class="text-xs text-gray-500">₹225/Month</p>
            </div>
          </div>
        </div>

        <div class="border p-3 mb-4">
          <div class="flex justify-between items-center">
            <div>
              <p class="font-semibold">Super Saver</p>
              <p class="text-xs text-gray-500">2 Years</p>
            </div>
            <div class="text-right">
              <p class="font-semibold">₹3,900</p>
              <p class="text-xs text-gray-500">₹162/Month</p>
            </div>
          </div>
        </div>

        <button id="openSubscribeModal" class="w-full bg-red-700 text-white py-2 rounded font-semibold hover:bg-red-800 transition">Subscribe</button>
        <p class="text-xs text-gray-500 mt-2 text-center">Renews automatically, cancel anytime</p>

        {{-- LATEST NEWS IN SIDEBAR --}}
        <div class="mt-6 border-t pt-4">
          <h3 class="font-bold mb-3">Latest News</h3>
          @foreach($latestSidebar->take(5) as $s)
          <a href="{{ $s->canonical_url }}" class="flex gap-3 border-b pb-3 mb-3 hover:text-red-700 transition">
            <div class="flex-1">
              <p class="font-semibold text-sm">{{ $s->news_title_english ?? $s->news_title }}</p>
              <p class="text-xs text-gray-500">{{ $s->reading_time }} min read</p>
            </div>
            <img src="{{ $s->photo_url }}" class="w-16 h-12 object-cover rounded flex-shrink-0" alt="{{ $s->img_alt_english ?? $s->news_title }}"/>
          </a>
          @endforeach
        </div>

        {{-- MOST READ --}}
        @if($mostRead->isNotEmpty())
        <div class="mt-4 border-t pt-4">
          <h3 class="font-bold mb-3">Most Read</h3>
          @foreach($mostRead->take(4) as $mr)
          <a href="{{ $mr->canonical_url }}" class="block border-b pb-2 mb-2 text-sm font-semibold hover:text-red-700 transition">
            {{ Str::limit($mr->news_title_english ?? $mr->news_title, 70) }}
          </a>
          @endforeach
        </div>
        @endif
      </div>
    </div>

  </div>
</div>
@endsection
