<%
  const data =
    typeof formData !== "undefined" &&
    formData
      ? formData
      : {};

  const errorList =
    Array.isArray(errors)
      ? errors
      : [];

  const today =
    new Date()
      .toISOString()
      .split("T")[0];
%>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >

  <title>
    Add Bank Account | Company Management System
  </title>

  <link
    rel="stylesheet"
    href="/css/style.css"
  >

  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      background-color: #f8fafc;
      color: #1f2937;
      font-family: Arial, sans-serif;
    }

    .form-container {
      width: min(900px, 94%);
      margin: 30px auto;
    }

    .page-header {
      margin-bottom: 22px;
      padding: 22px;
      background-color: #ffffff;
      border-radius: 12px;
      box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.07);
    }

    .page-header h1 {
      margin: 0 0 8px;
      color: #0f172a;
      font-size: 28px;
    }

    .page-header p {
      margin: 0;
      color: #64748b;
      line-height: 1.6;
    }

    .form-card {
      padding: 25px;
      background-color: #ffffff;
      border-radius: 12px;
      box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.07);
    }

    .error-box {
      margin-bottom: 20px;
      padding: 15px 18px;
      background-color: #fee2e2;
      border-left: 5px solid #dc2626;
      border-radius: 7px;
      color: #991b1b;
    }

    .error-box strong {
      display: block;
      margin-bottom: 8px;
    }

    .error-box ul {
      margin: 0;
      padding-left: 20px;
    }

    .error-box li {
      margin-bottom: 5px;
    }

    .form-grid {
      display: grid;
      grid-template-columns:
        repeat(2, minmax(0, 1fr));
      gap: 20px;
    }

    .form-group {
      min-width: 0;
    }

    .form-group.full-width {
      grid-column: 1 / -1;
    }

    .form-group label {
      display: block;
      margin-bottom: 8px;
      color: #334155;
      font-size: 14px;
      font-weight: 700;
    }

    .required {
      color: #dc2626;
    }

    .form-control {
      width: 100%;
      min-height: 45px;
      padding: 11px 13px;
      border: 1px solid #cbd5e1;
      border-radius: 7px;
      background-color: #ffffff;
      color: #1f2937;
      font-size: 15px;
      outline: none;
      transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
    }

    .form-control:focus {
      border-color: #2563eb;
      box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.14);
    }

    .form-control::placeholder {
      color: #94a3b8;
    }

    .field-help {
      display: block;
      margin-top: 7px;
      color: #64748b;
      font-size: 12px;
      line-height: 1.5;
    }

    .status-box {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 45px;
      padding: 11px 13px;
      background-color: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 7px;
    }

    .status-box input {
      width: 18px;
      height: 18px;
      cursor: pointer;
    }

    .status-box label {
      margin: 0;
      cursor: pointer;
    }

    .form-actions {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 12px;
      margin-top: 25px;
      padding-top: 20px;
      border-top: 1px solid #e2e8f0;
    }

    .btn {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      min-height: 43px;
      padding: 10px 18px;
      border: none;
      border-radius: 7px;
      text-decoration: none;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      transition:
        opacity 0.2s ease,
        transform 0.2s ease;
    }

    .btn:hover {
      opacity: 0.9;
      transform: translateY(-1px);
    }

    .btn-primary {
      background-color: #2563eb;
      color: #ffffff;
    }

    .btn-secondary {
      background-color: #475569;
      color: #ffffff;
    }

    @media (
      max-width: 700px
    ) {
      .form-container {
        width: 94%;
        margin: 18px auto;
      }

      .form-grid {
        grid-template-columns: 1fr;
      }

      .form-group.full-width {
        grid-column: auto;
      }

      .page-header h1 {
        font-size: 23px;
      }

      .form-card {
        padding: 18px;
      }

      .form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
      }

      .form-actions .btn {
        width: 100%;
      }
    }
  </style>
</head>

<body>

  <main class="form-container">

    <section class="page-header">

      <h1>Add Bank Account</h1>

      <p>
        Add the company bank account,
        opening balance and opening balance date.
      </p>

    </section>

    <section class="form-card">

      <% if (errorList.length > 0) { %>

        <div class="error-box">

          <strong>
            Please correct the following:
          </strong>

          <ul>

            <% errorList.forEach(
              (error) => {
            %>

              <li>
                <%= error.msg || error %>
              </li>

            <% }); %>

          </ul>

        </div>

      <% } %>

      <form
        action="/bank-accounts"
        method="POST"
        autocomplete="off"
      >

        <div class="form-grid">

          <div class="form-group">

            <label for="bank_name">
              Bank Name
              <span class="required">*</span>
            </label>

            <input
              type="text"
              id="bank_name"
              name="bank_name"
              class="form-control"
              value="<%= data.bank_name || '' %>"
              placeholder="Example: Afghanistan International Bank"
              maxlength="150"
              required
            >

          </div>

          <div class="form-group">

            <label for="account_name">
              Account Name
              <span class="required">*</span>
            </label>

            <input
              type="text"
              id="account_name"
              name="account_name"
              class="form-control"
              value="<%= data.account_name || '' %>"
              placeholder="Example: Rixon Company Main Account"
              maxlength="150"
              required
            >

          </div>

          <div class="form-group">

            <label for="account_number">
              Account Number
              <span class="required">*</span>
            </label>

            <input
              type="text"
              id="account_number"
              name="account_number"
              class="form-control"
              value="<%= data.account_number || '' %>"
              placeholder="Enter the bank account number"
              maxlength="100"
              required
            >

            <small class="field-help">
              Enter the exact account number shown
              by the bank.
            </small>

          </div>

          <div class="form-group">

            <label for="currency_code">
              Currency
              <span class="required">*</span>
            </label>

            <select
              id="currency_code"
              name="currency_code"
              class="form-control"
              required
            >

              <option
                value="AFN"
                <%= (data.currency_code || "AFN") === "AFN"
                  ? "selected"
                  : "" %>
              >
                AFN — Afghan Afghani
              </option>

              <option
                value="USD"
                <%= data.currency_code === "USD"
                  ? "selected"
                  : "" %>
              >
                USD — US Dollar
              </option>

              <option
                value="EUR"
                <%= data.currency_code === "EUR"
                  ? "selected"
                  : "" %>
              >
                EUR — Euro
              </option>

              <option
                value="PKR"
                <%= data.currency_code === "PKR"
                  ? "selected"
                  : "" %>
              >
                PKR — Pakistani Rupee
              </option>

            </select>

          </div>

          <div class="form-group">

            <label for="opening_balance">
              Opening Balance
              <span class="required">*</span>
            </label>

            <input
              type="number"
              id="opening_balance"
              name="opening_balance"
              class="form-control"
              value="<%= data.opening_balance ?? '' %>"
              placeholder="0.00"
              min="0"
              step="0.01"
              required
            >

            <small class="field-help">
              Enter the bank balance available
              on the selected opening date.
            </small>

          </div>

          <div class="form-group">

            <label for="opening_balance_date">
              Opening Balance Date
              <span class="required">*</span>
            </label>

            <input
              type="date"
              id="opening_balance_date"
              name="opening_balance_date"
              class="form-control"
              value="<%= data.opening_balance_date || '' %>"
              max="<%= today %>"
              required
            >

            <small class="field-help">
              Future dates are not allowed.
            </small>

          </div>

          <div class="form-group full-width">

            <label>
              Account Status
            </label>

            <div class="status-box">

              <input
                type="checkbox"
                id="is_active"
                name="is_active"
                value="1"
                <%= Number(
                  data.is_active ?? 1
                ) === 1
                  ? "checked"
                  : "" %>
              >

              <label for="is_active">
                This bank account is active
              </label>

            </div>

          </div>

        </div>

        <div class="form-actions">

          <a
            href="/bank-accounts"
            class="btn btn-secondary"
          >
            Cancel
          </a>

          <button
            type="submit"
            class="btn btn-primary"
          >
            Save Bank Account
          </button>

        </div>

      </form>

    </section>

  </main>

</body>

</html>