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

  {% block title %}
    <title>Pickup And Dorop off</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' %}">
    <!-- End layout styles -->
    <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">
  <!-- <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css"> -->
  <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="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script  src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map1 {
        height: 10%;
      }





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




  {% 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">
  {% csrf_token %}

<div class="content-wrapper  email-sec-o">


    <h4 class="head-c12">Driver Pickup and Drop-off Details</h4>

<div class="dps-btn ">


          {% if allVehicals %}
           <!--  <div class="dropdown">
          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Vehicle Type 
          </button> -->
          <!-- <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> -->
            
               {% for v in allVehicals %}
               <!-- <a class="dropdown-item" href="18.130.221.132:9090/admin/customerjobs/filter/3/">Bike</a> -->
            <!-- <a class="dropdown-item" href="18.130.221.132:9090/admin/customerjobs/filter/3/">car</a> -->
            <!-- <a class="dropdown-item" href="18.130.221.132:9090/admin/customerjobs/filter/3/">Tampoo</a> -->
                <!-- <a class="dropdown-item" href="/admin/customerjobs/filter/{{v.id}}">{{v.name}}</a> -->
                <!-- <a href="/admin/showalldrivers/filter/{{v.id}}">{{v.name}}</a> -->
               {% endfor %}
             <!-- </div> -->
        <!-- </div> -->
          {% endif %}


          <!-- {% if allVehicals %}
             {% for v in allVehicals %}
              <a href="/admin/showalldrivers/filter/{{v.id}}">{{v.name}}</a>
             {% endfor %}
          {% endif %} -->
               <!-- <a href="/admin/showalldrivers/map/"><button class="btn-c">Show Drivers on Map</button></a> -->
              
          <!-- <div class="dropdown"> -->
         <!-- <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Filter
          </button> -->
         <!-- <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2"> -->
    <!--       <a href="/admin/revenue/Day">Day</a>
          <a href="/admin/revenue/Week">Week</a>
          <a href="/admin/revenue/Month">Month</a>
          <a href="/admin/revenue/Year">Year</a> -->


<!-- <div class="dropdown show">
          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            Filter
          </button>
         <div class="dropdown-menu show" aria-labelledby="dropdownMenuButton2" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 40px, 0px);">
          <a class="dropdown-item" href="/admin/customerjobs/day/">Day</a>
          <a class="dropdown-item" href="/admin/customerjobs/weekly/">Week</a>
          <a class="dropdown-item" href="/admin/customerjobs/month/">Month</a>
          <a class="dropdown-item" href="/admin/customerjobs/year/">Year</a>
           </div>
        </div> -->












          
           <!-- </div> -->
        <!-- </div> -->
             
        </div>
<!-- <div class="row header-2  sec-cat">
              


              <div class="col-md-4 stretch-card grid-margin">
                <div class="card  card-img-holder text-white">
                  
                    <div class="card-body">
                      <img src="/static/assets/images/dashboard/circle.svg" class="card-img-absolute" alt="circle-image">
                      <h4 class="font-weight-normal mb-3">Total Revenue


                         <img src="/static/images/total-avenue.png" class="img-custom">
                      </h4>
                      <h2 class="mb-5">{{totalEarnings}} £</h2>
                    </div>
                  
                </div>
              </div>


              <div class="col-md-4 stretch-card grid-margin">
                <div class="card  card-img-holder text-white">
                  
                    <div class="card-body">
                      <img src="/static/assets/images/dashboard/circle.svg" class="card-img-absolute" alt="circle-image">
                      <h4 class="font-weight-normal mb-3">Total Earnings By Driver
                      
                        <img src="/static/images/travel-3.png" class="img-custom">

                      </h4>
                      <h2 class="mb-5">{{drivercommission}} £</h2>
                    </div>
                  
                </div>
              </div>
              
              <div class="col-md-4 stretch-card grid-margin">
                <div class="card  card-img-holder text-white">
                  
                    <div class="card-body">
                      <img src="/static/assets/images/dashboard/circle.svg" class="card-img-absolute" alt="circle-image">
                      <h4 class="font-weight-normal mb-3">Total Earning By Admin
                        
                         <img src="/static/images/travel-3.png" class="img-custom">

                      </h4>
                      <h2 class="mb-5">{{admincommission}} £</h2>
                    </div>
                  
                </div>
              </div>




            </div> -->

















          <div class="row">
            <div class="col-12 grid-margin">
              <div class="">
                <div class="">
               
                  <div class="table-responsive">
                    {% if title == 'revenue' %}
                    <span id="senderlatitude2" hidden></span>
                      <span id="senderlongitude2" hidden></span>
                      <span id="recipientlatitude2" hidden></span>
                      <span id="recipientlongitude2" hidden></span>
                    <table class="table border-table" id="recent-companies-table">
                      <thead>
                        <tr>
                          <th>Serial No.</th>
                          <th>Customer</th>
                          <th>PickupTime</th>
                          <th>No. of Items</th>
                          <th>Pickup Address</th>
                          <th>DropOff Address</th>
                          <th>Distance</th>
                          <th>Map</th>
                          <!-- <th>Address</th> -->
                        </tr>
                      </thead>
                      <tbody>
                        
                          {% for data in driversData %}
                            <tr>
                              <td>{{forloop.counter}}</td>
                               
                              <td>{{data.customerName}}</td>
                              <td>{{data.pickupTime}} {{data.pickupDate}}</td>
                              <td>{{data.noofitems}}</td>
                              <td>{{data.pickup}}</td>
                              <td>{{data.drop}}</td>
                              <td ><span id="distanceCurrentDriver{{data.id}}"></span>Km</td>
                              <td class="maps-row"><div class="maps-sec" id="mapCurrentDriver{{data.id}}"></div></td>
                              <!-- <td>+44-43563453454</td> -->
                            </tr>
                          {% endfor %}
                           <!--  <tr>
                              <td>1</td>
                            
                              <td>newrecipent</td>
                              <td>777</td>
                              <td>Manager</td>
                            </tr> -->
                         
                          
                          
                          
                          
                          
                        
                      </tbody>
                    </table>
                    {% endif %}
                    {% if title == 'revenueByID' %}
                               <table class="table border-table" id="recent-companies-table">
                      <thead>
                        <tr>
                          <th>Serial No.</th>
                          <th>Customer</th>
                          <th>Total Amount</th>
                         
                          <th>Driver comission</th>
                          <th>Date</th>
                          <!-- <th>Address</th> -->
                        </tr>
                      </thead>
                      <tbody>
                        
                          {% for data in driversData %}
                            <tr>
                              <td>{{data.srno}}</td>
                              <td>{{data.name}}</td>
                              <td>{{data.total}} £</td>
                              <td>{{data.driverComission}} £</td>
                              <td>{{data.Date}}</td>
                              <!-- <td>+44-43563453454</td> -->
                            </tr>
                          {% endfor %}
                        
                      </tbody>
                    </table>
                    {% endif %}
                  </div>
                  {% if driversData.has_other_pages %}
                  <ul class="pagination">
                    {% if driversData.has_previous %}
                      <li><a href="?page={{ driversData.previous_page_number }}">&laquo;</a></li>
                    {% else %}
                      <li class="disabled"><span>&laquo;</span></li>
                    {% endif %}
                    {% for i in driversData.paginator.page_range %}
                      {% if driversData.number == i %}
                        <li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
                      {% else %}
                        <li><a href="?page={{ i }}">{{ i }}</a></li>
                      {% endif %}
                    {% endfor %}
                    {% if driversData.has_next %}
                      <li><a href="?page={{ driversData.next_page_number }}">&raquo;</a></li>
                    {% else %}
                      <li class="disabled"><span>&raquo;</span></li>
                    {% endif %}
                  </ul>
                {% endif %}
                </div>
              </div>
            </div>
          </div>
























</div>
          {% include 'admin_footer.html' %}
        </div>
      </div>
    </div>


<div class="modal fade popup-all" id="MailSends" role="dialog" >
       <div class="modal-dialog">
         <div class="modal-content">
           <!-- <div class="modal-header border-0"> -->
             <!-- <button type="button" class="close" data-dismiss="modal">&times;</button> -->
         <!--   </div> -->
           <div class="modal-body">
            <span class="green-thumb">  <i class="fa fa-thumbs-o-up" aria-hidden="true"></i></span>
             <h3 class="response-msg">Mails Send Sucessfully</h3>
           </div>          
         </div>
       </div>
      </div>
{% endblock %}


{% block js %}
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCZt3wR3ItaSSmIhWnRy4hy6FnqmEM81oY">
    </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 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="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

  <script src="{% static 'js/admin_showalladmins.js' %}" ></script>
  <!-- <script src="https://unpkg.com/@popperjs/core@2" ></script> -->
<script>
// $( "#SendMailsToAllButton" ).on( "click", function() {
//   // debugger;

//   fromMail = $('#frommail').val()
//   textMessage = document.getElementById("mailMSGarea").value;
//   console.log(fromMail)
//   console.log(textMessage)
  
//   var token=$('input[name="csrfmiddlewaretoken"]').val()
//   $.ajax({
//       type: 'POST',
//       url: '/admin/sendMailsDrivers/',
//       data: { 'message' : textMessage, 'from' : fromMail,'csrfmiddlewaretoken' : token},
//       success: function(response){
//         console.log(response);

//         if(response.code == 200)
//         {
//           $('#MailSends').modal('show')
//           setTimeout(function () {
//               location.reload();
//           }, 2000);
//         }
//         else 
//         {
//             alert(response.status_message)
//         }
//       }
//     });
// });


$("#SendMailsToAllButton" ).on( "click", function() {
      subjectFromAdmin = $('#subjectFromAdmin').val()
      mailMSGarea = document.getElementById("mailMSGarea").value;
      title = $('#whichTitle').val()
      console.log(subjectFromAdmin)
      console.log(mailMSGarea)
      var a=$('input[name="csrfmiddlewaretoken"]').val()
      console.log(a)
      $.ajax({
        url: '/admin/sendALLMails/',
        type: "POST",
        data: {'subject':subjectFromAdmin,'message':mailMSGarea,'title':title,'csrfmiddlewaretoken':a},
        cache: false,
        success: function(response){
          console.log(response);
         if(response.code == 200)
          {
            $("#MailSends").modal('show')
            setTimeout(function () {
              location.reload();
          }, 2000);
          }  
         }
       });   
      

});
</script>

<script>
    $( document ).ready(function(){

      {% for data in driversData %}
      initMapForShifDriver2('{{data.id}}','{{data.senderLat}}','{{data.senderLong}}','{{data.recipientLat}}','{{data.recipientLong}}')
      {% endfor %}
      

    });

function initMapForShifDriver2(id,senderLat,senderLong,recipientlatitude,recipientlongitude) {
        $('#senderlatitude2').text(senderLat)
        $('#senderlongitude2').text(senderLong)
        $('#recipientlatitude2').text(recipientlatitude)
        $('#recipientlongitude2').text(recipientlongitude)
        var markerArray = [];
        var directionsService = new google.maps.DirectionsService;
        mapId='mapCurrentDriver'+id.toString();
        console.log(mapId)
        var map = new google.maps.Map(document.getElementById(mapId), {
          zoom: 13,
          center: {lat: 29.1234, lng: 76.1234}
        });
        if (senderLat != '')
        {
          distanceparam='distanceCurrentDriver'+id.toString();
          console.log(distanceparam)
          senderlatitude=senderLat;
          senderlongitude=senderLong;
          document.getElementById(distanceparam).innerText=(distance(senderlatitude,senderlongitude,recipientlatitude, recipientlongitude, 'K'))
          var uluru = {lat: senderlatitude, lng: senderlongitude};
          var marker = new google.maps.Marker({position: uluru, label: {
          text: 'Driver',
          color: "#000000",
          fontSize: "16px",
          fontWeight: "bold"
        }, map: map});
        }else{
          distanceparam='distanceCurrentDriver'+id.toString();
            // $(distanceparam).text('0')
            document.getElementById(distanceparam).innerText='0'
        }
        var directionsRenderer = new google.maps.DirectionsRenderer({map: map});
        var stepDisplay = new google.maps.InfoWindow;
        calculateAndDisplayRouteShiftDriver2(
        directionsRenderer, directionsService, markerArray, stepDisplay, map);
      }

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

        senderlatitude = $('#senderlatitude2').text()
        senderlongitude = $('#senderlongitude2').text()
        recipientlatitude = $('#recipientlatitude2').text()
        recipientlongitude = $('#recipientlongitude2').text()

        var sender = new google.maps.LatLng(senderlatitude, senderlongitude)
        var recipient = new google.maps.LatLng(recipientlatitude, recipientlongitude)
        // alert(sender)
        // alert(recipient)
        directionsService.route({
          origin: sender,
          destination: recipient,
          travelMode: google.maps.DirectionsTravelMode.DRIVING 
        }, function(response, status) {
          if (status === 'OK') {
            
            directionsRenderer.setDirections(response);
            // showSteps(response, markerArray, stepDisplay, map);
          } else {
            // window.alert('Directions request failed due to ' + status);
            var a;
          }
        });
      }

function distance(lat1, lon1, lat2, lon2, unit) {
        var radlat1 = Math.PI * lat1/180
        var radlat2 = Math.PI * lat2/180
        var radlon1 = Math.PI * lon1/180
        var radlon2 = Math.PI * lon2/180
        var theta = lon1-lon2
        var radtheta = Math.PI * theta/180
        var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
        dist = Math.acos(dist)
        dist = dist * 180/Math.PI
        dist = dist * 60 * 1.1515
        if (unit=="K") { dist = dist * 1.609344 }
        if (unit=="N") { dist = dist * 0.8684 }
        return dist.toFixed(2);
}

  </script>
{% endblock %}