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

{% block title %}
<title>Departments</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">Departments</h4>
                <a href="{% url 'add_new_department' %}" class="btn btn-rounded btn-secondary">
                    <span class="btn-icon-left text-primary">
                        <i class="fa fa-plus color-primary"></i>
                    </span>Add new department
                </a>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="departments" class="display" style="min-width: 845px">
                        <thead>
                            <tr>
                                <th>Icon</th>
                                <th>Name</th>
                                <th>Description</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% if departments %}
                                {% for department in departments %}
                                    <tr>
                                        <td><img src='{{ department.icon.url }}' height="40" width="40" style="border-radius: 50px" alt="depimg" /></td>
                                        <td>{{ department.title }}</td>
                                        <td>{{ department.description }}</td>
                                        <td>
                                            {% if department.status %}
                                                <span class="badge badge-success">Active</span>
                                            {% else %}
                                                <span class="badge badge-danger">In-Active</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            <a href="{% url 'department_edit' department.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-department-id="{{ department.id }}" data-toggle="modal" data-target="#delete_department" class="btn btn-danger delete-departments">Delete <span
                                                    class="btn-icon-right"><i class="fa fa-trash-o"></i></span>
                                            </a>
                                        </td>
                                    </tr>
                                {%  endfor %}
                            {% endif %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="delete_department">
    <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 department?</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 = $('#departments').DataTable({
            ordering: false
        });
        $(document).ready(function(){
            $('#departments').on('click','.delete-departments', function(){
                let department_id = $(this).data("department-id");
                let url = "department_delete/"+department_id;
                $("#confirm-delete").attr({"href": url});
            });
        });
    </script>
{% endblock %}