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

{% block title %}Admin - Tipo Documenti{% endblock %}

{% block nav %}
  <nav class="nav-extended">
    <div class="nav-wrapper red lighten-1">
      <a style="margin-left: 10px;" href="{% url 'index' %}" class="breadcrumb">Home</a>
      <a href="{% url 'server'%}" class="breadcrumb hide-on-med-and-down">Admin</a>
      <a href="{% url 'doctype' %}" class="breadcrumb hide-on-med-and-down">Tipo Doc</a>
      <ul class="right">
          {% if user.is_staff %}
            <li><a href="{% url 'server' %}">Pannello Admin</a></li>
          {% endif %}
          {% if user.is_authenticated %}
            <li><a href="{% url 'personal' %}">{{ user.username }}</a></li>
          {% endif %}
          {% if user.username != "" %}
            <li>
            <a href="{% url 'logout' %}"><i class="material-icons">exit_to_app</i></a>
            </li>
          {% else %}
            <li><a href="{% url 'signup' %}">Registrazione</a></li>
            <li><a href="{% url 'login' %}">Login</a></li>
          {% endif %}
      </ul>
    </div>
    <div class="nav-wrapper red lighten-1">
      <ul>
        <li>
          <input id="select-all" type="checkbox" class="filled-in"/>
          <label for="select-all">
            <a class="tooltipped" data-position="top" data-tooltip="(De)Seleziona tutti" onclick=""><i class="material-icons">select_all</i>
          </label>
          </a>
        </li>
        <li><a class="tooltipped" data-position="top" data-tooltip="Mostra selezionati" onclick="send('show')"><i class="material-icons">visibility</i></a></li>
        <li><a class="tooltipped" data-position="top" data-tooltip="Nascondi selezionati" Onclick="send('hide')"><i class="material-icons">visibility_off</i></a></li>
        <li><a class="tooltipped" data-position="top" data-tooltip="Elimina selezionati" Onclick="send('delete')"><i class="material-icons">delete</i></a></li>
      </ul>
      <ul class="right">
        <li><a class="tooltipped" data-position="top" data-tooltip="Pulisci filtri" Onclick="send('clear')"><i class="material-icons">clear</i></a></li>
        <li><a href="#modal1" data-target="modal1" class="modal-trigger tooltipped" data-position="top" data-tooltip="Filtri"><i class="material-icons">filter_list</i></a></li>
      </ul>
    </div>
  </nav>
{% endblock %}

{% block content %}
<form id="selection" action="{% url 'doctype' %}" method="post">
{% csrf_token %}
<div id="modal1" class="modal">
  <div class="modal-content">
    <h5>Filtri</h5>
    <div class="row">
      <div class="input-field col s4">
        <label>
          <input name="filter_hidden" type="checkbox" class="filled-in" {{hidden_check}}/>
          <span><i class="material-icons left">visibility_off</i>Disabilitati</span>
        </label>
      </div>
      <div class="input-field col s4">
        <label>
          <input name="filter_public" type="checkbox" class="filled-in" {{public_check}}/>
          <span><i class="material-icons left">public</i>Pubblici</span>
        </label>
      </div>
      <div class="input-field col s4">
        <label>
          <input name="filter_selfsign" type="checkbox" class="filled-in" {{selfsign_check}}/>
          <span><i class="material-icons left">assignment_turned_in</i>No firma</span>
        </label>
      </div>
    </div>
    <div class="row">
      <div class="input-field col s3">
        <label>
          <input name="filter_personal" type="checkbox" class="filled-in" {{personal_check}}/>
          <span><i class="material-icons left">person</i>Personali</span>
        </label>
      </div>
      <div class="input-field col s3">
        <label>
          <input name="filter_medic" type="checkbox" class="filled-in" {{medic_check}}/>
          <span><i class="material-icons left">healing</i>Medici</span>
        </label>
      </div>
      <div class="input-field col s3">
        <label>
          <input name="filter_custom" type="checkbox" class="filled-in" {{custom_check}}/>
          <span><i class="material-icons left">add_circle_outline</i>Personalizzati</span>
        </label>
      </div>
      <div class="input-field col s3">
        <label>
          <input name="filter_message" type="checkbox" class="filled-in" {{message_check}}/>
          <span><i class="material-icons left">message</i>Messaggi</span>
        </label>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <a href="#!" onclick="send('filter')" class="modal-close waves-effect waves-green btn-flat">Applica</a>
  </div>
</div>

<input type="hidden" name="action" id="action">
<ul class="collapsible">
    {% for doctype in docs %}
        <li>
        <div class="collapsible-header">
            <label>
              <input name={{doctype.0.id}} type="checkbox" class="filled-in"/>
              <span></span>
            </label>
            {% if not doctype.0.enabled %}
                <i class="material-icons">visibility_off</i>
            {% endif %}
            {% if not doctype.0.group_private %}
                <i class="material-icons">public</i>
            {% endif %}
            {% if doctype.0.auto_sign %}
                <i class="material-icons">assignment_turned_in</i>
            {% endif %}
            {{doctype.0.name}}
            <span class="new badge red lighten-1" data-badge-caption="">{{doctype.2}}</span>
        </div>
        <div class="collapsible-body"><span>
          <ul class="collapsible">
          {% if doctype.0.personal_data %}
            <li>
              <div class="collapsible-header">
                <i class="material-icons">person</i>Dati personali
              </div>
            </li>
          {% endif %}
          {% if doctype.0.medical_data %}
            <li>
              <div class="collapsible-header">
                <i class="material-icons">healing</i>Dati medici
              </div>
            </li>
          {% endif %}
          {% if doctype.0.custom_data %}
            <li>
              <div class="collapsible-header">
                <i class="material-icons">add_circle_outline</i>Dati aggiuntivi
              </div>
              <div class="collapsible-body"><span>
                <table class="striped">
                <tbody>
                {% for key in doctype.1 %}
                  <tr>
                  <td>{{key.key}}</td>
                  </tr>
                {% endfor %}
                </tbody>
                </table>
              </span></div>
            </li>
          {% endif %}
          {% if doctype.0.custom_message %}
            <li>
              <div class="collapsible-header">
                <i class="material-icons">message</i>Messaggio aggiuntivo
              </div>
              <div class="collapsible-body"><span>
                {{doctype.0.custom_message_text}}
              </span></div>
            </li>
          {% endif %}
          </ul>
        </span></div>
        </li>
    {% endfor %}
</ul>
</form>
<div class="fixed-action-btn">
  <a class="btn-floating btn-large red lighten-1" href="{% url 'doccreate'%}">
    <i class="large material-icons">add</i>
  </a>
</div>
{% endblock %}

{%block script%}
$(document).ready(function(){
    $('.collapsible').collapsible();
    $('.tooltipped').tooltip();
    $('.modal').modal();
    {% if error %}
      M.toast({html: '{{ error_text}}', classes: 'orange'})
    {% endif %}
});

function send(id) {
  var form = document.getElementById('selection')
  var action = document.getElementById('action')
  action.setAttribute('value', id);
  form.submit()
}

$('#select-all').click(function(event) {   
    if(this.checked) {
        // Iterate each checkbox
        $(':checkbox').each(function() {
            this.checked = true;                        
        });
    } else {
        $(':checkbox').each(function() {
            this.checked = false;                       
        });
    }
});
{% endblock %}