@extends('layouts.layout')
@section('content')
    <!--  section  -->
    <section class="parallax-section single-par" data-scrollax-parent="true">
        <div class="bg par-elem " data-bg="images/bg/1.jpg" data-scrollax="properties: { translateY: '30%' }"></div>
        <div class="overlay op7"></div>
        <div class="container">
            <div class="section-title center-align big-title">
                <h2><span>Listings Without Map</span></h2>
                <span class="section-separator"></span>
                <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec tincidunt arcu, sit amet fermentum sem.
                </h4>
            </div>
        </div>
        <div class="header-sec-link">
            <a href="#sec1" class="custom-scroll-link"><i class="fal fa-angle-double-down"></i></a>
        </div>
    </section>
    <!--  section  end-->

    <section class="gray-bg small-padding no-top-padding-sec" id="sec1">
        <div class="container">
            <div class="breadcrumbs inline-breadcrumbs fl-wrap block-breadcrumbs">
                <a href="#">Home</a><a href="#">Listings</a><a href="#">New York</a><span>Listing
                    Single</span>
            </div>
            <div class="mob-nav-content-btn  color2-bg show-list-wrap-search ntm fl-wrap"><i class="fal fa-filter"></i>
                Filters</div>
            <div class="fl-wrap">
                <div class="row">
                    <div class="col-md-4">
                        <div class=" fl-wrap lws_mobile   tabs-act block_box">
                            <div class="filter-sidebar-header fl-wrap" id="filters-column">
                                <ul class="tabs-menu fl-wrap no-list-style">
                                    <li class="current"><a href="#filters-search"> <i class="fal fa-sliders-h"></i> Filters
                                        </a></li>
                                    <li><a href="#category-search"> <i class="fal fa-image"></i>Categories </a></li>
                                </ul>
                            </div>
                            <div class="scrl-content filter-sidebar    fs-viscon">
                                <!--tabs -->
                                <div class="tabs-container fl-wrap">
                                    <!--tab -->
                                    <div class="tab">
                                        <div id="filters-search" class="tab-content  first-tab ">
                                            <!-- listsearch-input-item-->
                                            <div class="listsearch-input-item">
                                                <span class="iconn-dec"><i class="far fa-bookmark"></i></span>
                                                <input type="text" placeholder="What are you looking for ?"
                                                    value="" />
                                            </div>
                                            <!-- listsearch-input-item end-->
                                            <!-- listsearch-input-item-->
                                            <div class="listsearch-input-item">
                                                <select data-placeholder="Categories"
                                                    class="chosen-select no-search-select">
                                                    <option>All Categories</option>
                                                    <option>Shops</option>
                                                    <option>Hotels</option>
                                                    <option>Restaurants</option>
                                                    <option>Fitness</option>
                                                    <option>Events</option>
                                                </select>
                                            </div>
                                            <!-- listsearch-input-item end-->
                                            <!-- listsearch-input-item-->
                                            <div class="listsearch-input-item">
                                                <select data-placeholder="City/Location"
                                                    class="chosen-select no-search-select">
                                                    <option>All Cities</option>
                                                    <option>New York</option>
                                                    <option>Chicago</option>
                                                    <option>Los Angeles</option>
                                                    <option>Washington</option>
                                                    <option>Boston</option>
                                                </select>
                                            </div>
                                            <!-- listsearch-input-item end-->
                                            <!-- listsearch-input-item-->
                                            <div class="listsearch-input-item location autocomplete-container">
                                                <span class="iconn-dec"><i class="far fa-map-marker"></i></span>
                                                <input type="text" placeholder="Where to look?"
                                                    class="autocomplete-input" id="autocompleteid3" value="" />
                                                <a href="#"><i class="fal fa-location"></i></a>
                                            </div>
                                            <!-- listsearch-input-item end-->
                                            <!-- listsearch-input-item-->
                                            <div class="listsearch-input-item">
                                                <button class="toggle-filter-btn tsb_act "><i class="fal fa-clock"></i>
                                                    <span>Open Now</span></button>
                                            </div>
                                            <!-- listsearch-input-item end-->
                                            <!-- listsearch-input-item-->
                                            <div class="listsearch-input-item clact date-container">
                                                <span class="iconn-dec"><i class="fal fa-calendar"></i></span>
                                                <input type="text" placeholder="Event Date" name="datepicker-here"
                                                    value="" />
                                                <span class="clear-singleinput"><i class="fal fa-times"></i></span>
                                            </div>
                                            <!-- listsearch-input-item end-->
                                            <!-- listsearch-input-item-->
                                            <div class="listsearch-input-item">
                                                <div class="price-rage-wrap fl-wrap">
                                                    <div class="price-rage-wrap-title"><i
                                                            class="fal fa-hand-holding-usd"></i> Price :</div>
                                                    <div class="price-rage-item fl-wrap">
                                                        <input type="text" class="price-range" data-min="0"
                                                            data-max="4" name="price-range1" data-step="1"
                                                            value="$$">
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- listsearch-input-item end-->
                                            <!-- listsearch-input-item-->
                                            <div class="listsearch-input-item clact">
                                                <div class=" fl-wrap filter-tags">
                                                    <ul class="no-list-style">
                                                        <li>
                                                            <input id="check-aa" type="checkbox" name="check">
                                                            <label for="check-aa">Elevator in building</label>
                                                        </li>
                                                        <li>
                                                            <input id="check-b" type="checkbox" name="check">
                                                            <label for="check-b">Friendly workspace</label>
                                                        </li>
                                                        <li>
                                                            <input id="check-c" type="checkbox" name="check" checked>
                                                            <label for="check-c">Instant Book</label>
                                                        </li>
                                                        <li>
                                                            <input id="check-d" type="checkbox" name="check">
                                                            <label for="check-d">Wireless Internet</label>
                                                        </li>
                                                        <li>
                                                            <input id="check-d2" type="checkbox" name="check" checked>
                                                            <label for="check-d2">Free WiFi</label>
                                                        </li>
                                                        <li>
                                                            <input id="check-d3" type="checkbox" name="check" checked>
                                                            <label for="check-d3">Free Parking</label>
                                                        </li>
                                                        <li>
                                                            <input id="check-d4" type="checkbox" name="check">
                                                            <label for="check-d4">Smoking Allowed</label>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <!-- listsearch-input-item end-->
                                            <!-- listsearch-input-item-->
                                            <div class="listsearch-input-item">
                                                <button class="header-search-button color-bg"
                                                    onclick="window.location.href='listing.html'"><i
                                                        class="far fa-search"></i><span>Search</span></button>
                                            </div>
                                            <!-- listsearch-input-item end-->
                                            <div class="clear-filter-btn"><i class="far fa-redo"></i> Reset Filters</div>
                                        </div>
                                    </div>
                                    <!--tab end-->
                                    <!--tab -->
                                    <div class="tab">
                                        <div id="category-search" class="tab-content">
                                            <div class="fl-wrap">
                                                <a class="category-carousel-item fl-wrap full-height checket-cat"
                                                    href="#">
                                                    <img src="images/all/1.jpg" alt="">
                                                    <div class="category-carousel-item-icon red-bg"><i
                                                            class="fal fa-cheeseburger"></i></div>
                                                    <div class="category-carousel-item-container">
                                                        <div class="category-carousel-item-title">Restaurants / Cafe</div>
                                                        <div class="category-carousel-item-counter">6 listings</div>
                                                    </div>
                                                </a>
                                                <a class="category-carousel-item fl-wrap full-height" href="#">
                                                    <img src="images/all/1.jpg" alt="">
                                                    <div class="category-carousel-item-icon yellow-bg"><i
                                                            class="fal fa-bed"></i></div>
                                                    <div class="category-carousel-item-container">
                                                        <div class="category-carousel-item-title">Hotel / Hostel</div>
                                                        <div class="category-carousel-item-counter">14 listings</div>
                                                    </div>
                                                </a>
                                                <a class="category-carousel-item fl-wrap full-height" href="#">
                                                    <img src="images/all/1.jpg" alt="">
                                                    <div class="category-carousel-item-icon purp-bg"><i
                                                            class="fal fa-cocktail"></i></div>
                                                    <div class="category-carousel-item-container">
                                                        <div class="category-carousel-item-title">Events / Nightlife</div>
                                                        <div class="category-carousel-item-counter">6 listings</div>
                                                    </div>
                                                </a>
                                                <a class="category-carousel-item fl-wrap full-height" href="#">
                                                    <img src="images/all/1.jpg" alt="">
                                                    <div class="category-carousel-item-icon blue-bg"><i
                                                            class="fal fa-dumbbell"></i></div>
                                                    <div class="category-carousel-item-container">
                                                        <div class="category-carousel-item-title">Fitness / Gym</div>
                                                        <div class="category-carousel-item-counter">18 listings</div>
                                                    </div>
                                                </a>
                                                <a class="category-carousel-item fl-wrap full-height" href="#">
                                                    <img src="images/all/1.jpg" alt="">
                                                    <div class="category-carousel-item-icon green-bg"><i
                                                            class="fal fa-cart-arrow-down"></i></div>
                                                    <div class="category-carousel-item-container">
                                                        <div class="category-carousel-item-title">Shopping</div>
                                                        <div class="category-carousel-item-counter">19 listings</div>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <!--tab end-->
                                </div>
                                <!--tabs end-->
                            </div>
                        </div>
                        <a class="back-tofilters color2-bg custom-scroll-link fl-wrap" href="#filters-column">Back to
                            filters <i class="fas fa-caret-up"></i></a>
                    </div>
                    <div class="col-md-8">
                        <!-- list-main-wrap-header-->
                        <div class="list-main-wrap-header fl-wrap block_box no-vis-shadow">
                            <!-- list-main-wrap-title-->
                            <div class="list-main-wrap-title">
                                <h2>Results For : <span>New York </span></h2>
                            </div>
                            <!-- list-main-wrap-title end-->
                            <!-- list-main-wrap-opt-->
                            <div class="list-main-wrap-opt">
                                <!-- price-opt-->
                                <div class="price-opt">
                                    <span class="price-opt-title">Sort by:</span>
                                    <div class="listsearch-input-item">
                                        <select data-placeholder="Popularity" class="chosen-select no-search-select">
                                            <option>Popularity</option>
                                            <option>Average rating</option>
                                            <option>Price: low to high</option>
                                            <option>Price: high to low</option>
                                        </select>
                                    </div>
                                </div>
                                <!-- price-opt end-->
                                <!-- price-opt-->
                                <div class="grid-opt">
                                    <ul class="no-list-style">
                                        <li class="grid-opt_act"><span class="two-col-grid act-grid-opt tolt"
                                                data-microtip-position="bottom" data-tooltip="Grid View"><i
                                                    class="fal fa-th"></i></span></li>
                                        <li class="grid-opt_act"><span class="one-col-grid tolt"
                                                data-microtip-position="bottom" data-tooltip="List View"><i
                                                    class="fal fa-list"></i></span></li>
                                    </ul>
                                </div>
                                <!-- price-opt end-->
                            </div>
                            <!-- list-main-wrap-opt end-->
                        </div>
                        <!-- list-main-wrap-header end-->
                        <!-- listing-item-container -->
                        <div class="listing-item-container init-grid-items fl-wrap nocolumn-lic">
                             @forelse ($residences as $residence)
                                @include('components.property-card-single', ['residence' => $residence])
                            @empty
                            @endforelse
                        </div>
                        <!-- listing-item-container end -->
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="limit-box fl-wrap"></div>
@endsection