{% extends 'index.html' %}
{% load static %}

{% block content %}

<div class="row">
  <div class="col-xs-12">
    <h3 class="header smaller lighter blue">{{page_title}}</h3>
    <div class="clearfix">
      <div class="pull-right tableTools-container"></div>
    </div>

    <table id="dynamic-table" class="table table-striped table-bordered table-hover">
      <div id="toggle-result-format" class="btn-group btn-overlap"></div>
      <div class="space-18"></div>
      <thead>
        <tr>
          <th class="center">
            <label class="pos-rel">
              <input type="checkbox"  class="ace" />
              <span class="lbl"  >

              </span>
            </label>

          </th>
          <th>ID</th>
          <th>Staff ID</th>
          <th>Staff Name</th>
          <th>Logbook Date</th>
          <th>Logbook Remark</th>
          <th>Apply On</th>
          <th>Action</th>
        </tr>
      </thead>

      <tbody>
        {% regroup logbook by logbook_id as row %}
        {% for rows in row %}
        <tr>
          <td class="center">
            <label class="pos-rel">
              <input type="checkbox" class="ace" />
              <span class="lbl"></span>
            </label>
          </td>

          <td >{{ rows.grouper }}</td>
          {% for li in rows.list %}
          <td>{{ li.staff_id_id}}</td>
          <td>{{ li.staff_id_id.user.first_name}}</td>
          <td>{{ li.logbook_type }}</td>
          <td>{{ li.logbook_remark }}</td>
          <td>{{ li.created_at }}</td>
          <td>
            <div class="hidden-sm hidden-xs action-buttons">

              {% if li.logbook_status == 0 %}
              <a class="green" href="{% url 'emp:staff_approve_logbook' rows.list.0.id %}">
                <i class="ace-icon fa fa-check bigger-150" title="Approve"></i>
              </a>
              <a class="red" href="{% url 'emp:staff_disapprove_logbook' rows.list.0.id %}">
                <i class="ace-icon fa fa-ban bigger-150" title="Rejected"></i>
              </a>
              {% elif li.logbook_status == 1  %}
              <span class="label label-sm label-success" disabled="disabled" data-toggle="modal"
                data-target="#reply_modal">Approved</span>
              {% else %}
              <span class="label label-sm label-danger" disabled="disabled" data-toggle="modal"
                data-target="#reply_modal">Rejected</span>
              {% endif %}
              <a class="primary" href="" data-toggle="modal" data-target="#exampleModal{{rows.grouper}}">
                <i class="ace-icon fa fa-info-circle bigger-150" title="Rejected"></i>
              </a>

            </div>

            <div class="hidden-md hidden-lg">
              <div class="inline pos-rel">
                <button class="btn btn-minier btn-yellow dropdown-toggle" data-toggle="dropdown" data-position="auto">
                  <i class="ace-icon fa fa-caret-down icon-only bigger-120"></i>
                </button>
                <ul
                  class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
                  <li>
                    <a href="" class="tooltip-success" data-rel="tooltip" title="Approve">
                      <span class="green">
                        <i class="ace-icon fa fa-check bigger-150"></i>
                      </span>
                    </a>
                  </li>

                  <li>
                    <a href="" class="tooltip-error" data-rel="tooltip" title="Rejected">
                      <span class="red">
                        <i class="ace-icon fa fa-ban bigger-150"></i>
                      </span>
                    </a>
                  </li>
                </ul>
              </div>
            </td>
            </div>
            <div class="modal fade" id="exampleModal{{rows.grouper}}" tabindex="-1" role="dialog"
              aria-labelledby="exampleModalLabel" aria-hidden="true">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  {#MODAL HEADER #}
                  <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Time Line Logbook</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  {#MODAL BODY #}
                  <div class="modal-body">
                    <div id="timeline-2">
                      <div class="row">
                        <div class="col-xs-12 col-sm-10 col-sm-offset-1">


                          <li>
                            {% if li.logbook_status == 1 %}
                            {{li.staff_admin}}
                            <span class="label label-sm label-success">Approved</span>
                          </li>
                          {% elif li.logbook_status == 2 %}
                          {{li.staff_admin}}
                          <span class="label label-sm label-danger">Rejected</span>
                          <li>
                            {% else %}
                            {{li.staff_admin}}
                            <span class="label label-sm label-warning">Pending</span>
                          </li>
                          {% endif %}
                          </span>

                          {% endfor %}
                        </div>
                      </div>
                      {#END ROW #}

                    </div>
                  </div>
                  {#MODAL FOOTER #}
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>
            {# END MODAL #}

        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock content %}