<%
  const account =
    typeof bankAccount !== "undefined" &&
    bankAccount
      ? bankAccount
      : {};

  const transactionList =
    typeof transactions !== "undefined" &&
    Array.isArray(transactions)
      ? transactions
      : [];

  const userCanManage =
    typeof canManage !== "undefined" &&
    canManage === true;

  const money = (
    amount,
    currencyCode
  ) => {
    const numericAmount =
      Number(amount || 0);

    return (
      numericAmount.toLocaleString(
        "en-US",
        {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2
        }
      ) +
      " " +
      (currencyCode || "AFN")
    );
  };

  const formatType = (type) => {
    const names = {
      deposit: "Deposit",
      withdrawal: "Withdrawal",
      cheque: "Cheque Payment",
      transfer_in: "Transfer In",
      transfer_out: "Transfer Out",
      adjustment: "Adjustment"
    };

    return names[type] || type || "Unknown";
  };

  const formatStatus = (status) => {
    if (!status) {
      return "Unknown";
    }

    return (
      status.charAt(0).toUpperCase() +
      status.slice(1)
    );
  };

  const getReferenceNumber = (
    transaction
  ) => {
    return (
      transaction.cheque_number ||
      transaction.reference_number ||
      "-"
    );
  };
%>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >

  <title>
    Bank Account Details |
    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;
    }

    .bank-details-container {
      width: min(1600px, 96%);
      margin: 30px auto;
    }

    .page-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 18px;
      margin-bottom: 22px;
      padding: 22px;
      background-color: #ffffff;
      border-radius: 12px;
      box-shadow:
        0 4px 15px
        rgba(0, 0, 0, 0.07);
    }

    .page-title {
      min-width: 0;
    }

    .page-title h1 {
      margin: 0 0 8px;
      color: #0f172a;
      font-size: 28px;
      overflow-wrap: anywhere;
    }

    .page-title p {
      margin: 0;
      color: #64748b;
      line-height: 1.5;
    }

    .header-actions {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 9px;
      flex-wrap: wrap;
    }

    .btn {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      min-height: 42px;
      padding: 10px 15px;
      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-secondary {
      background-color: #475569;
      color: #ffffff;
    }

    .btn-success {
      background-color: #15803d;
      color: #ffffff;
    }

    .btn-warning {
      background-color: #d97706;
      color: #ffffff;
    }

    .btn-purple {
      background-color: #7c3aed;
      color: #ffffff;
    }

    .summary-grid {
      display: grid;
      grid-template-columns:
        repeat(4, minmax(0, 1fr));
      gap: 16px;
      margin-bottom: 22px;
    }

    .summary-card {
      min-width: 0;
      padding: 20px;
      background-color: #ffffff;
      border-left: 5px solid #2563eb;
      border-radius: 10px;
      box-shadow:
        0 4px 15px
        rgba(0, 0, 0, 0.06);
    }

    .summary-card.opening {
      border-left-color: #7c3aed;
    }

    .summary-card.current {
      border-left-color: #2563eb;
    }

    .summary-card.pending {
      border-left-color: #d97706;
    }

    .summary-card.available {
      border-left-color: #15803d;
    }

    .summary-label {
      display: block;
      margin-bottom: 10px;
      color: #64748b;
      font-size: 14px;
      font-weight: 700;
    }

    .summary-value {
      display: block;
      overflow-wrap: anywhere;
      color: #0f172a;
      font-size: 23px;
      font-weight: 800;
    }

    .content-grid {
      display: grid;
      grid-template-columns:
        minmax(300px, 380px)
        minmax(0, 1fr);
      gap: 22px;
      align-items: start;
    }

    .details-card,
    .transactions-card {
      overflow: hidden;
      background-color: #ffffff;
      border-radius: 12px;
      box-shadow:
        0 4px 15px
        rgba(0, 0, 0, 0.07);
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      padding: 18px 20px;
      border-bottom: 1px solid #e2e8f0;
    }

    .card-header h2 {
      margin: 0;
      color: #0f172a;
      font-size: 20px;
    }

    .record-count {
      padding: 6px 10px;
      background-color: #e0e7ff;
      border-radius: 20px;
      color: #3730a3;
      font-size: 13px;
      font-weight: 700;
      white-space: nowrap;
    }

    .details-list {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .details-item {
      display: grid;
      grid-template-columns:
        minmax(120px, 145px)
        minmax(0, 1fr);
      gap: 10px;
      padding: 15px 20px;
      border-bottom: 1px solid #e2e8f0;
    }

    .details-item:last-child {
      border-bottom: none;
    }

    .details-label {
      color: #64748b;
      font-size: 13px;
      font-weight: 700;
    }

    .details-value {
      overflow-wrap: anywhere;
      color: #1e293b;
      font-size: 14px;
      font-weight: 700;
    }

    .account-number {
      font-family: monospace;
    }

    .status-badge {
      display: inline-block;
      padding: 6px 10px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }

    .status-active,
    .status-posted,
    .status-cleared {
      background-color: #dcfce7;
      color: #166534;
    }

    .status-inactive,
    .status-cancelled,
    .status-returned {
      background-color: #fee2e2;
      color: #991b1b;
    }

    .status-pending,
    .status-issued,
    .status-received {
      background-color: #fef3c7;
      color: #92400e;
    }

    .direction-badge {
      display: inline-block;
      min-width: 66px;
      padding: 6px 9px;
      border-radius: 20px;
      text-align: center;
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }

    .direction-credit {
      background-color: #dcfce7;
      color: #166534;
    }

    .direction-debit {
      background-color: #fee2e2;
      color: #991b1b;
    }

    .table-wrapper {
      width: 100%;
      overflow-x: auto;
      scrollbar-width: thin;
    }

    .transactions-table {
      width: 100%;
      min-width: 1620px;
      border-collapse: collapse;
      table-layout: auto;
    }

    .transactions-table th,
    .transactions-table td {
      padding: 13px 12px;
      border-bottom: 1px solid #e2e8f0;
      text-align: left;
      vertical-align: middle;
    }

    .transactions-table th {
      background-color: #f1f5f9;
      color: #334155;
      font-size: 13px;
      font-weight: 800;
      white-space: nowrap;
    }

    .transactions-table td {
      color: #334155;
      font-size: 13px;
    }

    .transactions-table tbody tr:hover {
      background-color: #f8fafc;
    }

    .row-number-cell {
      width: 45px;
      white-space: nowrap;
    }

    .date-cell {
      min-width: 105px;
      white-space: nowrap;
    }

    .direction-cell {
      min-width: 90px;
      white-space: nowrap;
    }

    .type-cell {
      min-width: 120px;
      line-height: 1.5;
    }

    .amount-cell {
      min-width: 145px;
      white-space: nowrap;
      font-weight: 800;
    }

    .amount-credit {
      color: #15803d;
    }

    .amount-debit {
      color: #dc2626;
    }

    .status-cell {
      min-width: 95px;
      white-space: nowrap;
    }

    .reference-cell {
      min-width: 160px;
      white-space: nowrap;
      font-family: monospace;
      font-size: 12px;
      font-weight: 700;
    }

    .payee-cell {
      min-width: 190px;
      max-width: 240px;
      line-height: 1.5;
      overflow-wrap: anywhere;
    }

    .receiver-cell {
      min-width: 150px;
      max-width: 200px;
      line-height: 1.5;
      overflow-wrap: anywhere;
    }

    .invoice-number-cell {
      min-width: 150px;
      white-space: nowrap;
    }

    .invoice-number {
      display: inline-block;
      max-width: 190px;
      padding: 6px 9px;
      overflow: hidden;
      background-color: #f1f5f9;
      border-radius: 6px;
      color: #334155;
      font-family: monospace;
      font-size: 12px;
      font-weight: 800;
      text-overflow: ellipsis;
      vertical-align: middle;
    }

    .invoice-file-cell {
      min-width: 125px;
      white-space: nowrap;
    }

    .invoice-button {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      min-height: 34px;
      padding: 7px 11px;
      background-color: #2563eb;
      border-radius: 6px;
      color: #ffffff;
      text-decoration: none;
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
    }

    .invoice-button:hover {
      background-color: #1d4ed8;
    }

    .description-cell {
      min-width: 230px;
      max-width: 320px;
      white-space: normal;
      overflow-wrap: anywhere;
      line-height: 1.5;
    }

    .cheque-status-cell {
      min-width: 110px;
      white-space: nowrap;
    }

    .muted-text {
      color: #94a3b8;
    }

    .empty-state {
      padding: 55px 20px;
      text-align: center;
    }

    .empty-state h3 {
      margin: 0 0 10px;
      color: #334155;
    }

    .empty-state p {
      margin: 0 0 20px;
      color: #64748b;
      line-height: 1.6;
    }

    .empty-actions {
      display: flex;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    @media (
      max-width: 1150px
    ) {
      .summary-grid {
        grid-template-columns:
          repeat(2, minmax(0, 1fr));
      }

      .content-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (
      max-width: 700px
    ) {
      .bank-details-container {
        width: 94%;
        margin: 18px auto;
      }

      .page-header {
        align-items: stretch;
        flex-direction: column;
      }

      .header-actions {
        justify-content: stretch;
      }

      .header-actions .btn {
        flex: 1;
      }

      .summary-grid {
        grid-template-columns: 1fr;
      }

      .page-title h1 {
        font-size: 23px;
      }

      .summary-value {
        font-size: 20px;
      }

      .details-item {
        grid-template-columns: 1fr;
        gap: 6px;
      }
    }
  </style>
</head>

<body>

  <main class="bank-details-container">

    <section class="page-header">

      <div class="page-title">

        <h1>
          <%= account.bank_name || "Bank Account" %>
        </h1>

        <p>
          View the bank account balance,
          account information and transaction history.
        </p>

      </div>

      <div class="header-actions">

        <a
          href="/bank-accounts"
          class="btn btn-secondary"
        >
          Back to Bank Accounts
        </a>

        <% if (userCanManage) { %>

          <a
            href="/bank-transactions/create?bank_account_id=<%= account.id %>&type=deposit"
            class="btn btn-success"
          >
            + Deposit
          </a>

          <a
            href="/bank-transactions/create?bank_account_id=<%= account.id %>&type=withdrawal"
            class="btn btn-warning"
          >
            + Withdrawal
          </a>

          <a
            href="/cheque-payments/create?bank_account_id=<%= account.id %>"
            class="btn btn-purple"
          >
            + Issue Cheque
          </a>

        <% } %>

      </div>

    </section>

    <section class="summary-grid">

      <article class="summary-card opening">

        <span class="summary-label">
          Opening Balance
        </span>

        <strong class="summary-value">
          <%= money(
            account.opening_balance,
            account.currency_code
          ) %>
        </strong>

      </article>

      <article class="summary-card current">

        <span class="summary-label">
          Current Bank Balance
        </span>

        <strong class="summary-value">
          <%= money(
            account.current_balance,
            account.currency_code
          ) %>
        </strong>

      </article>

      <article class="summary-card pending">

        <span class="summary-label">
          Pending Payments
        </span>

        <strong class="summary-value">
          <%= money(
            account.pending_payments,
            account.currency_code
          ) %>
        </strong>

      </article>

      <article class="summary-card available">

        <span class="summary-label">
          Available Balance
        </span>

        <strong class="summary-value">
          <%= money(
            account.available_balance,
            account.currency_code
          ) %>
        </strong>

      </article>

    </section>

    <section class="content-grid">

      <article class="details-card">

        <div class="card-header">

          <h2>
            Account Information
          </h2>

        </div>

        <ul class="details-list">

          <li class="details-item">

            <span class="details-label">
              Bank Name
            </span>

            <span class="details-value">
              <%= account.bank_name || "-" %>
            </span>

          </li>

          <li class="details-item">

            <span class="details-label">
              Account Name
            </span>

            <span class="details-value">
              <%= account.account_name || "-" %>
            </span>

          </li>

          <li class="details-item">

            <span class="details-label">
              Account Number
            </span>

            <span
              class="
                details-value
                account-number
              "
            >
              <%= account.account_number || "-" %>
            </span>

          </li>

          <li class="details-item">

            <span class="details-label">
              Currency
            </span>

            <span class="details-value">
              <%= account.currency_code || "AFN" %>
            </span>

          </li>

          <li class="details-item">

            <span class="details-label">
              Opening Date
            </span>

            <span class="details-value">
              <%= account.opening_balance_date || "-" %>
            </span>

          </li>

          <li class="details-item">

            <span class="details-label">
              Created At
            </span>

            <span class="details-value">
              <%= account.created_at || "-" %>
            </span>

          </li>

          <li class="details-item">

            <span class="details-label">
              Status
            </span>

            <span class="details-value">

              <% if (
                Number(account.is_active) === 1
              ) { %>

                <span
                  class="
                    status-badge
                    status-active
                  "
                >
                  Active
                </span>

              <% } else { %>

                <span
                  class="
                    status-badge
                    status-inactive
                  "
                >
                  Inactive
                </span>

              <% } %>

            </span>

          </li>

        </ul>

      </article>

      <article class="transactions-card">

        <div class="card-header">

          <h2>
            Transaction History
          </h2>

          <span class="record-count">
            <%= transactionList.length %>
            Record<%= transactionList.length === 1
              ? ""
              : "s" %>
          </span>

        </div>

        <% if (
          transactionList.length === 0
        ) { %>

          <div class="empty-state">

            <h3>
              No bank transactions found
            </h3>

            <p>
              Deposits, withdrawals and cheque
              payments for this account will appear here.
            </p>

            <% if (userCanManage) { %>

              <div class="empty-actions">

                <a
                  href="/bank-transactions/create?bank_account_id=<%= account.id %>&type=deposit"
                  class="btn btn-success"
                >
                  Add Deposit
                </a>

                <a
                  href="/cheque-payments/create?bank_account_id=<%= account.id %>"
                  class="btn btn-purple"
                >
                  Issue Cheque
                </a>

              </div>

            <% } %>

          </div>

        <% } else { %>

          <div class="table-wrapper">

            <table class="transactions-table">

              <thead>

                <tr>
                  <th>#</th>
                  <th>Date</th>
                  <th>Direction</th>
                  <th>Type</th>
                  <th>Amount</th>
                  <th>Transaction Status</th>
                  <th>Cheque / Reference No.</th>
                  <th>Payee</th>
                  <th>Received By</th>
                  <th>Invoice No.</th>
                  <th>Invoice File</th>
                  <th>Description</th>
                  <th>Cheque Status</th>
                </tr>

              </thead>

              <tbody>

                <% transactionList.forEach(
                  (transaction, index) => {
                %>

                  <tr>

                    <td class="row-number-cell">
                      <%= index + 1 %>
                    </td>

                    <td class="date-cell">
                      <%= transaction.transaction_date || "-" %>
                    </td>

                    <td class="direction-cell">

                      <span
                        class="
                          direction-badge
                          <%= transaction.direction === "credit"
                            ? "direction-credit"
                            : "direction-debit" %>
                        "
                      >
                        <%= transaction.direction === "credit"
                          ? "Credit"
                          : "Debit" %>
                      </span>

                    </td>

                    <td class="type-cell">
                      <%= formatType(
                        transaction.transaction_type
                      ) %>
                    </td>

                    <td
                      class="
                        amount-cell
                        <%= transaction.direction === "credit"
                          ? "amount-credit"
                          : "amount-debit" %>
                      "
                    >
                      <%= transaction.direction === "credit"
                        ? "+"
                        : "-" %>

                      <%= money(
                        transaction.amount,
                        account.currency_code
                      ) %>
                    </td>

                    <td class="status-cell">

                      <span
                        class="
                          status-badge
                          status-<%= transaction.status || "pending" %>
                        "
                      >
                        <%= formatStatus(
                          transaction.status
                        ) %>
                      </span>

                    </td>

                    <td class="reference-cell">
                      <%= getReferenceNumber(
                        transaction
                      ) %>
                    </td>

                    <td class="payee-cell">
                      <%= transaction.payee_name || "-" %>
                    </td>

                    <td class="receiver-cell">
                      <%= transaction.received_by_name || "-" %>
                    </td>

                    <td class="invoice-number-cell">

                      <% if (
                        transaction.invoice_number
                      ) { %>

                        <span
                          class="invoice-number"
                          title="<%= transaction.invoice_number %>"
                        >
                          <%= transaction.invoice_number %>
                        </span>

                      <% } else { %>

                        <span class="muted-text">
                          —
                        </span>

                      <% } %>

                    </td>

                    <td class="invoice-file-cell">

                      <% if (
                        transaction.invoice_file
                      ) { %>

                        <a
                          href="<%= transaction.invoice_file %>"
                          target="_blank"
                          rel="noopener noreferrer"
                          class="invoice-button"
                        >
                          View Invoice
                        </a>

                      <% } else { %>

                        <span class="muted-text">
                          No file
                        </span>

                      <% } %>

                    </td>

                    <td class="description-cell">
                      <%= transaction.description || "-" %>
                    </td>

                    <td class="cheque-status-cell">

                      <% if (
                        transaction.cheque_payment_id
                      ) { %>

                        <span
                          class="
                            status-badge
                            status-<%= transaction.cheque_status || "issued" %>
                          "
                        >
                          <%= formatStatus(
                            transaction.cheque_status
                          ) %>
                        </span>

                      <% } else { %>

                        <span class="muted-text">
                          —
                        </span>

                      <% } %>

                    </td>

                  </tr>

                <% }); %>

              </tbody>

            </table>

          </div>

        <% } %>

      </article>

    </section>

  </main>

</body>

</html>