@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->slug) }}"
                                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->slug) }}"
                                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>
                                Published {{ optional($a->published_on ?? $a->created_at)->format('M d, Y') }}
                                @if ($a->issn)
                                    <span class="mx-2">|</span>
                                    ISSN {{ $a->issn }}
                                @endif
                            </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