<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> <?php if (!empty($this->session->flashdata('success'))) { ?> <div class="alert alert-success"> <a href="#" class="close" data-dismiss="alert">×</a> <strong>Success!</strong> <?php echo $this->session->flashdata('success'); ?> </div> <?php } if (!empty($this->session->flashdata('error'))) { ?> <div class="alert alert-danger"> <a href="#" class="close" data-dismiss="alert">×</a> <strong>Failed!</strong> <?php echo $this->session->flashdata('error'); ?> </div> <?php } ?> <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="subject_lhead mt-4">Assign Installments</div> <form action="<?=base_url()?>admin/add_new_installments_revised" method="post" id="new_installment_form"> <div class="students-list mb-5"> <input type="hidden" name="course_fee_id" value="<?=$cf_id?>"> <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 // dd($unassigned_students); foreach ($unassigned_students as $key => $value) { $tr_class = $value['assigned'] == 'YES' ? 'selected' : ''; $checkbox_value = $value['assigned'] == 'YES' ? 'checked' : ''; $checkbox_input_value= $value['assigned'] == 'YES' ? 1 : 0; ?> <tr class="<?=$tr_class?>"> <td><input type="checkbox" <?=$checkbox_value?> id="stud_<?=$value['id'] ?>" onClick="checkAllCheckBox(this,<?=$value['id'] ?>)" class="child_checks" name="students[]" value="<?=$value['id']?>"> <input type="hidden" class='studentcheckinput' id="checkbox_input_<?=$value['id'] ?>" name="students_input[<?=$value['id'] ?>]" value="<?=$checkbox_input_value;?>" > </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"> <?php if (!empty($unassigned_students)) {?> <div class="submit-btn-container mb-5" style="max-width : 60%;"> <input type="submit" name="" value="Assign Students" class="btn btn-primary btn-md"> </div> <?php }?> </form> </div> <script> $("#new_installment_form").validate({ ignore: ':hidden:not(.child_checks)', submitHandler: function(form, e) { e.preventDefault(); let 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 = (ele,student_id) => { // $('#main_check').prop('checked', false); var ischecked=$('#'+ele.id).prop('checked'); if(ischecked == true) $('#checkbox_input_'+student_id).val(1); else $('#checkbox_input_'+student_id).val(0); } </script> <script type="text/javascript"> $(document).ready(function() { oTableStaticFlow = $('#unassignedList').DataTable({ "aoColumnDefs": [{ 'bSortable': false, 'aTargets': [0] }], 'aLengthMenu': [ [25, 50, 100, 200, -1], [25, 50, 100, 200, "All"] ], 'iDisplayLength': -1, }); // $('#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'); // } // } // }); /*$('#main_check').click(function() { var isChecked = $(this).prop("checked"); let student_id,isCheck; // alert(isChecked); $('#unassignedList tr:has(td)').find('.child_checks').prop('checked', isChecked); $('#unassignedList tr:has(td)').find('.child_checks').each(function(){ isCheck=$(this).attr("checked", true); student_id=$(this).val(); alert(isCheck); if(isCheck==true) $('#unassignedList tr:has(td)').find('#checkbox_input_'+student_id).val(1); else $('#unassignedList tr:has(td)').find('#checkbox_input_'+student_id).val(0); }); });*/ $('#main_check').click(function() { var isChecked = $(this).prop("checked"); if(isChecked==true) { $('.studentcheckinput').val(1); $('.child_checks').each(function(){ $(this).prop('checked', true); }); } else { $('.studentcheckinput').val(0); $('.child_checks').each(function(){ $(this).prop('checked', false); }); } }); $('#unassignedList tr:has(td)').find('.child_checks').click(function() { var isChecked = $(this).prop("checked"); // alert(isChecked); var isHeaderChecked = $("#main_check").prop("checked"); if (isChecked == false && isHeaderChecked) $("#main_check").prop('checked', isChecked); else { $('#tbl tr:has(td)').find('.child_checks').each(function() { if ($(this).prop("checked") == false) isChecked = false; }); // console.log(isChecked); $("#main_check").prop('checked', isChecked); } }); }) </script>