@extends('layouts.business.master')

@section('css')
<link rel="stylesheet" type="text/css" href="{{ asset('app-assets/vendors/css/tables/datatable/datatables.min.css') }}">
@endsection
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <style type="text/css">
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }

      /* Optional: Makes the sample page fill the window. */
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      .custom-map-control-button {
        appearance: button;
        background-color: #fff;
        border: 0;
        border-radius: 2px;
        box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
        cursor: pointer;
        margin: 10px;
        padding: 0 0.5em;
        height: 40px;
        font: 400 18px Roboto, Arial, sans-serif;
        overflow: hidden;
      }
      .custom-map-control-button:hover {
        background: #ebebeb;
      }
      .gm-style-iw-t::after{ background: red !important }
      .gm-style .gm-style-iw-c{background:red !important; box-shadow: none !important;}
      
      .gm-style button img{display:none !important}

    </style>
 
    <script>
      // Note: This example requires that you consent to location sharing when
      // prompted by your browser. If you see the error "The Geolocation service
      // failed.", it means you probably did not give permission for the browser to
      // locate you.
      let map, infoWindow;

      function initMap() {
        map = new google.maps.Map(document.getElementById("map"), {
          center: { lat:, lng: },
          zoom: 6,
        });
        infoWindow = new google.maps.InfoWindow();
        const locationButton = document.createElement("button");
        locationButton.textContent = "Find Driver";
        locationButton.classList.add("custom-map-control-button");
        map.controls[google.maps.ControlPosition.TOP_CENTER].push(
          locationButton
        );
        locationButton.addEventListener("click", () => {
          // Try HTML5 geolocation.
          if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
              (position) => {
                const pos = {
                  lat: ,
                  lng: ,
                };
                infoWindow.setPosition(pos);
                infoWindow.setContent("");
                infoWindow.open(map);
                map.setCenter(pos);
              },
              () => {
                handleLocationError(true, infoWindow, map.getCenter());
              }
            );
          } else {
            // Browser doesn't support Geolocation
            handleLocationError(false, infoWindow, map.getCenter());
          }
        });
      }

      function handleLocationError(browserHasGeolocation, infoWindow, pos) {
        infoWindow.setPosition(pos);
        infoWindow.setContent(
          browserHasGeolocation
            ? "Error: The Geolocation service failed."
            : "Error: Your browser doesn't support geolocation."
        );
        infoWindow.open(map);
      }
    </script>

@section('content')
<div class="main-panel">
        <!-- BEGIN : Main Content-->
        <div class="main-content">
          <div class="content-wrapper">
            <!-- Minimal statistics section start -->
<section id="minimal-statistics">
        <div class="row">
          <div class="col-12 mt-3 mb-1">
            <div class="content-header">Driver Tracking</div>
          </div>
        </div>
 <div id="map"></div>
          {{--<div class="row">
            <div class="col-md-12">

              <div class="card">
                <div class="card-content collpase show">
                  <div class="card-body table-responsive">

                    

                  </div>
                </div>
              </div>

            </div>
          </div>--}}


        <div class="backbutton mt-5"><a href="{{ route('list_lorry') }}">  
            <button type="button" class="btn btn-raised btn-primary round btn-min-width mr-1 mb-1">Back</button></a>
        </div>
      </section>
      <!-- // Minimal statistics section end -->
      <!-- // Minimal statistics section end -->
    </div>
</div>
<!-- END : End Main Content-->

@endsection

@section('scripts')
<script src="{{ asset('app-assets/vendors/js/datatable/datatables.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('app-assets/js/data-tables/datatables-sources.js') }}" type="text/javascript"></script>


  

<script async="false" type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCJA1Ei4gn1Inbw0gzpOQiVmMhbdzjvh6g&libraries=places&callback=initMap"></script>

@endsection