@extends('layouts.web')
@section('content')    
    <div class="container navbar-fixed-padding-top">
    	<div class="row">
            <div class="col-sm-8">
                <div class="property-detail-top-left">
                    <h1 class="pdtl-title">{{ $property['name'] }}</h1>
                    <h4 class="pdtl-location">{{ $property['address'] }}</h4>
                    <div class="property_listing_details row">
                        <div class="inforoom">{{ $property['unit'] }}<div class="info_labels">Apt/Villa #</div></div>
                        <div class="inforoom">{{ $property['bedroom_size']['name'] }}<div class="info_labels">bedrooms</div></div>
                        <div class="infobath">{{ $property['washroom_size']['name'] }}<div class="info_labels">bathrooms</div></div> 
                        <div class="infosize">{{ $property['area'] }}<div class="info_labels">size (Sq. Ft.)</div></div> 
                        <div class="infosize">{{ $property['no_of_payments']['name'] }}<div class="info_labels">No. Of Payments</div></div> 
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
            	<div class="property-detail-top-right">
                <div class="pdp-info" align="center">Asking Price</div>
                    <div class="pdtr-price">{{ number_format($property['yearly_price'],2) }} AED <span>/ Year</span></div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
            	<div class="property-detail-panel">
                	@if(!empty($property['media']))
                	<ul id="image-gallery" class="gallery list-unstyled cS-hidden">
                        @foreach($property['media'] as $image)
                        <li data-thumb="{{ url('/').'/'.$image['path'] }}"> 
                            <img src="{{ url('/').'/'.$image['path'] }}" alt=""/>
                        </li>
                        @endforeach
                    </ul>
                    @else
                    	<div class="maxwidth100">
                        	<img src="{{ url('/').'/images/default.jpg'}}" alt=""/>
                        </div>
                    @endif
                </div>
                
                <div class="property-detail-panel">
                	<div class="property-detail-panel-heading">
                    	Description
                    </div>
                    @if(strlen($property['description'])>800)
                        <div class="property-detail-panel-content show-more">
                            <p>{{ $property['description'] }} </p>
                            <a href="javascript:void(0);" class="show-more-button">Show More</a>
                        </div>
                    @else
                        <div class="property-detail-panel-content">
                            <p>{{ $property['description'] }} </p>
                        </div>
                    @endif
                </div>
                
                <div class="property-detail-panel">
                	<div class="property-detail-panel-heading">
                    	Amenities
                    </div>
                    <div class="property-detail-panel-content">
                    	<ul class="amenities-list amenities-list-details row">
                            @foreach($property['amenity_property'] as $amenity)
                        	   <li class="col-sm-6 col-md-4"><span class="{{ $amenities_icon[$amenity['amenity_id']] }}"></span><label>{{ $amenities[$amenity['amenity_id']] }}</label></li>
                            @endforeach
                        </ul>
                    </div>
                </div>
                @if(sizeof($property['property_term']))
                    <div class="property-detail-panel">
                        <div class="property-detail-panel-heading">
                            Terms and conditions
                        </div>
                        <div class="property-detail-panel-content">
                            <ul class="amenities-list row">
                                @foreach($property['property_term'] as $property_term)
                                   <li class="col-sm-6 col-md-4"><label>{{ $terms_conditions[$property_term['term_id']] }}</label></li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                @endif
            
                <div class="property-detail-panel">
                	<div class="mapheight" id="map-detail"></div>
                </div>

            </div>
            

            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            	<div class="row">

                    <div class="col-xs-12 col-sm-6 col-md-12">
                        <div class="property-detail-panel text-center">
                            <div class="pdp-info">
                                Monthly Rent<span>{{ number_format($property['monthly_rent'],2) }} AED <span>/ Month</span></span>
                            </div>
                        </div>
                        <div class="property-detail-panel text-center">
                            <div class="pdp-business-name">
                                {{ $property['name'] }}<br/>
                                {{ $property['address'] }}
                            </div>
                            <div class="row">
                                <div class="pdp-published-on">
                                    <i class="mb-1">Reference Number </i>
                                    {{ $property['reference_number'] }}
                                </div>                                
                            </div>
                            <div class="row">
                                <div class="col-xs-6">
                                    <div class="pdp-published-on">
                                        <i class="mb-1">Property Term </i>
                                        {{ ($property['property_term_id'] == 1) ? 'Short Term' : 'Long Term' }} - For {{ $property['property_term_period'] }}
                                    </div>
                                </div>
                                <div class="col-xs-6">
                                    <div class="pdp-published-on">
                                        <i class="mb-1">Bid Closure Date </i>
                                        {{ date("j F,   Y", strtotime($property['bid_closure_date'])) }}
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                            	<div class="col-xs-6">
                                	<div class="pdp-published-on">
                                        <i class="mb-1">Posted On </i>
                                        {{ date("j F, Y g:i:A", strtotime($property['created_at'])) }}
                                    </div>
                                </div>
                                <div class="col-xs-6">
                                	<div class="pdp-published-on">
                                        <i class="mb-1">Available From </i>
                                        {{ date("j F,   Y", strtotime($property['available_from'])) }}
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                    <input type="hidden" id="latitude" value="{{ $property['latitude'] }}"/>
                    <input type="hidden" id="longitude" value="{{ $property['longitude'] }}"/>
                
                    <div class="col-xs-12 col-sm-6 col-md-12">
                        <div class="property-detail-panel text-center">
                            <div id="g1" class="gauge" style="height:180px"></div>
                            <div><br/></div>
                            <div class="row">
                                <div class="col-xs-6">
                                    <div class="pdp-info">
                                        No of Views<span>{{ $property['view_count'] }}</span>
                                    </div>
                                </div>
                                <div class="col-xs-6">
                                    <div class="pdp-info">
                                        No of Bids<span>{{ $property['bid_count'] }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        
                    </div>
                </div>
            </div>
        </div>
    </div>  
@include('include.scripts')
<script>
    $(document).ready(function() {
        $('#image-gallery').lightSlider({
            gallery:true,
            item:1,
            thumbItem:4,
            slideMargin: 0,
            speed:500,
            auto:false,
            loop:false,
            onSliderLoad: function() {
                $('#image-gallery').removeClass('cS-hidden');
            }  
        });
    });
</script>
<script>
    var _latitude = document.getElementById('latitude').value;
    var _longitude = document.getElementById('longitude').value;
    var element = "map-detail";
    simpleMap(_latitude,_longitude, element);
</script>

<script type="text/javascript" src="{{ asset('js/raphael-2.1.4.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/justgage.js') }}"></script>
<script>
var g1;
var percentage = ({{$property['bid_count']}} / {{$property['view_count']}}) * 100;
document.addEventListener("DOMContentLoaded", function(event) {
	g1 = new JustGage({
		id: "g1",
		title: "Interest Level",
		value: percentage,
		min: 0,
		max: 100,
		gaugeWidthScale: 0.95,
		counter: true,
		relativeGaugeSize: true,
		titleFontFamily: "Poppins",
		titleFontColor: "#32313a",
		valueFontColor: "black",
		valueFontFamily: "Poppins"
	});
});
</script>
@endsection