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

{% block title %}Crea iscrizione{% endblock %}

{% block breadcrumb %}
    <a href="#!" class="breadcrumb hide-on-med-and-down">Crea Iscrizione</a>
{% endblock %}

{% load app_filter %}

{% 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' code=uc.id %}" method="post" class="col s12">
          {% csrf_token %}
          <input type="hidden" name="action" id="action">
          {% if not next %}
            <div class="row">
              <div class="col s12">
                {{uc.first_name}} {{uc.last_name}}
                <div style="font-size: 0.5em; line-height: normal;">{{uc.born_date}}</div>
              </div>
            </div>
            <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>Iscrizione</label>
              </div>
            </div>
            <a class="btn waves-effect waves-light {{color}}" onclick="window.history.back();" >
              <i class="material-icons left">navigate_before</i>Indietro
            </a>
            <a class="btn waves-effect waves-light {{color}}" 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>Iscrizione</label>
                </div>
              </div>
            {% if no_free_places%}
              <div class="row">
                <div class="col s12">
                  <div class="card {{color}}">
                    <div class="card-content">
                      <p style="color:white"><b>
                        Siamo spiacenti abbiamo esaurito i posti disponibili per questa iscrizione.
                      </b></p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col s12">
                  <br>
                  <a class="btn waves-effect waves-light {{color}}" onclick="window.history.back();" >
                    <i class="material-icons left">navigate_before</i>Indietro
                  </a>
                  <a class="btn waves-effect waves-light {{color}}" href="/" >Annulla
                    <i class="material-icons right">cancel</i>
                  </a>
                </div>
              </div>
            {% else %}
              {% if personal_data %}
                <div class="row">
                  <div class="col s12">
                    <div class="card {{color}}">
                      <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 {{color}}">
                      <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 {{color}}">
                      <div class="card-content" style="color:white">
                        <p><b>
                          {{custom_message_text | linebreaksbr}}
                        </b></p>
                      </div>
                    </div>
                  </div>
                </div>
              {% endif %}
              {% if custom_data %}
                {% for key in keys %}
                  {% if key.key_extra|is_heading %}
                    <div class="row">
                      <div class="input-field col s12">
                        <h6>{{key.key_extra|parse_heading}}</h6>
                      </div>
                    </div>
                  {% elif key.key_extra|is_multiple_choice %}
                    <div class="row">
                      <div class="col s12">
                        {% with arr=key.key_extra|parse_multiple_choice %}
                          {{arr.0}}
                          {% for val in arr.1 %}
                            <p><label>
                              <input class="with-gap" name="{{key.id}}" value="{{val}}" type="radio"/>
                              <span>{{val}}</span>
                            </label></p>
                          {% endfor %}
                        {% endwith %}
                      </div>
                    </div>
                  {% elif key.key_extra|is_checkbox %}
                    checkbox
                  {% else %}
                    <div class="row">
                      <div class="input-field col s12">
                        <input value="" name="{{key.id}}" id="{{key.id}}" type="text">
                        <label for="{{key.id}}">{{key.key}}</label>
                      </div>
                    </div>
                  {% endif %}
                {% endfor %}
              {% endif %}
              <div class="row">
                <div class="col s12">
                  <div class="card red">
                    <div class="card-content">
                      <p style="color:white"><b>
                        Attenzione: il documento non sarà valido fino a quando non viene approvato. Selezionare
                        il documento dalla pagina principale per approvarlo.
                      </b></p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col s12">
                  <br>
                  <a class="btn waves-effect waves-light {{color}}" onclick="window.history.back();" >
                    <i class="material-icons left">navigate_before</i>Indietro
                  </a>
                  <a class="btn waves-effect waves-light {{color}}" onclick="send('save')" >Crea
                    <i class="material-icons right">create</i>
                  </a>
                </div>
              </div>
            {% endif %}
          {% 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 %}