<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity5"
      lang="en">
<head>
  <meta charset="UTF-8">
  <title>Add User</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

</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">ITems</h1>
          <p class="mb-5">
            <span class="subheading">Employee Profile</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</header>

<main>
  <div class="container d-flex justify-content-center align-items-center">
    <div class="border rounded-2 p-5 m-5 bg-light">
      <h2 class="display-6 mt-3">Add/Edit Employee</h2>
      <hr>
      <form th:action="@{/updateEmployee}" th:object="${employee}" method="POST" class="form justify-center" enctype="multipart/form-data">
        <div class="row g-3 align-items-center">
          <div class="col form-floating mb-3">
            <input type="text" th:field="*{firstName}" placeholder="Enter First Name" id="floatingFirstName" class="form-control form-control-sm col-2 mb-4"/>
            <label for="floatingFirstName">First Name</label>
            <div th:if="${#fields.hasErrors('firstName')}" th:errors="*{firstName}" class="text-danger"></div>
          </div>
        </div>
        <div class="row g-3 align-items-center">
          <div class="col form-floating mb-3">
            <input type="text" th:field="*{lastName}" placeholder="Enter Last Name" id="floatingLastName" class="form-control form-control-sm col-2 mb-4"/>
            <label for="floatingLastName">Last Name</label>
            <div th:if="${#fields.hasErrors('lastName')}" th:errors="*{lastName}" class="text-danger"></div>
          </div>
        </div>
        <div class="row g-3 align-items-center">
          <div class="col form-floating mb-3">
            <input type="email" th:field="*{email}" placeholder="Email" id="floatingEmail" class="form-control form-control-sm col-2 mb-4" required/>
            <label for="floatingEmail">Email</label>
            <div th:if="${#fields.hasErrors('email')}" th:errors="*{email}" class="text-danger"></div>
          </div>
        </div>
        <div class="row g-3">
          <div class="col form-floating mb-3">
            <input type="password" th:field="*{passcode}" placeholder="Enter your password" id="floatingPassword" class="form-control form-control-sm col-2 mb-4"/>
            <label for="floatingPassword">Password </label>
          </div>
          <div th:if="${#fields.hasErrors('passcode')}" th:errors="*{passcode}" class="text-danger"></div>
          <div class="col form-floating">
            <input type="password" name="passcodeConfirm" placeholder="Repeat your password" id="floatingPassword2" class="form-control form-control-sm col-2 mb-4"/>
            <label for="floatingPassword2">Confirm Password </label>
          </div>
          <div class="row g-3 align-items-center">
            <div class="col form-floating mb-3">
              <input type="tel" th:field="*{phone}" placeholder="Enter Phone Number" id="floatingPhone" class="form-control form-control-sm col-2 mb-4"/>
              <label for="floatingPhone">Phone Number (ex format. 555-555-5555)</label>
              <div th:if="${#fields.hasErrors('phone')}" th:errors="*{phone}" class="text-danger"></div>
            </div>
          </div>
          <div sec:authorize="hasRole('MANAGER')" class="row g-3 align-items-center">
            <div class="col form-floating mb-3">
              <select th:field="*{position}" placeholder="Enter Position" id="floatingPosition" class="form-control form-control-sm col-2 mb-4" required>
                <option value="SALES_MANAGER">Sales Manager</option>
                <option value="SALES_REP">Sales Rep</option>
                <option value="ADVERTISING_MANAGER">Advertising Manager</option>
                <option value="SOFTWARE_DEVELOPER">Software Dev</option>
              </select>
              <label for="floatingPosition">Position</label>
              <div th:if="${#fields.hasErrors('position')}" th:errors="*{position}" class="text-danger"></div>
            </div>
          </div>
          <div sec:authorize="hasRole('MANAGER')" class="row g-3 align-items-center">
            <div class="col form-floating mb-3">
              <select th:field="*{department}" placeholder="Enter department" id="floatingDepartment" class="form-control form-control-sm col-2 mb-4" required>
                <option value="SALES">Sales</option>
                <option value="MARKETING">Marketing</option>
                <option value="IT">IT</option>
                <option value="HR">HR</option>
                <option value="ACCOUNTING">Accounting</option>
              </select>
              <label for="floatingDepartment">Department</label>
              <div th:if="${#fields.hasErrors('department')}" th:errors="*{department}" class="text-danger"></div>
            </div>
          </div>
          <div class="row g-3 align-items-center">
            <div class="col form-floating mb-3">
              <input type="date" th:type="date" th:field="*{birthDate}" placeholder="Choose Date Of Birth" min="1900-12-31" max="2003-01-01" id="floatingDOB" class="form-control form-control-sm col-2 mb-4"/>
              <label for="floatingDOB">Date Of Birth</label>
              <div th:if="${#fields.hasErrors('birthDate')}" th:errors="*{birthDate}" class="text-danger"></div>
            </div>
          </div>
          <div sec:authorize="hasRole('MANAGER')" class="row g-3 align-items-center">
            <div class="col form-floating mb-3">
              <input type="number" min="0.01" step="0.01" max="200" value="13.50" th:field="*{salary}" placeholder="Enter Salary" id="floatingSalary" class="form-control form-control-sm col-2 mb-4" required/>
              <label for="floatingSalary">Salary/hr</label>
              <div th:if="${#fields.hasErrors('salary')}" th:errors="*{salary}" class="text-danger"></div>
            </div>
          </div>
          <div sec:authorize="hasRole('MANAGER')" class="row g-3 align-items-center">
            <div class="col form-floating mb-3">
              <select name = "locationId" th:field="*{location}" placeholder="Enter Location" id="floatingLocation" class="form-control form-control-sm col-2 mb-4" required>
                <option th:each="location: ${locations}" th:value="${location.id}" th:text="${location.locationName}"></option>
              </select>
              <label for="floatingLocation">Location</label>
              <div th:if="${#fields.hasErrors('location')}" th:errors="*{location}" class="text-danger"></div>
            </div>
          </div>
          <div class="row g-3 align-items-center">
            <div class="col form-floating mb-3">
              <input type="tel" th:field="*{emergencyContactPhone}" placeholder="Enter Phone Number" id="floatingEmergencyPhone" class="form-control form-control-sm col-2 mb-4"/>
              <label for="floatingEmergencyPhone">Emergency Contact Number (ex format. 555-555-5555)</label>
              <div th:if="${#fields.hasErrors('emergencyContactPhone')}" th:errors="*{emergencyContactPhone}" class="text-danger"></div>
            </div>
          </div>
          <div class="row g-3 align-items-center">
            <div class="col form-floating mb-3">
              <input type="text" th:field="*{emergencyContactName}" placeholder="Emergency Contact Name" id="floatingEmergencyName" class="form-control form-control-sm col-2 mb-4"/>
              <label for="floatingEmergencyName">Emergency Contact Name</label>
              <div th:if="${#fields.hasErrors('emergencyContactName')}" th:errors="*{emergencyContactName}" class="text-danger"></div>
            </div>
          </div>
          <div sec:authorize="hasRole('MANAGER')" class="row g-3 align-items-center">
            <div class="col form-floating mb-3">
              <select th:field="*{role}" id="floatingRole" class="form-control form-control-sm col-2 mb-4" required>
                <option value="EMPLOYEE">Employee</option>
                <option value="MANAGER">Manager</option>
              </select>
              <label for="floatingRole">Role</label>
              <div th:if="${#fields.hasErrors('role')}" th:errors="*{role}" class="text-danger"></div>
            </div>
          </div>
        </div>
        <button class="btn btn-info m-3" type="submit">Save</button>
        <input type="hidden" th:field="${employee.id}" />
        <div sec:authorize="hasRole('EMPLOYEE')">
          <input type="hidden" th:field="${employee.hireDate}" />
          <input type="hidden" th:field="${employee.location}" />
          <input type="hidden" th:field="${employee.position}" />
          <input type="hidden" th:field="${employee.department}" />
          <input type="hidden" th:field="${employee.salary}" />
          <input type="hidden" th:field="${employee.role}" />
        </div>

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


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

</body>
</html>