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

<head>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    <link rel="stylesheet" href="css/style1.css" />
    <link rel="stylesheet" href="css/colors/default.css" id="colorSkinCSS">
    <link href="js/toastr.css" rel="stylesheet">
    <style>
        .title{
            color: #8D99C2;
            list-style-type: none;
            display: inline-block;
        }
        .sub{
            color: #068F3F;
            list-style-type: none;
            display: inline-block;
        }
    </style>
</head>

<body class="crm_body_bg">

    <%- include('../component/student-sidebar.ejs')%>
    <section class="main_content dashboard_part large_header_bg">

        <%- include('../component/student-profile-info.ejs')%>

        <div class="main_content_iner ">
            <div class="container-fluid p-0 ">
                
                <h2 class="text-center">Payment Plans</h2>
                <h6 class="text-black text-center">Each Payment Plan gives you access to a specific report types and its features. Choose the best plan to fit your needs.</h6>
                
                <div class="row justify-content-center">
                    <div class="col-lg-12">
                        <div class="single_element">
                            <div class="quick_activity">
                                <div class="row justify-content-center">
                                    <div class="col-lg-12">
                                        <div class="row justify-content-center">
                                            <% if(finalSubcription != undefined && finalSubcription.length > 0){%>
                                            <%
                                            for (var finalSubcriptions of finalSubcription){
                                            %>
                                           
                                            <%}%>
                                            <%}%>

                                            <% if(PaymentPlan != undefined && PaymentPlan.length > 0){%>

                                            <%
                                            for(var Plans of PaymentPlan){
                                            %>
                                            <div class="col-lg-4">
                                                <div class="single_quick_activity">
                                                    <div class="count_content">
                                                        <!-- <img src="/img/icon/card.png" class="img-fluid mx-auto d-block"/> -->
                                                        <h6 class="text-center"><%=Plans?.name%></h6>
                                                        <p class="text-center">One time access fee</p>
                                                        <p><sup>₦</sup><label class="display-4"><%=Plans?.amount%></label><sub><span class="text-black text-small">/access fee</span></sub></p>
                                                        <a href="#" class="btn btn-block d-block btn-success" data-bs-target="#payment" onclick="ThePaymentPlan('<%=Plans?.name%>','<%=Plans?.amount%>', '<%=Plans?.id%>')" data-bs-toggle="modal">Pay</a>
                                                    </div>
                                                </div>
                                           </div>
                                           <%}%>
                                           <%}%>   
                                        </div>
                                    </div>                            
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            <br/> <br/> <br/>
            <div class="card" style="height: 180px;">
                    <div class="container-fluid">
                        <div class="row justify-content-center">
                            <div class="col-lg-8">
                                <h5 class="mt-5">When you pay for a particular report type!</h5>
                                <p class="mb-2">
                                    You will get full access to unlock all the features for that report type.
                                </p> 
                                <div class="submit_button">
                                    <a href="/payment-history" class="btn_1">View payments</a>
                                   </div> 
                            </div>
                        </div>
                    </div>
                </div>
           </div>
           <br/><br/>
           <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                                <h3 class="mb-0">Faq</h3>
                        </div>
                        <div class="card-body">
                            <div class="accordion accordion_custom mb_50" id="accordion_ex">
                                <div class="card">
                                <div class="card-header" id="headingOne">
                                    <h2 class="mb-0">
                                        <a class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                            Does my subscription expired?
                                        </a>
                                    </h2>
                                </div>
                                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion_ex">
                                    <div class="card-body">
                                    <p>
                                        Once you pay to unlock a particular report type. You have life time access to its features as long as you remain a student of the institution
                                    </p>
                                    </div>
                                </div>
                                </div>
                                <div class="card">
                                <div class="card-header" id="headingTwo">
                                <h2 class="mb-0">
                                    <a href="#" class="btn collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                        How do i make payment?
                                    </a>
                                </h2>
                                </div>
                                <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion_ex">
                                    <div class="card-body">
                                        <p>
                                            You select a particular report type and click on "Make Payment" button. A popup dialog will display information guiding you on how to make payment.
                                        </p>
                                    </div>
                                </div>
                                </div>
                                <div class="card">
                                <div class="card-header" id="headingThree">
                                    <h2 class="mb-0">
                                        <a href="#" class="btn collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                            What type of payment card is supported?
                                        </a>
                                    </h2>
                                </div>
                                <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion_ex">
                                    <div class="card-body">
                                    <p>
                                        We support VISA, VERVE and MASTERCARD
                                    </p>
                                </div>
                                </div>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                </div>
           </div>
                    
                
        </div>
        </div>
        </div>

        <div class="footer_part">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <footer class="footer footer-light  footer-static">
                            <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>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="modal" id="payment" tabindex="" aria-hidden="">
        <div class="modal-dialog modal-dialog-centered modal-edit-user">
          <div class="modal-content">
            <div class="modal-header ">
                <div class="text-center mb-2">
                    <h4>Payment Details</h4>
                </div>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body pb-5 px-sm-5 pt-50">
              <div class="text-center mb-2">
                <p>Confirm the payment details before you proceed.</p>
                <h4 style="color: #068F3F;"><%=profile.firstname%> <%=profile.lastname%></h4>
              </div>
              <div class="modal-header "></div>
              <div class="modal-header ">
                <ul>
                    <li class="title">Matric Number:</li>
                    <li id="matricno" class="sub"><%=user.username%></li>
                </ul>
              </div>
              <div class="modal-header ">
                <ul>
                    <li class="title">Payment Type:</li>
                    <li id="paymentType" class="sub">Final Year Research Project</li>
                </ul>
              </div>
              <div class="modal-header ">
                <ul>
                    <li class="title">Access Fee:</li>
                    <li id="paymentAmount" class="sub">₦1200</li>
                </ul>
              </div>
              <div class="modal-header ">
                <ul>
                    <li class="title">Transaction Processing Fee:</li>
                    <li id="paymentFee" class="sub">₦300</li>
                </ul>
              </div>
              <div class="modal-header ">
                <ul>
                    <li class="title">Total Amount:</li>
                    <li id="paymentTotal" class="sub">₦1500</li>
                </ul>
              </div>
              <input hidden id="paymentHash" >
              <div class="text-center mt-3">
                <p>Accepted Card Types</p>
              </div>
              <div class="row justify-content-center">
                <img src="image/paym.png" style="width:290px;" alt="">
              </div><br>
              <div class="row justify-content-center">
              <button  id="proceedToPayment" class="btn btn-block d-block btn-success">Proceed to Payment </button>
            </div>
            </div>
          </div>
        </div>
    </div>
    <div id="back-top" style="display: none;">
        <a title="Go to Top" href="#">
            <i class="ti-angle-up"></i>
        </a>
    </div>
<!--Start of Tawk.to Script-->
<script type="text/javascript">
    var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
    (function(){
    var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
    s1.async=true;
    s1.src='https://embed.tawk.to/61c33018c82c976b71c2a947/1fnh77ocr';
    s1.charset='UTF-8';
    s1.setAttribute('crossorigin','*');
    s0.parentNode.insertBefore(s1,s0);
    })();
</script>
<!--End of Tawk.to Script-->
<!-- END: Page JS-->
    <script src="js/jquery1-3.4.1.min.js"></script>

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

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

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

    <script src="js/custom.js"></script>
    <script src="js/corass.js"></script>
</body>



</html>