{% extends 'base.html' %}
{% load static %}
{% block title %}
  <title>
    Customer Job Detail
  </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">
<style>
   #map {
   height: 50%;
   }
</style>
{% endblock %}

{% block content %}
<div class="container-scroller">
  {% ifequal request.session.userrole 'customer' %}
    {% include 'customer_header.html' %}
  {% endifequal %}
  {% ifequal request.session.userrole 'company' %}
    {% include 'customer_header.html' %}
  {% endifequal %}
  {% ifequal request.session.userrole 'driver' %}
    {% include 'driver_header.html' %}
  {% endifequal %}
  {% ifequal request.session.userrole 'admin' %}
    {% include 'admin_header.html' %}
  {% endifequal %}
  {% ifequal request.session.userrole 'superadmin' %}
    {% include 'admin_header.html' %}
  {% endifequal %}
  <div class="container-fluid page-body-wrapper">
    {% ifequal request.session.userrole 'customer' %}
      {% include 'customer_sidebar.html' %}
    {% endifequal %}
    {% ifequal request.session.userrole 'company' %}
      {% include 'customer_sidebar.html' %}
    {% endifequal %}
    {% ifequal request.session.userrole 'driver' %}
      {% include 'driver_sidebar.html' %}
    {% endifequal %}
    {% ifequal request.session.userrole 'admin' %}
      {% include 'admin_sidebar.html' %}
    {% endifequal %}
    {% ifequal request.session.userrole 'superadmin' %}
      {% include 'admin_sidebar.html' %}
    {% endifequal %}
    <div class="main-panel  jobs-all">
      <div class="content-wrapper placehoder-sec my-jobs">
        {% for customerjob in customerjoball %}
         <div class="col-md-12 grid-margin ">
            <div class="page-header ">
               <h3 class="section-title "><span class="ra-ticks-heading">  Parcel Details :{{forloop.counter}} <!--{% ifequal request.session.userrole 'customer' %}</span><a href="/customer/jobdetail/{{customerjob.customerjobid}}/raiseticket/" style="" class="ra-tickets">Raise Ticket</a>{% endifequal %}--></h3>
            </div>
            <div class="parcel_details_wrap">
               <div class="row">
                  <div class="col-md-9">
                     <ul class="facility-details-list parcel-details border-0 pr-0">
                        <li>
                           <span>AWB Number</span>
                           <b>{{customerjob.awbnumber}}</b>
                        </li>
                        <li>
                           <span>Special Booking</span>
                           <b>{% if customerjob.specialbooking %}Yes{% else %}No{% endif %}</b>
                        </li>
                        <li>
                           <span>Max. Height(CM)</span>
                           <b>{% if customerjob.height %}{{customerjob.height}}{% else %}N.A.{% endif %}</b>
                        </li>
                        <li>
                           <span>Max. Length(CM)</span>
                           <b>{% if customerjob.length %}{{customerjob.length}}{% else %}N.A.{% endif %}</b>
                        </li>
                        <li>
                           <span>Max. Width(CM)</span>
                           <b>{% if customerjob.width %}{{customerjob.width}}{% else %}N.A.{% endif %}</b>
                        </li>
                        <li>
                           <span>Weight of Parcel</span>
                           <b>{% if customerjob.weight %}{{customerjob.weight}}{% else %}N.A.{% endif %}</b>
                        </li>
                        <li>
                           <span>Parcel Type</span>
                           <b>{% if customerjob.parceltype %}{{customerjob.parceltype}}{% else %}N.A.{% endif %}</b>
                        </li>
                        <li>
                           <span>Selected Vehicle Type</span>
                           <b>{{customerjob.vehicletype|title}}</b>
                        </li>
                        <li>
                           <span>Image</span>
                           <b><img src="{% if customerjob.parcelimage %}{{customerjob.parcelimage}}{% else %}{% static 'images/open-parcel-1.png' %}{% endif %}" style="height: 80px;width: 80px;"></b>
                        </li>
                     </ul>
                  </div>
                  <div class="col-md-3">
                     <div class="qr_code_download">
                        <div class="media qr-code-sec flex-wrap justify-content-center">
                           <img src="{{customerjob.qrcode}}" class="mx-auto" alt="">
                           <div class="media-body w-100 text-center">
                              <!-- <a href="#">Download QR Code</a> -->
                              {% ifequal request.session.userrole 'customer' %}
                                <a href="{{customerjob.parcelpdf_link}}" target="_blank" download="">Download AWB Pdf</a>
                              {% endifequal %}
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="col-md-12 grid-margin mt-301">
            <div class="page-header ">
               <h3 class="section-title ">Sender Details:{{forloop.counter}}</h3>
            </div>
            <div class="parcel_details_wrap">
               <div class="row">
                  <ul class="facility-details-list border-0 pr-0">
                     <li>
                        <span>Name</span>
                        <b>{{customerjob.sendername}}</b>
                     </li>
                     <li>
                        <span>Contact Number</span>
                        <b>{% if customerjob.sendercountrycode %} {{ customerjob.sendercountrycode }}-{% endif %}{{customerjob.senderphone}}</b>
                     </li>
                     <li>
                        <span>Address</span>
                        <b>{{customerjob.senderpickupaddress}}</b>
                     </li>
                     <li>
                        <span>City</span>
                        <b>{% if customerjob.sendercity %}{{customerjob.sendercity}}{% else %}N.A.{% endif %}</b>
                     </li>
                     <li>
                        <span>Pickup Time Slot</span>
                        <b>{% if customerjob.pickuptimeslot %}{{customerjob.pickuptimeslot}}{% else %}N.A.{% endif %}</b>
                     </li>
                     <li>
                        <span>Pickup Special Note</span>
                        <b>{% if customerjob.pickupspecialnote %}{{customerjob.pickupspecialnote}}{% else %}N.A.{% endif %}</b>
                     </li>
                     <li>
                        <span>Pickup Date</span>
                        <b>{% if customerjob.pickuptimeslotDate %}{{customerjob.pickuptimeslotDate}}{% else %}N.A.{% endif %}</b>
                     </li>
                  </ul>
               </div>
            </div>
         </div>
         <div class="col-md-12 grid-margin mt-301">
            <div class="page-header ">
               <h3 class="section-title ">Recipient Details:{{forloop.counter}}</h3>
            </div>
            <div class="parcel_details_wrap">
               <div class="row">
                  <ul class="facility-details-list border-0 pr-0">
                     <li>
                        <span>Name</span>
                        <b>{{customerjob.recipientname}}</b>
                     </li>
                     <li>
                        <span>Contact Number</span>
                        <b>{% if customerjob.recipientcountrycode %} {{ customerjob.recipientcountrycode }}-{% endif %}{{customerjob.recipientphone}}</b>
                     </li>
                     <li>
                        <span>Address</span>
                        <b>{{customerjob.recipientdropoffaddress}}</b>
                     </li>
                     <li>
                        <span>Dropoff Time Slot</span>
                        <b>{% if customerjob.dropofftimeslot %}{{customerjob.dropofftimeslot}}{% else %}N.A.{% endif %}</b>
                     </li>
                     <li>
                        <span>Dropoff Special Note</span>
                        <b>{% if customerjob.dropoffspecialnote %}{{customerjob.dropoffspecialnote}}{% else %}N.A.{% endif %}</b>
                     </li>
                  </ul>
               </div>
            </div>
         </div>
         
         {% ifequal request.session.userrole 'driver' %}{% else %}
         <div class="col-md-12 grid-margin mt-301">
            <div class="page-header ">
               <h3 class="section-title ">Payment Details:{{forloop.counter}}
               </h3>
            </div>
            <div class="parcel_details_wrap">
               <div class="row">
                  <ul class="facility-details-list border-0 pr-0">
                     <li>
                        <span class="text-nowrap">Parcel Delivery Charge</span>
                        <b>{{customerjob.price}}</b>
                     </li>
                     <li>
                        <span class="text-nowrap">Special Booking Charge</span>
                        <b>{% if customerjob.specialbooking_charge %}{{customerjob.specialbooking_charge}}{% else %}0.0{% endif %}</b>
                     </li>
                     <li>
                        <span class="text-nowrap">Total Amount</span>
                        <b>{{customerjob.totalamount}}</b>
                     </li>
                  </ul>
               </div>
            </div>
         </div>
         {% endifequal %}
         {% ifequal request.session.userrole 'driver' %}{% else %}
          {% if customerjob.driverdetails %}
           <div class="col-md-12 grid-margin mt-301">
              <div class="page-header ">
                 <h3 class="section-title ">Driver Details:{{forloop.counter}}</h3>
              </div>
              <div class="parcel_details_wrap">
                 <div class="row">
                    <ul class="facility-details-list border-0 pr-0">
                       <li>
                          <span>Name</span>
                          <b>{{customerjob.driverdetails.drivername}}</b>
                       </li>
                       <li>
                          <span>Phone Number</span>
                          <b>{{customerjob.driverdetails.drivercountrycode}}-{{customerjob.driverdetails.driverphone}}</b>
                       </li>
                       <li>
                          <span>Vehicle Type</span>
                          <b>{{customerjob.vehicletype}}</b>
                       </li>
                    </ul>
                 </div>
              </div>
           </div>
          {% endif %}
        {% endifequal %}
        {% ifequal request.session.userrole 'driver' %}{% else %}
        {% ifequal customerjob.dataLogging True %}
          <div class="col-md-12 grid-margin mt-301">
                <div class="page-header ">
                   <h3 class="section-title ">Data Logging:{{forloop.counter}}</h3>
                </div>
                <div class="parcel_details_wrap">
                   <div class="row">
                      <ul class="facility-details-list border-0 pr-0">
                        {% if customerjob.pickup_proof_method %}
                         
                         <li>
                            <span>Pickup Method</span>
                            <b>{{customerjob.pickup_proof_method}}</b>
                         </li>
                         <li>
                            <span>Pickup By</span>
                            {% ifequal customerjob.pickup_proof_method 'signature' %}
                              <b>{% if customerjob.pickup_fromperson_name %}{{customerjob.pickup_fromperson_name}}{% else %}N.A.{% endif %}</b>
                            {% endifequal %}
                            {% ifequal customerjob.pickup_proof_method 'scan' %}
                              <b>{% if customerjob.sendername %}{{customerjob.sendername}}{% else %}N.A.{% endif %}</b>
                            {% endifequal %}
                         </li>
                         {% ifequal customerjob.pickup_proof_method 'signature' %}
                           <li  class="pick-proof">
                              <span>Pickup Signature Proof</span>
                              <b><img src="{% if customerjob.pickup_fromperson_signature %}{{customerjob.pickup_fromperson_signature}}{% else %}{% endif %}" style="height: 80px;width: 80px;"></b>
                           </li>
                          {% endifequal %}
                         <li>
                            <span>Pickup Time</span>
                            <b>{{customerjob.pickup_datetime}}</b>
                         </li>
                         {% endif %}
                         {% if customerjob.delivery_proof_method  %}
                           <li  class="">
                              <span>Handover Method</span>
                              <b>{{customerjob.delivery_proof_method}}</b>
                           </li>
                           <li>
                              <span>Handover To</span>
                              {% ifequal customerjob.delivery_proof_method 'signature' %}
                                <b>{% if customerjob.delivery_toperson_name %}{{customerjob.delivery_toperson_name}}{% else %}N.A.{% endif %}</b>
                              {% endifequal %}
                              {% ifequal customerjob.delivery_proof_method 'otp' %}
                                <b>{% if customerjob.recipientname %}{{customerjob.recipientname}}{% else %}N.A.{% endif %}</b>
                              {% endifequal %}
                           </li>
                           {% ifequal customerjob.delivery_proof_method 'signature' %}
                             <li  class="hand-method">
                                <span>Handover Signature Proof</span>
                                <!-- <b>{{customerjob.delivery_toperson_signature}}</b> -->
                                <b><img src="{% if customerjob.delivery_toperson_signature %}{{customerjob.delivery_toperson_signature}}{% else %}{% endif %}" style="height: 80px;width: 80px;"></b>
                             </li>
                            {% endifequal %}
                          
                           <li>
                              <span>Delivered Time</span>
                              <b>{{customerjob.itemsdelivered_datetime}}</b>
                           </li>
                           <li>
                            <span>Payment Time</span>
                            <b>{% if customerjob.payment_datetime %}{{customerjob.payment_datetime}}{% else %}N.A.{% endif %}</b>
                         </li>
                         <li>
                          <span>Safe Palace Image</span>
                           <b><img src="{% if customerjob.safePalaceDeliverData.image %}{{customerjob.safePalaceDeliverData.image}}{% else %}N.A.{% endif %}" style="height: 80px;width: 80px;"></b>
                         </li>

                         <li>
                            <span>Drop-Off Time</span>
                             <b>{% if customerjob.safePalaceDeliverData.dateandTime %}{{customerjob.safePalaceDeliverData.dateandTime}}{% else %}N.A.{% endif %}</b>
                         </li>
                          {% endif %}
                      </ul>
                   </div>
                </div>
          </div>
        {% endifequal %}  
        {% endifequal %}
        {% ifequal i.deliveryIsFailedOrNot True %}
        <div class="col-md-12 grid-margin mt-301">
              <div class="page-header ">
                 <h3 class="section-title ">Failed Delivery Details:{{forloop.counter}}</h3>
              </div>
              <div class="parcel_details_wrap">
                 <div class="row">
                    <ul class="facility-details-list border-0 pr-0">
                       <li>
                          <span>Image</span>
                            <b>
                              {% if customerjob.failedData.image %}{{customerjob.failedData.image}}{% else %}N.A.{% endif %}
                            </b>
                       </li>
                       <li>
                          <span>Time</span>
                          <b>{{customerjob.failedData.dateandTime}}</b>
                       </li>
                       <li>
                          <span>Reason Of Faliure</span>
                          <b>{{customerjob.failedData.reason}}</b>
                       </li>
                    </ul>
                 </div>
              </div>
        </div>
        {% endifequal %}
        {% endfor %}
      </div>
      <!-- <div id="floating-panel">
         <b>Start: </b>
         <select id="start">
            <option value="chicago, il">Chicago</option>
            <option value="st louis, mo">St Louis</option>
            <option value="joplin, mo">Joplin, MO</option>
            <option value="oklahoma city, ok">Oklahoma City</option>
            <option value="amarillo, tx">Amarillo</option>
            <option value="gallup, nm">Gallup, NM</option>
            <option value="flagstaff, az">Flagstaff, AZ</option>
            <option value="winona, az">Winona</option>
            <option value="kingman, az">Kingman</option>
            <option value="barstow, ca">Barstow</option>
            <option value="san bernardino, ca">San Bernardino</option>
            <option value="los angeles, ca">Los Angeles</option>
         </select>
         <b>End: </b>
         <select id="end">
            <option value="chicago, il">Chicago</option>
            <option value="st louis, mo">St Louis</option>
            <option value="joplin, mo">Joplin, MO</option>
            <option value="oklahoma city, ok">Oklahoma City</option>
            <option value="amarillo, tx">Amarillo</option>
            <option value="gallup, nm">Gallup, NM</option>
            <option value="flagstaff, az">Flagstaff, AZ</option>
            <option value="winona, az">Winona</option>
            <option value="kingman, az">Kingman</option>
            <option value="barstow, ca">Barstow</option>
            <option value="san bernardino, ca">San Bernardino</option>
            <option value="los angeles, ca">Los Angeles</option>
         </select>
      </div>
      <div id="map">
      </div> -->


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

{% endblock %}
{% block js %}
<!--     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> -->
<script src="{% static '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>
   function initMap() {
     var directionsService = new google.maps.DirectionsService();
     var directionsRenderer = new google.maps.DirectionsRenderer();
     var map = new google.maps.Map(document.getElementById('map'), {
       zoom: 7,
       center: {lat: 41.85, lng: -87.65}
     });
     directionsRenderer.setMap(map);
   
     var onChangeHandler = function() {
       calculateAndDisplayRoute(directionsService, directionsRenderer);
     };
     document.getElementById('start').addEventListener('change', onChangeHandler);
     document.getElementById('end').addEventListener('change', onChangeHandler);
   }
   
   function calculateAndDisplayRoute(directionsService, directionsRenderer) {
     directionsService.route(
         {
           origin: {query: document.getElementById('start').value},
           destination: {query: document.getElementById('end').value},
           travelMode: 'DRIVING'
         },
         function(response, status) {
           if (status === 'OK') {
             directionsRenderer.setDirections(response);
           } else {
             window.alert('Directions request failed due to ' + status);
           }
         });
   }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCZt3wR3ItaSSmIhWnRy4hy6FnqmEM81oY&callback=initMap"></script> -->
{% endblock %}