{% 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">
    {% include 'customer_header.html' %}
    <div class="container-fluid page-body-wrapper">
      {% include 'customer_sidebar.html' %}
      <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">
            <div class="col-12 grid-margin">
              <div class="">
                <div class="">
                  <h4 class="card-title text-center rcnt-head col-purple">Recent Jobs</h4>
                  <div class="table-responsive">
                    <table class="table border-table table-l" id="recent-companies-table ">
                      <thead>
                        <tr>
                          <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><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 %}
                        {% else %}
                          <tr>
                              <td colspan="4" class="assigned-no-records"> No record exists</td>
                          </tr>
                        {% endif %}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        {% include 'customer_footer.html' %}
      </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>

    if (window.location.protocol == 'https:')
    {
      // var socket = new WebSocket('wss://' + window.location.host + '/chat/admin/');  
      var socket = new WebSocket('wss://' + window.location.host + '/api/driver/1/getchats/');  

      
    }
    else
    {
      // var socket = new WebSocket('ws://' + window.location.host + '/chat/admin/');
      var socket = new WebSocket('ws://' + window.location.host + '/api/driver/1/getchats/');
    }
    console.log('0')
    // console.log('ws://' + window.location.host + '/chat/admin/')

    console.log('1')
    console.log(socket)
    socket.onopen = function (e) {
      console.log('WebSockets connection created.');
      socket.send('thanks')
    };
    
    socket.onmessage = function(e){
      console.log('front end message received.');
      console.log(e)
      e_data = JSON.parse(e.data)
      console.log(e_data)
  // e_data = JSON.parse(e.data)    

      // 
    };

    if (socket.readyState == WebSocket.OPEN) {
      console.log('socket is open')
      socket.onopen();
    }
  </script>
  {% endblock %}