@extends('layouts.app')

@section('title', $trainer->name.' — مربی تنیس در تهران')
@section('meta_description', \Illuminate\Support\Str::limit(strip_tags($trainer->bio ?? ('معرفی '.$trainer->name.' مربی تنیس در تهران')), 150))

@push('meta')
    <meta property="og:type" content="profile">
    <meta property="og:title" content="{{ $trainer->name }} — {{ config('app.name') }}">
    <meta property="og:description" content="@yield('meta_description')">
    <meta property="og:url" content="{{ route('trainers.show', $trainer) }}">
    @if ($trainer->photoUrl())
        <meta property="og:image" content="{{ $trainer->photoUrl() }}">
    @endif
@endpush

@section('content')
    <nav class="type-meta mb-4" aria-label="مسیر صفحه">
        <a href="{{ route('trainers.index') }}#coaches" class="transition hover:text-[var(--color-tennis)]">مربیان</a>
        <span class="mx-2 text-[var(--color-disabled)]" aria-hidden="true">/</span>
        <span class="text-[var(--color-text)]">{{ $trainer->name }}</span>
    </nav>

    <div class="grid gap-4 lg:grid-cols-3">
        <aside class="space-y-4 lg:col-span-1">
            <div class="site-card overflow-hidden">
                <div class="flex aspect-square items-center justify-center overflow-hidden bg-[var(--color-surface)]">
                    @if ($trainer->photoUrl())
                        <img src="{{ $trainer->photoUrl() }}" alt="{{ $trainer->name }}"
                             class="h-full w-full object-cover" fetchpriority="high">
                    @else
                        <x-icons.tennis class="size-24 text-[var(--color-tennis)]/50" />
                    @endif
                </div>
                <div class="p-4">
                    <div class="flex flex-wrap items-center gap-2">
                        <h1 class="type-h3">{{ $trainer->name }}</h1>
                        @if ($trainer->is_featured)
                            <span class="site-badge-featured">Featured</span>
                        @endif
                    </div>
                    <dl class="mt-4 space-y-2 text-sm">
                        @if ($trainer->gender_label)
                            <div class="flex justify-between gap-4">
                                <dt class="text-[var(--color-text-secondary)]">جنسیت</dt>
                                <dd class="font-medium text-[var(--color-text)]">{{ $trainer->gender_label }}</dd>
                            </div>
                        @endif
                        @if ($trainer->experience_years)
                            <div class="flex justify-between gap-4">
                                <dt class="text-[var(--color-text-secondary)]">سابقه</dt>
                                <dd class="font-medium text-[var(--color-text)]">{{ fa_digits($trainer->experience_years) }} سال</dd>
                            </div>
                        @endif
                        @if ($trainer->fee)
                            <div class="flex justify-between gap-4">
                                <dt class="text-[var(--color-text-secondary)]">شهریه</dt>
                                <dd class="font-medium text-[var(--color-text)]">{{ $trainer->fee }}</dd>
                            </div>
                        @endif
                    </dl>
                    @if ($trainer->updated_at)
                        <p class="type-caption mt-4 border-t border-[var(--color-border)] pt-4">
                            آخرین به‌روزرسانی: {{ fa_date($trainer->updated_at) }}
                        </p>
                    @endif
                </div>
            </div>

            <div class="site-card p-4">
                <h2 class="type-card-title mb-3">راه‌های ارتباطی</h2>
                <x-contact-links :trainer="$trainer" />
            </div>
        </aside>

        <div class="space-y-4 lg:col-span-2">
            @if ($trainer->bio)
                <section class="site-card p-4">
                    <h2 class="type-card-title mb-2">معرفی</h2>
                    <p class="type-body whitespace-pre-line">{{ $trainer->bio }}</p>
                </section>
            @endif

            <section class="site-card grid gap-4 p-4 sm:grid-cols-2">
                @if (! empty($trainer->region_names))
                    <div>
                        <h3 class="type-card-title mb-2">مناطق فعالیت</h3>
                        <div class="flex flex-wrap gap-1.5">
                            @foreach ($trainer->region_names as $district)
                                <span class="site-badge-neutral">{{ $district }}</span>
                            @endforeach
                        </div>
                    </div>
                @endif

                @if ($trainer->venue_label)
                    <div>
                        <h3 class="type-card-title mb-2">محل تمرین</h3>
                        <p class="type-body">{{ $trainer->venue_label }}</p>
                        @if ($trainer->court?->address)
                            <p class="type-caption mt-1">{{ $trainer->court->address }}</p>
                        @endif
                    </div>
                @endif

                @if (! empty($trainer->availability))
                    <div>
                        <h3 class="type-card-title mb-2">روزهای در دسترس</h3>
                        <div class="flex flex-wrap gap-1.5">
                            @foreach ($trainer->availability as $day)
                                <span class="site-badge-brand">{{ $day }}</span>
                            @endforeach
                        </div>
                    </div>
                @endif

                @if (! empty($trainer->student_preferences))
                    <div>
                        <h3 class="type-card-title mb-2">ترجیحات شاگرد</h3>
                        <div class="flex flex-wrap gap-1.5">
                            @foreach ($trainer->student_preferences as $pref)
                                <span class="site-badge-accent">{{ $pref }}</span>
                            @endforeach
                        </div>
                    </div>
                @endif
            </section>

            <div class="flex flex-wrap gap-3">
                <a href="{{ route('trainers.index') }}#coaches" class="site-btn-secondary">بازگشت به فهرست</a>
                @if ($trainer->whatsappUrl())
                    <a href="{{ $trainer->whatsappUrl() }}" target="_blank" rel="noopener noreferrer" class="site-btn-primary">
                        تماس در WhatsApp
                    </a>
                @elseif ($trainer->phone)
                    <a href="tel:{{ $trainer->phone }}" class="site-btn-primary">تماس تلفنی</a>
                @endif
            </div>
        </div>
    </div>
@endsection