<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">

  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >

  <title>Edit Attendance</title>

  <link rel="stylesheet" href="/css/style.css">
</head>

<body>

  <header>
    <h1>Edit Attendance</h1>
    <p>Update the employee attendance information</p>
  </header>

  <main class="form-container">

    <a href="/attendance" class="back-button">
      ← Back to Attendance
    </a>

    <form
      action="/attendance/<%= attendance.id %>/edit"
      method="POST"
    >

      <div class="form-group">
        <label for="employee_id">Employee</label>

        <select
          id="employee_id"
          name="employee_id"
          required
        >
          <% employees.forEach((employee) => { %>

            <option
              value="<%= employee.id %>"
              <%= Number(attendance.employee_id) === Number(employee.id)
                ? "selected"
                : "" %>
            >
              <%= employee.full_name %>
            </option>

          <% }); %>
        </select>
      </div>

      <div class="form-group">
        <label for="attendance_date">
          Attendance Date
        </label>

        <input
          type="date"
          id="attendance_date"
          name="attendance_date"
          value="<%= attendance.attendance_date %>"
          required
        >
      </div>

      <div class="form-group">
        <label for="status">Status</label>

        <select
          id="status"
          name="status"
          required
        >
          <option
            value="Present"
            <%= attendance.status === "Present"
              ? "selected"
              : "" %>
          >
            Present
          </option>

          <option
            value="Absent"
            <%= attendance.status === "Absent"
              ? "selected"
              : "" %>
          >
            Absent
          </option>

          <option
            value="Late"
            <%= attendance.status === "Late"
              ? "selected"
              : "" %>
          >
            Late
          </option>

          <option
            value="Leave"
            <%= attendance.status === "Leave"
              ? "selected"
              : "" %>
          >
            Leave
          </option>
        </select>
      </div>

      <div class="form-group">
        <label for="check_in">Check In</label>

        <input
          type="time"
          id="check_in"
          name="check_in"
          value="<%= attendance.check_in
            ? attendance.check_in.slice(0, 5)
            : "" %>"
        >
      </div>

      <div class="form-group">
        <label for="check_out">Check Out</label>

        <input
          type="time"
          id="check_out"
          name="check_out"
          value="<%= attendance.check_out
            ? attendance.check_out.slice(0, 5)
            : "" %>"
        >
      </div>

      <div class="form-group">
        <label for="note">Note</label>

        <textarea
          id="note"
          name="note"
          rows="4"
        ><%= attendance.note || "" %></textarea>
      </div>

      <button type="submit" class="submit-button">
        Update Attendance
      </button>

    </form>

  </main>

</body>
</html>