@extends('bucketadmin.master')

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

@section('template-content')
@include('partials.messages')

<div class="row">
  <div class="col-sm-12 col-md-12">
    <section class="panel">
      <header class="panel-heading"><i class="fa fa-calendar"></i> Agendar cita</header>
      <div class="panel-body">
        {!! Form::open(['url' => '/appointments/store', 'method' => 'POST']) !!}
        @if(isset($client))
        <div class="form-group">
          <label for="users">Cliente</label>
                <select required name="client_id" id="record_clients" class="form-control" style="width: 100%;pointer-events: none;">
                  <option selected="true" value="{{$client->id}}" >{{ $client->name }} {{ $client->last_name }}</option>
                </select>
        </div>
         @else
        <div class="form-group">
          <label for="users">Cliente</label>
                <select required name="client_id" id="record_clients" style="width: 100%" class="form-control">
                  <option selected="true" value="" disabled="">Seleccionar cliente</option>
                    @foreach($clients as $key => $client)
                      <option value="{{ $client->id }}">{{ $client->name }} {{ $client->last_name }}</option>
                    @endforeach
                </select> 
        </div>
        @endif
        <div class="form-group">
          {!! Form::label('user_id', 'Usuario:') !!}
          {!! Form::select('user_id', $users->pluck('name_rol', 'id'), null, [
          'required' => 'true',
            'placeholder' => 'Eliga un usuario',
            'style' => 'width: 100%',
            'class' => 'form-control'
          ]) !!}
        </div>
        <div class="form-group">
          {!! Form::label('start_date', 'Seleccione un dia:') !!}
          {!! Form::date('start_date', Carbon\Carbon::today()->format('Y-m-d'), ['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">
                        <h5 class="text-center"><strong>Horarios sujetos a disponibilidad</strong></h5>
                    </div>
                </div>
        <div class="form-group">
          {!! Form::label('place', 'Lugar:') !!}
          <input id="pac-input" name="place" class="form-control" type="text" placeholder="Buscar dirección" style="margin-bottom: 15px; width: 100%;margin-left: 0px;">
          <input id="latitude" name="latitude" type="text" hidden="true">
          <input id="longitude" name="longitude" type="text" hidden="true">
          <div id="map" style="width: 100%;height: 300px;"></div>
        </div>
        <div class="form-group">
          {!! Form::label('description', 'Descripción:') !!}
          {!! Form::textarea('description', null, ['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-floppy-disk" aria-hidden="true"></span>
           Guardar
        </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>
      // 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('map'), {
          center: {lat: 19.432608, lng: -99.133209},
          zoom: 13,
          mapTypeId: 'roadmap'
        });

        // 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