{% 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 %}
    <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-4 stretch-card grid-margin">
                <div class="card  card-img-holder text-white">
                  <!-- <a href="/admin/showallcustomers/"> -->
                    <div class="card-body">
                      <img src="{% static 'assets/images/dashboard/circle.svg' %}" class="card-img-absolute" alt="circle-image" />
                      <h4 class="font-weight-normal mb-3">Total Jobs
                      <img src="{% static 'images/total-jobs.png' %}" class="img-custom-d" >
                      </h4>
                      <h2 class="mb-5">{{totaljobs}}</h2>
                    </div>
                  <!-- </a> -->
                </div>
              </div>
              
              <div class="col-md-4 stretch-card grid-margin">
                <div class="card  card-img-holder text-white">
                  <!-- <a href="/admin/showalldrivers/"> -->
                    <div class="card-body">
                      <img src="{% static 'assets/images/dashboard/circle.svg' %}" class="card-img-absolute" alt="circle-image" />
                      <h4 class="font-weight-normal mb-3">Total Earnings
                        
                         <img src="{% static 'images/earning.png' %}" class="img-custom-d" >

                      </h4>
                      <h2 class="mb-5">{{totalearnings}}</h2>
                    </div>
                  <!-- </a> -->
                </div>
              </div>
<!-- 
              <div class="col-md-4 stretch-card grid-margin">
                <div class="card  card-img-holder text-white">
                  <div class="card-body">
                    <img src="{% static 'assets/images/dashboard/circle.svg' %}" class="card-img-absolute" alt="circle-image" />
                    <h4 class="font-weight-normal mb-3">Total Customer Jobs<i class="mdi mdi-cellphone-link mdi-24px float-right"></i>
                    </h4>
                    <h2 class="mb-5">{{totalcustomerjobs}}</h2>
                  </div>
                </div>
              </div> -->


              <div class="col-md-4 stretch-card grid-margin">
                <div class="card  card-img-holder text-white">
                  <!-- <a href="/admin/customerjobs/outstanding/"> -->
                    <div class="card-body">
                      <img src="{% static 'assets/images/dashboard/circle.svg' %}" class="card-img-absolute" alt="circle-image" />
                      <h4 class="font-weight-normal mb-3">Jobs in Progress
                       <!--  <img src="/static/images/custom-jobs-large.png" class="img-custom" > -->

                        <img src="{% static 'images/inprogess-jobs2.png' %}" class="img-custom-d" >

                      </h4>
                      <h2 class="mb-5">{{totalpendingjobs}}</h2>
                    </div>
                  <!-- </a> -->
                </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">Recent Jobs</h4>
                    <div class="table-responsive">
                      <table class="table  border-table" id="recent-companies-table">
                        <thead>
                          <tr>
                            <th>Parcel Image</th>
                            <th>Sender Name</th>
                            <th>Recipient Name</th>
                            <th>Pickup Address</th>
                            <th>Drop Address</th>
                          </tr>
                        </thead>
                        <tbody>
                          {% if recent_driverjobs %}
                            {% for job in recent_driverjobs %}
                              <tr>
                                <td><img src="{% if job.parcelimage %}{{job.parcelimage}}{% else %}http://13.126.26.12/static/images/open-parcel-1.png{% endif %}"></td>
                                <td>{{job.sendername}}</td>
                                <td>{{job.recipientname}}</td>
                                <td>{{job.pickupaddress}}</td>
                                <td>{{job.dropoffaddress}}</td>
                              </tr>
                            {% endfor %}
                          {% endif %}
                        </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>
  {% 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>
  
  {% endblock %}