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

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

{% block breadcrumb %}
  <a href="{% url 'server'%}" class="breadcrumb hide-on-med-and-down">Admin</a>
  <a class="breadcrumb hide-on-med-and-down">Tipo Doc</a>
{% endblock %}
{% block toolbar %}
  <div class="nav-wrapper {{color}}">
    <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 class="hide-on-med-and-down">
        <form>
          <div class="input-field">
            <input autocomplete="off" id="search" type="search" onkeyup="filterResults()" required>
            <label class="label-icon" for="search"><i class="material-icons">search</i></label>
          </div>
        </form>
      </li>
      <li class="hide-on-med-and-down"><a class="tooltipped" data-position="top" data-tooltip="Pulisci filtri" Onclick="send('clear')"><i class="material-icons">clear</i></a></li>
      <li class="hide-on-med-and-down"><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>
      <li class="hide-on-large-only"><a class='dropdown-trigger' href='#' data-target='dropdown1'><i class="material-icons">filter_list</i></a></li>
    </ul>
  </div>
  <ul id='dropdown1' class='dropdown-content'>
    <li><a Onclick="send('clear')"><i class="material-icons">clear</i>Pulisci</a></li>
    <li><a href="#modal1" data-target="modal1" class="modal-trigger"><i class="material-icons">filter_list</i>Filtri</a></li>
    <li><a href="#modal2" data-target="modal2" class="modal-trigger"><i class="material-icons">search</i>Cerca</a></li>
  </ul>
{% endblock %}

{% block content %}
{% load app_filter %}
<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 l3 s12">
        <label>
          <input name="filter_hidden" type="checkbox" class="filled-in" {{hidden_check}}/>
          <span style="color:black"><i class="material-icons left">visibility_off</i>Disabilitati</span>
        </label>
      </div>
      <div class="input-field col l3 s12">
        <label>
          <input name="filter_public" type="checkbox" class="filled-in" {{public_check}}/>
          <span style="color:black"><i class="material-icons left">public</i>Pubblici</span>
        </label>
      </div>
      <div class="input-field col l3 s12">
        <label>
          <input name="filter_selfsign" type="checkbox" class="filled-in" {{selfsign_check}}/>
          <span style="color:black"><i class="material-icons left">assignment_turned_in</i>No firma</span>
        </label>
      </div>
      <div class="input-field col l3 s12">
        <label>
          <input name="filter_group" type="checkbox" class="filled-in" {{group_check}}/>
          <span style="color:black"><i class="material-icons left">group_work</i>Gruppo</span>
        </label>
      </div>
    </div>
    <div class="row">
      <div class="input-field col l3 s12">
        <label>
          <input name="filter_personal" type="checkbox" class="filled-in" {{personal_check}}/>
          <span style="color:black"><i class="material-icons left">person</i>Personali</span>
        </label>
      </div>
      <div class="input-field col l3 s12">
        <label>
          <input name="filter_medic" type="checkbox" class="filled-in" {{medic_check}}/>
          <span style="color:black"><i class="material-icons left">healing</i>Medici</span>
        </label>
      </div>
      <div class="input-field col l3 s12">
        <label>
          <input name="filter_custom" type="checkbox" class="filled-in" {{custom_check}}/>
          <span style="color:black"><i class="material-icons left">add_circle_outline</i>Personalizzati</span>
        </label>
      </div>
      <div class="input-field col l3 s12">
        <label>
          <input name="filter_message" type="checkbox" class="filled-in" {{message_check}}/>
          <span style="color:black"><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>
<div id="modal2" class="modal">
  <div class="modal-content">
    <div class="input-field">
      <input autocomplete="off" id="searchs" type="text" onkeyup="filterResultsSmall()" required>
      <label for="searchs"><i class="material-icons">search</i></label>
    </div>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Chiudi</a>
  </div>
</div>

<input type="hidden" name="action" id="action">
<ul class="collapsible">
    {% for doctype in docs %}
        <li>
        <div class="collapsible-header list">
            <label>
              <input name={{doctype.id}} type="checkbox" class="filled-in allselect"/>
              <span></span>
            </label>
            {% if not doctype.enabled %}
                <i class="material-icons">visibility_off</i>
            {% endif %}
            {% if not doctype.group_private %}
                <i class="material-icons">public</i>
            {% endif %}
            {% if doctype.custom_group %}
              <i class="material-icons">group_work</i>
            {% endif %}
            {% if doctype.auto_sign %}
                <i class="material-icons">assignment_turned_in</i>
            {% endif %}
            {% if doctype.staff_only %}
                <i class="material-icons">lock</i>
            {% endif %}
            {{doctype.name}}
            <span class="new badge {{color}}" data-badge-caption="">{{doctype|doc_count}}</span>
        </div>
        <div class="collapsible-body"><span>
          <div class="hide-on-med-and-down">
            <a class="waves-effect waves-light btn {{color}}" onclick="send('e{{doctype.id}}')"><i class="material-icons left">edit</i> Modifica tipo</a>
            <a class="waves-effect waves-light btn {{color}}" onclick="send('p{{doctype.id}}')"><i class="material-icons left">file_download</i> Scarica CSV</a>
            {% if doctype.medical_data %}
            <a class="waves-effect waves-light btn {{color}}" onclick="send('m{{doctype.id}}')"><i class="material-icons left">file_download</i> Scarica CSV (con dati medici)</a>
            {% endif %}
          </div>
          <div style="margin-bottom: 0px;" class="hide-on-large-only row">
            <a class="col s12 waves-effect waves-light btn {{color}}" onclick="send('e{{doctype.id}}')"><i class="material-icons left">edit</i> Modifica tipo</a>
            <br>
            <br>
            <a class="col s12 waves-effect waves-light btn {{color}}" onclick="send('d{{doctype.id}}')"><i class="material-icons left">file_download</i> Scarica CSV</a>
            {% if doctype.medical_data %}
            <br>
            <br>
            <a class="col s12 waves-effect waves-light btn {{color}}" onclick="send('m{{doctype.id}}')"><i class="material-icons left">file_download</i> Scarica CSV (con dati medici)</a>
            {% endif %}
          </div>
          <br>
          <br>
          <ul class="collection">
          {% if not doctype.group_private %}
            <li class="collection-item">
              <i class="material-icons left">group_work</i>{{doctype.group.name}}
            </li>
          {% endif %}
          {% if doctype.personal_data %}
            <li class="collection-item">
              <i class="material-icons left">person</i>Dati personali
            </li>
          {% endif %}
          {% if doctype.medical_data %}
            <li class="collection-item">
              <i class="material-icons left">healing</i>Dati medici
            </li>
          {% endif %}
          {% if doctype.max_instances != 0 %}
            <li class="collection-item">
              <i class="material-icons left">control_point_duplicate</i>Numero massimo di partecipanti: {{doctype.max_instances}}
            </li>
          {% endif %}
          </ul>
          {% if doctype.custom_data or doctype.custom_message %}
          <ul class="collapsible">
          {% if doctype.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|doc_key_type %}
                  <tr>
                  <td>{{key.key}}</td>
                  </tr>
                {% endfor %}
                </tbody>
                </table>
              </span></div>
            </li>
          {% endif %}
          {% if doctype.custom_message %}
            <li>
              <div class="collapsible-header">
                <i class="material-icons">message</i>Messaggio aggiuntivo
              </div>
              <div class="collapsible-body"><span>
                {{doctype.custom_message_text | linebreaksbr}}
              </span></div>
            </li>
          {% endif %}
          </ul>
          {% endif %}
        </span></div>
        </li>
    {% endfor %}
</ul>
</form>
<div class="fixed-action-btn">
  <a class="btn-floating btn-large {{color}}" href="{% url 'doccreate'%}">
    <i class="large material-icons">add</i>
  </a>
</div>
{% endblock %}

{%block script%}
$(document).ready(function(){
    $('.collapsible').collapsible();
    $('.modal').modal();
    $('.dropdown-trigger').dropdown({constantWidth: false});
    {% 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
        $('.allselect').each(function() {
            this.checked = true;                        
        });
    } else {
        $('.allselect').each(function() {
            this.checked = false;                       
        });
    }
});

function filterResults() {
  var search = document.getElementById('search')
  var filter = search.value.toUpperCase()
  var items = document.getElementsByClassName('list')


  for (i = 0; i < items.length; i++) {
    var a = items[i];
    var txtValue = a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      items[i].style.display = "";
    } else {
      items[i].style.display = "none";
    }
  }
}

function filterResultsSmall() {
  var search = document.getElementById('searchs')
  var filter = search.value.toUpperCase()
  var items = document.getElementsByClassName('list')


  for (i = 0; i < items.length; i++) {
    var a = items[i];
    var txtValue = a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      items[i].style.display = "";
    } else {
      items[i].style.display = "none";
    }
  }
}
{% endblock %}