<?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;
}
@media(max-width: 992px){
    .text-sm{
        font-size: 12px;
    }
    input[type='checkbox']{
    width: 12px;
    height: 12px;
    }
}
</style>
<?php

$totalClass = $pdo->query("SELECT COUNT(*) FROM classes")->fetchColumn();
?>

<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></h5>
                <div>
                    <button class="btn btn-sm info text-white" onclick="openModal('modal-add')">
                        <i class="fa fa-plus-circle"></i> Add New 
                    </button>

                    <button class="btn btn-sm danger text-white" onclick="handleDelete()">
                        <i class="fa fa-trash"></i> Remove Class
                    </button>
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header text-left d-flex justify-content-between align-items-center">
                    <h5>All Classes</h5>
                    <span class="badge bg-primary me-2">Total: <?= $totalClass ?></span>
                </div>
                <div class="card-body">
                    <form action="" method="POST" id="mainForm">
                        <!-- Delete Confirmation Modal -->
                        <div id="modal-delete" class="modal">
                            <div class="modal-content" style="margin-top:150px;">
                                <div class="modal-header">Delete Confirmation</div>
                                <div class="modal-body">Are you sure you want to delete the selected Class(s)?</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 class="text-sm">S/N</th>
                                        <th class="text-sm">Class</th>
                                        <!-- <th>Teacher</th> -->
                                        <th class="text-sm">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php
                                    $snr = 0;
                                    $fetch = "SELECT * FROM classes";
                                    $stmt = $pdo->prepare($fetch);
                                    $stmt->execute();
                                    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                                        $snr = $snr + 1;
                                        $classId      = $row['classId'];
                                        $className   = $row['className'];
                                       
                                        ?>
                                        <tr>
                                            <td>
                                                <input type="checkbox" name="checkBoxArray[]" 
                                                value="<?= $classId ?>" class='checkBoxes'>
                                            </td>
                                            <td class="text-sm"><?= $snr ?></td>
                                            <td class="text-sm">
                                                <?=$className?>
                                            </td>
                                            
                                            <td class="text-center">
                                                <button type="button" class="btn btn-sm btn-primary" onclick="openModal('editModal-<?= $classId ?>')">
                                                    Edit <i class="fa fa-edit"></i>
                                                </button>
                                            </td>

                            <!-- Edit Modal -->
                            <div id="editModal-<?=$classId?>" class="modal">
                                <div class="modal-content" style="margin-top:50px;">
                                    <div class="modal-header text-success">Add New Class <i class="fa fa-plus-circle"></i></div>
                                    <div class="modal-body">
                                        <form action="" method="POST">
                                            <div class="row">
                                                <input type="hidden" name="classId" value="<?=$classId?>">
                                                <div class="col-lg-12">
                                                    <div class="single-input">
                                                        <label>Enter New Class</label>
                                                        <div class="my-input">
                                                            <input type="text" 
                                                            required="" 
                                                            autocomplete="off" 
                                                            name="new_class" 
                                                            value="<?=$className?>" 
                                                            placeholder="New Class">
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                            </div>

                                            <div class="modal-footer mt-4">
                                                <button type="button" class="btn btn-danger" onclick="closeModal('editModal-<?=$classId?>')">Cancel <i class="fa fa-cancel"></i> &times;</button>
                                                <!-- Add product button -->
                                                <button name="edit-class" class="btn btn-success"><i class="fa fa-sync"></i> Update Class</button>
                                            </div>
                                            
                                        </form>
                                    </div>
                                    
                                </div>
                            </div>
                                            
                                        </tr>

                                        
                                    <?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 Class <i class="fa fa-plus-circle"></i></div>
                <div class="modal-body">
                    <form action="" method="POST">
                        <div class="row">
                            
                            <div class="col-lg-12">
                                <div class="single-input">
                                    <label>Enter New Class</label>
                                    <div class="my-input">
                                        <input type="text" required="" autocomplete="off" name="new_class" placeholder="New Class">
                                    </div>
                                </div>
                            </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-class" class="btn btn-success">Add Class <i class="fa fa-user-plus"></i></button>
                        </div>
                        
                    </form>
                </div>
                
            </div>
        </div>
   
    </div>
</div>

<?php
// Handle Delete Class
if (isset($_POST['DeleteBtn'])) {
    if (!empty($_POST['checkBoxArray'])) {
        foreach ($_POST['checkBoxArray'] as $classId) {

            $delete = "DELETE FROM classes WHERE classId = ?";
            $delStmt = $pdo->prepare($delete);
            $delStmt->execute([$classId]);
            $_SESSION['message'] = "Class(s) deleted 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-class'])) {
    $new_class  = $_POST['new_class'];

    // Validate Class
    $valClas = "SELECT className FROM classes WHERE className = ? ";
    $valStmt = $pdo->prepare($valClas);
    $valStmt->execute([$new_class]);
    $validate = $valStmt->rowCount();
    if ($validate > 0) {
        $_SESSION['message'] = 'Class already exist';
        $_SESSION['type'] = 'error';
    }else{
        $insert = "INSERT INTO classes (className) VALUES(?)";
        $insertpdo = $pdo->prepare($insert);
        $insertpdo->execute([$new_class]);

        $_SESSION['message'] = 'Class Added Successfully.';
        $_SESSION['type'] = 'success';

        ?>
        <script type="text/javascript">
          setTimeout("location.href='javascript:history.back()';", 2000);
        </script>
        <?php   
    }
    
}
if (isset($_POST['edit-class'])) {
    $new_class = $_POST['new_class'];
    $classId = $_POST['classId'];

    $upda = "UPDATE classes SET className = ? WHERE classId = ?";
    $updaStmt = $pdo->prepare($upda);
    $updaStmt->execute([$new_class, $classId]);

    $_SESSION['message'] = 'Class Updated 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);
        });
    });

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

