<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <!-- <h1 class="m-0">Deactive Member </h1> -->
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">Old Dues</a></li>
                    <li class="breadcrumb-item active">Old Dues Details </li>
                </ol>
            </div>
        </div>
    </div>
</div>




<section class="content">
    <div class="container-fluid">




        <div class="row">

            <section class="col-lg-12 connectedSortable">

                <div class="card">
                    <div class="card-header " style="background-color:#31708e;color:white">
                        <h3 class="card-title">
                            Old Dues Details
                        </h3>
                        <div class="card-tools">
                            <ul class="nav nav-pills ml-auto">
                            </ul>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="tab-content p-0">



                            <br><br>
                            <?php if (isset($_SESSION['mem_add']) && $_SESSION['mem_add'] != "") { ?>
                                <div class="alert alert-success">
                                    <strong><?php echo $_SESSION['mem_add']; ?></strong>
                                </div>
                            <?php $_SESSION['mem_add'] = "";
                            } ?>
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="tile">
                                        <div class="tile-body" id="filter_id">
                                            <table id="loan_detail" class="table table-striped table-bordered" style="width:100%">
                                                <thead>
                                                    <tr>
                                                        <th class="text-center">Member No.</th>
                                                        <th class="text-center">Member Name</th>
                                                        <!--<th>Division</th>-->
                                                        <!--<th>Section</th>-->
                                                        <th class="text-center">Old Due Pri.</th>
                                                        <th class="text-center">Old Due Int.</th>
                                                        <th class="text-center">Old P. Int.</th>
                                                        <th class="text-center">Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody>

                                                    <!-- Here's where we iterate through our $articles query object, printing out article info -->
                                                    <?php $tot_old_due_pri  = 0; ?>
                                                    <?php $tot_old_due_int = 0; ?>
                                                    <?php foreach ($old_dues as $old_due) : ?>
                                                        <?php
                                                        $sno = $sno + 1;
                                                        ?>
                                                        <tr>
                                                            <td class="text-center">
                                                                <?= $old_due->me_no ?>
                                                            </td>
                                                            <td>
                                                                <?= $old_due->mem_name ?>
                                                            </td>
                                                            <td class="text-right">
                                                                <?= $old_due->old_due_pri ?>
                                                            </td>
                                                            <td class="text-right">
                                                                <?= $old_due->old_due_int ?>
                                                            </td>
                                                            <td class="text-right">
                                                                <?= $old_due->old_p_int ?>
                                                            </td>
                                                            <td class="text-center">
                                                                <a href="<?php echo base_url() ?>index.php/Member/edit_old_due/<?php echo $old_due->me_no; ?>" class="btn btn-primary btn-xs"><span class="fa fa-edit"></span><span class="sr-only"></span></a>
                                                            </td>
                                                        </tr>

                                                        <?php $tot_old_due_pri  += $old_due->old_due_pri ?>
                                                        <?php $tot_old_due_int += $old_due->old_due_int ?>
                                                    <?php endforeach; ?>
                                                <tfoot>
                                                    <tr>
                                                        <td class="text-center"></td>
                                                        <td class="text-center"></td>
                                                        <td class="text-center"></td>
                                                        <td class="text-center"></td>
                                                        <td class="text-center"> </td>
                                                        <td class="text-center"> </td>
                                                    </tr>
                                                </tfoot>
                                                </tbody>

                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>







                        </div>
                    </div>
                </div>
        </div>
</section>
</div>
</div>
</section>




<style>
    div.dt-buttons {
        margin-left: 176px;
    }

    div.dataTables_wrapper div.dataTables_length label {
        position: absolute;
    }

    div.dataTables_wrapper div.dataTables_filter {
        text-align: right;
        margin-top: -37px;
    }

    .copyButton {
        background-color: #dc3545;
        border: 1px solid white;
    }

    .excelButton {
        background-color: #dc3545;
        border: 1px solid white;

    }

    .pdfButton {
        background-color: #dc3545;
        border: 1px solid white;

    }

    .printButton {
        background-color: #dc3545;
        border: 1px solid white;

    }

    .colvisButton {
        background-color: #dc3545;
        border: 1px solid white;

    }
</style>




<script src="<?php echo base_url() ?>assets/datatables/dataTables.bootstrap.js"></script>
<script src="<?php echo base_url() ?>assets/datatables/jquery.dataTables.js"></script>
<script>
    $(document).ready(function() {
        $('.alert').fadeOut(3000);


    });

    var table = $('#loan_detail').DataTable({


        "footerCallback": function(row, data, start, end, display) {
            var api = this.api();

            // Remove the formatting to get integer data for summation
            var intVal = function(i) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '') * 1 :
                    typeof i === 'number' ?
                    i : 0;
            };
            // Total over all pages
            loan_amt_total = api
                .column(2)
                .data()
                .reduce(function(a, b) {
                    return intVal(a) + intVal(b);
                }, 0);

            loan_os_total = api
                .column(3)
                .data()
                .reduce(function(a, b) {
                    return intVal(a) + intVal(b);
                }, 0);

            f_amt_total = api
                .column(6)
                .data()
                .reduce(function(a, b) {
                    return intVal(a) + intVal(b);
                }, 0);

            f_os_total = api
                .column(7)
                .data()
                .reduce(function(a, b) {
                    return intVal(a) + intVal(b);
                }, 0);

            // Total over this page
            loan_amt_pageTotal = api
                .column(2, {
                    page: 'current'
                })
                .data()
                .reduce(function(a, b) {
                    return intVal(a) + intVal(b);
                }, 0);
            loan_os_pageTotal = api
                .column(3, {
                    page: 'current'
                })
                .data()
                .reduce(function(a, b) {
                    return intVal(a) + intVal(b);
                }, 0);


            f_amt_pageTotal = api
                .column(6, {
                    page: 'current'
                })
                .data()
                .reduce(function(a, b) {
                    return intVal(a) + intVal(b);
                }, 0);
            f_os_pageTotal = api
                .column(7, {
                    page: 'current'
                })
                .data()
                .reduce(function(a, b) {
                    return intVal(a) + intVal(b);
                }, 0);


            // Total over this page


            // Update footer
            $(api.column(2).footer()).html(
                '<span style="color:blue;display:none">' + loan_amt_pageTotal + '<br> </span> <span id="second_total"> ' + loan_amt_total + '</span>'
            );

            $(api.column(3).footer()).html(
                '<span style="color:blue;display:none">' + loan_os_pageTotal + '<br> </span> <span id="second_total1"> ' + loan_os_total + '</span>'
            );


            $(api.column(6).footer()).html(
                '<span style="color:blue;display:none">' + f_amt_pageTotal + '<br> </span> <span id="second_total2"> ' + f_amt_total + '</span>'
            );

            $(api.column(7).footer()).html(
                '<span style="color:blue;display:none">' + f_os_pageTotal + '<br> </span> <span id="second_total3"> ' + f_os_total + '</span>'
            );

        },



        "processing": true,
        "dom": 'lBfrtip',
        "lengthMenu": [
            [100, 250, 500, 1000, -1],
            [100, 250, 500, 1000, "All"]
        ],
        "buttons": {
            buttons: [{
                    extend: 'copy',
                    className: 'copyButton'
                },
                {
                    extend: 'excel',
                    className: 'excelButton'
                },
                {
                    extend: 'pdf',
                    className: 'pdfButton'
                },
                {
                    extend: 'print',
                    className: 'printButton'
                },
                {
                    extend: 'colvis',
                    className: 'colvisButton'
                },
            ]
        }

    });

    $("div.dataTables_filter input").keyup(function(e) {
        if (table.search() != "") {
            $("span").show();
            $("#second_total").hide();
            $("#second_total1").hide();
            $("#second_total2").hide();
            $("#second_total3").hide();

        } else {
            $("span").hide();
            $("#second_total").show();
            $("#second_total1").show();
            $("#second_total2").show();
            $("#second_total3").show();

        }
    });
</script>