@extends('layouts.app')

@section('title', $achievement->title . ' - LPTA Achievements')

@section('content')

{{-- ── Page Hero ─────────────────────────────────────────────────────────── --}}
@php
    $medalColor = match($achievement->medal_type) {
        'gold'   => '#f0c040',
        'silver' => '#b4bcc4',
        'bronze' => '#cd7f32',
        default  => '#1a2e5a',
    };
    $medalEmoji = match($achievement->medal_type) {
        'gold'   => '🥇',
        'silver' => '🥈',
        'bronze' => '🥉',
        default  => '🏅',
    };
@endphp

<section style="background: linear-gradient(135deg, var(--blue) 0%, #0d1f45 100%); padding: 120px 0 70px; color: var(--white); position: relative; overflow: hidden;">
    <div style="position: absolute; inset: 0; opacity: 0.05; background-image: repeating-linear-gradient(45deg, #fff 0, #fff 1px, transparent 0, transparent 50%); background-size: 20px 20px;"></div>
    <div class="container" style="position: relative; z-index: 2;">
        {{-- Breadcrumb --}}
        <nav style="font-size: 0.82rem; color: rgba(255,255,255,0.6); margin-bottom: 24px;">
            <a href="{{ route('home') }}" style="color: rgba(255,255,255,0.6); text-decoration: none;">Home</a>
            <span style="margin: 0 8px;">/</span>
            <a href="{{ route('achievements') }}" style="color: rgba(255,255,255,0.6); text-decoration: none;">Achievements</a>
            <span style="margin: 0 8px;">/</span>
            <span style="color: var(--gold-light);">{{ Str::limit($achievement->title, 40) }}</span>
        </nav>

        <div style="display: flex; align-items: flex-start; gap: 40px; flex-wrap: wrap;">
            {{-- Medal Icon --}}
            <div style="font-size: 7rem; line-height: 1; flex-shrink: 0; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.4));">
                {{ $medalEmoji }}
            </div>
            <div style="flex: 1; min-width: 280px;">
                <span style="display: inline-block; background: {{ $medalColor }}22; color: {{ $medalColor }}; border: 1px solid {{ $medalColor }}55; padding: 4px 14px; border-radius: 20px; font-size: 0.78rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 14px;">
                    {{ ucfirst($achievement->medal_type ?? 'Medal') }} · {{ ucfirst($achievement->type) }}
                </span>
                <h1 style="font-family: 'Oswald', sans-serif; font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 700; line-height: 1.2; margin-bottom: 16px;">
                    {{ $achievement->title }}
                </h1>
                <div style="display: flex; gap: 24px; flex-wrap: wrap; font-size: 0.9rem; color: rgba(255,255,255,0.75);">
                    <span><i class="fas fa-user" style="color: var(--gold-light); margin-right: 6px;"></i> {{ $achievement->player_name }}</span>
                    <span><i class="fas fa-calendar-alt" style="color: var(--gold-light); margin-right: 6px;"></i> {{ $achievement->achievement_date->format('F d, Y') }}</span>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- ── Main Content ──────────────────────────────────────────────────────── --}}
<section class="section-pad" style="background: var(--off-white);">
    <div class="container">
        <div style="display: grid; grid-template-columns: 1fr 360px; gap: 36px; align-items: start;">

            {{-- Left: Detail Card --}}
            <div>
                <div style="background: var(--white); border-radius: var(--radius); border: 1px solid var(--gray-200); box-shadow: var(--shadow-sm); overflow: hidden;">
                    {{-- Photo if available --}}
                    @if($achievement->photo)
                    <div style="width: 100%; max-height: 380px; overflow: hidden;">
                        <img src="{{ asset($achievement->photo) }}" alt="{{ $achievement->title }}"
                             style="width: 100%; height: 380px; object-fit: cover;">
                    </div>
                    @endif

                    <div style="padding: 36px;">
                        <h2 style="font-family: 'Oswald', sans-serif; font-size: 1.4rem; font-weight: 600; color: var(--blue); margin-bottom: 20px; padding-bottom: 16px; border-bottom: 2px solid var(--gray-100);">
                            <i class="fas fa-star" style="color: var(--gold); margin-right: 8px;"></i> Achievement Details
                        </h2>

                        @if($achievement->description)
                        <p style="font-size: 1rem; color: var(--gray-700); line-height: 1.9; margin-bottom: 28px;">
                            {{ $achievement->description }}
                        </p>
                        @else
                        <p style="font-size: 1rem; color: var(--gray-500); font-style: italic; margin-bottom: 28px;">
                            No additional description provided for this achievement.
                        </p>
                        @endif

                        {{-- Info Grid --}}
                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
                            <div style="background: var(--off-white); border-radius: 10px; padding: 18px;">
                                <div style="font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gray-500); font-weight: 700; margin-bottom: 6px;">Athlete</div>
                                <div style="font-weight: 700; color: var(--blue); font-size: 1rem;">{{ $achievement->player_name }}</div>
                            </div>
                            <div style="background: var(--off-white); border-radius: 10px; padding: 18px;">
                                <div style="font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gray-500); font-weight: 700; margin-bottom: 6px;">Medal</div>
                                <div style="font-weight: 700; color: var(--blue); font-size: 1rem;">
                                    {{ $medalEmoji }} {{ ucfirst($achievement->medal_type ?? 'N/A') }}
                                </div>
                            </div>
                            <div style="background: var(--off-white); border-radius: 10px; padding: 18px;">
                                <div style="font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gray-500); font-weight: 700; margin-bottom: 6px;">Competition Level</div>
                                <div style="font-weight: 700; color: var(--blue); font-size: 1rem;">{{ ucfirst($achievement->type) }}</div>
                            </div>
                            <div style="background: var(--off-white); border-radius: 10px; padding: 18px;">
                                <div style="font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gray-500); font-weight: 700; margin-bottom: 6px;">Date</div>
                                <div style="font-weight: 700; color: var(--blue); font-size: 1rem;">{{ $achievement->achievement_date->format('M d, Y') }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Back Button --}}
                <div style="margin-top: 24px;">
                    <a href="{{ route('achievements') }}"
                       style="display: inline-flex; align-items: center; gap: 8px; background: var(--blue); color: var(--white); padding: 12px 24px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: var(--transition);"
                       onmouseenter="this.style.background='var(--blue-light)'"
                       onmouseleave="this.style.background='var(--blue)'">
                        <i class="fas fa-arrow-left"></i> Back to All Achievements
                    </a>
                </div>
            </div>

            {{-- Right: Sidebar --}}
            <div style="display: flex; flex-direction: column; gap: 24px;">

                {{-- Medal Badge --}}
                <div style="background: linear-gradient(135deg, var(--blue) 0%, var(--blue-mid) 100%); border-radius: var(--radius); padding: 30px; text-align: center; color: var(--white); box-shadow: var(--shadow-md);">
                    <div style="font-size: 5rem; margin-bottom: 12px;">{{ $medalEmoji }}</div>
                    <div style="font-family: 'Oswald', sans-serif; font-size: 1.6rem; font-weight: 700; color: {{ $medalColor }}; text-transform: uppercase; letter-spacing: 1px;">
                        {{ ucfirst($achievement->medal_type ?? 'Medal') }}
                    </div>
                    <div style="font-size: 0.85rem; color: rgba(255,255,255,0.7); margin-top: 4px;">{{ ucfirst($achievement->type) }} Achievement</div>
                    <div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.15); font-size: 0.82rem; color: rgba(255,255,255,0.6);">
                        <i class="fas fa-calendar-check" style="margin-right: 5px;"></i> {{ $achievement->achievement_date->format('F Y') }}
                    </div>
                </div>

                {{-- Related Achievements --}}
                @if($related->count() > 0)
                <div style="background: var(--white); border-radius: var(--radius); border: 1px solid var(--gray-200); box-shadow: var(--shadow-sm); overflow: hidden;">
                    <div style="padding: 20px 24px; border-bottom: 1px solid var(--gray-100);">
                        <h3 style="font-family: 'Oswald', sans-serif; font-size: 1.1rem; font-weight: 600; color: var(--blue);">
                            <i class="fas fa-trophy" style="color: var(--gold); margin-right: 8px;"></i> Related Achievements
                        </h3>
                    </div>
                    @foreach($related as $rel)
                    <a href="{{ route('achievements.show', $rel) }}" style="display: flex; align-items: center; gap: 14px; padding: 16px 24px; border-bottom: 1px solid var(--gray-100); text-decoration: none; color: inherit; transition: var(--transition);"
                       onmouseenter="this.style.background='var(--off-white)'"
                       onmouseleave="this.style.background='transparent'">
                        <div style="font-size: 2rem; flex-shrink: 0;">
                            @if($rel->medal_type === 'gold') 🥇
                            @elseif($rel->medal_type === 'silver') 🥈
                            @elseif($rel->medal_type === 'bronze') 🥉
                            @else 🏅
                            @endif
                        </div>
                        <div style="flex: 1; min-width: 0;">
                            <div style="font-weight: 600; font-size: 0.88rem; color: var(--blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ $rel->title }}</div>
                            <div style="font-size: 0.78rem; color: var(--gray-500); margin-top: 2px;">{{ $rel->player_name }} · {{ $rel->achievement_date->format('Y') }}</div>
                        </div>
                        <i class="fas fa-chevron-right" style="font-size: 0.7rem; color: var(--gray-500); flex-shrink: 0;"></i>
                    </a>
                    @endforeach
                </div>
                @endif

                {{-- CTA --}}
                <div style="background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%); border-radius: var(--radius); padding: 28px; text-align: center; color: var(--white);">
                    <div style="font-size: 2rem; margin-bottom: 10px;">🥋</div>
                    <div style="font-family: 'Oswald', sans-serif; font-size: 1.1rem; font-weight: 600; margin-bottom: 8px;">Join LPTA Today</div>
                    <p style="font-size: 0.82rem; color: rgba(255,255,255,0.8); margin-bottom: 18px; line-height: 1.5;">Become part of a championship-winning tradition.</p>
                    <a href="{{ route('register') }}"
                       style="display: inline-block; background: var(--white); color: var(--red); padding: 10px 22px; border-radius: 8px; font-size: 0.85rem; font-weight: 700; text-decoration: none;">
                        Register Now
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- Responsive --}}
<style>
@media (max-width: 768px) {
    .ach-detail-grid { grid-template-columns: 1fr !important; }
}
</style>
<script>
document.querySelectorAll('.ach-detail-grid').forEach(function(el){
    if(window.innerWidth <= 768) el.style.gridTemplateColumns = '1fr';
});
</script>

@endsection
