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

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


{% block content %}
    <div class="content">
{#        <div class="row">#}
{#    class="col-sm-4 col-3"#}
            <div class="text-center">
                <h4 class="page-title" style="color: #009A6E; font-size: 24px;">{% 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>
                                <th>{% trans "امتیاز روزانه" %}</th>
                                <th>{% trans "اشتراک" %}</th>
                                <th>{% trans "گروه" %}</th>
                                <th>{% trans "کد تخفیف" %}</th>
                                <th>{% trans "آخرین رژیم" %}</th>
                                <th>{% trans "نوع پلن" %}</th>
                                <th>{% trans "پرونده" %}</th>
                                <th class="text-right">{% trans "تغییرات" %}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for patient, number, sub, new, point, total, group, discount, diet, plan_type in patients_list %}
                                {% if new %}
                                    <tr style="background-color: rgba(148,149,236,0.52)">
                                {% else %}
                                    <tr>
                                {% endif %}
                                    <td>
                                        <img width="28" height="28" src="{% static 'panel/doctor' %}/img/user.jpg" class="rounded-circle m-r-5" alt="">
                                        {% if patient.is_favorite %}
                                            <span class="fa fa-star" style="color: gold; font-size: 20px"></span>
                                        {% endif %}
                                        {% if number != 0 %}
                                            <span class="badge badge-pill bg-success float-left">{{ number }}</span>
                                        {% endif %}

                                    </td>
                                    <td><h5>{{ patient.profile.first_name }}</h5></td>
                                    <td><h5>{{ patient.profile.last_name }}</h5></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.therapist.first_name }} {{ patient.profile.therapist.last_name }}</td>
                                    <td>{{ patient.profile.diseases }}</td>
                                    <td class="text-center">{{  total  }}</td>
                                    <td class="text-center">{{  point  }}</td>
                                    {% if sub <= 0 %}
                                        <td class="text-center" style="background-color: rgba(255,0,0,0.36); border-radius: 20px;">{% trans "ندارد" %}</td>
                                    {% elif sub <= 5 %}
                                        <td class="text-center" style="background-color: rgba(255,221,0,0.52); border-radius: 20px;">{{ sub }}</td>
                                    {% else %}
                                        <td class="text-center" style="background-color: rgba(80,180,152,0.25); border-radius: 20px;">{{ sub }}</td>
                                    {% endif %}
                                    <td>{{ group }}</td>
                                    <td>{{ discount }}</td>
                                    <td>{{ diet }}</td>
                                    <td style="text-align: center; font-weight: bold;">{{ plan_type }}</td>
                                    <td>
                                        <a href="{% url 'panel-assistant' %}show/patient/{{ patient.id }}/">
                                            <button type="button" class="btn btn-success btn-lg">{% trans "مشاهده" %}</button>
                                        </a>
                                    </td>
                                    <td class="text-right">
                                        <div class="dropdown dropdown-action">
                                            <a href="#" class="action-icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-ellipsis-v"></i></a>
                                            <div class="dropdown-menu dropdown-menu-right">
                                                <a class="dropdown-item" href="#"><i class="fa fa-pencil m-r-5"></i>{% trans "تغییرات" %}</a>
                                                <a class="dropdown-item" href="{% url 'panel-assistant' %}toggle/favorite/{{ patient.id }}/">
                                                    <i class="fa fa-star{% if patient.is_favorite %} text-warning{% endif %} m-r-5"></i>
                                                    {% if patient.is_favorite %}{% trans "Unfavorite" %}{% else %}{% trans "Favorite" %}{% endif %}
                                                </a>
                                                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#delete_patient"><i class="fa fa-trash-o m-r-5"></i>{% trans "حذف" %}</a>
                                            </div>
                                        </div>
                                    </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-assistant-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>

    <!-- Example: Add in your <head> or before the closing </body> -->
    <!-- DataTables CSS -->
    <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>
      // 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 %}