{% extends 'manager/base.html' %}
{% load static %}
{% load i18n %}


{% block header.add_script %}
    <style rel="stylesheet">
        .dropdown-menu li {
        position: relative;
        }
        .dropdown-menu .dropdown-submenu {
        display: none;
        position: absolute;
        left: 100%;
        top: -7px;
        }
        .dropdown-menu .dropdown-submenu-left {
        right: 100%;
        left: auto;
        }
        .dropdown-menu > li:hover > .dropdown-submenu {
        display: block;
        }
    </style>
{% endblock %}

{% block sidebar.dashboard %} {% endblock %}
{% block sidebar.patients %} class="active" {% endblock %}



{% block content %}
    <div class="content">
        <div class="row">
            <div class="col-sm-4 col-3">
                <h4 class="page-title">{% trans "لیست کاربران" %}</h4>
            </div>
            <div class="col-sm-8 col-9 text-right m-b-20">
                <a href="#" class="btn btn btn-primary btn-rounded float-right"><i class="fa fa-plus"></i> Add Patient</a>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="table-responsive">
                    <table class="table table-border table-striped custom-table mb-0" id="patients_table">
                        <thead>
                            <tr>
                                <th></th>
                                <th>{% trans "نام" %}</th>
                                <th>{% trans "نام خانوادگی" %}</th>
                                <th>{% trans "سن" %}</th>
                                <th>{% trans "جنسیت" %}</th>
                                <th>{% trans "بیماری ها" %}</th>
                                <th>{% trans "تاریخ ثبت نام" %}</th>
                                <th>{% trans "پرونده" %}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for patient, new_msgs, total_msgs in patients_list %}
                                <tr>
                                    <td></td>
                                    <td>{{ patient.profile.first_name }}</td>
                                    <td>{{ patient.profile.last_name }}</td>
                                    <td>{{ patient.profile.age }}</td>
                                    {% if patient.profile.gender %}
                                        <td>{% trans "زن" %}</td>
                                    {% elif patient.profile.gender == False %}
                                        <td>{% trans "مرد" %}</td>
                                    {% endif %}
                                    <td>{{ patient.profile.diseases }}</td>
                                    <td dir="rtl">{{ patient.profile.register_time }}</td>
                                    <td>
                                        <a href="{% url 'panel-manager' %}show/patient/{{ patient.id }}/">
                                            <button type="button" class="btn btn-success btn-lg">{% trans "مشاهده" %}</button>
                                        </a>
                                    </td>
                                </tr>
                            {% endfor %}

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block delete %}
    <div id="delete_patient" class="modal fade delete-modal" role="dialog">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body text-center">
                    <img src="{% static 'panel/doctor' %}/img/sent.png" alt="" width="50" height="46">
                    <h3>{% trans "آیا از حذف این کاربر مطمئن هستید؟" %}</h3>
                    <div class="m-t-20"> <a href="#" class="btn btn-white" data-dismiss="modal">{% trans "بستن" %}</a>
                        <a href="{% url 'panel-doctor-patients' %}"><button type="submit" class="btn btn-danger">{% trans "حذف" %}</button></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
{% endblock %}


{% block script %}
    <script src="{% static 'panel/doctor' %}/js/jquery-3.2.1.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/popper.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/bootstrap.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/jquery.slimscroll.js"></script>
    <script src="{% static 'panel/doctor' %}/js/select2.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/jquery.dataTables.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/dataTables.bootstrap4.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/moment.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/bootstrap-datetimepicker.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/app.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
    <!-- If you want the Bootstrap 4 styling for DataTables -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap4.min.css">

    <!-- jQuery (must be before DataTables JS) -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- DataTables JS -->
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <!-- If you want Bootstrap styling for DataTables -->
    <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap4.min.js"></script>
    <script> $(document).ready(function () {$('.assign-to-link').popover(); }); </script>
    <script>
      // Initialize DataTables for the table with ID 'patients_table'
      $(document).ready(function() {
          $('#patients_table').DataTable({
              paging: true,
              searching: true,    // Enable the search box
              info: true,
              lengthChange: true,
              pageLength: 100,
              language: {
                  search: "جستجو:",
                  paginate: {
                      next: "بعدی",
                      previous: "قبلی"
                  },
                  info: "نمایش _START_ تا _END_ از _TOTAL_ ورودی",
                  lengthMenu: "نمایش _MENU_ ورودی در هر صفحه",
                  emptyTable: "هیچ داده‌ای موجود نیست",
              }
          });
      });
    </script>
{% endblock %}