@extends('template')
@section('main')
<style type="text/css">
	#list_checkout,#list_checkin{
		font-size: 12px;
	}
	#number_of_guests{
		font-size: 13px;
	}
</style>
<main id="site-content" role="main" ng-controller="property">
	<div class="detail-sticky">
		<div class="container">
			<ul>
				<li>
					<a href="#detail-gallery">
						{{ trans_choice('messages.header.photo',2) }}
					</a>
				</li>
				<li>
					<a href="#about-scroll">
						{{ trans('messages.rooms.about_this_listing') }}
					</a>
				</li>
				<li>
					<a href="#review-info">
						{{ trans_choice('messages.header.review',2) }}
					</a>
				</li>
				<li>
					<a href="#host-profile">
						{{ trans('messages.rooms.the_host') }}
					</a>
				</li>
				<li>
					<a href="#detail-map">
						{{ trans('messages.your_trips.location') }}
					</a>
				</li>
			</ul>
		</div>
	</div>
	<div class="detail-banner">
		<ul id="detail-gallery" class="detail-slider scroll-section">
			@foreach($result['Media'] as $row_photos)
			<li data-thumb="{{ $row_photos['MediaURL'] }}" data-src="{{ $row_photos['MediaURL'] }}">
				<img src="{{ $row_photos['MediaURL'] }}" title="" alt="slider-image">
			</li>
			@endforeach
		</ul>
	</div>
	<div class="detail-content">
		<div class="container">
			<div class="detail-wrap row">
				<div class="col-12 col-lg-12 content-wrap">
					<div class="user-wrap pt-4 pb-3 d-md-flex">
						<div class="user-img text-center">
							<a href="">
								<img alt="User Profile Image" class="profile-image" data-pin-nopin="true" src="{{url('images/user_pic-225x225.png') }}" title="">
								<h4 class="text-truncate">
									{{ $result['OriginatingSystemName'] }}
								</h4>
							</a>
						</div>

						<div class="user-info pl-md-5 flex-grow-1">
							<h1>
								{{ $result['UnparsedAddress'] }}
							</h1>
							<p href="javascript:void(0)" class="room-place mr-2">
								{{$result['City']}}@if($result['City'] !=''), 
								@endif 
								{{$result['StateOrProvince']}}@if($result['StateOrProvince'] !=''),
								@endif
								US
							</p>
							<div class="room-type row mt-3 text-center">
								<div class="col-3 room-icon">
									<i class="room_list_img_icon">
										<img src="{{ url('images/room_type/entirehome.png') }}">
									</i>
									<div class="numfel"> {{ $result['PropertyType'] }} - {{$result['PropertySubType']}}
									</div>
								</div>
								<div class="col-3 room-icon">
									<i class="icon icon-group"></i>
									<div class="numfel">
										{{ $result['ZoningDescription'] }} 
									</div>
								</div>
								<div class="col-3 room-icon">
									<i class="icon icon-double-bed"></i>
									<div class="numfel">
										{{ $result['RoomsTotal'] }} Rooms {{ $result['BedroomsTotal'] }} Bedroom
									</div>
								</div>
								<div class="col-3 room-icon">
								<div class="js-book-it-btn-container">
									<a href="{{ url('properties_contact') }}/{{ $result['ListingKey'] }}" target="_blank" class="js-book-it-btn btn btn-block btn-primary" id="requestbtn">
										<span class="request-text" style="color:#fff;">
											{{ trans('messages.rooms.contact_to_schedule') }}
										</span>
										
									</a>
								</div>
							</div>
							</div>
						</div>
					</div>

					<div class="detail-info">
						<div class="row">
						<div id="about-scroll" class="col-md-6 about-listing scroll-section py-4 text-md-left">
							<h4 class="title">
								{{ trans('messages.rooms.about_this_listing') }}
							</h4>
							<p>
								@if($result['LotSizeAcres'])
								<div>	Lot Size(Acres) : {{$result['LotSizeAcres']}}	</div>	
								@endif

								@if($result['Flooring'])
								<div>	Flooring : {{$result['Flooring']}} </div>
								@endif

								@if($result['Roof'])
								<div>	Roof : {{$result['Roof']}}	</div>				
								@endif

								@if($result['WaterSource'])
								<div>	Water Source : {{$result['WaterSource']}}	</div>		
								@endif

								@if($result['PropertyCondition'])
								<div> Property Condition : {{$result['PropertyCondition']}}	</div>
								@endif

								@if($result['Stories'])
								<div> Stories : {{$result['Stories']}}	</div>
								@endif

							</p>
						</div>
						<div id="feature-scroll" class="col-md-6 about-listing scroll-section py-4 text-md-left">
							<h4 class="title">
								{{ trans('messages.lys.features') }}
							</h4>
							<p>
								@if($result['Heating'])
								<div>Heating : {{$result['Heating']}}</div>	
								@endif

								@if($result['Cooling'])
								<div>Cooling : {{$result['Cooling']}}</div>	
								@endif

								@if($result['LaundryFeatures'])
								<div>Laundry Features : {{$result['LaundryFeatures']}}</div>	
								@endif

								@if($result['WaterfrontFeatures'])
								<div>Waterfront Features : {{$result['WaterfrontFeatures']}} </div>
								@endif

								@if($result['ExteriorFeatures'])
								<div>Exterior Features : {{$result['ExteriorFeatures']}}</div>	
								@endif

								@if($result['SecurityFeatures'])
								<div>Security Features : {{$result['SecurityFeatures']}}</div>	
								@endif

								@if($result['DoorFeatures'])
								<div>Door Features : {{$result['DoorFeatures']}}</div>	
								@endif

								@if($result['ParkingFeatures'])
								<div>Parking Features : {{$result['ParkingFeatures']}}</div>	
								@endif

								@if($result['PoolFeatures'])
								<div>Pool Features : {{$result['PoolFeatures']}}</div>	
								@endif

								@if($result['CommunityFeatures'])
								<div>Community Features : {{$result['CommunityFeatures']}}</div>@endif

								@if($result['InteriorFeatures'])
								<div>Interior Features : {{$result['InteriorFeatures']}}</div>@endif

								@if($result['SpaFeatures'])
								<div>Spa Features : {{$result['SpaFeatures']}}</div>
								@endif

								@if($result['PatioAndPorchFeatures'])
								<div>Patio And Porch Features : {{$result['PatioAndPorchFeatures']}}</div>
								@endif

								@if($result['FireplaceFeatures'])
								<div>Fireplace Features : {{$result['FireplaceFeatures']}}</div>
								@endif

								@if($result['WindowFeatures'])
								<div>Window Features : {{$result['WindowFeatures']}}</div>
								@endif

								@if($result['AccessibilityFeatures'])
								<div>Accessibility Features : {{$result['AccessibilityFeatures']}}</div>
								@endif

								@if($result['BuildingFeatures'])
								<div>Building Features : {{$result['BuildingFeatures']}}</div>
								@endif

								@if($result['LotFeatures'])
								<div>Lot Features : {{$result['LotFeatures']}}</div>
								@endif

							</p>
						</div>
					    </div>
						<div class="space-info">
							<div class="py-4 row d-md-flex">
								<div class="col-12 col-md-3">
									<label>
										{{ trans('messages.lys.the_space') }}
									</label>
								</div>
								<div class="col-md-9 col-sm-12">
									<div class="row">
										<div class="col-md-6">
											<div><strong>{{ trans('messages.rooms.property_type') }}: </strong>
												{{ $result['PropertyType'] }}
											</div>
											<div><strong>{{ trans('messages.rooms.property_subtype') }}: </strong> 
												{{ $result['PropertySubType'] }}
											</div>
											<div>
												<strong>{{ trans('messages.lys.accommodates') }}: </strong>
												{{ $result['ZoningDescription'] }}
											</div>
										</div>
										<div class="col-md-6">
											<div>
												<strong> Rooms: </strong>
												{{ $result['RoomsTotal'] }}
											</div>
											<div>
												<strong>{{ trans('messages.lys.bedrooms') }}: </strong> 
												{{ $result['BedroomsTotal'] }}
											</div>
											<div>
												<strong>{{ trans('messages.lys.bathrooms') }}: 
												</strong>
													@if($result['BathroomsTotalInteger'] != null || $result['BathroomsTotalInteger'] !=0)
													{{ $result['BathroomsTotalInteger'] }}
													@endif
												
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

						@if($result['Appliances'])
						<div class="amenities-info">
							<div class="py-4 row d-md-flex">
								<div class="col-12 col-md-3">
									<strong><label>
										{{ trans('messages.lys.amenities') }}
									</label> </strong>
								</div>

								<div class="col-md-9 expandable expandable-trigger-more">
									<div class="expandable-content-summary">
										<div class="row rooms_amenities_before">
											<div class="col-md-12 amenities-icon mb-3 d-flex align-items-center">
												@php
												$myArray = explode(',', $result['Appliances']);
												$assocArray = explode(',', $result['AssociationAmenities']);
												$tentArray = explode(',', $result['TenantPays']);	
												@endphp	
												@if($myArray != [] || $assocArray !=[] || $tentArray != [])
												<span class="js-present-safety-feature future_basics text-truncate">
													
													<ul class="row">
														@foreach($myArray as $appliance)
															<li class="col-sm-6">{{$appliance}}</li>
														@endforeach
														@foreach($assocArray as $amenities)
															<li class="col-sm-6">{{$amenities}}</li>
														@endforeach
														@foreach($tentArray as $tents)
															<li class="col-sm-6">{{$tents}}</li>
														@endforeach

														
													</ul>
													
												</span>
												@endif

											</div>								
										</div>
									</div>
								</div>
							</div>
						</div>
						@endif

						
						@if($result['PublicRemarks'])
						<div class="amenities-info">
							<div class="py-4 row d-md-flex">
								<div class="col-12 col-md-3">
									<strong><label>
										{{ trans('messages.lys.public_remarks') }}
									</label> </strong>
								</div>

								<div class="col-md-9 expandable expandable-trigger-more">
									<div class="expandable-content-summary">
										<div class="row rooms_amenities_before">
											<div class="col-md-12 amenities-icon mb-3 d-flex align-items-center remark-details">
												
												<span class="js-present-safety-feature future_basics">
													{{$result['PublicRemarks']}}
												</span>
												
											</div>								
										</div>
									</div>
								</div>
							</div>
						</div>
						@endif

						<div class="price-info">
							<div class="py-4 row d-md-flex">
								<div class="col-12 col-md-3">
									<strong><label>
										{{ trans('messages.rooms.prices') }}
									</label> </strong>
								</div>
								<div class="col-md-9 col-sm-12">
									<div class="row">
										<div class="col-md-6">
											<div>
												<strong>Original List Price : </strong> 
													@if($result['OriginalListPrice'] !='' || $result['OriginalListPrice']!=0)

													<span> 
													${{ $result['OriginalListPrice'] }}
													</span>
													@endif
												
											</div>
										</div>
										@if($result['SecurityDeposit'])
										<div class="col-md-6">
											<div>
											<strong>	Security Deposit : </strong>
													<span> 
													${{ $result['SecurityDeposit'] }}
													</span>
											</div>
										</div>
										@endif
									</div>
								</div>
							</div>
						</div>
						<div class="price-info">
							<div class="py-4 row d-md-flex">
								<div class="col-12 col-md-3">
									<strong> <label>
										Direction: 
									</label></strong>
								</div>
								<div class="col-md-9 col-sm-12">
									<div class="row">
										<div class="col-md-12">
											<div> 
												@if($result['Directions'] !='')
													<span> 
													{{ $result['Directions']}}
													</span>
												@endif
												
											</div>
										</div>
										
										<div class="col-md-6">
											@if($result['Latitude'] !='')
												<strong>  Latitude </strong>
												<span> 
													{{ $result['Latitude']}}
												</span>		
												
											@endif

											@if($result['Longitude'] !='')
												
												<strong> Longitude </strong>
													<span> 
													{{ $result['Longitude']}}
													</span>		
												
											@endif
										</div>
										
										
									</div>
								</div>
							</div>
						</div>
						<hr>
					
					</div>


				</div>
				
			</div>
		</div>

		<div id="detail-map" class="room-map scroll-section my-4 my-md-5" data-reactid=".2">
			<div id="map" data-lat="{{ $result['Latitude'] }}" data-lng="{{ $result['Longitude'] }}"></div>
			<div class="hover-card text-center d-none d-md-block">
				<h4>
					{{ trans('messages.rooms.listing_location') }}
				</h4>
				<a href="">
					<span>{{$result['StateOrProvince']}},</span>
				</a>
				<a href="">
					<span>
						@if($result['Country'])
						  {{$result['Country']}}
						@else
						  United States
						@endif
					</span>
				</a>
			</div>
		</div>
		<hr>
		<div class="detail-content">
		<div class="container">
			<div class="detail-wrap row">
				<div class="col-12 col-lg-12 content-wrap">
					<div class="price-info agent-details">
										<div class="py-4 row d-md-flex">
											<div class="col-12 col-md-3">
												<label>
													Listing Agent Details
												</label>
											</div>
											<div class="col-md-9 col-sm-12">
												<div class="row">
													<div class="col-md-6">
														@if($result['ListOfficeName'] !='')
														<div>
															<strong>  List Office Name : </strong>
															<span> 
																{{ $result['ListOfficeName'] }}
																</span>
														</div>
														@endif

														@if($result['ListOfficePhone'] !='')
														<div>
															<strong>  List Office Phone : </strong>
															<span> 
																{{ $result['ListOfficePhone'] }}
															</span>	
														</div>
														@endif


														@if($result['ListOfficeEmail'] !='')
														<div>
															<strong> List Office Email : </strong>
															<span> 
																{{ $result['ListOfficeEmail'] }}
																</span>
														</div>
														@endif
													</div>
													
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<hr>

	</div>

</main>
@stop

@push('scripts')
<script>
function initialize() {
    var mapCanvas = document.getElementById('map');
    if(!mapCanvas){
        return false;
    }
    var mapOptions = {
        center: new google.maps.LatLng($('#map').attr('data-lat'), $('#map').attr('data-lng')),
        zoom: 13,
        zoomControl: true,
        scrollwheel: false,
        mapTypeControl: false,
        streetViewControl: false,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL
        },
        panControl: false,
        scaleControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(mapCanvas, mapOptions);
    var geolocpoint = new google.maps.LatLng($('#map').attr('data-lat'), $('#map').attr('data-lng'));
    map.setCenter(geolocpoint );

    var citymap = {
        center: { lat: parseFloat($('#map').attr('data-lat')), lng: parseFloat($('#map').attr('data-lng')) }
    };

    // Add the circle for this city to the map.
    var marker = new google.maps.Marker({
        map: map,
        position: citymap['center'],
        
    });
    var circle = new google.maps.Circle({
		  map: map,
		  radius: 100,    // 10 miles in metres
		  fillColor: '#AA0000'
	});
    circle.bindTo('center', marker, 'position');
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
@endpush