<!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">
  <title>CORASS - GET STARTED</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
  <link rel="icon" href="img/kp.png" type="image/png" />
  <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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script>
  <link rel="stylesheet" href="../assets/css/bootstrap.min.css" />
  <link rel="stylesheet" href="../assets/js/bootstrap.min.js" />
  <link rel="stylesheet" href="..//assets/style.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
  <script src="../js/index.js"></script>
  <!-- toastr -->
  <link href="../js/toastr.css" rel="stylesheet">
</head>

<body>
  <section class="bg-light2">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-lg-4 col-md-12 col-sm-6 login mx-5 pt-3 mt-4 mb-4">
          <div class="row py- justify-content-center">
            <center>
              <div class="col-lg-5 col-md-6 col-sm-6">
                <img class="img-fluid" src="https://kwcoeilorin.edu.ng/templates/kwcoednew/images/logo.png"
                  style="height: 130px;width:130px" alt="2" />
              </div>
          </div>
          <div class="row pt-3 justify-content-center">
            <div class="col-lg-12 col-md-6 col-sm-6">
              <div class="para_her1 px-2">Please update your profile</div>
            </div>
          </div>
          </center>
          <form method="post" enctype="multipart/form-data" id="fisrtTimeForm">

            <div class="row">
              <div class="col-lg-12 col-md-6 col-sm-6">
                <label for="username" class="user_id">Email:</label>
                <p>
                  <input id="email" name="email" type="text" placeholder="john@kwarapoly.corass.ng"
                    class=" form-control p-2 shadow-none" />
                </p>
              </div>
              <input type="hidden" id="username" name="username" value="<%=username%>">
            </div>
            <div class="row ">
              <div class="col-lg-12">
                <label for="phone" required class="user_id">Phone Number: </label>
                <p>
                  <input type="number" name="phone" id="phone" required placeholder="08060000000"
                    class=" form-control p-2 shadow-none" />
                </p>
              </div>
            </div>
            <div class="row ">
              <div class="col-lg-12">
                <label for="phone" required class="user_id">Supervisor Name: </label>
                <p>
                  <input type="text" name="supervisor" id="supervisor" required placeholder="Adetuyi Jacob"
                    class=" form-control p-2 shadow-none" />
                </p>
              </div>
            </div>
            <div class="row ">
              <div class="col-lg-12">
                <label for="department_id" required class="user_id">Department: </label>

                <select name="department_id" id="department_id" class="form-select mb-2 shadow-none" required>
                  <option value="">Please Select Department</option>
                  <% if(departments && departments.length> 0){
                    for(const department of departments){
                    %>
                    <option value="<%=department?.id%>">
                      <%=department?.name%>
                    </option>
                    <%}}%>
                </select>
              </div>
              <div class="row ">
                <div class="col-lg-12">
                  <label for="phone" class="user_id">Passport (png,jpg only): </label>
                  <input type="file" name="file" required class="form-control" placeholder="upload">
                </div>
              </div>
              <div class="row">
                <div class="col-lg-12 mt-4">
                  <button class="btn_col btn btn-block">
                    Update Profile
                  </button>
                </div>
              </div>
          </form>
        </div>
      </div>
  </section>


  <script src="../js/popper1.min.js"></script>
  <script src="../js/corass-auth.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script src="../js/jquery1-3.4.1.min.js"></script>
  <script src="../js/toastr.min.js"></script>
  <script src="../js/popper.min.js"></script>
  <script>
    $(document).ready(function (e) {
      $("#fisrtTimeForm").on('submit', (function (e) {
        e.preventDefault();
        console.log(new FormData(this))
        $.ajax({
          url: "/user/get-started",
          type: "POST",
          data: new FormData(this),
          contentType: false,
          cache: false,
          processData: false,
          success: function (data) {
            if (data == 'invalid') {
              toastr.error(
                "Invalid file type",
                "ERROR", {
                timeOut: 9000
              }
              );
            }
            else {
              alert("Profile Updated successfully")
              window.location.href = "/student-dashboard"
            }
          },
          error: function (e) {
            toastr.error(
              "Invalid file type",
              "ERROR", {
              timeOut: 9000
            }
            );
          }
        });
      }));
    });
  </script>
  <%if(error){%>
    <input hidden id="errorHandler" value="<%=error%>">

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

        <script>toastr.options.progressBar = true;
          toastr.success(
            document.getElementById('successHanddler').value,
            "ERROR", {
            timeOut: 9000
          }
          );
        </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/toastr-error-handler.js"></script> -->
</body>

</html>