{% 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' %}">
<!-- End layout styles -->
<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="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css"> -->
<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  src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script  src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
{% endblock %}
{% block content %}
<div class="container-scroller">
{% include 'admin_header.html' %}
<div class="container-fluid page-body-wrapper">
{% include 'admin_sidebar.html' %}
<div class="main-panel ">
<div class="content-wrapper  notification driver-notify">
   <div class="row  two-divs">
      <div class="col-md-12">
         <div class="page-header">
            <h3 class="page-title">
               <span class="page-title-icon bg-gradient-primary text-white mr-2">
               <i class="mdi mdi-bell-outline  menu-icon"></i>
               </span> All Notifications 
            </h3>
         </div>
      </div>
   </div>


   <div class="row mt-50  table-row">
      <div class="col-md-12 grid-margin ">

        <!--  <div class="container">
            <div class="row mt-50  table-row">
               <div class=" col-12 grid-margin">
                  <div class="">
                     <div class="">
                        {% csrf_token %}
                        {% if all_notifications %}
                        {% for notification in all_notifications %}
                        <ul class="notify_list-menu notify_list usr-noti-lst custm-oti-lst {% ifequal notification.status 'read' %}read-notification{% endifequal %}">
                           <li><span class="coun_ter">.</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">{{notification.notificationtext}}</a></li>
                           <li>
                              <h5 class="date-text">{{notification.date}}</h5>
                           </li>
                        </ul>
                        {% endfor %}
                        {% else %}
                        <h3>No notifications yet</h3>
                        {% endif %} -->
                        <!-- 
                           <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 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>
           
          </thead>

            <tbody>
              {% if all_notifications %}
                {% for notification in all_notifications %}
                  <tr>
                    <td>{{notification.serialno}}</td>
                    <td>{{notification.notificationtype}}</td>
                    <!-- <td>{{notification.relatedto}}</td> -->
                    <td>{{notification.notificationtext}}</td>
                    <td>{{notification.date}}</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>





      </div>



   </div>


</div>


{% include 'admin_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  src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="{% static 'js/admin_showalladmins.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 %}