@extends('layouts.app')

@section('title', 'Listings — iiSHEEG')

@section('content')
<section class="bg-navy text-white py-4">
    <div class="container">
        <h1 class="h3 mb-3">Business listings</h1>
        <form action="{{ route('listing') }}" method="GET" class="row g-2">
            <div class="col-md-6">
                <input type="text" name="keyword" value="{{ $keyword }}" class="form-control" placeholder="Search by name or description">
            </div>
            <div class="col-md-4">
                <select name="city_id" class="form-select">
                    <option value="">All cities</option>
                    @foreach ($cities as $city)
                        <option value="{{ $city->id }}" @selected($cityId == $city->id)>{{ $city->name }}, {{ $city->country }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-teal w-100">Search</button>
            </div>
        </form>
    </div>
</section>

<section class="container py-5">
    <p class="text-muted mb-4">{{ $businesses->total() }} {{ \Illuminate\Support\Str::plural('business', $businesses->total()) }} found</p>

    @if ($businesses->isEmpty())
        <div class="alert alert-light border text-center py-5">
            <i class="bi bi-search fs-2 text-teal d-block mb-2"></i>
            No businesses matched your search. Try a different keyword or city, or
            <a href="{{ route('business.create') }}">add your business</a> to the directory.
        </div>
    @else
        <div class="row g-4">
            @foreach ($businesses as $business)
                <div class="col-md-6 col-lg-4">
                    <div class="card business-card">
                        <div class="card-body">
                            <div class="d-flex align-items-start gap-3 mb-3">
                                <img src="{{ $business->logo_url ?? 'https://placehold.co/64x64?text=ii' }}" alt="{{ $business->name }}" class="business-logo">
                                <div>
                                    <h5 class="card-title mb-1">
                                        {{ $business->name }}
                                        @if ($business->featured)
                                            <span class="badge badge-featured ms-1">Featured</span>
                                        @endif
                                    </h5>
                                    <span class="badge bg-light text-navy border">{{ $business->category->name }}</span>
                                </div>
                            </div>
                            <p class="text-muted small mb-2"><i class="bi bi-geo-alt text-teal"></i> {{ $business->city->name }}, {{ $business->city->country }}</p>
                            <p class="card-text small text-truncate-3">{{ \Illuminate\Support\Str::limit($business->description, 110) }}</p>
                            <a href="{{ route('business.show', $business) }}" class="btn btn-outline-teal btn-sm w-100">View details</a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="mt-5 d-flex justify-content-center">
            {{ $businesses->links() }}
        </div>
    @endif
</section>
@endsection
