@extends('layouts.public')

@section('title', $achievement->title)
@section('meta_description', $achievement->short_description)

@section('content')
    <x-page-hero :eyebrow="\App\Models\Achievement::CATEGORIES[$achievement->category] ?? null"
                 :title="$achievement->title"
                 :subtitle="$achievement->awarding_body"
                 :image="image_url($achievement->image)"
                 :breadcrumbs="[__('Achievements') => route('achievements.index'), $achievement->title => null]"
                 :meta="[
                     __('Date') => $achievement->achieved_on?->format('d M Y'),
                     __('Sector') => $achievement->sector?->name,
                 ]" />

    <section class="section">
        <div class="container-page grid gap-14 lg:grid-cols-12">
            <div class="min-w-0 lg:col-span-8">
                @if ($achievement->short_description)
                    <p class="prose-measure font-display text-xl leading-relaxed text-text">{{ $achievement->short_description }}</p>
                @endif

                @if ($achievement->description)
                    <div class="prose-content mt-8">{!! $achievement->description !!}</div>
                @endif

                @if ($achievement->certificate)
                    <x-button :href="asset_path($achievement->certificate)" target="_blank" rel="noopener" class="mt-10">
                        <x-icon name="download" class="size-4" /> {{ __('View certificate') }}
                    </x-button>
                @endif
            </div>

            <aside class="lg:col-span-4">
                <div class="space-y-5 lg:sticky lg:top-28">
                    <div class="panel">
                        <p class="meta-label mb-4">{{ __('Details') }}</p>

                        <dl class="space-y-3.5 text-sm">
                            @foreach ([
                                __('Category') => \App\Models\Achievement::CATEGORIES[$achievement->category] ?? $achievement->category,
                                __('Awarded by') => $achievement->awarding_body,
                                __('Date') => $achievement->achieved_on?->format('d M Y'),
                                __('Sector') => $achievement->sector?->name,
                            ] as $label => $value)
                                @if (filled($value))
                                    <div class="border-b border-border pb-3.5 last:border-0 last:pb-0">
                                        <dt class="meta-label">{{ $label }}</dt>
                                        <dd class="mt-1 font-medium text-text">{{ $value }}</dd>
                                    </div>
                                @endif
                            @endforeach
                        </dl>
                    </div>

                    @if ($related->isNotEmpty())
                        <div class="panel">
                            <p class="meta-label mb-4">{{ __('Related recognitions') }}</p>

                            <ul class="space-y-4">
                                @foreach ($related as $other)
                                    <li>
                                        <a href="{{ route('achievements.show', $other) }}" class="group block">
                                            <p class="text-sm font-medium text-text transition group-hover:text-text-brand">{{ $other->title }}</p>
                                            @if ($other->achieved_on)
                                                <p class="meta-label mt-1">{{ $other->achieved_on->format('M Y') }}</p>
                                            @endif
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                </div>
            </aside>
        </div>
    </section>
@endsection