<!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>Corass -Project Binding Dashboard</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">

      <!-- toastr -->
  <link href="js/toastr.css" rel="stylesheet">
  <style>
    ul li {
      display: inline-block;
      margin-right: 10px; /* add some space between the items */
    }
  </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 ">
                <%if(!paidForBinding){%>
                <div class="col-lg-12">
                    <div class="white_card card_height_100 mb_30">
                      <div class="white_card_body">
                            <div class="row justify-content-center">
                                <!-- <div class="col-lg-1">
                                    <img src="image/payreq2.png" style="width: 150px;" alt="">
                                </div> -->
                                <div class="col-lg-7 col-sm-6">
                                    
                                    <div class="row justify-content-center" >
                                        <div class="col-lg-2 col-sm-2 time_wrap" >
                                            <ul>
                                                <li class="span_list">
                                                    <span id="day"></span>
                                                </li>
                                                <li>
                                                     <span class="span_text">Days</span>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="col-lg-2 time_wrap">
                                            <ul>
                                                <li class="span_list">
                                                    <span id="hour"></span>
                                                </li>
                                                <li>
                                                     <span class="span_text">Hours</span>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="col-lg-2 time_wrap">
                                            <ul>
                                                <li class="span_list">
                                                    <span id="min"></span>
                                                </li>
                                                <li>
                                                     <span class="span_text">Minutes</span>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="col-lg-2 time_wrap">
                                            <ul>
                                                <li class="span_list">
                                                    <span id="sec"></span>
                                                </li>
                                                <li>
                                                     <span class="span_text">Seconds</span>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="alert_wrap">
                                            <div class="alert alert-danger alert_bg">
                                                <strong class="text-center justify-content-center str_text">Make payment to begin your binding work</strong>
                                            </div>
                                        </div>
                                        <div class="submit_button text-center" style="float: left;">
                                            <a href="payment-plan" class="btn_1" data-bs-target="#payment" data-bs-toggle="modal">Make Payment </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                      </div>
                    </div>
                  </div>    
                <%}%>
                <%if(paidForBinding){%>
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="single_element">
                                <div class="quick_activity">
                                    <div class="row">
                                        <div class="col-lg-4">
                                            <div class="single_quick_activity">
                                                <div class="row">
                                                    <div class="col-lg-12 col-sm-12 col-md-12">
                                                        <div class="count_content">
                                                            <h6>Congratulations <%= profile?.firstname  %></h6>
                                                            <p>You have paid for <span>  project binding</span></p>
                                                            <div class="submit_button text-center" style="float: left;">
                                                              <% 
                                                                if(bindingPayment.status == "PAID"){
                                                              %>
                                                              <button class="btn btn-success"><%= bindingPayment.status%></button>
                                                              <%}%>
                                                          </div>
                                                        </div>
                                                    </div>
                                                </div>
                                               
                                            </div>
                                        </div>
                                           <div class="col-lg-4 ">
                                            <div class="single_quick_activity">
                                              <% 
                                                 if(bindingPayment.status == "PAID"){
                                                %>
                                                <div class="count_content">
                                                    <h6>Binding Receipt</h6>
                                                    <p>Preview and donload your binding receipt here </p>
                                                    <div class="submit_button text-center" style="float: left;">
                                                        <a href="/binding-receipt/<%= user.id%>" class="btn_1">Download Receipt </a>
                                                    </div>
                                                </div>
                                                <%}%>
                                            </div>
                                           </div>
                                            <div class="col-lg-4">
                                                <div class="single_quick_activity">
                                                    <div class="count_content">
                                                        <h6>Current Progress</h6>
                                                        <p>This show the progress of your binding work</p>
                                                        <p class="badge badge-info ">Status: <%= bindingPayment.status %></p>
                                                        <div class="progress">
                                                          <div class="progress-bar progress-bar-striped bg-success " role="progressbar" style="width: <%= bindingPogress %>%" aria-valuenow="<%=bindingPogress%>" aria-valuemin="0" aria-valuemax="100"><%=bindingPogress%></div>
                                                        </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" style="color: #068F3F;"><%=user.username%></li>
                </ul>
              </div>
              <div class="modal-header ">
                <ul>
                    <li class="title">Payment Type:</li>
                    <li id="paymentType" class="sub" style="color: #068F3F;">Project Binding</li>
                </ul>
              </div>
              <div class="modal-header ">
                <ul>
                    <li class="title">Binding Fee:</li>
                    <li id="paymentAmount" class="sub" style="color: #068F3F;">₦5,100</li>
                </ul>
              </div>
              <!-- <div class="modal-header ">
                <ul>
                    <li class="title">Digital Lamination Fee:</li>
                    <li id="paymentAmount" class="sub" style="color: #068F3F;">₦2000</li>
                </ul>
              </div> -->
              <div class="modal-header ">
                <ul>
                    <li class="title">Transaction Processing Fee:</li>
                    <li id="paymentFee" class="sub" style="color: #068F3F;">₦350</li>
                </ul>
              </div>
              <div class="modal-header ">
                <ul>
                    <li class="title">Total Amount:</li>
                    <li id="paymentTotal" class="sub" style="color: #068F3F;">₦5,450</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>

    <script>
        var end = new Date('03/23/2023 11:59 PM');

        var _second = 1000;
        var _minute = _second * 60;
        var _hour = _minute * 60;
        var _day = _hour * 24;
        var timer;
    
        function showRemaining() {
            var now = new Date();
            var distance = end - now;
            if (distance < 0) {
    
                clearInterval(timer);
                // document.getElementById('countdown').innerHTML = 'EXPIRED!';
    
                return;
            }
            var days = Math.floor(distance / _day);
            var hours = Math.floor((distance % _day) / _hour);
            var minutes = Math.floor((distance % _hour) / _minute);
            var seconds = Math.floor((distance % _minute) / _second);
            
            document.getElementById('day').innerHTML = days ;
            document.getElementById('hour').innerHTML = hours ;
            document.getElementById('min').innerHTML = minutes;
            document.getElementById('sec').innerHTML = seconds ;
        }

            
            
             timer = setInterval(showRemaining, 1000);
        </script>

    <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>

<!--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/custom.js"></script>
    <script src="js/jquery1-3.4.1.min.js"></script>
    <script src="js/toastr.min.js"></script>

    <%if(error){%>
        <input hidden id="errorHandler" value="<%=error.error%>">
        
        <script>toastr.options.progressBar = true;
          toastr.error(
            document.getElementById('errorHandler').value,
            "ERROR", {
              timeOut: 9000
            }
          );</script>
             <%}%> 
    <script>
        if (document.getElementById("proceedToPayment")) {
  document.getElementById("proceedToPayment").addEventListener("click", proceedToPayment);
}

function proceedToPayment() {
  toastr.options.progressBar = true;
  toastr.info(
    "Initializing Transaction, Please wait.....",
    "NOTIFICATION", {
      timeOut: 9000
    }
  );
  const paymentHash = document.getElementById("paymentHash").value
  document.getElementById("proceedToPayment").innerHTML = "PROCESSING..."
  document.getElementById("proceedToPayment").disabled = true
  jQuery.ajax({
    url: `/user/transaction/initialize/binding`,
    method: 'POST',
    data: {
      paymentHash
    },
    error: function (request, error) {
      document.getElementById("proceedToPayment").innerHTML = "Proceed to Payment"
      document.getElementById("proceedToPayment").disabled = false
      toastr.options.progressBar = true;
      toastr.error(
        error,
        "ERROR", {
          timeOut: 9000
        }
      );
      
    },
    success: function (data) {
      document.getElementById("proceedToPayment").innerHTML = "Proceed to Payment"
      document.getElementById("proceedToPayment").disabled = false
      if (data.success === false) {
        toastr.options.progressBar = true;
        toastr.error(
          data.error,
          "ERROR", {
            timeOut: 9000
          }
        );
      }
      if (data.success === true) {
        toastr.options.progressBar = true;
        toastr.success(
          "Redirecting...",
          "SUCCESS", {
            timeOut: 9000
          }
        );
        window.location.href = data.message 
      }

    }
  });
}
    </script>
</body>
</html>