EVOLUTION-NINJA

Edit File: chapter_covered.php

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

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

.btn.submit {
        background-color: #0065A3 !important;
        color:white;
    }

/* Style for the subgrid table */
.subgrid-table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
}

/* Table header styles */
.subgrid-table th {
    background-color: #f2f2f2;
    color: #333;
    padding: 10px;
    text-align: left;
    border-bottom: 2px solid #ddd;
}

/* Table cell styles */
.subgrid-table td {
    padding: 8px;
    border-bottom: 1px solid #ddd;
}

/* Style for alternating row colors */
.subgrid-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* Style for hover effect on rows */
.subgrid-table tr:hover {
    background-color: #f1f1f1;
}

</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);">Chapter Covered</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="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</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="batchSelect">Select Batch</label>
                        <select name="batch_id" id="batchSelect" class="form-control w-100"></select>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="form-group">
                        <label for="chapterSelect">Select Chapter</label>
                        <select name="chapter_id" id="chapterSelect" class="form-control w-100"></select>
                    </div>
                </div>
                <div class="col-sm-3">
                    <br>
                    <div class="form-group">
                        <label for="selectDate">Select Date</label>
                        <input type="date" name="selectDate" id="selectDate" class="form-control w-100">
                    </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 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="chapterCovered_id" id="editChapterCoveredId">
                  
                    <div class="form-group">
                        <label for="editCourseSelect">Course Name</label>
                        <select class="form-control" id="editCourseSelect" name="course_id"></select>
                    </div>
                    <div class="form-group">
                        <label for="editSyllabusSelect">Syllabus Name</label>
                        <select class="form-control" id="editSyllabusSelect" name="syllabus_id"></select>
                    </div>
                    <div class="form-group">
                        <label for="editBatchSelect">Batch Name</label>
                        <select class="form-control" id="editBatchSelect" name="batch_id"></select>
                    </div>
                    <div class="form-group">
                        <label for="editChapterSelect">Chapter Name</label>
                        <select class="form-control" id="editChapterSelect" name="chapter_id"></select>
                    </div>
                    <div class="form-group">
                        <label for="editdate">Date</label>
                        <input type="date" class="form-control" id="editdate" name="date">
                    </div>
                </div>
                <div class="modal-footer">
               
                    <button type="submit" class="btn btn-primary submit">Update</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="container mt-3">
  <table id="chapterTable" class="display" width="100%" >
    <thead>
        <tr>
            <th></th>
            <th>Id</th>
            <th>Course</th>
            
            <th>Batch</th>
            
        
            <th>Actions</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
    </div>
</main>

chapters.forEach(chapter => {
        subgridHtml += `<tr>
            <td>${chapter.chapter_name}</td>
            <td>${chapter.date}</td>
            <td>${chapter.syllabus_name}</td>
        </tr>`;
    });

subgridHtml += '</table>';
    return subgridHtml;
}

$(document).ready(function() {
    const chapterTable = $('#chapterTable').DataTable({
        "ajax": {
            "url": '<?php echo base_url('chapter_covered/get_chapters_covered') ?>',
            "type": "GET",
            "dataSrc": ""
        },
        "columns": [
            {
                "className": 'details-control',
                "orderable": false,
                "data": null,
                "defaultContent": '<i class="fas fa-plus"></i>',
                "render": function (data, type, row) {
                    return `<i class="fas fa-plus"></i>`;
                }
            },
            { "data": "chapter_covered_id",visible: false},
            { "data": "course" },
            // { "data": "syllabus_name" },
            { "data": "batch_no" },
            {
                "data": null,
                "render": function (data, type, row) {
                    return `
                        <button class="btn submit btn-sm edit-btn px-3" onclick="editChapter(${row.chapter_covered_id})">Edit</button>
                        <button class="btn btn-danger btn-sm delete-btn" onclick="deleteChapter(${row.chapter_covered_id})">Delete</button>
                    `;
                }
            }
        ],
        "order": [[1, 'asc']]
    });

$('#chapterTable tbody').on('click', 'td.details-control', function() {
        const tr = $(this).closest('tr');
        const row = chapterTable.row(tr);

if (row.child.isShown()) {
            row.child.hide();
            tr.removeClass('shown');
        } else {
            const data = row.data();
            if (data && data.chapters) {
                row.child(formatSubgrid(data.chapters)).show();
                tr.addClass('shown');
            } else {
                row.child('<div>No data available</div>').show();
                tr.addClass('shown');
            }
        }
    });
});

function editChapter(id) {
    console.log('Edit Chapter ID:', id);
}

function deleteChapter(id) {
    console.log('Delete Chapter ID:', id);
}

</script>

// Populate the related dropdowns based on the selected course
    updateSyllabi(data.course_id, data.syllabus_id);
    updateBatch(data.course_id, data.batch_id);
    updateChapter(data.course_id, data.chapter_id);

// Attach change event handlers
    $('#editCourseSelect').off('change').on('change', function() {
        const selectedCourseId = $(this).val();
        updateSyllabi(selectedCourseId);
        updateBatch(selectedCourseId);
        updateChapter(selectedCourseId);
    });
}

</script>
<script>
$('#editChapterForm').submit(function(event) {
    event.preventDefault();
    $.ajax({
        url: '<?php echo base_url('chapter_covered/update_chapter_covered') ?>',
        type: 'POST',
        data: $(this).serialize(),
        success: function(response) {
            if (response.result === 1) {
                $('#chapterTable').DataTable().ajax.reload();
                $('#editChapterModal').modal('hide');
                Swal.fire('Updated!', 'Chapter has been updated.', 'success');
            } else {
                Swal.fire('Error!', response.message, 'error');
            }
        },
        error: function(xhr, status, error) {
            Swal.fire('Error!', 'An error occurred while updating the chapter.', 'error');
        }
    });
});
</script>

</script>

<script>
function deleteChapter(deleteId) {
    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('chapter_covered/delete_chapter/') ?>' + deleteId,
                method: 'DELETE', // Use DELETE method here
                success: function(response) {
                    if (response.result == 1) {
                        Swal.fire('Deleted!', response.message, 'success');
                        $('#chapterTable').DataTable().ajax.reload(null, false);
                    } else {
                        Swal.fire('Failed!', response.message, 'error');
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log('Error details:', jqXHR, textStatus, errorThrown);
                    alert('An error occurred: ' + textStatus + ' ' + errorThrown);
                }
            });
        }
    });
}

</script>

<script>
    const courseSelect = $('#courseSelect');
    const syllabusSelect = $('#syllabusSelect');
    const batchSelect = $('#batchSelect');
    const chapterSelect = $('#chapterSelect');

courseSelect.change(function() {
        const courseId = $(this).val();
        if (courseId) {
            fetchSyllabus(courseId);
            fetchBatch(courseId);
            fetchChapters(courseId);
        } else {
            syllabusSelect.empty().append('<option value="">Select</option>');
            batchSelect.empty().append('<option value="">Select</option>');
            chapterSelect.empty().append('<option value="">Select</option>');
        }
    });

</script>

$('#addChapterForm').submit(function(event) {
        event.preventDefault();
        const formData = new FormData(this);
        $.ajax({
            url: '<?php echo base_url('chapter_covered/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);
            }
        });
    });

$(document).ready(function() {
        fetchCourses();
    });
</script>

const rightDivHeight = rightDiv.offsetHeight;

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

</script>

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