<!DOCTYPE html>
<html lang="zxx">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>Payment Requery-CORASS</title>
  <link rel="icon" href="../img2/kp.png" type="image/png" />

  <link rel="stylesheet" href="../css2/bootstrap1.min.css" />

  <link href="../js/toastr.css" rel="stylesheet">

  <link rel="stylesheet" href="../vendors2/themefy_icon/themify-icons.css" />

  <link rel="stylesheet" href="../vendors2/niceselect/css/nice-select.css" />

  <link rel="stylesheet" href="../vendors2/owl_carousel/css/owl.carousel.css" />

  <link rel="stylesheet" href="../vendors2/gijgo/gijgo.min.css" />

  <link rel="stylesheet" href="../vendors2/font_awesome/css/all.min.css" />
  <link rel="stylesheet" href="../vendors2/tagsinput/tagsinput.css" />

  <link rel="stylesheet" href="../vendors2/datepicker/date-picker.css" />

  <link rel="stylesheet" href="../vendors2/scroll/scrollable.css" />

  <link rel="stylesheet" href="../vendors2/datatable/css/jquery.dataTables.min.css" />
  <link rel="stylesheet" href="../vendors2/datatable/css/responsive.dataTables.min.css" />
  <link rel="stylesheet" href="../vendors2/datatable/css/buttons.dataTables.min.css" />

  <link rel="stylesheet" href="../vendors2/text_editor/summernote-bs4.css" />

  <link rel="stylesheet" href="../vendors2/morris/morris.css" />

  <link rel="stylesheet" href="../vendors2/material_icon/material-icons.css" />

  <link rel="stylesheet" href="../css2/metisMenu.css" />

  <link rel="stylesheet" href="../css2/style1.css" />
  <link rel="stylesheet" href="../css2/colors/default.css" id="colorSkinCSS" />

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body class="crm_body_bg">
  <%- include('./component/header.ejs')%>
    <!-- Main body starts here -->


    <div class="main_content_iner">

      <div class="container-fluid p-0">
        <div class="row">
          <div class="col-lg-12">
            <div class="white_card card_height_100 mb_30 QA_section p-3">
              <h6 class="text-dark">Payment Requery For Swapping</h6>
              <div class="row">
                <div class="col-lg-7">
                  <label for="">Matric Number</label>
                  <input type="text" class="form-control" placeholder="Enter Your Matric Number" id="matricNumber">
                  <div class="my-2">
                    <button id="fetchPackage" class="btn btn-success text-center form-control">Fetch Package</button>
                  </div>
                </div>

                <div class="col-lg-5">
                  <img src="img/pricing-Illustration.svg" class="img-fluid" alt="">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <% if(userSwap && userSwap.length> 0){ %>
        <div class="container-fluid p-0 my-4">
          <div class="row justify-content-center">
            <div class="col-lg-12">
              <div class="white_card card_height_100 mb_30">
                <div class="white_card_header">
                  <div class="box_header m-0">
                  </div>
                </div>
                <div class="col-lg-12">
                  <div class="white_card card_height_100 mb_30 QA_section p-3">
                    <h6 class="text-dark">Requery Result</h6>
                    <p>The payment requery result appears below. The result contains payment and system information
                      relating to if the payment was successful or failed.</p>
                  </div>
                </div>
                <div class="white_card_body">
                  <div class="QA_section">
                    <div class="white_box_tittle list_header">

                      <div class="box_right d-flex lms_block">
                        <div class="add_button ms-2">
                          <div class="d-flex mx-2 text-center">
                            <h4>Subcriptions</h4>
                            <!-- <button class="btn btn-success form-control"><i class="fa-sharp fa-solid fa-arrow-up-from-bracket mx-1"></i>Export Excel</button> -->

                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="QA_table mb_30 table-responsive">

                      <table class="table display table" id="table_id">
                        <thead>
                          <tr>
                            <th>PAYMENT REFRENCE</th>
                            <th>PAYMENT</th>
                            <th>ISSUED DATE</th>
                            <th>STATUS</th>
                            <th>Action</th>
                          </tr>
                        </thead>
                        <tbody>
                          <% if(userSwap && userSwap.length> 0){
                            id = 0
                            for(var userSwaps of userSwap){
                            %>
                            <tr>
                              <td>
                                <div class="container">
                                  <div class="row">
                                    <!-- <div class="col-lg-6"> <div class="profile_info">
                           <img src="img/client_img.png" alt="#" />
                         </div></div> -->
                                    <div class="col-lg-12">
                                      <%= userSwaps?.payment_id %>
                                    </div>
                                  </div>
                                </div>
                              </td>
                              <td>
                                <%= userSwaps?.package_name %> Access Fee
                              </td>
                              <td>
                                <%= new Date(userSwaps?.createdAt).toLocaleDateString('en-us', { weekday:"long",
                                  year:"numeric", month:"short", day:"numeric"}) %>
                              </td>
                              <%if(userSwaps?.active==1){%>
                                <td>ACTIVE</td>
                                <%}else{%>
                                  <td>IN ACTIVE</td>
                                  <%}%>
                                    <td><!-- Example single danger button -->
                                      <!-- Example single danger button -->
                                      <div class="btn-group">
                                        <button type="button" class="btn btn-danger dropdown-toggle"
                                          data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                          Change plan
                                        </button>
                                        <div class="dropdown-menu">
                                          <% for(var Packages of fecthPackage){ %>
                                            <a onclick="changePackage('<%= Packages?.id %>', '<%= userSwaps?.user_id %>', '<%= userSwaps?.id %>')"
                                              class="dropdown-item" href="#">
                                              <%= Packages?.name %>
                                            </a>
                                            <%}%>
                                        </div>
                                      </div>
                                    </td>

                            </tr>
                            <%}}%>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-12">
            </div>
          </div>
        </div>
        <%}%>
    </div>






    <footer class="footer footer-light  footer-static  footer1">
      <p class="clearfix mb-0">
        <span class="float-md-start d-block d-md-inline-block mt-25 text-center">COPYRIGHT &copy;
          <script>document.write(new Date().getFullYear())</script><a class="ms-25" href="">CORASS</a>,
          <span class="d-inline-block">All rights Reserved</span>
        </span>
        <span class="float-md-end d-block text-center">Centralized Online Research Assessment and Submission System<i
            data-feather="file-text"></i></span>
      </p>
    </footer>
    </section>

    <div id="back-top" style="display: none">
      <a title="Go to Top" href="#">
        <i class="ti-angle-up"></i>
      </a>
    </div>



    <script src="../js2/jquery1-3.4.1.min.js"></script>
    <script src="../js/toastr.min.js"></script>

    <script src="../js2/popper1.min.js"></script>

    <script src="../js2/bootstrap1.min.js"></script>

    <script src="../js2/metisMenu.js"></script>

    <script src="../vendors2/count_up/jquery.waypoints.min.js"></script>

    <script src="../vendors2/chartlist/Chart.min.js"></script>

    <script src="../vendors2/count_up/jquery.counterup.min.js"></script>

    <script src="../vendors2/niceselect/js/jquery.nice-select.min.js"></script>

    <script src="../vendors2/owl_carousel/js/owl.carousel.min.js"></script>

    <script src="../vendors2/datatable/js/jquery.dataTables.min.js"></script>
    <script src="../vendors2/datatable/js/dataTables.responsive.min.js"></script>
    <script src="../vendors2/datatable/js/dataTables.buttons.min.js"></script>
    <script src="../vendors2/datatable/js/buttons.flash.min.js"></script>
    <script src="../vendors2/datatable/js/jszip.min.js"></script>
    <script src="../vendors2/datatable/js/pdfmake.min.js"></script>
    <script src="../vendors2/datatable/js/vfs_fonts.js"></script>
    <script src="../vendors2/datatable/js/buttons.html5.min.js"></script>
    <script src="../vendors2/datatable/js/buttons.print.min.js"></script>
    <script src="../js2/chart.min.js"></script>

    <script src="../vendors2/progressbar/jquery.barfiller.js"></script>

    <script src="../vendors2/tagsinput/tagsinput.js"></script>

    <script src="../vendors2/text_editor/summernote-bs4.js"></script>
    <script src="../vendors2/am_chart/amcharts.js"></script>

    <script src="../vendors2/scroll/perfect-scrollbar.min.js"></script>
    <script src="../vendors2/scroll/scrollable-custom.js"></script>
    <script src="../vendors2/chart_am/core.js"></script>
    <script src="../vendors2/chart_am/charts.js"></script>
    <script src="../vendors2/chart_am/animated.js"></script>
    <script src="../vendors2/chart_am/kelly.js"></script>
    <script src="../vendors2/chart_am/chart-custom.js"></script>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
      integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
      crossorigin="anonymous"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="../js2/corass.js"></script>
</body>

</html>