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



// Handle Delete Slider
if (isset($_POST['DeleteBtn'])) {
    if (!empty($_POST['checkBoxArray'])) {
        foreach ($_POST['checkBoxArray'] as $userId) {

           
            // Then delete from the products table
            $delete = "DELETE FROM users WHERE userId = ?";
            $delStmt = $pdo->prepare($delete);
            $delStmt->execute([$userId]);
            $_SESSION['message'] = "User deleted Successfully";
            $_SESSION['type'] = "success";
        }
    }
}
?>

<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>Manage Users</h5>
                <div>
                    <button class="btn btn-success" onclick="openModal('modal-add')">Add New <i class="fa fa-plus-circle"></i></button>
                    <button class="btn btn-danger" onclick="handleDelete()">Delete Now <i class="fa fa-trash"></i></button>
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header text-center">
                    <h5>All Users</h5>
                </div>
                <div class="card-body">
                    <form action="" method="POST">
                        <!-- 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 User?</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>ID</th>
                                        <!-- <th>Images</th> -->
                                        <th>Name</th>
                                        <th>Mobile</th>
                                        <th>Email</th>
                                        <th>Roles</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody id="loadUsers">
                                    
                                </tbody>
                            </table>
                        </div>
                    </form>
                </div>
            </div>
            <!-- Add New Modal -->
            <div id="modal-add" class="modal">
                <div class="modal-content" style="margin-top:50px;">
                    <div class="modal-header text-success">Add New User <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>Email Address</label>
                                        <div class="my-input">
                                            <input type="email" required="" autocomplete="off" name="email" placeholder="Email address">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="single-input">
                                        <label>Username/Names</label>
                                        <div class="my-input">
                                            <input type="text" required="" autocomplete="off" name="name" placeholder="Username">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="single-input">
                                        <label>Phone Number</label>
                                        <div class="my-input">
                                            <input type="number" required="" autocomplete="off" name="mobile" placeholder="GSM">
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-lg-6">
                                    <div class="single-input">
                                        <label>New Password</label>
                                        <div class="my-input">
                                            <input type="password" required="" autocomplete="off" name="password" placeholder="New Password">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="single-input">
                                        <label>Confirm Password</label>
                                        <div class="my-input">
                                            <input type="password" required="" autocomplete="off" name="confirm" placeholder="Password again">
                                        </div>
                                    </div>
                                </div>
                                <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="Sales Person">Sales Person</option>
                                            <option value="Cashier">Cashier</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="modal-footer">
                                <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-user" class="btn btn-success">Add User <i class="fa fa-user-plus"></i></button>
                            </div>
                            
                        </form>
                    </div>
                    
                </div>
            </div>
        </div>
   
    </div>
</div>

<?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 users (name, email_address, phone_number, roles, password) 
                    VALUES(?, ?, ?, ?, ?)";
        $insertpdo = $pdo->prepare($insert);
        if ($insertpdo->execute([$name, $email, $mobile, $roles, $valPass])) {
            $_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 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 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); }
    }

    /*.input-group button{
      background: #fff; 
      border-top-right-radius: 1px; 
      border-bottom-right-radius: 1px; 
      outline: none; 
      border:0.9px solid gray
    }
    .input-group input{
      border:0.9px solid gray
    }*/
    
    .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';?>

<!-- <script>
    function Loadusers(){
        fetch("refresh/load_users.php",{
            method: 'POST'
        })
        .then(response=>{
            if (!response.ok) {
                throw new Error("Network Error");
            }
            return response.text();
        })
        .then(data=>{
            document.getElementById('loadUsers').innerHTML = data;
        })
        .catch(error=>{
            console.log('Something went wrong');
        })
    }
    Loadusers();
    setInverval(Loadusers, 2000);
</script> -->