{% extends "base.html" %}

{% block content %}
<br>
<div>
  <div id="schedulesModal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document" style="overflow-x: auto;">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">{{ 'Edit availability schedules'|t }}</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="{{ 'Close'|t }}">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body" style="overflow-x: auto;">
        </div>
        <div class="modal-footer">
          <button id="submit_schedules_change" type="button" class="btn btn-primary">{{ 'Save changes'|t }}</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ 'Close'|t }}</button>
        </div>
      </div>
    </div>
  </div>
  <script nonce="{{ nonce }}">
    $('#schedulesModal').on('show.bs.modal', function (event) {
      //$( ".modal-body" ).loading("show");
      $(".modal-body").load("modal_availability_schedule.php?nonce={{ nonce }}", {
        orientation: window.innerHeight > window.innerWidth ? "portrait" : "landscape"
      }, function() {
        init_modal();
        //$( ".modal-body" ).loading("hide");
        return true;
      });
    });
  </script>
</div>
<div class="text-center">
  <p>{{ 'Are you available in case of alert?'|t }}</p>
  <button id="activate-btn" class="btn btn-lg btn-success">{{ 'Activate'|t }}</button>
  <button id="deactivate-btn" class="btn btn-lg btn-danger" style="background-color: red">{{ 'Deactivate'|t }}</button>
  <br>
  <button type="button" class="btn btn-lg" data-toggle="modal" data-target="#schedulesModal">
    {{ 'Edit availability schedules'|t }}
  </button>
</div>
<br>
<br>
<img alt="VVF" src="./resources/images/owner.png" width="150"
  style="display: block; margin-left: auto; margin-right: auto;">
<br>
<br>
<div id="list" class="table-responsive">
  <table id="table" class="table table-striped table-bordered dt-responsive nowrap">
    <thead>
      <tr>
        <th>{{ 'Name'|t }}</th>
        <th>{{ 'Available'|t }}</th>
        {% if user.full_viewer %}
        <th>{{ 'Driver'|t }}</th>
        <th>{{ 'Call'|t }}</th>
        <th>{{ 'Write'|t }}</th>
        <th>{{ 'Services'|t }}</th>
        <th>{{ 'Availability Minutes'|t }}</th>
        {# <th>{{ 'Other'|t }}</th> TODO: fix "Other" page #}
        {% endif %}
      </tr>
    </thead>
    <tbody id="table_body">
    </tbody>
  </table>
  <script nonce="{{ nonce }}">
    $("#activate-btn").click(function(){
        allertaJS.main.activate('{{ user.id }}', '');
    });
    $("#deactivate-btn").click(function(){
        allertaJS.main.deactivate('{{ user.id }}', '');
    });
    allertaJS.main.loadTable({tablePage: "list", useCustomTableEngine: "default", callbackRepeat: true, callback: function() {
        $("tbody tr").each(function(key, el) {
            $(el.children[1]).click(function(event) {
                console.log(event.target);
                userId = event.target.parentElement.parentElement.parentElement.firstElementChild.firstElementChild.firstElementChild.id.replace("username-","");
                console.log(userId);
                if(event.target.classList.contains("fa-times")) {
                    allertaJS.main.activate(userId,0);
                } else {
                    allertaJS.main.deactivate(userId,0);
                }
            });
        });
    }});
  </script>
</div>

<br><br>
<p style="text-align: center;">
  <a class='pjax_disable' id='add' href="edit_user.php?add">{{ 'Add user'|t }}</a>
</p>
<br>
<br>
{% endblock %}