@extends('frontend-v3.pages.layout')

@section('page')
    @include('frontend-v3.pages.partials.styles')

    <section class="v3-inner-hero">
        <div class="container">
            <div class="v3-eyebrow">{{ $eyebrow }}</div>
            <h1 class="v3-title">{{ $pageTitle }}</h1>
            <p class="v3-summary">{{ $summary }}</p>
        </div>
    </section>

    @if (in_array($type, ['book', 'artefact', 'event', 'article'], true) || ! empty($dateFilter))
        <section class="container">
            <form class="v3-filter-panel row g-3 align-items-end" method="GET">
            @if (in_array($type, ['book', 'artefact', 'event', 'article'], true))
                <div class="col-12 col-lg">
                    <label class="form-label small fw-bold v3-muted" for="q">{{ match ($type) { 'book' => 'Search by book name or author', 'event' => 'Search events', 'article' => 'Search articles by title', default => 'Search artefacts' } }}</label>
                    <input class="form-control v3-input" id="q" type="search" name="q" value="{{ request('q') }}">
                </div>
            @endif

            @isset($categories)
                <div class="col-12 col-lg-4">
                    <label class="form-label small fw-bold v3-muted" for="category">Category</label>
                    <select class="form-select v3-input" id="category" name="category">
                        <option value="">All Categories</option>
                        @foreach ($categories as $category)
                            <option value="{{ $category->id }}" @selected((string) request('category') === (string) $category->id)>{{ $localized($category, 'name') }}</option>
                        @endforeach
                    </select>
                </div>
            @endisset

            @if (! empty($typeFilter))
                <div class="col-12 col-md-4 col-lg-3">
                    <label class="form-label small fw-bold v3-muted" for="type">Type</label>
                    <select class="form-select v3-input" id="type" name="type">
                        <option value="">All types</option>
                        <option value="news" @selected(request('type') === 'news')>News</option>
                        <option value="announcement" @selected(request('type') === 'announcement')>Announcements</option>
                    </select>
                </div>
            @endif

            @if (! empty($dateFilter))
                <div class="col-12 col-md-4 col-lg-3">
                    <label class="form-label small fw-bold v3-muted" for="from">From</label>
                    <input class="form-control v3-input" id="from" type="date" name="from" value="{{ request('from') }}">
                </div>
                <div class="col-12 col-md-4 col-lg-3">
                    <label class="form-label small fw-bold v3-muted" for="to">To</label>
                    <input class="form-control v3-input" id="to" type="date" name="to" value="{{ request('to') }}">
                </div>
            @endif

            <div class="col-12 col-lg-auto">
                <button class="btn v3-btn px-4" type="submit">Apply</button>
                <a class="btn btn-light px-4 ms-2" href="{{ url()->current() }}">Reset</a>
            </div>
            </form>
        </section>
    @endif

    <section class="v3-section">
        <div class="container">
            <div class="row g-4">
                @forelse ($records as $record)
                    @php
                        $titleText = $localized($record, 'title');
                        $description = $localized($record, match ($type) { 'article' => 'excerpt', 'event' => 'summary', default => 'description' });
                        $asset = match ($type) {
                            'book' => $record->coverImage,
                            'article' => $record->featuredImage,
                            'news-event' => $record->image,
                            default => $record->image,
                        };
                        $detailUrl = match ($type) {
                            'book' => url('/books/'.$record->slug),
                            'article' => url('/articles/'.$record->slug),
                            'news-event' => url('/news-announcements/'.$record->slug),
                            'event' => url('/events/'.$record->slug),
                            default => url('/artefacts/'.$record->slug),
                        };
                    @endphp
                    <div class="col-12 col-md-6 col-xl-4">
                        <article class="v3-card">
                            <img class="v3-card-image" src="{{ $imageUrl($asset) }}" alt="{{ $titleText }}">
                            <div class="v3-card-body">
                                <p class="small fw-bold text-uppercase v3-muted mb-2">
                                    @if ($type === 'book')
                                        {{ $localized($record, 'author') ?: 'Publication' }}
                                    @elseif ($type === 'artefact')
                                        {{ $record->category ? $localized($record->category, 'name') : 'Artefact' }}
                                    @elseif ($type === 'news-event')
                                        {{ str($record->type)->title() }}@if ($record->event_date) &middot; {{ $record->event_date->format('d M Y') }}@endif
                                    @elseif ($type === 'event')
                                        Event
                                    @else
                                        {{ $record->published_at?->format('d M Y') ?: 'Article' }}
                                    @endif
                                </p>
                                <h2 class="v3-card-title">{{ $titleText }}</h2>
                                <p class="v3-muted">{{ str(strip_tags((string) $description))->limit(130) }}</p>
                                @if ($type === 'news-event' && $record->type === 'newsletter' && $record->document)
                                    <a class="btn v3-btn px-3" href="{{ $imageUrl($record->document) }}" target="_blank" rel="noopener">Download Newsletter</a>
                                    <a class="v3-link mt-2" href="{{ $detailUrl }}">View Details</a>
                                @else
                                    <a class="v3-link" href="{{ $detailUrl }}">View Details</a>
                                @endif
                            </div>
                        </article>
                    </div>
                @empty
                    <div class="col-12">
                        <div class="v3-empty">No records found.</div>
                    </div>
                @endforelse
            </div>

            <div class="mt-5">
                {{ $records->links() }}
            </div>
        </div>
    </section>
@endsection