{% 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>Manimaran | Notifications</title>

<div class="container-fluid">

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

<!-- Content Row -->
<div class="top-form-user notification-wrap mt-4">
    <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 dark-btn rounded">Delete</button></div>
                {% endif %}
    </form>
</div>
{% 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="table-responsive">
                    <table class="table header-border table-hover verticle-middle">
                        <thead>
                            <tr>
                                <th>
                                    <label class="mb-0 select-all-note"><input type="checkbox" name="prog" id="check-all" value="0">  <span class="select-all-check"> Select All</span></label>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for notify in notify_obj %}
                            <tr>
                                <td class="notf-checkbox">
                                    <label><input type="checkbox" name="prog2" value={{ notify.id }}></label>
                                </td>
                                <td>
                                    <div class="notification-list-wrap">
                                        <img src="{% static 'admin/images/notify.svg' %}" class="notifican-img">
                                   
                                      <div class="notificate-txt">
                                          <h5>{{ notify.message }}</h5>
                                        <p class="notificatn-time"><span>{{ notify.start_date|timesince }} ago</span></p>
                                      </div>
                                    </div>
                                </td>
                            </tr>
                             {% endfor %}
                        </tbody>
                    </table>
                </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 %}