@extends('layouts.web')
@section('content')
	<style>
		.navbar-fixed-padding-top {
			padding-top: 125px;
		}
		.cstmerror{
			font-size: 11px;
			color: #f33a3a;
			position: absolute;
			margin: 2px 0 0;
			text-transform: initial;
		}
		.noshowinput{
			border: 0;
			padding: 0;
			margin: 0;
			width: 0;
			height: 0;
		}
	</style>
	<nav class="navbar navbar-default navbar-fixed-top stuck">
        <div class="container">
            @include('include.navbar')
        </div>
    </nav>
    <div class="container navbar-fixed-padding-top">
        @include('partials.alerts')
        @foreach($properties as $property)
        {{ Form::open(['url' => route('editProperty',[$property['id']]), 'enctype' => 'multipart/form-data', 'id' =>'updateProperty', 'method'=>'post', 'class'=>'no-label-error']) }}
        <div class="row">
            <div class="col-sm-12 col-md-8">
                <div class="property-detail-top-left">
                	<div class="form-group">
                    <h1 class="pdtl-title"><input type="text" name="property_name" value="{{ $property['name'] }}" class="form-control input-lg bottom-border-line inputTextNumberSpace" placeholder="Property Title" maxlength="75" autocomplete="off" /></h1>
                    </div>
                    
                    <div class="row">
                    	<div class="col-sm-4 col-md-3">
                        	<h4 class="pdtl-location"><input type="text"  name="apt_number" value="{{ $property['unit'] }}" class="form-control input-lg bottom-border-line inputTextNumberSpace" placeholder="Apt/Villa Number" maxlength="10" autocomplete="off" /></h4>
                        </div>
                        <div class="col-sm-8 col-md-9">
                            <div class="form-group">
                        	<h4 class="pdtl-location"><input type="text" name="address" id="geocomplete1" value="{{ $property['address'] }}" class="form-control mb-0 input-lg bottom-border-line inputTextNumberSpace" maxlength="75" placeholder="Address" />
                            <label id="g1cstmerror" class="cstmerror" style="display:none;">Looks like address is wrong</label>
                            <div class="">
                            <input type="hidden" id="latitude" value="{{$property['latitude']}}" name="lat" class="form-control noshowinput" />
                            <input type="hidden" id="longitude" value="{{$property['longitude']}}" name="lng" class="form-control noshowinput" />
                            </div>
                            </h4>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" name="landlord_id" value="{{ Auth::user()->id }}">
                    <div class="property_listing_details">
                        
                        <div class="row">
                            <div class="col-sm-6 col-md-4">
                                <div class="form-group">
                                    <div>
                                        <select class="form-control selectpicker notempty" name="emirate_id" id="emirate_id">
                                            <option value="">Emirate</option>
                                            @foreach($emirates as $key=>$value)
                                                <option value="{{ $key }}">{{ $value }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="info_labels text-center">Emirate</div>
                                </div>
                            </div>
                            
                            <div class="col-sm-6 col-md-4">
                                <div class="form-group">
                                    <div>
                                        <select class="form-control selectpicker notempty" name="property_type_id" id="proptype">
                                            <option value="">Property Type</option>
                                            @foreach($propertyTypes as $key=>$value)
                                                <option value="{{ $key }}">{{ $value }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="info_labels text-center">Property Type</div>
                                </div>
                            </div>
                            
                            <div class="col-sm-6 col-md-4">
                                <div class="form-group">
                                    <div>
                                    <input type="text" value="{{ $property['area'] }}" class="form-control bottom-border-line inputNumberOnly notempty mb-0" name="area" placeholder="Area (Sq.ft.)" maxlength="7" autocomplete="off" />
                                    </div>
                                    <div class="info_labels text-center">Area (Sq. Ft.)</div>
                                </div>
                            </div> 

                            <div class="col-sm-6 col-md-4">
                                <div class="form-group">
                                    <div>
                                        <select class="form-control selectpicker notempty" name="bedroom_size_id" id="bedroom">
                                            <option value="">Bedrooms</option>
                                            @foreach($bedroomSizes as $key=>$value)
                                                <option value="{{ $key }}">{{ $value }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="info_labels text-center">Bedrooms</div>
                                </div>
                            </div>

                            <div class="col-sm-6 col-md-4">
                                <div class="form-group">
                                    <div>
                                        <select class="form-control selectpicker notempty" name="washroom_size_id" id="washroom">
                                            <option value="">Washrooms</option>
                                            @foreach($washroomSizes as $key=>$value)
                                                <option value="{{ $key }}">{{ $value }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="info_labels text-center">Washrooms</div>
                                </div>
                            </div>

                            <div class="col-sm-6 col-md-4">
                                <div class="form-group">
                                    <div>
                                        <select class="form-control selectpicker notempty" name="number_of_payments_id" id="number_of_payments">
                                            <option value="">Number of Payments</option>
                                            @foreach($number_of_payments as $key=>$value)
                                                <option value="{{ $key }}">{{ $value }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="info_labels text-center">Number of Payments</div>
                                </div>
                            </div>

                            <div class="col-sm-6 col-md-4 hidden" id="infofloor">
                                <div class="form-group">
                                    <div>
                                        <input type="text" value="" class="form-control bottom-border-line inputNumberOnly notempty" name="propfloor" placeholder="Floor no." maxlength="2" autocomplete="off" />
                                    </div>
                                    <div class="info_labels text-center">floor</div>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-md-4">
            	<div class="property-detail-top-right">
                    <div class="row">
                        <div class="col-xs-12 col-sm-6 col-md-12 col-lg-12">
                        	<div class="pdtr-price">
                            <label>Yearly Price</label>
                            <div><input type="text" value="{{ $property['yearly_price'] }}" class="form-control input-lg bottom-border-line inputNumberOnly" name="yearly_price" placeholder="" maxlength="6" autocomplete="off" onkeyup="calculateMonthlyRent(this.value)"/><div class="currency"> AED</div>
                            </div>
                            </div>
                        </div>
                        <script type="text/javascript">
                           function calculateMonthlyRent(yearly_price){
                               document.getElementById('monthly_rent').value = (yearly_price/12).toFixed(2); 
                                var tmpvar = document.getElementById('monthly_rent').value;
                                while (/(\d+)(\d{3})/.test(tmpvar.toString())){
                                  tmpvar = tmpvar.toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2');
                                }
                                $("#monthly_rent_span").text(tmpvar);

                                var security_deposit = (yearly_price*5/100).toFixed(2);
                                $("#security_deposit").val(security_deposit);
                           }
                       </script>
                        <div class="col-xs-12 col-sm-6 col-md-12 col-lg-12">
                        	<div class="pdtr-price">
                            <label>Security Deposit</label>
                            <div><input type="text" value="{{ $property['security_deposit'] }}" class="form-control input-lg bottom-border-line inputNumberOnly" name="security_deposit" id="security_deposit" placeholder="" maxlength="9" autocomplete="off" /><div class="currency"> AED</div>
                            </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <div class="pdtr-price pdtr-mrent text-center">
                                <label>Monthly Rent</label>
                                <div>
                                <span class="monthly_rent_span"><span id="monthly_rent_span">{{ $property['monthly_rent'] }}</span> AED</span>
                                <input type="hidden" value="{{ $property['monthly_rent'] }}" id="monthly_rent" class="form-control input-lg bottom-border-line inputNumberOnly" name="monthly_rent" placeholder="" autocomplete="off" readonly style="background:none; border-color:transparent; cursor:default;" onfocus="this.blur()" />
                                </div>
                            </div>
                        </div>
                    </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">
                    <div class="property-detail-panel-heading">
                        Property Images
                    </div>
                    <div class="property-images-panel row">
                        <div id="imageDiv">
						@php
							//$counter=sizeof($property['media'])+1;
                            $counter = 1;
						@endphp
                    	@foreach($property['media'] as $key=>$image)                        
							@php
								$image_index=$key+1;
							@endphp
							@php
								$edit_class = '';
								if($image_index <=3){
									$edit_class = 'validate_filescls';
								}
							@endphp
                            <div class="col-sm-6 col-md-4 image_outer">
								<div class="upload-file-container" data-image-count="{{$image_index}}">
									<img class="previewimage pishow" src="{{ url('/').'/'.$image['path'] }}" alt="" />
									<!-- <input type="file" name="files[{{$image_index}}]" class="proppic filescls {{$edit_class}}" data-media-id="{{$image['id']}}" /> -->
									<a href="#" class="closeicon" data-media-id="{{$image['id']}}">x</a>                                    
								</div>                                
                                <input type="hidden" name="old_images[]" value="{{ $image['path'] }}">
                            </div>
                        @endforeach
						@php
							$existing_image_count=sizeof($property['media']);
                            $required_additional_image = 3-$existing_image_count;
						@endphp
						@if($existing_image_count<3)
						@for($i=1; $i<=$required_additional_image;$i++)
						<div class="col-sm-6 col-md-4 image_outer">
							<div class="upload-file-container" data-image-count="{{$counter}}">
								<img class="previewimage" src="#" alt="" />
								<input type="file" name="files[{{$counter}}]" class="proppic filescls validate_filescls edit-filescls" />
							</div>
						</div>
						@php
							$counter++;
						@endphp
						@endfor
						@else
						<div class="col-sm-6 col-md-4 image_outer">
							<div class="upload-file-container" data-image-count="{{$counter}}">
								<img class="previewimage" src="#" alt="" />
								<input type="file" name="files[{{$counter}}]" class="proppic filescls edit-filescls" />
							</div>
						</div>
						@endif
						
                        </div>
                    </div> 
					<!--<div class="hidden image_to_delete"></div>					-->
                    <p class="text-center text-muted">Supported files: JPG, PNG. Maximum Size: 1MB.</p>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                <div class="notes-outer">
                    <div class="notes-inner">
                        <div class="notes-content">
                            <p>Upload pictures to give a great impression of your property.  We recommend including sitting room, kitchen, bedroom and balcony/garden.</p>
                            <p>Let the tenants know if they can view the property choose either, open house, keys at reception or no viewings</p>
                        </div>
                    </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">
                    <div class="property-detail-panel-heading">
                        Upload Title Deed
                    </div>
                    <div class="property-detail-panel-content">
                        <div class="inputfilebox">
                            <input type="file" name="titledeed" id="titledeed" class="inputfile inputfile-1" />
                            <label for="titledeed"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg> <span>Choose a file</span></label>
                            <label id="titledeed-error" class="error" for="titledeed"></label>
                        </div>
                    </div>
                    <p class="text-center text-muted">Supported files: PDF, DOC, DOCX. Maximum Size: 2MB.</p>
                    <a href="javascript:void(0);" data-toggle="modal" data-title-deed="{{ $property['title_deed'] }}" data-target="#titleDeedModal" class="title_deed"><i class="fa fa-file-text"></i> Current Title Deed</a>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                <div class="notes-outer">
                    <div class="notes-inner">
                        <div class="notes-content">
                            <p>Upload property's title deed; this is needed to verify the property, and is used to help the tenant apply for the Ejari</p>
                        </div>
                    </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">
                    <div class="property-detail-panel-heading">
                        Description
                    </div>
                    <div class="property-detail-panel-content">
                        <textarea id="description" name="description" onkeyup="countChar(this)" class="form-control input-lg inputTextNumberSpace">{{ $property['description'] }}</textarea>
                        <p class="text-right text-muted"><span id="charNum">0</span> / 1500</p>
                    </div>
                </div>
             </div>
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                <div class="notes-outer">
                    <div class="notes-inner">
                        <div class="notes-content">
                            <p>Lets us know about your property. SQ FT, locality, what’s close by, any upgrades or special features.  Please be as accurate as possible so perspective tenants have a clear idea of the property.</p>
                        </div>
                    </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">
                    <div class="property-detail-panel-heading">
                        <span>Amenities</span>
                        <label id="amenities[]-error" class="error" for="amenities[]"></label>
                    </div>
                    <div class="property-detail-panel-content">
                        <ul class="amenities-list amenities-list-checkbox row">
                            @foreach($amenities as $amenity)
                                <li class="col-sm-6 col-md-4"><input name="amenities[]" id="{{ $amenity['id'] }}" type="checkbox" value="{{ $amenity['id'] }}"
                                    @foreach($property['amenity_property'] as $amp) 
                                        @if($amp['amenity_id'] == $amenity['id'])
                                            checked
                                        @endif 
                                    @endforeach 
                                />
                                <span class="{{ $amenity['icon_class'] }}"></span>
                                <label>{{ $amenity['name'] }}</label>
                                </li>
                            @endforeach
                            <input type="hidden" value="{{$amids}}" name="old_amenities" id="old_amenities">
                        </ul>
                    </div>
                </div>
             </div>
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                <div class="notes-outer">
                    <div class="notes-inner">
                        <div class="notes-content">
                            <p>Please select from the below options what is available at your property, a simple click can add appeal to your property.</p>
                        </div>
                    </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">
                    <div class="property-detail-panel-heading">
                        <span>Terms and conditions</span>
                        <label id="terms[]-error" class="error" for="terms[]"></label>
                    </div>
                    <div class="property-detail-panel-content">
                        <div class="checkbox-toggle-group row">
                            @foreach($terms_conditions as $key=>$value)
                                <div class="checkbox-toggle-control col-sm-6">
                                	<input name="terms_condition[]" type="checkbox" value="{{ $key }}"
                                        @foreach($property['property_term'] as $t)    
                                             @if($t['term_id'] == $key)
                                                checked 
                                            @endif
                                        @endforeach 
                                    />
                                    <label>{{ $value }}</label>
                                </div>
                            @endforeach  
                            <input type="hidden" value="{{$term_id_arr}}" name="old_terms_condition" id="old_terms_condition">                        
                        </div>
                    </div>
                </div>
             </div>
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                <div class="notes-outer">
                    <div class="notes-inner">
                        <div class="notes-content">
                            <p>Please select from the options what is additional requirements are to be noted at your property.</p>
                        </div>
                    </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">
                    <div class="property-detail-panel-heading">
                        <span>Location</span>
                    </div>
                    <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="notes-outer">
                    <div class="notes-inner">
                        <div class="notes-content">
                            <p>Grab the pin and locate your property so potential tenants have a good idea of the exact location</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
            	<div class="property_listing_details">
            	<div class="row">
                	<div class="col-sm-8 col-md-8 col-lg-8">
                        <div class="infotype width100 pl-0 pr-0">
                            <div>
                                <select class="form-control notempty selectpicker" name="viewing_option_id" id="vieweing_id">
                                    <option value="">Viewing Option</option>
                                    @foreach($vieweingOptions as $key=>$value)
                                        <option value="{{ $key }}">{{ $value }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="info_labels text-center">Viewing Option</div>
                        </div>
                    </div>
                    <div class="col-sm-4 col-md-4 col-lg-4">
                        <div class="infotype width100 pl-0 pr-0">
                            <div class='input-group date'>
                                <input type='text' class="form-control bottom-border-line inputNoEnter" id='datetimepicker1' autocomplete="off" name="available_from" value="{{ $property['available_from'] }}" placeholder="Available From"/>
                            </div>
                            <div class="info_labels text-center">Available From</div>
                        </div>
                    </div>
                </div>
                </div>
                <div class="property_listing_details">
                <div class="row">
                    <div class="col-sm-8 col-md-8 col-lg-8">
                        <div class="infotype width100 pl-0 pr-0">
                            <div>
                                <select class="form-control notempty selectpicker" name="property_term_id" id="property_term_id">
                                    <option value="">Property Term<span style="color:red">*</span></option>
                                    <option value="1">Short Term</option>
                                    <option value="2">Long Term</option>
                                </select>
                            </div>
                            <div class="info_labels text-center">Property Term</div>
                        </div>
                        <div id="long_term_property_block" class="infotype width100 pl-0 pr-0" style="display: none;">
                            <input class="form-control bottom-border-line mb-0" type="text" name="long_property_term_period" value="1 year" id="long_term_property" readonly>
                        </div>
                        <div id="short_term_property_block" class="infotype width100 pl-0 pr-0" style="display: none;" >
                            <select class="form-control selectpicker" id="short_term_property" name="short_property_term_period">
                                <option value="1 Month">1 Month</option>
                                <option value="2 Months">2 Months</option>
                                <option value="3 Months">3 Months</option>
                                <option value="4 Months">4 Months</option>
                                <option value="5 Months">5 Months</option>
                                <option value="6 Months">6 Months</option>
                                <option value="7 Months">7 Months</option>
                                <option value="8 Months">8 Months</option>
                                <option value="9 Months">9 Months</option>
                                <option value="10 Months">10 Months</option>
                                <option value="11 Months">11 Months</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-4 col-md-4 col-lg-4">
                        <div class="infotype width100 pl-0 pr-0">
                            <div class='input-group date'>
                                <input type='text' class="form-control bottom-border-line inputNoEnter" id='datetimepicker2' name="bid_closure_date" value="{{ $property['bid_closure_date'] }}" placeholder="Bid Closure Date" />
                            </div>
                            <div class="info_labels text-center">Bid Closure Date</div>
                        </div>
                    </div>
                </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                <div class="notes-outer">
                    <div class="notes-inner">
                        <div class="notes-content">
                            <p>Ok nearly done!<br/>
                                Just to add the date your property is available from, which date you would like to close the bidding?<br/>
                                Select long or short term rental of your property.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="checkbox-toggle-group">
            <div class="checkbox-toggle-control ctc-inline mb-0">
                <input type="checkbox" value="yes" name="terms" required/> 
                <label>I agree to the Bid2Rent <a href="javascript:void(0);" data-toggle="modal" data-target="#termsandcon"> Terms &amp; Conditions </a> and <a href="javascript:void(0);" data-toggle="modal" data-target="#privacy"> Privacy Policy</a></label>
            </div>
        </div>
        <div>
            <label id="terms-error" class="error" for="terms"></label>
        </div>
        
        
        <div class="text-center">
        <br/><br/><br/>
        <input type="submit" name="addpropbtn" class="btn btn-purple btn-lg btn-min-width-250" value="Submit Property" />            
        <br/><br/><br/><br/>
        </div>
        
        {{ Form::close() }}
        @endforeach
    </div>
    <!-- Modal -->
    <div class="modal fade" id="termsandcon">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title"><strong>Terms &amp; Conditions</strong></h4>
          </div>
          <div class="modal-body">
            <br />
<b>Warning</b>:  Undefined variable $terms_content in <b>/home/albumbz/public_html/bid2rent/resources/views/properties/editProperty.blade.php</b> on line <b>525</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on value of type null in <b>/home/albumbz/public_html/bid2rent/resources/views/properties/editProperty.blade.php</b> on line <b>525</b><br />
          </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div> 
    <!-- Modal -->
    <div class="modal fade" id="privacy">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title"><strong>Privacy Policy</strong></h4>
          </div>
            <div class="modal-body">
                <br />
<b>Warning</b>:  Undefined variable $privacy_content in <b>/home/albumbz/public_html/bid2rent/resources/views/properties/editProperty.blade.php</b> on line <b>543</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on value of type null in <b>/home/albumbz/public_html/bid2rent/resources/views/properties/editProperty.blade.php</b> on line <b>543</b><br />
            </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div> 
    <!-- Title Deed Modal -->
    <div class="modal fade" id="titleDeedModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Property Title Deed</h4>
          </div>
          <div class="modal-body">
            <embed src="" width="100%" height="400px" id="title_deed"/>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div> 
    @include('include.footer')
    @include('include.scripts')
    
    <script>
    $(function () {   
        $(document).on('click', '.title_deed', function(){
            var title_deed = $(this).data('title-deed');
            title_deed_url = APPURL+'/'+title_deed ;
            $('#title_deed').prop('src',title_deed_url);
        });
    });
    </script>

    <script>
    $(window).load(function()
    {
       
        $('select[name=emirate_id]').val("{{$property['emirate_id']}}");
        $('select[name=property_type_id]').val("{{$property['property_type_id']}}");
        $('select[name=bedroom_size_id]').val("{{$property['bedroom_size_id']}}");
        $('select[name=washroom_size_id]').val("{{$property['washroom_size_id']}}");
        $('select[name=viewing_option_id]').val("{{$property['vieweing_option_id']}}");
        $('select[name=number_of_payments_id]').val("{{$property['number_of_payments_id']}}");
        $('select[name=property_term_id]').val("{{ $property['property_term_id'] }}");
        
        var property_term_id = {{ $property['property_term_id'] }};

        if(property_term_id == 1){
            $('#long_term_property_block').hide();
            $('#short_term_property_block').show();
            $('select[name=short_property_term_period]').val("{{ $property['property_term_period'] }}");
        }
        else{
            $('#long_term_property_block').show();
        }
        

        $('.selectpicker').selectpicker('refresh')
      
        /*$(document).on('click','.removeImage',function(){
            id = this.id;
            ajaxData = {id:id, _token: "{{ csrf_token() }}"};
            $.ajax({
                url: "{{url('properties/deleteImage')}}",
                dataType: "json",
                method: "POST",
                data: ajaxData,
                cache: false,
                success: function(results){
                    $('#imageDiv').load(document.URL + ' #imageDiv');
          
                },
                error : function (e) {
                    console.log(JSON.stringify(e))
                    console.log(e);
                }
            });
        });*/
    });
    
    </script>
    <script>		
		$("#updateProperty").validate({
			ignore: [],
            rules: {
                property_name: {
                    required: true
                },
				apt_number: {
                    required: true
                },
                address: {
                    required: true
                },
				emirate_id: {
                    required: true
                },
				property_type_id: {
                    required: true
                },
				area: {
                    required: true
                },
                bedroom_size_id: {
                    required: true
                },
                washroom_size_id: {
                    required: true
                },
				number_of_payments_id: {
                    required: true
                },
				yearly_price: {
                    required: true
                },
				security_deposit: {
                    required: true
                },
				monthly_rent:{
					required: false
				},
				titledeed:{
					required: false,
					extension: "pdf|doc|docx",
				 	imgsize2mb: 2097152
				},
				description: {
                    required: true,
                    maxlength: 1500
                },
				"amenities[]": { 
                    required: true, 
                    minlength: 1 
                },
                viewing_option_id: {
                    required: true
                },
                available_from:{
                    required: true
                },
				property_term_id: {
                    required: true
                },
                bid_closure_date:{
                    required: true
                },
				terms:{
					required: true
				},
				lat:{
					required: true
				},
				lng:{
					required: true
				}
            },
            messages: {
                property_name: {
                    required: "Required"
                },
				apt_number: {
                    required: "Required"
                },
                address: {
                    required: "Required"
                },
				emirate_id: {
                    required: "Required"
                },
				property_type_id: {
                    required: "Required"
                },
				area: {
                    required: "Required"
                },
                bedroom_size_id: {
                    required: "Required"
                },
                washroom_size_id: {
                    required: "Required"
                },
                number_of_payments_id: {
                    required: "Required"
                },
                yearly_price: {
                    required: "Required"
                },
                security_deposit: {
                    required: "Required"
                },
				description: {
                    required: "Required"
                },
				"amenities[]": { 
                    required: "Amenities", 
                    minlength: 1 
                },
                viewing_option_id: {
                    required: "Required"
                },
                available_from:{
                    required: "Required"
                },
				property_term_id: {
                    required: "Required"
                },
                bid_closure_date:{
                    required: "Required"
                },
				terms:{
					required: "Please accept Terms & Conditions"
				},
				lat:{
					required: "Required"
				},
				lng:{
					required: "Required"
				}
            },
            focusInvalid: false, 
			highlight: function(element) {
				$(element).parent().addClass('error');
			},
			unhighlight: function(element) {
				$(element).parent().removeClass('error');
			},
            invalidHandler: function(form, validator) {	
                if (!validator.numberOfInvalids())
                    return;
                $('html, body').animate({
                    scrollTop: $(validator.errorList[0].element).offset().top - 150
                }, 300);
                $('body').addClass('select-error');
            },
			submitHandler: function(form) { 
				$("input[name=addpropbtn]").attr("disabled", true);
				form.submit();
			}
        });
		
		$('input.validate_filescls').each(function () {
			$(this).rules('add', {
				 required: true,
				 extension: "jpg|jpeg|png",
				 imgsize: 1048576,
				 messages: {
					required: "Add Photo"
				 }
			});
		});
		
		$.validator.addMethod('imgsize', function (value, element, param) {
			return this.optional(element) || (element.files[0].size <= param)
		}, 'File size must be less than 1 MB');
		
		$.validator.addMethod('imgsize2mb', function (value, element, param) {
			return this.optional(element) || (element.files[0].size <= param)
		}, 'File size must be less than 2 MB');
		
	    $("#proptype").bind('change', function () {
			if(($(this).val() == "Apartment") || ($(this).val() == "Studio")){ 
				$('#infofloor').removeClass("hidden");
			}else{
				$("#infofloor").addClass("hidden");
			}
		});
		
		$(".notempty").on('change', function () {
            if($(this).val() !=""){
				$(this).parent().parent().parent().find('.info_labels').removeClass('invisible');
            }else{
                $(this).parent().parent().parent().find('.info_labels').addClass('invisible');
            }
        });
		
		$(function () {


			$('#proptype').trigger('change');
			$(".proppic").trigger('change');

            $("#property_term_id").bind('change', function () {
                if(($(this).val() == "1")){ 
                    $("#short_term_property_block").show();
                    $('#long_term_property_block').hide();
                }else if(($(this).val() == "2")){
                    $('#long_term_property_block').show();
                    $("#short_term_property_block").hide();
                }
            });

		});
		</script>
		<script>
            
			var _latitude = $('#latitude').val();
			var _longitude = $('#longitude').val();
			var element = "map-detail";
			simpleMap(_latitude,_longitude, element, true);
			
			$("#geocomplete1").blur(function() {
				if(($("#latitude").val() == '')&&($("#geocomplete1").val() != '')){
					$("#g1cstmerror").show();
					$("#geocomplete1").css('border-color','#ff8686');
				}else{
					$("#g1cstmerror").hide();
					$("#geocomplete1").css('border-color','#b9b7df');
				}
			});
			
			$("#geocomplete1").keyup(function() {
				$("#latitude").val('');
				$("#longitude").val('');
				if($("#geocomplete1").val() == ''){
					$("#g1cstmerror").hide();
					//$("#geocomplete1").css('border-color','#b9b7df');
				}
			});
		
			$("#geocomplete1").geocomplete({
			  details: "form",
			  types: ["geocode", "establishment"],
			})
			.bind("geocode:result", function(event, result){
				$("#g1cstmerror").hide();
				$("#geocomplete1").css('border-color','#b9b7df');
				setTimeout(function(){
					var _latitude = $("#latitude").val();
					var _longitude = $("#longitude").val();
					simpleMap(_latitude,_longitude, element, true);
				}, 1000);
			});
		</script>
		<script>
		function readURL(input, target) {
			if (input.files && input.files[0]) {
				var reader = new FileReader();
				var image_target = $(target);
				reader.onload = function (e) {
					image_target.attr('src', e.target.result).show();
					$(input).parent().append("<a href='#' class='closeicon'>x</a>");
				};
				reader.readAsDataURL(input.files[0]);
			 }
		 }
		
		$(".property-images-panel").on("change",".proppic",function(){
			readURL(this, $(this).parent().find('.previewimage'));
		});

		$(".property-images-panel").on("click",".closeicon",function(e){
			e.preventDefault();
			var image_position = $(this).parent().data('image-count')
			/*$(this).siblings('img').prop('src', '');
			var media_id = $(this).siblings('input.filescls').data('media-id');*/
            var media_id = $(this).data('media-id');
			$(this).siblings('img').prop('src', '');
			$(this).siblings('.filescls').val('');
			
            jQuery.ajax({
                url: APPURL+'/properties/deleteImage/'+media_id,
                method:'GET',
                dataType: 'json',
                cache:false,                
                success: function(data){
					/*if(image_position<=3){
						if(child_imege_length<3){
							alert('come inside')
							var new_element = '<div class="col-sm-6 col-md-4 image_outer"><div class="upload-file-container" data-image-count="'+existing_element+'"><img class="previewimage" src="#" alt="" /><input type="file" name="files['+existing_element+']" class="proppic filescls" /></div></div>';
							jQuery('#imageDiv').append(new_element)
						}
					}*/
                    $('#imageDiv').load(document.URL + ' #imageDiv>div');
                    alert('Image deleted successfully...');
					var child_imege_length = parseInt(jQuery('#imageDiv>div').length);
					
					if(child_imege_length<3){
						alert('come inside')
						existing_element = child_imege_length+1;
						var new_element = '<div class="col-sm-6 col-md-4 image_outer"><div class="upload-file-container" data-image-count="'+existing_element+'"><img class="previewimage" src="#" alt="" /><input type="file" name="files['+existing_element+']" class="proppic validate_filescls filescls" /></div></div>';
						jQuery('#imageDiv').append(new_element)
					}

					setTimeout(function(){
						$('input.validate_filescls').each(function () {
						$(this).rules('add', {
							 required: true,
							 extension: "jpg|jpeg|png",
							 imgsize: 1048576,
							 messages: {
								required: "Add Photo"
							 }
						});
					});
						
					}, 100)
					/*$('input.validate_filescls').each(function () {
						console.log('1');
						$(this).rules('add', {
							 required: true,
							 extension: "jpg|jpeg|png",
							 imgsize: 1048576,
							 messages: {
								required: "Add Photo"
							 }
						});
					});*/
						
                }
            });

			/*if(media_id != ''){
				var delete_image_id = '<input type="hidden" name="existing_image_delete[]" value='+media_id+' />';
				jQuery('.image_to_delete').append(delete_image_id);
			}*/
			
			$(this).siblings('.filescls').val('');
			if(image_position<=3){
				$(this).remove();
			} else {
				$(this).closest('.image_outer').remove();
			}
		});
		
        jQuery(document).on('click', '.filescls', function(){
           var existing_image = jQuery(this).prev('img').attr('src');
           console.log(existing_image);

        });
		jQuery(document).on('change', '.edit-filescls', function(){
				var empty_image_containers = 0;
				$('.edit-filescls').each(function(input){
					var value = $(this).val();
					if(value == '') {
						empty_image_containers = empty_image_containers+1
					}
				});
				
				if(empty_image_containers == 0){
					//var existing_element = parseInt(jQuery('.filescls').length)+1;
					var existing_element = jQuery('.edit-filescls').length+1;
					var new_element = '<div class="col-sm-6 col-md-4 image_outer"><div class="upload-file-container" data-image-count="'+existing_element+'"><img class="previewimage" src="#" alt="" /><input type="file" name="files['+existing_element+']" class="proppic edit-filescls filescls" /></div></div>';
					jQuery(this).closest('.row').append(new_element)
				}

				
				
		})
		</script>
        
        <script type="text/javascript" src="{{ asset('js/moment.js') }}"></script>
        <script type="text/javascript" src="{{ asset('js/bootstrap-datetimepicker.js') }}"></script>
		<script type="text/javascript">
		    $(function () {
		        $('#datetimepicker1').datetimepicker({
		            format: 'YYYY-MM-DD',
					useCurrent: false,
					minDate: moment()
		        }).on('dp.change',function(e){
					$('#datetimepicker1').parent().parent().find('.info_labels').removeClass('invisible');
				});
                $('#datetimepicker2').datetimepicker({
                    format: 'YYYY-MM-DD',
                    useCurrent: false,
                    minDate: moment()
                }).on('dp.change',function(e){
					$('#datetimepicker2').parent().parent().find('.info_labels').removeClass('invisible');
				});
				$("#description").keypress(function(event){
					var inputValue = event.which;
					if (inputValue != 8 && inputValue != 0 && (inputValue < 44 || inputValue > 46) && inputValue > 32 && (inputValue < 65 || inputValue > 90) && (inputValue < 97 || inputValue > 122) && (inputValue < 48 || inputValue > 57)){
						event.preventDefault();
					}
				});
		    });
		</script>
	<style>
	h4.error #geocomplete1{
		border-color:#ff8686 !important;
	}
	.previewimage {
		display: none;
		width: auto;
		height: 200px;
		margin: 0px;
		position: relative;
		z-index: 1;
		border-radius: 15px;
	}
	.previewimage.pishow {
		display:block;
	}
	.upload-file-container { 
		position: relative; 
		width: 100%; 
		height: 200px; 
		overflow: hidden;
		margin-bottom:15px;
		background:#eee;
		border-radius: 15px;
	}
	.upload-file-container:after { 
		position: absolute;
		content: "\f030";
		font-family: FontAwesome;
		font-size: 42px;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		width:60px;
		height:60px;
		margin:-30px 0 0 -30px;
		top:50%;
		left:50%;
		color: #9d97ff;
		text-align: center;
		z-index: 0;
	}  
	.error.upload-file-container:after {
		color: #f33a3a;
	}
	.upload-file-container input{
		position:absolute;
		width:100%;
		height:100%;
		opacity:0;
		cursor:pointer;
		z-index: 2;
		top:0;
		left:0;
	}
	.closeicon{
		position: absolute;
		top: 0;
		right: 0;
		width: 32px;
		height: 32px;
		background: #ff3b3b;
		border-radius: 0 10px;
		z-index: 3;
		color: #fff;
		text-align: center;
		line-height: 30px;
		font-size: 21px;
		font-weight: 500;
	}
	.closeicon:hover,
	.closeicon:focus,
	.closeicon:active{
		color: #fff;
		background: #ec2828;
	}
	.input-group.date{
		position:relative;
	}
	.input-group.date:after{
		position: absolute;
		content: "\f073";
		font-family: FontAwesome;
		font-size: 18px;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		width: 18px;
		height: 18px;
		right: 0;
		top: 5px;
		color: #444;
	}
	</style>
    <link href="{{asset('css/component.css')}}" rel="stylesheet">
    <script type="text/javascript" src="{{ asset('js/jquery.custom-file-input.js') }}"></script>
@endsection