EVOLUTION-NINJA

Edit File: timetable_list.php

<?php echo view('includes/home_sidebar');?>

.add-timetable-heading {
        margin: 0;
        padding: 3px;
        align-self: center;
        color: #003352;
        font-size: 20px;
        font-weight: 600;
    }

.back-butt {
        color: #606060;
        font-size: 21px;
        font-weight: 500;
        outline: none;
        border: none
    }

.add-timetable {
        background-color: #EFF3FC;
        padding: 15px 25px;
    }

.add-timetable label {
        padding: 5px 10px;
        font-size: 15px;
        margin-block: 4px;
        font-weight: 500;
        color: #606060;
    }

.star-mad {
        color: #c83434;
        font-size: 20px;
        position: relative;
        top: 2px;
    }

.inp-boxes-addtimetable {
        border: none;
        box-shadow: 0px 0px 3px #ccc;
        background-color: white !important;
    }

/* .time-table{
        border-spacing:7px 10px;
        border-collapse: separate;
     }  */

.timetable-block th {
        color: #0065A3;
        font-size: clamp(6px, 2vw, 11px);
    }

.timetable-block td {
        text-align: center;
        /* padding:0 */
    }

.m-s {
        font-size: 14px !important;
    }

.timetable-block [type="checkbox"] {
        width: 100%;
        height: 20px;
    }

.add-timetable-button {
        color: white;
        width: 15%;
        background: linear-gradient(#4E79FF, #71ACFF);
        border: none;
        outline: none;
        font-size: 18px;
        padding: 5px 4px;
        font-weight: 500;
        float: inline-end;
        position: absolute;
        bottom: -30px;
        right: 0;
    }

.timetable-block [type="checkbox"]:checked {
        accent-color: green;
        /* opacity: 0;
        display: block;
        height: 100%; */
    }

@media screen and (max-width:728px) {

.add-timetable-block,
        .add-timetable,
        .timetable-block {
            width: 97vw;
        }

.add-timetable-button {
            width: 50%;
            right: auto;
        }
    }
    #datatable thead tr {
    background-color: rgba(0, 72, 76, 1) !important;
    color: white;
}
</style>
<div class="container-fluid">
    <div class="row">

<section class="add-timetable-block">

<h5 class="add-timetable-heading">Timetable List</h5>
                <button class="btn back-butt"><i class="fa fa-arrow-left" aria-hidden="true"></i>&nbsp;Back</button>
            </section>

<div class="table-box">
                <table id="datatable" class="display" style="width:100%">
                    <thead>
                        <tr>
                            <th>SL no</th>
                            <th>ID</th>
                            <th>Batch Number</th>
                            <th>Created By</th>
                            <th>Created at</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>

</tbody>
                </table>
            </div>
        </div>
    </div>

});

function Delete(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("timetable-delete");?>?id=' + id,
                    contentType: false,
                    processData: false,
                    success: function (response) {
                        if (response.result == 1) {
                            Swal.fire({
                                title: "Deleted!",
                                text: "Your file has been deleted.",
                                icon: "success",
                            }).then(function () {
                                $('#datatable').DataTable().ajax.reload();
                            })
                        }
                    }
                })

}
        });
    }

function edit(id){
        window.location.href='<?php echo base_url("edit-timetable");?>?id='+id;
    }
    </script>
    <script>
        function toggleCheckboxes(rowId, checkbox) {

checkbox.required = true;

// row.querySelectorAll('td').forEach(function (td) {
            //     td.style.backgroundColor = '';
            // });
            // var index = Array.prototype.indexOf.call(row.children, checkbox.parentElement);

// var td = row.cells[index];
            // if (checkbox.checked) {
            //     td.style.backgroundColor = 'green';
            // }
            // else {
            //     td.style.backgroundColor = '';
            // }
        }

</script>