@extends('layouts.app')

@section('title', $author->name . ' - Articles | Business Standard')
@section('meta_description', strip_tags($author->bio_english ?? $author->bio ?? ''))
@section('canonical', $author->url)

@section('content')
<div class="mt-6">

  {{-- BREADCRUMB --}}
  <div class="text-sm text-gray-500 mb-6">
    <a href="{{ route('index') }}" class="text-red-600 hover:underline">Home</a> / Author / {{ $author->name }}
  </div>

  {{-- TOP SECTION --}}
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6 items-center">

    {{-- LEFT: AUTHOR INFO --}}
    <div class="md:col-span-2 flex items-center gap-6">
      <img src="{{ $author->photo_url }}" class="w-24 h-24 md:w-32 md:h-32 rounded-full object-cover" alt="{{ $author->name }}"/>
      <div>
        <h1 class="text-3xl md:text-5xl font-bold logo-font mb-1">{{ $author->name }}</h1>
        @if($author->designation_english || $author->designation)
        <p class="text-gray-600 mb-2">{{ $author->designation_english ?? $author->designation }}</p>
        @endif
        @if($author->location_english || $author->location)
        <p class="text-sm text-gray-500 mb-2">{{ $author->location_english ?? $author->location }}</p>
        @endif
        <div class="flex items-center gap-3">
          <span class="text-sm text-gray-600">Follow:</span>
          @if($author->twitter_url)
          <a href="{{ $author->twitter_url }}" 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 hover:bg-gray-100 cursor-pointer" alt="Twitter"/>
          </a>
          @endif
          @if($author->facebook_url)
          <a href="{{ $author->facebook_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 hover:bg-gray-100 cursor-pointer" alt="Facebook"/>
          </a>
          @endif
          @if($author->linkedin_url)
          <a href="{{ $author->linkedin_url }}" target="_blank" rel="noopener">
            <img src="https://cdn-icons-png.flaticon.com/512/733/733579.png" class="w-6 h-6 border rounded-md p-1 hover:bg-gray-100 cursor-pointer" alt="LinkedIn"/>
          </a>
          @endif
          <img src="{{ asset('images/insta.webp') }}" class="w-6 h-6 border rounded-md p-1 hover:bg-gray-100 cursor-pointer" alt="Instagram"/>
        </div>
      </div>
    </div>

    {{-- RIGHT: ADVERTISEMENT --}}
    <div class="hidden md:block text-right">
      <p class="text-sm text-gray-500 mb-2">Advertisement</p>
      <img src="{{ asset('images/ad.webp') }}" class="w-full h-[220px] object-cover rounded" alt="Advertisement"/>
    </div>

  </div>

  {{-- BIO --}}
  @if($author->bio_english || $author->bio)
  <div class="mt-4 bg-gray-50 border rounded p-4 text-sm text-gray-700 leading-relaxed">
    {{ $author->bio_english ?? $author->bio }}
  </div>
  @endif

  {{-- STATS --}}
  <div class="mt-4 flex gap-6 text-sm text-gray-600">
    <span><strong class="text-black">{{ $totalArticles }}</strong> Articles</span>
    @if($mostRecentDate)
    <span>Last published: <strong class="text-black">{{ $mostRecentDate->format('M j, Y') }}</strong></span>
    @endif
  </div>

  {{-- CATEGORY FILTER TABS --}}
  @if($authorCategories->isNotEmpty())
  <div class="mt-4 flex flex-wrap gap-2">
    <a href="{{ $author->url }}" class="px-3 py-1 text-sm rounded-full border {{ !$activeCategorySlug ? 'bg-red-600 text-white border-red-600' : 'hover:bg-gray-50' }}">All</a>
    @foreach($authorCategories as $cat)
    <a href="{{ $author->url }}?category={{ $cat->slug }}" class="px-3 py-1 text-sm rounded-full border {{ $activeCategorySlug === $cat->slug ? 'bg-red-600 text-white border-red-600' : 'hover:bg-gray-50' }}">
      {{ $cat->category_name_english ?? $cat->category_name }}
      <span class="text-xs">({{ $cat->articles_count }})</span>
    </a>
    @endforeach
  </div>
  @endif

  <div class="mt-8 border-t-4 pt-2"></div>

  {{-- AUTHOR ARTICLES + SIDEBAR --}}
  <div class="mt-10 grid grid-cols-1 md:grid-cols-3 gap-8">

    {{-- LEFT: ARTICLES --}}
    <div class="md:col-span-2">
      <div class="border-b pb-2 mb-6">
        <h2 class="text-xl font-bold">{{ $author->name }}</h2>
        <div class="w-20 h-[2px] bg-red-600 mt-1"></div>
      </div>

      @forelse($articles as $article)
      <div class="flex gap-6 pb-6 border-b mb-6">
        <div class="flex-1">
          <a href="{{ $article->canonical_url }}">
            <h3 class="text-2xl font-bold leading-snug mb-2 hover:text-red-700 transition">{{ $article->news_title_english ?? $article->news_title }}</h3>
          </a>
          <p class="text-gray-700 mb-2">{{ Str::limit(strip_tags($article->news_content_short_english ?? $article->news_content_short ?? ''), 150) }}</p>
          <p class="text-sm text-gray-500">
            Updated On : {{ $article->published_at ? $article->published_at->format('d M Y | g:i A T') : '' }}
            @if($article->category)
            <span class="ml-2 text-red-600">
              <a href="{{ route('category.show', $article->category->slug) }}">{{ $article->category->category_name_english ?? $article->category->category_name }}</a>
            </span>
            @endif
          </p>
        </div>
        <a href="{{ $article->canonical_url }}" class="flex-shrink-0">
          <img src="{{ $article->photo_url }}" class="w-48 h-28 object-cover rounded" alt="{{ $article->img_alt_english ?? $article->news_title }}"/>
        </a>
      </div>
      @empty
      <p class="text-gray-500">No articles found.</p>
      @endforelse

      {{-- PAGINATION --}}
      @if($articles->hasPages())
      <div class="mt-6">
        {{ $articles->appends(request()->query())->links() }}
      </div>
      @endif
    </div>

    {{-- RIGHT: SIDEBAR --}}
    <div>

      {{-- LATEST NEWS --}}
      <div class="border p-4 mb-6">
        <div class="flex justify-between items-center mb-3">
          <h3 class="font-bold">Latest News</h3>
          <span class="text-sm text-gray-600">more →</span>
        </div>
        <div class="flex justify-between text-sm mb-3">
          <span class="text-red-600 font-semibold">In this section</span>
          <span>All</span>
        </div>
        @foreach($latestSidebar as $s)
        <a href="{{ $s->canonical_url }}" class="flex gap-3 border-b pb-3 mb-3 last:border-b-0 last:mb-0 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>

      {{-- OTHER AUTHORS --}}
      @if($otherAuthors->isNotEmpty())
      <div class="border p-4">
        <h3 class="font-bold mb-3">Other Contributors</h3>
        @foreach($otherAuthors as $otherAuthor)
        <a href="{{ $otherAuthor->url }}" class="flex items-center gap-3 border-b pb-3 mb-3 last:border-b-0 last:mb-0 hover:text-red-700 transition">
          <img src="{{ $otherAuthor->photo_url }}" class="w-10 h-10 rounded-full object-cover flex-shrink-0" alt="{{ $otherAuthor->name }}"/>
          <div>
            <p class="font-semibold text-sm">{{ $otherAuthor->name }}</p>
            @if($otherAuthor->designation_english || $otherAuthor->designation)
            <p class="text-xs text-gray-500">{{ $otherAuthor->designation_english ?? $otherAuthor->designation }}</p>
            @endif
          </div>
        </a>
        @endforeach
      </div>
      @endif

    </div>
  </div>

</div>
@endsection
