{% extends "users/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
{% if request.user.profile.agency.module_messages %}

<div class="content-section col-12">
  <h3>Mitteilungen{% if request.user.profile.showtooltips %}&nbsp;<small><i data-toggle="tooltip" data-placement="top" title="Verschicken Sie hier Nachrichten für Mitarbeiter." class="far fa-question-circle"></i></small>{% endif %}
  	<small><i onclick="javascript:$('#youtubevideoinformation').modal('toggle');" class="far fa-play-circle"></i></small>
  </h3>
  <hr>  
  


<ul class="nav nav-tabs" id="messTabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="send-tab" data-toggle="tab" href="#send" role="tab" aria-controls="send" aria-selected="false" >Versenden</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="usermess-tab" data-toggle="tab" href="#usermess" role="tab" aria-controls="usermess" aria-selected="false" >Meine Mitteilungen</a>
  </li>
</ul>

<div class="tab-content" id="settingsTabsContent">
	
	<div class="tab-pane fade show" id="send" role="tabpanel" aria-labelledby="send-tab">
	<h5 class="mt-3">Mitteilung senden{% if request.user.profile.showtooltips %}&nbsp;<small><i data-toggle="tooltip" data-placement="top" title="Verschicken Sie hier Nachrichten für Mitarbeiter." class="far fa-question-circle"></i></small>{% endif %}</h5>
		<div class="col-6 mt-3">
			<form method="POST" enctype="multipart/form-data">
		    {% csrf_token %}
		    {{form|crispy}}    
		    <p>Ihrer Mitteilung wird Automatisch eine Anrede und eine Verabscheidung hinzugefügt!</p>
		     <div class="form-group">
		        <button type="submit" class="btn btn-primary">Mitteilung verschicken</button>&nbsp;
		        <a href="{% url 'users-dashboard' %}" class="btn">Abbrechen</a>
		      </div>
		  </form>
		</div>
	</div>

	<div class="tab-pane fade" id="usermess" role="tabpanel" aria-labelledby="usermess-tab">
	<h5 class="mt-3">Meine Mitteilungen{% if request.user.profile.showtooltips %}&nbsp;<small><i data-toggle="tooltip" data-placement="top" title="Hier sehen Sie Ihre erhaltenen Mitteilungen" class="far fa-question-circle"></i></small>{% endif %}</h5>
		<div class="col-12 mt-3">
			{% if usermessages|length > 0 %}
			<div class="table-responsive">        
			    <table class="table table-hover" id="allmessages">
			        <thead>
			        <tr>
			          <th scope="col">Absender</th>          
			          <th scope="col">Datum</th>
			          <th scope="col">Inhalt</th>	
			          <th scope="col">&nbsp;</th>				          
			        </tr>
			      </thead>
			      <tbody id="tableresults">
			    {% for item in usermessages %}
			      <tr id="us_{{item.pk}}">			          
			          <td>{{ item.created_by.first_name }} {{ item.created_by.last_name }}</td>
			          <td>{{ item.created_date }}</td>
			          <td><a href="{% url 'message-single' item.pk %}">{{ item.content|truncatechars:30 }}</a></td>			
			          <td><button href="#" class="btn btn-sm btn-secondary" style="float: right;" onclick="javascript:delMessage({{item.pk}})"><i class="fas fa-trash"></i></button></td>
			      </tr>
			      {% endfor %}
			      </tbody>    
			    </table>
			  </div>
			  </div>
			 {% else %}
			 Sie haben aktuell keine Mitteilungen.
			{% endif %}


		</div>
	</div>

</div><!-- END TABS CONTENT -->

<!-- CONFIRMA DELETE DIR -->
<div class="modal fade" id="delMess" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="groupDelFunction" aria-hidden="true">
  <div class="modal-dialog " role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Mitteilung 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">        
        Wollen Sie die Mitteilung wirklich löschen?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="javascript:delAction()">Löschen</button>&nbsp;&nbsp;
        <button type="button" class="btn" data-dismiss="modal">Abbrechen</button>
      </div>
    </div>
  </div>
</div>

</div>
<style>
  /* DATATABLES */
.paginate_button {
  padding: 0px !important;
  border: 0px !important;
}
  </style>
<script type="text/javascript">
	 $(document).ready(function(){    	
	 	$('#send').tab('show');
  
  $('#allmessages').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 delmessid = "";
	 function delAction(){
	 	$.ajax(
	      {
	          type: "GET",
	          url: "{% url 'delsinglemessage' %}",
	          data : {
	            action : "delsingle",
	            todelid : delmessid
	          },
	          success: function( data ) 
	          {    
	            $("#us_" + delmessid).remove();
	            $("#delMess").modal("hide");	
	            var newmesscount = $("#messcounter").html();
	            newmesscount = newmesscount.replace("(", "");	            
	            newmesscount = newmesscount.replace(")", "");
	            newmesscount = parseInt(newmesscount);
	            newmesscount = newmesscount - 1;
	            if(newmesscount > 0){
	            	$("#messcounter").html("(" + newmesscount + ")");	
	            	$("#messcounter_badge").show();
	            }
	            else{
	            	$("#messcounter").html("");
	            	$("#messcounter_badge").hide();
	            }	            
	          }
	       });
	 }

	 function delMessage(id){
	 	delmessid = id;
	 	$("#delMess").modal("toggle");
	 }
</script>



{% else %}
<h3>Das Modul Mitteilungen wurde in ihrer Agentur deaktiviert.</h3>
{% endif %}

<!-- YOUTUBE PART START -->
<!--
//COPY THAT
<small><i onclick="javascript:$('#youtubevideoinformation').modal('toggle');" class="far fa-play-circle"></i></small>
-->
<script type="text/javascript">

//CHANGE
var VIDEOURL = "Gd2pR_o3Gb4"
var MODALNAME = "#youtubevideoinformation"
var VIDEOTITLE = "Informationsvideo Mitteilungen"

$(document).ready(function(){     

    $("#modaltitle_video").html(VIDEOTITLE);    

    //VIDEOCONTROLS
    $( MODALNAME ).on('shown.bs.modal', function(e){
      player.playVideo();
    });

    $( MODALNAME ).on('hidden.bs.modal', function(e){
      player.pauseVideo();
    });
});

   //VIDEOPLAYER
  var player;

  function onYouTubeIframeAPIReady() {
      player = new YT.Player('video-placeholder', {
          width: 760,
          height: 500,
          videoId: VIDEOURL,        
      });
  }

</script>
<script src="https://www.youtube.com/iframe_api"></script>
<!-- VIDEOMODAL -->
<div class="modal fade" id="youtubevideoinformation" tabindex="-1"  role="dialog" aria-labelledby="" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modaltitle_video"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" style="min-height: 500px;">
        <div id="video-placeholder"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Schließen</button>        
      </div>
    </div>
  </div>
</div>
<!-- YOUTUBE PART ENDE -->
{% endblock content %}