@extends('layouts.app')

@section('title', 'Catalogue solidaire')
@auth
    @section('immersive-account', '1')
@endauth

@section('content')
@auth<div class="member-shell">@include('account._sidebar')<main class="member-content explorer-immersive">@endauth
<section class="catalog-page" aria-labelledby="catalog-title">
    <div class="shell">
        <header class="catalog-intro">
            <div>
                <span class="stitch-kicker">Catalogue solidaire</span>
                <h1 id="catalog-title">Initiatives solidaires</h1>
                <p>Financez un bien ou un service utile proposé par un partenaire engagé.</p>
            </div>
            <form class="catalog-main-search" method="GET" action="{{ route('catalog') }}" role="search">
                <svg aria-hidden="true" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m20 20-4-4"/></svg>
                <label class="sr-only" for="catalog-search">Rechercher dans le catalogue</label>
                <input id="catalog-search" name="q" value="{{ $search }}" placeholder="Rechercher une initiative…">
                @if($type)<input type="hidden" name="type" value="{{ $type }}">@endif
                <button type="submit">Rechercher</button>
            </form>
        </header>

        <nav class="catalog-mobile-filters" aria-label="Filtrer le catalogue par type">
            <a href="{{ route('catalog', array_filter(['q' => $search])) }}" @class(['active' => $type === ''])>Toutes les initiatives</a>
            <a href="{{ route('catalog', array_filter(['q' => $search, 'type' => 'product'])) }}" @class(['active' => $type === 'product'])>Produits</a>
            <a href="{{ route('catalog', array_filter(['q' => $search, 'type' => 'service'])) }}" @class(['active' => $type === 'service'])>Services</a>
        </nav>

        <div class="catalog-layout">
            <aside class="catalog-filter-panel">
                <div class="catalog-filter-heading">
                    <svg aria-hidden="true" viewBox="0 0 24 24"><path d="M4 6h16M7 12h10M10 18h4"/></svg>
                    <h2>Filtres</h2>
                </div>
                <form method="GET" action="{{ route('catalog') }}">
                    @if($search)<input type="hidden" name="q" value="{{ $search }}">@endif
                    <fieldset>
                        <legend>Type</legend>
                        <label><input type="radio" name="type" value="" @checked($type === '')> Tous</label>
                        <label><input type="radio" name="type" value="product" @checked($type === 'product')> Produits</label>
                        <label><input type="radio" name="type" value="service" @checked($type === 'service')> Services</label>
                    </fieldset>
                    <button class="button button-wide" type="submit">Appliquer les filtres</button>
                    @if($search || $type)<a class="catalog-reset" href="{{ route('catalog') }}">Réinitialiser</a>@endif
                </form>
            </aside>

            <div class="catalog-results">
                <div class="catalog-toolbar" aria-live="polite">
                    <div>
                        <strong>{{ $offers->total() }} initiative{{ $offers->total() > 1 ? 's' : '' }}</strong>
                        @if($search)<span> pour « {{ $search }} »</span>@endif
                    </div>
                    @if($type)
                        <a class="active-filter" href="{{ route('catalog', array_filter(['q' => $search])) }}">
                            {{ $type === 'service' ? 'Services' : 'Produits' }} <span aria-hidden="true">×</span>
                        </a>
                    @endif
                </div>

                @if($offers->isEmpty())
                    <div class="catalog-empty">
                        <svg aria-hidden="true" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m20 20-4-4"/></svg>
                        <h2>Aucune offre trouvée</h2>
                        <p>Essayez une autre recherche ou réinitialisez vos filtres.</p>
                        @if($search || $type)<a class="button" href="{{ route('catalog') }}">Voir tout le catalogue</a>@endif
                    </div>
                @else
                    <div class="catalogue-grid">
                        @foreach($offers as $offer)
                            <x-offer-card :offer="$offer" />
                        @endforeach
                    </div>
                    <div class="catalog-pagination">{{ $offers->links() }}</div>
                @endif
            </div>
        </div>
    </div>
</section>
@auth</main></div>@endauth
@endsection