@extends('coach.layouts.app')

@section('title', 'پیشرفت ' . $athlete->user->fullName())

@section('content')
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-xl font-bold">پیشرفت {{ $athlete->user->fullName() }}</h1>
        <a href="{{ route('coach.athletes.assessments.create', $athlete) }}" class="bg-gray-900 text-white text-sm px-4 py-2 rounded-lg">+ ثبت ارزیابی جدید</a>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
        <div class="bg-white rounded-xl shadow-sm p-4">
            <h2 class="font-semibold text-sm mb-2">روند وزن (kg)</h2>
            <x-line-chart :points="$weightSeries" color="#2563eb" />
        </div>
        <div class="bg-white rounded-xl shadow-sm p-4">
            <h2 class="font-semibold text-sm mb-2">روند BMI</h2>
            <x-line-chart :points="$bmiSeries" color="#16a34a" />
        </div>
        <div class="bg-white rounded-xl shadow-sm p-4">
            <h2 class="font-semibold text-sm mb-2">روند درصد چربی</h2>
            <x-line-chart :points="$bodyFatSeries" color="#dc2626" unit="%" />
        </div>
    </div>

    @if(count($photoPairs))
        <div class="bg-white rounded-xl shadow-sm p-4 mb-8">
            <h2 class="font-semibold mb-4">مقایسه‌ی تصویری (قبل / بعد)</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                @foreach($photoPairs as $angle => $pair)
                    <div>
                        <div class="text-xs text-gray-500 mb-2">{{ $pair['label'] }}</div>
                        <div class="grid grid-cols-2 gap-2">
                            <a href="{{ route('photos.show', $pair['before']) }}" target="_blank" class="block border rounded-lg overflow-hidden text-center">
                                <div class="bg-gray-100 h-32 flex items-center justify-center">📷</div>
                                <div class="text-xs py-1 text-gray-500">قبل</div>
                            </a>
                            <a href="{{ route('photos.show', $pair['after']) }}" target="_blank" class="block border rounded-lg overflow-hidden text-center">
                                <div class="bg-gray-100 h-32 flex items-center justify-center">📷</div>
                                <div class="text-xs py-1 text-gray-500">بعد</div>
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endif

    <h2 class="font-semibold mb-3">تاریخچه ارزیابی‌ها</h2>
    <div class="space-y-3">
        @foreach($assessments as $assessment)
            <a href="{{ route('coach.assessments.show', $assessment) }}" class="block bg-white rounded-xl shadow-sm p-4 hover:shadow-md transition">
                <div class="flex items-center justify-between">
                    <div>
                        <div class="font-medium">
                            {{ $assessment->is_initial ? 'ارزیابی اولیه' : 'ارزیابی' }}
                            — {{ verta($assessment->assessment_date)->format('Y/m/d') }}
                        </div>
                        <div class="text-xs text-gray-400">
                            وزن: {{ $assessment->weight_kg }} · BMI: {{ $assessment->bmi }}
                            @if($assessment->body_fat_percentage) · چربی: {{ $assessment->body_fat_percentage }}% @endif
                        </div>
                    </div>
                    <span class="text-blue-600 text-sm">مشاهده →</span>
                </div>
            </a>
        @endforeach
    </div>
@endsection