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

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

    @php
        $titleText = $localized($record, 'title');
        $asset = match ($type) {
            'book' => $record->coverImage,
            'article' => $record->featuredImage,
            'news-event' => $record->image,
            default => $record->image,
        };
        $body = match ($type) {
            'article' => $localized($record, 'content') ?: $localized($record, 'excerpt'),
            'news-event' => $localized($record, 'content') ?: $localized($record, 'description'),
            default => $localized($record, 'description'),
        };
    @endphp

    <section class="v3-inner-hero">
        <div class="container">
            <div class="v3-eyebrow">{{ $sectionTitle }}</div>
            <h1 class="v3-title">{{ $titleText }}</h1>
            <p class="v3-summary">
                @if ($type === 'book')
                    {{ $localized($record, 'author') ?: 'Kalakshetra publication' }}
                @elseif ($type === 'artefact')
                    {{ $record->category ? $localized($record->category, 'name') : 'Museum artefact' }}
                @elseif ($type === 'news-event')
                    {{ $record->event_date?->format('d M Y') }} {{ $record->venue_en ? ' | '.$localized($record, 'venue') : '' }}
                @else
                    {{ $record->author_name ?: 'Article' }}
                @endif
            </p>
        </div>
    </section>

    <section class="v3-section v3-detail-section">
        <div class="container">
            <div class="row g-5">
                <div class="col-12 col-lg-7">
                    <div class="v3-detail-media">
                        <img class="v3-detail-image" src="{{ $imageUrl($asset) }}" alt="{{ $titleText }}">
                    </div>
                </div>
                <div class="col-12 col-lg-5">
                    <div class="v3-form-panel p-4">
                        <h2 class="v3-card-title mb-3">Details</h2>
                        <div class="v3-prose">{!! $body ?: '<p>No description is available for this record yet.</p>' !!}</div>

                        @if ($type === 'book' && $record->pdfFile)
                            <a class="btn v3-btn px-4 mt-3" href="{{ $imageUrl($record->pdfFile) }}" target="_blank" rel="noopener">Download PDF</a>
                        @endif
                        @if ($type === 'news-event' && $record->type === 'newsletter' && $record->document)
                            <a class="btn v3-btn px-4 mt-3" href="{{ $imageUrl($record->document) }}" target="_blank" rel="noopener">Download Newsletter</a>
                        @endif
                    </div>
                </div>
            </div>

            @if ($related->isNotEmpty())
                <div class="mt-5 pt-3">
                    <div class="v3-eyebrow text-dark">More From {{ $sectionTitle }}</div>
                    <h2 class="v3-card-title mb-4">Related</h2>
                    <div class="row g-4">
                        @foreach ($related as $item)
                            @php
                                $relatedAsset = match ($type) {
                                    'book' => $item->coverImage,
                                    'article' => $item->featuredImage,
                                    'news-event' => $item->image,
                                    default => $item->image,
                                };
                                $relatedUrl = match ($type) {
                                    'book' => url('/books/'.$item->slug),
                                    'article' => url('/articles/'.$item->slug),
                                    'news-event' => url('/news-announcements/'.$item->slug),
                                    default => url('/artefacts/'.$item->slug),
                                };
                            @endphp
                            <div class="col-12 col-md-4">
                                <a class="v3-card d-block text-decoration-none" href="{{ $relatedUrl }}">
                                    <img class="v3-card-image" src="{{ $imageUrl($relatedAsset) }}" alt="{{ $localized($item, 'title') }}">
                                    <div class="v3-card-body">
                                        <h3 class="v3-card-title fs-4">{{ $localized($item, 'title') }}</h3>
                                    </div>
                                </a>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>
    </section>
@endsection