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

  {% block title %}
    <title>Prority Based Parcels</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://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%;
      }


      [draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}


.driver-assign-jobs .item.parceldiv-c {

    display: flex;
    width: 100%;
    justify-content: space-between;



 /*   width: 200px;
    height: 30px;
    line-height: 30px;
    background: RGBA(180, 180, 180, 1);
    margin: 5px 0;*/
}



.driver-assign-jobs .all-data{

margin-top: 50px;

}

.driver-assign-jobs .parceldiv-c span {
    font-weight: 600;
    width: 19%;
}
.driver-assign-jobs span.c {
    width: 16%;
    text-align: left;
    position: relative;
    left: 10px;
        font-weight: 400;
}

.driver-assign-jobs .maps-row .maps-sec {
    width: 100% !important;
    height: 200px !important;
}


.driver-assign-jobs .head-c12 {
    font-size: 22px !important;
    line-height: 33px;
    color: #9a55ff;
    text-align: center;
}



.driver-assign-jobs .all-data {
        margin-top: 50px;
    border: 1px solid #dddcdc;
    padding: 12px;
    margin-bottom: 22px;
    border-radius: 7px;
}






      /* 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 %}


<!-- <a type="button" href=""> -->
<div class="content-wrapper  email-sec-o driver-assign-jobs   view-jobs-c">

<div class="row">
  <div class="col-md-12 text-right">

    <a href="/admin/customerjob/{{viewJobId}}" target="_blank" class="view-dets-c">View Job Details</a>

</div>

</div>




<div class="row  table-row  view-priority">
                 <div class=" col-12 grid-margin">


    <h4 class="head-c12 ">Priority Based Parcel</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>
        </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">
              {% if listisEmpty != 'yes' %}
              <div class="">
                <div class="">

                  <div id="list"   class="all-datac" >
                     <div class="item parceldiv-c">





                      <span>Serial No.</span>
                      <span>Sender Name</span>
                      <span>Recipient Name</span>
                      <span>Date of Pickup</span>
                      
                      <span>Pickup Time Slot</span>
                      <span>Drop-Off Time Slot</span>
                      <span>Distance</span>
                      <span>Map</span>
                  </div>
                    {% for data in driversData %}
                    <input type="hidden" id="fixedValueOfPrority{{data.priorityBaseIDForParcel}}" value="{{data.priorityBaseIDForParcel}}"/>
                    <div  class="parceldiv" id="parcelIDfordragdiv{{data.priorityBaseIDForParcel}}">
                      
                      <div class="item parceldiv-c   parcel-v" draggable="true">
                        <input type="hidden"  value="{{data.id}}"/>
                        <span id="senderlatitude2" hidden></span>
                        <span id="senderlongitude2" hidden></span>
                        <span id="recipientlatitude2" hidden></span>
                        <span id="recipientlongitude2" hidden></span>
                               
                               <span class="c">{{forloop.counter}}</span>
                              <span class="c">{{data.customerName}}</span>
                              <span class="c">{{data.recipientName}}</span>
                              <span class="c">{{data.dateOFPickup}}</span>
                               <span class="c">{{data.pickupSlot}}</span>
                              <span class="c">{{data.dropSlot}}</span>
                             <span class="c"><span id="distanceCurrentDriver{{data.id}}"></span>Km</span>
                              <span class="maps-row"><div class="maps-sec" id="mapCurrentDriver{{data.id}}"></div></span>
                        </div>
                      </div>
                    {% endfor %}
                  </div>
                  <!-- <div class="table-responsive">
                    
                    <table class="table border-table" id="recent-companies-table">
                      <span id="senderlatitude2" hidden></span>
                      <span id="senderlongitude2" hidden></span>
                      <span id="recipientlatitude2" hidden></span>
                      <span id="recipientlongitude2" hidden></span>
                      <thead>
                        <tr>
                          <th>Serial No.</th>
                          <th>Sender Name</th>
                          <th>Recipient Name</th>
                          <th>Date of Pickup</th>
                          <th>Parcel Priority</th>
                          <th>Distance</th>
                          <th>Map</th>
                        </tr>
                      </thead>
                      <tbody>
                        
                          {% for data in driversData %}
                            <tr>
                              <td>{{forloop.counter}}</td>
                               
                              <td>{{data.customerName}}</td>
                              <td>{{data.recipientName}}</td>
                              <td>{{data.dateOFPickup}}</td>
                              <td>

                                <span id="addDropDown{{forloop.counter}}"></span>
                               <input type="hidden" value="{{data.id}}" id="idofJob{{data.priorityBaseIDForParcel}}"/>
                               <select class="based-drops" id="selectedDropdown{{data.priorityBaseIDForParcel}}">
                               {% for j in countLoop %}
                               {% if j == data.priorityBaseIDForParcel %}
                               <option value="{{j}}" selected>{{j}}</option>
                               {% else %}
                               <option value="{{j}}">{{j}}</option>
                               {% endif %}
                               {% endfor %}
                               </select>


                              </td>
                              <td ><span id="distanceCurrentDriver{{data.id}}"></span>Km</td>
                              <td class="maps-row"><div class="maps-sec" id="mapCurrentDriver{{data.id}}"></div></td>
                            </tr>
                          {% endfor %}
                          
                          
                        
                      </tbody>
                    </table>
                    
                    
                  </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>
              <span id="requiredError">The Priority Should Not be Same</span>
                    <button id="savePriority">Save</button>
                    {% else %}
                    <h4>No Data Found</h4>
                    {% endif %}





            </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">Update 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://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="{% static 'js/admin_showallcustomerjobs.js' %}" ></script> -->
  <script src="https://unpkg.com/@popperjs/core@2" ></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>

$( "#savePriority2" ).on( "click", function() {
                          console.log("one")
                          passed=true
                          allArray2=[]
                          console.log('{{countLoop}}')
                          {% for count in countLoop %}
                          allArray2.push({{count}});
                          {% endfor %}
                          allArray=[]
                    for (x of allArray2){
                        var newID="selectedDropdown"+x.toString()
                        var jobid="idofJob"+x.toString()
                        console.log(newID)
                        console.log(jobid)
                        EveryValue=document.getElementById(newID).value;
                        jobidValue=document.getElementById(jobid).value;
                        if (allArray.includes(EveryValue))
                          {
                            console.log('Not Allowed')
                            passed=false
                            // document.getElementById('requiredError').style('visibility':'visible')
                            return false;
                          }
                          else{

                            console.log('Allowed')
                            allArray.push(EveryValue);
                        }
                      }
            console.log(allArray)
              allDataSend=[]
              if(passed=true)
              {
                for (x of allArray2){
                var newID="selectedDropdown"+x.toString()
                console.log(newID)
                var jobid="idofJob"+x.toString()
                console.log(jobid)
                EveryValue=document.getElementById(newID).value;
                jobidValue=document.getElementById(jobid).value;
                myjson={"job":jobidValue, "priority":EveryValue}
                allDataSend.push(myjson)

                var token = $('input[name="csrfmiddlewaretoken"]').val()
                console.log(token)
              }

              $.ajax({
                    type: 'POST',
                    url: '/admin/changePriority/',
                    data: { 'data_ids':JSON.stringify(allDataSend),'csrfmiddlewaretoken': '{{ csrf_token }}' },
                    success: function(response){
                      console.log(response);
                      if(response.status_code == 200)
                      { 
                        console.log("done")
                        $("#MailSends").modal('show')
                        setTimeout(function () {
                              location.reload()
                            }, 2000);
                      }
                      else
                      {
                        console.log("Failed")
                      }
                    }
                  });


              console.log(allDataSend)
            }

return true;
}); 


$( "#savePriority" ).on( "click", function() {
                          console.log("one")
                          passed=true
                          allArray2=[]
                          console.log('{{countLoop}}')
                          {% for count in countLoop %}
                          allArray2.push({{count}});
                          {% endfor %}
                          allArray=[]
                          allDataSend=[]
                    for (x of allArray2){
                        var prorityidForDiv="fixedValueOfPrority"+x.toString()
                        var DivrealValueID="parcelIDfordragdiv"+x.toString()
                        console.log(prorityidForDiv)
                        console.log(DivrealValueID)
                        EveryValue=document.getElementById(prorityidForDiv).value;
                        jobidValue=document.getElementById(DivrealValueID);
                        var child = jobidValue.firstChild;
                          while(child && child.nodeType !== 1) {
                              child = child.nextSibling;
                          }
                        var child2 = child.firstChild;
                          while(child2 && child2.nodeType !== 1) {
                              child2 = child2.nextSibling;
                          }
                         valueofJobs=child2.value   
                        myjson={"job":valueofJobs, "priority":EveryValue}
                        allDataSend.push(myjson)
                      }
                      var token = $('input[name="csrfmiddlewaretoken"]').val()
                      console.log(token)
                      console.log(allDataSend)
                      $.ajax({
                    type: 'POST',
                    url: '/admin/changePriority/',
                    data: { 'data_ids':JSON.stringify(allDataSend),'csrfmiddlewaretoken': '{{ csrf_token }}' },
                    success: function(response){
                      console.log(response);
                      if(response.status_code == 200)
                      { 
                        console.log("done")
                        $("#MailSends").modal('show')
                        setTimeout(function () {
                              location.reload()
                            }, 2000);
                      }
                      else
                      {
                        console.log("Failed")
                      }
                    }
                  });

return true;
}); 




</script>
<script>

$("#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 %}
      console.log('{{data.driver_latitude}}')
      initMapForShifDriver2('{{data.driver_latitude}}','{{data.driver_longitude}}','{{data.id}}','{{data.senderLat}}','{{data.senderLong}}','{{data.recipientLat}}','{{data.recipientLong}}')
      {% endfor %}
      

    });

function initMapForShifDriver2(driver_latitude,driver_longitude,id,senderLat,senderLong,recipientlatitude,recipientlongitude) {



         // driver_latitude=parseInt(driver_latitude);
         // driver_longitude=parseInt(driver_longitude);
         // id=parseInt(id);
         // senderLat=parseInt(senderLat);
         // senderLong=parseInt(senderLong);
         // recipientlatitude=parseInt(recipientlatitude);
         // recipientlongitude=parseInt(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 (driver_latitude != '')
        {
          distanceparam='distanceCurrentDriver'+id.toString();
          console.log(distanceparam)
          // senderlatitude='#senderlatitude'+id.toString();
          // senderlongitude='#senderlongitude'+id.toString();
          senderlatitude=senderLat;
          senderlongitude=senderLong;
        // $('#distanceCurrentDriver').text(distance($('#senderlatitude').text(), $('#senderlongitude').text(), driver_latitude, driver_longitude, 'K'))
          // $(distanceparam).text(distance(senderlatitude,senderlongitude,driver_latitude, driver_longitude, 'K'))
          document.getElementById(distanceparam).innerText=(distance(senderlatitude,senderlongitude,recipientlatitude, recipientlongitude, 'K'))
          var uluru = {lat: recipientlatitude, lng: recipientlongitude};
          var marker = new google.maps.Marker({position: uluru, label: {
          text: 'Driver',
          // color: "#eb3a44",
          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>
  <script>
 var dragSrcEl = null;

function handleDragStart(e) {
  this.style.opacity = '0.4';
    
  dragSrcEl = this;

  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/html', this.innerHTML);
  e.dataTransfer.setData('text/text', 'id');
}

function handleDragOver(e) {
  if (e.preventDefault) {
    e.preventDefault(); // Necessary. Allows us to drop.
  }
    
  e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.

  return false;
}

function handleDragEnter(e) {
  // this / e.target is the current hover target.
  this.classList.add('over');
}

function handleDragLeave(e) {
  this.classList.remove('over');  // this / e.target is previous target element.
}

function handleDrop(e) {
  // this / e.target is current target element.

  if (e.stopPropagation) {
    e.stopPropagation(); // stops the browser from redirecting.
  }

  // Don't do anything if dropping the same column we're dragging.
  if (dragSrcEl != this) {
    // Set the source column's HTML to the HTML of the column we dropped on.
    dragSrcEl.innerHTML = this.innerHTML;
    this.innerHTML = e.dataTransfer.getData('text/html');
      console.log(e.dataTransfer.getData('text/text'));
  }

  return false;

  return false;
}

function handleDragEnd(e) {
  // this/e.target is the source node.

  [].forEach.call(items, function (item) {
    item.style.opacity = '1';
    item.classList.remove('over');
  });
}

var items = document.querySelectorAll('#list .item');
[].forEach.call(items, function(item) {
  item.addEventListener('dragstart', handleDragStart, false);
  item.addEventListener('dragenter', handleDragEnter, false);
  item.addEventListener('dragover', handleDragOver, false);
  item.addEventListener('dragleave', handleDragLeave, false);
  item.addEventListener('drop', handleDrop, false);
  item.addEventListener('dragend', handleDragEnd, false);
});  

 </script> 
{% endblock %}