{% extends 'store_layout_two.html' %}
{% load static %}
{% block content %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.min.css"
crossorigin="anonymous" />
<link rel="stylesheet" href="{% static 'store/build/css/countrySelect.css' %}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.0/css/all.min.css" integrity="sha512-3PN6gfRNZEX4YFyz+sIyTF6pGlQiryJu9NlGhu9LrLMQ7eDjNgudQoFDK3WSNAayeIKc6B8WXXpo4a7HqxjKwg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
.top-form-user.notification-store {
    display: flex;
    align-items: center;
}
.top-form-user.notification-store .date-filter {
    display: flex;
    align-items: flex-end;
}
.top-form-user.notification-store .date-filter .date-field {
    padding: 0 4px;
}
.dropdown-notfication.show p {
    text-align: center;
    margin-bottom: 0;
}
.notification-list-wrap a:hover {
    color: #bc9948;
}
input[type="checkbox"]:checked:after {    
    color: #bc9948;    
}
</style>
<title>Beni | Notifications List</title>
<div class="content-body">

          
    <!-- row -->

    <div class="container-fluid">
          <div class="row page-titles profile mx-0">
            <div class="col">
                <h2 class="fs-32 mb-0">Notifications List</h2>
            </div>
            <div class="col pl-0">
                <!-- <ol class="breadcrumb">
                    <li class="breadcrumb-item active"><a href="javascript:void(0)">Order List</a></li>
                </ol> -->
            </div>
        </div>

        <div class="top-form-user notification-wrap mt-4 notification-store">
            <form action="/get-store-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-store-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"><button class="btn btn-add">Delete</button></div>
            </form>
            
           
          </div>
        <div class="row prdct-rw notification-rw mt-4">
            <div class="col-12 col-md-12">
                <div class="card">
                    <div class="card-body">
                       {% if notify_obj %}
                        <div class="table-responsive">
                            <table class="table header-border table-hover verticle-middle">
                                <thead>
                                    <tr>
                                        <th>
                                            <label class="mb-0 select-note"><input type="checkbox" name="prog" id="check-all" value="0">   <span class="select-space">Select All</span></label>
                                        </th>
                                    </tr>
                                </thead>
                                <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>
                        {% else %}
                        <p class="text-center no-data"> No new notification </p>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% if notify_obj %}
    <div class="demo-inline-spacing">
        <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 %}
                {% for i in notify_obj.paginator.page_range %}
                {% 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 %}
                {% endfor %}
                {% 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>
        </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"));
        }
    });
    data = someObj.fruitsGranted
    const intArray = data.map(str => parseInt(str));
    console.log('99999',intArray)
    const arrayToString = intArray.join(','); // Convert array to comma-separated string

    $('#delete_id').val(arrayToString)
});

</script>
{% endblock %}