{% 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">Add Vehicals</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">Driver 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>License Front</td>
                                <td><img src="{% if driverDocs.0.license_front %}{{driverDocs.0.license_front}}{% else %}https://icons.iconarchive.com/icons/custom-icon-design/mono-general-2/512/document-icon.png{% endif %}"></td>
                                {% ifequal driverDocs.0.license_front_documentStatus 1 %}
                                <td>Pending</td>
                                {% endifequal %}
                                {% ifequal driverDocs.0.license_front_documentStatus 2 %}
                                <td>Accepted</td>
                                {% endifequal %}
                                {% ifequal driverDocs.0.license_front_documentStatus 3 %}
                                <td>Rejected</td>
                                {% endifequal %}
                                {% ifequal driverDocs.0.license_front_documentStatus 0 %}
                                <td>Not uploaded</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>License Back</td>
                                <td><img src="{% if driverDocs.0.license_back %}{{driverDocs.0.license_back}}{% else %}https://icons.iconarchive.com/icons/custom-icon-design/mono-general-2/512/document-icon.png{% endif %}"></td>
                                {% ifequal driverDocs.0.license_back_documentStatus 1 %}
                                <td>Pending</td>
                                {% endifequal %}
                                {% ifequal driverDocs.0.license_back_documentStatus 2 %}
                                <td>Accepted</td>
                                {% endifequal %}
                                {% ifequal driverDocs.0.license_back_documentStatus 3 %}
                                <td>Rejected</td>
                                {% endifequal %}
                                {% ifequal driverDocs.0.license_back_documentStatus 0 %}
                                <td>Not uploaded</td>
                                {% endifequal %}
                                <td><input type='file'  class="cc-in"  name='edit_im2a' id='edit_im2a'  onchange="editpreviewFile2a()" accept="image/*" /><input  id="edit-image-srcdata2a" hidden></td>

                                <td><button type="button"  id="update-profile-btn2a" class="btn-c">Upload</button></td>
                                <!-- <td>{{job.dropoffaddress}}</td> -->
                              </tr>
                            <tr>
                            <td>3</td>
                            <td>Passport Front</td>
                                <td><img src="{% if driverDocs.0.id_back %}{{driverDocs.0.id_back}}{% else %}https://icons.iconarchive.com/icons/custom-icon-design/mono-general-2/512/document-icon.png{% endif %}"></td>
                                {% ifequal driverDocs.0.id_front_documentStatus 1 %}
                                <td>Pending</td>
                                {% endifequal %}
                                {% ifequal driverDocs.0.id_front_documentStatus 2 %}
                                <td>Accepted</td>
                                {% endifequal %}
                                {% ifequal driverDocs.0.id_front_documentStatus 3 %}
                                <td>Rejected</td>
                                {% endifequal %}
                                {% ifequal driverDocs.0.id_front_documentStatus 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>Passport Back</td>
                                <td><img src="{% if driverDocs.0.crb_dbs %}{{driverDocs.0.crb_dbs}}{% else %}https://icons.iconarchive.com/icons/custom-icon-design/mono-general-2/512/document-icon.png{% endif %}"></td>
                                {% ifequal driverDocs.0.id_back_documentStatus 1 %}
                                <td>Pending</td>
                                {% endifequal %}
                                {% ifequal driverDocs.0.id_back_documentStatus 2 %}
                                <td>Accepted</td>
                                {% endifequal %}
                                {% ifequal driverDocs.0.id_back_documentStatus 3 %}
                                <td>Rejected</td>
                                {% endifequal %}
                                {% ifequal driverDocs.0.crb_dbs_documentStatus 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>


                             <tr>
                            <td>5</td>
                            <td>CRB/DBS</td>
                                <td><img src="{% if driverDocs.0.crb_dbs %}{{driverDocs.0.crb_dbs}}{% else %}https://icons.iconarchive.com/icons/custom-icon-design/mono-general-2/512/document-icon.png{% endif %}"></td>
                                {% ifequal driverDocs.0.crb_dbs_documentStatus 1 %}
                                <td>Pending</td>
                                {% endifequal %}
                                {% ifequal driverDocs.0.crb_dbs_documentStatus 2 %}
                                <td>Accepted</td>
                                {% endifequal %}
                                {% ifequal driverDocs.0.crb_dbs_documentStatus 3 %}
                                <td>Rejected</td>
                                {% endifequal %}
                                {% ifequal driverDocs.0.crb_dbs_documentStatus 0 %}
                                <td>Not uploaded</td>
                                {% endifequal %}
                                <td><input type='file'  class="cc-in"  name='edit_im5' id='edit_im5'  onchange="editpreviewFile5()" accept="image/*" /><input  id="edit-image-srcdata5" hidden></td>

                                <td><button type="button"  id="update-profile-btn5" 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 class="row">
              <div class="col-12 grid-margin">
                <div class="">
                  <div class="">
                    <h4 class="card-title rcnt-head text-center col-purple">Driver Vehicals</h4>
                    <div class="table-responsive">
                      <table class="table  border-table" id="recent-companies-table">
                        <thead>
                          <tr>
                            <th>Vehical Image</th>
                            <th>Vehical Number</th>
                            <th>Vehical Type</th>
                            <th>Status</th>
                            <!-- <th>Drop Address</th> -->
                          </tr>
                        </thead>
                        <tbody>
                            {% for job in driverVehical %}
                              <tr>
                                <td><img src="{% if job.vehicleimage %}{{job.vehicleimage}}{% else %}https://png.pngtree.com/png-vector/20190215/ourmid/pngtree-vector-car-icon-png-image_515825.jpg{% endif %}"></td>
                                <td><a href="/driver/showVehicalDoc/{{job.id}}/">{{job.vehiclenumber}}</a></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">Vehical Details</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">Vehical Added successfully.</h3>
       </div>          
     </div>
   </div>
  </div>
  <div class="modal fade" id="success_modal_updated2" 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 Uploded 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);
  }
}


$("#update-profile-btn").on( "click", function() {
  // debugger;

  $('#VNO_txt').text('')


  var name = $('#VNO').val()
  var email = $('#selectedVehical').val()


  name = name.trim()

  if (name.length == 0)
  {
    $('#VNO_txt').text('This field is required.')
    $( "#VNO" ).focus();
    return false;
  }
  
  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/addVehicle/',
      data: { 'name' : name, 'type' : email,'image' : 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>
 <script>
    
function editpreviewFile2a() {
  // debugger;
  // alert('in edit-previewfile function')
  var preview2a = document.querySelector('#edit-show-image2a');
  var file2a    = document.querySelector('#edit_im2a').files[0];
  var reader2a  = new FileReader();

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

  if (file2a) {
    reader2a.readAsDataURL(file2a);
  }
}

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);
  }
}

function editpreviewFile5() {
  // debugger;
  // alert('in edit-previewfile function')
  var preview5 = document.querySelector('#edit-show-image5');
  var file5    = document.querySelector('#edit_im5').files[0];
  var reader5  = new FileReader();

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

  if (file5) {
    reader5.readAsDataURL(file5);
  }
}


$("#update-profile-btn2a").on( "click", function() {
  var id = $('#vehicalIDForChange').val()
  var image = $('#edit-image-srcdata2a').val()
  console.log(image)
  // alert(image)
  var token = $('input[name="csrfmiddlewaretoken"]').val()
  $('#loading-img').show();
  $.ajax({
      type: 'POST',
      url: '/driver/uploadDriverDoc/',
      data: { 'id' : id, 'docName' : 'license_back','file' : image,'csrfmiddlewaretoken' : token},
      success: function(response){
        $('#loading-img').hide();
        console.log(response);
        if(response.status_code == 200)
        {
          $('#success_modal_updated2').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/uploadDriverDoc/',
      data: { 'id' : id, 'docName' : 'id_front','file' : image,'csrfmiddlewaretoken' : token},
      success: function(response){
        $('#loading-img').hide();
        console.log(response);
        if(response.status_code == 200)
        {
          $('#success_modal_updated2').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/uploadDriverDoc/',
      data: { 'id' : id, 'docName' : 'id_back','file' : image,'csrfmiddlewaretoken' : token},
      success: function(response){
        $('#loading-img').hide();
        console.log(response);
        if(response.status_code == 200)
        {
          $('#success_modal_updated2').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/uploadDriverDoc/',
      data: { 'id' : id, 'docName' : 'license_front','file' : image,'csrfmiddlewaretoken' : token},
      success: function(response){
        $('#loading-img').hide();
        console.log(response);
        if(response.status_code == 200)
        {
          $('#success_modal_updated2').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-btn5").on( "click", function() {
  var id = $('#vehicalIDForChange').val()
  var image = $('#edit-image-srcdata5').val()
  console.log(image)
  // alert(image)
  var token = $('input[name="csrfmiddlewaretoken"]').val()
  $('#loading-img').show();
  $.ajax({
      type: 'POST',
      url: '/driver/uploadDriverDoc/',
      data: { 'id' : id, 'docName' : 'crb_dbs','file' : image,'csrfmiddlewaretoken' : token},
      success: function(response){
        $('#loading-img').hide();
        console.log(response);
        if(response.status_code == 200)
        {
          $('#success_modal_updated2').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>

  </script>
  {% endblock %}