{% extends 'admin_layout_two.html' %}
{% load static %}
{% block content %}

<style>
.notifications .table-hover tbody tr:hover {
    background-color: unset;
}
.notifications .notification-list-wrap a {
    cursor: unset;
}
.btn{
    border-radius:0; !important
 }
</style>
<title>Beni | Notifications</title>
<div class="content-body">

    <div class="container-fluid mt-3">
        <div class="row page-titles mx-0">
            <div class="col">
                <h2 class="fs-32 mb-0">Notifications</h2>
            </div>
            <div class="col pl-0">
               
            </div>
        </div>
        <div class="top-form-user notification-wrap mt-4">
            <form action="/get-admin-notifications" id="notifications-list" method="get" class="mb-0 d-flex align-items-end user-listing-form flex-grow-1 justify-content-between">
                {% csrf_token %}
                <div class="search-date-form">                          
                    <div class="date-filter">
                       <div class="date-field">
                           <label class="form-label">Start Date</label>
                           <input type="date" id="date" name="start_date" value="{{search_start}}" placeholder="12-02-2022">
                       </div>
                       <div class="date-field">
                           <label class="form-label">End Date</label>
                           <input type="date" id="date" value="{{search_end}}" name="end_date" placeholder="12-02-2022">
                       </div>
                       <div class="date-field">
                           <input type="submit" value="Submit">
                       </div>
                    </div>
                  </div>
            </form>
            <form action="/delete-admin-notifications" method="get" role="form" style="border:0" class="mb-0 d-flex align-items-end user-listing-form flex-grow-1 justify-content-end">
                   {% csrf_token %}
                 <input type="hidden" name="delete_id" id="delete_id" value=""/> 
                <div class="add-btn mx-2"> <a href="/get-admin-notifications" class="btn btn-add">Reset</a></div> 
                  <div class="add-btn"><button class="btn btn-add">Delete</button></div>
            </form>
            
           
          </div>
          <div class="row faq-rw notifications mt-4">
            <div class="col-12 col-md-12">
                <div class="card">
                    <div class="card-body">
                       
                        <div class="table-responsive">
                            <table class="table header-border table-hover verticle-middle">
                            {% if notify_obj %}
                                <thead>
                                    <tr>
                                        <th>
                                            <label class="mb-0 select-note"><input type="checkbox" name="prog" id="check-all" value="0">   Select All</label>
                                        </th>
                                    </tr>
                                </thead>
                                {% endif %}
                                <tbody>
                                {% for user_obj in notify_obj %}
                                    <tr>
                                        <td class="notf-checkbox">
                                            <label><input type="checkbox" name="prog2" value={{ user_obj.id }}></label>
                                        </td>
                                        <td>
                                            <div class="notification-list-wrap">
                                                <a href="#">
                                                    <p class="mb-1">{{ user_obj.message }}</p>
                                                    <div class="not-icon-wrap">
                                                        <span class="me-2" role="img" aria-label="Emoji">📢</span>
                                                        <span>{{ user_obj.start_date|timesince }} ago</span>
                                                    </div>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% if notify_obj %}
  <div class="pagination justify-content-center">
    {% if notify_obj.has_previous %}
      <li><a href="?page={{ notify_obj.previous_page_number }}">&laquo;</a></li>
    {% else %}
      <li class="disabled"><a href="#"><span>&laquo;</span></a></li>
    {% endif %}

    {% if notify_obj.number > 3 %}
      <li><a href="?page=1">1</a></li>
      <li class="disabled"><span>...</span></li>
    {% endif %}

    {% for i in notify_obj.paginator.page_range %}
      {% if i >= notify_obj.number|add:-2 and i <= notify_obj.number|add:2 %}
        {% if notify_obj.number == i %}
          <li><a class="active" href="?page={{ i }}"><span>{{ i }}</span></a></li>
        {% else %}
          <li><a href="?page={{ i }}">{{ i }}</a></li>
        {% endif %}
      {% endif %}
    {% endfor %}

    {% if notify_obj.paginator.num_pages > notify_obj.number|add:2 %}
      <li class="disabled"><span>...</span></li>
      <li><a href="?page={{ notify_obj.paginator.num_pages }}">{{ notify_obj.paginator.num_pages }}</a></li>
    {% endif %}

    {% if notify_obj.has_next %}
      <li><a href="?page={{ notify_obj.next_page_number }}">&raquo;</a></li>
    {% else %}
      <li class="disabled"><span>&raquo;</span></li>
    {% endif %}
  </div>
{% endif %}
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>


<script>
let checkAll = document.getElementById('check-all')
let otherCheckboxes = document.querySelectorAll('input[type=checkbox]:not(#check-all)')

checkAll.addEventListener('change', onCheckAllChange)
otherCheckboxes.forEach(input => input.addEventListener('change', onOtherCheckboxChange))

function onCheckAllChange() {
  otherCheckboxes.forEach((input) => input.checked = checkAll.checked)
}

function onOtherCheckboxChange() {
  let allChecked = Array.from(otherCheckboxes).every(input => input.checked);
  checkAll.checked = allChecked;
}
let pag = document.querySelectorAll('a.page-link')
console.log(pag.length)
let url = window.location

if (url.href.includes("?csrfmiddlewaretoken"))
{
    for (let i = 0; i < pag.length; i++)
    {
        pag[i].href = url.search + pag[i].getAttribute("data-href").replace("?","&")
        console.log(pag[i].getAttribute("data-href"))
    }
} else {
    console.log("not included")
}

$(document).ready(function() {

    var $submit = $("#submit_prog").hide(),
        $cbs = $('input[name="prog"]').click(function() {
            $submit.toggle( $cbs.is(":checked") );
        });

});
$(document).ready(function() {

    var $submit = $("#submit_prog").hide(),
        $cbs = $('input[name="prog2"]').click(function() {
            $submit.toggle( $cbs.is(":checked") );
        });

});

$("input:checkbox").change(function() {
    var someObj = {};
    someObj.fruitsGranted = [];
    someObj.fruitsDenied = [];

    $("input:checkbox").each(function() {
        if ($(this).is(":checked")) {
            someObj.fruitsGranted.push($(this).attr("value"));
        } else {
            someObj.fruitsDenied.push($(this).attr("value"));
        }
    });
    console.log(someObj.fruitsGranted)
    $('#delete_id').val(someObj.fruitsGranted)
});

</script>
{% endblock %}