@extends('bucketadmin.master')

@section('pageTitle', 'Citas - Editar')

@section('template-content')

<div class="row">
	<div class="col-sm-12 col-md-12">
		<section class="panel" id="edit-appointments">
			<header class="panel-heading"><i class="fa fa-calendar"></i> Editar cita - Cliente:<i><a style="color:#fff" href="/clients/show/{{$appointment->client->id}}">{{$appointment->client->name}} {{$appointment->client->last_name}} </a> </i></header>
			<div class="panel-body">
				{!! Form::open(['url' => ['/appointments/update', $appointment->id], 'method' => 'POST']) !!}
				<!--  -->
				<div class="form-group">
					<label >Cliente</label>
					<input type="text" class="form-control" value="{{$appointment->client->name}} {{$appointment->client->last_name}} " readonly="true">
				</div>
				<div class="form-group">
					{!! Form::label('user_id', 'Usuario:') !!}
					<select required name="user_id" id="user_id" class="form-control" style="width: 100%">
	      	    		<option selected="true" value="{{$appointment->user_id}}">{{$appointment->user['name']}} {{$appointment->user['last_name']}}</option>
				            @foreach($users as $key => $user)
			            		<option value="{{ $user->id}}">{{ $user->name_rol }}</option>
				            @endforeach
	          		</select>
				</div>
				<div class="form-group">
					{!! Form::label('start_date', 'Seleccione un dia:') !!}
					{!! Form::date('start_date', $appointment->start_date, ['class' => 'form-control', 'required' => 'required', 'autofocus' => 'autofocus',
					'placeholder' => 'Eliga un dia']) !!}
				</div>
                <div class="form-group">
                    <button type="button" id="comprobar_horarios" class="btn btn-success">
                    	<i class="fa fa-clock-o"></i> Comprobar horarios
                    </button>
                </div>
				<div class="form-group">
                    {!! Form::label('start_date', 'Horario:') !!}
                    <div id="horarios">
                        <input type="text" name="horario2" class="form-control" value="{{date('H:i', strtotime($appointment->start_date))}}" readonly="true">
                    </div>
                </div>
                <div class="form-group">
					{!! Form::label('place', 'Lugar:') !!}
					<input id="pac-input" name="place" class="form-control" type="text" value="{{$appointment->place}}" placeholder="Buscar dirección" style="margin-bottom: 15px; width: 100%;margin-left: 0px;">
					<input id="latitude" name="latitude" type="text" hidden="true" value="{{$appointment->latitude}}">
                    <input id="longitude" name="longitude" type="text" hidden="true" value="{{$appointment->longitude}}">
					<div id="mapedit" style="width: 100%;height: 300px;"></div>
				</div>
				<div class="form-group">
					{!! Form::label('description', 'Descripción:') !!}
					{!! Form::textarea('description', $appointment->description, ['id' => 'description', 'rows' => 4, 'cols' => 54, 'style' => 'resize:none','class' => 'form-control','placeholder' => 'Ingrese la descripción']) !!}
				</div>
				<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> Actualizar</button>
				<button type="button" class="btn btn-danger btn-delete" id="{{ $appointment->id}}">
					<span class="glyphicon glyphicon-trash" aria-hidden="true"> Eliminar</span>
				</button>
				<a href="{{ url('/appointments') }}" class="btn btn-default">
					<span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
					 Regresar
				</a>
				{!! Form::close() !!}
			</div>
		</section>
	</div>
</div>
					

@endsection
@push('scripts')
	<script type="text/javascript" src="{{ asset('plugins/sweetalert2/sweetalert2.all.min.js') }}"></script>
	<script type="text/javascript" src="{{ asset('plugins/sweetalert2/sweetalert2.min.js') }}"></script>

	<script type="text/javascript">
		jQuery(document).ready(function($) {

			/* Eliminar usuarios con sweetalert */
			$("#edit-appointments").on('click', '.btn-delete', function(event) {
				event.preventDefault();

				var id = $(this).attr('id');

				swal({
					title: 'Desea continuar?',
					text: 'Recuerde que si usted elimina algún registro no podra revertir el efecto!',
					type: 'warning',
					showCancelButton: true,
					confirmButtonColor: '#DC3545',
					cancelButtonColor: '#6C757D',
					confirmButtonText: '<span class="glyphicon glyphicon-check" aria-hidden="true"></span> Si, eliminar!',
					cancelButtonText: '<span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Cancelar',
				  	reverseButtons: true
				}).then((result) => {
				  	if (result.value) {
				    	
				    	const contentType = "application/x-www-form-urlencoded; charset=utf-8";
				    	const url = "{{ url('appointments') }}" + "/" + id;

				    	$.ajax({
				    		url: url,
				    		method: 'POST',
				    		data: {'_method': 'DELETE', '_token' : "{{ csrf_token() }}" },
				    		contentType: contentType,
				    		success: function(result) {
				    			if (result == 'Success') {
				    				swal({
				    					type: 'success',
				    					title: 'La cita fue eliminada con éxito.',
				    					showConfirmButton: false,
				    					timer: 1500
				    				});
				    				setTimeout(function(){
				    				    window.location.href = "/appointments";
				    				}, 1800);				    				
				    			} else if (result == 'Error') {
				    				swal(
				    				    'Fallido!',
				    				    'Oops ha ocurrido un problema al eliminar, intentelo nuevamente.',
				    				    'error'
				    				);
				    			}
				    		}
				    	});
				 	} else if (result.dismiss === swal.DismissReason.cancel) {
				    	swal(
				      		'Operaciòn Cancelada',
				      		'Recuerde que si elimina algún registro este no podrá recuperarse.',
				      		'error'
				    	);
				  	}
				});
			});						
		});		
	</script>
<script>
    // This example adds a search box to a map, using the Google Place Autocomplete
    // feature. People can enter geographical searches. The search box will return a
    // pick list containing a mix of places and predicted search terms.
    
    // This example requires the Places library. Include the libraries=places
    // parameter when you first load the API. For example:
    // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
    function initAutocomplete() {
      var map = new google.maps.Map(document.getElementById('mapedit'), {
        center: {lng: {{ $appointment->longitude }} , lat: {{ $appointment->latitude }} },
        zoom: 16,
        mapTypeId: 'roadmap'
      });

      var marker = new google.maps.Marker({
          position: {lng: {{ $appointment->longitude }} , lat: {{ $appointment->latitude }} },
          map: map,
          title: '{{ $appointment->place }}',
          zoom:16
      });

      
      // Create the search box and link it to the UI element.
      var input = document.getElementById('pac-input');
      
      google.maps.event.addDomListener(input, 'keydown', function(event) { 
        if (event.keyCode === 13) { 
          event.preventDefault(); 
        } 
      });
      var searchBox = new google.maps.places.SearchBox(input);
      //map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
      
      // Bias the SearchBox results towards current map's viewport.
      map.addListener('bounds_changed', function() {
        searchBox.setBounds(map.getBounds());
      });
      var markers = [];
      // Listen for the event fired when the user selects a prediction and retrieve
      // more details for that place.
      searchBox.addListener('places_changed', function() {
        var places = searchBox.getPlaces();
        
        if (places.length == 0) {
          return;
        }
        
        // Clear out the old markers.
        markers.forEach(function(marker) {
          marker.setMap(null);
        });
        markers = [];
        
        // For each place, get the icon, name and location.
        var bounds = new google.maps.LatLngBounds();
        places.forEach(function(place) {
          if (!place.geometry) {
            console.log("Returned place contains no geometry");
            return;
          }
          var icon = {
            url: place.icon,
            size: new google.maps.Size(71, 71),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(17, 34),
            scaledSize: new google.maps.Size(25, 25)
          };
          
          // Create a marker for each place.
          markers.push(new google.maps.Marker({
            map: map,
            icon: icon,
            title: place.name,
            position: place.geometry.location
          }));
          console.log('Nombre del lugar',place.name);
          console.log('Latitud',place.geometry.location.lat())
          console.log('Longitud',place.geometry.location.lng())
          $('[name=latitude]').val(place.geometry.location.lat());
          $('[name=longitude]').val(place.geometry.location.lng());
          
          if (place.geometry.viewport) {
            // Only geocodes have viewport.
            bounds.union(place.geometry.viewport);
          } else {
            bounds.extend(place.geometry.location);
          }
        });
        map.fitBounds(bounds);
      });
    }

    
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCNh1zGzQyZNuVHCc2uFwdKOLqDKDgiI4g&libraries=places&callback=initAutocomplete"
    async defer></script>
@endpush