{% extends "admin_panel/base_page.html" %}
{% load static %}

{% block title %}
<title>Admins</title>
{% endblock %}

{% block head %}
<link href="{% static 'assets/admin_panel/vendor/datatables/css/jquery.dataTables.min.css' %}" rel="stylesheet">
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Admins</h4>
                <a href="{% url 'add_new_admin' %}" class="btn btn-rounded btn-secondary">
                    <span class="btn-icon-left text-primary">
                        <i class="fa fa-plus color-primary"></i>
                    </span>Add new admin
                </a>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="admins" class="display" style="min-width: 845px">
                        <thead>
                            <tr>
                                <th>Photo</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Role</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% if admins %}
                                {% for admin in admins %}
                                    <tr>
                                        <td>
                                            {% if admin.profile_pic %}
                                                <img src="{{ admin.profile_pic.url }}" height="100" width="100" style="border-radius: 50px" alt="adminimg" />
                                            {% else %}
                                                <img src="{% static 'assets/admin_panel/images/no-image.png' %}" height="100" width="100" style="border-radius: 50px" alt="noimg" />
                                            {% endif %}
                                        </td>
                                        <td>{{ admin.first_name }}</td>
                                        <td>{{ admin.email }}</td>
                                        <td>{{ admin.role.title|default:"Admin" }}</td>
                                        <td>
                                            {% if admin.is_active %}
                                                <span class="badge badge-success">Active</span>
                                            {% else %}
                                                <span class="badge badge-danger">Inactive</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            <a href="{% url 'admin_edit' admin.id %}" type="button" class="btn btn-secondary">
                                                Edit <span class="btn-icon-right"><i class="fa fa-edit"></i></span>
                                            </a>
                                            <a href="javascript:void(0)" data-admin-id="{{ admin.id }}" data-toggle="modal" data-target="#delete_admin" class="btn btn-danger delete-admin">
                                                Delete <span class="btn-icon-right"><i class="fa fa-trash-o"></i></span>
                                            </a>
                                        </td>
                                    </tr>
                                {% endfor %}
                            {% else %}
                                <tr>
                                    <td colspan="6" class="text-center">No admins found</td>
                                </tr>
                            {% endif %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="delete_admin">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Delete Confirmation</h5>
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
            </div>
            <div class="modal-body">Are you sure you want to delete this admin?</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <a href="#" id="confirm-delete" class="btn btn-primary">Delete</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block script %}
<script src="{% static 'assets/js/jquery.min.js' %}"></script>
<script src="{% static 'assets/admin_panel/vendor/datatables/js/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'assets/admin_panel/js/plugins-init/datatables.init.js' %}"></script>
<script>
    var table = $('#admins').DataTable({
        ordering: false
    });
    $(document).ready(function(){
        $('#admins').on('click','.delete-admin', function(){
            let admin_id = $(this).data("admin-id");
            let url = "admin_delete/" + admin_id;
            $("#confirm-delete").attr({"href": url});
        });
    });
</script>
{% endblock %}