@props(['categories', 'countries'])

<section class="hero_single"
    style="background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(https://demo.creativeitem.com/atlas/uploads/system/home_banner.jpg) center center no-repeat; background-size: cover;">
    <div class="wrapper">
        <div class="container">
            <h3 class="text-white mb-3">Business Directory Listing</h3>
            <p class="text-white mb-4">Find your local places, you love most to roam around.</p>
            <form action="{{ route('category-business') }}" method="get">
                <div class="row no-gutters custom-search-input-2">
                    <div class="col-lg-3">
                        <div class="search-wrapper">
                            <input class="search-input" type="text" name="name"
                                placeholder="What are you looking for...">
                            <i class="fa-solid fa-magnifying-glass"></i>
                        </div>
                    </div>
                    <div class="col-lg-3 category-component">
                        <select class="select2" name="selected_country_id" id="country-select">
                            <option value=""></option>
                            @foreach ($countries as $country)
                                @if ($country->name != '')
                                    <option value="{{ $country->id }}">{{ $country->name }}</option>
                                @endif
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-3 category-component">
                        <select class="select2" name="category" id="category-select">
                            <option value=""></option>
                        </select>
                    </div>
                    <div class="col-lg-2">
                        <input type="submit" class="submit-search" value="Search">
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>