{% extends 'base.html' %}
{% load static %}
{% block title %}
<title>Notification</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' %}" />
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> -->
<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 'driver_header.html' %}
<div class="container-fluid page-body-wrapper">
{% include 'driver_sidebar.html' %}
<div class="main-panel ">
<div class="content-wrapper  notification">
   <div class="justify-content-center">
      <h3 class="page-title text-center text-sec">All  Notifications</h3>
   </div>
   <div class="col-md-12 grid-margin ">
      <div class="">
         <div class="row mt-50  table-row">
            <div class=" col-12 grid-margin">
               <div class="">
                  <div class="">
                     {% csrf_token %}
                     <div class="table-responsive">

<table class="table table-hover border-table notifications-d">
          <thead>
            <th>Serial No.</th>
            <th>Type</th>
            <!-- <th>For</th> -->
            <th>Text</th>
            <th>Date</th>
           <th>Action</th>
          </thead>

            <tbody>
              {% if all_notifications %}
                {% for notification in all_notifications %}
                  <tr>
                    <td>{{notification.serialno}}</td>
                    <td>{{notification.notificationtype}}</td>
                    <!-- <td>{{notification.jobtype}}</td> -->
                    <td>{{notification.notificationtext}}</td>
                    <td>{{notification.date}}</td>
                    <td>
                      {% if 'message' in notification.notificationtext %}
                        <a href="{% url 'driver-chat' %}" target="_blank">Check Message</a>
                       {% else %} 
                      <a href="/driver/customerjobdetail/{{notification.customerjobid}}" target="_blank">Check Job</a>
                      {% endif %}
                    </td>

                  </tr>
                {% endfor %}
              {% endif %}
    
            </tbody>



          </table>
          {% if all_notifications.has_other_pages %}
                    <ul class="pagination">
                      {% if all_notifications.has_previous %}
                        <li><a href="?page={{ all_notifications.previous_page_number }}">&laquo;</a></li>
                      {% else %}
                        <li class="disabled"><span>&laquo;</span></li>
                      {% endif %}
                      {% for i in all_notifications.paginator.page_range %}
                        {% if all_notifications.number == i %}
                          <li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
                        {% else %}
                          <li><a href="?page={{ i }}">{{ i }}</a></li>
                        {% endif %}
                      {% endfor %}
                      {% if all_notifications.has_next %}
                        <li><a href="?page={{ all_notifications.next_page_number }}">&raquo;</a></li>
                      {% else %}
                        <li class="disabled"><span>&raquo;</span></li>
                      {% endif %}
                    </ul>
                  {% endif %}


</div>

                    
                     <!-- 
                        <ul class="notify_list-menu notify_list usr-noti-lst custm-oti-lst read-notification">
                         <li><span class="coun_ter">1</span> </li>
                        <li class=""><img src="http://13.126.26.12:9090/static/images/message-box.png" class="woftd_notify_image" style="width:30px;"></li>
                        <li class="li_p"><a href="https://google.com/" target="_blank">https://google.com/</a></li>
                          
                          
                        <li><h5 class="date-text">May 6, 2020, 7:31 a.m.</h5></li>
                        </ul>
                        -->
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
{% include 'driver_footer.html' %}
{% 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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   // <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> -->
<!-- <script>
   $('.notification').on( "click", function() {
   alert('clicked')
   // customer_id = $ (this).closest('td').find('.customer_id').text()
   notificationid = '2'
   var token=$('input[name="csrfmiddlewaretoken"]').val()
   $.ajax({
   type: 'POST',
   url: '/admin/readnotification/',
   data: { 'notificationid' : notificationid, 'csrfmiddlewaretoken' : token},
   success: function(response){
     console.log(response);
     if(response.status_code == 200)
     {
   	setTimeout(function () {
   		location.reload();
   	}, 2000);
     }
     else if(response.status_code == 0)
     {
   
     }
   }
    });
   })
</script> -->
{% endblock %}