{% extends "healthcoach/healthcoach_base.html" %}
{% load static i18n %}


{% block extra_head %}
  <link href="{% static 'material-pro/assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.css' %}" rel="stylesheet">
{% endblock extra_head %}


{% block extra_body %}
  <script type="text/javascript">
    {% include "healthcoach/inc.common_js_global_variables.html" %}
  </script>
  <script src="{% static 'material-pro/assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.js' %}"></script>
  <script src="{% static 'js/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.es.min.js' %}"></script>
  <script type="text/javascript" src="{% static 'js/plugins/nunjucks/nunjucks.2018-06-19.js' %}"></script>
  <script type="text/javascript" src="{% static 'js/plugins/serializeJSON/serializeJSON-2.9.0.js' %}"></script>
  <script type="text/javascript" src="{% static 'js/plugins/jquery-twbsPagination-1.4.1/jquery.twbsPagination.js' %}"></script>
  <script type="text/javascript" src="{% static 'js/healthcoach/nunjuckshelper.js' %}"></script>
  <script type="text/javascript" src="{% static 'js/healthcoach/formhelper.js' %}"></script>
  <script type="text/javascript" src="{% static 'js/healthcoach/paginatorhelper.js' %}"></script>
  <script type="text/javascript" src="{% static 'js/healthcoach/ajaxhelper.js' %}"></script>
  <script type="text/javascript" src="{% static 'js/healthcoach/toastrhelper.js' %}"></script>
  {# Catálogo de traducciones de django #}
  <script type="text/javascript" src="{% url 'javascript-catalog' %}"></script>
  {# Plantillas nunjucks #}
  <script type="text/javascript" src="{% static 'js/templates/dashboard.js' %}"></script>
  {# Javascript para la vista #}
  <script type="text/javascript" src="{% static 'js/healthcoach/dashboard.js' %}"></script>
{% endblock extra_body %}

{% block content %}
  {# ============================================================== #}
  {# Bread crumb #}
  {# ============================================================== #}

    <div class="col-md-7 col-4 align-self-center">
      <div class="d-flex m-t-10 justify-content-end">
        <div class="">
            <button id="new-patient-button" class="right-side-toggle waves-effect waves-light btn-success btn btn-circle btn-sm pull-right m-l-10" data-toggle="modal" data-target="#new-patient-modal"><i class="mdi mdi-account-plus text-white" style="animation: none; font-size: 24px; top: 9px; left: 12px;"></i></button>
        </div>
      </div>
    </div>

  {# ============================================================== #}
  {# Start Page Content #}
  {# ============================================================== #}

  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-header">
            <div class="row">
                <div class="col-lg-12">
                    <button id="new-patient-button2" class="btn-success btn pull-right m-l-10" data-toggle="modal" data-target="#new-patient-modal"><i class="mdi mdi-account-plus text-white" ></i> {% trans "Nuevo paciente" %}</button>
                </div>
            </div>            
        </div>
        <div class="card-body">

          <div id="patients-list-container" class="mt-3"></div>
        </div>
      </div>
    </div>
  </div>


  {# ============================================================== #}
  {# Modals #}
  {# ============================================================== #}

  <div class="modal fade" id="new-patient-modal" tabindex="-1" role="dialog" aria-labelledby="new-patient-modal" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header bg-light">
          <h4 class="modal-title">{% trans "Nuevo paciente" %}</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="{% trans "Cerrar" %}">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          {% get_current_language as LANGUAGE_CODE %}
          {% get_language_info for LANGUAGE_CODE as lang %}

          <form id="patient-form" class="needs-validation" novalidate autocomplete="off">
            <div class="form-group">
              <label for="patient-form-first-name">{% trans "Nombre" %} <span class="text-danger">*</span></label>
              <input type="text" class="form-control" id="patient-form-first-name" name="first_name" value="" placeholder="{% trans "Nombre" %}" required minlength=2>
              <div class="invalid-feedback">
                <span class="browser-invalid-feedback"></span>
              </div>
            </div>
            <div class="form-group">
              <label for="patient-form-last-name">{% trans "Apellidos" %} <span class="text-danger">*</span></label>
              <input type="text" class="form-control" id="patient-form-last-name" name="last_name" value="" placeholder="{% trans "Apellidos" %}" required minlength=2>
              <div class="invalid-feedback">
                <span class="browser-invalid-feedback"></span>
              </div>
            </div>
            <div class="form-group">
              <label for="patient-form-gender">{% trans "Sexo" %} <span class="text-danger">*</span></label>
              <select class="custom-select" id="patient-form-gender" name="gender" required>
                <option value="">{% trans "Seleccione sexo" %}</option>
                <option value="Hombre">{% trans "Hombre" %}</option>
                <option value="Mujer">{% trans "Mujer" %}</option>
              </select>
              <div class="invalid-feedback">
                <span class="browser-invalid-feedback"></span>
              </div>
            </div>
            <div class="form-group">
              <label for="patient-form-email">{% trans "Email" %} <span class="text-danger">*</span></label>
              <input type="email" class="form-control" id="patient-form-email" name="email" value="" placeholder="{% trans "ejemplo@ejemplo.com" %}" required>
              <div class="invalid-feedback">
                <span class="browser-invalid-feedback"></span>
              </div>
            </div>
            <div class="form-group">
              <label for="patient-form-telephone">{% trans "Teléfono" %} <span class="text-danger">*</span></label>
              <input type="text" class="form-control" id="patient-form-telephone" name="telephone" value="" placeholder="{% trans "Teléfono" %}" required>
              <div class="invalid-feedback">
                <span class="browser-invalid-feedback"></span>
              </div>
            </div>
            <div class="form-group">
              <label for="patient-form-birthdate">{% trans "Fecha de nacimiento" %} <span class="text-danger">*</span></label>
              <input type="text" class="form-control" id="patient-form-birthdate" name="birthdate" value="" data-provide="datepicker" data-date-autoclose=1 data-date-language="{{ lang.code }}" data-date-format="dd/mm/yyyy" data-date-start-view=0 data-date-min-view-mode=0 data-date-max-view-mode=3 data-date-end-date="{% now "d/m/Y" %}" placeholder="{% trans "Fecha de nacimiento" %}" required>
              <div class="invalid-feedback">
                <span class="browser-invalid-feedback"></span>
              </div>
            </div>
            <input type="hidden" id="patient-form-birthdate-day" name="birthdate_day">
            <input type="hidden" id="patient-form-birthdate-month" name="birthdate_month">
            <input type="hidden" id="patient-form-birthdate-year" name="birthdate_year">
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">{% trans "Cerrar" %}</button>
          <button type="submit" form="patient-form" class="btn btn-primary">{% trans "Guardar" %}</button>
        </div>
      </div>
    </div>
  </div>
{% endblock %}