<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">&times;</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">&times;</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>