<style type="text/css">
.txn-history {
  text-align: left;
}
.txn-list {
  background-color: #151e27;
  padding: 12px 10px; 
  color: #777;
  font-size: 14px;
  margin: 7px 0;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12)!important;
}
.transaction-amount {
  float: right;
  color: #fff;
}
.transaction-number {
 float: right;
}
.users-list-name {
  width: 5em; /* the element needs a fixed width (in px, em, %, etc) */
  overflow: hidden; /* make sure it hides the content that overflows */
  white-space: nowrap; /* don't break the line */
  text-overflow: ellipsis; /* give the beautiful '...' effect */
}
</style>
  <section class="content mt-4">
    <div class="container-fluid">
      <div class="card" style="border-radius: 10px; background-color: #1d2532;">
      <nav>
          <div class="nav nav-tabs transaction nav-fill" id="myTab" role="tablist">
              <a class="nav-item nav-link active" href="#pending" data-toggle="tab" role="tab" aria-controls="nav-home" aria-selected="true">
                Pending
              </a>
              <a class="nav-item nav-link" href="#complete" data-toggle="tab" role="tab" aria-controls="nav-profile" aria-selected="false">
                Complete
              </a>
          </div>
      </nav>

      <div class="tab-content">
        <div role="tablist" class="active tab-pane" id="pending">
          <div class="card-body pt-2">
            <div style="display: flex; justify-content: space-between;">
                <span>
                    <legend>Unpaid Accounts </legend> 
                </span>
                <span>
                    <a href="view_all_order.php?<?php echo generate_string($permitted_chars, 100); ?>&&page=index&&status=0" class="withanimation" style="color: #ffd700;">View all</a>
                </span>
            </div>
            <div class="txn-history pt-2">
              <?php 
                $pendingOrder = "SELECT * FROM tbl_user_checkout WHERE order_status = '0' LIMIT 5";
                $result_pendingOrder = $conn->query($pendingOrder);
                  if ($result_pendingOrder->num_rows > 0) {
                    while($rowPending = mysqli_fetch_array($result_pendingOrder)) {
                    $ordernumber = $rowPending['order_number']; 

                      $count_order_details = "SELECT * FROM tbl_user_checkout_details WHERE order_number = '$ordernumber'";
                      $result_order_details = $conn->query($count_order_details);

                      $count_order = "SELECT * FROM tbl_user_checkout_details LEFT JOIN tbl_product ON tbl_user_checkout_details.product_id = tbl_product.product_id WHERE tbl_user_checkout_details.order_number = '$ordernumber' LIMIT 1";
                      $result_order = $conn->query($count_order);

              ?>
              <a href="order_details_dashboard.php?<?php echo generate_string($permitted_chars, 100); ?>&&ordernumber=<?php echo $rowPending['order_number']; ?>&&page=index" class="withanimation">
                <p class="txn-list">
                    Order Number: <b style="color: #ffd700"><?php echo $rowPending['order_number']; ?></b> <span class="transaction-amount"><span class="text-muted">Order Count: </span><?php echo $result_order_details->num_rows ?></span><br>
                    Order Details
                    <table class="table table-sm p-0" style="font-weight: bold; font-size: 14px; margin-bottom: 0px;">
                      <tr>
                        <th class="text-white" style="border-top: 0!important;">Qty</th>
                        <th class="text-white" style="border-top: 0!important;">Item</th>
                      </tr>
                      <?php  while($row_order = mysqli_fetch_array($result_order)) { ?>
                        <tr>
                          <td class="text-white" style="border-top: 0!important;"><?php echo $row_order['quantity']; ?>x</td>
                          <td class="text-white users-list-name" style="border-top: 0!important;"><?php echo $row_order['product_name']; ?></td>
                        </tr>
                      <?php } ?>
                    </table>
                </p>
              </a>
              <?php } }else{ ?>
                <p class="txn-list" style="color: #fff;">No Completed Transactions</p>
              <?php } ?>
            </div>
          </div>
        </div>
        <div role="tablist" class="tab-pane" id="complete">
          <div class="card-body pt-2">
            <div style="display: flex; justify-content: space-between;">
                <span>
                    <legend> Completed Transactions </legend> 
                </span>
                <span>
                    <a href="view_all_order.php?<?php echo generate_string($permitted_chars, 100); ?>&&page=index&&status=4" class="withanimation" style="color: #ffd700;">View all</a>
                </span>
            </div>
            <div class="txn-history pt-2">
              <?php 
                $pendingOrder = "SELECT * FROM tbl_user_checkout WHERE order_status = '4' LIMIT 5";
                $result_pendingOrder = $conn->query($pendingOrder);
                  if ($result_pendingOrder->num_rows > 0) {
                    while($rowPending = mysqli_fetch_array($result_pendingOrder)) {
                    $ordernumber = $rowPending['order_number']; 

                      $count_order_details = "SELECT * FROM tbl_user_checkout_details WHERE order_number = '$ordernumber'";
                      $result_order_details = $conn->query($count_order_details);
              ?>
              <a href="order_details_dashboard.php?<?php echo generate_string($permitted_chars, 100); ?>&&ordernumber=<?php echo $rowPending['order_number']; ?>&&page=index" class="withanimation">
                <p class="txn-list">
                    Order Number: <b style="color: #ffd700"><?php echo $rowPending['order_number']; ?></b> <span class="transaction-amount"><span class="text-muted">Order Count: </span><?php echo $result_order_details->num_rows ?></span><br>
                </p>
              </a>
              <?php } }else{ ?>
                <p class="txn-list" style="color: #fff;">No Complete Order</p>
              <?php } ?>
            </div>
          </div>
        </div>
      </div> 

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