@extends('layouts.app')
@section('content')
<section class="max-w-[1100px] mx-auto">
  <div class="mb-6">
    <h1 class="text-3xl font-bold text-[#041627]">Published Articles</h1>
    <p class="text-sm text-gray-600 mt-1">Browse all published research articles.</p>
  </div>

  <form method="GET" class="mb-6 grid md:grid-cols-12 gap-3">
    <input name="q" value="{{ request('q') }}" class="md:col-span-4 border border-[#aeb6bf] bg-white px-3 py-2 rounded" placeholder="Search by title...">
    <select name="category_id" class="md:col-span-2 border border-[#aeb6bf] bg-white px-3 py-2 rounded">
      <option value="">All categories</option>
      @foreach($categories as $c)
      <option value="{{ $c->id }}" @selected((string) request('category_id') === (string) $c->id)>{{ $c->name }}</option>
      @endforeach
    </select>
    <select name="volume_id" data-volume-select class="md:col-span-2 border border-[#aeb6bf] bg-white px-3 py-2 rounded">
      <option value="">All volumes</option>
      @foreach($volumes as $v)
      <option value="{{ $v->id }}" @selected((string) request('volume_id') === (string) $v->id)>{{ $v->title }}</option>
      @endforeach
    </select>
    <select name="issue_id" data-issue-select class="md:col-span-2 border border-[#aeb6bf] bg-white px-3 py-2 rounded">
      <option value="">All issues</option>
      @foreach($issues as $i)
      <option value="{{ $i->id }}" data-volume-id="{{ $i->volume_id }}" @selected((string) request('issue_id') === (string) $i->id)>{{ $i->title }}</option>
      @endforeach
    </select>
    <button class="md:col-span-2 bg-[#041627] text-white px-4 py-2 rounded font-semibold">Filter</button>
  </form>

  <div class="bg-white border border-[#aeb6bf] overflow-hidden">
    @forelse($articles as $a)
      @php
        $thumb = $a->thumbnail;
        $thumbUrl = $thumb
            ? (\Illuminate\Support\Str::startsWith($thumb, ['http://', 'https://']) ? $thumb : asset('storage/'.$thumb))
            : null;
      @endphp
      <article class="p-4 md:p-5 border-b border-[#e3e6ea] last:border-b-0">
        <div class="flex gap-4">
          @if($thumbUrl)
          <a href="{{ route('public.article', $a) }}" class="shrink-0 w-28 h-20 md:w-36 md:h-24 overflow-hidden rounded border border-[#d8dde3]">
            <img src="{{ $thumbUrl }}" alt="Article thumbnail" class="w-full h-full object-cover">
          </a>
          @endif
          <div class="min-w-0 flex-1">
            <a href="{{ route('public.article', $a) }}" class="text-lg font-semibold text-[#041627] hover:text-[#3b6090] block">
              {{ $a->title }}
            </a>
            <p class="text-sm text-gray-600 mt-1">
              {{ $a->author->display_name ?? 'NEROSA Editorial' }}
              <span class="mx-2">|</span>
              {{ $a->category->name ?? 'General' }}
              @if($a->issue)
              <span class="mx-2">|</span>
              {{ optional($a->issue->volume)->title }} - {{ $a->issue->title }}
              @endif
              <span class="mx-2">|</span>
              {{ optional($a->published_on ?? $a->created_at)->format('M d, Y') }}
            </p>
            @if($a->synopsis)
            <p class="text-sm text-gray-700 mt-2">{{ \Illuminate\Support\Str::limit(strip_tags($a->synopsis), 220) }}</p>
            @endif
          </div>
        </div>
      </article>
    @empty
      <div class="p-8 text-center text-gray-600">No published articles found.</div>
    @endforelse
  </div>

  <div class="mt-5">
    {{ $articles->links() }}
  </div>
</section>
<script>
(() => {
  const volume = document.querySelector('[data-volume-select]');
  const issue = document.querySelector('[data-issue-select]');
  if (!volume || !issue) {
    return;
  }

  const filterIssues = () => {
    const selectedVolume = volume.value;
    let selectedIssueStillVisible = false;
    issue.querySelectorAll('option').forEach((option) => {
      if (!option.value) {
        return;
      }
      const visible = !selectedVolume || option.dataset.volumeId === selectedVolume;
      option.hidden = !visible;
      option.disabled = !visible;
      if (visible && option.selected) {
        selectedIssueStillVisible = true;
      }
    });
    if (!selectedIssueStillVisible) {
      issue.value = '';
    }
  };

  volume.addEventListener('change', filterIssues);
  filterIssues();
})();
</script>
@endsection