{% 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 'admin_header.html' %}
      <!-- partial -->
      <div class="container-fluid page-body-wrapper">
        <!-- partial:partials/_sidebar.html -->
        {% include 'admin_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 Customers<i class="mdi mdi-account-multiple mdi-24px float-right"></i>
                      </h4>
                      <h2 class="mb-5">{{totalcustomers}}</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 Drivers
                        
                         <img src="{% static 'images/drivericon.png' %}" class="img-custom" >

                      </h4>
                      <h2 class="mb-5">{{totaldrivers}}</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">Total Customer Jobs
                        <img src="{% static 'images/custom-jobs-large.png' %}" class="img-custom" >
                      </h4>
                      <h2 class="mb-5">{{totalcustomerjobs}}</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 Customer Jobs</h4>
                  <div class="table-responsive">
                    <table class="table border-table" id="recent-companies-table">
                      <thead>
                        <tr>
                          <th>Serial No.</th>
                          <th>Parcel Image</th>
                          <th>Recipient Name</th>
                          <th>Pickup Address</th>
                          <th>Drop Address</th>
                          <!-- <th>Address</th> -->
                        </tr>
                      </thead>
                      <tbody>
                        {% if recent_customerjobs %}
                          {% for customerjob in recent_customerjobs %}
                            <tr>
                              <td>{{forloop.counter}}</td>
                              <td><img src="{% if customerjob.image %}{{customerjob.image}}{% else %}{% static 'images/open-parcel-1.png' %}{% endif %}"></td>
                              <td>{{customerjob.recipientname}}</td>
                              <td>{{customerjob.pickupaddress}}</td>
                              <td>{{customerjob.dropoffaddress}}</td>
                              <!-- <td>{{customerjob.sendercountrycode}}-{{customerjob.senderphone}}</td> -->
                            </tr>
                          {% endfor %}
                        {% endif %}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
          </div>
          <!-- content-wrapper ends -->
          <!-- partial:partials/_footer.html -->
          {% include 'admin_footer.html' %}
          <!-- partial -->
        </div>
        <!-- main-panel ends -->
      </div>
      <!-- page-body-wrapper ends -->
    </div>
  {% endblock %}


  {% block js %}
    <script src="{% static 'js/gs_push.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>
      var driverid = 1
      // const socket = new WebSocket('ws://' + window.location.host + '/api/driver/'+driverid+'/getchats/');
      socket = new WebSocket('wss://' + window.location.host + '/api/driver/coordinates/admin/1/');
      setTimeout(function() {socket.send('get coordinates')}, 500);
      

      socket.onopen = function (e) {
      console.log('sockets connection created in normal.');
       };
      socket.onmessage = function(e){

         console.log('front end message received - success');

         console.log(e.data);
         socket_data = JSON.parse(e.data)
         
       };
      socket.onerror = function(e){
          console.log(e);
         console.log('error received.');
       };
       socket.onclose = function(e){
         console.log('socket connection closed.');
       };
       

</script>
  {% endblock %}