{% extends 'base.html' %}
{% load static %}
{% block title %}
<title>Place Order</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">
<link rel="stylesheet" href="{% static 'css/intlTelInput.css' %}" >
<script src="{% static 'js/intlTelInput.js' %}"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCZt3wR3ItaSSmIhWnRy4hy6FnqmEM81oY&libraries=places"></script>
<style>
  .StripeElement {
    box-sizing: border-box;

    height: 40px;
    width: 400px;

    padding: 10px 12px;

    border: 1px solid transparent;
    border-radius: 4px;
    background-color: white;

    box-shadow: 0 1px 3px 0 #e6ebf1;
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
  }

.StripeElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
  border-color: #fa755a;
}

.StripeElement--webkit-autofill {
  background-color: #fefde5 !important;
}

</style>
{% endblock %}
{% block content %}


<div id="loading-img" style="display:none;">
  <img src="{% static 'images/loading-f2.gif' %}">
 </div>


<div class="container-scroller">
   {% include 'customer_header.html' %}
   <div class="container-fluid page-body-wrapper">
      {% include 'customer_sidebar.html' %}
      <div class="main-panel place-order">
         <div class="content-wrapper placehoder-sec placeorder-sec-2">

          <div class="row">

            <div class="col-md-7">

              <div class="page-header justify-content-end">
                 <h3 class="page-title  text-sec">SEND A PARCEL</h3>
              </div>
            </div>
            <div class="col-md-5">
               <div class="repeat-sec text-right">

                               <!--   <a href="#" class="dash_add_more_sites" title="Add form" data-toggle="tooltip"  data-placement="bottom" data-original-title="Add form"> <i class="mdi mdi-plus menu-icon" aria-hidden="true"></i></a> -->

                               <a href="#" class="dash_add_more_sites isdisabledbtn" id="addnewparcel-btn"> <i class="mdi mdi-plus menu-icon" aria-hidden="true"></i> Create New Parcel </a>
              </div>
            </div>
              </div>
          <div class="row">
            <div class="col-md-12 grid-margin ">
               <div class="container">
                  <div class="row">
                     <div class="col-md-12 ">
                        <nav>
                           <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
                              <a class="nav-item nav-link active" id="sd" data-toggle="tab" href="#sender-details" role="tab" aria-controls="nav-home" aria-selected="true">Sender Details</a>
                              <a class="nav-item nav-link isdisabled" id="rd" data-toggle="tab" href="#recipient-details" role="tab" aria-controls="nav-profile" aria-selected="false">Recipient Details
                              </a>
                              <a class="nav-item nav-link isdisabled" id="pd" data-toggle="tab" href="#parcel-details" role="tab" aria-controls="nav-contact" aria-selected="false">Parcel Details
                              </a>
                              <a class="nav-item nav-link isdisabled" id="paymentd" data-toggle="tab" href="#payment-details" role="tab" aria-controls="nav-about" aria-selected="false">Payment Details
                              </a>
                           </div>
                           
                        </nav>

                        <div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">


                           <div class="tab-pane fade show active" id="sender-details" role="tabpanel" aria-labelledby="nav-home-tab">
                              <div class="row">
                                 <div class="col-sm-6">
                                    <div class="form-group col-sm-12">
                                       <label for="sendername">Name</label>
                                       <input type="text" class="form-control" id="sendername" placeholder="">
                                       <span class="text-danger" id="sendername_txt"></span>
                                    </div>
                                    <div class="form-group driver-profile-n col-sm-12">
                                       <label for="senderphone">Phone Number</label>
                                       <input type="email" class="form-control" id="senderphone" placeholder="">
                                       <span class="text-danger" id="senderphone_txt"></span>
                                    </div>
                                    <div class="form-group col-sm-12">
                                       <label for="pickupaddress">Pick Up Address</label>
                                       <input type="text" class="form-control" id="pickupaddress" placeholder="">
                                       <button type="button" class="get-location get-location-2" onclick="getLocation()"><i class="mdi mdi-navigation menu-icon"></i> Get Current Location</button>
                                       <span class="text-danger" id="pickupaddress_txt"></span>
                                    </div>
                                   
                                 </div>
                                 <div class="col-sm-6">
                                    <div class="form-group col-sm-12">
                                       <label for="currentlocation">Current Location</label>
                                       <input type="text" class="form-control" id="currentlocation" placeholder="">
                                       <span class="text-danger" id="currentlocation_txt"></span>
                                    </div>
                                    
                                    <div class="form-group col-sm-12">
                                       <label for="sendercity">City</label>
                                       <input type="text" class="form-control" id="sendercity" placeholder="">
                                       <span class="text-danger" id="city_txt"></span>
                                    </div>
                                    <div class="form-group col-sm-12">
                                       <label for="noofparcels">Number of Parcels</label>
                                       <input type="text" class="form-control" id="noofparcels" placeholder="">
                                       <span class="text-danger" id="noofparcels_txt"></span>
                                    </div>



                                 </div>
                              </div>

                              
                              <!-- <div class="repeat-sec">

                                 <a href="#" class="dash_add_more_sites" data-toggle="tooltip"  data-placement="right" data-original-title="Add More"> <i class="mdi mdi-plus menu-icon" aria-hidden="true"></i></a>

                              </div> -->



                                   


                                    <div class="save-creds">

                                        

                                            <div class="card-n"> 76767676766 </div>
                                            <div class="Expiry Date"> Varis </div>

                                            <div class="Expiry Date"> 07/2020 </div>
                                            <div class="cvv"> 0678 </div>


                                      </div> 
















                              <div class="col-md-12 text-right">
                                 <button type="button" class="btn btn-gradient-primary mr-2 next-1  next-56" onclick="checksd();">Next</button>
                              </div>
                           </div>




                           <div class="tab-pane fade" id="recipient-details" role="tabpanel" aria-labelledby="nav-profile-tab">
                              <div class="row">
                                 <div class="col-sm-6">
                                    <div class="form-group col-sm-12">
                                       <label for="recipientname">Name</label>
                                       <input type="text" class="form-control" id="recipientname" placeholder="">
                                       <span class="text-danger" id="recipientname_txt"></span>
                                    </div>
                                    <div class="form-group driver-profile-n col-sm-12">
                                       <label for="recipientphone">Phone Number</label>
                                       <input type="email" class="form-control" id="recipientphone" placeholder="">
                                       <span class="text-danger" id="recipientphone_txt"></span>
                                    </div>
                                   
                                 </div>
                                        <div class="col-sm-6">

                                          <div class="form-group col-sm-12">
                                       <label for="dropaddress">Drop Address</label>
                                       <input type="text" class="form-control" id="dropaddress" placeholder="">
                                       <span class="text-danger" id="dropaddress_txt"></span>
                                    </div>

                                        </div>


                              </div>
                              <div class="col-md-12 text-right two-btn">
                                 <button type="button" class="btn btn-gradient-primary mr-2 next-1" onclick="shift_to_sender();" >Back</button>
                                 <button type="button" class="btn btn-gradient-primary mr-2 next-1" onclick="checkrd();" >Next</button>
                              </div>
                           </div>
                           <div class="tab-pane fade upload-file-c" id="parcel-details" role="tabpanel" aria-labelledby="nav-contact-tab">

                             <div class="row">

                               <div class="col-sm-12">
                                          <!-- <form action="" method="post"> -->
                           <div class="preview text-left">
                               <img class="preview-img" id="parcel-show-image" src="/static/images/icon-34.png" alt="Preview Image" width="200" height="200"/>
                               <div class="browse-button">
                                   <i class="mdi mdi-pencil  menu-icon"></i>
                                   <input class="browse-input" type="file" required name="UploadedFile" id="UploadedFile" onchange="editpreviewFile()" accept="image/*"/>
                                   <input id="parcel-image-srcdata" hidden>
                               </div>
                              
                           </div>
                               <!-- </form> -->
                               </div>

                             </div>


                              <div class="row">
                                 <div class="col-sm-6">
                                    <div class="form-group col-sm-12">
                                       <label for="parcellength">Length</label>
                                       <input type="text" class="form-control" id="length" placeholder="">
                                       <span class="text-danger" id="length_txt"></span>
                                    </div>
                                    <div class="form-group col-sm-12">
                                       <label for="parcelwidth">Width</label>
                                       <input type="text" class="form-control" id="width" placeholder="">
                                       <span class="text-danger" id="width_txt"></span>
                                    </div>
                                    <div class="form-group col-sm-12">
                                       <label for="parcelheight">Height</label>
                                       <input type="email" class="form-control" id="height" placeholder="">
                                       <span class="text-danger" id="height_txt"></span>
                                    </div>
                                    
                                 </div>

                                  <div class="col-sm-6">

                                    <div class="form-group col-sm-12">
                                       <label for="parcelweight">Weight</label>
                                       <input type="text" class="form-control" id="weight" placeholder="">
                                       <span class="text-danger" id="weight_txt"></span>
                                    </div>
                                    <div class="form-group col-sm-12">
                                       <label for="parceltype">Parcel Type</label>
                                       <input type="text" class="form-control" id="parceltype" placeholder="">
                                       <span class="text-danger" id="parceltype_txt"></span>
                                    </div>
                                    <div class="form-group col-sm-12">
                                       <label for="specialnote">Special Note</label>
                                       <textarea class="form-control" id="specialnote"></textarea>
                                       <span class="text-danger" id="specialnote_txt"></span>
                                    </div>
                                  </div>




                              </div>
                              <div class="col-md-12 text-right two-btn back-next-btns">
                                 <button type="button" class="btn btn-gradient-primary mr-2 next-1" onclick="shift_to_recipient();" >Back</button>
                                 <button type="button" class="btn btn-gradient-primary mr-2 next-1" id="get-rates" onclick="checkpd();" >Next</button>
                              </div>
                           </div>
                           <div class="tab-pane fade  payment-t payment-t-1" id="payment-details" role="tabpanel" aria-labelledby="nav-about-tab">
                              <div class="row">
                                 <div class="col-md-12">
                                    <ul class="circle_lst ">
                                       <!-- <li class="new-sec add-icon selected">
                                          <a class="d-flex justify-content-between flex-column" href="#" data-toggle="modal" data-target="#TeamMemeberModalCenter">
                                             <div class="img-div">
                                                <img src="http://13.126.26.12/static/images/car.png">
                                             </div>
                                             <div class="price-details">
                                                <span >$350</span>
                                             </div>
                                          </a>
                                       </li>
                                       <li class="new-sec add-icon">
                                          <a class="d-flex justify-content-between flex-column" href="#" data-toggle="modal" data-target="#TeamMemeberModalCenter">
                                             <div class="img-div">
                                                <img src="http://13.126.26.12/static/images/truck.png">
                                             </div>
                                             <div class="price-details">
                                                <span >$330</span>
                                             </div>
                                          </a>
                                       </li>
                                       <li class="new-sec add-icon">
                                          <a class="d-flex justify-content-between flex-column" href="#" data-toggle="modal" data-target="#TeamMemeberModalCenter">
                                             <div class="img-div">
                                                <img src="http://13.126.26.12/static/images/cycle-9.png">
                                             </div>
                                             <div class="price-details">
                                                <span >$350</span>
                                             </div>
                                          </a>
                                       </li>
                                       <li class="new-sec add-icon">
                                          <a class="d-flex justify-content-between flex-column" href="#" data-toggle="modal" data-target="#TeamMemeberModalCenter">
                                             <div class="img-div">
                                                <img src="http://13.126.26.12/static/images/car.png">
                                             </div>
                                             <div class="price-details">
                                                <span >$350</span>
                                             </div>
                                          </a>
                                       </li>
                                       <li class="new-sec add-icon">
                                          <a class="d-flex justify-content-between flex-column" href="#" data-toggle="modal" data-target="#TeamMemeberModalCenter">
                                             <div class="img-div">
                                                <img src="http://13.126.26.12/static/images/car.png">
                                             </div>
                                             <div class="price-details">
                                                <span >$350</span>
                                             </div>
                                          </a>
                                       </li>  -->
                                    </ul>
                                    {% csrf_token %}
                                    <!-- Stripe Form Start -->

                                   <div class="details-all">
                                        <div class="amount-all">
                                         <span class="amount-text"> Amount </span> <span class="small-icon"> : </span> <span class="amount-value" id="amount-price">0</span>
                                        </div>
                                        <div class="amount-all">
                                         
                                         <span class="amount-text"> Extra Charges </span> <span class="small-icon"> : </span> <span class="amount-value" id="extracharges-price">0</span>


                                        </div>

                                        <div class="amount-all">
                                         
                                         <span class="amount-text"> Total </span> <span class="small-icon"> : </span> <span class="amount-value" id="total-price">0</span>


                                        </div>
                                        <span id="selected-vehicletype" hidden></span>
                                        <span id="parcels_data" hidden></span>




                                   </div>


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

                                    <form action="#" method="post" id="payment-form">
                                      <div class="form-group form-row">
                                        <label for="card-element">
                                          Credit or debit card
                                        </label>
                                        <div id="card-element">
                                          <!-- A Stripe Element will be inserted here. -->
                                        </div>

                                        <!-- Used to display form errors. -->
                                        <div id="card-errors" role="alert"></div>
                                      </div>
                                      
                                      <!-- <button>aaa</button> -->
                                    </form>
                                     </div>

                                  <!--    <div class="col-md-4">

                                      <div class="side-div">

                                      <div class="form-group col-sm-12">
                                     
                                       <input type="text" class="form-control" id="sendername" placeholder="">
                                       <span class="text-danger" id="sendername_txt"></span>
                                    </div>
                                     </div>
                                     
                                     </div> 
 -->
                                  </div>







                                       <div class="save-creds">



                                            <div class="card-n"> 76767676766 </div>
                                            <div class="Expiry Date"> Varis </div>

                                            <div class="Expiry Date"> 07/2020 </div>
                                            <div class="cvv"> 0678 </div>


                                      </div>










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

                                       <button type="button" class="get-rates btn btn-gradient-primary mr-2 next-1" onclick="shift_to_parcel();">Back
                                       </button>
                                        <input type="button" class="get-location isdisabledbtn" id="payment-btn" onclick="checkpaymentd();" value="Submit Payment " />
                                    </div>
                                    </div>

<!-- 
                                    <form action="#" method="post" id="payment-form">{% csrf_token %}
                                       <div class="form-group form-row">
                                          <label for="card-element">      
                                          </label>
                                          <div id="card-element" class="w-100">
                                          </div>
                                          <div id="card-errors" role="alert"></div>
                                       </div>
                                       <input type="button" onclick="shift_to_parcel();" value="Back" />
                                          <input type="button"  id="payment-btn" class="float-none" onclick="checkpaymentd();" value="Submit Payment " />
                                    </form>
 -->


                                    <!-- Stripe Form End -->
                                    
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>

         </div>

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






<div class="modal fade login-popup-1 error-popup" id="ErrorMessageModal" 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">
           <h3 id="error-msg"></h3>
           <button type="button"  id="close-btn">Ok</button>
         </div>          
       </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/customer/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 type="text/javascript" src="https://js.stripe.com/v3/"></script>
<!-- <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> -->

<script>
$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip();
});
</script>

<script>
  function editpreviewFile() {
  var preview = document.querySelector('#parcel-show-image');
  var file    = document.querySelector('#UploadedFile').files[0];
  var reader  = new FileReader();

  reader.addEventListener("load", function () {
    // alert(reader.result);
    $('#parcel-image-srcdata').val(reader.result)
    preview.src = reader.result;
// console.log(reader.result);
return false;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}

  function getLocation()
        {
            navigator.geolocation.getCurrentPosition(
                function( position ){ 
                    
                    var lat = position.coords.latitude;
                    var lng = position.coords.longitude;
                    var google_map_pos = new google.maps.LatLng( lat, lng );

                    
                    var google_maps_geocoder = new google.maps.Geocoder();
                    google_maps_geocoder.geocode(
                        { 'latLng': google_map_pos },
                        function( results, status ) {
                            if ( status == google.maps.GeocoderStatus.OK && results[0] ) {
                                console.log( results[0].formatted_address );
                                $('#pickupaddress').val(results[0].formatted_address)
                            }
                        }
                    );
                },
                function(){ // fail cb
                }
            );
        }
</script>
<script>
   // debugger;
var stripe = Stripe('pk_test_jcpiS2SciysFKUXsUJ8e6e6f00NUHMnNSW'); //test publishable key

    
  var elements = stripe.elements();

var style = {
  base: {
    color: '#32325d',
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSmoothing: 'antialiased',
    fontSize: '16px',
    '::placeholder': {
      color: '#aab7c4'
    }
  },
  invalid: {
    color: '#fa755a',
    iconColor: '#fa755a'
  }
};

// Create an instance of the card Element.
var card = elements.create('card', {hidePostalCode: true,style: style});

// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');

// Handle real-time validation errors from the card Element.
card.addEventListener('change', function(event) {
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});








function checkpaymentd(event)
  {     

      var pickup_addr = $('#pickup_addr').val();
      var additional_addr = $('#additional_addr').val();
      var country_nm = $('#country_nm').val();
      var city_nm = $('#city_nm').val();
      var postal_code = $('#postal_code').val();
      var pickup_op=$("input:radio[name=pickup_op]:checked").val();
      var pickup_date = $('#datepicker').val();
      var pickup_time = $('#timepicker').val();
      var rec_name = $('#rec_name').val();
      var dail_code   = $('#country-listbox').find('li.active').find('span.dial-code').text()
      var rec_phone = $('#rec_phone').val();
      var parcel_drop_addr = $('#parcel_drop_addr').val();
      var rec_additional_addr = $('#rec_additional_addr').val();
      var rec_country_nm = $('#rec_country_nm').val();
      var rec_city_nm = $('#rec_city_nm').val();
      var rec_postal_code = $('#rec_postal_code').val();
      var rec_pickup_op = $("input[name='rec_pickup_op']:checked").val();
      
      var parcel_len = $('#parcel_len').val();
      var parcel_ht = $('#parcel_ht').val();
      var parcel_wd = $('#parcel_wd').val();
      var parcel_wt = $('#parcel_wt').val();
      var parcel_vol_wt = $('#parcel_vol_wt').val();
      var parcel_typ = $('#parcel_typ').val();
      var parcel_val = $('#parcel_val').val();
      var parcel_des = $('#parcel_des').val();
      var insure = $("input[name='insure']:checked").val();

      var amount = $('#airdely_price').val();


console.log(11111)


      
// Handle form submission.
var form = document.getElementById('payment-form');
// form.addEventListener('submit', function(event) {
  $(document).on('click','#payment-btn',function(event)
  {
   event.preventDefault();
console.log(2)
  stripe.createToken(card).then(function(result) {
    if (result.error) {
      console.log(3)
      // Inform the user if there was an error.
      var errorElement = document.getElementById('card-errors');
      errorElement.textContent = result.error.message;
    } else {
      console.log(4)
      // Send the token to your server.
      
      stripeTokenHandler(result.token);
    }
  });
});

// Submit the form with the token ID.
function stripeTokenHandler(token) {
  // Insert the token ID into the form so it gets submitted to the server
  console.log(5)  
  // debugger;
  var form = document.getElementById('payment-form');
  var hiddenInput = document.createElement('input');
 
  // alert(token.id)
 



  
  // $('#loading-img').show();


  
saveparcelintoarray();


var parcels_data = $('#parcels_data').text()








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

  // return false;
  $('#loading-img').show();
  console.log('just before final ajax')
        $.ajax({
          url: '/placeorder/test/',
          // url: '/placeorder/',
          type: "POST",
          // data: {'payment_token':token.id,'sendername':sendername,'sendercountrycode':sendercountrycode,'senderphone':senderphone,'pickupaddress':pickupaddress,'sendercity':sendercity,'noofparcels':noofparcels,'width':width,'height':height,'weight':weight,'parceltype':parceltype,'specialnote':specialnote,'recipientname':recipientname,'recipientcountrycode':recipientcountrycode,'recipientphone':recipientphone,'dropaddress':dropaddress,'vehicletype':vehicletype,'price':price,'csrfmiddlewaretoken':a},
          data: {'payment_token':token.id,'parcels_data':parcels_data, 'noofparcels' : 2, 'csrfmiddlewaretoken':a},
          dataType: 'json',
          cache: false,
          success: function(response){
            // console.log(response)
            $('#loading-img').hide();
            // $('#loading-img').hide();
            console.log(response)
            // console.log(response.status)
            if (response.status_code == 200)
            {
              window.location.href = '/customer/dashboard'
            }
            else
            {
              $('#error-msg').text(response.status_message)
              $('#ErrorMessageModal').modal('show');
            }
          }
        });


  return false;
  // Submit the form
  form.submit();
}


}

</script>
<script>
  function getLatitude(address_val)
{
geocoder = new google.maps.Geocoder();
  geocoder.geocode( { 'address': address_val}, function(results, status) {
    if (status == 'OK') {
      latitude = results[0].geometry.location.lat()
      return(latitude)
    }
    else
    {
      alert('sender error')
      // return(false, '0.0', '0.0')
    }
  });
}
 function getLongitude(address_val)
{
geocoder = new google.maps.Geocoder();
  geocoder.geocode( { 'address': address_val}, function(results, status) {
    if (status == 'OK') {
      longitude = results[0].geometry.location.lng()
      return(longitude)
    }
    else
    {
      alert('sender error')
      return(false, '0.0', '0.0')
    }
  });
}
  function saveparcelintoarray()
{
  // alert('in saveparcelintoarray function')
  $('#sendername_txt').text('')
  $('#senderphone_txt').text('')
  $('#pickupaddress_txt').text('')
  $('#sendercity_txt').text('')
  $('#currentlocation_txt').text('')
  $('#noofparcels_txt').text('')
  $('#length_txt').text('')
  $('#width_txt').text('')
  $('#height_txt').text('')
  $('#weight_txt').text('')
  $('#parceltype_txt').text('')
  $('#specialnote_txt').text('')
  $('#recipientname_txt').text('')
  $('#recipientphone_txt').text('')
  $('#dropaddress_txt').text('')

  var sendername = $('#sendername').val()
  var senderphone = $('#senderphone').val()
  var pickupaddress = $('#pickupaddress').val()
  var sendercity = $('#sendercity').val()
  var currentlocation = $('#currentlocation').val()
  var noofparcels = $('#noofparcels').val()

  
  var imagebase64 = $('#parcel-image-srcdata').val()
  var length = $('#length').val()
  var width = $('#width').val()
  var height = $('#height').val()
  var weight = $('#weight').val()
  var parceltype = $('#parceltype').val()
  var specialnote = $('#specialnote').val()
  var recipientname = $('#recipientname').val()
  var recipientphone = $('#recipientphone').val()
  var dropaddress = $('#dropaddress').val()
  // var vehicletype = $("#rates-div .fare.selected span:first").text()
  // var price = $("#rates-div .fare.selected span:last").text()
  var vehicletype = $('#selected-vehicletype').text()
  var price = $('#total-price').text()

  // debugger;

  var senderlatitude = '29.8043'
  var senderlongitude = '76.4039'
  var recipientlatitude = '30.7046'
  var recipientlongitude = '76.7179'
 // pickupaddress = $('#pickupaddress').val()
 
 // senderlatitude = getLatitude(pickupaddress) 
 // senderlongitude = getLongitude(pickupaddress) 
 // recipientlatitude = getLatitude(dropaddress) 
 // recipientlongitude = getLongitude(dropaddress) 
           
  // alert('outside - sender status ok' + senderlatitude)


  sendername = sendername.trim()
  senderphone = senderphone.trim()
  pickupaddress = pickupaddress.trim()
  sendercity = sendercity.trim()
  // currentlocation = currentlocation.trim()
  noofparcels = noofparcels.trim()
  length = length.trim()
  width = width.trim()
  height = height.trim()
  weight = weight.trim()
  parceltype = parceltype.trim()
  specialnote = specialnote.trim()
  recipientname = recipientname.trim()
  recipientphone = recipientphone.trim()
  dropaddress = dropaddress.trim()
  vehicletype = vehicletype.trim()
  price = price.trim()

  if (sendername.length == 0)
  {
    $('#sendername_txt').text('This field is required.')
    $( "#sendername" ).focus();
    return false;
  }
  if (senderphone.length == 0)
  {
    $('#senderphone_txt').text('This field is required.')
    $( "#senderphone" ).focus();
    return false;
  }
  if (pickupaddress.length == 0)
  {
    $('#pickupaddress_txt').text('This field is required.')
    $( "#pickupaddress" ).focus();
    return false;
  }
  if (sendercity.length == 0)
  {
    $('#sendercity_txt').text('This field is required.')
    $( "#sendercity" ).focus();
    return false;
  }
  if (currentlocation.length == 0)
  {
    $('#currentlocation_txt').text('This field is required.')
    $( "#currentlocation" ).focus();
    return false;
  }
  if (noofparcels.length == 0)
  {
    $('#noofparcels_txt').text('This field is required.')
    $( "#noofparcels" ).focus();
    return false;
  }
  if (length.length == 0)
  {
    $('#length_txt').text('This field is required.')
    $( "#length" ).focus();
    return false;
  }
  if (width.length == 0)
  {
    $('#width_txt').text('This field is required.')
    $( "#width" ).focus();
    return false;
  }
  if (height.length == 0)
  {
    $('#height_txt').text('This field is required.')
    $( "#height" ).focus();
    return false;
  }
  if (weight.length == 0)
  {
    $('#weight_txt').text('This field is required.')
    $( "#weight" ).focus();
    return false;
  }
  if (parceltype.length == 0)
  {
    $('#parceltype_txt').text('This field is required.')
    $( "#parceltype" ).focus();
    return false;
  }
  if (specialnote.length == 0)
  {
    $('#specialnote_txt').text('This field is required.')
    $( "#specialnote" ).focus();
    return false;
  }
  if (recipientname.length == 0)
  {
    $('#recipientname_txt').text('This field is required.')
    $( "#recipientname" ).focus();
    return false;
  }
  if (recipientphone.length == 0)
  {
    $('#recipientphone_txt').text('This field is required.')
    $( "#recipientphone" ).focus();
    return false;
  }
  if (dropaddress.length == 0)
  {
    $('#dropaddress_txt').text('This field is required.')
    $( "#dropaddress" ).focus();
    return false;
  }
  if (vehicletype.length == 0)
  {
    $('#vehicletype_txt').text('Please select any vehicle.')
    $( "#vehicletype" ).focus();
    return false;
  }
  if (price.length == 0)
  {
    $('#price_txt').text('Please select price.')
    $( "#price" ).focus();
    return false;
  }
  
  var sendercountrycode = '+44'
  var recipientcountrycode = '+44'



      var parcels_data = $('#parcels_data').text()
      if (parcels_data == '')
      {
        // alert('There is no parcel in parcels_data array')
        var parcels_data = []
      }
      else
      {
        // alert('There is already parcel in parcels_data array')
        // console.log(parcels_data)
        var parcels_data = JSON.parse(parcels_data)
        // console.log(parcels_data)
        // alert(parcels_data)
      }


      // var len = oFullResponse.results.length;
      // alert(senderlatitude)
      // alert(senderlongitude)
      parcels_data.push({
        "sendername": sendername,
        "sendercountrycode": "+44",
        "senderphone": senderphone,
        "senderlatitude": senderlatitude,
        "senderlongitude": senderlongitude,
        "pickupaddress": pickupaddress,
        "sendercity": sendercity,
        "length": length,
        "width": width,
        "height": height,
        "weight": weight,
        "parceltype": parceltype,
        "specialnote": specialnote,
        "recipientname": recipientname,
        "recipientcountrycode": "+44",
        "recipientphone": recipientphone,
        "dropaddress": dropaddress,
        "recipientlatitude": recipientlatitude,
        "recipientlongitude": recipientlongitude,
        "vehicletype": vehicletype,
        "price": price,
        "imagebase64": imagebase64
      })
      // console.log(parcels_data)
      var parcels_data = JSON. stringify(parcels_data);
      // console.log(parcels_data)
      $('#parcels_data').text(parcels_data)
      // alert('in saveparcelintoarray function - end')
}
  function shift_to_sender()
{
    // alert('in shift_to_sender function')
    $('#sd').removeClass('isdisabled')
    $('#rd').addClass('isdisabled')
    $('#pd').addClass('isdisabled')
    $('#paymentd').addClass('isdisabled')
     
    $('#sd').addClass('active')
    $('#rd').removeClass("active");
    $('#pd').removeClass('active')
    $('#paymentd').removeClass('active')
     
    $('#sender-details').addClass("active");
    $('#sender-details').removeClass('fade')
    $('#recipient-details').removeClass("active");
    $('#parcel-details').removeClass('active')
    $('#payment-details').removeClass('active')
}

function shift_to_recipient()
{
    // alert('in shift_to_recipient function')
    $('#sd').addClass('isdisabled')
    $('#rd').removeClass('isdisabled')
    $('#pd').addClass('isdisabled')
    $('#paymentd').addClass('isdisabled')
     
    $('#sd').removeClass("active");
    $('#rd').addClass('active')
    $('#pd').removeClass('active')
    $('#paymentd').removeClass('active')
     
    $('#sender-details').removeClass("active");
    $('#recipient-details').addClass("active");
    $('#recipient-details').removeClass('fade')
    $('#parcel-details').removeClass('active')
    $('#payment-details').removeClass('active')
}


function shift_to_parcel()
{
    // alert('in shift_to_parcel function')
    $('#sd').addClass('isdisabled')
    $('#rd').addClass('isdisabled')
    $('#pd').removeClass('isdisabled')
    $('#paymentd').addClass('isdisabled')
     
    $('#sd').removeClass("active");
    $('#rd').removeClass('active')
    $('#pd').addClass('active')
    $('#paymentd').removeClass('active')
     
    $('#sender-details').removeClass("active");
    $('#recipient-details').removeClass('active')
    $('#parcel-details').addClass("active");
    $('#parcel-details').removeClass('fade')
    $('#payment-details').removeClass('active')
}


function shift_to_payment()
{
    // alert('in shift_to_payment function')
    $('#sd').addClass('isdisabled')
    $('#rd').addClass('isdisabled')
    $('#pd').addClass('isdisabled')
    $('#paymentd').removeClass('isdisabled')
     
    $('#sd').removeClass("active");
    $('#rd').removeClass('active')
    $('#pd').removeClass('active')
    $('#paymentd').addClass('active')
     
    $('#sender-details').removeClass("active");
    $('#recipient-details').removeClass('active')
    $('#parcel-details').removeClass('active')
    $('#payment-details').addClass("active");
    $('#payment-details').removeClass('fade')
}

function checksd()
{
  // alert('in checksd function')
  $('#sendername_txt').text('')
  $('#senderphone_txt').text('')
  $('#pickupaddress_txt').text('')
  $('#sendercity_txt').text('')
  $('#currentlocation_txt').text('')
  $('#noofparcels_txt').text('')

  var sendername = $('#sendername').val()
  var senderphone = $('#senderphone').val()
  var pickupaddress = $('#pickupaddress').val()
  var sendercity = $('#sendercity').val()
  var currentlocation = $('#currentlocation').val()
  var noofparcels = $('#noofparcels').val()

  sendername = sendername.trim()
  senderphone = senderphone.trim()
  pickupaddress = pickupaddress.trim()
  sendercity = sendercity.trim()
  currentlocation = currentlocation.trim()
  noofparcels = noofparcels.trim()

  if (sendername.length == 0)
  {
    $('#sendername_txt').text('This field is required.')
    $( "#sendername" ).focus();
    return false;
  }
  if (senderphone.length == 0)
  {
    $('#senderphone_txt').text('This field is required.')
    $( "#senderphone" ).focus();
    return false;
  }
  if (pickupaddress.length == 0)
  {
    $('#pickupaddress_txt').text('This field is required.')
    $( "#pickupaddress" ).focus();
    return false;
  }
  if (currentlocation.length == 0)
  {
    $('#currentlocation_txt').text('This field is required.')
    $( "#currentlocation" ).focus();
    return false;
  }
  if (sendercity.length == 0)
  {
    $('#sendercity_txt').text('This field is required.')
    $( "#sendercity" ).focus();
    return false;
  }
  if (noofparcels.length == 0)
  {
    $('#noofparcels_txt').text('This field is required.')
    $( "#noofparcels" ).focus();
    return false;
  }
  shift_to_recipient()
}
function checkrd()
{
  // alert('in checkrd function')
  $('#recipientname_txt').text('')
  $('#recipientphone_txt').text('')
  $('#dropaddress_txt').text('')

  var recipientname = $('#recipientname').val()
  var recipientphone = $('#recipientphone').val()
  var dropaddress = $('#dropaddress').val()

  recipientname = recipientname.trim()
  recipientphone = recipientphone.trim()
  dropaddress = dropaddress.trim()

  if (recipientname.length == 0)
  {
    $('#recipientname_txt').text('This field is required.')
    $( "#recipientname" ).focus();
    return false;
  }
  if (recipientphone.length == 0)
  {
    $('#recipientphone_txt').text('This field is required.')
    $( "#recipientphone" ).focus();
    return false;
  }
  if (dropaddress.length == 0)
  {
    $('#dropaddress_txt').text('This field is required.')
    $( "#dropaddress" ).focus();
    return false;
  }

  
  shift_to_parcel()
}
function checkpd()
{
  // alert('in checkrd function')
  $('#sendername_txt').text('')
  $('#senderphone_txt').text('')
  $('#pickupaddress_txt').text('')
  $('#sendercity_txt').text('')
  $('#currentlocation_txt').text('')
  $('#noofparcels_txt').text('')
  $('#length_txt').text('')
  $('#width_txt').text('')
  $('#height_txt').text('')
  $('#weight_txt').text('')
  $('#parceltype_txt').text('')
  $('#specialnote_txt').text('')
  $('#recipientname_txt').text('')
  $('#recipientphone_txt').text('')
  $('#dropaddress_txt').text('')

  var sendername = $('#sendername').val()
  var senderphone = $('#senderphone').val()
  var pickupaddress = $('#pickupaddress').val()
  var sendercity = $('#sendercity').val()
  var currentlocation = $('#currentlocation').val()
  var noofparcels = $('#noofparcels').val()
  var length = $('#length').val()
  var width = $('#width').val()
  var height = $('#height').val()
  var weight = $('#weight').val()
  var parceltype = $('#parceltype').val()
  var specialnote = $('#specialnote').val()
  var recipientname = $('#recipientname').val()
  var recipientphone = $('#recipientphone').val()
  var dropaddress = $('#dropaddress').val()

  sendername = sendername.trim()
  senderphone = senderphone.trim()
  pickupaddress = pickupaddress.trim()
  sendercity = sendercity.trim()
  currentlocation = currentlocation.trim()
  noofparcels = noofparcels.trim()
  length = length.trim()
  width = width.trim()
  height = height.trim()
  weight = weight.trim()
  parceltype = parceltype.trim()
  specialnote = specialnote.trim()
  recipientname = recipientname.trim()
  recipientphone = recipientphone.trim()
  dropaddress = dropaddress.trim()

  if (sendername.length == 0)
  {
    $('#sendername_txt').text('This field is required.')
    $( "#sendername" ).focus();
    return false;
  }
  if (senderphone.length == 0)
  {
    $('#senderphone_txt').text('This field is required.')
    $( "#senderphone" ).focus();
    return false;
  }
  if (pickupaddress.length == 0)
  {
    $('#pickupaddress_txt').text('This field is required.')
    $( "#pickupaddress" ).focus();
    return false;
  }
  if (sendercity.length == 0)
  {
    $('#sendercity_txt').text('This field is required.')
    $( "#sendercity" ).focus();
    return false;
  }
  if (currentlocation.length == 0)
  {
    $('#currentlocation_txt').text('This field is required.')
    $( "#currentlocation" ).focus();
    return false;
  }
  if (noofparcels.length == 0)
  {
    $('#noofparcels_txt').text('This field is required.')
    $( "#noofparcels" ).focus();
    return false;
  }
  if (length.length == 0)
  {
    $('#length_txt').text('This field is required.')
    $( "#length" ).focus();
    return false;
  }
  if (width.length == 0)
  {
    $('#width_txt').text('This field is required.')
    $( "#width" ).focus();
    return false;
  }
  if (height.length == 0)
  {
    $('#height_txt').text('This field is required.')
    $( "#height" ).focus();
    return false;
  }
  if (weight.length == 0)
  {
    $('#weight_txt').text('This field is required.')
    $( "#weight" ).focus();
    return false;
  }
  if (parceltype.length == 0)
  {
    $('#parceltype_txt').text('This field is required.')
    $( "#parceltype" ).focus();
    return false;
  }
  if (specialnote.length == 0)
  {
    $('#specialnote_txt').text('This field is required.')
    $( "#specialnote" ).focus();
    return false;
  }
  if (recipientname.length == 0)
  {
    $('#recipientname_txt').text('This field is required.')
    $( "#recipientname" ).focus();
    return false;
  }
  if (recipientphone.length == 0)
  {
    $('#recipientphone_txt').text('This field is required.')
    $( "#recipientphone" ).focus();
    return false;
  }
  if (dropaddress.length == 0)
  {
    $('#dropaddress_txt').text('This field is required.')
    $( "#dropaddress" ).focus();
    return false;
  }


  var sendercountrycode = '+44'
  var recipientcountrycode = '+44'


  var token = $('input[name="csrfmiddlewaretoken"]').val()
  $('#loading-img').show();
  $.ajax({
      type: 'POST',
      url: '/getfares/',
      data: { 'sendername' : sendername, 'sendercountrycode' : sendercountrycode, 'senderphone' : senderphone, 'pickupaddress' : pickupaddress, 'sendercity' : sendercity, 'currentlocation' : currentlocation, 'noofparcels' : noofparcels, 'length' : length, 'width' : width, 'height' : height, 'weight' : weight, 'parceltype' : parceltype, 'specialnote' : specialnote, 'recipientname' : recipientname, 'recipientcountrycode' : recipientcountrycode, 'recipientphone' : recipientphone, 'dropaddress' : dropaddress,  'csrfmiddlewaretoken' : token},
      success: function(response){
        $('#loading-img').hide();
        console.log(response);
        // alert(response.data[0]['vehicletype'])
        if(response.status_code == 200)
        {
          $('#rates-div').removeAttr('hidden')
          if (response.data)
          {
            var i;
            var vehicletxt = ''
            for (i = 0; i < response.data.length; i++) {
              txt = '<li class="new-sec add-icon"><a class="d-flex justify-content-between flex-column" href="#" data-toggle="modal" data-target="#TeamMemeberModalCenter"><div class="img-div"><img src="' + response.data[i]['image'] + '"></div><div class="vehicletype-details" hidden><span>' + response.data[i]['vehicletype'] + '</span></div><div class="price-details"><span>' + response.data[i]['price'] + '</span></div></a></li>'
              vehicletxt = vehicletxt + txt
            }
            // console.log(vehicletxt)
            $('.circle_lst').html('')
            $('.circle_lst').append(vehicletxt)
            shift_to_payment()
          }
        }
        else
        {
          $('#error-msg').text(response.status_message)
          $('#ErrorMessageModal').modal('show');
        }
      }
    });
  
}


</script>
<script>
  // $(".add-icon").on( "click", function() {
$(document).on('click','.add-icon',function(event){
var price = $(this).closest('li').find('.price-details').text()
var vehicletype = $(this).closest('li').find('.vehicletype-details').text()
// alert(price)
$('.add-icon').removeClass('selected');
$(this).addClass('selected');
$('#amount-price').text(price)
$('#extracharges-price').text(0)
$('#total-price').text(price)
$('#selected-vehicletype').text(vehicletype)

$('#addnewparcel-btn').removeClass('isdisabledbtn')
$('#payment-btn').removeClass('isdisabledbtn')


});
</script>
<script>
  $(document).on('click','#addnewparcel-btn',function(event){
    saveparcelintoarray();
    $('#addnewparcel-btn').addClass('isdisabledbtn')
      $('#payment-btn').addClass('isdisabledbtn')
    shift_to_sender();
    $('#sendername').val('')
  $('#senderphone').val('')
  $('#pickupaddress').val('')
  $('#sendercity').val('')
  $('#currentlocation').val('')
  $('##parcel-show-image').attr('src','')
  $('#parcel-image-srcdata').val('')
  $('#noofparcels').val('')
  $('#length').val('')
  $('#width').val('')
  $('#height').val('')
  $('#weight').val('')
  $('#parceltype').val('')
  $('#specialnote').val('')
  $('#recipientname').val('')
  $('#recipientphone').val('')
  $('#dropaddress').val('')
  });
</script>
<script>
      var input1 = document.getElementById('pickupaddress');
      var input2 = document.getElementById('dropaddress');

      var autocomplete1 = new google.maps.places.Autocomplete(input1);
      var autocomplete2 = new google.maps.places.Autocomplete(input2);
    var input3 = document.getElementById('sendercity');
      var autocomplete3 = new google.maps.places.Autocomplete(input3,{types: ['(cities)']});
      google.maps.event.addListener(autocomplete3, 'place_changed', function(){
         var place = autocomplete3.getPlace();
        });
         </script>


<script>
  $( document ).ready(function() {
      var input = document.querySelector("#senderphone");
    window.intlTelInput(input, {
      initialCountry: "gb",
      utilsScript: "{% static 'js/utils.js' %}",
    });

    var input2       = document.querySelector("#recipientphone");
    var editTelInput = window.intlTelInput(input2, {
                      initialCountry: "gb",
                      utilsScript: "{% static 'js/utils.js' %}",
                    });
  });
</script>


{% endblock %}
<script>
   $(document).ready(function() { $('.place-order').hide() });
</script>