{% extends 'template.html' %}

{% block title %}Jobs{% endblock %}

{% block button_toolbar %}
  <div class="btn-toolbar">
      {% if {module: 'jobs', action: 'add'} in privileges %}
      <a href="/jobs/add" type="button" class="btn btn-primary">Add Job</a>
      {% endif %}
  </div>
{% endblock %}

{% block page_content %}

    <div class="card card-fluid">
      <h6 class="card-header"> Jobs </h6><!-- .card-body -->
      <div class="card-body">
        <!-- .table-responsive -->
        <div class="table-responsive">
          <!-- .table -->
          <table class="table" id="jobs">
            <!-- thead -->
            <thead>
              <tr>
                <th> Id </th>
                <th> Name </th>
                <th> Rooms </th>
                <th> Items </th>
                <th> Completed </th>
                <th> Price </th>
                <th> Created At</th>
                <th style="width:120px; min-width:120px;"> &nbsp; </th>
              </tr>
            </thead><!-- /thead -->
            <!-- tbody -->
            <tbody>
              {% for job in jobs %}
              <!-- tr -->
              <tr>
                <td class="align-middle"> <span class="badge badge-primary badge-pill"> {{ job.id }} </span></td>
                <td class="align-middle"> <a href="/jobs/{{ job.id }}/show"> {{ job.name }} </a> </td>
                <td class="align-middle"> <li class="list-inline-item mr-3" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="Rooms"> <i class="fa fa-home text-purple"></i> {{ job.stats.jobRooms }} </li> </td>
                <td class="align-middle"> <li class="list-inline-item mr-3" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="Total Items"> <i class="fa fa-box-open text-yellow"></i> {{ job.stats.jobTotalItems.total }} </li> </td>
                <td class="align-middle"> <i class="fa fa-fw fa-circle text-teal"></i>
                  {% if job.stats.jobTotalCompleted.total > 0 %}
                    {{ ((job.stats.jobTotalCompleted.total / job.stats.jobTotalItems.total ) * 100)|number_format(1) }}
                  {% else %}
                    0
                  {% endif %}
                  %
                </td>
                <td class="align-middle"> $
                  {% if job.stats.jobPrice.total %}
                    {{ job.stats.jobPrice.total }}
                  {% else %}
                    0.00
                  {% endif %}
                </td>
                <td class="align-middle"> <a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="{{ job.user_name_add }}">{{ job.date_add|date("d/m/Y H:i") }}</a> </td>
                <td class="align-middle text-right">
                  {% if {module: 'jobs', action: 'show'} in privileges %}
                  <a href="/jobs/{{ job.id }}/show" class="btn btn-sm btn-icon btn-info"><i class="fa fa-eye"></i> <span class="sr-only">Show</span></a>
                  {% endif %}
                  {% if {module: 'jobs', action: 'edit'} in privileges %}
                  <a href="/jobs/{{ job.id }}/edit" class="btn btn-sm btn-icon btn-warning"><i class="fa fa-pencil-alt"></i> <span class="sr-only">Edit</span></a>
                  {% endif %}
                  {% if {module: 'jobs', action: 'delete'} in privileges and not job.locked %}
                  <a href="#" data-href="/jobs/{{ job.id }}/delete" class="btn btn-sm btn-icon btn-danger" data-toggle="modal" data-target="#alerdDelete"><i class="far fa-trash-alt"></i> <span class="sr-only">Delete</span></a>
                  {% endif %}
                </td>
              </tr><!-- /tr -->
              {% endfor %}
            </tbody><!-- /tbody -->
          </table><!-- /.table -->
        </div><!-- /.table-responsive -->
      </div><!-- /.card-body -->
    </div><!-- /.card -->

{% endblock %}

{% block page_includes %}
<script src="/assets/vendor/datatables/jquery.dataTables.min.js"></script>
<script src="/assets/vendor/datatables/extensions/buttons/dataTables.buttons.min.js"></script>
<script src="/assets/vendor/datatables/extensions/buttons/buttons.bootstrap4.min.js"></script>
<script src="/assets/vendor/datatables/extensions/buttons/buttons.html5.min.js"></script>
<script src="/assets/vendor/datatables/extensions/buttons/buttons.print.min.js"></script>
<script src="/assets/vendor/datatables/extensions/buttons//jszip.min.js"></script>
<script src="/assets/javascript/pages/dataTables.bootstrap.js"></script>

<script type="text/javascript">
  $('#jobs').DataTable( {
      responsive: true,
      stateSave: true,
      "lengthMenu": [10, 25, 50, 100],
      "order": [[ 0, "desc" ]],
      dom: 'Blfrtip',
      buttons: [
        {
           extend: 'copy',
           exportOptions: {
              columns: 'th:not(:last-child)'
           }
        },
        {
           extend: 'print',
           exportOptions: {
              columns: 'th:not(:last-child)'
           }
        },
        {
           extend: 'excel',
           exportOptions: {
              columns: 'th:not(:last-child)'
           }
        }
      ]
  } );
</script>
{% endblock %}