{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}
<!-- html code -->
<title>Seer | Notification</title>
<div class="main-content pt-0">
    <div class="content-wrapper">
        <div class="row">
            <div class="col-12">
                <h2 class="topHead"></h2>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="d-flex justify-content-between mt-3 mb-4">
                    <div class="database-tab notify-tabs">
                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="all-tab" name="all-tab" data-bs-toggle="tab"
                                    data-bs-target="#all" type="button" role="tab" aria-controls="all"
                                    aria-selected="true">All</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                
                                <button class="nav-link" id="read-tab" name="read-tab" data-bs-toggle="tab"
                                    data-bs-target="#read" type="button" role="tab" aria-controls="read"
                                    aria-selected="false">Read</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="unread-tab" name="unread-tab" data-bs-toggle="tab"
                                    data-bs-target="#unread" type="button" role="tab" aria-controls="unread"
                                    aria-selected="false">Unread</button>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-content" id="myTabContent">
            <!-- All Tab Content -->
            <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tab">
                <div class="card p-4">
                    <div class="row new-user-table bookings mt-3">
                        {% if all_notify_obj %}
                        {% for notify in all_notify_obj %}
                        <div class="col-12 col-md-12">
                            <div class="nf-outer d-flex justify-content-between align-items-center">
                                <div class="d-flex align-items-center">
                                    <div class="nf-icon">
                                        <img src="/static/admin/images/icons8-bell-96.png" />
                                    </div>
                                    <div class="nf-deatil px-4">
                                        <p class="mb-0 f-18">{{notify.message}}</p>
                                    </div>
                                </div>
                                <div class="nf-time">
                                    <p class="mb-0">{{ notify.start_date|timesince }} ago</p>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                        {% else %}
                        <p>No notification found</p>
                        {% endif %}
                    </div>
                </div>
                {% if all_notify_obj %}
                <!-- Pagination Controls for All Tab -->
                <div class="demo-inline-spacing pagi">
                    <div class="pagination justify-content-center">
                        <nav aria-label="Page navigation">
                            <ul class="pagination">
                                {% if all_notify_obj.has_previous %}
                                <li><a href="?all_page={{ all_notify_obj.previous_page_number }}">&laquo;</a></li>
                                {% else %}
                                <li class="disabled"><a class="page-link" href="#"><i
                                            class="bx bx-chevron-left"></i></a></li>
                                {% endif %}

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

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

                                {% if all_notify_obj.has_next %}
                                <li><a class="page-link" href="?all_page={{ all_notify_obj.next_page_number }}">&raquo;</a>
                                </li>
                                {% else %}
                                <li class="disabled"><a href="#" class="page-link"><i
                                            class="bx bx-chevron-right"></i></a></li>
                                {% endif %}
                            </ul>
                        </nav>
                    </div>
                </div>
                {% endif %}
            </div>
            <!-- Read Tab Content -->
            <div class="tab-pane fade" id="read" role="tabpanel" aria-labelledby="read-tab">
                <div class="card p-4">
                    <div class="row new-user-table bookings mt-3">
                        {% if read_notify_obj %}
                        {% for notify in read_notify_obj %}
                        <div class="col-12 col-md-12">
                            <div class="nf-outer d-flex justify-content-between align-items-center">
                                <div class="d-flex align-items-center">
                                    <div class="nf-icon">
                                        <img src="/static/admin/images/icons8-bell-96.png" />
                                    </div>
                                    <div class="nf-deatil px-4">
                                        <p class="mb-0 f-18">{{notify.message}}</p>
                                    </div>
                                </div>
                                <div class="nf-time">
                                    <p class="mb-0">{{ notify.start_date|timesince }} ago</p>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                        {% else %}
                        <p>No notification found</p>
                        {% endif %}
                    </div>
                </div>
                {% if read_notify_obj %}
                <!-- Pagination Controls for Read Tab -->
                <div class="demo-inline-spacing pagi">
                    <div class="pagination justify-content-center">
                        <nav aria-label="Page navigation">
                            <ul class="pagination">
                                {% if read_notify_obj.has_previous %}
                                <li><a href="?read_page={{ read_notify_obj.previous_page_number }}">&laquo;</a></li>
                                {% else %}
                                <li class="disabled"><a class="page-link" href="#"><i
                                            class="bx bx-chevron-left"></i></a></li>
                                {% endif %}

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

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

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

                                {% if read_notify_obj.has_next %}
                                <li><a class="page-link" href="?read_page={{ read_notify_obj.next_page_number }}">&raquo;</a>
                                </li>
                                {% else %}
                                <li class="disabled"><a href="#" class="page-link"><i
                                            class="bx bx-chevron-right"></i></a></li>
                                {% endif %}
                            </ul>
                        </nav>
                    </div>
                </div>
                {% endif %}
            </div>
            <!-- Unread Tab Content -->
            <div class="tab-pane fade" id="unread" role="tabpanel" aria-labelledby="unread-tab">
                <div class="card p-4">
                    <div class="row new-user-table bookings mt-3">
                        {% if unread_notify_obj %}
                        {% for notify in unread_notify_obj %}
                        <div class="col-12 col-md-12">
                            <div class="nf-outer d-flex justify-content-between align-items-center">
                                <div class="d-flex align-items-center">
                                    <div class="nf-icon">
                                        <img src="/static/admin/images/icons8-bell-96.png" />
                                    </div>
                                    <div class="nf-deatil px-4">
                                        <p class="mb-0 f-18">{{notify.message}}</p>
                                    </div>
                                </div>
                                <div class="nf-time">
                                    <p class="mb-0">{{ notify.start_date|timesince }} ago</p>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                        {% else %}
                        <p>No notification found</p>
                        {% endif %}
                    </div>
                </div>
                {% if unread_notify_obj %}
                <!-- Pagination Controls for Unread Tab -->
                <div class="demo-inline-spacing pagi">
                    <div class="pagination justify-content-center">
                        <nav aria-label="Page navigation">
                            <ul class="pagination">
                                {% if unread_notify_obj.has_previous %}
                                <li><a href="?unread_page={{ unread_notify_obj.previous_page_number }}">&laquo;</a></li>
                                {% else %}
                                <li class="disabled"><a class="page-link" href="#"><i
                                            class="bx bx-chevron-left"></i></a></li>
                                {% endif %}

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

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

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

                                {% if unread_notify_obj.has_next %}
                                <li><a class="page-link" href="?unread_page={{ unread_notify_obj.next_page_number }}">&raquo;</a>
                                </li>
                                {% else %}
                                <li class="disabled"><a href="#" class="page-link"><i
                                            class="bx bx-chevron-right"></i></a></li>
                                {% endif %}
                            </ul>
                        </nav>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}
{%block js%}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Store the currently active tab in sessionStorage
        const tabButtons = document.querySelectorAll('.nav-link');
        tabButtons.forEach(button => {
            button.addEventListener('click', () => {
                sessionStorage.setItem('activeTab', button.id);
            });
        });

        // Set the active tab when the page loads
        const activeTabId = sessionStorage.getItem('activeTab') || 'all-tab';
        const activeTabButton = document.getElementById(activeTabId);
        if (activeTabButton) {
            activeTabButton.click();
        }
    });
</script>
{%endblock%}