{% extends 'base.html' %}
{% load static %}

  {% block title %}
    <title>My Jobs</title>
  {% endblock %}

  {% block css %}
<link rel="stylesheet" href="{% static 'assets/vendors/mdi/css/materialdesignicons.min.css' %}">
  <link rel="stylesheet" href="{% static 'assets/vendors/css/vendor.bundle.base.css' %}">
  <link rel="stylesheet" href="{% static 'assets/css/style.css' %}">
  <link rel="shortcut icon" href="{% static 'assets/images/favicon.png' %}" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  {% endblock %}


  {% block content %}
    <div class="container-scroller">
       {% include 'admin_header.html' %}
       <div class="container-fluid page-body-wrapper">
          {% include 'admin_sidebar.html' %}


          <div class="main-panel">
              <div id="map" class="map-driver-admin-all"  style="height:40%;"></div>
              



              
              <div class="content-wrapper placehoder-sec my-jobs">


           <div class="page-header justify-content-center">
            <h3 class="page-title  text-sec">{{header_title}}</h3>
          </div>

  
             <div class="col-md-12 grid-margin ">
                <div class="">
                   <div class="">
                      
                      <div class="table-responsive">
                         <table class="table  driver-jobs" id="recent-companies-table">
                            <thead>
                               <tr>
                                  <th>Parcel Image</th>
                                  <th>Sender Name</th>
                                  <th>Pickup Address</th>
                                  <th>Recipient Name</th>
                                  <th>Drop Address</th>
                                  <th>Status</th>
                                  <th></th>
                               </tr>
                            </thead>
                            <tbody>
                               {% if all_driverjobs %}
                               {% for driverjob in all_driverjobs %}
                               <tr>
                                  <td><img src="{% if driverjob.image %}{{driverjob.image}}{% else %}http://13.126.26.12/static/images/open-parcel-1.png{% endif %}"></td>
                                  <td><a href="/driver/customerjobdetail/{{driverjob.customerjobid}}" target="_blank">{{driverjob.sendername}}</a></td>
                                  <td>{{driverjob.senderpickupaddress}}</td>
                                  <td>{{driverjob.recipientname}}</td>
                                  <td>{{driverjob.recipientdropoffaddress}}</td>
                                  <td>{{driverjob.status}}</td>
                                  <td>
                                     <span class="driverjob_id" hidden>{{driverjob.id}}</span>
                                  </td>
                               </tr>
                               {% endfor %}
                               {% endif %}
                            </tbody>
                         </table>
                      </div>
                   </div>
                </div>
             </div>
            
       
        </div>
         {% include 'admin_footer.html' %}
       </div>
    </div>
     </div>
  {% endblock %}


  {% block js %}
   <!--  // <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    // <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> -->
    <script src="{% static 'js/myjobs.js' %}"></script>
      <script src="{% static 'js/placeorder.js' %}"></script>
    <script src="{% static 'assets/vendors/js/vendor.bundle.base.js' %}"></script>
    <script src="{% static 'assets/vendors/chart.js/Chart.min.js' %}"></script>
    <script src="{% static 'assets/js/off-canvas.js' %}"></script>
    <script src="{% static 'assets/js/hoverable-collapse.js' %}"></script>
    <script src="{% static 'assets/js/misc.js' %}"></script>
    <script src="{% static 'assets/js/dashboard.js' %}"></script>
    <script src="{% static 'assets/js/todolist.js' %}"></script>
    
    <script>
// Initialize and add the map
function initMap() {
  // debugger;
  {% if driverlatitude %}
    var uluru = {lat: {{driverlatitude}}, lng: {{driverlongitude}}};
  {% else %}
    var uluru = {lat: {{tracking_data.0.latitude}}, lng: {{tracking_data.0.longitude}}};
  {% endif %}
  
  var map = new google.maps.Map(
  document.getElementById('map'), {zoom: 25, center: uluru});
      
  var directionsService = new google.maps.DirectionsService();
  var directionsDisplay = new google.maps.DirectionsRenderer();
  directionsDisplay.setMap(map);
  var request = {   travelMode: google.maps.TravelMode.DRIVING, optimizeWaypoints: true, waypoints: []  };

  // Listen for click on map
  google.maps.event.addListener(map, 'click', function(event){
    // Add marker
    addMarker({coords:event.latLng});
  });


  var markers = []
          {% for location in tracking_data %}
              markers.push({
                coords:{lat:{{location.latitude}},lng:{{location.longitude}}},
                    iconImage:'http://52.15.229.165/nconf/google_images/cctv-32YelS.png',
                    content:'{% autoescape off %}{{location.typeplusaddress}}{% endautoescape %}'
              })
          {% endfor %}
console.log(markers)
for(var i = 0;i < markers.length;i++){
                // Add marker
                addMarker(markers[i]);
              }

              // Add Marker Function
              function addMarker(props){
                var marker = new google.maps.Marker({
                  position:props.coords,
                  map:map,
                  icon:props.iconImage
                });

                // Check for customicon
                if(props.iconImage){
                  // Set icon image
                  marker.setIcon(props.iconImage);
                }

                // Check content
                if(props.content){
                  alert(props.content)
                  var infoWindow = new google.maps.InfoWindow({
                    content:props.content
                  });

                  // marker.addListener('click', function(){
                  //   infoWindow.open(map, marker);
                  // });
                  google.maps.event.addListener(marker, 'click', (function () {
                      infowindow.open(map, marker);
                  }));
                }     
                if (i === 0) { 
                    request.origin = props.coords; 
                }
                else if (i === markers.length - 1) {
                    request.destination = props.coords;
                    }
                    else {
                        if (props.coords) {
                        request.waypoints.push({
                        location: props.coords,
                        stopover: true
                            })
                        }

                    }
                //End of Add Marker Function
                }
            directionsService.route(request,function(response,status){
                if (status == "OK"){
                    directionsDisplay.setDirections(response)
                }
            })
}


        

    </script>
    <!-- <script>

      
      function initMap() {
       var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 12.5657, lng: 104.9910},
          zoom: 8
        });

        //add marker
        var marker = new.google.maps.Marker({
          position:{
            lat:11.5564,
            lng:104.9282
          },
          map:map
        });

        // var markerArray = [];
        // var directionsService = new google.maps.DirectionsService;
        // var map = new google.maps.Map(document.getElementById('map'), {
        //   zoom: 13,
        //   center: {lat: 29.1234, lng: 76.1234}
        // });
        // var directionsRenderer = new google.maps.DirectionsRenderer({map: map});
        // var stepDisplay = new google.maps.InfoWindow;
        // calculateAndDisplayRoute(
        //     directionsRenderer, directionsService, markerArray, stepDisplay, map);
        
      }

      
      // function calculateAndDisplayRoute(directionsRenderer, directionsService,
      //     markerArray, stepDisplay, map) {
      //   for (var i = 0; i < markerArray.length; i++) {
      //     markerArray[i].setMap(null);
      //   }

      //   directionsService.route({
      //     origin: '29.1234, 76.1234',
      //     destination: '30.1234, 76.1234',
      //     travelMode: 'WALKING'
      //   }, function(response, status) {
      //     if (status === 'OK') {
      //       document.getElementById('warnings-panel').innerHTML =
      //           '<b>' + response.routes[0].warnings + '</b>';
      //       directionsRenderer.setDirections(response);
      //       // showSteps(response, markerArray, stepDisplay, map);
      //     } else {
      //       window.alert('Directions request failed due to ' + status);
      //     }
      //   });
      // }
      
    </script> -->
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCZt3wR3ItaSSmIhWnRy4hy6FnqmEM81oY&callback=initMap">
    </script>

  {% endblock %}