@php
    $banners = $modelBanner->start()->getBanner()->getData()
@endphp
@if (!empty($banners))
    <section class="section swiper-container swiper-slider swiper-slider-1 " data-loop="false" data-autoplay="false">
        <div class="swiper-wrapper text-center text-lg-left">
            @foreach ($banners as $key => $banner)
                <div class="swiper-slide swiper-slide-caption context-dark" data-slide-bg="{{ asset($banner->image) }}">
                    <div class="swiper-slide-caption section-md text-center">

                        <section class="search-sec">
                            <div class="container">
                                <form action="{{url('shop')}}" method="get" >
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="row">


                                                <div class="col-lg-5 col-md-4 col-sm-12 p-0">
                                                    <select class="form-control search-slt"
                                                            id="exampleFormControlSelect1" required name="city">
                                                        <option value="">Select City</option>
                                                        @foreach($cities as $city)
                                                            @if($city->city!='')
                                                        <option value="{{$city->city}}">{{$city->city}}</option>
                                                            @endif
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-lg-5 col-md-4 col-sm-12 p-0">
                                                    <select class="form-control search-slt"
                                                            id="exampleFormControlSelect1" required name="category">
                                                        <option value="">Select Service</option>
                                                        @foreach($categories as $category)
                                                            <option value="{{$category->id}}">{{$category->title}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-lg-2 col-md-4 col-sm-12 p-0">
                                                    <button type="submit" class="btn btn-danger wrn-btn" value="find" name="submit">Find Vendors
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </section>


                        <style>

                            /*search box css start here*/
                            .search-sec {
                                padding: 2rem;
                            }

                            .search-slt {
                                display: block;
                                width: 100%;
                                font-size: 16px;
                                font-weight: 600;
                                letter-spacing: 1px;
                                line-height: 1.5;
                                color: #55595c;
                                background-color: #fff;
                                background-image: none;
                                border: 1px solid #ccc;
                                height: calc(3rem + 2px) !important;
                                border-radius: 0;
                            }

                            .wrn-btn {
                                width: 100%;
                                font-size: 16px;
                                font-weight: 400;
                                text-transform: capitalize;
                                height: calc(3rem + 2px) !important;
                                border-radius: 0;
                            }

                            @media (min-width: 992px) {
                                .search-sec {
                                    position: relative;
                                    top: 0;
                                    /* background: rgba(26, 70, 104, 0.51);*/
                                }
                            }

                            @media (max-width: 992px) {
                                .search-sec {
                                    background: #1A4668;
                                }
                            }

                        </style>


                    <!--<h1 class="swiper-title-1" data-caption-animate="fadeScale" data-caption-delay="100">Top-notch Furniture</h1>
          <p class="biggest text-white-70" data-caption-animate="fadeScale" data-caption-delay="200">Sofa Store provides the best furniture and accessories for homes and offices.</p>
          <div class="button-wrap" data-caption-animate="fadeInUp" data-caption-delay="300">
            <a class="button button-zachem-tak-delat button-white button-zakaria" href="{{ sc_route('banner.click',['id' => $banner->id]) }}" target="{{ $banner->target }}">
              Shop now
            </a>
          </div>-->

                    </div>
                </div>
            @endforeach
        </div>
        <!-- Swiper Pagination-->
        <div class="swiper-pagination"></div>
        <!-- Swiper Navigation-->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </section>
    <!--slider-->

@endif