EVOLUTION-NINJA
Edit File: add_timetable.php
<?php echo view('includes/home_sidebar');?> <style> .add-timetable-block { display: flex; justify-content: space-between; padding: 8px; border-bottom: 3px solid #8D8D8D; } .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; } } </style> <div class="container-fluid"> <div class="row"> <div class="col-sm-12"> <!-- -----ADDTIMETABLE eAND BACK BUTTON---------- --> <section class="add-timetable-block"> <h5 class="add-timetable-heading">Add Timetable</h5> <button class="btn back-butt"><i class="fa fa-arrow-left" aria-hidden="true"></i> Back</button> </section> <form id="timetableform"> <section> <div class="add-timetable"> <div class="row"> <div class="col-sm-4"> <label for="selectbatch">Select Batch<span class="star-mad">*</span></label></br> <select class="form-select inp-boxes-addtimetable" name="batch_id" id="selectbatch" required> </select> </div> <div class="col-sm-4"> <!-- <label for="trainername">Trainer Name<span class="star-mad">*</span></label></br> <input type="text" class="form-control inp-boxes-addtimetable" id="trainername" readonly> --> </div> </div> </div> </section> <section> <div class="timetable-block mt-5" style="overflow-y: auto;"> <table class="table table-bordered time-table"> <thead> <tr> <th>Time Table</th> <th scope="col">9-10am</th> <th scope="col">9:30-10-30am</th> <th scope="col">10-11am</th> <th scope="col">10:30-11:30 am</th> <th scope="col">11am-12pm</th> <th scope="col">11:30am-12:30pm</th> <th scope="col">12-1pm</th> <th scope="col">12:30-1:30pm</th> <th scope="col">1-2pm</th> <th scope="col">1:30-2:30pm</th> <th scope="col">2-3pm</th> <th scope="col">2:30-3:30pm</th> <th scope="col">3-4pm</th> <th scope="col">3:30-4:30pm</th> <th scope="col">4-5pm</th> <th scope="col">4:30-5:30pm</th> <th scope="col">5-6pm</th> <th scope="col">5:30-6:30pm</th> </tr> </thead> <tbody> <tr id="row1"> <th scope="row">Monday</th> <td><input type="checkbox" onclick="toggleCheckboxes('row1', this)" name="monday" value="1" required></td> <td><input type="checkbox" onclick="toggleCheckboxes('row1', this)" name="monday" value="2"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row1', this)" name="monday" value="3"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row1', this)" name="monday" value="4"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row1', this)" name="monday" value="5"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row1', this)" name="monday" value="6"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row1', this)" name="monday" value="7"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row1', this)" name="monday" value="8"></td> <!-- <td><input type="checkbox" onclick="toggleCheckboxes('row1', this)" name="monday" value="9"></td> --> <td rowspan='6' style="vertical-align: middle;"> L<br>u<br>n<br>c<br>h<br><br> B<br>r<br>e<br>a<br>k<br></td> <td><input type="checkbox" onclick="toggleCheckboxes('row1', this)" name="monday" value="10"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row1', this)" name="monday" value="11"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row1', this)" name="monday" value="12"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row1', this)" name="monday" value="13"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row1', this)" name="monday" value="14"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row1', this)" name="monday" value="15"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row1', this)" name="monday" value="16"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row1', this)" name="monday" value="17"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row1', this)" name="monday" value="18"></td> </tr> <tr id="row2"> <th scope="row">tuesday</th> <td><input type="checkbox" onclick="toggleCheckboxes('row2', this)" name="tuesday" value="1" required></td> <td><input type="checkbox" onclick="toggleCheckboxes('row2', this)" name="tuesday" value="2"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row2', this)" name="tuesday" value="3"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row2', this)" name="tuesday" value="4"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row2', this)" name="tuesday" value="5"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row2', this)" name="tuesday" value="6"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row2', this)" name="tuesday" value="7"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row2', this)" name="tuesday" value="8"></td> <!-- <td><input type="checkbox" onclick="toggleCheckboxes('row2', this)" name="tuesday" value="9"></td> --> <td><input type="checkbox" onclick="toggleCheckboxes('row2', this)" name="tuesday" value="10"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row2', this)" name="tuesday" value="11"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row2', this)" name="tuesday" value="12"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row2', this)" name="tuesday" value="13"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row2', this)" name="tuesday" value="14"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row2', this)" name="tuesday" value="15"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row2', this)" name="tuesday" value="16"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row2', this)" name="tuesday" value="17"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row2', this)" name="tuesday" value="18"></td> </tr> <tr id="row3"> <th scope="row">wednesday</th> <td><input type="checkbox" onclick="toggleCheckboxes('row3', this)" name="wednesday" value="1" required></td> <td><input type="checkbox" onclick="toggleCheckboxes('row3', this)" name="wednesday" value="2"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row3', this)" name="wednesday" value="3"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row3', this)" name="wednesday" value="4"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row3', this)" name="wednesday" value="5"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row3', this)" name="wednesday" value="6"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row3', this)" name="wednesday" value="7"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row3', this)" name="wednesday" value="8"> </td> <!-- <td><input type="checkbox" onclick="toggleCheckboxes('row3', this)" name="wednesday" value="9"> </td> --> <td><input type="checkbox" onclick="toggleCheckboxes('row3', this)" name="wednesday" value="10"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row3', this)" name="wednesday" value="11"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row3', this)" name="wednesday" value="12"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row3', this)" name="wednesday" value="13"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row3', this)" name="wednesday" value="14"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row3', this)" name="wednesday" value="15"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row3', this)" name="wednesday" value="16"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row3', this)" name="wednesday" value="17"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row3', this)" name="wednesday" value="18"> </td> </tr> <tr id="row4"> <th scope="col">Thursday</th> <td><input type="checkbox" onclick="toggleCheckboxes('row4', this)" name="thursday" value="1" required></td> <td><input type="checkbox" onclick="toggleCheckboxes('row4', this)" name="thursday" value="2"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row4', this)" name="thursday" value="3"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row4', this)" name="thursday" value="4"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row4', this)" name="thursday" value="5"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row4', this)" name="thursday" value="6"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row4', this)" name="thursday" value="7"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row4', this)" name="thursday" value="8"> </td> <!-- <td><input type="checkbox" onclick="toggleCheckboxes('row4', this)" name="thursday" value="9"> </td> --> <td><input type="checkbox" onclick="toggleCheckboxes('row4', this)" name="thursday" value="10"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row4', this)" name="thursday" value="11"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row4', this)" name="thursday" value="12"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row4', this)" name="thursday" value="13"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row4', this)" name="thursday" value="14"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row4', this)" name="thursday" value="15"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row4', this)" name="thursday" value="16"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row4', this)" name="thursday" value="17"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row4', this)" name="thursday" value="18"> </td> </tr> <tr id="row5"> <th scope="col">Friday</th> <td><input type="checkbox" onclick="toggleCheckboxes('row5', this)" name="friday" value="1" required></td> <td><input type="checkbox" onclick="toggleCheckboxes('row5', this)" name="friday" value="2"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row5', this)" name="friday" value="3"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row5', this)" name="friday" value="4"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row5', this)" name="friday" value="5"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row5', this)" name="friday" value="6"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row5', this)" name="friday" value="7"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row5', this)" name="friday" value="8"></td> <!-- <td><input type="checkbox" onclick="toggleCheckboxes('row5', this)" name="friday" value="9"></td> --> <td><input type="checkbox" onclick="toggleCheckboxes('row5', this)" name="friday" value="10"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row5', this)" name="friday" value="11"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row5', this)" name="friday" value="12"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row5', this)" name="friday" value="13"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row5', this)" name="friday" value="14"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row5', this)" name="friday" value="15"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row5', this)" name="friday" value="16"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row5', this)" name="friday" value="17"></td> <td><input type="checkbox" onclick="toggleCheckboxes('row5', this)" name="friday" value="18"></td> </tr> <tr id="row6"> <th scope="col">Saturday</th> <td><input type="checkbox" onclick="toggleCheckboxes('row6', this)" name="saturday" value="1" required></td> <td><input type="checkbox" onclick="toggleCheckboxes('row6', this)" name="saturday" value="2"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row6', this)" name="saturday" value="3"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row6', this)" name="saturday" value="4"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row6', this)" name="saturday" value="5"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row6', this)" name="saturday" value="6"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row6', this)" name="saturday" value="7"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row6', this)" name="saturday" value="8"> </td> <!-- <td><input type="checkbox" onclick="toggleCheckboxes('row6', this)" name="saturday" value="9"> </td> --> <td><input type="checkbox" onclick="toggleCheckboxes('row6', this)" name="saturday" value="10"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row6', this)" name="saturday" value="11"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row6', this)" name="saturday" value="12"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row6', this)" name="saturday" value="13"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row6', this)" name="saturday" value="14"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row6', this)" name="saturday" value="15"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row6', this)" name="saturday" value="16"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row6', this)" name="saturday" value="17"> </td> <td><input type="checkbox" onclick="toggleCheckboxes('row6', this)" name="saturday" value="18"> </td> </tr> </tbody> <div> <button type="submit" class="submit-student-form add-timetable-button mx-3" id="app-btn">Create Timetable</button> </div> </table> </div> </section> </form> </div> </div> <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> // Application form $(document).ready(function () { $('#timetableform').submit(function (e) { e.preventDefault(); var formdata = new FormData($(this)[0]); $('#app-btn').text('Creating...'); $('#app-btn').attr('disabled', 'disabled'); $.ajax({ type: 'post', url: '<?php echo base_url("timetable-form");?>', data: formdata, contentType: false, processData: false, success: function (response) { if (response.result == 1) { Swal.fire({ icon: "success", title: response.message, showConfirmButton: false, timer: 2000 }); $('#timetableform')[0].reset(); // $('#datatable').DataTable().ajax.reload(); // window.location.href = '<?php echo base_url("student-list");?>'; } else { Swal.fire({ icon: "error", title: response.message, showConfirmButton: false, timer: 1000 }); } $('#app-btn').removeAttr('disabled').text("Create Timetable"); }, error: function (xhr, textStatus, errorThrown) { console.error(xhr.responseText); Swal.fire({ icon: "error", title: "An error occurred", showConfirmButton: false, timer: 1000 }); }, complete: function () { $('#app-btn').removeAttr('disabled').text("Create Timetable"); } }); }); }); </script> <script> //course select $(document).ready(function () { $.ajax({ type: 'GET', url: '<?php echo base_url("get-batch");?>', dataType: 'json', success: function (response) { if (response.result == 1) { var options = response.data; var selectElement = $('#selectbatch'); selectElement.empty(); $('#selectbatch').html('<option value="" selected >Select Batch</option>'); $('#header').html('<option value="" selected >Select course</option>'); $.each(options, function (index, option) { selectElement.append($('<option>', { value: option.id, text: option.batch_no })); }); } else { $('#header').html('<option value="" disabled selected hidden>Select Batch</option>'); } }, error: function (xhr, status, error) { console.error(xhr.responseText); } }); }); </script> <script> function toggleCheckboxes(rowId, checkbox) { var row = document.getElementById(rowId); let checkboxes = document.querySelectorAll(`#${rowId} input[type="checkbox"]`); checkboxes.forEach(cb => { if (cb !== checkbox) { cb.checked = false; } cb.required = false; }); 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>