<%- include('includes/header',  {username: admin[0].name,email: admin[0].email } ) %>
    <link rel="stylesheet" href="/css/paymentdetails.css">
    <div class="body-wrapper">
        <div class="container-fluid">
            <div class="card bg-info-subtle shadow-none position-relative overflow-hidden mb-4">
                <div class="card-body px-4 py-3">
                    <div class="row align-items-center">
                        <div class="col-md-8 col-sm-7">
                            <h4 class="fw-semibold mb-1">Payment Details</h4>

                        </div>

                        <div class="col-md-4 col-sm-5 text-md-end text-sm-start mt-3 mt-md-0">
                            <a href="javascript:void(0)" onclick="goBack()" class="btn btn-primary mb-3">
                                <i class="fas fa-arrow-left"></i> Back
                            </a>
                        </div>
                    </div>
                </div>
            </div>

        <div class="row">

    <!-- Left Column: Payment Details -->
  <div class="col-lg-5 mb-4 mb-lg-0">
  <div class="card">
    <div class="card-body p-4">
      <h5 class="card-title mb-4">Payment Details</h5>

      <ul class="list-group list-group-flush payment-details-list">

        <!-- Date -->
        <li class="list-group-item">
          <span class="item-label">Date</span>
          <span class="item-value">
            <%= payment.createdAt ? moment(payment.createdAt).format("DD MMM YYYY, hh:mm A") : "-" %>
          </span>
        </li>

        <!-- Transaction Number -->
        <li class="list-group-item">
          <span class="item-label">Transaction ID</span>
          <span class="item-value">
            <%= payment.transactionId 
              ? (payment.transactionId.length > 6 
                  ? `${payment.transactionId.slice(0, 6)}...${payment.transactionId.slice(-4)}` 
                  : payment.transactionId) 
              : "-" %>
          </span>
        </li>

        <!-- Username -->
        <li class="list-group-item">
          <span class="item-label">Username</span>
               <span class="item-value">
            <%= user && user.firstName ? user.firstName : "Unknown" %>
            </span>
         
        </li>

        <!-- Method -->
        <li class="list-group-item">
          <span class="item-label">Method</span>
          <span class="item-value"><%= payment.gateway || "-" %></span>
        </li>

        <!-- Amount -->
        <li class="list-group-item">
          <span class="item-label">Amount</span>
          <span class="item-value">
           <%= currencySymbol %> <%= payment.amount.toFixed(2) %> <%=currencyCode %> 
          </span>
        </li>

        <!-- Charge -->
        <li class="list-group-item">
          <span class="item-label">Charge</span>
          <span class="item-value">
            <%= currencySymbol %>  <%= payment.totals?.totalCharge?.toFixed(2) ?? 0 %> <%=currencyCode %> 
          </span>
        </li>

        <!-- Total Amount -->
        <li class="list-group-item">
          <span class="item-label">Total Amount</span>
          <span class="item-value fw-bold">
            <%= currencySymbol %> <%= payment.totals?.totalAmount?.toFixed(2) ?? payment.amount %> <%=currencyCode %> 
          </span>
        </li>

        <!-- Status -->
        <li class="list-group-item">
          <div class="item-label">Status</div>
          <div class="text-end">
            <% 
              const status = payment.status || "";
              let badgeClass = "bg-secondary";
              let badgeText = "-";

              if(status === "open") { badgeClass = "bg-secondary"; badgeText = "Open"; }
              else if(status === "success") { badgeClass = "bg-success"; badgeText = "Success"; }
              else if(status === "failed") { badgeClass = "bg-danger"; badgeText = "Failed"; }
            %>

            <span class="badge <%= badgeClass %>"><%= badgeText %></span>

            <div class="text-muted small mt-1">
              <%= payment.createdAt ? moment(payment.createdAt).fromNow() : "-" %>
            </div>
          </div>
        </li>

      </ul>
    </div>
  </div>
</div>

    <!-- Right Column: User Information -->
    <div class="col-lg-7">
        <div class="card user-info-card">
            <div class="card-body p-4">
                <h5 class="card-title mb-4">User Information</h5>

                <div class="info-block">
                    <div class="info-label">First Name</div>
                    <div class="info-value"><%= user && user.firstName ? user.firstName : "-" %></div>
                </div>

                <div class="info-block">
                    <div class="info-label">Last Name</div>
                    <div class="info-value"><%= user && user.lastName ? user.lastName : "-" %></div>
                </div>

                <div class="info-block">
                    <div class="info-label">Email</div>
                    <div class="info-value"><%= user && user.email ? user.email : "-" %></div>
                </div>

                <!-- <div class="info-block">
                    <div class="info-label">Bank Name</div>
                    <div class="info-value"><%= payment.bankName || "Deleted User" %></div>
                </div>

                <div class="info-block">
                    <div class="info-label">Account Number</div>
                    <div class="info-value"><%= payment.accountNo || "-" %></div>
                </div> -->

            </div>
        </div>
    </div>

</div>


        </div>
    </div>
    </div>

    <%- include('includes/allscripts') %>
        <script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
    <script src="/js/view/pageback.js"></script>