EVOLUTION-NINJA

Edit File: add_chapter.php

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

table thead th {
      
        background-color:#00484C;
        color:#fff;
    }

.btn.submit{
        background-color:#0065A3 !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 Chapter</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="addChapterForm">
            <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"></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"></select>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="form-group">
                        <label for="syllabusSelect">Select Syllabus Name</label>
                        <select name="syllabus_id" id="syllabusSelect" class="form-control w-100"></select>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="form-group">
                        <label for="chapterName">Add Chapter Name</label>
                        <input type="text" name="chapter_name" id="chapterName" class="form-control" required/> 
                    </div>
                </div>
            </div>
            <div class="row mt-3 mb-3">
                <div class="col-sm-9"></div>
                <div class="col-sm-3">
                    <button type="submit " class="btn btn-primary mt-4 w-100  submit">Submit</button>
                </div>
            </div>
        </form>
    </div>
</main>

<div class="container mt-5">
    <div class="row">
        <div class="col-sm-12">
            <h3>Chapter List</h3>
    </div>
    <table id="chapterTable" class="display  chapterTable  mt-4">
        <thead class="table-light">
            <tr >
                <th>ID</th>
                <th>Header Name</th>
                <th>Course Name</th>
                <th>Syllabus Name</th>
                <th>Chapter Name</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody id="chapterTableBody">
            
        </tbody>
    </table>
            <nav aria-label="Page navigation">
                <ul class="pagination" id="pagination">
                </ul>
            </nav>
        </div>
    </div>
</div>

<div class="modal fade" id="editChapterModal" tabindex="-1" role="dialog" aria-labelledby="editChapterModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editChapterModalLabel">Edit Chapter</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="editChapterForm">
                <div class="modal-body">
                    <input type="hidden" name="chapter_id" id="editChapterId">
                    <div class="form-group">
                        <label for="editHeaderSelect">Header Name</label>
                        <select class="form-control" id="editHeaderSelect" name="header_id" onchange="updateCourses()"></select>
                    </div>
                    <br>
                    <div class="form-group">
                        <label for="editCourseSelect">Course Name</label>
                        <select class="form-control" id="editCourseSelect" name="course_id" onchange="updateSyllabi()"></select>
                    </div>
                    <br>
                    <div class="form-group">
                        <label for="editSyllabusSelect">Syllabus Name</label>
                        <select class="form-control" id="editSyllabusSelect" name="syllabus_id"></select>
                    </div>
                    <br>
                    <div class="form-group">
                        <label for="editChapterName">Chapter Name</label>
                        <input type="text" class="form-control" id="editChapterName" name="chapter_name">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary submit">Update</button>
                </div>
            </form>
        </div>
    </div>
</div>

</script>

updateCourses(data.header_id, data.course_id);
    updateSyllabi(data.header_id, data.course_id, data.syllabus_id);
}

</script>

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

$.ajax({
            url: "<?php echo base_url('add_chapters/update_chapter') ?>",
            type: "POST",
            data: {
                chapter_id: chapterId,
                header_id: headerId,
                course_id: courseId,
                syllabus_id: syllabusId,
                chapter_name: chapterName
            },
            success: function(response) {
                if (response.result === 1) {
                    Swal.fire({
                            icon: "success",
                            title: response.message,
                            showConfirmButton: false,
                            timer: 2000
                        });
                        $('#editChapterModal').modal('hide'); 
                        $('#chapterTable').DataTable().ajax.reload(null, false);
                  
                }
                else {
                    alert(response.message);
                }
            },
            error: function(xhr, status, error) {
                alert('An error occurred: ' + xhr.responseText);
            }
        });
    });
});
</script>
<script>

</script>
<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">

headerSelect.change(function () {
        const selectedHeaderId = $(this).val();
        fetchCoursesAndSyllabus(selectedHeaderId);
    });

courseSelect.change(function () {
        const selectedHeaderId = headerSelect.val();
        const selectedCourseId = $(this).val();
        fetchSyllabus(selectedHeaderId, selectedCourseId);
    });

$.ajax({
        url: '<?= base_url('add_chapters/get_headers') ?>',
        method: 'GET',
        dataType: 'json',
        success: function (data) {
            headerSelect.empty().append('<option value="">Select</option>');
            $.each(data, function (index, item) {
                headerSelect.append('<option value="' + item.id + '">' + item.header_name + '</option>');
            });
        },
        error: function () {
            console.log('Error fetching headers.');
        }
    });

$('#addChapterForm').submit(function(event) {
        event.preventDefault();
        const formData = new FormData(this);
        $.ajax({
            url: 'add_chapters/add_chapter_form',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if (response.result == 1) {
                    Swal.fire({ icon: "success", title: response.message, showConfirmButton: false, timer: 2000 });
                    $('#addChapterForm')[0].reset();
                      $('#chapterTable').DataTable().ajax.reload(null, false);
              
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log('Error details:', jqXHR, textStatus, errorThrown);
                alert('An error occurred: ' + textStatus + ' ' + errorThrown);
            }
        });
    });

</script>
<script>
    window.onload = function () {
        const leftDiv = document.getElementById('leftDiv');
        const rightDiv = document.getElementById('rightDiv');

const rightDivHeight = rightDiv.offsetHeight;

leftDiv.style.height = rightDivHeight + 'px';
    };

</script>
    <script>
    function goBack() {
        window.location.href = 'dashboard';
    }
</script>

</script>

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