{% extends 'registration/base_client.html' %}

{% block title %}Crea Documento{% endblock %}

{% block nav %}
    <a style="margin-left: 10px;" href="{% url 'index' %}" class="breadcrumb">Home</a>
    <a href="#!" class="breadcrumb hide-on-med-and-down">Crea Documento</a>
{% endblock %}

{% block content %}
<div class="row">
  <div class="col l8 offset-l2 s12">
    <div class="card-panel">
      <div class="row">
        <form id="form" action="{% url 'create'%}" method="post" class="col s12">
          {% csrf_token %}
          <input type="hidden" name="action" id="action">
          {% if not next %}
            <div class="row">
              <div class="input-field col s12">
                <select name="doctype">
                  <option value="" disabled selected>Scegli</option>
                  {% for doctype in docs%}
                    <option value="{{doctype.id}}">{{doctype.name}}</option>
                  {% endfor %}
                </select>
                <label>Documento</label>
              </div>
            </div>
            <a class="btn waves-effect waves-light" onclick="window.history.back();" >
              <i class="material-icons left">navigate_before</i>Indietro
            </a>
            <a class="btn waves-effect waves-light" onclick="send('details')" >Avanti
              <i class="material-icons right">navigate_next</i>
            </a>
          {% else %}
            <input type="hidden" name="doctype" value="{{doctype.id}}">
            <div class="row">
              <div class="input-field col s12">
                <select>
                  <option disabled selected>{{doctype.name}}</option>
                </select>
                <label>Documento</label>
              </div>
            </div>
            {% if personal_data %}
              <div class="row">
                <div class="col s12">
                  <div class="card teal">
                    <div class="card-content">
                      <p style="color:white"><b>
                        Il documento conterr&agrave; le informazioni personali, prego verificare che siano corrette e aggiornate
                      </b></p>
                    </div>
                  </div>
                </div>
              </div>
            {% endif %}
            {% if medical_data %}
              <div class="row">
                <div class="col s12">
                  <div class="card teal">
                    <div class="card-content">
                      <p style="color:white"><b>
                        Il documento conterr&agrave; le informazioni mediche, prego verificare che siano corrette e aggiornate
                      </b></p>
                    </div>
                  </div>
                </div>
              </div>
            {% endif %}
            {% if custom_message %}
              <div class="row">
                <div class="col s12">
                  <div class="card teal">
                    <div class="card-content">
                      <p style="color:white"><b>
                        {{custom_message_text}}
                      </b></p>
                    </div>
                  </div>
                </div>
              </div>
            {% endif %}
            {% if custom_data %}
              {% for key in keys %}
                <div class="row">
                  <div class="input-field col s12">
                    <input value="{{key.1}}" name="{{key.0.id}}" id="{{key.0.id}}" type="text">
                    <label for="{{key.0.id}}">{{key.0.key}}</label>
                  </div>
                </div>
              {% endfor %}
            {% endif %}
            <div class="row">
              <div class="col s12">
                <br>
                <a class="btn waves-effect waves-light" onclick="window.history.back();" >
                  <i class="material-icons left">navigate_before</i>Indietro
                </a>
                <a class="btn waves-effect waves-light" onclick="send('save')" >Crea
                  <i class="material-icons right">create</i>
                </a>
              </div>
            </div>
          {% endif %}
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block script %}
$(document).ready(function(){
    $('select').formSelect();
    {% if error %}
      M.toast({html: '{{ error_text}}', classes: 'orange'})
    {% endif %}
  });
function send(id) {
  var form = document.getElementById('form')
  var action = document.getElementById('action')
  action.setAttribute('value', id);
  form.submit()
}
{% endblock %}