{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}
<style>

/*---------------- new-css -----------*/

.items-cont,
.items-box,
.all-select-delete {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.delete-btn a img{
    width: 20px;
    height: 20px;
}
.delete-btn a {
    background-color: #003668;
    color: #fff;
    fill: #fff;
    padding: 10px;
}
.selete-all {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    justify-content: center;
    font-weight: 500;
}
.items-cont input,
.selete-all input {
    height: 20px;
    width: 20px;
}
.items-cont>div {
    display: flex;
    align-items: center;
    gap: 20px;
	margin-left: 20px;
}
.items-cont img {
    width: 90px;
    height: 80px;
    object-fit: contain;
}
.items-cont h5 {

    font-weight: 400;
    font-size: 18px;
}
.items-cont p {
    font-size: 14px;
    color: #434343;
    margin-bottom: 0;
}
.items-box {
    padding: 15px;
}
.main-items {
    border: 1px solid #70707087;
    background-color: #fff;
	padding:0px;
}
.all-select-delete {
    margin-bottom: 20px;
}
.main-items .items-box:nth-child(even) {
    background-color: #f8f8f8;
}
@media screen and (max-width: 600px) {
.items-cont, .items-box, .all-select-delete {
    flex-wrap: wrap;
    justify-content: start;
}
.items-cont>div {
    margin-left: 0;
}
.items-cont h5 {
    font-size: 16px;
}

}
</style>
<title>Kila Kolis | Notifications</title>

<div class="content-wrapper">

<!-- Page Heading -->
<div class="top-bar mb-4">
    <h2 class="f-20 bold">Notifications</h2>
</div>

<!-- Content Row -->

{% if notify_obj %}
<div class="row faq-rw notifications mt-4">
    <div class="col-12 col-md-12 stretch-card">
        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between px-3"> 
                    <label class="mb-0 select-all-note gap-3"><input type="checkbox" class="w-auto m-0" name="prog" id="check-all" value="0">  <span class="select-all-check"> Select All</span></label>
                     <div class="top-form-user notification-wrap">
                        <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="" />
                                    {% if notify_obj %}
                                    <div class="add-btn"><button class="btn btn-primary dark-btn">Delete</button></div>
                                    {% endif %}
                        </form>
                    </div>
                </div>
                <div class="table-responsive mt-3 admin-notification-table">
                    <table class="table header-border table-hover verticle-middle">
                        <thead>
                            <tr>
                                <th>
                                    
                                </th>
                                <th>
                                   
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for notify in notify_obj %}
                            <tr>
                                <td class="notf-checkbox">
                                    <label class="mb-0"><input type="checkbox" name="prog2" value={{ notify.id }}></label>
                                </td>
                                <td>
                                    <div class="notification-list-wrap">
                                        <img src="{% static 'admin/images/not2.png' %}" class="notifican-img">
                                   
                                      <div class="notificate-txt d-flex justify-content-between align-items-center">
                                          <h5 class="noti-heading-title">{{ notify.message }}</h5>
                                        <p class="notificatn-time mt-3"> <i class="fa-solid fa-clock-rotate-left"></i><span class="ps-2">{{ notify.start_date|timesince }} ago</span></p>
                                      </div>
                                    </div>
                                </td>
                            </tr>
                             {% endfor %}
                        </tbody>
                    </table>
                    {% if notify_obj.has_other_pages %}
                    <div class="pagination justify-content-center mt-3">
                    <ul class="pagination">
                        {% if notify_obj.has_previous %}
                        <li class="page-item"><a class="page-link" href="?page={{ notify_obj.previous_page_number }}">«</a></li>
                        {% else %}
                        <li class="page-item disabled"><span class="page-link">«</span></li>
                        {% endif %}

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

                        {% if notify_obj.has_next %}
                        <li class="page-item"><a class="page-link" href="?page={{ notify_obj.next_page_number }}">»</a></li>
                        {% else %}
                        <li class="page-item disabled"><span class="page-link">»</span></li>
                        {% endif %}
                    </ul>
                    </div>
                    {% endif %}

                </div>
            </div>
        </div>
    </div>
</div>
{% else %}
 <p> No new notification found </p>
{% endif %}

<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 %}