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

<style>
@media(max-width: 992px){
.insider{
    margin-top: -50px;
    padding-left: 10px;
    padding-right: 10px;
    }        
}
td span{
    padding: 10px; border-radius: 6px;
    font-size: 13px;
}
.success_stutus{
    background: #E8FCEF; color: #4ECA74;
}
.error_status{
    background: #F8D7DA; color: #90151C;
}
.negative{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}
.negative i{
    font-size: 70px;
    color: #FE9C13;

}
.negative h5{
    font-size: 20px;
    color: #FE9C13;
    text-align: center;
    font-weight: bold;
    font-family: sans-serif; 
}
.negative a{
    padding: 10px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    font-size: 17px;
    border-radius: 5px;
    /*font-weight: bold;*/
}
.negative a i{
    font-size: 17px;
    color: #fff;
}
.negative button{
    padding: 10px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    font-size: 17px;
    border-radius: 5px;
    outline: none;
    border:none;
    /*font-weight: bold;*/
}
.negative button i{
    font-size: 17px;
    color: #fff;
}
.custom-fieldset-box{
    width: 100%;
  border: 1px solid #ccc;
  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;
}
.merge{
    width: 100%;
    height: auto;
    display: flex;
    gap:10px;
    align-items: center;
}
.meger-in{
    width: 100%;
    display: flex;
    gap:20px;
}
.magdash{
    width: 200px;
}
.magdash button{
    width: 100%;
    height: 45px;
    padding: 10px;
}
@media(max-width: 992px){
    .merge{
        flex-direction: column;
    }
    .magdash{
        width: 100%;
    }

}
</style>
<?php

if (isset($_SESSION['adminNo'])) {
    $adminNo = $_SESSION['adminNo'];
    $session = $_SESSION['selectedSession'];
    $term = $_SESSION['selectedTerm'];
    $class = $_SESSION['selectedClass'];
    $subject = $_SESSION['selectedSub'];

    // Get each std name by their Id
    $unamm = "SELECT * FROM student WHERE adminNo = ?";
    $unaPdo = $pdo->prepare($unamm);
    $unaPdo->execute([$adminNo]);
    $stdRow = $unaPdo->fetch(PDO::FETCH_ASSOC);
    $adminNo    =   $stdRow['adminNo'];
    $stdId      = $stdRow['studId'];
    $stdSurname = $stdRow['surname'];
    $stdOthername = $stdRow['otherNames'];
}else{
    header('Location:records_history.php');
}

?>

<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">
            
            </div>

            <div class="card mt-3" style="height: auto;">
                <div class="card-header text-left">
                    <h5 style="font-size: 15px"><?=$class?> Students | <?=$subject?></h5>
                </div>
                <div class="card-body" style="background: #F7F9FB;">
                    <form action="" method="POST" id="mainForm">
                        
                        <?php
                        $rels = "SELECT stdId FROM results WHERE subject = ? 
                                AND class = ? AND term = ? AND session = ? AND stdId = ?";
                        $reslpdo = $pdo->prepare($rels);
                        $reslpdo->execute([$subject, $class, 
                        $term, $session, $adminNo]);
                        $countrow = $reslpdo->rowCount();
                        if ($countrow == FALSE) {?>
                            <div class="negative">
                                <i class="fa fa-folder-open"></i>
                                <h5>
                                    No Grades Found for <b><?=$subject?></b> - 
                                    <b><?=$class?></b> <br>
                                    <small>(<?=$session?> Session, 
                                        <?=$term?> Term)
                                    </small>
                                </h5>
                                <p style="font-size:14px; color:#555;">
                                    There’s no grading record yet for <?= $stdSurname?> in this class and subject. <br>
                                    Please begin by adding the <b>Test Scores</b>.
                                </p>

                                <button class="warning" name="returnBack">
                                    Add Test Score Now <i class="fa fa-plus-circle"></i>
                                </button>
                                    
                            </div>
                        <?php }else{
                        ?>
                        <?php
                        $theupd = "SELECT * FROM results WHERE subject = ? 
                        AND class = ? AND term = ? AND session = ?
                        AND stdId = ? ";
                        $uptPdo = $pdo->prepare($theupd);
                        $uptPdo->execute([$subject, $class, 
                            $current_term, $current_session, $adminNo]);
                        $testRow = $uptPdo->fetch(PDO::FETCH_ASSOC);
                        $resultId   = $testRow['resultId'];
                        $stdId      = $testRow['stdId'];
                        $dataScore  = $testRow['second_test'];?>
                        <div class="merge">
                            <div class="meger-in">
                                <div class="custom-fieldset-box">
                                  <span class="custom-field-title">Test Score</span>
                                  <div class="inner-cont">
                                    <div class="input-wraps">
                                      <input type="number" class="" 
                                      name="testEdited" 
                                      placeholder="Enter Score" 
                                      id="inputTest"
                                      value="<?= $dataScore?>"
                                      onkeyup="StdScore()">                         
                                    </div>
                                  </div>
                                </div>

                                <div class="custom-fieldset-box">
                                  <span class="custom-field-title">Test Over</span>
                                  <div class="inner-cont">
                                    <div class="input-wraps">
                                      <input type="text" class=""
                                      style="cursor:not-allowed; " 
                                      name="" placeholder="<?= $dataScore?>/20" disabled="" 
                                      id="showTotal">                       
                                    </div>
                                  </div>
                                </div>
                            </div>
                            <div class="magdash">
                                <div class="custom-fieldset-box">
                                  <span class="custom-field-title">Action</span>
                                  <div class="inner-cont">
                                    <div class="input-wraps">
                                        <button class="btn info text-white" name="upd-btn">
                                            Update <i class="fa fa-edit"></i>
                                        </button>
                                    </div>
                                  </div>
                                </div>
                            </div>
                        </div>
                        
                        <?php } ?>
                    </form>
                </div>
            </div>
        </div>
   
    </div>
</div>


<?php
if (isset($_POST['returnBack'])) {
       $_SESSION['message'] = "Redirecting...";
       $_SESSION['type'] = 'info';?>
       <script type="text/javascript">
           setTimeout("location.href='records_history.php';", 2000);
       </script>

   <?php
       
        
}

if (isset($_POST['upd-btn'])) {
    $testEdited = $_POST['testEdited'];
    if ($testEdited > 20) {
        $_SESSION['message'] = "Test score is greater than 20";
        $_SESSION['type'] = 'error';
    }else{
        // update test
        $updaStmt = "UPDATE results SET second_test = ? WHERE subject = ?
        AND term = ? AND session = ? AND stdId = ?";
        $updaPdo = $pdo->prepare($updaStmt);
        $updaPdo->execute([$testEdited, $subject, $term, $session, $adminNo]);
        $_SESSION['message'] = "Test Score Updated Successfully";
        $_SESSION['type'] = 'success';?>

        <script type="text/javascript">
            setTimeout("location.href='javascript:history.back()';", 2000);
        </script>

    <?php }
}
?>

<?php include 'includes/footer.php'; ?>
<script>
    function StdScore(){
        let inputField = document.getElementById('inputTest');
        let showScore = document.getElementById('showTotal');
        let detectError = document.getElementById('detectMistake');

        if (inputField.value <= 20) {
            let addTotal = inputField.value + '/20';
            showScore.value = addTotal;
            detectError.value = 'Good';
        }else{
            let addTotal = 'Error';
            showScore.value = addTotal;
            detectError.value = 'Error';
        } 
    }
</script>

<!-- DataTables & jQuery -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></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 products 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: 45px;
    border-radius: 7px;
    padding: 15px;
    text-align: left;
   /* height: 20px;*/
}
.my-input select{
    width: 100%;
    border:2px solid #ccc;
    outline: none;
    font-size: 16px;
    color: 888;
    height: 45px;
    border-radius: 7px;
    padding: 10px;
   /* height: 20px;*/
}

.label-wraps{
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
    display: flex;
    justify-content: space-between;
  
}
.input-wraps{
    width: 100%;
    display: flex;
    gap:8px;
    padding: 5px;
}
.price-box{
    width: 50%;
    height: 55px;
    /*border-bottom: 2px solid #ddd;*/
    border:2px solid #ddd;
    padding: 15px;
    border-radius: 10px;
}
.price-box span{
    font-size: 18px;
    color: #666;
    /*font-weight: bold;*/
}
.price-box input{
    width: 85%;
    border:none;
    outline: none;
    font-size: 16px;
    color: 888;
   /* height: 20px;*/
}
.quant-box{
    width: 50%;
    height: 55px;
    /*border-bottom: 2px solid #ddd;*/
    border:2px solid #ddd;
    padding: 15px;
    border-radius: 10px;
}
.quant-box input{
    width: 100%;
    border:none;
    outline: none;
    font-size: 16px;
    color: 888;
}
.short-input{
    width: 150px;
    height: 45px;
    border:2px solid #ddd;
    border-radius: 5px;
    outline: none;
    padding-left: 30px;
} 
</style>

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

