<?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>
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;
}
</style>
<?php


// Handle Update Products
if (isset($_POST['upd-product'])) {
   
    $prodName   = $_POST['prod-name'];
    $editId     = $_POST['edit-id'];
    $unitPrice  = $_POST['price'];
    $quantity   = $_POST['quantity'];
    
    
// $imgName = "removed";
    try{
        $update = "UPDATE products 
                    SET 
                    prodName = ?, 
                    unit_price = ?,
                    quantity = ?
                    WHERE prodId = ?";
        $updatesmt = $pdo->prepare($update);
        $updatesmt->execute([$prodName, $unitPrice, $quantity,  $editId]);
        $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

        $_SESSION['message'] = "Product Updated Successfully";
        $_SESSION['type'] = "success";

    }catch(PDOExecption $e){
        echo "unable to update slider".$e->getMessage();
    }
  
}


?>

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

                    <button class="btn danger text-white" onclick="handleDelete()">
                        Remove Staff <i class="fa fa-user-minus"></i>
                    </button>
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header text-center">
                    <h5>All Staffs <i class="fa fa-users"></i></h5>
                </div>
                <div class="card-body">
                    <form action="" method="POST" id="mainForm">
                        
                        <div class="table-responsive">
                            <table id="example" class="display table table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th><input type="checkbox" id="SelectAllBoxes"></th>
                                        <th>S/N</th>
                                        <th>Names</th>
                                        <th>Email</th>
                                        <th>Roles</th>
                                        
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php
                                    $sn = 0;
                                    $fetch = "SELECT * FROM staff";
                                    $stmt = $pdo->prepare($fetch);
                                    $stmt->execute();
                                    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                                        $sn = $sn + 1;
                                        $staffId    = $row['staffId'];
                                        $names      = $row['fullname'];
                                        $email      = $row['email'];
                                        $role       = $row['roles'];
                                        $mobile     = $row['phone_number'];
                                        ?>
                                        <tr>
                                            <td>
                                                <input type="checkbox" name="checkBoxArray[]" 
                                                value="<?= $prodId ?>" class='checkBoxes'>
                                            </td>
                                            <td><?= $sn ?></td>
                                            <td>
                                                <?=$names?>
                                            </td>
                                            <td>
                                                <?=$email?>
                                            </td>
                                            <td><?=$role?></td>
                                            
                                            <td class="text-center">
                                                <button type="button" class="btn btn-sm btn-primary" onclick="openModal('modal-<?= $staffId ?>')">
                                                    Edit <i class="fa fa-edit"></i>
                                                </button>

                                                <button type="button" class="btn btn-sm invoice text-white" onclick="openModal('modal-<?= $staffId ?>')">
                                                    Assign <i class="fa fa-edit"></i>
                                                </button>
                                            </td>
                                        </tr>
                                        
                                    <?php }?>
                                </tbody>
                            </table>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Add New Modal -->
        <div class="modal">
            <div class="modal-content" style="margin-top:50px;">
                <div class="modal-header text-success">Assign role for yourname <i class="fa fa-plus-circle"></i></div>
                <div class="modal-body">
                    <form action="" method="POST">
                        <div class="row">
                            
                            <div class="col-lg-12 mt-3">
                                <label>Select Role</label>
                                <div class="my-input">
                                    <select name="role">
                                        <option hidden="" >Select Role</option>
                                        <option value="Admin">Admin</option>
                                        <option value="Principal">Principal</option>
                                        <option value="Vice Principal">Vice Principal</option>
                                        <option value="Class Teacher">Class Teacher</option>
                                        <option value="Teacher">Teacher</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <h6 class="mt-4 mb-3">Select Class</h6>
                                <div class="class-box">
                                    <label class="class-item">
                                        <input type="checkbox" name="class[]" value="JSS1">
                                        <span>JSS1</span>
                                    </label>
                                    <label class="class-item">
                                        <input type="checkbox" name="class[]" value="JSS2">
                                        <span>JSS2</span>
                                    </label>
                                    <label class="class-item">
                                        <input type="checkbox" name="class[]" value="JSS3">
                                        <span>JSS3</span>
                                    </label>
                                    <label class="class-item">
                                        <input type="checkbox" name="class[]" value="SS1">
                                        <span>SS1</span>
                                    </label>
                                    <label class="class-item">
                                        <input type="checkbox" name="class[]" value="Primary 4">
                                        <span>Primary 4</span>
                                    </label>
                                    <label class="class-item">
                                        <input type="checkbox" name="class[]" value="Primary 5">
                                        <span>Primary 5</span>
                                    </label>
                                    <label class="class-item">
                                        <input type="checkbox" name="class[]" value="Primary 6">
                                        <span>Primary 6</span>
                                    </label>
                                    <label class="class-item">
                                        <input type="checkbox" name="class[]" value="SS2">
                                        <span>SS2</span>
                                    </label>
                                </div>
                            </div>

                        </div>

                        <div class="modal-footer" style="margin-top: 20px;">
                            
                            <button name="add-user" class="btn btn-success">Add User <i class="fa fa-user-plus"></i></button>
                        </div>
                        
                    </form>
                </div>
                
            </div>
        </div>
   
    </div>
</div>
<style type="text/css">
.class-box {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding: 10px 0;
    scrollbar-width: thin;
}

.class-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    white-space: nowrap;
    background-color: #f9f9f9;
    cursor: pointer;
    transition: all 0.2s ease;
}

.class-item:hover {
    background-color: #eef5ff;
    border-color: #5a9bff;
}

.class-item input[type="checkbox"] {
    accent-color: #007bff;
}

</style>

<?php
if (isset($_POST['add-user'])) {
    $email = $_POST['email'];
    $name   = $_POST['name'];
    $mobile = $_POST['mobile'];
    $roles  = $_POST['role'];
    $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);
        $insert = "INSERT INTO staff (fullname, email, phone_number, password, roles) 
                    VALUES(?, ?, ?, ?, ?)";
        $insertpdo = $pdo->prepare($insert);
        if ($insertpdo->execute([$name, $email, $mobile, $valPass, $roles])) {
            if ($roles == 'Admin') {
                $instro = "INSERT INTO admin (fullname, email, phone_number, password, roles)
                            VALUES(?, ?, ?, ?, ?)";
                $thestmt = $pdo->prepare($instro);
                $thestmt->execute([$name, $email, $mobile, $valPass, $roles]);
            }

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

            ?>
            <script type="text/javascript">
              setTimeout("location.href='javascript:history.back()';", 2000);
            </script>
            <?php 
        }else{
            $_SESSION['message'] = 'Something went wrong.';
            $_SESSION['type'] = 'error';

        }
        
    }

}
?>
<?php
if (isset($_POST['upd-std'])) {
    $resultId   = $_POST['resultId'];
    
}
?>

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

   
   
</script>


<!-- Modal Styling -->
<style>
    .modal {
        position: fixed;
        z-index: 99999;
        left: 0; top: 0;
        width: 100%; 
        height: 100%;
        overflow: auto;
        background-color: rgba(0,0,0,0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;

    }

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

    .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';?>

