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

{% block title %}
<title>Doctors</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">Doctors</h4>
                <a href="{% url 'add_new_doctor' %}" class="btn btn-rounded btn-secondary">
                    <span class="btn-icon-left text-primary">
                        <i class="fa fa-plus color-primary"></i>
                    </span>Add new doctor
                </a>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="doctors" class="display" style="min-width: 845px">
                        <thead>
                            <tr>
                                <th>Photo</th>
                                <th>Name</th>
                                <th>Department</th>
                                <th>Title</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% if doctors %}
                                {% for doctor in doctors %}
                                    <tr>
                                        <td><img src='{{ doctor.photo.url }}' height="100" width="100" style="border-radius: 50px" alt="depimg" /></td>
                                        <td>{{ doctor.full_name }}</td>
                                        <td>{{ doctor.department.title }}</td>
                                        <td>{{ doctor.specialisation }}</td>
                                        <td>
                                            {% if doctor.status %}
                                                <span class="badge badge-success">Active</span>
                                            {% else %}
                                                <span class="badge badge-danger">In-Active</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            <a href="{% url 'doctor_edit' doctor.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-doctor-id="{{ doctor.id }}" data-toggle="modal" data-target="#delete_doctor" class="btn btn-danger delete-doctors">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_doctor">
    <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 doctor?</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 = $('#doctors').DataTable({
            ordering: false
        });
        $(document).ready(function(){
            $('#doctors').on('click','.delete-doctors', function(){
                let doctor_id = $(this).data("doctor-id");
                let url = "doctor_delete/"+doctor_id;
                $("#confirm-delete").attr({"href": url});
            });
        });
    </script>
{% endblock %}