<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">

  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >

  <title>Edit Salary</title>

  <link rel="stylesheet" href="/css/style.css">
</head>

<body>

  <main class="page-container">

    <a href="/salaries" class="back-button">
      ← Back to Salaries
    </a>

    <h1 class="page-heading">Edit Salary</h1>

    <div class="form-container">

      <form
        action="/salaries/<%= salary.id %>/update"
        method="POST"
      >

        <div class="form-group">
          <label for="employee_id">Employee</label>

          <select
            id="employee_id"
            name="employee_id"
            required
          >
            <option value="">Select Employee</option>

            <% employees.forEach((employee) => { %>

              <option
                value="<%= employee.id %>"
                <%= Number(employee.id) === Number(salary.employee_id)
                  ? "selected"
                  : "" %>
              >
                <%= employee.full_name %>
              </option>

            <% }); %>
          </select>
        </div>

        <div class="form-group">
          <label for="salary_month">Salary Month</label>

          <input
            type="month"
            id="salary_month"
            name="salary_month"
            value="<%= salary.salary_month %>"
            required
          >
        </div>

        <div class="form-group">
          <label for="basic_salary">Basic Salary</label>

          <input
            type="number"
            id="basic_salary"
            name="basic_salary"
            min="0"
            step="0.01"
            value="<%= salary.basic_salary %>"
            required
          >
        </div>

        <div class="form-group">
          <label for="bonus">Bonus</label>

          <input
            type="number"
            id="bonus"
            name="bonus"
            min="0"
            step="0.01"
            value="<%= salary.bonus || 0 %>"
          >
        </div>

        <div class="form-group">
          <label for="deduction">Deduction</label>

          <input
            type="number"
            id="deduction"
            name="deduction"
            min="0"
            step="0.01"
            value="<%= salary.deduction || 0 %>"
          >
        </div>

        <div class="form-group">
          <label for="payment_status">Payment Status</label>

          <select
            id="payment_status"
            name="payment_status"
            required
          >
            <option
              value="Pending"
              <%= salary.payment_status === "Pending"
                ? "selected"
                : "" %>
            >
              Pending
            </option>

            <option
              value="Paid"
              <%= salary.payment_status === "Paid"
                ? "selected"
                : "" %>
            >
              Paid
            </option>
          </select>
        </div>

        <div class="form-group">
          <label for="payment_date">Payment Date</label>

          <input
            type="date"
            id="payment_date"
            name="payment_date"
            value="<%= salary.payment_date || '' %>"
          >
        </div>

        <div class="form-group">
          <label for="note">Note</label>

          <textarea
            id="note"
            name="note"
            rows="4"
            placeholder="Enter an optional note"
          ><%= salary.note || "" %></textarea>
        </div>

        <button type="submit" class="submit-button">
          Update Salary
        </button>

      </form>

    </div>

  </main>

</body>
</html>