@extends('layouts.app')

@section('content')

<section class="section-tight section-alt">
    <div class="container">
        <h1>{{ $q !== '' ? 'Résultats pour « '.$q.' »' : 'Recherche' }}</h1>
        <form action="{{ url('/recherche') }}" method="get" style="margin-top:16px;max-width:820px">
            <div class="searchbar">
                <div class="field ac-wrap">
                    <x-icon name="search"/>
                    <input type="search" name="q" data-autocomplete autocomplete="off" value="{{ $q }}" placeholder="Mot-clé, catégorie, professionnel…">
                </div>
                <span class="sep"></span>
                <div class="field" style="max-width:200px">
                    <x-icon name="pin"/>
                    <input type="text" name="ville" value="{{ $ville }}" placeholder="Ville ou code postal">
                </div>
                <button class="btn btn-primary" type="submit">Rechercher</button>
            </div>
        </form>
    </div>
</section>

<section class="section">
    <div class="container">
        @if($q === '' && $ville === '')
            <div class="panel empty">
                <span class="empty-icon"><x-icon name="search"/></span>
                <h3>Que recherchez-vous ?</h3>
                <p class="muted">Saisissez un mot-clé pour explorer les annonces, l'annuaire, l'agenda et le magazine.</p>
            </div>
        @else
            @if($categories)
                <div class="panel" style="margin-bottom:26px">
                    <div class="panel-head"><h2 style="font-size:1.05rem">Catégories correspondantes</h2></div>
                    <div class="row-center" style="gap:8px;flex-wrap:wrap">
                        @foreach($categories as $c)
                            <a href="{{ $c['url'] }}" class="chip"><x-icon :name="$c['icon']" size="14"/> {{ $c['name'] }}</a>
                        @endforeach
                    </div>
                </div>
            @endif

            @foreach([
                ['Annonces', $annonces, 'annonces', 'ad'],
                ['Professionnels', $pros, 'annuaire', 'pro'],
                ['Agenda', $evenements, 'agenda', 'event'],
                ['Magazine', $articles, 'magazine', 'article'],
            ] as [$label, $items, $rub, $type])
                <div style="margin-bottom:34px">
                    <div class="section-head" style="margin-bottom:16px">
                        <h2 style="font-size:1.25rem">{{ $label }} <span class="muted" style="font-weight:500">({{ count($items) }})</span></h2>
                        <a href="{{ url('/'.$rub.'?q='.urlencode($q).'&ville='.urlencode($ville)) }}" class="btn btn-outline btn-sm">Tout voir</a>
                    </div>

                    @if($items->isEmpty())
                        <p class="muted small">Aucun résultat dans cette rubrique.</p>
                    @else
                        <div class="grid grid-4">
                            @foreach($items->take(4) as $item)
                                @if($type === 'ad')<x-ad-card :ad="$item"/>
                                @elseif($type === 'pro')<x-pro-card :pro="$item"/>
                                @elseif($type === 'event')<x-event-card :event="$item"/>
                                @else<x-article-card :article="$item"/>@endif
                            @endforeach
                        </div>
                    @endif
                </div>
            @endforeach
        @endif
    </div>
</section>

@endsection