<!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>User - Account - 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">
    <!-- toastr -->
    <link href="js/toastr.css" rel="stylesheet">
</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-12">
                        <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="<%=user.lastname%>"
                          data-msg="Please enter your last name"
                        />
                      </div>
                      <div class="col-12 col-md-12">
                        <label class="form-label" for="firstname">First Name</label>
                        <input
                          type="text"
                          id="firstname"
                          name="firstname"
                          class="form-control"
                          readonly
                          placeholder="Enter your first name"
                          value="<%=user.firstname%>"
                          data-msg="Please enter your first name"
                        />
                        <input
                          type="hidden"
                          id="user_id"
                          name="user_id"
                          class="form-control"
                          readonly
                          placeholder="Enter your first name"
                          value="<%=user?.id%>"
                          data-msg="Please enter your first name"
                        />
                      </div>
                      <div class="col-12 col-md-12">
                        <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="<%=user.middlename%>"
                          data-msg="Please enter your middle name"
                        />
                      </div>
                      <div class="col-12 col-md-12">
                        <label class="form-label" for="email">Email</label>
                        <input
                          type="text"
                          id="email"
                          name="email"
                          class="form-control"
                          value="<%=profile.email%>"
                          placeholder="enter your email"
                        />
                      </div>
                      <div class="col-12 col-md-12">
                        <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.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=" 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%>" id="previewImage" src="#" alt="Selected Image"  width="60px" alt="">
                                <%}else{%>
                                    <img src="img/client_img.png" id="previewImage" src="#" alt="Selected Image"  width="60px" alt="">
                                <%}%>
                                <button id="chooseFileButton" class="btn btn-success text text-white mt-3 mb-4" style="color: #038F3F;">Change Picture</button>
                                <div class="row ">
                                    <div class="col-lg-12">
                                    <input type="file" name="file"  id="fileInput" style="display: none;" required class="form-control" placeholder="upload">
                                    </div>
                                </div>
                                <div class="text-center">
                                      <h4><%= user.lastname.toUpperCase() %>, <%= user.firstname %> <%= user?.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 id="matricNumber" style="opacity: 0.5;"><%= user.username %></span>
                                  </li>
                                  <li class="mt-2">
                                  <span><b>Email:</b></span><br>
                                  <span style="opacity: 0.5;"><%= profile.email %></span>
                                  </li>
                                  <li class="mt-2">
                                  <span><b>Phone:</b></span><br>
                                  <span style="opacity: 0.5;"><%= profile.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">
                                <button href="javascript;"  class="btn btn-success me-1" data-bs-target="#editUser" data-bs-toggle="modal">
                                  Edit
                                </button>
                                </div>
                          </div>
                      </div>
                  </div>
                      </div>
                  
                      <div class="col-xl-8 col-lg-7 col-md-7" style="border-radius: 8px;">
          
                        <ul class="nav nav-pills mb-2">
                      <li class="nav-item">
                          <%if(userType == "staff"){%>
                            <a class="nav-link active"  style="background-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 "  style="background-color: #038F3F;"
                              
                                  href="/profile-account">
                              <!-- <i data-feather="lock" class="font-medium-3 me-50"></i> -->
                                  <span class="fw-bold"  style="color: #ffff;">Account</span>
                              </a>
                              <%}%>
                      </li>
                        <li class="nav-item">
                            <%if(userType == "staff"){%>
                          <a class="nav-link " 
                          
                              href="/profile-staff-security">
                          <!-- <i data-feather="lock" class="font-medium-3 me-50"></i> -->
                          <span class="fw-bold"  style="color: #038F3F;">Security</span>
                          </a>
                          <%}else{%>

                            <a class="nav-link " 
                            
                                href="/profile-security">
                            <!-- <i data-feather="lock" class="font-medium-3 me-50"></i> -->
                                <span class="fw-bold"  style="color: #038F3F;">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">
                          
                          <div class="card-body">
                            <h4 class="mt-2">Activity Timeline</h4>
                            <ul class="timeline ms-50">
                            <% for(activty of activityLog){%>
                             <li class="timeline-item">
                                  <div class="timeline-event">
                                  <div class="d-flex justify-content-between">
                                    <h6><%= activty.description %></h6>
                                    <span style="opacity: 0.5;"><%= activty.createdAt %></span>
                                  </div>
                                  <p> Time
                                 </p>             
                                </div>
                              </li>
                              <%}%>
                            </ul>
                          </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/toastr.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 src="js/custom.js"></script>
    <script>
        // JavaScript code
const fileInput = document.getElementById('fileInput');
const previewImage = document.getElementById('previewImage');
const chooseFileButton = document.getElementById('chooseFileButton');

chooseFileButton.addEventListener('click', function() {
  fileInput.click();
});

fileInput.addEventListener('change', function() {
  const file = this.files[0];
  const matricNumber = document.getElementById("matricNumber").innerHTML
  if (file) {
    const fileType = file.type.split('/')[1];
    if (['jpg', 'png', 'jpeg'].includes(fileType)) {
    const formData = new FormData();
    formData.append('file', file);
    formData.append('username', matricNumber);
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/user/passport-update', true);
    xhr.onload = function() {
      if (xhr.status === 200) {
        alert('Image uploaded successfully!');
      } else {
        alert('Image upload failed.');
      }
    }
    xhr.send(formData);
    const reader = new FileReader();
    reader.onload = function() {
      previewImage.src = reader.result;
      previewImage.style.display = 'block';
      fileInput.style.display = 'none';
    }
    reader.readAsDataURL(file);
  }else {
      alert('Invalid file type. Please choose a JPG, PNG, or JPEG file.');
      this.value = null;
}
} 
});

    </script>
</body>
</html>