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

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <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">Sub Admin</h1>
                        </div><!-- /.col -->
                        <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">Sub Admin</li>
                            </ol>
                        </div><!-- /.col -->
                    </div><!-- /.row -->
                </div>
            </div>
            <!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <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/sub-admin-list/sub-admin-add-view/">Add Sub Admin</a>
                            </div>
                        {% endif %}
                        <div class="col-12">
                            <!-- /.card-header -->
                            <div class="card-body">
                                <table id="sub_admin_list" class="table table-bordered table-hover">
                                    <thead>
                                        <tr>
                                            <th>First Name</th>
                                            <th>Last Name</th>
                                            <th>Email</th>
                                            <th>Role</th>
                                            <th>Created At</th>
                                            <th>Status</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for subAdmin in subAdmins %}
                                        <tr>
                                            <td>{{ subAdmin.first_name }}</td>
                                            <td>{{ subAdmin.last_name }}</td>
                                            <td>{{ subAdmin.email }}</td>
                                            <td>{{ subAdmin.userprofile.role.name }}</td>
                                            <td>{{ subAdmin.date_joined }}</td>
                                            <td>
                                                {% if subAdmin.is_active %} 
                                                    Active
                                                {% else %}
                                                    Inactive
                                                {% endif %}
                                            </td>
                                            <td class="tbl-action">
                                                {% if 2 in actions %}
                                                    <a class="btn btn-info btn-sm" href="{% url 'sub_admin_edit' subAdmin.id %}">
                                                        <i class="fas fa-pencil-alt" title="Edit"></i>
                                                    </a>
                                                {% endif %}
                                                {% if 3 in actions %}
                                                    <a class="btn btn-danger btn-sm" href="#" onclick="setDeleteUrl('{{ subAdmin.id }}')" data-toggle="modal" data-target="#deleteModal">
                                                        <i class="fas fa-trash" title="Delete"></i>
                                                    </a>
                                                {% endif %}
                                                {% if 4 in actions %}
                                                    <a class="btn btn-primary btn-sm" href="{% url 'sub_admin_view' subAdmin.id %}">
                                                        <i class="fas fa-eye" title="View"></i>
                                                    </a>
                                                {% endif %}
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                                {% if subAdmins.has_other_pages %}
                                    <div class="dataTables_paginate paging_simple_numbers">
                                        <ul class="pagination">
                                            {% if subAdmins.has_previous %}
                                                <li class="paginate_button page-item previous"><a href="?page={{ subAdmins.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 subAdmins.paginator.page_range %}
                                                {% if subAdmins.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 subAdmins.has_next %}
                                                <li class="paginate_button page-item next"><a href="?page={{ subAdmins.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>
                        <!-- /.card -->
                    </div>
                    <!-- /.col -->
                </div>
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

    <!-- Delete Model -->
    <div class="modal fade" id="deleteModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Delete Sub Admin</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Are you sure want to delete this Sub Admin?</p>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <a id="deleteLink" href="#"><button type="button" class="btn btn-primary">Delete</button></a>
                </div>
            </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

{% endblock %}

{% block custom_js %}
    <script>
        $('#sub_admin_list').DataTable({
            "paging": false,
            "lengthChange": false,
            "searching": true,
            "ordering": true,
            columnDefs: [
                {
                    targets: [3,6],
                    orderable: false 
                }
            ],
            "order": [],
            "info": false,
            "autoWidth": false,
            "responsive": true,
        });
    </script>
    
    <script>
        function setDeleteUrl(subAdminId) {
            var deleteLink = document.getElementById('deleteLink');
            deleteLink.href = "{% url 'sub_admin_delete' 0 %}".replace('0', subAdminId);
        }
    </script>
{% endblock %}