@extends('layouts.home')
@section('content')
    <!-- Hero Section -->
    <section class="relative bg-cover bg-center h-[300px] flex items-center justify-center">
        {{-- style="background-image: url('{{ asset('storage/' . 'logo.png') }}');" class="h-8 w-auto"> --}}
        <div class="absolute inset-0 bg-blue-100 bg-opacity-70"></div>
        <div class="text-center z-10">
            <h1 class="text-4xl font-bold mb-4">Trouvez les meilleures offres d'emploi et appels d'offres</h1>
            <p class="text-xl mb-8">Connectez-vous aux meilleures entreprises et saisissez les opportunités adaptées à vos
                compétences.</p>
        </div>
    </section>

    <!-- Main Content -->
    <main class="p-2">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Offres d'emploi -->
            <section class="bg-white p-6 rounded-2xl shadow-sm border border-gray-200 flex flex-col min-h-full hover:shadow-lg transition">
                <!-- Titre -->
                <div class="flex items-center justify-center mb-6 relative">
                    <div class="absolute w-10 h-1 bg-blue-500 left-1/2 transform -translate-x-1/2 -bottom-1 rounded-full"></div>
                    <h2 class="text-2xl font-bold text-gray-800 text-center">
                        <span class="text-blue-600">Offres</span> d'emploi
                    </h2>
                </div>
        
                <div class="space-y-6">
                    @foreach ($offreE->take(3) as $offre)
                        <a href="{{ route('candidats.show', $offre->id) }}" class="block group">
                            <div class="bg-white rounded-xl shadow-md p-5 border hover:border-blue-500 transition">
                                <!-- Titre Offre -->
                                <div class="flex justify-between items-center mb-2">
                                    <h3 class="text-lg font-semibold text-gray-800 group-hover:text-blue-600">{{ $offre->titre }}</h3>
                                    <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded-full">
                                        {{ $offre->type_contrat ?? '' }}
                                    </span>
                                </div>
                                <!-- Détails -->
                                <div class="text-gray-600 text-sm space-y-1 space-x-2 mb-3">
                                    <i class="fas fa-building text-blue-500 mr-1"></i>{{ $offre->entreprise->nom }}
                                    <i class="fas fa-map-marker-alt text-green-500 mr-1"></i>{{ $offre->lieu ?? 'Non spécifié' }}
                                    <i class="fas fa-calendar-alt text-red-600 mr-1"></i>{{ \Carbon\Carbon::parse($offre->date_limite)->format('d - M') }}
                                </div>
                                <!-- Description -->
                                <p class="text-gray-700 text-sm mb-3">{{ Str::limit($offre->description, 120, '...') }}</p>
                                <!-- Skills -->
                                <div class="flex flex-wrap gap-2 mb-4">
                                    @foreach ($offre->competences ?? ['Non spécifié'] as $skill)
                                        <span class="bg-gray-200 text-gray-700 px-2 py-1 rounded text-xs">{{ $skill->nom }}</span>
                                    @endforeach
                                </div>
                                <!-- Footer -->
                                <div class="flex justify-between items-center text-sm text-gray-600">
                                    <div class="flex items-center gap-1">
                                        <i class="fas fa-eye"></i><span>{{ $offre->views }} vues</span>
                                    </div>
                                    <span class="text-blue-600 font-medium hover:underline">Voir Détails →</span>
                                </div>
                            </div>
                        </a>
                    @endforeach
        
                    @if ($offreE->count() > 3)
                        <div class="text-center">
                            <a href="{{ route('jobs.index') }}" class="text-blue-600 hover:text-black underline transition">
                                Voir plus d'offres
                            </a>
                        </div>
                    @endif

                </div>
            </section>
        
            <!-- Appels d'offres -->
            <section class="bg-white p-6 rounded-2xl shadow-sm border border-gray-200 flex flex-col min-h-full hover:shadow-lg transition">
                <!-- Titre -->
                <div class="flex items-center justify-center mb-6 relative">
                    <div class="absolute w-10 h-1 bg-blue-500 left-1/2 transform -translate-x-1/2 -bottom-1 rounded-full"></div>
                    <h2 class="text-2xl font-bold text-gray-800 text-center">
                        Appels <span class="text-blue-600">d'offres</span>
                    </h2>
                </div>
        
                <div class="space-y-6">
                    @forelse ($offreA->take(3) as $offre)
                        <a href="{{ route('appels.show', $offre->id) }}" class="block group">
                            <div class="bg-white rounded-xl shadow-md p-5 border hover:border-blue-500 transition">
                                <div class="flex justify-between items-center mb-2">
                                    <h3 class="text-lg font-semibold text-gray-800 group-hover:text-blue-600">{{ $offre->titre }}</h3>
                                </div>
                                <div class="text-gray-600 text-sm flex space-x-4 items-center mb-3">
                                    <div class="flex items-center">
                                        <i class="fas fa-building text-blue-500 mr-1"></i>{{ $offre->entreprise->nom }}
                                    </div>
                                    <div class="flex items-center">
                                        <i class="fas fa-map-marker-alt text-green-500 mr-1"></i>{{ $offre->lieu ?? 'Non spécifié' }}
                                    </div>
                                    <div class="flex items-center">
                                        <i class="fas fa-calendar-alt text-red-600 mr-1"></i>{{ \Carbon\Carbon::parse($offre->date_limite)->format('d - M') }}
                                    </div>
                                </div>
                                
                                <p class="text-gray-700 text-sm mb-3">{{ Str::limit($offre->description, 250, '...') }}</p>
                                <div class="flex justify-between items-center text-sm text-gray-600">
                                    <span>Publié {{ $offre->created_at->diffForHumans() }}</span>
                                    <span class="text-blue-600 font-medium hover:underline">Voir Détails →</span>
                                </div>
                            </div>
                        </a>
                    @empty
                        <p class="text-center text-gray-500">Aucune offre disponible pour le moment.</p>
                    @endforelse
        
                    @if ($offreA->count() > 3)
                        <div class="text-center">
                            <a href="{{ route('appels.index') }}" class="text-blue-600 hover:text-black underline transition">
                                Voir plus d'offres
                            </a>
                        </div>
                    @endif
                </div>
            </section>
        
            <!-- Annonce publiée -->
            <section class="bg-white p-6 rounded-2xl shadow-sm border border-gray-200 flex flex-col min-h-full hover:shadow-lg transition">
                <!-- Titre -->
                <div class="flex items-center justify-center mb-6 relative">
                    <div class="absolute w-10 h-1 bg-blue-500 left-1/2 transform -translate-x-1/2 -bottom-1 rounded-full"></div>
                    <h2 class="text-2xl font-bold text-gray-800 text-center">
                        <span class="text-blue-600">Avis  </span><span class="text-gray-500">&</span> 
                        <span class="text-blue-600">Information</span>
                    </h2>
                </div>
        
                <div class="space-y-6">
                    @foreach ($annonces->take(3) as $annonce)
                        <a href="#" class="block group">
                            <div class="bg-white rounded-xl shadow-md p-7 border hover:border-blue-500 transition">
                                <div class="flex justify-between items-center mb-2">
                                    <h3 class="text-lg font-semibold text-gray-800 group-hover:text-blue-600">{{ $annonce->titre }}</h3>
                                    <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded-full">
                                        {{ $annonce->type ?? 'N/A' }}
                                    </span>
                                </div>
                                <p class="text-gray-700 text-sm mb-3">{{ Str::limit($annonce->description, 370, '...') }}</p>
                                <div class="flex justify-between text-xs text-gray-500">
                                    <span>Publié {{ $annonce->created_at->diffForHumans() }}</span>
                                </div>
                            </div>
                        </a>
                    @endforeach
                    @if ($offreA->count() > 3)
                        <div class="text-center">
                            <a href="{{ route('annonces.index') }}" class="text-blue-600 hover:text-black underline transition">
                                Voir plus d'annonces
                            </a>
                        </div>
                    @endif
                </div>
            </section>
        </div>
        
        <section class="py-12 bg-gradient-to-b from-white to-gray-100">
            <div class="max-w-7xl mx-auto px-1 py-2 text-center">
                <h2 class="text-3xl font-extrabold text-gray-900 mb-4">Nos Candidats</h2>
        
                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
                    @foreach ($candidates->take(4) as $candidate)
                        <div
                            class="rounded-xl p-6 bg-white/30 backdrop-blur-md border border-gray-200 shadow-sm transition-transform transform hover:-translate-y-2 hover:shadow-lg">
                            <!-- Image du candidat -->
                            <img src="{{ asset('storage/' . $candidate->profile_picture) }}"
                                alt="{{ $candidate->first_name }}"
                                class="w-20 h-20 rounded-full object-cover border-2 border-gray-500 mx-auto">
        
                            <!-- Infos du candidat -->
                            <h3 class="mt-4 text-lm font-semibold text-gray-800">
                                {{ $candidate->first_name }} {{ Str::limit($candidate->last_name) }}
                            </h3>
                            <p class="text-sm text-gray-500 mt-1">
                                {{ $candidate->domaine }}
                            </p>
        
                            <!-- Bouton Voir Profil -->
                            <a href="{{ route('candidates.show', $candidate->id) }}"
                                class="mt-4 inline-block text-sm text-blue-600 font-medium hover:underline">
                                Voir Profil →
                            </a>
                        </div>
                    @endforeach
                </div>
        
                <!-- Lien Voir tout -->
                <div class="mt-10">
                    <a href="{{ route('cv.index') }}"
                        class="inline-block text-blue-700 font-semibold text-lg hover:underline">
                        Voir tous les profils →
                    </a>
                </div>
            </div>
        </section>
        


        <section class="py-12 bg-white">
            <div class="max-w-7xl mx-auto px-4 text-center">
                <h2 class="text-3xl font-extrabold text-gray-900 mb-12">Entreprises Partenaires</h2>
        
                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-3 gap-10">
                    @foreach ($entreprises->take(3) as $entreprise)
                        <a href="#" class="block group">
                            <div class="bg-gray-50 border border-gray-200 rounded-xl p-6 flex flex-col items-center shadow-sm transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                                <!-- Logo de l'entreprise -->
                                <img src="{{ asset('storage/' . $entreprise->logo) }}" alt="{{ $entreprise->nom }}"
                                     class="w-24 h-24 rounded-full object-cover mb-4 border-2 border-blue-500">
        
                                <!-- Infos -->
                                <h3 class="text-lg font-semibold text-gray-800 group-hover:text-blue-600">
                                    {{ $entreprise->nom }}
                                </h3>
                                <p class="text-sm text-gray-500 mt-1">
                                    {{ $entreprise->wilaya->nom }}, {{ $entreprise->moughatta->nom }}
                                </p>
                                <p class="text-gray-600 text-sm mt-2 italic">
                                    "{{ Str::limit($entreprise->description, 40, '...') }}"
                                </p>
                                <span class="mt-3 inline-block text-sm font-medium text-blue-600 bg-blue-50 px-3 py-1 rounded-full">
                                    {{ $entreprise->secteurActivite->nom }}
                                </span>
                            </div>
                        </a>
                    @endforeach
                </div>
        
                <!-- Lien Voir tout -->
                <div class="mt-10">
                    <a href="{{ route('entrepriseliste.index') }}"
                       class="inline-block text-blue-700 font-semibold text-lg hover:underline">
                        Voir toutes les entreprises →
                    </a>
                </div>
            </div>
        </section>
        





        <!-- Fonctionnalités de la Plateforme -->
        <section class="py-16 bg-white">
            <div class="container mx-auto text-center">
                <h2 class="text-3xl font-bold text-gray-800 mb-8">Pourquoi Choisir Notre Plateforme ?</h2>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <div class="p-6 bg-gray-50 rounded-lg shadow-md">
                        <i class="fas fa-user-tie text-blue-600 text-4xl mb-4"></i>
                        <h3 class="text-lg font-bold text-gray-800 mb-2">Pour les Candidats</h3>
                        <p class="text-gray-600">Accédez à des milliers d'offres d'emploi et créez un profil professionnel
                            unique.</p>
                    </div>
                    <div class="p-6 bg-gray-50 rounded-lg shadow-md">
                        <i class="fas fa-building text-blue-600 text-4xl mb-4"></i>
                        <h3 class="text-lg font-bold text-gray-800 mb-2">Pour les Recruteurs</h3>
                        <p class="text-gray-600">Publiez vos offres et trouvez les candidats qui correspondent à vos
                            besoins.</p>
                    </div>
                    <div class="p-6 bg-gray-50 rounded-lg shadow-md">
                        <i class="fas fa-chart-line text-blue-600 text-4xl mb-4"></i>
                        <h3 class="text-lg font-bold text-gray-800 mb-2">Performances Optimisées</h3>
                        <p class="text-gray-600">Notre plateforme garantit rapidité, efficacité et résultats.</p>
                    </div>
                </div>
            </div>
        </section>
    </main>
@endsection