<!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>Institute Report-CORASS</title>
    <link rel="icon" href="../img2/kp.png" type="image/png" />

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

    <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">
  </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 mb-3">
          <div class="row">
              <div class="">
                <div class="white_card_header d-flex">
                      <h3 class="m-0 text-dark">Institute Report</h3>
                  <div class="mt-1 mx-3 d-flex">
                      <a href=""><p>Dashboard</p></a>
                      <i class="fa-solid fa-greater-than  mt-1 mx-1"></i>
                  </div>
                  <div class="mt-1">
                      <p>Institute Report</p>
                  </div>
                    </div>
              </div>
            </div>
        </div>
        <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">
                <div class="white_card_header">
                    <select name="" id="" class="mb-4" style="border: none;">
                        <option value="">Filter</option>
                    </select>
                    
                        <form method="get" class="row">
                          <div class="row">
                              <div class="col-lg-3">
                                <label for="" class="mb-1">Start Date:</label>
                                <input type="date" class="form-control mb-3" placeholder="StartDate to EndDate" name="startDate" id="startDate">
                            </div>
                            <div class="col-lg-3">
                              <label for="" class="mb-1">End Date:</label>
                              <input type="date" class="form-control mb-3" placeholder="StartDate to EndDate" name="endDate" id="endDate">
                            </div>
                            <div class="col-lg-3">
                                <label for="" class="mb-1">Payment Type</label>
                                <select name="projectTypeId" id="projectTypeId" class="form-control mb-3" >
                                  <option value="">Select Payment Type</option>
                                  <% if(projectType && projectType.length > 0){
                                    for(var pro of projectType){
                                  %>
                                  <option value="<%= pro.id%>"><%= pro.name%></option>
                                  <%}}%>
                              </select>
                            </div>
                            
                        <div class="col-lg-3 mt-3">
                            <button type="submit" class="btn btn-success text-center form-control">Filter Record</button>
                        </div>
                
                      </div>
                        </form>
          </div>
        </div>
      </div>
      </div>

      
      </div>
      <div class="container"> 
        
        <div class="row">
          <div class="col-lg-12">
              <div class="single_element">
                  <div class="quick_activity">
                      <div class="row gy-2">     
                        <div class="col-lg-4">
                            <div class="single_quick_activity row">
                                <div class="count_content d-flex my-2 col-lg-12 py-3">
                                  <div>
                                    <h6><%= (totalTransactionSum).toLocaleString('en-US', {
                                      style: 'currency',
                                      currency: 'NGN',
                                    })%></h6>
                                    <p>Transactions Value</p>
                                  </div>
                                  <div style="display: inline-block; position: absolute; right: 23%;">
                                    <div style="position:absolute;   justify-content: center;display: flex;height: 50px;width: 50px;border-radius: 30px;background-color:#E0F9FD;" class="bg-col mx-3 ">
                                      <img src="img/atm.jpg"  class="mt-2" style="justify-content: center;left: 50%;top: 50%;"  alt="" height="30px" width="30px">
                                    </div>
                                  </div>
                                </div>
                                <div class="count_content d-flex my-2 col-lg-12 py-3">
                                    <div>
                                      <h6><%= totalTransactionCount%></h6>
                                      <p>Transactions Count</p>
                                    </div>
                                    <div style="display: inline-block; position: absolute; right: 23%;">
                                      <div style="position:absolute;   justify-content: center;display: flex;height: 50px;width: 50px;border-radius: 30px;background-color:rgba(194, 137, 116, 0.493)" class="bg-col mx-3 ">
                                        <img src="img/wave.png"  class="mt-2" style="justify-content: center;left: 50%;top: 50%;"  alt="" height="30px" width="30px">
                                      </div>
                                    </div>
                                  </div>
                                  <div class="count_content d-flex my-2 col-lg-12 py-3">
                                    <div>
                                      <h6><%= totalTransactionCount%></h6>
                                      <p>Total Users That Paid</p>
                                    </div>
                                    <div style="display: inline-block; position: absolute; right: 23%;">
                                      <div style="position:absolute;   justify-content: center;display: flex;height: 50px;width: 50px;border-radius: 30px;background-color:#E0F9FD;" class="bg-col mx-3 ">
                                        <img src="img/group-people.png"  class="mt-2" style="justify-content: center;left: 50%;top: 50%;"  alt="" height="30px" width="30px">
                                      </div>
                                    </div>
                                  </div>
                            </div>
                           </div>
                           <div class="col-lg-4">
                            <div class="single_quick_activity row">
                                <div class="count_content d-flex my-2 col-lg-12 py-3">
                                  <div>
                                    <h6><%= (instituteTransaction[0]?.transactionSum).toLocaleString('en-US', {
                                      style: 'currency',
                                      currency: 'NGN',
                                    }) %></h6>
                                    <p><%=instituteTransaction[0]?.transactionCount %>/<%= instituteTransaction[0]?.code%></p>
                                  </div>
                                  <div style="display: inline-block; position: absolute; right: 23%;">
                                    <div style="position:absolute;   justify-content: center;display: flex;height: 50px;width: 50px;border-radius: 30px;background-color:#E0F9FD;" class="bg-col mx-3 ">
                                      <img src="img/wave.png"  class="mt-2" style="justify-content: center;left: 50%;top: 50%;"  alt="" height="30px" width="30px">
                                    </div>
                                  </div>
                                </div>

                                <div class="count_content d-flex my-2 col-lg-12 py-3">
                                    <div>
                                      
                                    <h6><%= (instituteTransaction[1]?.transactionSum).toLocaleString('en-US', {
                                      style: 'currency',
                                      currency: 'NGN',
                                    }) %></h6>
                                    <p><%=instituteTransaction[1]?.transactionCount %>/<%= instituteTransaction[1]?.code%></p>
                                    </div>
                                    <div style="display: inline-block; position: absolute; right: 23%;">
                                      <div style="position:absolute;   justify-content: center;display: flex;height: 50px;width: 50px;border-radius: 30px;background-color:#E0F9FD;" class="bg-col mx-3 ">
                                        <img src="img/wave.png"  class="mt-2" style="justify-content: center;left: 50%;top: 50%;"  alt="" height="30px" width="30px">
                                      </div>
                                    </div>
                                  </div>
                                  <div class="count_content d-flex my-2 col-lg-12 py-3">
                                    <div>
                                      
                                    <h6><%= (instituteTransaction[2]?.transactionSum).toLocaleString('en-US', {
                                      style: 'currency',
                                      currency: 'NGN',
                                    }) %></h6>
                                    <p><%=instituteTransaction[2]?.transactionCount %>/<%= instituteTransaction[2]?.code%></p>
                                    </div>
                                    <div style="display: inline-block; position: absolute; right: 23%;">
                                      <div style="position:absolute;   justify-content: center;display: flex;height: 50px;width: 50px;border-radius: 30px;background-color:#E0F9FD;" class="bg-col mx-3 ">
                                        <img src="img/wave.png"  class="mt-2" style="justify-content: center;left: 50%;top: 50%;"  alt="" height="30px" width="30px">
                                      </div>
                                    </div>
                                  </div>
                            </div>
                           </div>

                           <div class="col-lg-4">
                            <div class="single_quick_activity row">
                                <div class="count_content d-flex my-2 col-lg-12 py-3">
                                  <div>
                                    
                                    <h6><%= (instituteTransaction[3]?.transactionSum).toLocaleString('en-US', {
                                      style: 'currency',
                                      currency: 'NGN',
                                    }) %></h6>
                                    <p><%=instituteTransaction[3]?.transactionCount %>/<%= instituteTransaction[3]?.code%></p>
                                  </div>
                                  <div style="display: inline-block; position: absolute; right: 23%;">
                                    <div style="position:absolute;   justify-content: center;display: flex;height: 50px;width: 50px;border-radius: 30px;background-color:#E0F9FD;" class="bg-col mx-3 ">
                                      <img src="img/atm.jpg"  class="mt-2" style="justify-content: center;left: 50%;top: 50%;"  alt="" height="30px" width="30px">
                                    </div>
                                  </div>
                                </div>
                                <div class="count_content d-flex my-2 col-lg-12 py-3">
                                    <div>
                                      
                                    <h6><%= (instituteTransaction[4]?.transactionSum).toLocaleString('en-US', {
                                      style: 'currency',
                                      currency: 'NGN',
                                    }) %></h6>
                                    <p><%=instituteTransaction[4]?.transactionCount %>/<%= instituteTransaction[4].code%></p>
                                    </div>
                                    <div style="display: inline-block; position: absolute; right: 23%;">
                                      <div style="position:absolute;   justify-content: center;display: flex;height: 50px;width: 50px;border-radius: 30px;background-color:rgba(194, 137, 116, 0.493)" class="bg-col mx-3 ">
                                        <img src="img/wave.png"  class="mt-2" style="justify-content: center;left: 50%;top: 50%;"  alt="" height="30px" width="30px">
                                      </div>
                                    </div>
                                  </div>
                            </div>
                           </div>
                            
        
                             
  
                      </div>
                  </div>
              </div>
          </div>
      </div>
    </div>     
    <!-- <h6 class="mt-2 text-dark">Institute Statistics [Active / Registered]</h6>
    <div class="container"> 
        
      <div class="row">
        <div class="col-lg-12">
            <div class="single_element">
                <div class="quick_activity">
                    <div class="row gy-2">
                           <div class="col-lg-3">
                            <div class="single_quick_activity">
                                <div class="count_content d-flex my-2">
                                  <div>
                                    <h6>IOT</h6>
                                    <p><span class="numer">32</span>/ <span class="den">98</span></p>
                                    <p class="result"></p>
                                  </div>
                                  <div style="display: inline-block; position: absolute; right: 23%;">
                                    <div style="position:absolute;   justify-content: center;display: flex;height: 50px;width: 50px;border-radius: 30px;background-color:#E0F9FD;" class="bg-col mx-3 ">
                                      
                                    </div>
                                  </div>
                                </div>
                            </div>
                           </div>
                           <div class="col-lg-3">
                              <div class="single_quick_activity">
                                  <div class="count_content d-flex my-2">
                                    <div>
                                      <h6>IICT</h6>
                                      <p><span class="numer">0</span>/ <span class="den">1</span></p>
                                      <p class="result"></p>
                                    </div>
                                    <div style="display: inline-block; position: absolute; right: 23%;">
                                      <div style="position:absolute;   justify-content: center;display: flex;height: 50px;width: 50px;border-radius: 30px;background-color:#E0F9FD;" class="bg-col mx-3 ">
                                        
                                      </div>
                                    </div>
                                  </div>
                              </div>
                             </div>
                          
                             <div class="col-lg-3">
                              <div class="single_quick_activity">
                                  <div class="count_content d-flex my-2">
                                    <div>
                                      <h6>IFMS</h6>
                                      <p><span class="numer">0</span>/ <span class="den">2</span></p>
                                      <p class="result"></p>
                                    </div>
                                    <div style="display: inline-block; position: absolute; right: 23%;">
                                      <div style="position:absolute;   justify-content: center;display: flex;height: 50px;width: 50px;border-radius: 30px;background-color:#E0F9FD;" class="bg-col mx-3 ">
                                        
                                      </div>
                                    </div>
                                  </div>
                              </div>
                             </div>
                             <div class="col-lg-3">
                              <div class="single_quick_activity">
                                  <div class="count_content d-flex my-2">
                                    <div>
                                      <h6>IES</h6>
                                      <p><span class="numer">1</span>/ <span class="den">5</span></p>
                                      
                                    </div>
                                    <div style="display: inline-block; position: absolute; right: 23%;">
                                      <div style="position:absolute;   justify-content: center;display: flex;height: 50px;width: 50px;border-radius: 30px;background-color:#E0F9FD;" class="bg-col mx-3 ">
                                        
                                      </div>
                                    </div>
                                  </div>
                              </div>
                             </div>

                             <div class="col-lg-3">
                              <div class="single_quick_activity">
                                  <div class="count_content d-flex my-2">
                                    <div>
                                      <h6>IAS</h6>
                                      <p><span class="numer">2</span>/ <span class="den">2</span></p>
                                      
                                    </div>
                                    <div style="display: inline-block; position: absolute; right: 23%;">
                                      <div style="position:absolute;   justify-content: center;display: flex;height: 50px;width: 50px;border-radius: 30px;background-color:#E0F9FD;" class="bg-col mx-3 ">
                                        
                                      </div>
                                    </div>
                                  </div>
                              </div>
                             </div>
                           

                    </div>
                </div>
            </div>
        </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="../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="../js2/custom.js"></script>
  <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script>
  $(document).ready(function () {
  $('#table_id').DataTable();
});
</script>

</html>
