<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="#">Member</a></li>
                    <li class="breadcrumb-item active">Due By</li>
                </ol>
            </div>
        </div>
    </div>
</div>



<div class="modal fade" id="add_expense" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header text-center">
                <h4 class="modal-title w-100 font-weight-bold">Add Data</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="something">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body mx-3">
                <form method="post" action="<?php echo base_url(); ?>index.php/Member/insert_cash_book" id="member_add_" enctype='multipart/form-data'>
                    <div class="md-form mb-4">
                        <label data-error="wrong" data-success="right" for="form2">Member Number</label>
                        <select name="member_number" id="member_number" class="form-control">
                            <option value="">Select</option>
                            <?php foreach ($members as $mem) { ?>
                                <option value="<?php echo $mem['me_no']; ?>"><?php echo $mem['mem_name']; ?></option>
                            <?php } ?>
                        </select>
                    </div>
                    <div class="md-form mb-4">
                        <label data-error="wrong" data-success="right" for="form2">Statement</label>
                        <select name="statement" onchange="get_sub_category_expense();" id="category_id1" class="form-control">
                            <option value="">Select</option>
                            <?php foreach ($category_array as $caste) {
                                if ($caste['type'] == "0" || $caste['type'] == "3") { ?>
                                    <option <?php if ($caste['id'] == "21") {
                                                echo "selected";
                                            } ?> value="<?php echo $caste['id']; ?>"><?php echo $caste['category']; ?></option>
                            <?php }
                            } ?>
                        </select>
                    </div>
                    <div class="md-form mb-5">
                        <label data-error="wrong" data-success="right" for="form3">Sub Statement</label>
                        <select name="sub_category" id="sub_category1" class="form-control">
                            <option value="">Select</option>
                            <?php foreach ($sub_category_array as $caste) { ?>
                                <option value="<?php echo $caste['sub_id']; ?>"><?php echo $caste['sub_category']; ?></option>
                            <?php } ?>
                        </select>
                    </div>
                    <div class="md-form mb-5">
                        <label data-error="wrong" data-success="right" for="form3">Narration </label>
                        <input type="text" class="form-control validate" name="explanation">
                    </div>
                    <div class="md-form mb-4">
                        <label data-error="wrong" data-success="right" for="form2">Type</label>
                        <select name="type" class="form-control" id="type1" onchange="set_cheque_details1();">
                            <option value="">Select</option>
                            <option value="Cash">Cash</option>
                            <option value="Cheque">Cheque</option>
                        </select>
                    </div>
                    <div class="md-form mb-4 cheque_details1">
                        <label data-error="wrong" data-success="right" for="form2">Bank</label>
                        <select name="bank" class="form-control" id="bank1" onchange="display_cheque1();">
                            <option value="">--Select--</option>
                            <?php foreach ($banks as $bank) { ?>
                                <option value="<?php echo  $bank['bank']; ?>"><?php echo  $bank['bank']; ?></option>
                            <?php } ?>
                        </select>
                    </div>
                    <div class="col-sm-9 cheque_details1">
                        <div class="row">
                            <div class="col-8 col-sm-6">
                                <label data-error="wrong" data-success="right" for="form3">Cheque No:</label>
                                <select name="cheque_no" id="cheque_no1" class="form-control">
                                    <option value="">-- Select --</option>
                                    <?php foreach ($cheque_details as $cd) { ?>
                                        <option value="<?php echo $cd['cheque_no']; ?>"><?php echo $cd['cheque_no'] . "-" . $cd['cheque_amount']; ?></option>
                                    <?php } ?>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="md-form mb-4 cheque_details1">
                        <label data-error="wrong" data-success="right" for="form2">Cheque Type</label>
                        <select name="cheque_type" class="form-control" id="cheque_type1" onchange="set_cheque_amount();">
                            <option value="">Select</option>
                            <option value="Individual">Individual</option>
                            <option value="Cash Group">Cash Group</option>
                        </select>
                    </div>
                    <div class="md-form mb-5">
                        <label data-error="wrong" data-success="right" for="form3">Amount</label>
                        <input type="number" id="amount1" class="form-control validate" name="amount">
                    </div>

                    <div class="md-form mb-5" id="cheque">
                        <label data-error="wrong" data-success="right" for="form3">Voucher No:</label>
                        <input type="number" id="voc_no1" class="form-control validate" name="voc_no">
                    </div>
                    <div class="md-form mb-5">
                        <label data-error="wrong" data-success="right" for="form3">Paid Date</label>
                        <input type="date" id="date1" class="form-control validate" name="date">
                    </div>
            </div>
            <div class="modal-footer d-flex justify-content-center">
                <input type="hidden" name="payment_type" value="1">
                <button class="btn btn-primary" onclick="check1();">Add <i class="fas fa-paper-plane-o ml-1"></i></button>
            </div>
            </form>
        </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">
                            Member Due By 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>
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="tile">
                                        <div class="tile-body" id="filter_id">
                                            <table id="table_id" 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">Due By Amount</th> -->
                                                        <th class="text-center">Total Due By Amount</th>
                                                        <!--<th>Updated On</th>
                            <th>Added On</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_due_by = 0;
                                                    //  print_r($duebys);die;

                                                    foreach ($duebys as $dueby) : ?>
                                                        <?php if (!isset($dueby->close_month)   && !isset($dueby->close_year)) { ?>
                                                            <tr>
                                                                <td class="text-center">
                                                                    <?= $dueby->me_no ?>
                                                                </td>
                                                                <td>
                                                                    <a href="<?php echo base_url() . 'index.php/Member/dueby_particular/' . $dueby->me_no; ?>"> <?= $dueby->mem_name ?></a>
                                                                </td>
                                                                <!--<td>-->
                                                                <!--    <?= $dueby->division ?>-->
                                                                <!--</td>-->
                                                                <!--<td>-->
                                                                <!--    <?= $dueby->section ?>-->
                                                                <!--</td>-->
                                                                <td class="text-right">
                                                                    <?= $dueby->due_by ?>
                                                                </td>
                                                                <td class="text-center">
                                                                    <a href="" class="btn btn-xs btn-primary btn-rounded" onclick="set_expense_details('<?php echo $dueby->me_no; ?>');" data-toggle="modal" data-target="#add_expense"><i class="fa fa-undo" aria-hidden="true"></i></a>
                                                                </td>
                                                            </tr>
                                                        <?php } ?>
                                                    <?php

                                                        $tot_due_by += $dueby->due_by;

                                                    endforeach; ?>
                                                </tbody>
                                                <tfoot>
                                                    <tr>
                                                        <th></th>
                                                        <th style="text-align:right"></th>
                                                        <th style="text-align:right"><?php echo $tot_due_by; ?></th>
                                                        <th style="text-align:right"></th>
                                                    </tr>
                                                </tfoot>
                                            </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>
    var table = $('#table_id').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
            total = api
                .column(2)
                .data()
                .reduce(function(a, b) {
                    return intVal(a) + intVal(b);
                }, 0);

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

            // Update footer
            $(api.column(2).footer()).html(
                '<span style="color:blue;display:none">' + pageTotal + '<br> </span> <span id="second_total"> ' + total + '</span>'
            );
            $(api.column(3).footer()).html(
                '<span style="color:blue;display:none">' + pageTotals + '<br></span>  <span id="second_total1"> ' + totals + '</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();

        } else {
            $("span").hide();
            $("#second_total").show();
            $("#second_total1").show();
        }
    });
    
    function set_expense_details(me_no) {
        $('#member_number').val(me_no);
    }
    function check1() {
        var statement = $('#category_id1').val();
        var amount = $('#amount1').val();
        var sub_category = $('#sub_category1').val();
        var date = $('#date1').val();
        if (statement == "") {
            alert("Statement Must Be Filled Out");
            event.preventDefault();
        }
        if (amount == "") {
            alert("Amount Must Be Filled Out");
            event.preventDefault();
        }
        if (date == "") {
            alert("Date  Must Be Filled Out");
            event.preventDefault();
        }
    }

    function set_cheque_details() {
        var type = $("#type").val();
        if (type == "Cheque") {
            $(".cheque_details").show();
        } else {
            $(".cheque_details").hide();
        }
    }

    function set_cheque_details1() {
        var type = $("#type1").val();
        if (type == "Cheque") {
            $(".cheque_details1").show();
        } else {
            $(".cheque_details1").hide();
        }
    }

    function set_cheque_amount() {
        var cheque_type1 = $("#cheque_type1").val();
        var cheque_details = $("#cheque_no1 option:selected").text();
        cheque_details = cheque_details.split("-");
        if (cheque_type1 == "Individual") {
            $("#amount1").val(cheque_details[1]);
        } else {
            $("#amount1").val('');
        }
    }

    function edit(sno) {
        $('.rec_div' + sno).hide();
        $('.edit_div' + sno).show();
        $('#save' + sno).show();
        $('#edit' + sno).hide();
    }

    function save(sno, id) {
        var explanation = $("#explanation_edit" + sno).val();
        var statement = $('#category_edit' + sno).val();
        var amount = $('#amount_edit' + sno).val();
        var sub_category = $('#sub_category_edit' + sno).val();
        var paid_date = $('#paid_date_edit' + sno).val();
        if (statement == "") {
            alert("Statement Must Be Filled Out");
            return false;
        }
        if (amount == "") {
            alert("Amount Must Be Filled Out");
            return false;
        }
        if (paid_date == "") {
            alert("Date  Must Be Filled Out");
            return false;
        }
        $.ajax({
            type: 'POST',
            url: "<?php echo base_url() ?>index.php/Member/update_cash_book",
            data: {
                category: statement,
                amount: amount,
                sub_category: sub_category,
                explanation: explanation,
                paid_date: paid_date,
                id: id
            },
            dataType: 'html',
            success: function(data) {
                if (data == 1) {
                    alert('updated Successfully..');
                    location.reload();
                }
            }
        });
    }

    function get_sub_category_edit(sno) {
        var category_edit = $('#category_edit' + sno).val();
        if (category_edit != '') {
            $.ajax({
                url: "<?php echo base_url(); ?>index.php/Member/get_sub_category",
                method: "POST",
                data: {
                    expense_category: category_edit
                },
                success: function(data) {
                    $('#sub_category_edit').html(data);
                }
            });
        } else {
            $('#sub_category_edit').html('<option value="">Select</option>');
        }
    }

    function get_sub_category_expense(sno) {
        var category_edit = $('#category_id1').val();
        if (category_edit != '') {
            $.ajax({
                url: "<?php echo base_url(); ?>index.php/Member/get_sub_category",
                method: "POST",
                data: {
                    category_id: category_edit
                },
                success: function(data) {
                    $('#sub_category1').html(data);
                }
            });
        } else {
            $('#sub_category1').html('<option value="">Select</option>');
        }
    }

    function list() {
        $income = $('#income').val();
        $income_char = $('#income_char');
        $income_char.val() = $income;
    }

    function others_list() {
        $income = $('#income').val();
        $income_char = $('#income_char');
        $income_char.val() = $income;
    }

    function s_otherslist() {
        $income = $('#income').val();
        $income_char = $('#income_char');
        $income_char.val() = $income;
    }

    $('#category_id').change(function() {
        var category_id = $('#category_id').val();
        if (category_id != '') {
            $.ajax({
                url: "<?php echo base_url(); ?>index.php/Member/get_sub_category",
                method: "POST",
                data: {
                    category_id: category_id
                },
                success: function(data) {
                    $('#sub_category').html(data);
                }
            });
        }
    });



    function display_cheque() {
        var cheque = $("#to").val();
        if (cheque == "Cash") {
            $("#cheque").hide();
        } else {
            $("#cheque").show();

        }
    }


    function get_cheque() {
        var cheque_no = $('#cheque_no').val();
        if (cheque_no != '') {
            $.ajax({
                url: "<?php echo base_url(); ?>index.php/Member/get_cheque",
                method: "POST",
                data: {
                    cheque_no: cheque_no
                },
                dataType: 'json',
                success: function(data) {
                    $('#cheque_amount').val(data.cheque_amount);
                    $('#distribute').val(data.distribute);
                    $('#status').val(data.status);

                }
            });
        }
    }
</script>