<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Payment Details</title>
    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    />
  </head>
  <body>
    <div class="container mt-5">
      <div class="row">
        <div class="col-md-6 offset-md-3">
          <div class="card">
            <div class="card-header">Payment Details</div>
            <div class="card-body">
              <ul class="list-group">
                <li class="list-group-item">
                  <strong>Email:</strong> <%= paymentDetails.email %>
                </li>
                <li class="list-group-item">
                  <strong>Status:</strong> <%= paymentDetails.status %>
                </li>
                <li class="list-group-item">
                  <strong>Username:</strong> <%= paymentDetails.username %>
                </li>
                <li class="list-group-item">
                  <strong>Project Type:</strong> <%= paymentDetails.PType %>
                </li>
                <li class="list-group-item">
                  <strong>Amount:</strong> <%= paymentDetails.amount %>
                </li>
                <li class="list-group-item">
                  <strong>Time:</strong> <%= paymentDetails.time %>
                </li>
                <li class="list-group-item">
                  <strong>Date:</strong> <%= paymentDetails.date %>
                </li>
                <li class="list-group-item">
                  <strong>Proof:</strong>
                  <img
                    src="<%= paymentDetails.proof %>"
                    class="img-fluid"
                    alt="Proof Image"
                  />
                </li>
                <li class="list-group-item">
                  <strong>Proof Date:</strong> <%= paymentDetails.proofdate %>
                </li>
                <li class="list-group-item">
                  <strong>Proof Time:</strong> <%= paymentDetails.prooftime %>
                </li>
              </ul>
              <!-- Buttons -->
              <div class="mt-3">
                <button
                  class="btn btn-success mr-2"
                  onclick="location.href='/approve/<%= paymentDetails.trId %>'"
                >
                  Approve
                </button>
                <button
                  class="btn btn-danger"
                  onclick="location.href='/reject/<%= paymentDetails.trId %>'"
                >
                  Reject
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </body>
</html>
