@extends('template')
@section('main')
<main id="site-content" class="property-content" role="main" ng-controller="property" ng-cloak data-page="rental">
	<div class="property-filter search_filter" ng-init="opened_filter = '';">
		<nav class="navbar">
			<ul class="navbar-nav flex-wrap flex-row" ng-cloak>				
				<li class="nav-item dropdown keep-open d-md-block" ng-init="@if(@$subproperty !=null)subproperty = {{ @$subproperty }}@endif">
					<button class="dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-target-filter="room_types" ng-class="filter_active('room_types')" ng-click="update_opened_filter('room_types')">
						<span>{{ trans('messages.lys.property_subtype') }}</span>
						<span ng-if="is_filter_active('room_types')">@{{filter_btn_text('room_types')}}</span>
					</button>
					<div id="subproperty" class="dropdown-menu">
						<ul>
							<li class="d-flex" ng-repeat="prop in subproperty" ng-init="@if(@$room_type_selected != null)room_type_selected = {{ @$room_type_selected }}@endif">
								<input type="checkbox" value="@{{prop}}" id="room_type_@{{prop}}" class="room-type" ng-click="update_filter_status()"/>
								<label class="type-info" for="room_type_@{{prop}}">
									<h4> @{{prop}} </h4>
								</label>
							</li>
						</ul>
						<div class="my-4 d-flex align-items-center justify-content-between filter-btn">
							<a href="javascript:void(0)" class="cancel-filter" ng-click="reset_filters('room_types')">
								{{ trans('messages.your_reservations.cancel') }}
							</a>
							<a href="javascript:void(0)" class="apply-filter" ng-click="apply_filters('room_types')">
								{{ trans('messages.payments.apply') }}
							</a>
						</div>
					</div>
				</li>

				<li class="nav-item dropdown keep-open bathroom-filter-btn">
					<button class="dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-target-filter="guests" ng-class="filter_active('bathroom')" ng-click="update_opened_filter('bathroom')">
						<span ng-if="!is_filter_active('bathroom')">
							{{trans("messages.lys.bathrooms")}}
						</span>
						<span ng-if="is_filter_active('bathroom')">
							@{{ search_bath }} {{trans("messages.lys.bathrooms")}}
						</span>
					</button>
					<div class="dropdown-menu">
						<div class="d-flex align-items-center">
							<label class="mr-2">
								{{trans("messages.lys.bathrooms")}} 
							</label>
							<div class="value-changer d-flex align-items-center ml-auto ml-md-0" ng-init="search_bath = {{@$bathroom >0 ? @$bathroom : 0}}">
							<button  ng-disabled="search_bath==0" class="value-button" id="decrease" ng-click="search_bath = search_bath - 1">-</button>
							<input type="text" class="guest-input mx-2 search_bath" value="@{{ search_bath+'+' }}" readonly="" />
							<button ng-disabled="search_bath==20" class="value-button" id="increase" ng-click="search_bath = search_bath-0 + 1">+</button>
							</div>
						</div>
						<div class="my-4 d-flex align-items-center justify-content-between filter-btn">
							<a href="javascript:void(0)" class="cancel-filter" ng-click="reset_filters('filters')">
								{{ trans('messages.your_reservations.cancel') }}
							</a>
							<a href="javascript:void(0)" class="apply-filter" ng-click="apply_filters('bathroom')">
								{{ trans('messages.payments.apply') }}
							</a>
						</div>
					</div>
				</li>

					<li class="nav-item dropdown keep-open bedrooms-filter-btn">
					<button class="dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-target-filter="guests" ng-class="filter_active('bedrooms')" ng-click="update_opened_filter('bedrooms')">
						<span ng-if="!is_filter_active('bedrooms')">
							@lang("messages.lys.bedrooms")
						</span>
						<span ng-if="is_filter_active('bedrooms')">
						 @{{ search_bedrooms }}	@lang("messages.lys.bedrooms")
						</span>
					</button>
					<div class="dropdown-menu">
						<div class="d-flex align-items-center">
							<label class="mr-2">
								@lang("messages.lys.bedrooms")
							</label>
						<div class="value-changer d-flex align-items-center ml-auto ml-md-0" ng-init="search_bedrooms = {{@$bedrooms >0 ? @$bedrooms : 0}}" >
							<button ng-disabled="search_bedrooms==0" class="value-button" id="decrease" ng-click="search_bedrooms = search_bedrooms - 1">-</button>
							<input type="text" class="guest-input mx-2 search_bedrooms" ng-value="search_bedrooms+'+'" readonly="" />
							<button ng-disabled="search_bedrooms==20" class="value-button" id="increase" ng-click="search_bedrooms = search_bedrooms-0 + 1">+</button>
						</div>
						</div>
						<div class="my-4 d-flex align-items-center justify-content-between filter-btn">
							<a href="javascript:void(0)" class="cancel-filter" ng-click="reset_filters('filters')">
								{{ trans('messages.your_reservations.cancel') }}
							</a>
							<a href="javascript:void(0)" class="apply-filter" ng-click="apply_filters('bedrooms')">
								{{ trans('messages.payments.apply') }}
							</a>
						</div>
					</div>
				</li>

				<li class="nav-item dropdown keep-open d-md-block" ng-init="currency_symbol = '$';min_value=1;max_value=50000;max_slider_price = 50000;">
					<button class="dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ng-class="filter_active('prices')" ng-click="update_opened_filter('prices')">
						<span ng-if="!is_filter_active('prices')">
							@lang('messages.inbox.price')
						</span>
						<span ng-if="is_filter_active('prices')">
							@{{filter_btn_text('prices')}}
						</span>
					</button>
					<div class="dropdown-menu">
						<div class="price-label d-flex align-items-center" ng-if='min_value!=max_value'>
							<div class="price-min">
								<span>$</span>
								<span class="price" class="min_text">
									@{{ min_value }}
								</span>
							</div>
							<span class="mx-2">-</span>
							<div class="price-min">
								<span>$</span>
								<span class="price" class="max_text">
									@{{ max_value }} @{{ (max_value == max_slider_price) ? '+' : '' }}
								</span>
							</div>
						</div>
						<div class="price-label d-flex align-items-center" ng-if='min_value==max_value'>
							<div class="price-min">
								<span>$</span>
								<span class="price" class="min_text">
									@{{ min_value }}
								</span>
							</div>
						</div>
						<div id="slider" class="mt-4 price-range-slider priceSlider"></div>
						<div class="my-4 d-flex align-items-center justify-content-between filter-btn">
							<a href="javascript:void(0)" class="cancel-filter" ng-click="reset_filters('prices')">
								@lang('messages.your_reservations.cancel')
							</a>
							<a href="javascript:void(0)" class="apply-filter" ng-click="apply_filters('prices')">
								@lang('messages.payments.apply')
							</a>
						</div>
					</div>
				</li>
			</ul>
		</nav>
	</div>


  <div class="whole-slider-wrap" ng-cloak ng-init="rental_properties = {{ json_encode(@$rental_properties) }};">
  	<div class="container">
		<div class="my-4 my-md-5">
 		<div class="my-4 d-flex justify-content-between align-items-center">
			<h6 class="title-sm mt-3 mb-5">
				{{ trans('messages.header.rental_properties') }}
			</h6>
		</div>
		<ul id="rental_properties" class="rooms-wrap d-flex flex-wrap">
			<li class="pt-2" ng-repeat="property in rental_properties | limitTo:12">
				<div class="property-img">
					<a href="{{ url('property') }}/@{{ property.ListingKeyNumeric }}">
						<img src="@{{property.Media[0]['MediaURL']}}" alt="room-image" />
					</a>
				</div>
				<div class="pro-info">
					<p class="price mt-2">
						<span>$</span> @{{ property.OriginalListPrice }}
					</p>
					<a href="{{ url('property') }}/@{{ property.ListingKeyNumeric }}" title="@{{ property.UnparsedAddress }}">
						<h5 class="text-truncate">@{{ property.UnparsedAddress }} </h5>
					</a>
					<h4 class="text m-0">
						<span>@{{ property.BedroomsTotal }} Beds </span>
						<span>·</span>
						<span>@{{ property.BathroomsTotalInteger }} Bath </span>
						<span>·</span>
						<span>@{{ property.PropertyType }}</span>
						<span>#</span>
						<span>@{{ property.ListingKey }}</span>
					</h4>
						
				</div>
				<div class="glvar-img my-3">
						<img lazy-src="{{url('/images/glvar.gif')}}" alt="glvar-image" />
				</div>
			</li>
		</ul>
		<h2 ng-hide="rental_properties.length" class="no-results text-center mt-4" id="no_results" ng-cloak>
				{{ trans('messages.search.no_results_found') }}
			</h2>
		<input type="hidden" id="pagin_next" value= "{{ trans('messages.pagination.pagi_next') }}" />
              <input type="hidden" id="pagin_prev" value= "{{ trans('messages.pagination.pagi_prev') }}" />
 		<posts-pagination-properties ng-if="rental_properties.length>0"></posts-pagination-properties>  

	</div>
</div>
</div>
</main>
@stop

@push('scripts')
<script type="text/javascript">
	var min_slider_price = 1;
	var max_slider_price = 100000;
	var min_slider_price_value = 1;
	var max_slider_price_value = 100000;

	var APPLY_LANG = "@lang('messages.payments.apply')";
	var CLEAR_LANG = "@lang('messages.payments.clear')";
</script>

@endpush