<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>