@extends('frontend.layouts.app')
@section('content')
    <style>
        .inner-pages .nice-select.open .list {
            width: auto;
        }    
        span.current {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.input-group .nice-select .current {
    height: 37px;
     line-height: 1 !important; 
}

.inner-pages .cod-pad.single.detail-wrapper .nice-select:after{
    right: 5px !important;
}

    </style>
    <!-- START SECTION PROPERTIES LISTING -->
    <section class="properties-list featured portfolio blog ho-17">
        <div class="container">
            <section class="headings-2 pt-0 pb-0">
                <div class="pro-wrapper">
                    <div class="detail-wrapper-body">
                        <div class="listing-title-bar">
                            <div class="text-heading text-left">
                                <p><a href="{{ route('home') }}">Home </a> &nbsp;/&nbsp; <span>Listings</span></p>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </section>
            <!-- Search Form -->
            <div class="col-12 px-0 parallax-searchs">
                <div class="banner-search-wrap">
                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="tabs_1">
                            <div class="rld-main-search">
                                <div class="row">
                                    <div class="rld-single-input">
                                        <input type="text" value="{{ $keyword }}" id="keyword" name="keyword"
                                            placeholder="Enter Keyword..." />
                                    </div>
                                    <input type="hidden" name="checkin_checkout" id="checkin_checkout" value="{{ $checkin_checkout }}" />
                                    <input type="hidden" name="offers" id="offers" value="{{ $offers }}" />
                                    <div class="rld-single-select ml-22">
                                        <select class="select single-select" id="property_type" name="property_type">
                                            <option value="">All Property Type</option>
                                            @foreach ($property_types as $type)
                                                <option @if ($property_type == $type->id) selected @endif value="{{ $type->id }}">
                                                    {{ $type->name_en }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    {{--<div class="rld-single-select">
                                        <select class="select single-select mr-0" id="location">
                                            <option value="">Select Location</option>
                                            @foreach ($location as $type)
                                            @if(trim($type) != null)
                                                <option @if ($loc == $type) selected @endif value="{{ $type }}">
                                                    {{ $type }}</option>
                                            @endif
                                            @endforeach
                                        </select>
                                    </div>--}}
                                    <div class="rld-single-select">
                                        <select class="select single-select mr-2" name="area_id" id="area_id" >
                                            <option value="">All Areas</option>
                                            @foreach(areas() as $area)
                                            <option value="{{ $area->id  }}" {{ $area->id == $area_id ? 'selected' : ''  }}>{{ $area->name_en }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="dropdown-filter"><span>Advanced Search</span></div>
                                    <div class=" pl-0">
                                        <a class="btn btn-yellow search_btn" href="#">Search Now</a>
                                    </div>
                                    <div class="explore__form-checkbox-list full-filter">
                                        <div class="row">
                                            <div class="col-lg-3 col-md-6 py-1 pr-30 pl-0">
                                                <!-- Form Property Status -->
                                                <div class="form-group categories">
                                                    
                                                    <select class="nice-select form-control wide" id="property_status">
                                                        <option value="">Property Status</option>
                                                        @foreach ($property_statuses as $key=> $item)
                                                            <option  @if ($property_status == $key) selected @endif  value="{{$key }}">{{ $item }}</option>
                                                        @endforeach   
                                                    </select>
                                                    {{-- <div class="nice-select form-control wide" tabindex="0">
                                                        <span class="current"><i class="fa fa-home"></i>Property
                                                            Status</span>
                                                        <ul class="list">
                                                            <li data-value="1" class="option selected">For Sale</li>
                                                            <li data-value="2" class="option">For Rent</li>
                                                        </ul>
                                                    </div> --}}
                                                </div>
                                                <!--/ End Form Property Status -->
                                            </div>
                                            <style>
                                                .rld-single-input-bedrooms input, .rld-single-input-bath input{
                                                    width: 100% !important;
                                                }
                                            </style>
                                            <div class="col-lg-3 col-md-6 py-1 pr-30 pl-0">
                                                <!-- Form Bedrooms -->
                                                <div class="form-group beds">
                                                    {{-- <span class="current"><i class="fa fa-bed" aria-hidden="true"></i> --}}
                                                        <div class="rld-single-input rld-single-input-bedrooms">
                                                            <input type="number" class="form-control number" min="1" value="{{ $bed_rooms }}" id="bedrooms" name="bedrooms"
                                                                placeholder="Bedrooms" />
                                                        </div>
                                                    {{-- <select class="nice-select form-control wide" id="bedrooms">
                                                        <option value="">Bedrooms</option>
                                                        @for ($i=1;$i<10;$i++)
                                                            <option @if ($i == $bed_rooms) selected @endif value="{{ $i }}">
                                                                {{ $i }}</option>
                                                        @endfor
                                                    </select> --}}
                                                    {{-- <div class="nice-select form-control wide" tabindex="0">
                                                        <span class="current"><i class="fa fa-bed"
                                                                aria-hidden="true"></i> Bedrooms</span>
                                                        <ul class="list">
                                                            <li data-value="1" class="option selected">1</li>
                                                            <li data-value="2" class="option">2</li>
                                                            <li data-value="3" class="option">3</li>
                                                            <li data-value="3" class="option">4</li>
                                                            <li data-value="3" class="option">5</li>
                                                            <li data-value="3" class="option">6</li>
                                                            <li data-value="3" class="option">7</li>
                                                            <li data-value="3" class="option">8</li>
                                                            <li data-value="3" class="option">9</li>
                                                            <li data-value="3" class="option">10</li>
                                                        </ul>
                                                    </div> --}}
                                                </div>
                                                <!--/ End Form Bedrooms -->
                                            </div>
                                            <div class="col-lg-3 col-md-6 py-1 pl-0 pr-30">
                                                <!-- Form Bathrooms -->
                                                <div class="form-group bath">
                                                    <div class="rld-single-input rld-single-input-bath">
                                                    <input type="number" class="form-control number" min="1" value="{{ $bath_rooms }}" id="bathrooms" name="bathrooms"
                                                    placeholder="Bathrooms" />
                                                    </div>
                                                    {{-- <select class="nice-select form-control wide" id="bathrooms">
                                                        <option value="">Bathrooms</option>
                                                        @for ($i=1;$i<10;$i++)
                                                            <option @if ($i == $bath_rooms) selected @endif value="{{ $i }}">
                                                                {{ $i }}</option>
                                                        @endfor
                                                    </select> --}}
                                                    {{-- <div class="nice-select form-control wide" tabindex="0">
                                                        <span class="current"><i class="fa fa-bath"
                                                                aria-hidden="true"></i> Bathrooms</span>
                                                        <ul class="list">
                                                            <li data-value="1" class="option selected">1</li>
                                                            <li data-value="2" class="option">2</li>
                                                            <li data-value="3" class="option">3</li>
                                                            <li data-value="3" class="option">4</li>
                                                            <li data-value="3" class="option">5</li>
                                                            <li data-value="3" class="option">6</li>
                                                            <li data-value="3" class="option">7</li>
                                                            <li data-value="3" class="option">8</li>
                                                            <li data-value="3" class="option">9</li>
                                                            <li data-value="3" class="option">10</li>
                                                        </ul>
                                                    </div> --}}
                                                </div>
                                                <!--/ End Form Bathrooms -->
                                            </div>
                                            <div class="col-lg-3 col-md-6 py-1 pl-0 pr-0">
                                                <!-- Form Bathrooms -->
                                                <div class="form-group bath">
                                                    <div class="rld-single-input rld-single-input-bath">
                                                    <input type="number" class="form-control number" min="1" value="{{ $guest }}" id="guest" name="guest"
                                                    placeholder="Guest" />
                                                    </div>
                                                </div>
                                                <!--/ End Form Bathrooms -->
                                            </div>
                                            <div class="col-lg-5 col-md-12 col-sm-12 py-1 pr-30 mr-5 sld">
                                                <!-- Price Fields -->
                                                <div class="main-search-field-2">
                                                    <!-- Area Range -->
                                                    <div class="range-slider">
                                                        <label>Area Size</label>
                                                       <div id="area-range" data-step="1000" data-min="0" data-max="{{ $max_sqft }}"
                                                            data-unit="sq ft">
                                                        </div>
                                                        <div class="clearfix"></div>
                                                    </div>
                                                    <br />
                                                    <!-- Price Range -->
                                                    
                                                    <div class="range-slider">
                                                        <label>Price Range</label>
                                                        <div id="price-range" data-min="0" data-step="1000" name="price_range"
                                                            data-max="{{ $max_price_range }}" data-unit="AED">
                                                        </div>
                                                        <div class="clearfix"></div>
                                                    </div>
                                                </div>
                                            </div>

                                            @foreach (array_chunk($amenity->toArray(),ceil($amenity->count()/2)) as $items)
                                            <div class="col-lg-3 col-md-6 col-sm-12 py-1 pr-30">
                                                <div class="checkboxes one-in-row margin-bottom-10 ch-1">
                                                    @foreach ($items as $item)
                                                        <input class="amenities" id="check-{{ $item['amenities_id'] }}" value="{{ $item['amenities_id']  }}"
                                                            @if (in_array($item['amenities_id'] , $amenities)) checked @endif type="checkbox" name="amenities" />
                                                        <label
                                                            for="check-{{ $item['amenities_id']  }}">{{ $item['amenities_name'] }}</label>

                                                    @endforeach

                                                </div>
                                            </div>
                                            @endforeach
                                           



                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--/ End Search Form -->
            <section class="headings-2 pt-0">
                <div class="pro-wrapper">
                    <div class="detail-wrapper-body">
                        <div class="listing-title-bar">
                            <div class="text-heading text-left">
                                <p class="font-weight-bold mb-0 mt-3"><b id="res_count">0</b> Search results</p>
                            </div>
                        </div>
                    </div>
                    <div class="cod-pad single detail-wrapper mr-2 mt-0 d-flex justify-content-md-end align-items-center">
                        <div class="input-group border rounded input-group-lg w-auto mr-4">
                            <label
                                class="input-group-text bg-transparent border-0 text-uppercase letter-spacing-093 pr-1 pl-3"
                                for="sortby"><i class="fas fa-align-left fs-16 pr-2"></i>Sortby:</label>
                            <select class="form-control border-0 bg-transparent shadow-none p-0 selectpicker sortby"
                                data-style="bg-transparent border-0 font-weight-600 btn-lg pl-0 pr-3" 
                                id="sortby" name="sortby" onchange="load_page_data(1);">
                                {{-- <option selected>Top Selling</option>
                                <option value="1">Most Viewed</option> --}}
                                <option value="">None</option>
                                <option value="lth">Price(low to high)</option>
                                <option value="htl">Price(high to low)</option>
                            </select>
                        </div>
                        <!--<div class="sorting-options">-->
                        <!--    <a href="#" class="change-view-btn lde"><i class="fa fa-th-list"></i></a>-->
                        <!--    <a href="#" class="change-view-btn active-view-btn"><i class="fa fa-th-large"></i></a>-->
                        <!--</div>-->
                    </div>
                </div>
            </section>
            
            <div class="list_data"></div>
        </div>
        <span class="list_data1">
        </span>
    </section>
    <!-- END SECTION PROPERTIES LISTING -->
    
   
<input type="hidden" id="promo_code" value="{{$promo_code}}">
@endsection
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
@section('script')
    <script>
         $(".dropdown-filter").on("click", function() {
            $(".explore__form-checkbox-list").toggleClass("filter-block");
        });

   </script>
   @endsection
   <script type="text/javascript">
      $(document).ready(function () {
    load_page_data(1);
    $( "#price-range" ).slider({
  step: 5000
});
$( "#area-range" ).slider({
  step: 100
});
});
    
    $(document).on("click", ".search_btn", function (event) {
load_page_data(1);
$('html, body').animate({
    scrollTop: $('.container').offset().top
}, 'fast');
});
function get_amenities() {
    
var amenities = $(".checkboxes input:checkbox:checked").map(function () {
   return $(this).val();
}).get();
return amenities;
}
function load_page_data(page,link='') {
amenities = get_amenities();
checkin_checkout = $("#checkin_checkout").val();
property_status = $("#property_status").val();
property_type = $("#property_type").val();
keyword = $("#keyword").val();
bedrooms = $("#bedrooms").val();
bathrooms = $("#bathrooms").val();
offers = $("#offers").val();
area_id = $("#area_id").val();
sort = $("#sortby").val();
list_type = '';
lcn = $("#location").val();
guest = $("#guest").val();
price_range = $("#price-range").slider( "values" );
area_range = $("#area-range").slider( "values" );
promo_code = $("#promo_code").val();

_url = "{{url('get_list')}}";
if(link){
    _url = link;
}else{
    _url = _url + "?page=" + page;
}
$.ajax({
    url: _url + "&amenities=" + amenities + "&property_status=" + property_status + "&property_type=" + property_type + "&keyword=" + keyword + "&bedrooms=" + bedrooms + "&bathrooms=" + bathrooms+"&sort="+sort+"&list_type="+list_type+"&location="+lcn+'&price_range='+price_range+'&area_range='+area_range+'&offers='+offers+'&area_id='+area_id+'&guest='+guest+'&checkin_checkout='+checkin_checkout+'&promo_code='+promo_code,
    method: "GET",
    dataType: "html",
    beforeSend: function beforeSend() {
        $('.list_data').html('');
        $('.list_data1').html('');
        loader(1);
    },
    complete: function complete() {
        loader(0);
    },
    success: function success(data) {
        loader(1);
        if(offers == 1){
            $(".list_data1").html(data);

        }else{
            $(".list_data").html(data);
        }
        $('#res_count').html($('#total_count').val());
        $(".explore__form-checkbox-list").removeClass("filter-block");
    }
});
}
function loader(status){
    if(status==1){
        $('#preloader').show();
    $('#status').show();
    }else{
        $('#preloader').hide();
    $('#status').hide();
    }
   
}
$(document).on("click", ".pagination a", function (event) {
    event.preventDefault();
    ref = $(this).attr('href');
    page = ref.substring(ref.lastIndexOf("/") + 1, ref.length);
    if (page == '') {
        page = 1;
    }
    load_page_data('',ref);
    $('html, body').animate({
        scrollTop: $('.container').offset().top
    }, 'fast');
});
</script>