@extends('layouts.app')
@section('content')
    <section class="max-w-[1100px] mx-auto px-6 py-12">
        <div class="mb-8">
            <a href="{{ route('public.editorial-board.index') }}" class="text-sm text-[#041627] font-semibold hover:text-[#3b6090]">&larr; Back to Editorial Board</a>
            <div class="mt-4">
                <h1 class="text-4xl font-bold text-[#041627]">{{ $editor->name }}</h1>
                <p class="text-gray-600 mt-2">Editorial board member overseeing research review and publication decisions.</p>
            </div>
        </div>

        <div class="grid gap-6 lg:grid-cols-[320px_minmax(0,1fr)]">
            <section class="bg-white border border-[#d8dde3] rounded-xl p-6">
                <div class="flex items-center gap-4 mb-6">
                    <div class="w-20 h-20 rounded-full bg-[#e8effb] overflow-hidden flex items-center justify-center text-3xl text-[#041627] font-semibold">
                        @if($editor->profile_photo_path)
                            <img src="{{ asset('storage/' . $editor->profile_photo_path) }}" alt="{{ $editor->name }}" class="w-full h-full object-cover">
                        @else
                            {{ strtoupper(substr($editor->name, 0, 1)) }}
                        @endif
                    </div>
                    <div>
                        <h2 class="text-2xl font-semibold text-[#041627]">{{ $editor->name }}</h2>
                        <p class="text-sm text-[#3b6090] uppercase tracking-[0.2em]">Editorial Board Member</p>
                    </div>
                </div>

                <div class="space-y-4 text-sm text-[#44474c]">
                    @if($editor->profile)
                        @if($editor->profile->designation)
                            <div><span class="font-semibold text-[#041627]">Designation:</span> {{ $editor->profile->designation }}</div>
                        @endif
                        @if($editor->profile->affiliation)
                            <div><span class="font-semibold text-[#041627]">Affiliation:</span> {{ $editor->profile->affiliation }}</div>
                        @endif
                        @if($editor->profile->department)
                            <div><span class="font-semibold text-[#041627]">Department:</span> {{ $editor->profile->department }}</div>
                        @endif
                        @if($editor->profile->country)
                            <div><span class="font-semibold text-[#041627]">Country:</span> {{ $editor->profile->country }}</div>
                        @endif
                        @if($editor->profile->mobile)
                            <div><span class="font-semibold text-[#041627]">Contact:</span> {{ $editor->profile->mobile }}</div>
                        @endif
                    @endif
                    <div><span class="font-semibold text-[#041627]">Email:</span> {{ $editor->email }}</div>
                </div>
            </section>

            <section class="space-y-6">
                <div class="bg-white border border-[#d8dde3] rounded-xl p-6">
                    <h2 class="text-2xl font-semibold text-[#041627] mb-4">Published Articles</h2>

                    <form method="GET" class="mb-6 grid md:grid-cols-12 gap-3">
                        <input name="q" value="{{ request('q') }}"
                            class="md:col-span-10 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">Search</button>
                    </form>

                    <div class="bg-white border border-[#aeb6bf] overflow-hidden">
                        @forelse($publishedArticles as $article)
                            @php
                                $thumb = $article->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', $article->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', $article->slug) }}"
                                            class="text-lg font-semibold text-[#041627] hover:text-[#3b6090] block">
                                            {{ $article->title }}
                                        </a>
                                        <p class="text-sm text-gray-600 mt-1">
                                            {{ $article->author->display_name ?? $article->author->name ?? 'NEROSA Editorial' }}
                                            <span class="mx-2">|</span>
                                            {{ $article->category->name ?? 'General' }}
                                            @if ($article->issue)
                                                <span class="mx-2">|</span>
                                                {{ optional($article->issue->volume)->title }} - {{ $article->issue->title }}
                                            @endif
                                            <span class="mx-2">|</span>
                                            Published {{ optional($article->published_on ?? $article->created_at)->format('M d, Y') }}
                                            @if ($article->issn)
                                                <span class="mx-2">|</span>
                                                ISSN {{ $article->issn }}
                                            @endif
                                        </p>
                                        @if ($article->synopsis)
                                            <p class="text-sm text-gray-700 mt-2">
                                                {{ \Illuminate\Support\Str::limit(strip_tags($article->synopsis), 220) }}</p>
                                        @endif
                                    </div>
                                </div>
                            </article>
                        @empty
                            <div class="p-8 text-center text-gray-600">No published articles are currently assigned to this editor.</div>
                        @endforelse
                    </div>

                    <div class="mt-5">
                        {{ $publishedArticles->links() }}
                    </div>
                </div>
            </section>
        </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