@extends('layouts.app')
@section('title', 'Nos biens immobiliers')

@section('content')

<section class="page-hero">
    <div class="container page-hero-inner">
        <div class="breadcrumb">
            <a href="{{ route('home') }}">Accueil</a>
            <span class="breadcrumb-sep">/</span>
            <span>Biens immobiliers</span>
        </div>
        <div class="page-hero-label">Catalogue</div>
        <h1>Nos biens immobiliers</h1>
        <p class="page-hero-desc">Location et vente de biens résidentiels, commerciaux et terrains à Kindia et en Guinée.</p>
    </div>
</section>

<section class="section-sm">
    <div class="container">
        {{-- Filtres --}}
        <form action="{{ route('biens.index') }}" method="GET" class="filter-bar">
            <div class="form-group" style="width: 100%">
                <label class="form-label">Recherche</label>
                <input type="text" name="search" class="form-control" placeholder="Titre, quartier..." value="{{ request('search') }}">
            </div>
            <div class="form-group" style="width: 100%">
                <label class="form-label">Service</label>
                <select name="service_type" class="form-control">
                    <option value="">Tous</option>
                    <option value="Location" {{ request('service_type') === 'Location' ? 'selected' : '' }}>Location</option>
                    <option value="Vente" {{ request('service_type') === 'Vente' ? 'selected' : '' }}>Vente</option>
                </select>
            </div>
            <div class="form-group" style="width: 100%">
                <label class="form-label">Type</label>
                <select name="type" class="form-control">
                    <option value="">Tous</option>
                    <option value="Résidentiel" {{ request('type') === 'Résidentiel' ? 'selected' : '' }}>Résidentiel</option>
                    <option value="Commercial" {{ request('type') === 'Commercial' ? 'selected' : '' }}>Commercial</option>
                    <option value="Terrain" {{ request('type') === 'Terrain' ? 'selected' : '' }}>Terrain</option>
                </select>
            </div>
            <div class="form-group" style="width: 100%">
                <label class="form-label">Statut</label>
                <select name="statut" class="form-control">
                    <option value="">Tous</option>
                    <option value="Disponible" {{ request('statut') === 'Disponible' ? 'selected' : '' }}>Disponible</option>
                    <option value="Loué" {{ request('statut') === 'Loué' ? 'selected' : '' }}>Loué</option>
                    <option value="Vendu" {{ request('statut') === 'Vendu' ? 'selected' : '' }}>Vendu</option>
                </select>
            </div>
            <button type="submit" class="btn btn-navy"><i class="fa-solid fa-magnifying-glass"></i> Filtrer</button>
            @if(request()->hasAny(['search','service_type','type','statut']))
                <a href="{{ route('biens.index') }}" class="btn btn-outline filter-bar-reset"><i class="fa-solid fa-xmark"></i> Reset</a>
            @endif
        </form>

        {{-- Résultats --}}
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;">
            <p style="color:var(--text-light);font-size:.88rem;">
                {{ $biens->total() }} bien{{ $biens->total() > 1 ? 's' : '' }} trouvé{{ $biens->total() > 1 ? 's' : '' }}
            </p>
        </div>

        @if($biens->count())
            <div class="grid-3">
                @foreach($biens as $bien)
                    @include('components.bien-card', ['bien' => $bien])
                @endforeach
            </div>
            {{ $biens->links() }}
        @else
            <div style="text-align:center;padding:5rem 2rem;color:var(--text-light);">
                <div style="font-size:4rem;margin-bottom:1rem;"><i class="fa-solid fa-magnifying-glass"></i></div>
                <h3 style="color:var(--text-light);margin-bottom:.5rem;">Aucun bien trouvé</h3>
                <p>Modifiez vos critères de recherche ou <a href="{{ route('biens.index') }}" style="color:var(--navy);">réinitialisez les filtres</a>.</p>
            </div>
        @endif
    </div>
</section>

@include('components.contact-form')

@endsection