{% 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>
      <button class="btn btn-secondary mr-l btn-sm" style="vertical-align: bottom;" onclick="javascript:showCategoryMod()"><i class="fas fa-pen"></i>&nbsp;Kategorien</button>-->      
  	{% endif %}    
  	<!--<hr>-->
   </div></div>
      <div class="table-responsive ">
      <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">Kategorie</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.company}}</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 agc.category != None%} {{agc.category}} {% 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 text-danger" href="{% url 'cont-delete' agc.pk %}">Löschen</a>
                  </div>
                  </div>
                  {% endif %}
              </td>              
          </tr>
        {% endfor %}   
        </tbody>  
      </table>
    </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.company}}</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 %}


<!-- MODAL FOR AGENCYJOBS  -->
<!-- Modal -->
<div class="modal fade" id="categorymodal" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="agencyFunction" aria-hidden="true">
  <div class="modal-dialog " role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Kategorien bearbeiten</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">
        <table class="table table-hover" id="allCategory">          
          <tbody>
            {% for ele in categorys %}
              <tr id="categorys_{{ele.pk}}">
                <td>
                  <input class="form-control" type="text" value="{{ele.name}}" onkeyup="javascript:updateCategory({{ele.pk}}, this.value)">
                </td>
                <td>
                  <button type="button" class="btn btn-danger" onclick="javascript:catDel({{ele.pk}})" data-toggle="tooltip" data-placement="top" title="Kategorie löschen"><i class="fas fa-trash-alt"></i></button>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
        <div id="erroninput" class="alert alert-danger" style="display: none">Falsche Eingabe! Es wird nichts gespeichert.</div>
        <div id="savebreak" class="alert alert-success" style="display: none">Speichern pausiert...</div>
        <div id="funcupdate" class="alert alert-success" style="display: none">Kategorien aktualisiert.</div>
        <button type="button" class="btn btn-primary" title="Neue Kategorie hinzufügen" onclick="javascript:addCategory()" data-toggle="tooltip" data-placement="top" title="Dialog für eine neue Kategorie öffnen"><i class="fas fa-plus"></i>&nbsp;Kategorie</button>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-success" data-dismiss="modal">Schließen</button>
      </div>
    </div>
  </div>
</div>

<!-- CONFIRMA DELETE DIALOG -->
<div class="modal fade" id="delCategoryConfirm" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="agencyDelFunction" aria-hidden="true">
  <div class="modal-dialog " role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Kategorie löschen</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" id="delCatBody"> 
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal" onclick="javascript:delCategory()">Kategorie löschen</button>&nbsp;&nbsp;
        <button type="button" class="btn btn-success" data-dismiss="modal" onclick="javascript:$('#categorymodal').modal('toggle')">Abbrechen</button>
      </div>
    </div>
  </div>
</div>

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

function showCategoryMod(){
  $("#categorymodal").modal("toggle");
}


$('#categorymodal').on('hidden.bs.modal', function (e) {
  if(!delmode) {location.href = location.href;}
})

$('#delCategoryConfirm').on('hidden.bs.modal', function (e) {
  delmode = false;
})

timeout = null;
function updateCategory(id, catname){
  var letters = /^[A-Za-zßäöüÄÖÜ_0-9 ]+$/;
  if(catname.match(letters))
  {
    //SAVE ONLY EVERY SECOND
    $("#erroninput").hide(); 
    $("#savebreak").show();
    clearTimeout(timeout);
    timeout = setTimeout(function () {    
      if(catname.match(letters))
      {
        $.ajax(
        {
            type: "GET",
            url: "{% url 'ajaxorganizer' %}",
            data:{
              action : "update_category",
              id : id,
              newvalue : catname
            },
            success: function( data ) 
            { 
              if(data["success"]){
                $("#savebreak").hide();                
                $("#funcupdate").fadeTo(2000, 500).slideUp(500, function(){
                  $("#funcupdate").fadeOut(500);
                });
              }
              else{
                $("#erroninput").show(); 
              }            
            }
         });
      }
      else{
        $("#erroninput").show(); 
         $("#savebreak").hide();
         $("#funcupdate").hide();
       }
    }, 1000);    
  }
  else{
   $("#erroninput").show(); 
   $("#savebreak").hide();
   $("#funcupdate").hide();
  }
}

var todelid = "";
var delmode = false;
function catDel(id){
  delmode = true;
  todelid = id;
  $("#categorymodal").modal("hide");
  $("#delCategoryConfirm").modal("toggle");
  $.ajax(
    {
        type: "GET",
        url: "{% url 'ajaxorganizer' %}",
        data:{
          action : "get_catname",
          id : id
        },
        success: function( data ) 
        { 
          $("#delCatBody").html("Achtung! Die Kategorie <b>" + data['catname'] + "</b> wird gelöscht. Alle Kontakte mit dieser Kategorie erhalten eine leere Kategorie. Fortfahren?"); 
          //delmode = false;           
        }
     });  
}

function delCategory(){
  $.ajax(
    {
        type: "GET",
        url: "{% url 'ajaxorganizer' %}",
        data:{
          action : "delete_category",
          id : todelid
        },
        success: function( data ) 
        { 
          location.href = location.href
        }
     });
}


function addCategory(){
  $.ajax(
    {
        type: "GET",
        url: "{% url 'ajaxorganizer' %}",
        data:{
          action : "add_category"
        },
        success: function( data ) 
        { 
          new_id = data["new_id"];
          $('#allCategory > tbody:last-child').append('<tr id="categorys_'+new_id+'"><td><input class="form-control" type="text" value="" placeholder="Neue Kateogire" onkeyup="javascript:updateCategory('+new_id+', this.value)"></td><td><button type="button" class="btn btn-danger" onclick="javascript:catDel('+new_id+')" data-toggle="tooltip" data-placement="top" title="Kategorie löschen"><i class="fas fa-trash-alt"></i></button></td></tr>');   
        }
     });
}

  $(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"
        },
      },
      "buttons" : {
        "className" : "btn-danger"
      }
    });
});

</script>