<?php $__env->startSection('content'); ?>
	<div class="row">
    	<div class="col-lg-12">
    		<h1 class="page-header">Edit Property</h1>
    	</div>
    </div>
    <div id="app" class="row">
            <div class="col-lg-12">
                <?php if(session('status')): ?>
				<div class="alert alert-success">
					<?php echo e(session('status')); ?>

				</div>
				<?php endif; ?>
				<?php if(count($errors) > 0): ?>
					<div class="alert alert-danger">
						<strong>Whoops!</strong> There were some problems with your input.<br><br>
						<ul>
							<?php foreach($errors->all() as $error): ?>
								<li><?php echo e($error); ?></li>
							<?php endforeach; ?>
						</ul>
					</div>
				<?php endif; ?>
			<div class="panel panel-default">
				<div class="panel-heading">
                    Edit Property
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-lg-12">
		                    <form id="theForm" class="form-horizontal" role="form" method="POST" enctype="multipart/form-data" action="<?php echo e(url('admin/properties/edit')); ?>">
								<input type="hidden" name="_token" value="<?php echo e(csrf_token()); ?>">
								<input type="hidden" name="id" :value="<?php echo e($property->id); ?>">
								<input type="hidden" name="vueData" :value="allJson">
								<input type="hidden" id="lat" name="lat">
								<input type="hidden" id="lng" name="lng">

								<div class="form-group">
									<div class="col-sm-12 col-md-3 morePadding morePadding2" onclick="inputFocus('name')">
										<input type="text" step="1" class="form-control" id="name" name="name" value="<?php echo e($property->name); ?>" title="Name">
										<span id="name-label" class="label-text">Property Name*</span>
									</div>

									<div class="col-sm-12 col-md-3 morePadding morePadding2" onchange="handleType();" onclick="inputFocus('type')">
										<select class="form-control" id="type" name="type"  title="type" value="1">
											<option value=" ">Select One</option>
											<option value="Building" <?php echo e($property->type == 'Building' ? 'selected' : ''); ?>>Building</option>
											<option value="Tower" <?php echo e($property->type == 'Tower' ? 'selected' : ''); ?>>Tower</option>
											<option value="Cabinet" <?php echo e($property->type == 'Cabinet' ? 'selected' : ''); ?>>Cabinet</option>
											<option value="Colocation" <?php echo e($property->type == 'Colocation' ? 'selected' : ''); ?>>Colocation</option>
											<option value="MobileGenerator" <?php echo e($property->type == 'MobileGenerator' ? 'selected' : ''); ?>>Mobile Generator</option>
											<option value="Other" <?php echo e(($property->type != 'Building' && $property->type != 'Tower') ? 'selected' : ''); ?>>Other</option>
										</select>
										<span id="type-label" class="xlabel-text hasValue">Type*</span>	
									</div>

									<div class="col-sm-12 col-md-3 morePadding morePadding2" onclick="inputFocus('type_other')">
										<input type="text" class="form-control" id="type_other" style="display: none;" name="type_other" value="<?php echo e($property->type); ?>" title="Type Other">
										<span id="type-other-label" style="display: none;" class="label-text">Other*</span>	
									</div>
								</div>

								<div class="form-group">
									<div class="col-sm-12 col-md-12 morePadding morePadding2" onclick="inputFocus('description')">
										<input type="text" class="form-control" id="description" name="description" value="<?php echo e($property->description); ?>" title="Description">
										<span id="description-label" class="label-text">Description</span>	
									</div>
								</div>

								<div class="form-group">
									
									<div class="col-sm-12 col-md-3 morePadding morePadding2" onclick="inputFocus('address')">
										<input type="text" class="form-control" id="address" name="address" value="<?php echo e($property->address); ?>" title="Address">
										<span id="address-label" class="label-text">Address</span>	
									</div>

									<div class="col-sm-4 col-md-2 morePadding morePadding2" onclick="inputFocus('city')">
										<input type="text" class="form-control" id="city" name="city" value="<?php echo e($property->city); ?>" title="City">
										<span id="city-label" class="label-text">City</span>	
									</div>

									<div class="col-sm-4 col-md-1 morePadding morePadding2" onclick="inputFocus('state')">
										<input type="text" class="form-control" id="state" name="state" value="<?php echo e($property->state); ?>" title="State">
										<span id="state-label" class="label-text">State</span>	
									</div>
									
									<div class="col-sm-4 col-md-2 morePadding morePadding2" onclick="inputFocus('zip')">
										<input type="text" class="form-control" id="zip" name="zip" value="<?php echo e($property->zip); ?>" title="Zip Code">
										<span id="zip-label" class="label-text">Zip Code</span>	
									</div>
									<div class="col-sm-12 col-md-1 morePadding morePadding2" style="text-align: center; padding-top: 2px; font-size: 16px;">
										—or—
									</div>
									<div class="col-sm-12 col-md-3 morePadding morePadding2" onclick="inputFocus('coordinates')">
										<input type="text" class="form-control" id="coordinates" name="coordinates" value="<?php echo e($property->coordinates); ?>" title="Coordinates">
										<span id="coordinates-label" class="label-text">Coordinates</span>	
									</div>
								</div>

								<div class="form-group">

									<div class="col-sm-12 col-md-2 morePadding morePadding2">
										<select class="form-control" title="Employee" v-model="selected_users[0]">
											<option id="users_option" value=0>Select One</option>
												<option v-for="user_option in user_options" v-if="validUser(0,user_option.id)" v-bind:value="user_option.id">
													{{user_option.name}}
												</option>
										</select>
										<span id="users-label" class="xlabel-text hasValue">Assigned Employees</span>	
									</div>

									<div v-for="(field,index) in user_fields">
										<div class="col-sm-12 col-md-2 morePadding morePadding2" style="">
											
											<select class="form-control" v-model="selected_users[index+1]" title="Employee" style="width:80%; display:inline;">
												<option id="user_option" value=0>Select One</option>
												
												<option v-for="user_option in user_options" v-if="validUser(index+1,user_option.id)" v-bind:value="user_option.id">
													{{user_option.name}}
												</option>

											</select>

											<label class="control-label"><i class="fa fa-times-circle" style="float: left; padding-left: 5px;" @click="remove(field, index+1)" style="cursor: pointer;" title="Remove"></i></label>
										</div>
									</div>

								</div>
								
								<button type="button" class="btn btn-primary" @click="add()">
									Add Employee
								</button>

								<div class="form-group">
									<div class="col-sm-12 col-md-12 morePadding">
										<button type="button" onclick="CheckLocationData()" class="btn btn-primary" style="float: right;">
											Save
										</button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>


<?php $__env->stopSection(); ?>

<?php $__env->startSection('extras'); ?>
	
	<style>
		input:focus+.label-text, input:not([value=" "])+.label-text, select+.label-text {
		    font-weight: normal;
		    padding: 0;
		    padding-left: 20px;
		    -webkit-transform: translateY(-2rem) scale(.7);
		    transform: translateY(-2rem) scale(.7);
		}
		input+.label-text, select+.label-text, .hasValue{
		    font-size: 1.5rem;
		    font-weight: 400;
		    position: absolute;
		    top: 0;
		    left: 0;
		    display: block;

		    padding-left: 20px;
		    padding-top: 5px;
		    padding-bottom: 5px;
		    opacity: .8;
		    transition: all .3s ease-out,opacity 150ms ease .3s;
		    -webkit-transform: translateY(0) scale(1);
		    transform: translateY(0) scale(1);
		    -webkit-transform-origin: left top;
		    transform-origin: left top;
		}
		span {
		    font-size: 1rem;
		    font-weight: 600;
		    display: block;
		    padding-top: .25rem;
		    padding-bottom: .25rem;
		    margin-left: 1rem;
		    color: #317aba;
		}
		.hasValue
		{
		    font-weight: normal;
		    padding: 0;
		    padding-left: 20px;
		    -webkit-transform: translateY(-2rem) scale(.7);
		    transform: translateY(-2rem) scale(.7);
		}
		

		@media (max-width: 959px)
		{
			.morePadding {
			    margin-top: 1.5em;
			}
		}

		@media (min-width: 960px)
		{
			.morePadding {
			    margin-top: 1em;
			}
		}
		
	</style>

	 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/t/bs/pdfmake-0.1.18,dt-1.10.11,b-1.1.2,b-flash-1.1.2,b-html5-1.1.2,b-print-1.1.2/datatables.min.css"/>
    
    
    <style>
    	a:hover{
    		text-decoration: none;
    	}
    	.odd .subBack {
    		background-color: #f0fcff;
    	}
    	.even .subBack {
    		background-color: #ecf7fa;
    	}
    	.floatLeft
    	{
    		float: left;
    	}

    </style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('bottom'); ?>
<script type="text/javascript" src="https://cdn.datatables.net/t/bs/pdfmake-0.1.18,dt-1.10.11,b-1.1.2,b-flash-1.1.2,b-html5-1.1.2,b-print-1.1.2/datatables.min.js"></script>

<script>
	
	$('.form-control').each(function() {
	   var elem = $(this);

	   // Save current value of element
	   elem.data('oldVal', elem.val());

	   // Look for changes in the value
	   elem.bind("propertychange change click keyup input paste", function(event){
	      // If value has changed...
	      if (elem.data('oldVal') != elem.val()) {
	       // Updated stored value
	       elem.data('oldVal', elem.val());
	       var elem2 = $('#'+elem.attr('id')+"-label");
	       elem2.addClass('hasValue');
	       elem2.removeClass('label-text');
	       if(elem.val() == "")
	       {
	    	   elem2.addClass('label-text');
		       elem2.removeClass('hasValue');
	       }
	     }
	   });
	 });

	function inputFocus(id)
	{
		document.getElementById(id).focus();
	}

    function handleType() {
	  var e = document.getElementById("type");
	  if(e.options[e.selectedIndex].value === 'Other'){
	  	document.getElementById("type_other").style.display = "block";
	  	document.getElementById("type-other-label").style.display = "block";
	  } else {
	  	document.getElementById("type_other").style.display = "none";
	  	document.getElementById("type-other-label").style.display = "none";

	  }
	}

</script>

<script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script>

<script>
	handleType();
	
	var app = new Vue({
		el: '#app',
		data: {
			selected_users: [0],
			user_fields:[],
			user_options: []
		},
		methods: {
			add: function(){
				this.user_fields.push({
					user_id:''
				});
				this.selected_users.push(0);
			},
		    remove: function(field, index){
		    	this.selected_users.splice(index,1);
		    	this.user_fields.splice(this.user_fields.indexOf(field),1);
		    },
		    init: function(){
				var selectedUsers = (<?php echo json_encode($selected_users); ?>);
				for(i=0;i<selectedUsers.length;i++){
					if(i==0){
						this.selected_users[0] = selectedUsers[0].user;
					}else{
						this.selected_users.push(selectedUsers[i].user);
						this.user_fields.push({
							user_id: selectedUsers[i]
						});
					}
				}
		    	this.user_options = Object.values(<?php echo json_encode($user_options); ?>);
		    	console.log(this.user_fields);
		    	console.log(selectedUsers[0]);
		    	console.log(this.selected_users);
		    },
		    validUser: function(field_index, user_id){
		    	for(i=0;i<this.selected_users.length;i++){
		    		if(this.selected_users[i]==user_id){
		    			if(i!==field_index){
		    				return false;
		    			}
		    		}
		    	}

		    	return true;
		    }
		},
		mounted(){
			this.init();
		},
		computed: {
			allJson: function () {
				return this.selected_users;
			}
		}
	})
</script>

<script>
	var checkingLocation = false;
	function CheckLocationData() {
		if(!checkingLocation){
			checkingLocation = true;
			var location = document.getElementById("coordinates").value.replace(/[^\d,.-]/g, ''); ;
			if(location == ''){
				var address = document.getElementById("address").value;
				var city = document.getElementById("city").value;
				var state = document.getElementById("state").value;
				var zip = document.getElementById("zip").value;
				location = address + " " + city + ", " + state + " " + zip;
			}
			getLocationData(location);
		}
	};

	function getLocationData(location) {
	    geocoder = new google.maps.Geocoder();
	    //console.log(location);

	    if( geocoder ) {
	        geocoder.geocode({ 'address': location }, function (results, status) {
	            if( status == google.maps.GeocoderStatus.OK ) {
	            	//console.log(results[0]);
	                document.getElementById("lat").value = results[0].geometry.location.lat();
	                document.getElementById("lng").value = results[0].geometry.location.lng();
	                document.getElementById("theForm").submit();
	            }else{
	                alert('Location could not be found try again, error: ' + status);
					checkingLocation = false;
	            }
	        });
	    }
	}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVTavZdPavcRSoLr_yuRAQZTh40Y1yy-Q">
</script>

<?php $__env->stopSection(); ?>






<?php echo $__env->make('residential.templates.uadmin', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>