@extends('layouts.home')

@section('content')
    <script src="//unpkg.com/alpinejs" defer></script>

    <main class="p-4">
        <!-- Header avec recherche -->
        <header class="bg-blue-100 p-4 text-white">
            <div class="container mx-auto flex justify-center">
                <form action="{{ route('annonces.index') }}" method="GET" class="flex w-full max-w-md">
                    <input type="text" name="query" value="{{ request('query') }}" placeholder="Rechercher des offres..." 
                           class="px-4 py-2 rounded-l-md text-black w-full" autocomplete="off">
                    <button type="submit" class="bg-white text-blue-600 px-4 py-2 rounded-r-md hover:bg-blue-100">
                        Rechercher
                    </button>
                </form>
            </div>
        </header>
        

        <!-- Résultats -->
        <div class="container mx-auto p-4">
            <h1 class="text-2xl font-bold text-gray-800 mb-4">Les annonces</h1>

            @if($Annonces->isEmpty())
                <p class="text-gray-600">Aucune annonce trouvée pour « {{ request('query') }} ».</p>
            @endif

            <div class="grid grid-cols-1 gap-4">
                @foreach($Annonces as $annonce)
                    <a href="#" class="block">
                        <div class="bg-white rounded-lg shadow-md hover:shadow-lg transition mb-6 p-6">
                            <div class="flex justify-between items-center mb-2">
                                <h3 class="text-lg font-bold text-gray-800">{{ $annonce->titre }}</h3>
                                <span class="text-sm bg-blue-100 text-blue-600 px-3 py-1 rounded-full">
                                    {{ $annonce->type ?? ' ' }}
                                </span>
                            </div>

                            <div class="flex items-center gap-4 mb-3 text-gray-600 text-sm">
                                <span class="flex items-center space-x-2">
                                    <img src="{{ asset('storage/' . $annonce->entreprise->logo) }}" 
                                         class="rounded-full object-cover" style="height: 40px; width: 40px;" 
                                         alt="{{ $annonce->entreprise->nom }}">
                                    <span>{{ $annonce->entreprise->nom }}</span>
                                </span>
                            </div>

                            <div x-data="{ expanded: false }" class="text-gray-600 text-sm leading-relaxed mb-4">
                                <p x-show="!expanded">
                                    {{ Str::limit($annonce->description, 160, '...') }}
                                </p>
                                <p x-show="expanded">
                                    {{ $annonce->description }}
                                </p>
                                <button @click="expanded = !expanded" class="text-blue-600 hover:underline mt-1 text-sm">
                                    <span x-show="!expanded">Voir plus</span>
                                    <span x-show="expanded">Voir moins</span>
                                </button>
                            </div>

                            <div class="flex justify-between items-center">
                                <span class="text-gray-500 text-xs">
                                    Publié il y a {{ $annonce->created_at->diffForHumans() }}
                                </span>
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
    </main>
@endsection