<?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;
}

.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;
}
</style>
<?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">
                <h5> Sessions | </h5>
                <div>
                    <button class="btn btn-sm info text-white" onclick="openModal('modal-add')">
                        <i class="fa fa-plus"></i> Add Session
                    </button>

                    <button class="btn btn-sm success text-white" onclick="handleDelete()">
                       <i class="fa fa-check-circle"></i> Activate
                    </button>
                </div>
            </div>

            <div class="card mt-3">
                <!-- <div class="card-header text-center">
                    <h5>All Students <i class="fa fa-users"></i></h5>
                </div> -->
                <div class="card-body">
                    <form action="" method="POST" id="mainForm">
                        <!-- 
                        <div id="modal-delete" class="modal">
                            <div class="modal-content" style="margin-top:150px;">
                                <div class="modal-header">Confirmation</div>
                                <div class="modal-body">Are you sure you want to set session to 
                                    <?=$sessionYear?> ?</div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" onclick="closeModal('modal-delete')">No, Cancel</button>
                                    <button type="submit" name="DeleteBtn" class="btn btn-danger">Yes, Delete</button>
                                </div>
                            </div>
                        </div> -->
                        
                        <div class="table-responsive">
                            <table id="example" class="display table table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th><!-- <input type="checkbox" id="SelectAllBoxes"> --></th>
                                        <th>Session Year</th>
                                        <th>Status</th>
                                        
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php
                                    $snr = 0;
                                    $fetch = "SELECT * FROM sessions order by session_year DESC";
                                    $stmt = $pdo->prepare($fetch);
                                    $stmt->execute();
                                    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                                        $snr = $snr + 1;
                                        $sessionId    = $row['sessionId'];
                                        $sessionYear  = $row['session_year'];
                                        $status       = $row['status'];

                                        if ($status == 'active') {
                                            $getStatus = "class='btn btn-sm invoice text-white'";
                                        }else{
                                            $getStatus = " ";
                                        }
                                    
                                        ?>
                                        <tr>
                                            <td>
                                                
                                                <input type="radio" name="sessionYear" 
                                                value="<?= $sessionYear ?>" 
                                                data-session="<?= $sessionYear ?>" 
                                                class="checkBoxes">
                                            </td>
                                            <td>
                                                <?=$sessionYear?>
                                            </td>
                                            <td>
                                                <label <?=$getStatus?>><?=$status?></label>
                                                
                                            </td>
                                            
                                            
                                            <td class="text-center">
                                                <button type="button" class="btn btn-sm btn-primary" onclick="openModal('modal-<?= $sessionId ?>')">
                                                    <i class="fa fa-edit"></i> Edit
                                                </button>

                                                
                                            </td>
                                                <!-- Edit Modal -->
                                                <?php EditSession();?>
                                                
                                        </tr>

                                        <!-- Confirmation Modal -->
                                        <div id="modal-delete" class="modal" style="display: none;">
                                            <div class="modal-content" style="margin-top: 150px;">
                                                <div class="modal-header">
                                                    <h4>Confirmation</h4>
                                                </div>
                                                <div class="modal-body">
                                                    <p id="sessionConfirmText">Are you sure you want to change the session year?</p>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary" onclick="closeModal('modal-delete')">No, Cancel</button>
                                                    <button type="submit" name="UpdateBtn" class="btn btn-danger">Yes, Change</button>
                                                </div>
                                            </div>
                                        </div>
                                        
                                    <?php }  ?>
                                </tbody>
                            </table>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Add Modal -->
        <div id="modal-add" class="modal">
            <div class="modal-content" style="margin-top:50px;">
                <div class="modal-header text-success">Add New Session <i class="fa fa-plus-circle"></i></div>
                <div class="modal-body">
                    <form action="" method="POST">
                        <div class="single-input">
                            <label>Session Year</label>
                            <div class="my-input">
                                <input type="text" required="" autocomplete="off" name="new_session" placeholder="e.g 2024/2025">
                            </div>
                        </div>

                        <div class="modal-footer mt-4">
                            <button type="button" class="btn btn-danger" onclick="closeModal('modal-add')">Cancel <i class="fa fa-cancel"></i> &times;</button>
                            <!-- Add product button -->
                            <button name="add-session" class="btn btn-success">Add Session <i class="fa fa-plus-circle"></i></button>
                        </div>
                        
                    </form>
                </div>
                
            </div>
        </div>
   
    </div>
</div>

<?php
if (isset($_POST['upd-session'])) {
    $newSession       = $_POST['new_session'];
    $sessionId          = $_POST['sessionId'];
    

    // update now
    $upStd = "UPDATE sessions SET session_year = ? WHERE sessionId = ? ";
    $upStmt = $pdo->prepare($upStd);
    $upStmt->execute([$newSession, $sessionId]);

    $_SESSION['message'] = 'Session Updated Successfully.';
    $_SESSION['type'] = 'success';

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

// Handle Delete Slider
if (isset($_POST['UpdateBtn'])) {
    if (!empty($_POST['sessionYear'])) {
        $NewSession = $_POST['sessionYear'];

        // change existing status
        $chOldStatusTo   = 'inactive';
        $frmOldStatus       = 'active';
        $rmstatus = "UPDATE sessions SET status = ? WHERE status = ?";
        $rmstmt = $pdo->prepare($rmstatus);
        $rmstmt->execute([$chOldStatusTo, $frmOldStatus]);

        // Set New Status
        $newStatus = 'active';
        $query = "UPDATE sessions SET status = ? WHERE session_year = ?";
        $newStmt = $pdo->prepare($query);
        $newStmt->execute([$newStatus, $NewSession]);

        $_SESSION['message'] = 'Status Updated Successfully.';
        $_SESSION['type'] = 'success';

        ?>
        <script type="text/javascript">
          setTimeout("location.href='javascript:history.back()';", 2000);
        </script>
        <?php 
    }
}
?>
<style type="text/css">
    .class-box{
        margin-top: 20px;
        width: 100%;
        height: 100px;
        display: flex;
        gap:25px;
        padding-bottom: 20px;
        overflow-x: auto;
    }
    .sing-box{
        padding: 5px;
        border:1px solid #ccc;
        border-radius: 5px;
    }
</style>

<?php
if (isset($_POST['add-session'])) {
    $new_session   = $_POST['new_session'];
    // valiate session year
    $valis = "SELECT session_year FROM sessions WHERE session_year = ?";
    $valiStmt = $pdo->prepare($valis);
    $valiStmt->execute([$new_session]);
    $validate = $valiStmt->rowCount();
    if ($validate == TRUE) {
        $_SESSION['message'] = 'Session Year already exist.';
        $_SESSION['type'] = 'error';
        
    }else{

    $status         = 'inactive';
    $insert = "INSERT INTO sessions(session_year, status) VALUES(?, ?)";
    $insertpdo = $pdo->prepare($insert);
    $insertpdo->execute([$new_session, $status]);
        
        $_SESSION['message'] = 'Session Added Successfully.';
        $_SESSION['type'] = 'success';

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


}
?>


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



<!-- 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);
        });
    });
    language: {
      emptyTable: "No Session Added Yet. Click 'Add New' to add session."
    }

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

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

   
</script>

<script>
    

    function handleDelete() {
        const selected = document.querySelector("input[name='sessionYear']:checked");
        if (!selected) {
            showCustomAlert("Please select a session year to activate.");
            return;
        }

        const selectedYear = selected.getAttribute("data-session");
        document.getElementById("sessionConfirmText").textContent = 
            `Are you sure you want to change the session year to ${selectedYear}?`;
        
        openModal('modal-delete');
    }

    // Custom alert modal (optional but better UX)
    function showCustomAlert(message) {
        const alertBox = document.createElement('div');
        alertBox.style.position = 'fixed';
        alertBox.style.top = '20px';
        alertBox.style.left = '50%';
        alertBox.style.transform = 'translateX(-50%)';
        alertBox.style.background = '#C74628';
        alertBox.style.color = '#fff';
        alertBox.style.padding = '15px 25px';
        alertBox.style.borderRadius = '5px';
        alertBox.style.boxShadow = '0 2px 10px rgba(0,0,0,0.2)';
        alertBox.style.zIndex = '10000';
        alertBox.textContent = message;

        document.body.appendChild(alertBox);
        setTimeout(() => {
            alertBox.remove();
        }, 3000);
    }
</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;
}
@media(max-width: 992px){
    .modal-content{
        width: 90%;
    }
}

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

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

