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

{% block title %}Admin - 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">Documenti</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 modal-trigger" href="#modal2" data-position="top" data-tooltip="Archivia selezionati"><i class="material-icons">archive</i></a></li>
      <li><a class="tooltipped" data-position="top" data-tooltip="Dearchivia selezionati" Onclick="send('unarchive')"><i class="material-icons">unarchive</i></a></li>
      <li><a class="tooltipped modal-trigger" href="#modal3" data-position="top" data-tooltip="Scarica selezionati" Onclick="send('download')"><i class="material-icons">file_download</i></a></li>
      {% if settings.DEBUG %}
        <li><a class="tooltipped" data-position="top" data-tooltip="Approva selezionati" Onclick="send('approve')"><i class="material-icons left">check</i>DEBUG</a></li>
        <li><a class="tooltipped" data-position="top" data-tooltip="Elimina selezionati" Onclick="send('delete')"><i class="material-icons left">delete</i>DEBUG</a></li>
      {% endif %}
    </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>
{% endblock %}

{% block content %}
{% load app_filter %}

<div id="modal2" class="modal">
  <div class="modal-content">
    <h4>Attenzione</h4>
    <p>
      Se il documento contine dati medici quando archiviato tutti i dati medici verranno eliminati.
    </p>
  </div>
  <div class="modal-footer">
    <a style="color:red" href="#!" class="modal-close waves-effect waves-green btn-flat">Annulla</a>
    <a onclick="send('archive')" class="modal-close waves-effect waves-green btn-flat">Archivia documenti</a>
  </div>
</div>

<div id="modal3" class="modal">
  <div class="modal-content">
    <h5>Preparazione dei documenti</h5>
    <div class="progress">
        <div id="progress_bar" class="indeterminate"></div>
        <div class="determinate" style="width: 0%"></div>
    </div>
    <p id="progress_text"></p>
    <div id="modal_close_button" class="modal-footer" hidden>
      <a onclick="resetModal()" class="modal-close waves-effect waves-green btn-flat">Chiudi</a>
    </div>
  </div>
</div>

<form id="selection" action="{% url 'doclist' %}" 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">archive</i>Archiviati</span>
        </label>
      </div>
      <div class="input-field col l3 s12">
        <label>
          <input name="filter_wait" type="checkbox" class="filled-in" {{wait_check}}/>
          <span style="color:black"><i class="material-icons left">timelapse</i>In Attesa</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_ok" type="checkbox" class="filled-in" {{ok_check}}/>
          <span style="color:black"><i class="material-icons left">check</i>Approvati</span>
        </label>
      </div>
    </div>
    <br>
    <div class="row">
      <ul class="collapsible"><li>
        <div class="collapsible-header">Avanzati</div>
        <div class="collapsible-body"><span>
          <div class="row">
            <div class="input-field col s12">
              <label>
                <input name="filter_signdoc" type="checkbox" class="filled-in" {{signdoc_check}}/>
                <span style="color:black"><i class="material-icons left">check_circle</i>Visualizza solo approvati con firma allegata</span>
              </label>
            </div>
          </div>
          <br>
          <br>
          <div class = "row">
            <div class="input-field col l6 s12">
              <label for="newer">Pi&ugrave; recenti di</label>
              <input value="{{newer}}" name="newer" id="newer" type="text" class="datepicker">
            </div>
            <div class="input-field col l6 s12">
              <label for="older">Pi&ugrave; vecchi di</label>
              <input value="{{older}}" name="older" id="older" type="text" class="datepicker">
            </div>
          </div>
          <div class = "row">
            <div class="col s12">
              <div id="chips_type" class="chips chips-placeholder chips-autocomplete"></div>
            </div>
            <div class="col s12">
              <div id="chips_owner" class="chips chips-placeholder chips-autocomplete "></div>
            </div>
            <div class="col s12">
              <div id="chips_groups" class="chips chips-placeholder chips-autocomplete "></div>
            </div>
          </div>
        </span></div>
      </li></ul>
    </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">
<input type="hidden" name="owner" id="owner">
<input type="hidden" name="type" id="type">
<input type="hidden" name="groups" id="groups">
<ul class="collapsible">
    {% for doc in docs %}
        <li>
        <div class="collapsible-header">
            <label>
              <input name={{doc.id}} type="checkbox" class="filled-in allselect"/>
              <span></span>
            </label>
            {% if doc.status == "wait" %}
                <i class="material-icons">timelapse</i>
            {% elif doc.status == "ok" %}
              {% if doc.signed_doc %}
                <i class="material-icons">check_circle</i>
              {% else %}
                <i class="material-icons">check</i>
              {% endif %}
            {% elif doc.status == "archive" %}
                <i class="material-icons">archive</i>
            {% elif doc.status == "autosign" %}
              <i class="material-icons">assignment_turned_in</i>
            {% endif %}
            {% if settings.DEBUG %}
              {{doc.id}}: 
            {% endif %}
            {{doc.document_type.name}}
            <span class="badge" data-badge-caption="">{{doc.user.first_name}} {{doc.user.last_name}}</span>
        </div>
        <div class="collapsible-body"><span>
          {% if doc.status == "ok" or doc.status == 'archive' %}
            <a class="waves-effect waves-light btn {{color}}" onclick="send('k{{doc.id}}')"><i class="material-icons left">file_download</i> Scarica documento</a>
            <br>
            <br>
          {% endif %}
          <ul class="collection">
            {% if doc.status == 'ok' or doc.status == 'archive' %}
            <li class="collection-item">
              <i class="material-icons left">confirmation_number</i>{{doc.code}}
            </li>
            {% endif %}
            {% if doc.document_type.custom_group %}
            <li class="collection-item">
              <i class="material-icons left">group_work</i>{{doc.group.name}}
            </li>
            {% endif %}
            <li class="collection-item">
              <i class="material-icons left">send</i>{{doc.compilation_date}}
            </li>
          </ul>
          <ul class="collapsible">
          {% if doc.document_type.personal_data %}
            <li>
              <div class="collapsible-header">
                <i class="material-icons">person</i>Dati personali
              </div>
              <div class="collapsible-body"><span>
                <div class="row">
                  <div class="input-field col l4 s12">
                    <input disabled value="{{doc.user.first_name}}" id="first_name" type="text" >
                    <label for="first_name">Nome</label>
                  </div>
                  <div class="input-field col l4 s12">
                    <input disabled value="{{doc.user.last_name}}" id="last_name" type="text" >
                    <label for="last_name">Cognome</label>
                  </div>
                  <div class="input-field col l4 s12">
                    <input disabled value="{{doc.personal_data.born_date}}" id="birth_date" type="text">
                    <label for="birth_date">Data di nascita</label>
                  </div>
                  <div class="input-field col l4 s12">
                    <input disabled value="{{doc.user|user_primary_group}}" id="branca" type="text">
                    <label for="branca">Branca</label>
                  </div>
                  <div class="input-field col l4 s12">
                    <input disabled value="{{doc.personal_data.parent_name}}" id="parent_name" type="text" >
                    <label for="parent_name">Nome dei genitori</label>
                  </div>
                  <div class="input-field col l4 s12">
                    <input disabled value="{{doc.personal_data.avs_number}}" id="avs_number" type="text">
                    <label for="avs_number">Numero AVS</label>
                  </div>
                  <div class="input-field col l12 s12">
                    <input value="{{doc.personal_data.via}}" disabled id="via" type="text" >
                    <label for="via">Via e numero</label>
                  </div>
                  <div class="input-field col l4 s12">
                    <input disabled value="{{doc.personal_data.cap}}" name="cap" id="cap" type="text" >
                    <label for="cap">CAP</label>
                  </div>
                  <div class="input-field col l4 s12">
                    <input disabled value="{{doc.personal_data.country}}" name="country" id="country" type="text" >
                    <label for="country">Comune</label>
                  </div>
                  <div class="input-field col l4 s12">
                    <input disabled value="{{doc.personal_data.nationality}}" name="nationality" id="nationality" type="text" >
                    <label for="nationality">Nazionalit&agrave;</label>
                  </div>
                  <div class="input-field col l4 s12">
                    <input disabled value="{{doc.personal_data.phone}}" name="phone" id="phone" type="text" >
                    <label for="phone">Cellulare</label>
                  </div>
                  <div class="input-field col l4 s12">
                    <input disabled value="{{doc.personal_data.home_phone}}" name="home_phone" id="home_phone" type="text" >
                    <label for="home_phone">Telefono di casa</label>
                  </div>
                  <div class="input-field col l4 s12">
                    <input disabled value="{{doc.personal_data.email}}" name="email" id="email" type="text" >
                    <label for="email">Email</label>
                  </div>
                  <div class="input-field col l8 s12">
                    <input disabled value="{{doc.personal_data.school}}" name="school" id="school" type="text" >
                    <label for="school">Scuola frequentata</label>
                  </div>
                  <div class="input-field col l4 s12">
                    <input disabled value="{{doc.personal_data.year}}" name="year" id="year" type="text" >
                    <label for="year">Classe</label>
                  </div>
                </div>
              </span></div>
            </li>
          {% endif %}
          {% if doc.document_type.medical_data %}
            <li>
              <div class="collapsible-header">
                {% if doc.medical_data %}
                  <i class="material-icons">healing</i>Dati medici
                {% else %}
                  <i class="material-icons">healing</i><del>Dati medici</del>
                {% endif %}
              </div>
              {% if doc.medical_data %}
              <div class="collapsible-body"><span>
                <div class="row">
                  <div class="col s12">
                    <h6>Persona di contatto in caso di necessit&agrave;</h6>
                  </div>
                </div>
                <div class="row">
                  <div class="input-field col l6 s12">
                    <input disabled name="emer_name" value="{{doc.medical_data.emer_name}}" id="emer_name" type="text" >
                    <label for="emer_name">Nome e cognome</label>
                  </div>
                  <div class="input-field col l3 s12">
                    <input disabled name="emer_relative" value="{{doc.medical_data.emer_relative}}" id="emer_relative" type="text" >
                    <label for="emer_releative">Parentela</label>
                  </div>
                  <div class="input-field col l3 s12">
                    <input disabled name="cell_phone" value="{{doc.medical_data.cell_phone}}" id="cellphone" type="text" >
                    <label for="cell_phone">Cellulare</label>
                  </div>
                  <div class="input-field col l9 s12">
                    <input disabled value="{{doc.medical_data.address}}" name="address" id="address" type="text" >
                    <label for="address">Indirizzo completo</label>
                  </div>
                  <div class="input-field col l3 s12">
                    <input disabled value="{{doc.medical_data.emer_phone}}" name="emer_phone" id="emer_phone" type="text" >
                    <label for="emer_phone">Telefono di casa</label>
                  </div>
                </div>
                <div class="row">
                  <div class="col s12">
                    <h6>Assicurazione</h6>
                  </div>
                </div>
                <div class="row">
                  <div class="input-field col l4 s12">
                    <input disabled value="{{doc.medical_data.health_care}}" name="health_care" id="health_care" type="text" >
                    <label for="health_care">Cassa Malati</label>
                  </div>
                  <div class="input-field col l4 s12">
                    <input disabled value="{{doc.medical_data.injuries}}" name="injuries" id="injuries" type="text" >
                    <label for="injuries">Infortuni</label>
                  </div>
                  <div class="input-field col l4 s12">
                    <input disabled value="{{doc.medical_data.rc}}" name="rc" id="rc" type="text" >
                    <label for="rc">Responsabilit&agrave; civile</label>
                  </div>
                </div>
                <div class="row">
                  <div class="switch col s12">
                    &Egrave; sostenitore REGA&nbsp;&nbsp;
                    <label>
                      No
                      <input disabled name="rega" type="checkbox" {% if doc.medical_data.rega %}checked="checked"{%endif%}>
                      <span class="lever"></span>
                      Si
                    </label>
                  </div>
                </div>
                <div class="row">
                  <div class="col s12">
                    <h6>Medico di famiglia</h6>
                  </div>
                  <div class="input-field col l6 s12">
                    <input disabled value="{{doc.medical_data.medic_name}}" name="medic_name" id="medic_name" type="text" >
                    <label for="medic_name">Nome e cognome</label>
                  </div>
                  <div class="input-field col l6 s12">
                    <input disabled value="{{doc.medical_data.medic_phone}}" name="medic_phone" id="medic_phone" type="text" >
                    <label for="medic_phone">Telefono studio</label>
                  </div>
                  <div class="input-field col l12 s12">
                    <input disabled value="{{doc.medical_data.medic_address}}" name="medic_address" id="medic_address" type="text" >
                    <label for="medic_address">Indirizzo completo</label>
                  </div>
                </div>
                <div class="row">
                  <div class="col s12">
                    <h6>Scheda medica personale</h6>
                  </div>
                  <div class="input-field col s12">
                    <input disabled value="{{doc.medical_data.sickness}}" name="sickness" id="sickness" type="text">
                    <label for="sickness">Principali malattie avute</label>
                  </div>
                  <div class="input-field col l8 s12">
                    <input disabled value="{{doc.medical_data.vaccine}}" name="vaccine" id="vaccine" type="text">
                    <label for="vaccine">Vacinazioni fatte</label>
                  </div>
                  <div class="input-field col l4 s12">
                    <label for="tetanus_date">Ultima vacinazione contro il tetano</label>
                    <input disabled value="{{doc.medical_data.tetanus_date}}" name="tetanus_date" id="tetanus_date" type="text">
                  </div>
                  <div class="input-field col s12">
                    <input disabled value="{{doc.medical_data.allergy}}" name="allergy" id="allergy" type="text">
                    <label for="allergy">Allergie particolari/Intolleraze alimentari</label>
                  </div>
                  <div class="switch col s12">
                    Deve assumere regolarmente medicamenti&nbsp;&nbsp;
                    <label>
                      No
                      <input disabled name="drugs_bool" type="checkbox" {% if doc.medical_data.drugs_bool %}checked="checked"{%endif%}>
                      <span class="lever"></span>
                      Si
                    </label>
                  </div>
                  <div class="input-field col s12">
                    <input disabled value="{{doc.medical_data.drugs}}" name="drugs" id="drugs" type="text">
                    <label for="drugs">Se s&igrave; quali, in che dosi e prescrizioni</label>
                  </div>
                  <div class="switch col s12">
                    Informazioni particolari sullo stato di salute: (postumi di operazioni, incidenti, malattie, disturbi fisici)&nbsp;&nbsp;
                    <label>
                      No
                      <input disabled name="misc_bool" type="checkbox" {% if doc.medical_data.misc_bool %}checked="checked"{%endif%}>
                      <span class="lever"></span>
                      Si
                    </label>
                  </div>
                  <div class="input-field col s12">
                    <input disabled value="{{doc.medical_data.misc}}" name="misc" id="misc" type="text">
                    <label for="misc">Se s&igrave; quali</label>
                  </div>
              </span></div>
              {% endif %}
            </li>
          {% endif %}
          {% if doc.document_type.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 doc|doc_key %}
                  <tr>
                  <td>{{key.key}}</td>
                  <td>{{key.value}}</td>
                  </tr>
                {% endfor %}
                </tbody>
                </table>
              </span></div>
            </li>
          {% endif %}
            <li>
              <div class="collapsible-header">
                <i class="material-icons">attach_file</i>Allegati
              </div>
              <div class="collapsible-body"><span>
                <div class="row">
                  <div class="col s12">
                    <div class="card">
                      <div class="card-image">
                        {% if doc.signed_doc %} <img class="lazyload" data-src="{{ sign_doc_file.0 }}{{ doc.id }}{{ sign_doc_file.1 }}"> {% endif %}
                      </div>
                    </div>
                  </div>
                </div>
                {% if doc.medical_data %}
                <div class="row">
                  <div class="col s12">
                    <div class="card">
                      <div class="card-image">
                        {% if doc.medical_data.health_care_certificate %}<img class="lazyload" data-src="{{ health_file.0 }}{{ doc.id }}{{ health_file.1}}">{% endif %}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col s12">
                    <div class="card">
                      <div class="card-image">
                        {% if doc.medical_data.vac_certificate %}<img class="lazyload" data-src="{{ vac_file.0 }}{{ doc.id }}{{ vac_file.1}}">{% endif %}
                      </div>
                    </div>
                  </div>
                </div>
                {% endif %}
              </span></div>
            </li>
          </ul>
        </span></div>
        </li>
    {% endfor %}
</ul>
</form>
{% endblock %}

{%block script%}
$(document).ready(function(){
    $('.collapsible').collapsible();
    $('#modal1').modal();
    $('#modal2').modal();
    $('#modal3').modal({"dismissible": false});
    $('.datepicker').datepicker(options);
    {% if error %}
      M.toast({html: '{{ error_text}}', classes: 'orange'})
    {% endif %}
    {% if task_id %}
      $('#modal3').modal('open');
      update();
      document.getElementById('progress_bar').className = "determinate";
    {% endif %}
    lazyload();
});

function resetModal() {
  $('#modal3').modal('close');
  document.getElementById('progress_bar').className = "indeterminate";
  document.getElementById("modal_close_button").hidden = true;
  document.getElementById('progress_text').innerHTML = "";
}

$('.chips').chips();
$('#chips_type').chips({
  placeholder: 'Tipo',
  secondaryPlaceholder: '+Altro tipo',
  autocompleteOptions: {
    data: {
      {% for t in types %}
        '{{t.name}}': null,
      {% endfor %}
    },
    limit: Infinity,
    minLength: 0
  },
  data: [
    {% for d in chips_type %}
      {tag: '{{d}}'},
    {% endfor %}
  ]
});
$('#chips_owner').chips({
  placeholder: 'Utente',
  secondaryPlaceholder: '+Altro utente',
  autocompleteOptions: {
    data: {
      {% for user in users %}
        '{{user.user__username}} ({{user.user__first_name}} {{user.user__last_name}})': null,
      {% endfor %}
    },
    limit: Infinity,
    minLength: 0
  },
  data: [
    {% for d in chips_owner %}
      {tag: '{{d}}'},
    {% endfor %}
  ]
});
$('#chips_groups').chips({
  placeholder: 'Gruppo',
  secondaryPlaceholder: '+Altro gruppo',
  autocompleteOptions: {
    data: {
      {% for g in groups %}
        '{{g}}': null,
      {% endfor %}
    },
    limit: Infinity,
    minLength: 0
  },
  data: [
    {% for g in chips_groups %}
      {tag: '{{g}}'},
    {% endfor %}
  ]
});

function update() {
  var box = document.getElementById('progress_text');
  var bar = document.getElementById('progress_bar');
  {% if task_id %}
    var url = '{% url "progress" %}' + '?job=' + '{{task_id}}';
  {% else %}
    var url = '{% url "progress" %}';
  {% endif %}
  fetch(url).then(function(response) {
    response.json().then(function(data) {
      if (data[0] == data[1]) {
        if (data[2]) {
          bar.className = "indeterminate";
          url = '{% url "progress" %}' + '?job=' + '{{task_id}}' + '&download=true';
          box.innerHTML = "Il download dovrebbe partire automaticamente. Nel caso non succedesse cliccare il seguente <a id='downloadLink' href=" + url + ">link</a>";
          document.getElementById("modal_close_button").hidden = false;
          document.getElementById('downloadLink').click();
        } else {
          bar.style.width = "100%";
          box.innerHTML = "Impacchettamento documenti...";
          setTimeout(update, 500, url);
        }
      } else {
        box.innerHTML = data[0] + "/" + data[1];
        bar.style.width = data[0]/data[1]*100 + "%";
        setTimeout(update, 500, url);
      }
    });
  });
}

function send(id) {
  var form = document.getElementById('selection')
  var action = document.getElementById('action')
  var owner = document.getElementById('owner')
  var type = document.getElementById('type')
  var groups = document.getElementById('groups')
  var chips_owner = M.Chips.getInstance(document.getElementById('chips_owner'));
  var chips_type = M.Chips.getInstance(document.getElementById('chips_type'));
  var chips_groups = M.Chips.getInstance(document.getElementById('chips_groups'));
  var type_array = []
  var owner_array = []
  var groups_array = []

  for (i=0; i < chips_owner.chipsData.length; i++) {
    owner_array.push(chips_owner.chipsData[i].tag)
  }

  for (i=0; i < chips_type.chipsData.length; i++) {
    type_array.push(chips_type.chipsData[i].tag)
  }

  for (i=0; i < chips_groups.chipsData.length; i++) {
    groups_array.push(chips_groups.chipsData[i].tag)
  }

  action.setAttribute('value', id);
  owner.setAttribute('value', owner_array.join("^|"))
  type.setAttribute('value', type_array.join("^|"))
  groups.setAttribute('value', groups_array.join("^|"))
  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;                       
        });
    }
});

var options = {
  showClearBtn: true,
  container: document.getElementById('main'),
  yearRange:100,
  format:'dd mmmm yyyy',
  i18n: {
    months: [ 'gennaio', 'febbraio', 'marzo', 'aprile', 'maggio', 'giugno', 'luglio', 'agosto', 'settembre', 'ottobre', 'novembre', 'dicembre' ],
    monthsShort: [ 'gen', 'feb', 'mar', 'apr', 'mag', 'giu', 'lug', 'ago', 'set', 'ott', 'nov', 'dic' ],
    weekdays: [ 'domenica', 'lunedì', 'martedì', 'mercoledì', 'giovedì', 'venerdì', 'sabato' ],
    weekdaysShort: [ 'dom', 'lun', 'mar', 'mer', 'gio', 'ven', 'sab' ],
    weekdaysAbbrev: [ 'D', 'L', 'M', 'M', 'G', 'V', 'S' ],
    today: 'Oggi',
    clear: 'Cancella',
    close: 'Chiudi',
    cancel: 'Annulla',
    firstDay: 1,
    format: 'dddd d mmmm yyyy',
    formatSubmit: 'yyyy/mm/dd',
    labelMonthNext: 'Mese successivo',
    labelMonthPrev: 'Mese precedente',
    labelMonthSelect: 'Seleziona un mese',
    labelYearSelect: 'Seleziona un anno'
  }
}
{% endblock %}