@extends('layouts.admin')

@section('title', $achievement->title . ' - Achievement Detail')

@section('content')
<div class="dashboard-header" style="margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center;">
    <div>
        <nav style="font-size:0.8rem; color:var(--text-muted); margin-bottom:4px;">
            <a href="{{ route('admin.achievements.index') }}" style="color:var(--text-muted); text-decoration:none;">Achievements</a>
            <span style="margin:0 6px;">/</span>
            <span style="color:var(--primary); font-weight:600;">Detail</span>
        </nav>
        <h1 style="font-family:'Oswald',sans-serif; font-size:2rem; color:var(--primary); margin:0;">Achievement Detail</h1>
    </div>
    <div style="display:flex; gap:10px;">
        <a href="{{ route('admin.achievements.edit', $achievement->id) }}" class="btn btn-primary">
            <i class="fas fa-edit"></i> Edit
        </a>
        <a href="{{ route('admin.achievements.index') }}" class="btn btn-outline">
            <i class="fas fa-arrow-left"></i> Back
        </a>
    </div>
</div>

<div style="display:grid; grid-template-columns:1fr 280px; gap:24px; align-items:start;">

    <!-- Main Card -->
    <div class="admin-card" style="margin-bottom:0; overflow:hidden;">
        @if($achievement->photo)
        <div style="height:260px; overflow:hidden;">
            <img src="{{ asset($achievement->photo) }}" alt="{{ $achievement->title }}"
                 style="width:100%; height:100%; object-fit:cover;">
        </div>
        @endif

        <div class="admin-card-body">
            <!-- Medal & Type badges -->
            <div style="display:flex; align-items:center; gap:12px; margin-bottom:20px;">
                <span style="font-size:3rem; line-height:1;">
                    @if($achievement->medal_type === 'gold') 🥇
                    @elseif($achievement->medal_type === 'silver') 🥈
                    @elseif($achievement->medal_type === 'bronze') 🥉
                    @else 🏅
                    @endif
                </span>
                <div>
                    <h2 style="font-family:'Oswald',sans-serif; font-size:1.6rem; color:var(--primary); margin:0 0 6px;">
                        {{ $achievement->title }}
                    </h2>
                    <div style="display:flex; gap:8px; flex-wrap:wrap;">
                        <span class="badge badge-info" style="text-transform:capitalize;">{{ ucfirst($achievement->medal_type ?? 'Medal') }}</span>
                        <span class="badge badge-success" style="text-transform:capitalize;">{{ ucfirst($achievement->type) }}</span>
                    </div>
                </div>
            </div>

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

            @if($achievement->description)
            <div style="border-top:1px solid var(--border-color); padding-top:20px;">
                <div style="font-size:0.8rem; text-transform:uppercase; letter-spacing:1.5px; color:var(--text-muted); font-weight:700; margin-bottom:10px;">Description</div>
                <p style="color:var(--text-main); line-height:1.8; font-size:0.95rem;">{{ $achievement->description }}</p>
            </div>
            @endif
        </div>
    </div>

    <!-- Actions Sidebar -->
    <div style="display:flex; flex-direction:column; gap:16px;">
        <div class="admin-card" style="margin-bottom:0;">
            <div class="admin-card-body">
                <a href="{{ route('admin.achievements.edit', $achievement->id) }}" class="btn btn-primary" style="width:100%; justify-content:center; padding:12px; margin-bottom:12px;">
                    <i class="fas fa-edit"></i> Edit Achievement
                </a>
                <a href="{{ route('admin.achievements.index') }}" class="btn btn-outline" style="width:100%; justify-content:center; padding:12px; margin-bottom:12px;">
                    <i class="fas fa-list"></i> All Achievements
                </a>
                <hr style="border:none; border-top:1px solid var(--border-color); margin:4px 0 12px;">
                <form action="{{ route('admin.achievements.destroy', $achievement->id) }}" method="POST"
                      onsubmit="return confirm('Are you sure you want to delete this achievement? This cannot be undone.');">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger" style="width:100%; justify-content:center; padding:12px;">
                        <i class="fas fa-trash"></i> Delete Achievement
                    </button>
                </form>
            </div>
        </div>

        <div class="admin-card" style="margin-bottom:0;">
            <div class="admin-card-header">
                <span class="admin-card-title" style="font-size:0.85rem;">Record Info</span>
            </div>
            <div class="admin-card-body">
                <div style="font-size:0.82rem; color:var(--text-muted); margin-bottom:8px;">
                    <i class="fas fa-calendar-plus" style="margin-right:6px;"></i>
                    Created: {{ $achievement->created_at->format('M d, Y') }}
                </div>
                <div style="font-size:0.82rem; color:var(--text-muted);">
                    <i class="fas fa-calendar-edit" style="margin-right:6px;"></i>
                    Updated: {{ $achievement->updated_at->format('M d, Y') }}
                </div>
            </div>
        </div>
    </div>

</div>
@endsection
