{% extends 'admin/layout/admin_app.html' %}

{% block content %}
    {% if messages %}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            {% for message in messages %}
                showToastr("{{ message }}", "{{ message.tags }}");
            {% endfor %}
        });
    </script>
    {% endif %}

    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div class="card">
                    <div class="row m-1">
                        <div class="col-sm-6">
                            <h1 class="ml-2">Push Notification</h1>
                        </div>
                        <div class="col-sm-6">
                            <ol class="breadcrumb float-sm-right mr-2">
                                <li class="breadcrumb-item"><a href="/admin/dashboard/">Home</a></li>
                                <li class="breadcrumb-item active">Push Notification</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <section class="content">
            <div class="container-fluid">
                <div class="card">
                    <div class="row">
                        {% if 1 in actions %}
                            <div class="col-12 text-right">
                                <a class="btn btn-primary mr-4 mt-2" href="/admin/push-notification-list/push-notification-send-view/">Send Notification</a>
                            </div>
                        {% endif %}
                        <div class="col-12">
                            <div class="card-body">
                                <table id="push_notification_list" class="table table-bordered table-hover">
                                    <thead>
                                        <tr>
                                            <th>User</th>
                                            <th>Title</th>
                                            <th>Send At</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for pushNotification in pushNotifications %}
                                            <tr>
                                                <td>{{ pushNotification.user.name }}</td>
                                                <td>{{ pushNotification.title }}</td>
                                                <td>{{ pushNotification.created_at }}</td>
                                                <td>
                                                    {% if 4 in actions %}
                                                        <a class="btn btn-primary btn-sm" href="{% url 'push_notification_view' pushNotification.id %}">
                                                            <i class="fas fa-eye" title="View"></i>
                                                        </a>
                                                    {% endif %}
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                                {% if pushNotifications.has_other_pages %}
                                    <div class="dataTables_paginate paging_simple_numbers">
                                        <ul class="pagination">
                                            {% if pushNotifications.has_previous %}
                                                <li class="paginate_button page-item previous"><a href="?page={{ pushNotifications.previous_page_number }}" class="page-link">Previous</a></li>
                                            {% else %}
                                                <li class="paginate_button page-item previous disabled"><a class="page-link">Previous</a></li>
                                            {% endif %}
                                            {% for i in pushNotifications.paginator.page_range %}
                                                {% if pushNotifications.number == i %}
                                                    <li class="paginate_button page-item active"><a href="?page={{ i }}" class="page-link">{{ i }}</a></li>
                                                {% else %}
                                                    <li class="paginate_button page-item"><a href="?page={{ i }}" class="page-link">{{ i }}</a></li>
                                                {% endif %}
                                            {% endfor %}
                                            {% if pushNotifications.has_next %}
                                                <li class="paginate_button page-item next"><a href="?page={{ pushNotifications.next_page_number }}" class="page-link">Next</a></li>
                                            {% else %}
                                                <li class="paginate_button page-item next disabled"><a href="#" class="page-link">Next</a></li>
                                            {% endif %}
                                        </ul>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
                        
{% endblock %}

{% block custom_js %}
<script>
    $('#push_notification_list').DataTable({
        "paging": false,
        "lengthChange": false,
        "searching": false,
        "ordering": true,
        columnDefs: [
            {
                targets: [3],
                orderable: false 
            }
        ],
        "order": [],
        "info": false,
        "autoWidth": false,
        "responsive": true,
    });
</script>
{% endblock %}