@extends('layouts.public')

@section('title', 'مربیان')

@section('content')
    <div class="mb-6">
        <h1 class="text-xl font-bold text-ink-950">مربیان</h1>
        <p class="text-sm text-slate-500 mt-1">مربی مناسب هدف خودتان را پیدا کنید</p>
    </div>

    <form method="GET" class="flex flex-wrap gap-2 mb-6">
        <select name="goal" class="field-input w-auto text-sm py-2">
            <option value="">همه تخصص‌ها</option>
            @foreach($goals as $goal)
                <option value="{{ $goal->id }}" @selected(request('goal') == $goal->id)>{{ $goal->title }}</option>
            @endforeach
        </select>
        <input type="number" name="min_experience" value="{{ request('min_experience') }}" placeholder="حداقل سابقه (سال)"
               class="field-input w-40 py-2">
        <input type="number" name="max_price" value="{{ request('max_price') }}" placeholder="حداکثر قیمت (تومان)"
               class="field-input w-44 py-2">
        <button class="btn-secondary">اعمال فیلتر</button>
    </form>

    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
        @forelse($coaches as $coach)
            <a href="{{ route('coaches.show', $coach) }}" class="card-pad block hover:shadow-none hover:border-ember-200 transition-all">
                <div class="flex items-center gap-3 mb-3">
                    @if($coach->photo_path)
                        <img src="{{ Storage::disk('public')->url($coach->photo_path) }}" class="w-12 h-12 rounded-full object-cover">
                    @else
                        <div class="w-12 h-12 rounded-full bg-ink-950 text-white flex items-center justify-center font-semibold">
                            {{ mb_substr($coach->user->first_name, 0, 1) }}
                        </div>
                    @endif
                    <div class="min-w-0">
                        <div class="font-medium text-ink-950 truncate">{{ $coach->user->fullName() }}</div>
                        <div class="text-xs text-slate-400">{{ $coach->experience_years ?? 0 }} سال سابقه</div>
                    </div>
                </div>
                <div class="flex flex-wrap gap-1.5 mb-3">
                    @foreach($coach->goals->take(3) as $goal)
                        <span class="badge-slate">{{ $goal->title }}</span>
                    @endforeach
                </div>
                @if($coach->program_price)
                    <div class="text-sm font-medium text-ink-900">از {{ number_format($coach->program_price) }} تومان</div>
                @endif
            </a>
        @empty
            <p class="text-slate-400 col-span-full text-center py-16">مربی‌ای با این فیلتر یافت نشد.</p>
        @endforelse
    </div>

    <div class="mt-6">{{ $coaches->links() }}</div>
@endsection