EVOLUTION-NINJA

Edit File: user_managment.php

<?php echo view('includes/home_sidebar');?>
<main id="rightDiv">
    <style>
        #leftDiv {
            height: 1260px !important;
        }

.v-e-d {
            font-size: 13px;
            font-weight: 600;
            border: none;
            outline: none;
            padding: 3px 8px;
            border-radius: 5px;
            min-width: 75px;
            color: white;
            margin-left: 3px;
        }

#view--details {
            background-color: #0065A3;
        }

#Edit--button {
            background-color: chocolate;
        }

#delete--button {
            background-color: #034c5f;
        }

/* -----------STUDENT OVERALL DETAILS-student-------------- */
        .overall-details-student {
            padding: 6px;
            display: grid;
            grid-template-columns: 1fr;
            grid-auto-rows: auto;
            height: auto;
            gap: 15px;
        }

.overall-details-student>div {
            padding: 4px 7px;
        }

.overall-details-student>div h5 {
            color: #123053;
            font-size: 17px;
            font-weight: 600;
        }

/* ------------STUDENT INFORMATION---------- */
        .student-information1 {
            height: auto;
            background-color: #219F94;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 7px 4px;
            position: relative;
            padding: 7px;
            border-radius: 4px;
        }

.student-information1 .stud-detail-model {
            padding: 3px 8px;
            color: white;
            font-size: 15px;
            font-weight: 400;

}

.student-information1 .stud-detail-model:last-child {
            position: relative;
            left: 30px;
        }

/* new function */
        .new-function {
            background-color: #219F94;
            color: white;
            padding: 12px 10px;
            border-radius: 6px;
            font-size: 16px;
            margin-left: 0px;
        }

.modal-dialog .modal-content {
            width: 113% !important;
            padding-right: 10px;

}

#excelform {
            background: #A5DD9B;
            padding: 7px;
        }

@media only screen and (max-width: 728px) {
            .Add-student {
                width: 100vw;
                display: block;
            }
        }

#datatable thead tr {
            background-color: rgba(0, 72, 76, 1) !important;
            color: white;
        }
        .save--changes,.save--changes:hover {
            background-color: teal;
            color: white;
            border: none;
            outline: none;
            padding: 8px 12px;
            border-radius: 4px;
            font-size: 14px;
            font-weight: 500;
        }
        .edit--butt,.edit--butt:hover {
            color: white;
            background-color: #c87221;
        }
    </style>
    <div class="container-fluid">
        <div class="row">

<div class="col-sm-12">
                
                <section class="Add-student row">
                    <div class="col-sm-4">
                        <h3 style="color: rgba(0, 72, 76, 1);">User Management</h3>
                    </div>
                    <div class="col-sm-7"></div>
                    <div class="col-sm-1">
                        <button class="btn back-butt" onclick="goBack()"><i class="fa fa-arrow-left"
                                aria-hidden="true"></i>&nbsp;Back</button>
                    </div>

</section>
                <!-- <section class="Add-student">

<button class="btn back-butt" onclick="goBack()"><i class="fa fa-arrow-left"
                            aria-hidden="true"></i>&nbsp;Back</button>
                </section> -->
                <table id="datatable" class="display" style="width:100%">
                    <thead>
                        <tr>
                            <th>SL no</th>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Role Name</th>
                            <th>Role </th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>

</section>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.10.8/dist/sweetalert2.all.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.10.8/dist/sweetalert2.min.css" rel="stylesheet">
<script>
    $(document).ready(function () {
        var table = $('#datatable').DataTable({
            ajax: {
                url: '<?php echo base_url("user-management"); ?>',
                dataSrc: ''
            },
            columns: [
                { data: null },
                { data: 'id', visible: false },
                { data: 'username' },
                { data: 'role_name' },
                { data: 'role' ,visible: false },
                {
                    data: null,
                    render: function (data, type, row) {
                        return `<div class="crud--buttons" >
                        <button class="btn edit--butt v-e-d"  id="Edit--button"  onclick='Edituser(${row.id},${row.role})' >Edit  </button>
                        <button class="btn delete--butt v-e-d" id="delete--button" onclick='Deleteuser(${row.id})'>Delete  </button>
                    </div>`;
                    }
                }
            ],
            rowCallback: function (row, data, index) {
                $('td:eq(0)', row).html(index + 1);
            },
            language: {
                emptyTable: "No data available"
            }
        });
    });

function Deleteuser(id) {
        // console.log(id)
        Swal.fire({
            title: "Are you sure?",
            text: "You won't be able to revert this!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: "Yes, delete it!"
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    type: 'post',
                    url: '<?php echo base_url("user-delete");?>?id=' + id,
                    contentType: false,
                    processData: false,
                    success: function (response) {
                        if (response.result == 1) {
                            Swal.fire({
                                title: "Deleted!",
                                text: "Data has been deleted.",
                                icon: "success",
                            }).then(function () {
                                $('#datatable').DataTable().ajax.reload();
                            })
                        }
                    }
                })

}
        });
    }

</script>
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editModalLabel">Access Control</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="promoteform">
                    <div class="modal-body fee-modal">
                        <input type="hidden" name="id" id="eid" />
                        <label for="modepy">Promote</label>
                        <select name="type" id="type" class="form-control" required>
                            <option value="" selected>Select</option>
                            <option value="1">Admin</option>
                            <option value="2">Trainer</option>
                        </select>
                        <br>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary-color edit--butt" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" id='collect-btn' class="btn btn-primary-color save--changes">SUBMIT</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
<script>
    // promote
    function Edituser(id ,role){
        $('#eid').val(id);
        $('#type').val(role);
        
        $('#editModal').modal('show');
    }

$(document).ready(function(){
        $('#promoteform').submit(function(e){
            e.preventDefault();
            var formdata = new FormData($(this)[0]);
            $.ajax({
            type: 'post',
            url: '<?php echo base_url("promote-update");?>',
            data: formdata,
            contentType: false,
            processData: false,
            success: function (response) {
                if (response.result == 1) {
                    Swal.fire({ icon: "success", title: response.message, showConfirmButton: false, timer: 2000 });
                    $('#editModal').modal('hide');
                    $('#datatable').DataTable().ajax.reload();
                } else {
                    Swal.fire({ icon: "error", title: response.message, showConfirmButton: false, timer: 1000 });
                    $('#editModal').modal('hide');
                }
            },
            error: function (xhr, textStatus, errorThrown) {
                console.error(xhr.responseText);
                Swal.fire({ icon: "error", title: "An error occurred", showConfirmButton: false, timer: 1000 });
            },
        });
        })
    })
    </script>

<script>
    function goBack() {
        window.location.href = 'dashboard';
    }
    function add() {
        window.location.href = 'form';
    }
</script>
<?php echo view('includes/footer'); ?>