{% extends "users/base.html" %}
{% load counter_tag %}
{% block content %}
<div class="content-section col-12">
  {% gettimemessage as timemessage %}
  <h3>{{timemessage}}, {{request.user.first_name}}!</h3>
  <small>Letzter Login: {{ request.user.last_login }} 
    {% getlocalweather request.user as weatherdata %}
    {% if request.user.profile.agency.city|length > 0 and weatherdata.0 != None %}
     {{weatherdata.0}}&nbsp;<img src='https://openweathermap.org/img/wn/{{weatherdata.1}}.png' width="45px" style="margin-bottom: -5px; padding-right: -20px; margin-left: -10px; margin-top: -15px; margin-right: -6px;">&nbsp;{{weatherdata.2}}
    {% endif %}
  </small>
  <hr>
  <h5>Agentur: <b>{{ request.user.profile.agency.name }}</b></h5>
  <hr>
  <div class="row" style="float: left;">
    {% if request.user.profile.agency.module_news %}
    <div class="card d-block mb-3 mr-3 " style="width: 60%" >
      <div class="card-body" >
          <h5 class="card-title">News&nbsp;<small><i onclick="javascript:$('#youtubevideoinformation').modal('toggle');" class="far fa-play-circle"></i></small>
            {% if perms.users.modulenews %}
            <a class="btn btn-primary btn-sm ml-1" href="{% url 'news-add' %} " style="float: right;" data-toggle="tooltip" data-placement="top" title="Neue News für Ihre Agentur erstellen"><i class="fas fa-plus"></i></a>
            {% endif %}
            <a class="btn btn-secondary btn-sm" href="{% url 'news-management' %} " style="float: right;" data-toggle="tooltip" data-placement="top" title="Alle News und das News-Archiv betrachten"><i class="fas fa-list"></i></a>
          </h5>
          <div class="table-responsive">
            <table class="table table-hover">
              <thead>
              <tr>
                <th scope="col">Titel</th>
                <th scope="col">Veröffentlicht von</th>
                <th scope="col">Veröffentlicht am</th>
              </tr>
            </thead>
             {% for news_single in news %}
              <tr>
                  <td><a href="{% url 'news-single' news_single.pk %}">{{news_single.name }}</a></td>
                  <td>{{ news_single.created_by.first_name }} {{ news_single.created_by.last_name }}</td>
                  <td>{{ news_single.go_online_on|date:"d.m.Y, H:i" }}</td>
              </tr>
            {% endfor %}
          </table>
        </div>
        </div>
      </div>
      {% endif %}

    {% if request.user.profile.agency.module_news %}
    <div class="card d-block mb-3" style="width: 38%">
      <div class="card-body">
        <img style="max-height: 400px; max-width: 100%" src="{{ request.user.profile.agency.get_photo_url }}">
      </div>
    </div>
    {% endif %}

    <div class="card d-block mb-3 mr-3 "  style="width: 60%" >
      <div class="card-body">
          <h5 class="card-title">Neueste Standards</h5>
          {% if standards_of_agency|length > 0 %}
          <div class="table-responsive">
          <table class="table table-hover">
              <thead>
              <tr>
                <th scope="col">Titel</th>
                <th scope="col">Bearbeitet von</th>
                <th scope="col">Bearbeitet am</th>
              </tr>
            </thead>
          {% for standard in standards_of_agency %}
            <tr>
                <td><a href="{% url 'standard-single' standard.pk %}">{{standard.name}}</a></td>
                <td>{{standard.last_modified_by.first_name}} {{standard.last_modified_by.last_name}}</td>
                <td>{{standard.last_modified_on|date:"d.m.Y, H:i"}}</td>
            </tr>
          {% endfor %}
          </table>
          </div>
          {% else %}
          Noch keine Standards erstellt.
          {% endif %}
        </div>
      </div>

      {% if not request.user.profile.agency.module_news %}
    <div class="card d-block mb-3" style="width: 38%">
      <div class="card-body">
        <img style="max-height: 400px; max-width: 100%" src="{{ request.user.profile.agency.get_photo_url }}">
      </div>
    </div>
    {% endif %}


      {% if not request.user.profile.agency.module_timemanagement %}    
      <div class="card d-block mb-3" style="width: 60%">
      {% else %}
      <div class="card d-block mb-3" style="width: 38%">
      {% endif %}

      {% if request.user.profile.agency.module_timemanagement %} 
        <div class="card-body">
          <h5 class="card-title">Heutige Abwesenheiten</h5>
          {% if acutal_absences|length > 0 %}
              <table class="table table-hover" id="table_timemanagement" >
            <thead>
            <tr>
              <th scope="col">Mitarbeiter</th>
              <th scope="col">Abwesend bis</th>
              <th scope="col">Vertreter</th>
              <th scope="col">&nbsp;</th>          
            </tr>
          </thead>
          <tbody id="" >
            {% for ab in acutal_absences %}
              <tr>
                <td> 
                  <!--<img class="commentimg mr-2" src="{{ ab.user.profile.get_photo_url }}">
                  <span class="us_fullname">{{ab.user.get_full_name}}</span>-->
                  {{ab.user.get_full_name}}
                </td>
                <td>{{ab.end|date:"d.m.Y"}}</td>
                <td>{{ab.representator.get_full_name}}</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
        {% else %}
        Für heute ist keine Abwesenheit eingetragen.
        {% endif %}
    {% endif %}


        </div>
      </div>

    


    </div><!-- CLOSE ROW -->

   
</div>

<!-- YOUTUBE PART START -->
<!--
//COPY THAT
<small><i onclick="javascript:$('#youtubevideoinformation').modal('toggle');" class="far fa-play-circle"></i></small>
-->
<style type="text/css">
      .commentimg {
        border-radius: 50%;
        width: 18%;
      }
    </style>
<script type="text/javascript">

//CHANGE
var VIDEOURL = "ZKruAgmtZCk"
var MODALNAME = "#youtubevideoinformation"
var VIDEOTITLE = "Informationsvideo News"

$(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 %}