<%
  const transaction =
    typeof bankTransaction !== "undefined" &&
    bankTransaction
      ? bankTransaction
      : {};

  const money = (
    amount,
    currencyCode
  ) => {
    return (
      Number(
        amount || 0
      ).toLocaleString(
        "en-US",
        {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2
        }
      ) +
      " " +
      (currencyCode || "AFN")
    );
  };

  const formatStatus = (
    status
  ) => {
    if (!status) {
      return "Unknown";
    }

    return (
      status.charAt(0).toUpperCase() +
      status.slice(1)
    );
  };

  const formatType = (
    type
  ) => {
    const names = {
      deposit: "Bank Deposit",
      withdrawal: "Bank Withdrawal",
      cheque: "Cheque Payment",
      transfer_in: "Incoming Transfer",
      transfer_out: "Outgoing Transfer",
      adjustment: "Balance Adjustment"
    };

    return (
      names[type] ||
      type ||
      "Unknown"
    );
  };

  const isCredit =
    transaction.direction ===
    "credit";

  const directionName =
    isCredit
      ? "Credit"
      : "Debit";

  const amountSign =
    isCredit
      ? "+"
      : "-";
%>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >

  <title>
    Bank Transaction 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;
    }

    .transaction-container {
      width: min(1150px, 95%);
      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.6;
    }

    .header-actions {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .btn {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      min-height: 42px;
      padding: 10px 16px;
      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-primary {
      background-color: #2563eb;
      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.type {
      border-left-color: #7c3aed;
    }

    .summary-card.amount-credit {
      border-left-color: #15803d;
    }

    .summary-card.amount-debit {
      border-left-color: #dc2626;
    }

    .summary-card.status {
      border-left-color: #d97706;
    }

    .summary-card.bank {
      border-left-color: #0f766e;
    }

    .summary-label {
      display: block;
      margin-bottom: 10px;
      color: #64748b;
      font-size: 13px;
      font-weight: 700;
    }

    .summary-value {
      display: block;
      overflow-wrap: anywhere;
      color: #0f172a;
      font-size: 21px;
      font-weight: 800;
    }

    .credit-value {
      color: #15803d;
    }

    .debit-value {
      color: #dc2626;
    }

    .status-badge {
      display: inline-block;
      padding: 7px 11px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }

    .status-posted {
      background-color: #dcfce7;
      color: #166534;
    }

    .status-pending {
      background-color: #fef3c7;
      color: #92400e;
    }

    .status-cancelled {
      background-color: #fee2e2;
      color: #991b1b;
    }

    .direction-badge {
      display: inline-block;
      min-width: 70px;
      padding: 7px 11px;
      border-radius: 20px;
      text-align: center;
      font-size: 12px;
      font-weight: 800;
    }

    .direction-credit {
      background-color: #dcfce7;
      color: #166534;
    }

    .direction-debit {
      background-color: #fee2e2;
      color: #991b1b;
    }

    .content-grid {
      display: grid;
      grid-template-columns:
        repeat(2, minmax(0, 1fr));
      gap: 22px;
      align-items: start;
    }

    .detail-card {
      overflow: hidden;
      background-color: #ffffff;
      border-radius: 12px;
      box-shadow:
        0 4px 15px
        rgba(0, 0, 0, 0.07);
    }

    .detail-card.full-width {
      grid-column: 1 / -1;
    }

    .card-header {
      padding: 18px 20px;
      border-bottom:
        1px solid #e2e8f0;
    }

    .card-header h2 {
      margin: 0;
      color: #0f172a;
      font-size: 20px;
    }

    .detail-list {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .detail-item {
      display: grid;
      grid-template-columns:
        minmax(145px, 190px)
        minmax(0, 1fr);
      gap: 14px;
      padding: 15px 20px;
      border-bottom:
        1px solid #e2e8f0;
    }

    .detail-item:last-child {
      border-bottom: none;
    }

    .detail-label {
      color: #64748b;
      font-size: 13px;
      font-weight: 700;
    }

    .detail-value {
      overflow-wrap: anywhere;
      color: #1e293b;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.6;
    }

    .reference-value {
      font-family: monospace;
      font-size: 13px;
    }

    .description-box {
      min-height: 100px;
      padding: 20px;
      color: #334155;
      font-size: 14px;
      line-height: 1.8;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    @media print {
      body {
        background-color: #ffffff;
      }

      .transaction-container {
        width: 100%;
        margin: 0;
      }

      .header-actions {
        display: none;
      }

      .page-header,
      .summary-card,
      .detail-card {
        box-shadow: none;
        border:
          1px solid #d1d5db;
      }
    }

    @media (
      max-width: 900px
    ) {
      .summary-grid {
        grid-template-columns:
          repeat(2, minmax(0, 1fr));
      }

      .content-grid {
        grid-template-columns: 1fr;
      }

      .detail-card.full-width {
        grid-column: auto;
      }
    }

    @media (
      max-width: 650px
    ) {
      .transaction-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;
      }

      .detail-item {
        grid-template-columns: 1fr;
        gap: 6px;
      }

      .page-title h1 {
        font-size: 23px;
      }
    }
  </style>
</head>

<body>

  <main class="transaction-container">

    <section class="page-header">

      <div class="page-title">

        <h1>
          <%= formatType(
            transaction.transaction_type
          ) %>
        </h1>

        <p>
          View the complete bank
          transaction information.
        </p>

      </div>

      <div class="header-actions">

        <a
          href="/bank-accounts/<%= transaction.bank_account_id %>"
          class="btn btn-secondary"
        >
          Back to Bank Account
        </a>

        <button
          type="button"
          class="btn btn-primary"
          onclick="window.print()"
        >
          Print
        </button>

      </div>

    </section>

    <section class="summary-grid">

      <article class="summary-card type">

        <span class="summary-label">
          Transaction Type
        </span>

        <strong class="summary-value">
          <%= formatType(
            transaction.transaction_type
          ) %>
        </strong>

      </article>

      <article
        class="
          summary-card
          <%= isCredit
            ? 'amount-credit'
            : 'amount-debit' %>
        "
      >

        <span class="summary-label">
          Amount
        </span>

        <strong
          class="
            summary-value
            <%= isCredit
              ? 'credit-value'
              : 'debit-value' %>
          "
        >
          <%= amountSign %>
          <%= money(
            transaction.amount,
            transaction.currency_code
          ) %>
        </strong>

      </article>

      <article class="summary-card status">

        <span class="summary-label">
          Status
        </span>

        <strong class="summary-value">

          <span
            class="
              status-badge
              status-<%= transaction.status || 'pending' %>
            "
          >
            <%= formatStatus(
              transaction.status
            ) %>
          </span>

        </strong>

      </article>

      <article class="summary-card bank">

        <span class="summary-label">
          Bank
        </span>

        <strong class="summary-value">
          <%= transaction.bank_name || "-" %>
        </strong>

      </article>

    </section>

    <section class="content-grid">

      <article class="detail-card">

        <div class="card-header">

          <h2>
            Transaction Information
          </h2>

        </div>

        <ul class="detail-list">

          <li class="detail-item">

            <span class="detail-label">
              Transaction ID
            </span>

            <span
              class="
                detail-value
                reference-value
              "
            >
              #<%= transaction.id || "-" %>
            </span>

          </li>

          <li class="detail-item">

            <span class="detail-label">
              Transaction Date
            </span>

            <span class="detail-value">
              <%= transaction.transaction_date || "-" %>
            </span>

          </li>

          <li class="detail-item">

            <span class="detail-label">
              Transaction Type
            </span>

            <span class="detail-value">
              <%= formatType(
                transaction.transaction_type
              ) %>
            </span>

          </li>

          <li class="detail-item">

            <span class="detail-label">
              Direction
            </span>

            <span class="detail-value">

              <span
                class="
                  direction-badge
                  <%= isCredit
                    ? 'direction-credit'
                    : 'direction-debit' %>
                "
              >
                <%= directionName %>
              </span>

            </span>

          </li>

          <li class="detail-item">

            <span class="detail-label">
              Amount
            </span>

            <span
              class="
                detail-value
                <%= isCredit
                  ? 'credit-value'
                  : 'debit-value' %>
              "
            >
              <%= amountSign %>
              <%= money(
                transaction.amount,
                transaction.currency_code
              ) %>
            </span>

          </li>

          <li class="detail-item">

            <span class="detail-label">
              Status
            </span>

            <span class="detail-value">

              <span
                class="
                  status-badge
                  status-<%= transaction.status || 'pending' %>
                "
              >
                <%= formatStatus(
                  transaction.status
                ) %>
              </span>

            </span>

          </li>

          <li class="detail-item">

            <span class="detail-label">
              Reference Number
            </span>

            <span
              class="
                detail-value
                reference-value
              "
            >
              <%= transaction.reference_number || "-" %>
            </span>

          </li>

          <li class="detail-item">

            <span class="detail-label">
              Created At
            </span>

            <span class="detail-value">
              <%= transaction.created_at || "-" %>
            </span>

          </li>

          <li class="detail-item">

            <span class="detail-label">
              Updated At
            </span>

            <span class="detail-value">
              <%= transaction.updated_at || "-" %>
            </span>

          </li>

        </ul>

      </article>

      <article class="detail-card">

        <div class="card-header">

          <h2>
            Bank Account Information
          </h2>

        </div>

        <ul class="detail-list">

          <li class="detail-item">

            <span class="detail-label">
              Bank Name
            </span>

            <span class="detail-value">
              <%= transaction.bank_name || "-" %>
            </span>

          </li>

          <li class="detail-item">

            <span class="detail-label">
              Account Name
            </span>

            <span class="detail-value">
              <%= transaction.account_name || "-" %>
            </span>

          </li>

          <li class="detail-item">

            <span class="detail-label">
              Account Number
            </span>

            <span
              class="
                detail-value
                reference-value
              "
            >
              <%= transaction.account_number || "-" %>
            </span>

          </li>

          <li class="detail-item">

            <span class="detail-label">
              Currency
            </span>

            <span class="detail-value">
              <%= transaction.currency_code || "AFN" %>
            </span>

          </li>

        </ul>

      </article>

      <article class="detail-card full-width">

        <div class="card-header">

          <h2>
            Transaction Description
          </h2>

        </div>

        <div class="description-box">
          <%= transaction.description ||
              "No description was provided." %>
        </div>

      </article>

    </section>

  </main>

</body>

</html>