<?php session_start();?>
<?php include'includes/header.php'; ?>
<?php include'includes/sidebar.php';?>
<?php include'includes/functions.php';?>
<?php include'includes/navbar.php'; ?>

<!-- This page unique styles -->
<style>
/*Core setup styles*/
.sideNav{
    height: 100%;
    /*width: 220px;*/
    position: fixed;
    z-index: 9;
}
.navbar{
    top: 0;
    position: fixed;
    z-index: 9999;
}
.the-links{
    padding-top: 10px;
}
/*.nav-links{
    height: 100%;
    overflow-y: auto;
}*/
.insider{
    margin-top: 10px;
    position: relative;
}
.card{
    height: auto;
}
.cat-pag{
    position: relative;
}
.cat-page-header{
    position: sticky;
    width: 100%;
    height: 50px;
    background:#F7F9FB; 
    top: 60px;
    right: 60px;
    z-index: 1;
}
@media(max-width: 992px){
.insider{
    margin-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    }        
}
.card-header h5{
    font-size: 14px;
}
@media(max-width: 992px){
  
  .negative{
    height: 500px;
  } 
  .card-header h5{
    font-size: 12px;
  }
}

.card-header h5{
  font-size: 13px;
  font-weight: bold;
}
.custom-fieldset-box{
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  position: relative;
  margin-bottom: 20px;
  background: #F7F9FB;
}
.custom-field-title{
  position: absolute;
  top: -12px;
  left: 15px;
  background: #F7F9FB;
  padding: 0 10px;
  font-weight: bold;
  color: #1E5F67;
  font-size: 15px;
}

input{
  width: 100%;
  height: 50px;
  border:2px solid #ccc;
  outline: none;
  border-radius: 5px;
  padding-left: 10px;
  padding-right: 10px;
}
select{
  width: 100%;
  height: 50px;
  border:2px solid #ccc;
  outline: none;
  border-radius: 5px;
  padding-left: 10px;
  padding-right: 10px;
}
.avater{
    width: 60px;
    height: 60px;
    border:2px solid #ccc;
    border-radius: 50%;
}
</style>

<?php
// studentId is the formal row name for student_image
// Get next admission number
$adminNo = generateAdmissionNumber($pdo);
?>

<!-- Main page starts here -->
<div id="notification-containers" class="notification-containers"></div>
<div class="insider">
  <div class="container">
    <div class="cat-pag">
      <form action="" method="POST" enctype="multipart/form-data">
        <div class="cat-page-header d-flex justify-content-between align-items-center">
          <h5></h5>
          <div>
                          
            <button name="save-btn" 
              class="btn btn-sm 
              info text-white">
              <i class="fa fa-user-plus"></i>
              Add Student 
            </button>

          </div>
        </div>

        <div class="card mt-3">
          <div class="card-header" style="display: flex; align-items: center; justify-content: space-between;">
            <h5>ADD NEW STUDENT</h5>
          </div>
          <div class="card-body" style="background: #F7F9FB;">
            <div class="row" style="margin-top: -10px;">

              <!-- Disabled AdminNo -->
              <div class="col-lg-4 mt-3">
                <div class="custom-fieldset-box">
                  <span class="custom-field-title"><i class="fa fa-id-card"></i> Admin No:</span>
                  <div class="inner-cont">
                    <div class="input-wraps">
                      <input type="text" 
                      value="<?=$adminNo?>" 
                      disabled="" 
                      class="form-control">
                    </div>
                  </div>
                </div>
              </div>

              <!-- Surname -->
              <div class="col-lg-4 mt-3">
                <div class="custom-fieldset-box">
                  <span class="custom-field-title">Surname</span>
                  <div class="inner-cont">
                    <div class="input-wraps">
                      <input type="text" 
                      name="surname" 
                      placeholder="Student Surname" 
                      required="" 
                      class="form-control">
                    </div>
                  </div>
                </div>
              </div>

              <!-- Othernames -->
              <div class="col-lg-4 mt-3">
                <div class="custom-fieldset-box">
                  <span class="custom-field-title">Other Names</span>
                  <div class="inner-cont">
                    <div class="input-wraps">
                      <input type="text" 
                      name="othername" 
                      placeholder="Second & Last Names"
                      required="" 
                      class="form-control">               
                    </div>
                  </div>
                </div>
              </div>

              <!-- Date of birth -->
              <div class="col-lg-4 mt-3">
                <div class="custom-fieldset-box">
                  <span class="custom-field-title">Date of Birth</span>
                  <div class="inner-cont">
                    <div class="input-wraps">
                      <input type="date" 
                      name="dob"
                      required="" 
                      class="form-control">                  
                    </div>
                  </div>
                </div>
              </div>

              <!-- Gender -->
              <div class="col-lg-4 mt-3">
                <div class="custom-fieldset-box">
                  <span class="custom-field-title">Gender</span>
                  <div class="inner-cont">
                    <div class="input-wraps">
                      <select name="gender">
                        <option value="Male">Male</option>
                        <option value="Female">Female</option>
                      </select>                          
                    </div>
                  </div>
                </div>
              </div>

              <!-- Image -->
              <div class="col-lg-4 mt-3">
                <div class="custom-fieldset-box">
                  <span class="custom-field-title">Image</span>
                  <div class="inner-cont">
                    <div class="avatar">
                        <input type="hidden" name="feature_image">
                        <div class="uploads" style="margin-top: -5px;">
                          <img alt="" src="../../student/images/avatar/avatar1.jpg" id = "image" >
                          <div class="rightRound" id = "upload">
                            <input type="file" name="the_avatar" id = "fileImg" accept=".jpg, .jpeg, .png">
                            <i class = "fa fa-camera"></i>
                          </div>
                          <div class="leftRound" id = "cancel" style = "display: none;">
                            <i class = "fa fa-times"></i>
                          </div>
                        </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- Class -->
              <div class="col-lg-3 mt-3">
                <div class="custom-fieldset-box">
                  <span class="custom-field-title">Class</span>
                  <div class="inner-cont">
                    <div class="input-wraps">
                     <select name="class" required="">
                      <option hidden="">--Select Class -- </option>
                      <?php
                      $clss = "SELECT * FROM classes";
                      $stmtClass = $pdo->prepare($clss);
                      $stmtClass->execute([]);
                      while ($clList = $stmtClass->fetch(PDO::FETCH_ASSOC)) {
                        $className = $clList['className'];?>
                        <option value="<?=$className?>"><?=$className?></option>
                      <?php };
                      ?>
                     </select>                       
                    </div>
                  </div>
                </div>
              </div>

              <!-- Class Arms -->
              <div class="col-lg-3 mt-3">
                <div class="custom-fieldset-box">
                  <span class="custom-field-title">Arm</span>
                  <div class="inner-cont">
                    <div class="input-wraps">
                     <select name="arm" required="">
                      <option value="" hidden="">--Select Arm -- </option>
                        <option value="A">A</option>
                        <option value="B">B</option>
                        <option value="C">C</option>
                        <option value="D">D</option>
                     </select>                       
                    </div>
                  </div>
                </div>
              </div>

              <!-- New Password -->
              <div class="col-lg-3 mt-3">
                <div class="custom-fieldset-box">
                  <span class="custom-field-title">New Password</span>
                  <div class="inner-cont">
                    <div class="input-wraps">
                      <input type="password" 
                      name="new_password"
                      placeholder="Set New Password" 
                      required="" 
                      class="form-control">                          
                    </div>
                  </div>
                </div>
              </div>

              <div class="col-lg-3 mt-3">
                <div class="custom-fieldset-box">
                  <span class="custom-field-title">Confirm Password</span>
                  <div class="inner-cont">
                    <div class="input-wraps">
                      <input type="password"
                      required=""
                      placeholder="Enter password again" 
                      name="confirm" 
                      class="form-control">                          
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>

      

    </div>
   
  </div>
</div>
<?php
if (isset($_POST['save-btn'])) {

  $surname        = $_POST['surname'];
  $othername      = $_POST['othername'];
  $date_of_birth  = $_POST['dob'];
  $gender         = $_POST['gender'];
  $class          = $_POST['class'];
  $arm            = $_POST['arm'];
  $new_password   = $_POST['new_password'];
  $confirm        = $_POST['confirm'];
  $newClass = $class.$arm;

  $the_avatar_image          = $_FILES['the_avatar']['name'];
  $the_avatar_img_temp       = $_FILES['the_avatar']['tmp_name'];
  move_uploaded_file($the_avatar_img_temp, "../../student/images/avatar/$the_avatar_image");

  if ($new_password != $confirm) {
    $_SESSION['message'] = 'Password does not match';
    $_SESSION['type'] = 'error';
  }else{
    $valPass = password_hash($new_password, PASSWORD_DEFAULT);
    $save_student = "INSERT INTO student 
    (surname, otherNames,
    gender, password, class, term, session)
    VALUES(?,?,?,?,?,?,?)";
    $stmt = $pdo->prepare($save_student);
    $stmt->execute([
      $surname, $othername, 
      $gender, $valPass, 
      $newClass, $current_term, 
      $current_session]);
    $lastId = $pdo->lastInsertId();

    // Update to insert the admission Number for the student
    $adminNo = "DEG/25/P" . str_pad($lastId, 3, "0", STR_PAD_LEFT);
    $upadmin = "UPDATE student SET adminNo = ? WHERE studId = ?";
    $adminPdo = $pdo->prepare($upadmin);
    $adminPdo->execute([$adminNo, $lastId]);

    // Then insert into student Image
    $inserts = "INSERT INTO student_image(adminNo, photo_path, dob)VALUES(?,?,?)";
    $insertPdo = $pdo->prepare($inserts);
    $insertPdo->execute([$adminNo, $the_avatar_image, $date_of_birth]);


    $msgTitle = "<b>Students registered Successful</b>";
    $msgBody = "
      <center>
        You have Successfully registered student.<br>
        The Admission Number is: <b> $adminNo </b>
      </center>";
    $msgCloseBtn = "Okay, Got it.";

    include 'includes/checkmark-alert.php';

      
  }

}

if (isset($_POST['escape-btn'])) {
  header('Location:students.php');
}

?>


<?php include 'includes/footer.php'; ?>


<script>
    $(document).ready(function () {
        $('#example').DataTable();
        $('#SelectAllBoxes').click(function () {
            $('.checkBoxes').prop('checked', this.checked);
        });
    });

    function openModal(id) {
        document.getElementById(id).style.display = "block";
    }

    function closeModal(id) {
        document.getElementById(id).style.display = "none";
    }

    function handleDelete() {
        const checked = document.querySelectorAll("input[name='checkBoxArray[]']:checked");
        if (checked.length === 0) {
            alert("No user selected!");
            return;
        }
        openModal('modal-delete');
    }
   
</script>

<script type="text/javascript">
    document.getElementById("fileImg").onchange = function(){
      document.getElementById("image").src = URL.createObjectURL(fileImg.files[0]); // Preview new image
      document.getElementById("cancel").style.display = "block";
      document.getElementById("uploads").style.display = "none";
    }
    var userImage = document.getElementById('image').src;
    document.getElementById("cancel").onclick = function(){
      document.getElementById("image").src = userImage; // Back to previous image
      document.getElementById("cancel").style.display = "none";
      document.getElementById("uploads").style.display = "block";
    }      
</script>


<?php include'includes/notification-alert-js.php';?>

