@extends('app')
@section('content')
	<div class="row">
		<ol class="breadcrumb">
		  <a href="#" class="back-btn">
	      <span class="glyphicon glyphicon-arrow-left"></span> Regresar
	    </a>
	    &nbsp;&nbsp;&nbsp;
		  <li><a href="{{route('home')}}">Inicio</a></li>
		  <li><a href="/ejecutivo/cartera">Cartera</a></li>
		  @if (isset($client))
			  <li><a href="/ejecutivo/cartera/{{$client->id}}">Cliente</a></li>
		  @endif
		  <li class="active">Ubicación de la Cita</li>
		</ol>
		
	</div>

	<div class="row">

		<!-- <h3 class="text-center">Ubicación de la cita</h3> -->
		{!!Form::open(['class'=>'col-md-12 form-horizontal', 'method' => 'PUT', 'action' => ['AppointmentsController@update', $appointment->id]])!!}

			{!!Form::label('event_place_lat','Latitud',['class'=>'sr-only'])!!}
			{!! Form::hidden('event_place_lat', NULL, ['data-geo' => "lat"])!!}

			{!! Form::label('event_place_lng', 'Longitud', ['class' => 'sr-only'])!!}
			{!! Form::hidden('event_place_lng', NULL, ['data-geo' => "lng"])!!}

			<div class="form-group">
				<div class="col-md-10 col-xs-10">
					{!! Form::label('event_place', 'Lugar de la cita', ['class' => 'control-label'])!!}
					{!! Form::text('event_place', isset($client) ? ($client->default_location && strlen($client->default_location) > 5 ? $client->default_location : NULL) : null, ['class' => 'form-control', 'placeholder' => 'Escriba una dirección para buscarla en el mapa'])!!}
				</div>
				<div class="col-md-2 col-xs-2" style="margin-top:25px">
					<button class="btn btn-primary">Guardar</button>
				</div>
			</div>
			
			<div class="form-group">
				<div id="map-canvas" style="height:400px; width:100%;"></div>
			</div>
		{!!Form::close()!!}
	</div>

	@section('script')
		@parent
		<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCCpctH2EWj3u0LhOyl6demnRrKCFWT_Rc&amp;sensor=false&amp;libraries=places"></script>
		<script src="/js/jquery.geocomplete.js"></script>
		<script>
			var map;

			$('form button').on('click', function (event) {
				event.preventDefault();
				var event_place = $('#event_place').val();
				if (event_place.length < 1) {
					$('#modal_event_place').modal('show');
					return;
				}
				$('form').submit();
			});

			function initialize() {
				var mapCanvas = document.getElementById('map-canvas');

				var position = new google.maps.LatLng(19.4333, -99.1333);

				var mapOptions = {
					center: position,
					zoom: 14,
					mapTypeId: google.maps.MapTypeId.ROADMAP,
				}
				map = new google.maps.Map(mapCanvas, mapOptions);

				$('#event_place').geocomplete({
					map: map,
					markerOptions: {
						draggable: true
					},
					location: position,
				})
				.bind('geocode:result', function(event, result) {
					var position = result.geometry.location;
					$('#event_place_lat').val(position.lat());
					$('#event_place_lng').val(position.lng());
				})
				.bind('geocode:dragged', function(event, position) {
					$('#event_place_lat').val(position.lat());
					$('#event_place_lng').val(position.lng());
				});

				$('#event_place_lat').val(position.lat());
				$('#event_place_lng').val(position.lng());
			}

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

@stop