<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity5"
      lang="en">
<head th:replace="fragments/loggedInNav :: head(~{::title}, ~{}, ~{})">
  <title>ITems | Request</title>
</head>

<body>

<div th:block sec:authorize="!isAuthenticated()" th:replace="fragments/loggedOutNav :: nav(~{::navbar})"></div>
<div th:block sec:authorize="isAuthenticated()" th:replace="fragments/loggedInNav :: nav(~{::navbar})"></div>

<header class="masthead bg-light mb-3 border-bottom" >
  <div class="container">
    <div class="row gx-4 gx-lg-5 justify-content-center text-center">
      <div class="col-md-10 col-lg-8 col-xl-7">
        <div class="site-heading">
          <h1 class="mt-5">Employee Dashboard</h1>
          <p class="mb-5">
            Welcome <span class="subheading text-info" th:text="${employee.firstName}"></span> <span class="subheading text-info" th:text="${employee.lastName}"></span>
          </p>
        </div>
      </div>
    </div>
  </div>
</header>

<main>
  <div class="container-md px-4 px-lg-5" sec:authorize="isAuthenticated()">
    <div class="row gx-4  justify-content-center">

      <div class="col-sm-4 gx-3 gy-4">
        <div class="card p-3 mb-5" >
          <div class="card-header">
            <button class="btn btn-link"  type="button" data-bs-toggle="collapse" data-bs-target="#collapseProfile" aria-expanded="false" aria-controls="collapseProfile">
              <h3>Employee Profile</h3>
            </button>
          </div>
          <div class="collapse" id="collapseProfile">
            <div class="card-body">
              <h5 class="card-title"></h5>
              <ul class="list-group list-group-flush">
                <li class="list-group-item fw-bold">Employee Id: <span class="fw-lighter" th:text="${employee.id}"></span></li>
                <li class="list-group-item fw-bold">First Name: <span class="fw-lighter" th:text="${employee.firstName}"></span></li>
                <li class="list-group-item fw-bold">Last Name: <span class="fw-lighter" th:text="${employee.lastName}"></span></li>
                <li class="list-group-item fw-bold">Phone Number: <span class="fw-lighter" th:text="${employee.phone}"></span></li>
                <li class="list-group-item fw-bold">Email: <span class="fw-lighter" th:text="${employee.email}"></span></li>
                <li class="list-group-item fw-bold">Birthdate: <span class="fw-lighter" th:text="${employee.birthDate}"></span></li>
                <li class="list-group-item fw-bold">Emergency Contract: <span class="fw-lighter" th:text="${employee.emergencyContactName}"></span></li>
                <li class="list-group-item fw-bold">Emergency Contact Number: <span class="fw-lighter" th:text="${employee.emergencyContactPhone}"></span></li>
                <li class="list-group-item fw-bold">Hire Date: <span class="fw-lighter" th:text="${employee.hireDate}"></span></li>
                <li class="list-group-item fw-bold">Department: <span class="fw-lighter" th:text="${employee.department}"></span></li>
                <li class="list-group-item fw-bold">Position: <span class="fw-lighter" th:text="${employee.position}"></span></li>
                <li class="list-group-item fw-bold">Location: <span class="fw-lighter" th:text="${employee.location.locationName}"></span></li>
                <li class="list-group-item fw-bold">Salary: <span class="fw-lighter" th:text="${employee.salary}"></span></li>
                <li class="list-group-item fw-bold">Security Privileges: <span class="fw-lighter" th:text="${employee.role}"></span></li>
              </ul>
            </div>
            <hr class="my-4" />
            <a class="btn btn-info" href="/updateEmployeeForm">Update Profile</a>
          </div>
        </div>
      </div>

      <div class="col-sm-4 gx-3 gy-4">
        <div class="card p-3 mb-5" >
          <div class="card-header">
            <button class="btn btn-link"  type="button" data-bs-toggle="collapse" data-bs-target="#collapseRequests" aria-expanded="false" aria-controls="collapseRequests">
              <h3>HR Requests</h3>
            </button>
          </div>
          <div class="collapse" id="collapseRequests">
            <div class="list-group mt-3" th:each="request: ${requests}">
              <a class="list-group-item list-group-item-action" th:href="@{/request(requestId=${request.id})}" >
                <div class="d-flex w-100 justify-content-between">
                  <h5 class="flex-md-wrap" th:text="${request.title}"></h5>
                </div>
                <small>
                  Request Type:
                  <span class="subheading fst-italic text-info" th:if="${request.requestType == request.requestType.TRANSFER_REQUEST}">Transfer Request</span>
                  <span class="subheading fst-italic text-info" th:if="${request.requestType == request.requestType.TIME_OFF}">Time Off Request</span>
                </small>
                <small>
                  Request Status:
                  <span class="subheading fw-bold text-warning fst-italic"  th:if="${request.status == request.status.PENDING} ">Pending</span>
                  <span class="subheading fw-bold text-success fst-italic" th:if="${request.status == request.status.APPROVED}">Approved</span>
                  <span class="subheading fw-bold text-danger fst-italic" th:if="${request.status == request.status.DENIED}">Denied</span>
                </small>
              </a>
              <hr>
            </div>
            <hr class="my-4" />
            <a class="btn btn-info" href="/addRequestForm">Submit Request</a>
          </div>
        </div>
      </div>

      <div class="col-sm-4 gx-3 gy-4">
        <div class="card p-3 mb-5" >
          <div class="card-header">
            <button class="btn btn-link"  type="button" data-bs-toggle="collapse" data-bs-target="#collapseDocs" aria-expanded="false" aria-controls="collapseRequests">
              <h3>Employee Documents</h3>
            </button>
          </div>
          <div class="collapse" id="collapseDocs">
            <div class="list-group mt-3" th:each="document: ${documents}">
              <a class="list-group-item list-group-item-action" th:href="@{/download-file(fileid=${document.id})}">
                <div class="d-flex w-100 justify-content-between">
                  <h5 class="flex-md-wrap" th:text="${document.docName}"></h5>
                </div>
                <small>
                  <span class="subheading fw-bold text-info fst-italic">Click to download</span>
                </small>
              </a>
            </div>
            <hr class="my-4" />
            <a class="btn btn-info" href="/submitDocument">Submit Document</a>
          </div>
        </div>
      </div>

    </div>
  </div>
</main>

<footer th:block th:replace="fragments/loggedOutNav :: footer(~{::footer})"></footer>


</body>
</html>