@extends('layouts.layout')

@section('content')

    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 400px;
      }
      .controls {
        margin-top: 10px;
        border: 1px solid transparent;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        height: 32px;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      }

      #dropoff_address,
      #pickup_address {
        background-color: #fff;
        font-size: 15px;
        font-weight: 300;
        margin-left: 12px;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
        width: 200px;
      }

      #dropoff_address:focus,
      #pickup_address:focus {
        border-color: #4d90fe;
      }

      #mode-selector {
        color: #fff;
        background-color: #4d90fe;
        margin-left: 12px;
        padding: 5px 11px 0px 11px;
      }

      #mode-selector label {
        font-size: 13px;
        font-weight: 300;
      }


    </style>
 <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        {{ ucwords(str_replace('_', ' ', $url)) }}
        <small>Version 2.0</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> SysManager</a></li>
        <li class="active">{{ ucwords(str_replace('_', ' ', $url)) }}</li>
      </ol>
    </section>
 
 <!-- ADD FORM -->
 
  <!-- Main content -->
    <section class="content">
        <div class="row">
            
            
            <!-- left column -->
        <div class="col-md-12">
          <!-- general form elements -->
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">{{ ucwords(str_replace('_', ' ', $url)) }}</h3>
              
                    <button title="Add More" type="button" name="add" class="btn btn-success btn-xs add" style="float: right;">
                        <span style="font-size: 1em; font-weight:bold" class="glyphicon glyphicon-plus"></span>
                    </button>              
            </div>
            <!-- /.box-header -->
            <!-- form start -->
                        <form id="pushmoduleForm" name="pushmoduleForm"  action="{{ route($modrouteother) }}" method="POST" role="form" enctype="multipart/form-data">
             <!--<form name="pushmoduleForm" id="pushmoduleForm">-->
               <!-- {{ csrf_field() }} -->
              <div class="box-body">
		
			  <input required type="hidden" class="form-control" value="" name="url" id="url" ><input required type="hidden" class="form-control" value="" name="formID" id="formID" ><input required type="hidden" class="form-control" value="modules/store" name="modroute" id="modroute">               
              </div>
                            
              <!-- /.box-body -->
              <div class="box-footer">
                  <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
                <button  type="submit" id="postmodule" class="btn btn-primary">SAVE</button>
                                
              </div>
            </form>
          </div>
          <!-- /.box -->




    @if($upload_items == '1' && !isset($id))
          <div class="box box-success">
            <div class="box-header with-border">
              <h3 class="box-title">Import data</h3>
              <p><b>Ensure your excel sheet is in .csv format and in the order of the form above L-R.</b></p>
            </div>
            <!-- /.box-header -->
            <!-- form start -->
                        <form id="pushImportForm" name="pushImportForm"  action="{{ route($modrouteother) }}" method="POST" role="form" enctype="multipart/form-data">
              <div class="box-body">
		
			  <input type="file" class="form-control" id="import_file" name="import_file" placeholder="import file" title="import file"><input required type="hidden" class="form-control" value="" name="url" id="url" ><input required type="hidden" class="form-control" value="" name="formID" id="formID" ><input required type="hidden" class="form-control" value="modules/store" name="modroute" id="modroute">               
              </div>
              
              <!-- /.box-body -->
              <div class="box-footer">
                  <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
                <button  type="submit" id="postimport" disabled class="btn btn-warning">Upload</button>
                
              </div>
            </form>
          </div>
          <!-- /.box -->

        @endif
        </div>
            
            
        
            
        </div>
    </section>
    
            
     
 <script type="text/javascript">
  $('form#pushmoduleForm').submit(function() {
        var c = confirm("Are you sure?");
        return c;
    });
    
    $('textarea').keyup(function () {
      var len = $(this).val().length;
      var getid = $(this).attr('id');
      if(len > 0){
          $('#'+getid+'count').text(' ('+len+')');
      }
      else $('#'+getid+'count').text('');
      
    });
 </script> 
<script src="{{ URL::asset('js/global.js') }}"></script>
<!--<script src="{{ URL::asset('js/modulesetup.js') }}"></script>-->

    <script>
// 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 initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    mapTypeControl: false,
    center: {lat: 6.465422, lng: 3.406448},
    zoom: 13
  });
        
  //infoWindow = new google.maps.InfoWindow;
  new AutocompleteDirectionsHandler(map);
}

/**
 * @constructor
 */
function AutocompleteDirectionsHandler(map) {
  this.map = map;
  this.originPlaceId = null;
  this.destinationPlaceId = null;
  this.travelMode = 'DRIVING';
  
  var transitLayer = new google.maps.TransitLayer();
  //transitLayer.setMap(map);
  
  this.directionsService = new google.maps.DirectionsService;
  this.directionsRenderer = new google.maps.DirectionsRenderer;
  this.directionsRenderer.setMap(map);

  var originInput = document.getElementById('pickup_address');
  var destinationInput = document.getElementById('dropoff_address');
  var pickupdate = document.getElementById('pick_up_date');
  var modeSelector = 'DRIVING';

  var originAutocomplete = new google.maps.places.Autocomplete(originInput);
  // Specify just the place data fields that you need.
  originAutocomplete.setFields(['place_id']);

  var destinationAutocomplete =
      new google.maps.places.Autocomplete(destinationInput);
  // Specify just the place data fields that you need.
  destinationAutocomplete.setFields(['place_id']);

  this.setupClickListener('changemode-walking', 'WALKING');
  this.setupClickListener('changemode-transit', 'TRANSIT');
  this.setupClickListener('changemode-driving', 'DRIVING');

  this.setupPlaceChangedListener(originAutocomplete, 'ORIG');
  this.setupPlaceChangedListener(destinationAutocomplete, 'DEST');

  this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(originInput);
  this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(
      destinationInput);
  this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(modeSelector);
}

// Sets a listener on a radio button to change the filter type on Places
// Autocomplete.
AutocompleteDirectionsHandler.prototype.setupClickListener = function(
    id, mode) {
  var radioButton = document.getElementById(id);
  var me = this;

  radioButton.addEventListener('click', function() {
    me.travelMode = mode;
    me.route();
  });
};

AutocompleteDirectionsHandler.prototype.setupPlaceChangedListener = function(
    autocomplete, mode) {
  var me = this;
  autocomplete.bindTo('bounds', this.map);

  autocomplete.addListener('place_changed', function() {
    var place = autocomplete.getPlace();

    if (!place.place_id) {
      window.alert('Please select an option from the dropdown list.');
      return;
    }
    if (mode === 'ORIG') {
      me.originPlaceId = place.place_id;
    } else {
      me.destinationPlaceId = place.place_id;
    }
    me.route();
  });
};

AutocompleteDirectionsHandler.prototype.route = function() {
  if (!this.originPlaceId || !this.destinationPlaceId) {
    return;
  }
  var me = this;

  this.directionsService.route(
      {
        origin: {'placeId': this.originPlaceId},
        destination: {'placeId': this.destinationPlaceId},
        travelMode: this.travelMode,
        drivingOptions: {
            departureTime: new Date(document.getElementById('pick_up_date')),
            trafficModel: 'optimistic'
        }
        

      },
      function(response, status) {
        if (status === 'OK') {
          me.directionsRenderer.setDirections(response);
        } else {
          window.alert('Directions request failed due to ' + status);
        }
      });
      
//    var trafficLayer = new google.maps.TrafficLayer();   
//    trafficLayer.setMap(this.directionsRenderer);
};

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC9qVoW7xO0AVyQwMry3w3tikKpCoNILjA&libraries=places&callback=initMap"
        async defer></script>


  <script>
// This sample uses the Autocomplete widget to help the user select a
// place, then it retrieves the address components associated with that
// place, and then it populates the form fields with those details.
// This sample 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">

var placeSearch, autocomplete;

var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  postal_code: 'short_name'
};

function initAutocomplete() {
  // Create the autocomplete object, restricting the search predictions to
  // geographical location types.
  autocomplete = new google.maps.places.Autocomplete(
      document.getElementById('autocomplete'), {types: ['geocode']});

  // Avoid paying for data that you don't need by restricting the set of
  // place fields that are returned to just the address components.
  autocomplete.setFields(['address_component']);

  // When the user selects an address from the drop-down, populate the
  // address fields in the form.
  autocomplete.addListener('place_changed', fillInAddress);
}

function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();

  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }

  // Get each component of the address from the place details,
  // and then fill-in the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}

// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      var circle = new google.maps.Circle(
          {center: geolocation, radius: position.coords.accuracy});
      autocomplete.setBounds(circle.getBounds());
    });
  }
}
    </script>


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


@endsection