<!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 -User Security </title>
    <link rel="icon" href="img/icon/logo.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">
</head>

<body class="crm_body_bg">


   
      <%if(userType == "staff"){%>
        <%- include('../component/staff-sidebar.ejs')%>
    <%}else{%>
        <%- include('../component/student-sidebar.ejs')%>   
    <%}%>

    <section class="main_content dashboard_part large_header_bg">

    <%if(userType == "staff"){%>
      <%- include('../component/staff-profile-info.ejs')%>
  <%}else{%>
      <%- include('../component/student-profile-info.ejs')%> 
  <%}%>
        <div class="modal" id="editUser" tabindex="" aria-hidden="">
          <div class="modal-dialog modal-lg modal-dialog-centered modal-edit-user">
            <div class="modal-content">
              <div class="modal-header ">
                <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">
                  <h1 class="mb-1">Edit User Information</h1>
                  <p>Updating user details will receive a privacy audit.</p>
                </div>
                              <div class="col-12 col-md-6">
                      <label class="form-label" for="lastname">Surname</label>
                      <input
                        type="text"
                        id="lastname"
                        name="lastname"
                        readonly
                        class="form-control"
                        placeholder="Enter your last name"
                        value="<%=profile?.lastname%>"
                        data-msg="Please enter your last name"
                      />
                    </div>
                    <div class="col-12 col-md-6">
                      <label class="form-label" for="firstname">First Name</label>
                      <input
                        type="text"
                        id="firstname"
                        readonly
                        name="firstname"
                        class="form-control"
                        placeholder="Enter your first name"
                        value="<%=profile?.firstname%>"
                        data-msg="Please enter your first name"
                      />
                      <input
                        type="hidden"
                        id="user_id"
                        name="user_id"
                        class="form-control"
                        placeholder="Enter your first name"
                        value="<%=user.id%>"
                        data-msg="Please enter your first name"
                      />
                    </div>
                    <div class="col-12 col-md-6">
                      <label class="form-label" for="middlename">Middle Name</label>
                      <input
                        type="text"
                        id="middlename"
                        readonly
                        name="middlename"
                        class="form-control"
                        placeholder="Enter your middle name"
                        value="<%=profile?.middlename%>"
                        data-msg="Please enter your middle name"
                      />
                    </div>
                    <div class="col-12 col-md-6">
                      <label class="form-label" for="email">Email</label>
                      <input
                        type="text"
                        id="email"
                        name="email"
                        class="form-control"
                        value="<%=profile?.user.email%>"
                        placeholder="enter your email"
                      />
                    </div>
                    <div class="col-12 col-md-6">
                      <label class="form-label" for="contact">Phone Number</label>
                      <input
                        type="text"
                        id="contact"
                        name="contact"
                        class="form-control phone-number-mask"
                        placeholder="(0809) 357 0289"
                        value="<%=profile?.user.phone%>"
                      />
                    </div>
                              
                  
                  
                  <div class="col-12 text-center mt-2 pt-50">
                    <button type="button" id="edit-submit-btn" class="btn btn-success me-1" data-user-slug="TayeOluwafemiH865ldv4D31648997659">Submit</button>
                    <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="modal" aria-label="Close">
                      Discard
                    </button>
                  </div>
              </div>
            </div>
          </div>
        </div>
        <div class="main_content_iner ">
            <div class="container-fluid">
                  <div class="row">
                    <div class="col-xl-4 col-lg-5 col-md-5">
                        <div class="card" style="height: 620px; border-radius: 8px;">
                      <div class="card-body">
                          <div class="user-avatar-section">
                              <div class="d-flex align-items-center flex-column">

                                <% if(profile?.photo_path){%>
                                    <img src="/avatar/<%= profile?.photo_path%>" width="60px" alt="">
                                <%}else{%>
                                    <img src="img/client_img.png" width="60px" alt="">
                                <%}%>
                                <a href="#"  style="color: #038F3F;">Change Picture</a>
                                <div class="text-center">
                                      <h4><%= profile?.lastname.toUpperCase() %>, <%= profile?.firstname %> <%= profile?.middlename %></h4>
                                  </div>
                              </div>
                          </div>
                          <h4 class="fw-bolder border-bottom pb-50 mb-1 mt-3">Details</h4>
                          <div class="info-container">
                            <ul class="list-unstyled">
                                <li class="mt-2">
                                <span><b>Username:</b></span><br>
                                <span style="opacity: 0.5;"><%= profile?.user.username %></span>
                                </li>
                                <li class="mt-2">
                                <span><b>Email:</b></span><br>
                                <span style="opacity: 0.5;"><%= profile?.user.email %></span>
                                </li>
                                <li class="mt-2">
                                <span><b>Phone:</b></span><br>
                                <span style="opacity: 0.5;"><%= profile?.user.phone %></span>
                                </li>
                                <li class="mt-2">
                                <span><b>Department:</b></span><br>
                                <span style="opacity: 0.5;"><%= profile?.department?.name %></span>
                                </li>
                                <li class="mt-2">
                                <span><b>Institute:</b></span><br>
                                <span style="opacity: 0.5;"><%= profile?.department?.institute?.name %></span>
                                </li>
                            </ul>
                              <div class="d-flex justify-content-center mt-3">
                                <a href="javascript;"  class="btn btn-success me-1" data-bs-target="#editUser" data-bs-toggle="modal">
                                  Edit
                                </a>
                                </div>
                          </div>
                      </div>
                  </div>
                      </div>
                  
                      <div class="col-xl-8 col-lg-7 col-md-7">
          
                        <ul class="nav nav-pills mb-2">
                          <li class="nav-item">
                              <%if(userType == "staff"){%>
                                <a class="nav-link "   style="color: #038F3F;"
                                
                                    href="/profile-staff-account">
                                <!-- <i data-feather="lock" class="font-medium-3 me-50"></i> -->
                                <span class="fw-bold" >Account</span>
                                </a>
                                <%}else{%>
      
                                  <a class="nav-link " 
                                  
                                      href="/profile-account">
                                  <!-- <i data-feather="lock" class="font-medium-3 me-50"></i> -->
                                      <span class="fw-bold"  style="color: #038F3F;">Account</span>
                                  </a>
                                  <%}%>
                          </li>
                            <li class="nav-item">
                                <%if(userType == "staff"){%>
                              <a class="nav-link active "   style="background-color: #038F3F;"
                              
                                  href="/profile-staff-security">
                              <!-- <i data-feather="lock" class="font-medium-3 me-50"></i> -->
                              <span class="fw-bold" >Security</span>
                              </a>
                              <%}else{%>
    
                                <a class="nav-link "  style="background-color: #038F3F;"
                                
                                    href="/profile-security">
                                <!-- <i data-feather="lock" class="font-medium-3 me-50"></i> -->
                                    <span class="fw-bold"  style="color: #ffff;">Security</span>
                                </a>
                                <%}%>
                            </li>
                              <!-- <li class="nav-item">
                          <a class="nav-link " 
                              href="/profile-payment">
                          <i data-feather="lock" class="font-medium-3 me-50"></i>
                          <span class="fw-bold">Payments</span>
                          </a>
                      </li> -->
                      </ul>    
                  
                      <div class="card" style="height: 577px; border-radius: 8px;">
                       <div class="card-header">
                        <h4 class="mt-2">Change Password</h4>
                       </div>
                        <div class="card-body">
                            <input type="hidden" name="_token" value=""> 
                                       <div class="alert alert-warning mb-3" role="alert" style="color: rgb(192, 163, 108);">
                              <h6 class="alert-heading">Ensure you secure your password</h6>
                              <div class="alert-body">Do not share your CORASS password with anyone</div>
                            </div>
                
                                                    <div class="row">
                              <div class="mb-2 col-md-6 form-password-toggle">
                                <label class="form-label" for="old_password">Old Password</label>
                                <div class="input-group input-group-merge form-password-toggle">
                                  <input
                                    class="form-control"
                                    type="password"
                                    id="PasswordCurrent"
                                    name="PasswordCurrent"
                                    placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
                                  
                                  />
                                </div>
                              </div>
                            </div>
                
                            <div class="row">
                              <div class="mb-2 col-md-6 form-password-toggle">
                                <label class="form-label" for="password">New Password</label>
                                <div class="input-group input-group-merge form-password-toggle">
                                  <input
                                    class="form-control"
                                    type="password"
                                    id="NewPassword"
                                    name="NewPassword"
                                    placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
                                    
                                  />
                                </div>
                              </div>
                
                              <div class="mb-2 col-md-6 form-password-toggle">
                                <label class="form-label" for="password_confirmation">Confirm New Password</label>
                                <div class="input-group input-group-merge">
                                  <input
                                    class="form-control"
                                    type="password"
                                    name="confirmNewPassword"
                                    id="confirmNewPassword"
                                    placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
                                    
                                  />
                                  <!-- <span class="input-group-text cursor-pointer"><i data-feather="eye"></i></span> -->
                                </div>
                              </div>
                              <div>
                                <button id="change-password-btn" class="btn btn-success me-2">Change Password</button>
                              </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 id="back-top" style="display: none;">
        <a title="Go to Top" href="#">
            <i class="ti-angle-up"></i>
        </a>
    </div>

    <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="js/metisMenu.js"></script>

    <script src="vendors/count_up/jquery.waypoints.min.js"></script>

    <script src="vendors/chartlist/Chart.min.js"></script>

    <script src="vendors/count_up/jquery.counterup.min.js"></script>

    <script src="vendors/niceselect/js/jquery.nice-select.min.js"></script>

    <script src="vendors/owl_carousel/js/owl.carousel.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/chart.min.js"></script>

    <script src="vendors/progressbar/jquery.barfiller.js"></script>

    <script src="vendors/tagsinput/tagsinput.js"></script>

    <script src="vendors/text_editor/summernote-bs4.js"></script>
    <script src="vendors/am_chart/amcharts.js"></script>

    <script src="vendors/scroll/perfect-scrollbar.min.js"></script>
    <script src="vendors/scroll/scrollable-custom.js"></script>
    <script src="vendors/chart_am/core.js"></script>
    <script src="vendors/chart_am/charts.js"></script>
    <script src="vendors/chart_am/animated.js"></script>
    <script src="vendors/chart_am/kelly.js"></script>
    <script src="vendors/chart_am/chart-custom.js"></script>

    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="js/corass.js"></script>
    <script>
      $("#change-password-btn").on('click', function(){
      const PasswordCurrent = $("#PasswordCurrent").val();
      const NewPassword = $("#NewPassword").val();
      const confirmNewPassword = $("#confirmNewPassword").val();
      const username = $("#user_id").val();
  if(!PasswordCurrent || !NewPassword || !confirmNewPassword){
    Swal.fire({
        position: 'top-end',
        icon: 'error',
        title: "All fields are required " + PasswordCurrent + NewPassword + confirmNewPassword ,
        showConfirmButton: false,
        timer: 1500
      })
      return
  }
  if(NewPassword != confirmNewPassword){
    Swal.fire({
        position: 'top-end',
        icon: 'error',
        title: "Password does not match" ,
        showConfirmButton: false,
        timer: 1500
      })
      return
  }
  
   jQuery.ajax({
    url:`/user/changepassword`,
    method:'POST',
    data:{
      PasswordCurrent,
      NewPassword,
      confirmNewPassword,
      username
    },
    error: function (request, error) {
      Swal.fire({
        position: 'top-end',
        icon: 'error',
        title: "An error occured " + JSON.stringify(error),
        showConfirmButton: false,
        timer: 1500
      })
    },
     success:function(data)
        {  
          console.log(data)
          if(data.error == "Invalid password"){
            Swal.fire({
            position: 'top-end',
            icon: 'error',
            title: "Password does not match",
            showConfirmButton: false,
            timer: 1500
          })
          return
        }
          if(data.error == "user not found"){
            Swal.fire({
            position: 'top-end',
            icon: 'error',
            title: "User not found",
            showConfirmButton: false,
            timer: 1500
          })
          return
        }

          if(data.error == "not match'"){
            Swal.fire({
            position: 'top-end',
            icon: 'error',
            title: "Password does not match",
            showConfirmButton: false,
            timer: 1500
          })
          return
          }
          Swal.fire({
            position: 'top-end',
            icon: 'success',
            title: "Password successfully updated",
            showConfirmButton: false,
            timer: 1500
          })     
        }
    }); 
  })
    </script>
    <script src="js/custom.js"></script>
</body>
</html>