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

  {% block title %}
    <title>Dashboard</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' %}" />
  {% endblock %}


  {% block content %}
  {% csrf_token %}
    <div class="container-scroller">
      <!-- partial:partials/_navbar.html -->
      {% include 'driver_header.html' %}
      <!-- partial -->
      <div class="container-fluid page-body-wrapper">
        <!-- partial:partials/_sidebar.html -->
        {% include 'driver_sidebar.html' %}
        <!-- partial -->
        <div class="main-panel">
          <div class="content-wrapper">
            <!-- <div class="page-header">
              <h3 class="page-title">
                <span class="page-title-icon bg-gradient-primary text-white mr-2">
                  <i class="mdi mdi-home"></i>
                </span> Dashboard </h3>
            </div> -->
            
            <div class="row header-2">


              <div class="col-md-12 float-right">

              <!-- <button type="button" class="float-right btn-c" data-toggle="modal" data-target="#myModal">Open Modal</button> -->
            </div>
             </div>

            <div class="row">
              <div class="col-12 grid-margin">
                <div class="">
                  <div class="">
                    <h4 class="card-title rcnt-head text-center col-purple">Vehical Documents</h4>
                    <div class="table-responsive">
                      <table class="table  border-table" id="recent-companies-table">
                        <thead>
                          <tr>
                            <th>Srno.</th>
                            <td>Name</td>
                            <th>Image</th>
                            <th>Status</th>
                            <th>Upload</th>
                            <th>Action</th>
                            <!-- <th>Drop Address</th> -->
                          </tr>
                        </thead>
                        <tbody>
                          <!-- {{driverVehical}} -->
                          <!-- {{driverVehical.0}} -->
                          <!-- {{driverVehical.0.motor_insurance_status}} -->
                          <input  id="vehicalIDForChange" value="{{driverVehical.0.id}}" hidden>
                          <tr>
                            <td>1</td>
                            <td>Vehical Image</td>
                                <td><img src="{% if driverVehical.0.motor_insurance %}{{driverVehical.0.motor_insurance}}{% else %}https://icons.iconarchive.com/icons/custom-icon-design/mono-general-2/512/document-icon.png{% endif %}"></td>
                                {% ifequal driverVehical.0.vehicleimage_status 1 %}
                                <td>Uploded</td>
                                {% else %}
                                <td>Not Uploded</td>
                                {% endifequal %}
                                <td><input type='file'  class="cc-in"  name='edit_im2' id='edit_im1'  onchange="editpreviewFile1()" accept="image/*" /><input  id="edit-image-srcdata1" hidden></td>

                                <td><button type="button"  id="update-profile-btn1" class="btn-c">Upload</button></td>
                                <!-- <td>{{job.dropoffaddress}}</td> -->
                          </tr>
                          <tr>
                            <td>2</td>
                            <td>Motor insurance</td>
                                <td><img src="{% if driverVehical.0.motor_insurance %}{{driverVehical.0.motor_insurance}}{% else %}https://icons.iconarchive.com/icons/custom-icon-design/mono-general-2/512/document-icon.png{% endif %}"></td>
                                {% ifequal driverVehical.0.motor_insurance_status 1 %}
                                <td>Pending</td>
                                {% endifequal %}
                                {% ifequal driverVehical.0.motor_insurance_status 2 %}
                                <td>Accepted</td>
                                {% endifequal %}
                                {% ifequal driverVehical.0.motor_insurance_status 3 %}
                                <td>Rejected</td>
                                {% endifequal %}
                                {% ifequal driverVehical.0.motor_insurance_status 0 %}
                                <td>Not uploaded</td>
                                {% endifequal %}
                                <td><input type='file'  class="cc-in"  name='edit_im2' id='edit_im2'  onchange="editpreviewFile2()" accept="image/*" /><input  id="edit-image-srcdata2" hidden></td>

                                <td><button type="button"  id="update-profile-btn" class="btn-c">Upload</button></td>
                                <!-- <td>{{job.dropoffaddress}}</td> -->
                              </tr>
                            <tr>
                            <td>3</td>
                            <td>Goods in transit cover</td>
                                <td><img src="{% if driverVehical.0.goods_in_transit_cover %}{{driverVehical.0.goods_in_transit_cover}}{% else %}https://icons.iconarchive.com/icons/custom-icon-design/mono-general-2/512/document-icon.png{% endif %}"></td>
                                {% ifequal driverVehical.0.goods_in_transit_cover_status 1 %}
                                <td>Pending</td>
                                {% endifequal %}
                                {% ifequal driverVehical.0.goods_in_transit_cover_status 2 %}
                                <td>Accepted</td>
                                {% endifequal %}
                                {% ifequal driverVehical.0.goods_in_transit_cover_status 3 %}
                                <td>Rejected</td>
                                {% endifequal %}
                                {% ifequal driverVehical.0.goods_in_transit_cover_status 0 %}
                                <td>Not uploaded</td>
                                {% endifequal %}
                                <td><input type='file'  class="cc-in"  name='edit_im2' id='edit_im3'  onchange="editpreviewFile3()" accept="image/*" /><input  id="edit-image-srcdata3" hidden></td>

                                <td><button type="button"  id="update-profile-btn3" class="btn-c">Upload</button></td>
                                <!-- <td>{{job.dropoffaddress}}</td> -->
                              </tr>
                            <tr>
                            <td>4</td>
                            <td>Public liability insurance</td>
                                <td><img src="{% if driverVehical.0.public_liability_insurance %}{{driverVehical.0.public_liability_insurance}}{% else %}https://icons.iconarchive.com/icons/custom-icon-design/mono-general-2/512/document-icon.png{% endif %}"></td>
                                {% ifequal driverVehical.0.public_liability_insurance_status 1 %}
                                <td>Pending</td>
                                {% endifequal %}
                                {% ifequal driverVehical.0.public_liability_insurance_status 2 %}
                                <td>Accepted</td>
                                {% endifequal %}
                                {% ifequal driverVehical.0.public_liability_insurance_status 3 %}
                                <td>Rejected</td>
                                {% endifequal %}
                                {% ifequal driverVehical.0.public_liability_insurance_status 0 %}
                                <td>Not uploaded</td>
                                {% endifequal %}
                                <td><input type='file'  class="cc-in"  name='edit_im4' id='edit_im4'  onchange="editpreviewFile4()" accept="image/*" /><input  id="edit-image-srcdata4" hidden></td>

                                <td><button type="button"  id="update-profile-btn4" class="btn-c">Upload</button></td>
                                <!-- <td>{{job.dropoffaddress}}</td> -->
                              </tr>
                            <!-- {% for job in driverVehical %} -->
                              <!-- <tr> -->
                                <!-- <td><img src="{% if job.vehicleimage %}{{job.vehicleimage}}{% else %}http://13.126.26.12/static/images/open-parcel-1.png{% endif %}"></td> -->
                                <!-- <td>{{job.vehiclenumber}}</td> -->
                                <!-- <td>{{job.vehicletype}}</td> -->
                                <!-- <td>{{job.active}}</td> -->
                                <!-- <td>{{job.dropoffaddress}}</td> -->
                              <!-- </tr> -->
                            <!-- {% endfor %} -->
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- content-wrapper ends -->
          <!-- partial:partials/_footer.html -->
          {% include 'driver_footer.html' %}
          
          <!-- partial -->
        </div>
        <!-- main-panel ends -->
      </div>
      <!-- page-body-wrapper ends -->
    </div>

  <!-- <div id="myModal" class="modal fade  popup-all veh-c" role="dialog"> -->
  <!-- <div class="modal-dialog"> -->

    <!-- Modal content-->
    <!-- <div class="modal-content">
      <div class="modal-header">
        
        <h4 class="modal-title">Modal Header</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body" >
        <input type='file'  class="cc-in"  name='edit_im2' id='edit_im2'  onchange="editpreviewFile2()" accept="image/*" /> 
        <input type='text' class="form-control"  name='vehicalNumber' id="VNO"/>
        <span class="text-danger" id="VNO_txt"></span> 

        <select id="selectedVehical" class="form-control">
          {% for v in allvehical %}
          <option value="{{v.name}}">
            {{v.name}}
          </option>
          {% endfor %}
        </select>
       <input  id="edit-image-srcdata2" hidden>
      </div>
      <div class="modal-footer">
     
         <button type="button"  id="update-profile-btn" class="btn-c">Add</button>
      </div>
    </div>

  </div>
</div> -->

<div class="modal fade" id="success_modal_updated" 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">Document uploaded successfully.</h3>
       </div>          
     </div>
   </div>
  </div>
  {% endblock %}


  {% block js %}
    <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 editpreviewFile2() {
  // debugger;
  // alert('in edit-previewfile function')
  var preview2 = document.querySelector('#edit-show-image2');
  var file2    = document.querySelector('#edit_im2').files[0];
  var reader2  = new FileReader();

  reader2.addEventListener("load", function () {
    // alert(reader.result);
    $('#edit-image-srcdata2').val(reader2.result)
    preview2.src = reader2.result;
console.log(reader2.result);
return false;
  }, false);

  if (file2) {
    reader2.readAsDataURL(file2);
  }
}

function editpreviewFile1() {
  // debugger;
  // alert('in edit-previewfile function')
  var preview1 = document.querySelector('#edit-show-image1');
  var file1    = document.querySelector('#edit_im1').files[0];
  var reader1  = new FileReader();

  reader1.addEventListener("load", function () {
    // alert(reader.result);
    $('#edit-image-srcdata1').val(reader1.result)
    preview1.src = reader1.result;
console.log(reader1.result);
return false;
  }, false);

  if (file1) {
    reader1.readAsDataURL(file1);
  }
}
function editpreviewFile3() {
  // debugger;
  // alert('in edit-previewfile function')
  var preview3 = document.querySelector('#edit-show-image3');
  var file3    = document.querySelector('#edit_im3').files[0];
  var reader3  = new FileReader();

  reader3.addEventListener("load", function () {
    // alert(reader.result);
    $('#edit-image-srcdata3').val(reader3.result)
    preview3.src = reader3.result;
console.log(reader3.result);
return false;
  }, false);

  if (file3) {
    reader3.readAsDataURL(file3);
  }
}
function editpreviewFile4() {
  // debugger;
  // alert('in edit-previewfile function')
  var preview4 = document.querySelector('#edit-show-image4');
  var file4    = document.querySelector('#edit_im4').files[0];
  var reader4  = new FileReader();

  reader4.addEventListener("load", function () {
    // alert(reader.result);
    $('#edit-image-srcdata4').val(reader4.result)
    preview4.src = reader4.result;
console.log(reader4.result);
return false;
  }, false);

  if (file4) {
    reader4.readAsDataURL(file4);
  }
}


$("#update-profile-btn").on( "click", function() {
  var id = $('#vehicalIDForChange').val()
  var image = $('#edit-image-srcdata2').val()
  console.log(image)
  // alert(image)
  var token = $('input[name="csrfmiddlewaretoken"]').val()
  $('#loading-img').show();
  $.ajax({
      type: 'POST',
      url: '/driver/uploadVehicleDoc/',
      data: { 'id' : id, 'docName' : 'motor_insurance','file' : image,'csrfmiddlewaretoken' : token},
      success: function(response){
        $('#loading-img').hide();
        console.log(response);
        if(response.status_code == 200)
        {
          $('#success_modal_updated').modal('show')
          $('#myModal').modal('hide')
          setTimeout(function () {
              location.reload();
          }, 2000);
        }
        else if(response.status_code == 400)
        {
          if(response.status_message)
          {
            alert(response.status_message)
          }
        }
        else if(response.status_code == 500)
        {
          if(response.status_message)
          {
            alert(response.status_message)
          }
        }
      }
    });
});

$("#update-profile-btn3").on( "click", function() {
  var id = $('#vehicalIDForChange').val()
  var image = $('#edit-image-srcdata3').val()
  console.log(image)
  // alert(image)
  var token = $('input[name="csrfmiddlewaretoken"]').val()
  $('#loading-img').show();
  $.ajax({
      type: 'POST',
      url: '/driver/uploadVehicleDoc/',
      data: { 'id' : id, 'docName' : 'goods_in_transit_cover','file' : image,'csrfmiddlewaretoken' : token},
      success: function(response){
        $('#loading-img').hide();
        console.log(response);
        if(response.status_code == 200)
        {
          $('#success_modal_updated').modal('show')
          $('#myModal').modal('hide')
          setTimeout(function () {
              location.reload();
          }, 2000);
        }
        else if(response.status_code == 400)
        {
          if(response.status_message)
          {
            alert(response.status_message)
          }
        }
        else if(response.status_code == 500)
        {
          if(response.status_message)
          {
            alert(response.status_message)
          }
        }
      }
    });
});


$("#update-profile-btn4").on( "click", function() {
  var id = $('#vehicalIDForChange').val()
  var image = $('#edit-image-srcdata4').val()
  console.log(image)
  // alert(image)
  var token = $('input[name="csrfmiddlewaretoken"]').val()
  $('#loading-img').show();
  $.ajax({
      type: 'POST',
      url: '/driver/uploadVehicleDoc/',
      data: { 'id' : id, 'docName' : 'public_liability_insurance','file' : image,'csrfmiddlewaretoken' : token},
      success: function(response){
        $('#loading-img').hide();
        console.log(response);
        if(response.status_code == 200)
        {
          $('#success_modal_updated').modal('show')
          $('#myModal').modal('hide')
          setTimeout(function () {
              location.reload();
          }, 2000);
        }
        else if(response.status_code == 400)
        {
          if(response.status_message)
          {
            alert(response.status_message)
          }
        }
        else if(response.status_code == 500)
        {
          if(response.status_message)
          {
            alert(response.status_message)
          }
        }
      }
    });
});

$("#update-profile-btn1").on( "click", function() {
  var id = $('#vehicalIDForChange').val()
  var image = $('#edit-image-srcdata1').val()
  console.log(image)
  // alert(image)
  var token = $('input[name="csrfmiddlewaretoken"]').val()
  $('#loading-img').show();
  $.ajax({
      type: 'POST',
      url: '/driver/uploadVehicleDoc/',
      data: { 'id' : id, 'docName' : 'vehicleimage','file' : image,'csrfmiddlewaretoken' : token},
      success: function(response){
        $('#loading-img').hide();
        console.log(response);
        if(response.status_code == 200)
        {
          $('#success_modal_updated').modal('show')
          $('#myModal').modal('hide')
          setTimeout(function () {
              location.reload();
          }, 2000);
        }
        else if(response.status_code == 400)
        {
          if(response.status_message)
          {
            alert(response.status_message)
          }
        }
        else if(response.status_code == 500)
        {
          if(response.status_message)
          {
            alert(response.status_message)
          }
        }
      }
    });
});
  </script>
  {% endblock %}