<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="assets/css/style2.css">

    <link rel="icon" href="img/kp.png" type="image/png" />
    <!----===== Iconscout CSS ===== -->
    <link rel="stylesheet" href="https://unicons.i  conscout.com/release/v4.0.0/css/line.css">
    <title>ODFEL EXIT FORM</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <link href="../js/toastr.css" rel="stylesheet">
    <style>
      .uppercase-input {
          text-transform: uppercase;
      }
    </style>
</head>

<body>
    <div class="container">
        <div class="modal fade" id="printFormModal" tabindex="-1" aria-labelledby="printFormModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="printFormModalLabel">CORASS ODFEL EXIT FORM</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <!-- Modal content goes here -->
                </div>
              </div>
            </div>
          </div>
        <center>
            <div class="col-lg-12 col-md-12 col-sm-6">
                <img class="logo_center mx-auto" src="/assets/Image/kp.png" style="height: 130px;width:130px;margin: auto;"
                    alt="2" /><br>
                <h4 class="text-center fw-bold">CORASS ODFEL EXIT FORM</h4>
                <br>
            </div>
        </center>
        
        <div  style=" margin-top: 50px;margin-right: 50px; ">
            <button type="button" class="btn btn-primary" id="toggleButton" >Print Form</button>
        </div>
        <div id="form">
          <form method="post" enctype="multipart/form-data" id="fisrtTimeForm">
            <div class="form first">
                <div class="details personal">
                    <span class="title">Personal Details</span>

                    <div class="fields">
                        
                        <div class="input-field">
                            <label> Matric Number</label>
                            <input type="text" name="username" class="uppercase-input"  placeholder="Enter your name" required>
                        </div>
                        <div class="input-field">
                            <label> First Name</label>
                            <input type="text" name="firstname" placeholder="Enter your name" required>
                        </div>
                        <div class="input-field">
                            <label> Surname</label>
                            <input type="text" name="lastname" placeholder="Enter your name" required>
                        </div>
                        
                        <div class="input-field">
                            <label> Other Name</label>
                            <input type="text" name="othername" placeholder="Enter your name" >
                        </div>
                        <div class="input-field">
                            <label> Email</label>
                            <input type="text" name="email" placeholder="Enter your name" required>
                        </div>
                        <div class="input-field">
                            <label> Passport</label>
                            <input type="file" name="file"  required>
                        </div>
                    </div>
                </div>

                <div class="details ID">
                    <span class="title">Project Details</span>

                    <div class="fields">
                        <div class="input-field">
                            <label>Project Topic</label>
                            <input type="text" name="topic" placeholder="Project topic" required>
                        </div>

                        <div class="input-field">
                            <label>Supervisor Name</label>
                            <input type="text" name="supervisor_name" placeholder="Supervisor Name" required>
                        </div>

                        <div class="input-field">
                            <label>Department</label>
                            <select name="department_id" id="">
                                <option value="">Select Department</option>
                                <% if(departments && departments.length> 0){
                                    for(const department of departments){
                                    %>
                                    <option value="<%=department?.id%>">
                                      <%=department?.name%>
                                    </option>
                                    <%}}%>
                            </select>
                        </div>

                       
                    </div>

                    <button class="nextBtn">
                        <span class="btnText">Download (700 Naira)</span>
                        <i class="uil uil-navigator"></i>
                    </button>
                </div>
            </div>

        </form>
        </div>
        <div style="display: none; margin-top: 30px;" id="printForm">
          <div>
            <input type="text" placeholder="Matric Number" id="searchMatric" class="form-control p-5 m-5" >
            <br>
            <button class="btn btn-success" id="checkRecord">Check Record</button>
          </div>
          <br>
          <div>
            <table class="table">
              <thead>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">Student Name</th>
                  <th scope="col">Payment Reference</th>
                  <th scope="col">Payment Status</th>
                  <th scope="col">Action</th>
                </tr>
              </thead>
              <tbody id="tableBody">
              </tbody>
            </table>
          </div>
        </div>
    </div>
    <script src="../js/toastr.min.js"></script>
    <script>
      $(document).ready(function (e) {
        $("#fisrtTimeForm").on('submit', (function (e) {
          e.preventDefault();
          $.ajax({
            url: "/user/odfel-form",
            type: "POST",
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData: false,
            success: function (data) {
              if (data == 'invalid') {
                toastr.error(
                  "An error occured, Please contact the admin",
                  "ERROR", {
                  timeOut: 9000
                }
                );
              }
              else {
                window.location.href = data.authorizationUrl
              }
            },
            error: function (e) {
              toastr.error(
                "An error occured, Please contact the admin",
                "ERROR", {
                timeOut: 9000
              }
              );
            }
          });
        }));
      });
    </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>
    <script>
      $(document).ready(function() {
          $('#toggleButton').click(function() {
              $('#form').toggle();
              $('#printForm').toggle();
              
              if ($('#form').is(':visible')) {
                  $('#toggleButton').text('Print Form');
              } else {
                  $('#toggleButton').text('Register Form');
              }
          });
      });
  </script>
  <script>
    $(document).ready(function (e) {
      $("#checkRecord").on('click', (function (e) {
        const username = $('#searchMatric').val()
        $.ajax({
          url: "/user/odfel-records",
          type: "POST",
          data: {username},
          success: function (data) {
            if (data == 'invalid') {
              toastr.error(
                "An error occured, Please contact the admin",
                "ERROR", {
                timeOut: 9000
              }
              );
            }
            else {
              let tableBody = $('#tableBody');
              tableBody.empty()
              data.records.forEach((item, index) => {
                tableBody.append(`
                   <tr>
                      <th scope="row">${index + 1}</th>
                      <td>${item.firstname} ${item.lastname}</td>
                      <td>${item.txn_ref}</td>
                      <td><span class="badge badge-info">${item.txn_status}</span></td>
                      ${item.txn_status === "success" ? 
                          `<td><a class="btn btn-sm btn-success" href="/exit-form/${item.id}">Download</a></td>` : 
                          `<td><button onclick="requeryPayment('${item.id.trim()}')" class="btn btn-sm btn-info">Requery</button></td>` }
                  </tr>
                `);
            });
            }
          },
          error: function (e) {
            toastr.error(
              "An error occured, Please contact the admin",
              "ERROR", {
              timeOut: 9000
            }
            );
          }
        });
      }));
    });
  </script>
  <script>
    function requeryPayment(id){
      $.ajax({
          url: "/user/odfel-requery",
          type: "POST",
          data: {id},
          success: function (data) {
            toastr.error(
              data,
              "Info", {
              timeOut: 9000
            });
          },
          error: function (e) {
            toastr.info(
              "An error occured, Please contact the admin",
              "Status", {
              timeOut: 9000
            }
            );
          }
        });
    }
  </script>
 </body>

</html>