<style type="text/css"> .amount-input { border: 1px solid #c6c6c6c6 !important; } .installments-links { padding: 10px 20px; } .installments-links a { border: 1px solid black; padding: 5px 15px; color : black; } .installments-links.active a, .installments-links:hover a { background-color: #032da1; color: #fff; } </style> <div class="wraper responsive-width w-90"> <a href="<?= base_url() ?>admin/fee-course"><button type="button" class="subject_addbtn bg-dark">Back</button></a> <div class="subject_lhead">Fee Installments</div> <hr> <div class="course_feedetails mt-4"> <div class="row mt-2"> <div class="col-md-2 col-12"> <span style="font-weight : 600">Batch : </span> </div> <div class="col-md-6 col-12"> <span class="ml-3"><?= $course_fee['b_name'] ?></span> </div> </div> <div class="row mt-2"> <div class="col-md-2 col-12"> <span style="font-weight : 600">Course : </span> </div> <div class="col-md-6 col-12"> <span class="ml-3"><?= $course_fee['course_name'] ?></span> </div> </div> <div class="row mt-2"> <div class="col-md-2 col-12"> <span style="font-weight : 600">Fee Type : </span> </div> <div class="col-md-6 col-12"> <span class="ml-3"><?= $course_fee['feetype_name'] ?></span> </div> </div> <div class="row mt-2"> <div class="col-md-2 col-12"> <span style="font-weight : 600">Fee Amount : </span> </div> <div class="col-md-6 col-12"> <span class="ml-3">N-<?= $course_fee['amount'] ?></span> </div> </div> </div> <hr> <div class="page_links_installments"> <div class="d-flex justify-content-center"> <div class="assign-installment installments-links "> <a href="<?= base_url() ?>admin/manage-installments/<?= $cf_id ?>">Assign Installments</a> </div> <div class="update-installment installments-links active"> <a href="<?= base_url() ?>admin/update-installments/<?= $cf_id ?>">Update Installments</a> </div> </div> </div> <div class="subject_lhead mt-4">Update Installments</div> <form action="<?= base_url() ?>admin/update_new_installments_revised" method="post" id="new_installment_form"> <div class="students-list mb-5"> <?php if(count($unassigned_students) > 0) { ?> <div class="installment-container mb-5" style="max-width : 40%"> <div class="form-group"> <label for="exampleFormControlSelect1">Choose type of Installment<span style="color:red">*</span></label> <select class="form-control" name="installment_type" onchange="get_installments(this)" id="exampleFormControlSelect1"> <option value="">Select one installment</option> <?php foreach ($payment_types as $key => $value) { ?> <option value="<?= $value['number_of_payment'] ?>"><?= $value['payment_type_name'] ?></option> <?php } ?> </select> <input type="hidden" name="course_fee_id" value="<?= $cf_id ?>"> </div> </div> <?php } ?> <table style="max-width: 50%;margin:0;display: none;" class="table installment_container fee-installment-table dataTable table-responsive"> <thead> <tr> <th><span style="width:115px;display:block;">Payment method</span></th> <th><span style="width:115px;display:block">Amount</span></th> <th><span style="width:115px;display:block">Due dates</span></th> </tr> </thead> <tbody id="installment_section"> </tbody> </table> <table id="unassignedList" class="tbl table student_list display table-responsive"> <thead> <tr> <th><input type="checkbox" id="main_check" name="checkall"></th> <th>Student Id</th> <th>Student Name</th> <th>Email</th> <th>Section</th> <th>Mobile</th> </tr> </thead> <tbody> <?php foreach ($unassigned_students as $key => $value) { ?> <tr> <td><input type="checkbox" onClick="checkAllCheckBox()" class="child_checks" name="students[]" value="<?= $value['id'] ?>"> </td> <td><?= $value['studentId'] ?></td> <td><?= $value['name'] ?></td> <td><?= $value['email'] ?></td> <td><?= $value['section_name'] ?></td> <td><?= $value['mobile'] ?></td> </tr> <?php } ?> </tbody> <tfoot> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> </tfoot> </table> </div> <label id="students[]-error" style="color:red" class="error" for="students[]"></label> <input type="hidden" name="table_rows" id="table_rows"> <label id="totalamount-error" style="color:red;display: none;"></label> <div class="submit-btn-container mb-5" style="max-width : 60%;display:none;"> <input type="submit" name="" value="Submit" class="btn btn-primary btn-md"> </div> </form> </div> <script> $("#new_installment_form").validate({ ignore: ':hidden:not(.child_checks)', rules: { 'installment_type[]': 'required', 'paymentoption[]': 'required', 'amount[one]': 'required', <?php for($i = 0; $i <= 12; $i++){ ?> 'amount[two][<?= $i ?>]': 'required', 'amount[four][<?= $i ?>]': 'required', 'amount[six][<?= $i ?>]': 'required', <?php } ?> 'students[]': 'required' }, messages: { 'students[]': 'Please select atleast one student from above table' }, submitHandler: function(form, e) { e.preventDefault(); let amountErr; let TotalSum = Number(<?= $course_fee['amount'] ?>); let Allrows = $('#installment_section tr'); $('.installment-err').remove(); $('#totalamount-error').hide(); $.each(Allrows, function(index, ele) { let tdTotal = 0; let amountInput = $(this).find('.amount-input'); $.each(amountInput, function(index, ele) { tdTotal += Number($(this).val()); }); $('.installment-err').hide(); if (tdTotal != TotalSum) { $(this).before( '<tr class="installment-err"><td colspan="3"><label class="error" style="color:red">Entered amount does not match with total fees amount: ' + <?= $course_fee['amount'] ?> + '</label></td></tr>') amountErr = false; $('#totalamount-error').text( 'Entered amount in installments does not match with total fees amount : ' + <?= $course_fee['amount'] ?>); $('#totalamount-error').show(); return false; } else { amountErr = true; } if (amountErr) { var table = $('#unassignedList').DataTable(); var tableData = table.rows('.selected').data().toArray(); let filtered = tableData.map((ele, i) => { return ele[1]; }) console.log(filtered); tableData = JSON.stringify(filtered) $('#table_rows').val(tableData); form.submit(); } }); } }); </script> <script> const get_installments = function(ele) { $('.installment_container').hide(); $('.submit-btn-container').hide(); if (ele.value != '' && ele.value) { let installment_val = [ele.value]; let course_fee_id = <?= $cf_id ?>; let due_date = '<?= date('Y-m-d', strtotime($course_fee['due_date'])) ?>'; let url_link = "<?php echo base_url(); ?>admin/get_duedates"; $.ajax({ type: 'POST', url: url_link, data: { course_fee: course_fee_id, inst: installment_val, start: due_date }, success: function(data) { // console.log(data); data = JSON.parse(data); $('.installment_container').show(); $('#installment_section').html(data.html); $('.submit-btn-container').show(); requiredFunc(); }, }); } } const requiredFunc = function() { let NnDate = NepaliFunctions.GetCurrentBsDate(); let todayDateN = `${NnDate.year}-${NnDate.month}-${NnDate.day}`; $('.np-datepicker').nepaliDatePicker({ language: 'english', disableBefore: todayDateN }); $(".amount-input").keypress(function(e) { var keyCode = e.keyCode || e.which; //Regex for Valid Characters i.e. Alphabets and Numbers. var regex = /^[0-9]+$/; //Validate TextBox value against the Regex. var isValid = regex.test(String.fromCharCode(keyCode)); return isValid; }); } const checkAllCheckBox = () => { $('#main_check').prop('checked', false); } </script> <script type="text/javascript"> $(document).ready(function() { oTableStaticFlow = $('#unassignedList').DataTable({ "aoColumnDefs": [{ 'bSortable': false, 'aTargets': [0] }], "lengthMenu": [ [5, 10, 25, 50, -1], [5, 10, 25, 50, "All"] ] }); $('#unassignedList tbody').on('click', 'tr', function() { if ($(this).find('.child_checks').is(':checked')) { $(this).addClass('selected'); } else { $(this).removeClass('selected'); } }); $("#main_check").click(function() { var cells = oTableStaticFlow.column(0).nodes(), // Cells from 1st column state = this.checked; for (var i = 0; i < cells.length; i += 1) { cells[i].querySelector("input[type='checkbox']").checked = state; $(cells[i]).parent().removeClass('selected'); if(state) { $(cells[i]).parent().addClass('selected'); } else { $(cells[i]).parent().removeClass('selected'); } } }); }) </script>