@extends('layouts.home')

@section('content')
<div class="py-10 bg-white">
    <h1 class="text-3xl font-bold text-gray-800 text-center mb-10">Liste des Profiles</h1>

    <div class="max-w-5xl mx-auto space-y-8">
        @foreach ($candidates as $candidat)
            <div class="flex flex-col md:flex-row items-start md:items-center space-y-4 md:space-y-0 md:space-x-6 border-b pb-6">

                {{-- Photo --}}
                <div class="w-20 h-20 rounded-full overflow-hidden border border-gray-300">
                    <img src="{{ asset('storage/' . $candidat->profile_picture) }}" 
                         alt="Photo de {{ $candidat->user->name }}" 
                         class="w-full h-full object-cover">
                </div>

                {{-- Infos candidat --}}
                <div class="flex-1">
                    <div class="flex justify-between items-center">
                        <h2 class="text-lg font-semibold text-gray-900">{{ $candidat->first_name }} {{ $candidat->last_name }}</h2>

                        {{-- Type de travail + Prix/h --}}
                        {{-- <div class="flex items-center space-x-2">
                            <span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2 py-1 rounded-full">
                                {{ $candidat->type_travail ?? 'temps plein' }}
                            </span>
                            <span class="text-gray-800 font-bold text-sm">
                                {{ $candidat->tarif ?? '$50' }}/hr
                            </span>
                        </div> --}}
                    </div>

                    {{-- Email et téléphone --}}
                    <p class="text-gray-600 text-sm mt-1">
                        {{ $candidat->user->email }} | {{ $candidat->phone }}
                    </p>

                    {{-- À propos --}}
                    <p class="text-gray-700 text-sm mt-2">
                        {{ Str::limit($candidat->description, 120) }}
                    </p>

                    {{-- Compétences --}}
                    <div class="mt-3">
                        <div class="flex flex-wrap items-center">
                            @php
                                $compCount = $candidat->competences->count();
                                $maxToShow = 8;
                            @endphp

                            @foreach ($candidat->competences->take($maxToShow) as $competence)
                                <span class="bg-gray-100 text-gray-800 text-xs font-medium mr-2 mb-2 px-2 py-1 rounded">
                                    {{ $competence->nom }}
                                </span>
                            @endforeach

                            @if ($compCount > $maxToShow)
                                <span class="bg-blue-500 text-white text-xs font-medium mr-2 mb-2 px-2 py-1 rounded">
                                    +{{ $compCount - $maxToShow }}
                                </span>
                            @endif
                        </div>
                    </div>

                    {{-- Langues --}}
                    <div class="mt-1">
                        <div class="flex flex-wrap items-center">
                            @foreach ($candidat->langues as $langue)
                                <span class="bg-green-100 text-green-800 text-xs font-medium mr-2 mb-2 px-2 py-1 rounded">
                                    {{ $langue->nom }}
                                </span>
                            @endforeach
                        </div>
                    </div>

                    {{-- Lien profil --}}
                    <a href="#" class="inline-block mt-2 text-blue-500 hover:underline text-sm">
                        Voir le profil complet
                    </a>
                </div>
            </div>
        @endforeach
    </div>
</div>
@endsection