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

<!-- Handle Add Slider -->
<style>
@media(max-width: 992px){
    .insider{
        margin-top: -50px;
    }
}

.card{
    height: 500px;
}
.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

if ($gender == 'M') {
    $genderWord = "Male";
}else{
    $genderWord = "Female";
}
// Get student avatar
$avat = "SELECT photo_path FROM student_image WHERE adminNo = ?";
$avastmt = $pdo->prepare($avat);
$avastmt->execute([$adminNo]);
$therow = $avastmt->FETCH(PDO::FETCH_ASSOC);
$stdImg = $therow['photo_path'];
?>

<div id="notification-containers" class="notification-containers"></div>
<div class="insider">
    <div class="container">
        <div class="cat-pag">
            <div class="cat-page-header d-flex justify-content-between align-items-center">
                <h5>Settings</h5>
                <div>
                    <button class="btn info text-white btn-sm" onclick="openModal('modal-avatar')">Avater <i class="fa fa-user"></i></button>
                    <button class="btn success text-white btn-sm" onclick="openModal('modal-update')">Password <i class="fa fa-key"></i></button>
                </div>
            </div>
            <form action="" method="POST">
                <div class="card mt-3">
                    <div class="card-header" style="display: flex; align-items: center; justify-content: space-between;">
                        <h5>MY ACCOUNTS</h5>
                        <button class="btn btn-sm info text-white">Update Changes <i class="fa fa-edit"></i></button>
                    </div>
                    <div class="card-body" style="background: #F7F9FB;">
                        <div class="row" style="margin-top: -10px;">
                            <div class="col-lg-6 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" class="form-control"
                                        value="<?=$surName?>">                          
                                    </div>
                                  </div>
                                </div>
                            </div>

                            <div class="col-lg-6 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="othernames" class="form-control"
                                        value="<?=$otherName?>">                          
                                    </div>
                                  </div>
                                </div>
                            </div>

                            <div class="col-lg-6 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="<?=$gender?>"><?=$genderWord?></option>
                                      <option value="M">Male</option>
                                      <option value="F">Female</option>
                                    </select>
                                  </div>
                                </div>
                              </div>
                            </div>

                            <div class="col-lg-6 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" class="form-control">
                                    </div>
                                  </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <!-- Updating Modal -->
            <div id="modal-update" class="modal">
                <div class="modal-content" style="margin-top:50px;">
                    <div class="modal-header text-success">Change Password <i class="fa fa-plus-circle"></i></div>
                    <div class="modal-body">
                        <form action="" method="POST">
                            <div class="row">
                                <div class="col-lg-6 mt-3">
                                    <div class="custom-fieldset-box">
                                      <span class="custom-field-title">Password</span>
                                      <div class="inner-cont">
                                        <div class="input-wraps">
                                          <input type="password" name="password" value="<?=$password?>" class="form-control">
                                        </div>
                                      </div>
                                    </div>
                                </div>

                                <div class="col-lg-6 mt-3">
                                    <div class="custom-fieldset-box">
                                      <span class="custom-field-title">Password Again</span>
                                      <div class="inner-cont">
                                        <div class="input-wraps">
                                          <input type="password" value="<?=$password?>" name="confirm" class="form-control">
                                        </div>
                                      </div>
                                    </div>
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger" onclick="closeModal('modal-update')">Cancel <i class="fa fa-cancel"></i> &times;</button>
                                <!-- Add product button -->
                                <button name="upd-pass" class="btn btn-success">Update Password <i class="fa fa-user-plus"></i></button>
                            </div>
                            
                        </form>
                    </div>
                    
                </div>
            </div>

            <!-- Modal Avater -->
            <div id="modal-avatar" class="modal">
                <div class="modal-content" style="margin-top:50px;">
                    <div class="modal-header text-success">Student Image <i class="fa fa-plus-circle"></i></div>
                    <div class="modal-body">
                        <form action="" method="POST" enctype="multipart/form-data">
                            <div class="avatar">
                                <input type="hidden" name="feature_image" value="<?=$stdImg?>">
                                <div class="uploads" style="margin-top: -5px;">
                                  <img alt="" src="images/avatar/<?=$stdImg?>" id = "image" >
                                  <div class="rightRound" id = "upload">
                                    <input type="file" name="the_avatar" id = "fileImg" accept=".jpg, .jpeg, .png" value="<?=$stdImg?>">
                                    <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 class="modal-footer">
                                <button type="button" class="btn btn-danger" onclick="closeModal('modal-avatar')">Cancel <i class="fa fa-cancel"></i> &times;</button>
                                <!-- Add product button -->
                                <button name="upd-avatar" class="btn btn-success">Update Image <i class="fa fa-refresh"></i></button>
                            </div>
                            
                        </form>
                    </div>
                    
                </div>
            </div>
        </div>
   
    </div>
</div>
<?php
if (isset($_POST['upd-pass'])) {
    
    $password = $_POST['password'];
    $confirm = $_POST['confirm'];
    
    if ($password != $confirm) {
        $_SESSION['message'] = 'Password does not match';
        $_SESSION['type'] = 'error';
    }else{
        $valPass = password_hash($password, PASSWORD_DEFAULT);
        $updater = "UPDATE student SET password = ? WHERE studId = ?";
        $insertpdo = $pdo->prepare($updater);
        if ($insertpdo->execute([$valPass, $stdId])) {
            $_SESSION['message'] = 'Password Updated Successfully.';
            $_SESSION['type'] = 'success';
        }else{
            $_SESSION['message'] = 'Something went wrong.';
            $_SESSION['type'] = 'error';

        }
        
    }

}

if (isset($_POST['upd-avatar'])) {
    $the_avatar_image          = $_FILES['the_avatar']['name'];
    $the_avatar_img_temp       = $_FILES['the_avatar']['tmp_name'];
    move_uploaded_file($the_avatar_img_temp, "images/avatar/$the_avatar_image");

    $updImg = "UPDATE student_image SET photo_path = ? WHERE adminNo = ?";
    $imgstmt = $pdo->prepare($updImg);
    $imgstmt->execute([$the_avatar_image, $adminNo]);
    $_SESSION['message'] = 'Image Updated Successfully.';
    $_SESSION['type'] = 'success';
}
?>


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

<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>
<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>


<!-- Modal Styling -->
<style>
    .modal {
        display: none;
        position: fixed;
        z-index: 99999;
        left: 0; top: 0;
        width: 100%; height: 100%;
        overflow: auto;
        background-color: rgba(0,0,0,0.5);

    }

    .modal-content {
        background-color: #fff;
        margin: auto;
        padding: 20px;
        border-radius: 8px;
        width: 80%;
        max-width: 500px;
        animation: fadeIn 0.3s;
    }

    .modal-header, .modal-footer {
        font-weight: bold;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    
    .single-input{
        margin-top: 10px;
    }
    .single-input label{
        font-size: 15px;
        margin-left: 20px;
        font-family: sans-serif;
    }
    .my-input input{
        width: 100%;
        border:2px solid #ccc;
        outline: none;
        font-size: 16px;
        color: 888;
        height: 50px;
        border-radius: 10px;
        padding: 15px;
        text-align: left;
       /* height: 20px;*/
    }
    .my-input select{
        width: 100%;
        border:2px solid #ccc;
        outline: none;
        font-size: 16px;
        color: 888;
        height: 50px;
        border-radius: 10px;
        padding: 10px;
       /* height: 20px;*/
    }
    
</style>

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

