EVOLUTION-NINJA

Edit File: add_syllabus.php

<?php echo view('includes/home_sidebar');?> 
 
 
<style> 
    #leftDiv{ 
    height: 960px !important;  
    } 
    .form-control {   
    appearance: auto;  
} 
 
.datatable{ 
 
    margin-left:30px; 
} 
#syllabusTable  thead tr th{
    background-color: #00484C !important;
    color: #fff !important;
}
</style> 
 
<main id="rightDiv"> 
    <div class="container-fluid"> 
        <div class="row"> 
 
            <div class="col-sm-12"> 
 
                 
                <section class="fee-structure"> 
                <h3  style="color: rgba(0, 72, 76, 1);">Add Syllabus</h3> 
                    <button class="btn back-butt" onclick="goBack()"><i class="fa fa-arrow-left" 
                            aria-hidden="true"></i>&nbsp;Back</button> 
                </section> 
            </div> 
        </div> 
    </div> 
    <div class="container mt-3 pb-3"> 
    <form id="addSyllabusForm"> 
    <div class="row"> 
        <div class="col-sm-3"> 
            <div class="form-group"> 
                <label for="headerSelect">Select Header</label> 
                <select name="header_id" id="headerSelect" class="form-control w-100"> 
                    <option value="">Select</option> 
                   
                </select> 
            </div> 
        </div> 
        <div class="col-sm-3"> 
            <div class="form-group"> 
                <label for="courseSelect">Select Course</label> 
                <select name="course_id" id="courseSelect" class="form-control w-100"> 
                    <option value="">Select</option> 
                   
                </select> 
            </div> 
        </div> 
        <div class="col-sm-3"> 
            <div class="form-group"> 
                <label for="syllabus_id">Add Syllabus Name</label> 
                <input type="text" name="syllabus_name" id="syllabusName" class="form-control"> 
 
            </div> 
        </div> 
        <div class="col-sm-3"> 
            <button type="submit" class="btn btn-primary mt-4 w-100">Submit</button> 
        </div> 
    </div> 
</form> 
</div> 
</main>

<div class="container"> 
<table id="syllabusTable" class="table table-bordered datatable"> 
    <thead> 
        <tr> 
            <th>ID</th> 
            <th>Header Name</th> 
            <th>Course Name</th> 
            <th>Syllabus Name</th> 
            <th>Actions</th> 
        </tr> 
    </thead> 
</table> 
</div> 
 
</section>

<div class="modal fade" id="editSyllabusModal" tabindex="-1" role="dialog" aria-labelledby="editSyllabusModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
        <div class="modal-content"> 
            <div class="modal-header"> 
                <h5 class="modal-title" id="editSyllabusModalLabel">Edit Syllabus</h5> 
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> 
            </div> 
            <form id="editSyllabusForm"> 
                <div class="modal-body"> 
                    <input type="hidden" name="syllabus_id" id="editSyllabusId"> 
                    <div class="form-group"> 
                        <label for="editHeaderName">Header Name</label> 
                        <select class="form-control" id="editHeaderName" name="header_name" onchange="updateCourses()"> 
                       
                        </select> 
                        
                    </div> 
                    <br> 
                    <div class="form-group"> 
                        <label for="editCourseName">Course Name</label> 
                        <select class="form-control" id="editCourseName" name="course_name" onchange="updateSyllabi()"> 
                           
                        </select> 
                        
                    </div> 
                    <br> 
                    <div class="form-group"> 
                        <label for="editSyllabusName">Syllabus Name</label> 
                        <input type="text" class="form-control" id="editSyllabusName" name="syllabus_name"> 
                    </div> 
                </div> 
                <div class="modal-footer"> 
                    <button type="submit" class="btn btn-primary submit">Update</button> 
                </div> 
            </form> 
        </div> 
    </div> 
</div>

<script> 
$(document).ready(function() {
    $('#syllabusTable').DataTable({
        "processing": false,
        "serverSide": true,
        "ajax": {
            "url": "<?php echo base_url('syllabus/get_syllabus_list') ?>",
            "type": "GET"
        },
        "columns": [
            { 
                "data": null, 
                "render": function(data, type, row, meta) {
                    // Calculate index based on current page and page length
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            { "data": "header_name" },
            { "data": "course_name" },
            { "data": "syllabus_name" },
            {
                "data": null,
                "render": function(data, type, row) {
                    return `
                        <button class="btn btn-sm btn-primary submit px-3 mr-4" onclick="editSyllabus(${row.id})">Edit</button>
                        <button class="btn btn-sm btn-danger ml-4" onclick="deleteSyllabus(${row.id})">Delete</button>
                    `;
                }
            }
        ],
        "order": [[1, "asc"]],
        "columnDefs": [
            { "orderable": false, "targets": [0, 4] }
        ]
    });
});

//  ===========edit============
function editSyllabus(syllabusId) { 
    $.ajax({ 
        url: "<?php echo base_url('syllabus/get_syllabus') ?>/" + syllabusId, 
        type: "GET", 
        success: function(response) { 
            if (response.result === 1) { 
                let data = response.data; 
                $('#editSyllabusId').val(data.id); 
                $('#editHeaderName').val(data.header_name); 
                $('#editCourseName').val(data.course_name); 
                $('#editSyllabusName').val(data.syllabus_name); 
                populateDropdowns(data);
                $('#editSyllabusModal').modal('show'); 
            } else { 
                alert(response.message); 
            } 
        } 
    }); 
} 
 
//  ===========delete============
function deleteSyllabus(syllabusId) { 
    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({ 
                url: '<?php echo base_url('syllabus/delete_syllabus/') ?>' + syllabusId, 
                method: 'POST', 
                dataType: 'json', 
                success: function (response) { 
                    if (response.result == 1) { 
                        Swal.fire({ 
                            icon: "success", 
                            title: response.message, 
                            showConfirmButton: false,
                            timer: 2000 
                        }); 
                        $('#syllabusTable').DataTable().ajax.reload(null, false); 
                    } else { 
                        Swal.fire({ 
                            icon: "error", 
                            title: "Failed to delete syllabus", 
                            showConfirmButton: false, 
                            timer: 2000 
                        }); 
                    } 
                }, 
                error: function () { 
                    console.log('Error deleting syllabus.'); 
                } 
            }); 
        } 
    }); 
} 
</script>

<script>

// ===submit form===
  $(document).ready(function() {
    $('#addSyllabusForm').submit(function(event) {
        event.preventDefault();
        
        const formData = new FormData(this);

$.ajax({
            url: 'add_syllabus/add_syllabus_form',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(data) {
              
                Swal.fire({
                    title: 'Success!',
                    text: data.message, 
                    icon: 'success',
                    confirmButtonText: 'OK'
                }).then((result) => {
                    if (result.isConfirmed) {
                        if (data.result === 1) {
                            window.location.reload(); 
                        }
                    }
                });
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log('Error details:', jqXHR, textStatus, errorThrown);
                Swal.fire({
                    title: 'Error!',
                    text: 'An error occurred: ' + textStatus + ' ' + errorThrown,
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
            }
        });
    });
});

</script>

let chapterId = $('#editSyllabusId').val();
        let headerId = $('#editHeaderName').val();
        let courseId = $('#editCourseName').val();
        let syllabusName = $('#editSyllabusName').val();

if (!headerId || !courseId || !syllabusName) {
            alert('All fields are required.');
            return;
        }

$.ajax({
            url: "<?php echo base_url('add_syllabus/update_syllabus') ?>",
            type: "POST",
            data: {
                chapter_id: chapterId,
                header_id: headerId,
                course_id: courseId,
                syllabus_name: syllabusName,
                syllabus_id: $('#editSyllabusId').val()
            },
            dataType: 'json',
            success: function(response) {
                if (response.result === 1) {
                    Swal.fire({
                        icon: "success",
                        title: response.message,
                        showConfirmButton: false,
                        timer: 2000
                    });
                    $('#editSyllabusModal').modal('hide');
                    $('#syllabusTable').DataTable().ajax.reload(null, false);
                } else {
                    alert(response.message);
                }
            },
            error: function(xhr, status, error) {
                alert('An error occurred: ' + xhr.responseText);
            }
        });
    });
});

</script>