<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>
    Staff
  </title>

  {% include 'admin/includes/imports.top.html' %}
</head>

<body class="g-sidenav-show  bg-gray-100">
  {% include 'admin/includes/part.menu.html' %}
  <script>
    $('.vehicle-staff').addClass('active');
    $('.staff').addClass('active');
</script>
  <main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg ">
    <!-- Navbar -->
    {% include 'admin/includes/part.header.html' %}
    <!-- End Navbar -->
    <div class="container-fluid py-4">
      <div class="row g-1">
          <div class="col-md-12">
              <div class="card">
                  <div class="card-header pb-0 px-3">
                      <div class="d-flex justify-content-between">
                          <h6 class="mb-0">Staff</h6>
                          <!-- <a href="{{url_for('admin_news_add')}}" class="btn btn-sm btn-info">Add a staff</a> -->
                          <button class="btn btn-sm btn-info" type="button" data-bs-toggle="offcanvas"
                              data-bs-target="#add_a_staff" aria-controls="add_a_staff">Add a staff</button>
                      </div>
                  </div>


                  <div class="offcanvas offcanvas-end" data-bs-scroll="true" tabindex="-1" id="add_a_staff"
                      aria-labelledby="add_a_staffLabel">
                      <div class="offcanvas-header">
                          <h5 class="offcanvas-title" id="add_a_staffLabel">Add a staff
                          </h5>
                          <button type="button" class="btn-close" data-bs-dismiss="offcanvas"
                              aria-label="Close"></button>
                      </div>
                      <div class="offcanvas-body pt-0 mt-0">
                          <div>
                              <form id="staff-form" method="post">
                                  {{form.csrf_token}}
                                  <div>
                                      <label class="mb-0" for="first_name">{{form.first_name.label}}</label>
                                      <div class="mb-1">
                                          {{form.first_name(class_="form-control", id="first_name", placeholder="First Name",
                                          aria_label="first_name", aria_describedby="first_name-addon")}}
                                          {% for error in form.first_name.errors %}
                                          <small class='text-danger text-sm text-gradient'>{{ error }}</small>
                                          {% endfor %}
                                      </div>
                                  </div>
                                  <div>
                                      <label class="mb-0" for="last_name">{{form.last_name.label}}</label>
                                      <div class="mb-1">
                                          {{form.last_name(class_="form-control", id="last_name", placeholder="Last Name",
                                          aria_label="last_name", aria_describedby="last_name-addon")}}
                                          {% for error in form.last_name.errors %}
                                          <small class='text-danger text-sm text-gradient'>{{ error }}</small>
                                          {% endfor %}
                                      </div>
                                  </div>
                                  <div>
                                      <label class="mb-0" for="email">{{form.email.label}}</label>
                                      <div class="mb-1">
                                          {{form.email(class_="form-control", id="email", placeholder="Email",
                                          aria_label="email", aria_describedby="email-addon")}}
                                          {% for error in form.email.errors %}
                                          <small class='text-danger text-sm text-gradient'>{{ error }}</small>
                                          {% endfor %}
                                      </div>
                                  </div>
                                  <div>
                                      <label class="mb-0" for="phone_number">{{form.phone_number.label}}</label>
                                      <div class="mb-1">
                                          {{form.phone_number(class_="form-control", id="phone_number", placeholder="Phone Number",
                                          aria_label="phone_number", aria_describedby="phone_number-addon")}}
                                          {% for error in form.phone_number.errors %}
                                          <small class='text-danger text-sm text-gradient'>{{ error }}</small>
                                          {% endfor %}
                                      </div>
                                  </div>
                                  <div>
                                      <label class="mb-0" for="department_id">{{form.department_id.label}}</label>
                                      <div class="mb-1">
                                          {{form.department_id(class_="form-control", id="department_id", placeholder="Department",
                                          aria_label="department_id", aria_describedby="department_id-addon")}}
                                          {% for error in form.department_id.errors %}
                                          <small class='text-danger text-sm text-gradient'>{{ error }}</small>
                                          {% endfor %}
                                      </div>
                                  </div>
                                  <div>
                                      <label class="mb-0" for="hire_date">{{form.hire_date.label}}</label>
                                      <div class="mb-1">
                                          {{form.hire_date(class_="form-control", id="hire_date",
                                          placeholder="Hire Date", cols='10')}}
                                          {% for error in form.hire_date.errors %}
                                          <small class='text-danger text-sm text-gradient'>{{ error }}</small>
                                          {% endfor %}
                                      </div>
                                  </div>
                                  <div>
                                    <div class="form-check">
                                        {{form.has_account(class_="form-check-input", id="agree")}}
                                        {{form.has_account.label(class_="form-check-label",
                                        for="agree")}}
                                    </div>
                                    {% for error in form.has_account.errors %}
                                    <small class='text-danger text-sm text-gradient'>{{ error }}</small>
                                    {% endfor %}
                                  </div>
                                  <div class="text-center">
                                      <button type="submit" form="staff-form"
                                          class="submit-form btn btn-sm bg-gradient-info w-100 mt-4 mb-0">
                                          Submit</button>
                                  </div>

                              </form>
                          </div>
                      </div>
                  </div>
                  <div class="card-body p-3" style="overflow: visible !important;">
                      <div class="table-responsive p-0" style="overflow: visible !important;">
                          <table class="table table-responsive align-items-center justify-content-center mb-0"
                              style="overflow: visible !important;">
                              <thead>
                                  <tr>
                                      <th
                                          class="text-uppercase text-secondary text-xxs text-black font-weight-bolder opacity-7 ps-2">
                                          Staff Name
                                      </th>
                                      <th
                                          class="text-uppercase text-secondary text-xxs text-black font-weight-bolder opacity-7 ps-2">
                                          Department
                                      </th>
                                      <th
                                          class="text-uppercase text-secondary text-xxs text-black font-weight-bolder opacity-7 ps-2">
                                          Email
                                      </th>
                                      <th
                                          class="text-uppercase text-secondary text-xxs text-black font-weight-bolder opacity-7 ps-2">
                                          Phone
                                      </th>
                                      <th
                                          class="text-uppercase text-secondary text-xxs text-black font-weight-bolder opacity-7 ps-2">
                                          Hire Date
                                      </th>
                                      <th
                                          class="text-uppercase text-secondary text-xxs text-black font-weight-bolder opacity-7 ps-2">
                                          Status</th>
                                      <th
                                          class="text-uppercase text-secondary text-xxs text-black font-weight-bolder opacity-7 ps-2">
                                          Action</th>

                                  </tr>
                              </thead>
                              <tbody>
                                  {% for staff in staff %}
                                  
                                  <tr>

                                      <td>
                                          <p class="text-sm text-black font-weight-bold mb-0">{{staff.first_name }} {{staff.last_name}}</p>
                                      </td>
                                      <td>
                                          <p class="text-sm text-black font-weight-bold mb-0">{{staff.department.name }}</p>
                                      </td>
                                      <td>
                                          <p class="text-sm text-black font-weight-bold mb-0">{{staff.email}}</p>
                                      </td>
                                      <td>
                                          <p class="text-sm text-black font-weight-bold mb-0">{{staff.phone_number}}</p>
                                      </td>
                                      <td>
                                          <p class="text-sm text-black font-weight-bold mb-0">{{staff.hire_date.strftime('%d/%m/%Y')}}</p>
                                      </td>
                                      <td>
                                          <p class="text-sm text-black font-weight-bold mb-0">
                                              {% if staff.active %}
                                              <span class="badge bg-gradient-success">Active</span>
                                              {% else %}
                                              <span class="badge bg-gradient-danger">Inactive</span>
                                              {% endif %}
                                          </p>
                                      </td>
                                      <td class="px-1">
                                        {% if staff.user.admin %}
                                        {% else %}
                                          <div class="btn-group my-auto mx-1">
                                              <button id="menu-1" type="button"
                                                  class="py-1 border-secondary badge badge-sm bg-secondary dropdown-toggle"
                                                  data-bs-toggle="dropdown" aria-haspopup="true"
                                                  aria-expanded="false">
                                                  Action
                                              </button>
                                              <div class="dropdown-menu dropdown-menu-dark border shadow-3"
                                                  style="z-index: 2500 !important;" aria-labelledby="menu-1">
                                                  <a class="dropdown-item" href="#">View</a>
                                                  <!-- <a class="dropdown-item" href="#">Edit</a> -->
                                                  <a class="dropdown-item text-danger" data-bs-toggle="modal"
                                                  data-bs-target="#delete" href="#delete" onclick="Delete('{{url_for('delete_staff', id=staff.id)}}')">Delete</a>
                                              </div>
                                          </div>
                                          {% endif %}
                                      </td>
                                  </tr>
                                  {% endfor %}
                              </tbody>
                          </table>
                      </div>
                      <!-- Modal -->
                      <div class="modal fade" id="delete" data-bs-backdrop="static"
                          data-bs-keyboard="false" tabindex="-1" aria-labelledby="deleteLabel"
                          aria-hidden="true">
                          <div class="modal-dialog modal-dialog-centered">
                              <div class="modal-content">
                                  <div class="modal-header">
                                      <h1 class="modal-title fs-5" id="deleteLabel">Delete Item</h1>
                                      <button type="button" class="btn-close" data-bs-dismiss="modal"
                                          aria-label="Close"></button>
                                  </div>
                                  <div class="modal-body">
                                      Are you sure you want to proceed with this operation?
                                  </div>
                                  <div class="modal-footer py-2 d-flex justify-content-between">
                                      <button type="button" class="btn btn-sm btn-secondary"
                                          data-bs-dismiss="modal">Cancel</button>
                                      <a title="Proceed with Deletion" id="delete_it_button" href="" class="btn btn-sm btn-danger">Proceed</a>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      {% include 'admin/includes/part.footer.html' %}
  </div>
  </main>

  <!--   Core JS Files   -->
  {% include 'admin/includes/imports.bottom.html' %}
  <script>
    var win = navigator.platform.indexOf('Win') > -1;
    if (win && document.querySelector('#sidenav-scrollbar')) {
      var options = {
        damping: '0.5'
      }
      Scrollbar.init(document.querySelector('#sidenav-scrollbar'), options);
    }
  </script>
</body>

</html>