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

{% block title %}
    <title>{% if page_name %}{{page_name}}{% else %}My Jobs{% endif %}</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>
    tr:hover { 
   background: #D3D3D3; 
}
td a { 
   display: block; 
   /*border: 1px solid black;*/
   /*padding: 16px; */
   text-decoration: none;
}

td a:hover 
 { 
   display: block; 
   /*border: 1px solid black;*/
   /*padding: 16px; */
   text-decoration: none;
     color:#00A0C6; 
     cursor:pointer;  
}


  </style>
{% endblock %}


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


<div class="main-panel">
  <div class="content-wrapper placehoder-sec my-jobs">
          <div class="page-header justify-content-center">
            <h3 class="page-title  text-sec col-purple">{% if page_name %}{{page_name}}{% else %}My Jobs{% endif %}</h3>
          </div>

        
      <div class="col-md-12 grid-margin ">
            <div class="">
              <div class="">
                
                <div class="table-responsive">
                  <table class="table  border-table" id="recent-companies-table">
                    <thead>
                      <tr>
                        <th>Order Id</th>
                        <!-- <th>Recipient Name</th> -->
                        <th>Pickup Address</th>
                        <th>Type</th>
                        <!-- <th>Drop Address</th> -->
                        <th></th>
                      </tr>
                    </thead>
                    <tbody>
                      {% if ongoingcustomerjobs_data %}
                        {% for order in ongoingcustomerjobs_data %}
                          <tr>
                              <td>{{order.0.orderid}}</td>
                              <!-- <td>
                                <a href="/customer/jobdetail/{{customerjob.customerjobid}}" target="_blank">{{customerjob.recipientname}}</a>
                              </td> -->
                            
                              <td>{{order.0.senderpickupaddress}}</td>
                              <td>{{order.0.ordertype}}</td>
                              {% if order.0.deleted == True %}
                              <td>
                                <button class="btn btn-danger">Cancelled</button>
                              </td>
                              {% else %}
                              <td>
                                <button class="btn btn-primary see-all-parcels">See All Parcels</button>
                                <span class="order_id" hidden>{{order.0.orderid}}</span>
                                <button class="btn btn-primary" id="cancelParcel">Cancel Order</button>
                                <span id="sameParcelId" hidden>{{order.0.customerjobid}}</span>
                                <a id="sameParcelIdlink" href="/customer/cancelOrder/{{order.0.customerjobid}}/" hidden>Cancel</a>
                              </td>
                              {% endif %}
                          </tr>
                        {% endfor %}
                      {% else %}
                          <tr>
                              <td colspan="4" class="assigned-no-records"> No record exists</td>
                          </tr>
                      {% endif %}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>

       
        
    </div>
  

     {% include 'customer_footer.html' %}

       </div>
       </div>
</div>




  <div id="SeeAllParcelsView" class="modal fade popup-all SeeAllParcelsView-c" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header border-0">
          <h3 class="modal-title">All Parcels</h3>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <div class="table-responsive">
            <table>
              <thead>
                <th>Image</th>
                <th>Pickup Address</th>
                <th>Recipient Name</th>
                <th>Dropoff Address</th>
                <th>Action</th>
              </thead>
              <tbody id="see-all-parcels-tbody">

               
                
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

<div id="jobCanceled" class="modal fade popup-all jobCanceled-c" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header border-0">
          <h3 class="modal-title">Job Cancel</h3>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <h5>Job Canceled successfully</h5>
        </div>
      </div>
    </div>
  </div>

  <div id="jobnotCanceled" class="modal fade popup-all jobnotCanceled-c" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header border-0">
          <h3 class="modal-title">Job not Cancel</h3>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <h5>Job  not Canceled successfully</h5>
        </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/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>
      $(document).on("click",".see-all-parcels",function(e){
        $('#see-all-parcels-tbody').html('')
        order_id = $(this).closest('td').find('.order_id').text()

        var token = $('input[name="csrfmiddlewaretoken"]').val()
  
        $.ajax({
            type: 'POST',
            url: '/getallparcels/',
            data: { 'order_id' : order_id, 'csrfmiddlewaretoken' : token},
            success: function(response){
              
              console.log(response);
              // debugger;
              if(response.all_parcels_data)
              {
                parcels_string = ''
                // alert(response.all_parcels_data.length)
                for (var i = 0; i < response.all_parcels_data.length; i++) 
                {
                  st = ''
                  if (response.all_parcels_data[i]['image'])
                  {
                    img_st = "<img src='" + response.all_parcels_data[i]['image'] +"' style='height:50px;width:50px;'>"
                  }
                  else
                  {
                    img_st = "<img src='/static/images/open-parcel-1.png' style='height:50px;width:50px;'>"
                  }
                  st = "<tr border-1><td>" + img_st + "</td><td class='pick-up-address'>" + response.all_parcels_data[i]['senderpickupaddress'] + "</td><td>" + response.all_parcels_data[i]['recipientname'] + "</td><td class='drop-address'>" + response.all_parcels_data[i]['recipientdropoffaddress'] + "</td><td><a target='_blank' href='/customer/jobdetail/" + response.all_parcels_data[i]['customerjobid'] + "'>See Detail</a></td></tr>"
                  parcels_string += st
                }
                // console.log(parcels_string)
                $('#see-all-parcels-tbody').append(parcels_string)
              }
              $('#SeeAllParcelsView').modal('show')
            }
          })

      });



      $(document).on("click","#cancelParcel",function(e){
        // $('#see-all-parcels-tbody').html('')
        sameParcelId = $(this).closest('td').find('#sameParcelId').text()
        sameParcelink = $(this).closest('td').find('#sameParcelIdlink').attr('href')

        var token = $('input[name="csrfmiddlewaretoken"]').val()
        console.log(sameParcelId)
        console.log(sameParcelink)
        $.ajax({
            type: 'POST',
            url: '/cancelOrder/',
            data: { 'sameparcelID' : sameParcelId, 'csrfmiddlewaretoken' : token},
            success: function(response){
              
              console.log(response);
              // debugger;
              if(response.status==200)
              {
                console.log('Suceess')
                $('#jobCanceled').modal('show')
                setTimeout(function () {
                  window.location.reload();
              }, 2000);
              }
              else{
                console.log('error')
                $('#jobnotCanceled').modal('show')
                setTimeout(function () {
                  window.location.reload();
              }, 2000);
              }
              // $('#SeeAllParcelsView').modal('show')
            }
          })

      });
    </script>
{% endblock %}