@extends('front.layout.layout')
@section('content')
<div class="filter-page">
    <!-- Hero Filter Section -->
    <div class="filter-hero">
        <div class="container">
            @if ($category)
            <h1>

                {{ $category->name }}
                <i class="fas fa-arrow-right"></i>
                ({{ $bussiness->total() }})
            </h1>
            @else
            <h1>
                Find Local Businesses
            </h1>
            @endif
            @if ($queryParams['countrySearch'] && !empty($selectedCountry))
            <h1>
                {{ $selectedCountry->name }}
                <i class="fas fa-arrow-right"></i>
                ({{ $bussiness->total() }})
            </h1>
            @endif

            <form method="GET" action="{{ route('category-business') }}" class="filter-form">
                <input type="hidden" name="country_id" id="country_id"
                    value="{{ request('country_id') ?? request('selected_country_id') }}">
                <div class="row">
                    <div class="col-md-4">
                        <label for="category-select">
                            <i class="fas fa-th-large me-2"></i>Category
                        </label>
                        <select name="category" class="form-control select2" id="category-select">
                            <option value=""></option>
                            @if(request('category'))
                                <option value="{{ request('category') }}" selected>
                                    {{ optional($categories->where('slug', request('category'))->first())->name }}
                                </option>
                            @endif
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="name">
                            <i class="fas fa-search me-2"></i>Business Name
                        </label>
                        <input type="text" name="name" class="form-control" placeholder="Search businesses..."
                            value="{{ request('name') ?? $queryParams['categoryName'] }}">
                    </div>
                    <div class="col-md-4">
                        <button type="submit" class="filter-btn">
                            <i class="fas fa-filter me-2"></i>Apply Filters
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Main Content Area -->
    <div class="container">
        <div class="row">
            <!-- Locations Sidebar -->
            <div class="col-md-2">
                <div class="locations-sidebar">
                    <h3>
                        <i class="fas fa-map-marker-alt me-2"></i>
                        Countries
                    </h3>
                    <!-- Filter Input -->
                    <input value="{{ $queryParams['selectedCountryName'] ?? '' }}" type="text"
                        id="locationFilter" class="form-control mb-3" placeholder="Filter countries..." />

                    <ul class="locations-list" id="locationsList">
                        @foreach ($countries as $index => $country)
                        <li class="location-item {{ $index >= 10 ? 'd-none' : '' }}">
                            <a href="javascript:void(0)" data-country-id="{{ $country->id }}" class="location-link">
                                {{ $country->name }}
                            </a>
                        </li>
                        @endforeach
                    </ul>
                    @if (count($countries) > 10)
                    <button id="viewMoreBtn" class="btn btn-primary mt-2 w-100">View All
                        ({{ count($countries) }})</button>
                    @endif
                </div>
            </div>

            <!-- Business Listings -->
            <div class="col-md-8">
                @forelse ($bussiness as $biz)
                <x-horizontal-card :biz="$biz" :queryParams="$queryParams" />
                @empty
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    No businesses found matching your criteria.
                </div>
                @endforelse

                <div class="pagination-links mt-5">
                    {{ $bussiness->links() }}
                </div>
            </div>

            <!-- Advertisement Space -->
            <div class="col-md-2">
                <div class="ad-space">
                    <!-- Add your advertisement content here -->
                </div>
            </div>
        </div>
    </div>
</div>
@endsection