{% load counter_tag %}

<div class="row">
<div class="content-section col-12">
	<div class="row"><div class="content-section col-12">
	{% if user|usergperm:"moduleorganizer" %}
  		<a class="btn btn-primary" href="{% url 'addcontact' %}"><i class="fas fa-plus"></i>&nbsp;Kontakt</a>
      <a class="btn btn-secondary mr-l btn-sm" style="vertical-align: bottom;" href=""><i class="fas fa-pen"></i>&nbsp;Kategorien</a>
  	{% endif %}
  	<hr>
   </div></div>

<div class="row col-12 " >
 <ul class="nav nav-tabs" id="contacts_tabs_content" role="tablist">
    <li class="nav-item active">
      <a class="nav-link " id="contacts_all-tab"href="#contacts_all" >Alle</a>
    </li>

    <li class="nav-item ">
      <a class="nav-link " id="addcategory-tab" data-toggle="tab" href="" role="tab" aria-selected="false" ><i class="fas fa-plus"></i>&nbsp;Kategorie</a>
    </li>
  </ul>
</div>
<div class="tab-content" id="contacts_tab_contentarea">

    <div class="tab-pane fade show" id="contacts_all" role="tabpanel" aria-labelledby="contacts_all-tab">

      <div class="table-responsive mt-3">
      <table class="table table-hover" id="table_contactsall" >
          <thead>
          <tr>
            <th scope="col">Firma</th>
            <th scope="col">E-Mail</th>
            <th scope="col">Telefon</th>
            <!--<th scope="col">Logo</th>  -->
            {% if user|usergperm:"moduleorganizer" %}
            <th scope="col">&nbsp;</th>
            {% endif %}
          </tr>
        </thead>
        <tbody id="table_contacts" >
        {% for agc in contacts %}
          <tr>
              <td>
                <a href="#" onclick="javascript:$('#infos_{{agc.pk}}').modal('toggle');">{{agc.name}}</a>
              </td>
              <td>
                {% if agc.mail|length > 0 %}
                  <a href="mailto:{{agc.mail}}">{{agc.mail}}</a><br/>
                {% endif %}
              </td>
              <td>
                {% if agc.phone1|length > 0 %}
                  <a href="tel::{{agc.phone1}}">{{agc.phone1}}</a>
                {% endif %}
              </td>
              <td>
                {% if user|usergperm:"moduleorganizer" %}
                <div class="dropdown no-arrow">
                  <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
                  </a>
                  <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
                    <a class="dropdown-item" href="{% url 'cont-update' agc.pk %}">Bearbeiten</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="{% url 'cont-delete' agc.pk %}">Löschen</a>
                  </div>
                  </div>
                  {% endif %}
              </td>
          </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

</div>
</div>
{% for agc in contacts %}
<div class="modal fade " id="infos_{{agc.pk}}"  tabindex="-1" role="dialog" data-backdrop="static" aria-hidden="true">
  <div class="modal-dialog " role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">{{agc.name}}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Schließen">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
            {% if agc.personname|length > 0 %}
              Ansprechpartner: {{agc.personname}}<br/>
            {% endif %}
            {% if agc.mail|length > 0 %}
            	E-Mailadresse: <a href="mailto:{{agc.mail}}">{{agc.mail}}</a><br />
            {% endif %}
            {% if agc.phone1|length > 0 %}
            	Telefon 1: <a href="tel::{{agc.phone1}}">{{agc.phone1}}</a><br />
            {% endif %}
            {% if agc.phone2|length > 0 %}
            	Telefon 1: <a href="tel::{{agc.phone2}}">{{agc.phone2}}</a><br />
            {% endif %}
            {% if agc.street|length > 0 %}
            	Adresse: {{agc.street}} {{agc.plz}} {{agc.city}} <br />
            {% endif %}
            {% if agc.desc|length > 0 %}
            	Anmerkungen: {{agc.desc}}<br />
            {% endif %}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-success" data-dismiss="modal">Schließen</button>
      </div>
    </div>
  </div>
</div>
{% endfor %}

<style>
  /* DATATABLES */
.paginate_button {
  padding: 0px !important;
  border: 0px !important;
}
  </style>
<script>

    $('#contacts_tabs_content a').on('click', function (e) {
      e.preventDefault();
      $(this).tab('show');
      lastview_name = $(this)[0]['hash'].substring(1);
      localStorage.setItem('activeTabContacts', lastview_name);

    });

  $(document).ready(function(){

  $('#table_contactsall').DataTable({
      "language": {
        "search" : "Suche",
        "info": "Zeige _START_ bis _END_ von _TOTAL_ Einträgen",
        "lengthMenu":     "Zeige _MENU_ Einträge",
        "zeroRecords": "Nichts gefunden",
        "infoEmpty": "Keine Einträge",
        "paginate": {
            "first":      "Erste",
            "last":       "Letzte",
            "next":       "Nächste",
            "previous":   "Zurück"
        },
      },
			"pageLength": 50,
      "buttons" : {
        "className" : "btn-danger"
      }
    });

  var activeTabContacts = localStorage.getItem('activeTabContacts');

        if(activeTabContacts){
          if($('#' + activeTabContacts).find().prevObject.length != 0){

            $('#' + activeTabContacts).tab('show');
            $(".nav-link").removeClass("active");
            $("#" + activeTabContacts + "-tab").addClass("active");
          }
          else{
            $("#contacts_all-tab").addClass("active");
            $('#contacts_all').tab('show');
          }
        }
        else{

          $("#contacts_all-tab").addClass("active");
           $('#contacts_all').tab('show');
        }

});

</script>