@extends('layouts.home')

@section('content')

<main class="p-4 min-h-screen flex items-center justify-center bg-gradient-to-br"> 
    
    <div class=" mx-auto mt-10 px-6 py-16 bg-white rounded-lg shadow-lg space-x-3">
{{-- <div class="py-10 bg-white"> --}}
    <h1 class="text-3xl font-bold text-gray-800 text-center mb-10">Liste des Profils</h1>

    {{-- Barre de recherche et filtres --}}
    <div class="max-w-7xl mx-auto mb-6 p-4 bg-gray-100 rounded-lg shadow-sm">
        <form method="GET" action="{{ route('cv.index') }}" class="flex flex-col md:flex-row items-center gap-4">
            <input type="text" name="search" value="{{ request('search') }}" 
                placeholder="Rechercher un profil..." 
                class="w-full md:w-2/5 px-4 py-2 border  flex-grow border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-400">
            
            <select name="competence" class="w-full md:w-1/5 px-2 py-2 border border-gray-300 rounded-lg">
                <option value="">Compétences</option>
                @foreach ($allCompetences as $competence)
                    <option value="{{ $competence->nom }}" {{ request('competence') == $competence->nom ? 'selected' : '' }}>
                        {{ $competence->nom }}
                    </option>
                @endforeach
            </select>

            <select name="langue" class="w-full md:w-1/5 px-2 py-2 border border-gray-300 rounded-lg">
                <option value="">Langues</option>
                @foreach ($allLangues as $langue)
                    <option value="{{ $langue->nom }}" {{ request('langue') == $langue->nom ? 'selected' : '' }}>
                        {{ $langue->nom }}
                    </option>
                @endforeach
            </select>
            <select name="domaine" class="border w-full md:w-1/5 px-2 py-2 rounded-md">
                <option value="">Tous domaines</option>
                @foreach ($allDomaines as $domaine)
                    <option value="{{ $domaine }}">{{ $domaine }}</option>
                @endforeach
            </select>

            <button type="submit" class="bg-blue-500 text-white px-2 py-2 rounded-lg hover:bg-blue-600">
                Rechercher
            </button>
        </form>
    </div>

    {{-- Liste des profils --}}
    <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>
                    </div>

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

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

                    {{-- Compétences --}}
                    <div class="mt-3 flex flex-wrap">
                        @foreach ($candidat->competences->take(5) 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 ($candidat->competences->count() > 5)
                            <span class="bg-blue-500 text-white text-xs font-medium px-2 py-1 rounded">
                                +{{ $candidat->competences->count() - 5 }}
                            </span>
                        @endif
                    </div>

                    {{-- Langues --}}
                    <div class="mt-1 flex flex-wrap">
                        @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>

                    {{-- Lien profil --}}
                    <a href="{{ route('candidates.show', $candidat->id) }}" class="inline-block mt-2 text-blue-500 hover:underline text-sm">
                        Voir le profil complet
                    </a>
                </div>
            </div>
        @endforeach
    </div>
    
    {{-- Pagination --}}
    <div class="mt-10 flex justify-center">
        {{ $candidates->links() }}
    </div>
    
</div>
    {{-- </div> --}}
</main>
@endsection