@extends($activeTemplate . 'layouts.master')
@section('content')
    @php
        $bannerContent = getContent('banner.content', true);
        $cities = App\Models\City::active()
            ->orderBy('name', 'asc')
            ->get();
        $categories = App\Models\Category::active()
            ->orderBy('name', 'asc')
            ->get();
    @endphp
    <section class="banner-section bg-img" style="background-image: url({{ getImage('assets/images/frontend/banner/' . @$bannerContent->data_values->image, '2250x1500') }});">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <div class="banner-content">
                        <h2 class="banner-content__title text-center">{{ __($bannerContent->data_values->heading) }}</h2>
                        <p class="banner-content__desc text-center">{{ __($bannerContent->data_values->subheading) }}</p>

                        <form action="{{ route('listings') }}" method="GET" autocomplete="off">
                            <div class="banner-form-wrapper">
                                <div class="banner-form">
                                    <div class="filter-item keyword d-flex justify-center align-items-center">
                                        <span class="icon ms-2">
                                            <i class="la la-search"></i>
                                        </span>
                                        <input type="text" class="form--control" name="search" autocomplete="off" placeholder="@lang('What you are looking for?')">
                                    </div>

                                    <div class="filter-item all-category d-flex align-items-center">
                                        <span class="icon ms-2">
                                            <i class="la la-list"></i>
                                        </span>
                                        <select name="category" class="form-select form--control select2" aria-label="Default select example">
                                            <option selected disabled> @lang('Categories') </option>
                                            @foreach ($categories as $category)
                                                <option value="{{ $category->slug }}"> {{ __($category->name) }} </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="location d-flex align-items-center">
                                        <span class="icon ms-2">
                                            <i class="la la-map-marker"></i>
                                        </span>

                                        <select name="city" class="form-select form--control select2 " aria-label="Default select example">
                                            <option selected disabled>@lang('Cities')</option>
                                            @foreach ($cities as $city)
                                                <option value="{{ $city->slug }}">{{ __(@$city->name) }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <button type="submit" class="search-btn btn btn--base">@lang('Search')<i class="la la-search"></i></button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @if ($sections->secs != null)
        @foreach (json_decode($sections->secs) as $sec)
            @include($activeTemplate . 'sections.' . $sec)
        @endforeach
    @endif

@endsection

@push('script')
    <script>
        (function($) {
            "use strict";
            $('[name=city]').select2({
                dropdownParent: $('[name=city]').parent()
            });

            $('[name=category]').select2({
                dropdownParent: $('[name=category]').parent()
            });
        })(jQuery);
    </script>
@endpush

@push('script-lib')
    <script src="{{ asset('assets/global/js/select2.min.js') }}"></script>
@endpush

@push('style-lib')
    <link href="{{ asset('assets/global/css/select2.min.css') }}" rel="stylesheet">
@endpush