<%
  const cheque =
    typeof chequePayment !== "undefined" &&
    chequePayment
      ? chequePayment
      : {};

  const userCanManage =
    typeof canManage !== "undefined" &&
    canManage === true;

  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 chequeStatus =
    cheque.cheque_status ||
    "issued";

  const transactionStatus =
    cheque.transaction_status ||
    "pending";
%>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >

  <title>
    Cheque 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;
    }

    .cheque-container {
      width: min(1250px, 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.5;
    }

    .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;
    }

    .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 #7c3aed;
      border-radius: 10px;
      box-shadow:
        0 4px 15px
        rgba(0, 0, 0, 0.06);
    }

    .summary-card.amount {
      border-left-color: #dc2626;
    }

    .summary-card.cheque-status {
      border-left-color: #d97706;
    }

    .summary-card.transaction-status {
      border-left-color: #2563eb;
    }

    .summary-card.bank {
      border-left-color: #15803d;
    }

    .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;
    }

    .status-badge {
      display: inline-block;
      padding: 7px 11px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }

    .status-issued,
    .status-received,
    .status-pending {
      background-color: #fef3c7;
      color: #92400e;
    }

    .status-cleared,
    .status-posted,
    .status-active {
      background-color: #dcfce7;
      color: #166534;
    }

    .status-cancelled,
    .status-returned {
      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;
    }

    .amount-value {
      color: #dc2626;
      font-size: 18px;
      font-weight: 800;
    }

    .invoice-number {
      display: inline-block;
      padding: 6px 10px;
      background-color: #f1f5f9;
      border-radius: 6px;
      color: #334155;
      font-family: monospace;
      font-size: 13px;
      font-weight: 800;
    }

    .invoice-button {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      min-height: 36px;
      padding: 8px 13px;
      background-color: #2563eb;
      border-radius: 6px;
      color: #ffffff;
      text-decoration: none;
      font-size: 13px;
      font-weight: 700;
    }

    .invoice-button:hover {
      background-color: #1d4ed8;
    }

    .no-file {
      color: #94a3b8;
      font-weight: 600;
    }

    .purpose-box,
    .notes-box {
      padding: 20px;
      color: #334155;
      font-size: 14px;
      line-height: 1.8;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    .status-timeline {
      display: grid;
      grid-template-columns:
        repeat(4, minmax(0, 1fr));
      gap: 12px;
      padding: 20px;
    }

    .timeline-step {
      padding: 15px;
      background-color: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      text-align: center;
    }

    .timeline-step.active {
      background-color: #eff6ff;
      border-color: #2563eb;
    }

    .timeline-step.completed {
      background-color: #f0fdf4;
      border-color: #16a34a;
    }

    .timeline-number {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 30px;
      height: 30px;
      margin-bottom: 8px;
      background-color: #cbd5e1;
      border-radius: 50%;
      color: #334155;
      font-size: 13px;
      font-weight: 800;
    }

    .timeline-step.active
    .timeline-number {
      background-color: #2563eb;
      color: #ffffff;
    }

    .timeline-step.completed
    .timeline-number {
      background-color: #16a34a;
      color: #ffffff;
    }

    .timeline-title {
      display: block;
      color: #334155;
      font-size: 13px;
      font-weight: 800;
    }

    .timeline-date {
      display: block;
      margin-top: 6px;
      color: #64748b;
      font-size: 12px;
    }

    @media print {
      body {
        background-color: #ffffff;
      }

      .cheque-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: 950px
    ) {
      .summary-grid {
        grid-template-columns:
          repeat(2, minmax(0, 1fr));
      }

      .content-grid {
        grid-template-columns: 1fr;
      }

      .detail-card.full-width {
        grid-column: auto;
      }

      .status-timeline {
        grid-template-columns:
          repeat(2, minmax(0, 1fr));
      }
    }

    @media (
      max-width: 650px
    ) {
      .cheque-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;
      }

      .status-timeline {
        grid-template-columns: 1fr;
      }

      .detail-item {
        grid-template-columns: 1fr;
        gap: 6px;
      }

      .page-title h1 {
        font-size: 23px;
      }
    }
  </style>
</head>

<body>

  <main class="cheque-container">

    <section class="page-header">

      <div class="page-title">

        <h1>
          Cheque:
          <%= cheque.cheque_number || "-" %>
        </h1>

        <p>
          Complete cheque payment,
          receiver and invoice information.
        </p>

      </div>

      <div class="header-actions">

        <a
          href="/bank-accounts/<%= cheque.bank_account_id %>"
          class="btn btn-secondary"
        >
          Back to Bank Account
        </a>

        <a
          href="<%= cheque.invoice_file || '#' %>"
          target="_blank"
          rel="noopener noreferrer"
          class="btn btn-primary"
          style="<%= cheque.invoice_file
            ? ''
            : 'display:none;' %>"
        >
          Open Invoice
        </a>

        <button
          type="button"
          class="btn btn-purple"
          onclick="window.print()"
        >
          Print
        </button>

      </div>

    </section>

    <section class="summary-grid">

      <article class="summary-card amount">

        <span class="summary-label">
          Cheque Amount
        </span>

        <strong class="summary-value">
          <%= money(
            cheque.amount,
            cheque.currency_code
          ) %>
        </strong>

      </article>

      <article class="summary-card cheque-status">

        <span class="summary-label">
          Cheque Status
        </span>

        <strong class="summary-value">

          <span
            class="
              status-badge
              status-<%= chequeStatus %>
            "
          >
            <%= formatStatus(
              chequeStatus
            ) %>
          </span>

        </strong>

      </article>

      <article class="summary-card transaction-status">

        <span class="summary-label">
          Transaction Status
        </span>

        <strong class="summary-value">

          <span
            class="
              status-badge
              status-<%= transactionStatus %>
            "
          >
            <%= formatStatus(
              transactionStatus
            ) %>
          </span>

        </strong>

      </article>

      <article class="summary-card bank">

        <span class="summary-label">
          Bank Account
        </span>

        <strong class="summary-value">
          <%= cheque.bank_name || "-" %>
        </strong>

      </article>

    </section>

    <section class="content-grid">

      <article class="detail-card">

        <div class="card-header">

          <h2>
            Cheque Information
          </h2>

        </div>

        <ul class="detail-list">

          <li class="detail-item">

            <span class="detail-label">
              Cheque Number
            </span>

            <span
              class="
                detail-value
                reference-value
              "
            >
              <%= cheque.cheque_number || "-" %>
            </span>

          </li>

          <li class="detail-item">

            <span class="detail-label">
              Cheque Date
            </span>

            <span class="detail-value">
              <%= cheque.payment_date || "-" %>
            </span>

          </li>

          <li class="detail-item">

            <span class="detail-label">
              Payee Name
            </span>

            <span class="detail-value">
              <%= cheque.payee_name || "-" %>
            </span>

          </li>

          <li class="detail-item">

            <span class="detail-label">
              Amount
            </span>

            <span
              class="
                detail-value
                amount-value
              "
            >
              <%= money(
                cheque.amount,
                cheque.currency_code
              ) %>
            </span>

          </li>

          <li class="detail-item">

            <span class="detail-label">
              Cheque Status
            </span>

            <span class="detail-value">

              <span
                class="
                  status-badge
                  status-<%= chequeStatus %>
                "
              >
                <%= formatStatus(
                  chequeStatus
                ) %>
              </span>

            </span>

          </li>

          <li class="detail-item">

            <span class="detail-label">
              Created At
            </span>

            <span class="detail-value">
              <%= cheque.created_at || "-" %>
            </span>

          </li>

          <li class="detail-item">

            <span class="detail-label">
              Last Updated
            </span>

            <span class="detail-value">
              <%= cheque.updated_at || "-" %>
            </span>

          </li>

        </ul>

      </article>

      <article class="detail-card">

        <div class="card-header">

          <h2>
            Bank Information
          </h2>

        </div>

        <ul class="detail-list">

          <li class="detail-item">

            <span class="detail-label">
              Bank Name
            </span>

            <span class="detail-value">
              <%= cheque.bank_name || "-" %>
            </span>

          </li>

          <li class="detail-item">

            <span class="detail-label">
              Account Name
            </span>

            <span class="detail-value">
              <%= cheque.account_name || "-" %>
            </span>

          </li>

          <li class="detail-item">

            <span class="detail-label">
              Account Number
            </span>

            <span
              class="
                detail-value
                reference-value
              "
            >
              <%= cheque.account_number || "-" %>
            </span>

          </li>

          <li class="detail-item">

            <span class="detail-label">
              Currency
            </span>

            <span class="detail-value">
              <%= cheque.currency_code || "AFN" %>
            </span>

          </li>

          <li class="detail-item">

            <span class="detail-label">
              Transaction Date
            </span>

            <span class="detail-value">
              <%= cheque.transaction_date || "-" %>
            </span>

          </li>

          <li class="detail-item">

            <span class="detail-label">
              Transaction Status
            </span>

            <span class="detail-value">

              <span
                class="
                  status-badge
                  status-<%= transactionStatus %>
                "
              >
                <%= formatStatus(
                  transactionStatus
                ) %>
              </span>

            </span>

          </li>

          <li class="detail-item">

            <span class="detail-label">
              Transaction Reference
            </span>

            <span
              class="
                detail-value
                reference-value
              "
            >
              <%= cheque.reference_number || "-" %>
            </span>

          </li>

        </ul>

      </article>

      <article class="detail-card">

        <div class="card-header">

          <h2>
            Receiver Information
          </h2>

        </div>

        <ul class="detail-list">

          <li class="detail-item">

            <span class="detail-label">
              Received By
            </span>

            <span class="detail-value">
              <%= cheque.received_by_name || "Not received yet" %>
            </span>

          </li>

          <li class="detail-item">

            <span class="detail-label">
              Received Date
            </span>

            <span class="detail-value">
              <%= cheque.received_date || "-" %>
            </span>

          </li>

          <li class="detail-item">

            <span class="detail-label">
              Receiver Phone
            </span>

            <span class="detail-value">
              <%= cheque.receiver_phone || "-" %>
            </span>

          </li>

          <li class="detail-item">

            <span class="detail-label">
              Receiver ID Number
            </span>

            <span
              class="
                detail-value
                reference-value
              "
            >
              <%= cheque.receiver_id_number || "-" %>
            </span>

          </li>

          <li class="detail-item">

            <span class="detail-label">
              Cleared Date
            </span>

            <span class="detail-value">
              <%= cheque.cleared_date || "Not cleared yet" %>
            </span>

          </li>

        </ul>

      </article>

      <article class="detail-card">

        <div class="card-header">

          <h2>
            Invoice Information
          </h2>

        </div>

        <ul class="detail-list">

          <li class="detail-item">

            <span class="detail-label">
              Invoice Number
            </span>

            <span class="detail-value">

              <% if (
                cheque.invoice_number
              ) { %>

                <span class="invoice-number">
                  <%= cheque.invoice_number %>
                </span>

              <% } else { %>

                <span class="no-file">
                  No invoice number
                </span>

              <% } %>

            </span>

          </li>

          <li class="detail-item">

            <span class="detail-label">
              Invoice Date
            </span>

            <span class="detail-value">
              <%= cheque.invoice_date || "-" %>
            </span>

          </li>

          <li class="detail-item">

            <span class="detail-label">
              Invoice File
            </span>

            <span class="detail-value">

              <% if (
                cheque.invoice_file
              ) { %>

                <a
                  href="<%= cheque.invoice_file %>"
                  target="_blank"
                  rel="noopener noreferrer"
                  class="invoice-button"
                >
                  View Invoice
                </a>

              <% } else { %>

                <span class="no-file">
                  No invoice file uploaded
                </span>

              <% } %>

            </span>

          </li>

        </ul>

      </article>

      <article class="detail-card full-width">

        <div class="card-header">

          <h2>
            Cheque Progress
          </h2>

        </div>

        <div class="status-timeline">

          <div
            class="
              timeline-step
              completed
            "
          >

            <span class="timeline-number">
              1
            </span>

            <span class="timeline-title">
              Issued
            </span>

            <span class="timeline-date">
              <%= cheque.payment_date || "-" %>
            </span>

          </div>

          <div
            class="
              timeline-step
              <%= [
                "received",
                "cleared"
              ].includes(
                chequeStatus
              )
                ? "completed"
                : chequeStatus === "issued"
                  ? "active"
                  : "" %>
            "
          >

            <span class="timeline-number">
              2
            </span>

            <span class="timeline-title">
              Received
            </span>

            <span class="timeline-date">
              <%= cheque.received_date || "Pending" %>
            </span>

          </div>

          <div
            class="
              timeline-step
              <%= chequeStatus === "cleared"
                ? "completed"
                : [
                    "issued",
                    "received"
                  ].includes(
                    chequeStatus
                  )
                    ? "active"
                    : "" %>
            "
          >

            <span class="timeline-number">
              3
            </span>

            <span class="timeline-title">
              Cleared
            </span>

            <span class="timeline-date">
              <%= cheque.cleared_date || "Pending" %>
            </span>

          </div>

          <div
            class="
              timeline-step
              <%= [
                "cancelled",
                "returned"
              ].includes(
                chequeStatus
              )
                ? "active"
                : "" %>
            "
          >

            <span class="timeline-number">
              4
            </span>

            <span class="timeline-title">
              Cancelled / Returned
            </span>

            <span class="timeline-date">
              <%= [
                "cancelled",
                "returned"
              ].includes(
                chequeStatus
              )
                ? formatStatus(
                    chequeStatus
                  )
                : "Not applicable" %>
            </span>

          </div>

        </div>

      </article>

      <article class="detail-card full-width">

        <div class="card-header">

          <h2>
            Payment Purpose
          </h2>

        </div>

        <div class="purpose-box">
          <%= cheque.purpose || "-" %>
        </div>

      </article>

      <article class="detail-card full-width">

        <div class="card-header">

          <h2>
            Notes
          </h2>

        </div>

        <div class="notes-box">
          <%= cheque.notes || "No additional notes." %>
        </div>

      </article>

    </section>

  </main>

</body>

</html>