<div id="page-wrapper">
    <div class="header">
        <h1 class="page-header">

        </h1>
        <ol class="breadcrumb">
            <li><a href="#">Profi & Loss</a></li>
            <li class="active">Expense </li>
        </ol>

    </div>
    <div id="page-inner">



        <div class="row">

            <!-----------------------------   Income-Others Credited Amount ------------------>
            <div class="col-md-12">

                <div class="panel panel-default">
                    <div class="panel-heading d-flex justify-content-center">
                        Expense Details
                    </div>
                    <div class="panel-body">


                        <div>
                            <a href="" class="btn btn-primary btn-rounded mb-4" data-toggle="modal" data-target="#modalSubscriptionForm1">Add Data</a>
                        </div>
                        <br><br>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="tile">
                                    <div class="tile-body" id="filter_id">
                                        <table id="table_ids1" class="table table-striped table-bordered" style="width:100%">
                                            <thead>
                                                <tr>
                                                    <th class="text-center">S No.</th>
                                                    <th class="text-center">Statements</th>
                                                    <th class="text-center">Amount</th>
                                                    <th class="text-center">To</th>
                                                    <th class="text-center">Date</th>
                                                    <th class="text-center">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>


                                                <?php $sno = 1; ?>
                                                <?php foreach ($expense as $data) : ?>
                                                    <tr>
                                                        <td class="text-center">
                                                            <?= $sno; ?>
                                                        </td>
                                                        <td class="text-center">
                                                            <div id="statementv<?= $sno; ?>">
                                                                <?= $data['statement'] ?>
                                                            </div>
                                                            <div style="display:none;" id="statement<?= $sno; ?>">
                                                                <input type="text" class="form-control" name="statement" id="statement1<?= $sno; ?>" value=" <?= $data['statement'] ?>">
                                                            </div>
                                                        </td>
                                                        <td class="text-center">
                                                            <div id="amountv<?= $sno; ?>">
                                                                <?= $data['amount'] ?>
                                                            </div>
                                                            <div style="display:none;" id="amount<?= $sno; ?>">
                                                                <input type="text" class="form-control" name="amount" id="amount1<?= $sno; ?>" value=" <?= $data['amount'] ?>">
                                                            </div>
                                                        </td>
                                                        <td class="text-center">
                                                            <div id="tov<?= $sno; ?>">
                                                                <?= $data['to'] ?>
                                                            </div>
                                                            <div style="display:none;" id="to<?= $sno; ?>">
                                                                <input type="text" class="form-control" name="to" id="to1<?= $sno; ?>" value=" <?= $data['to'] ?>">
                                                            </div>
                                                        </td>
                                                        <td class="text-center">
                                                            <div id="datev<?= $sno; ?>">
                                                                <?= date("d-m-Y", strtotime($data['paid_on'])); ?>
                                                            </div>
                                                            <div style="display:none;" id="date<?= $sno; ?>">
                                                                <input type="date" class="form-control" name="date" id="date1<?= $sno; ?>" value="<?php echo date('Y-m-d', strtotime($data["paid_on"])) ?>">
                                                            </div>
                                                        </td>
                                                        <td class="text-center">
                                                            <button id="edit<?= $sno; ?>" class="btn btn-warning btn-xs" onclick="edit('<?= $sno; ?>');"><span class="fa fa-edit"></span><span class="sr-only"></span><i class="fas fa-paper-plane-o ml-1"></i></button>

                                                            <a href="<?php echo base_url() ?>index.php/Member/delete_expence1/<?php echo $data['id']; ?>" id="delete<?= $sno; ?>" class="btn btn-danger btn-xs"><span class="fas fa-times"></span><span class="sr-only"></span></a>
                                                            <button type="button" style="display:none;" id="save<?= $sno; ?>" class="btn btn-primary" onclick="save('<?= $sno; ?>','<?= $data['id'] ?>');">Save <i class="fas fa-paper-plane-o ml-1"></i></button>

                                                        </td>

                                                    </tr>
                                                    <?php $sno++; ?>
                                                <?php endforeach; ?>
                                            </tbody>

                                        </table>
                                       
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal fade" id="modalSubscriptionForm1" 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">
                                            <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_expenses" id="member_add_" enctype='multipart/form-data'>

                                            <div class="md-form mb-5">
                                                <label data-error="wrong" data-success="right" for="form3">Statements</label>

                                                <input type="text" id="statement" class="form-control validate" name="statement">

                                            </div>
                                            <div class="md-form mb-5">
                                                <label data-error="wrong" data-success="right" for="form3">Amount</label>

                                                <input type="number" id="amount" class="form-control validate" name="amount">
                                            </div>
                                            <div class="md-form mb-4">
                                                <label data-error="wrong" data-success="right" for="form2">To</label>
                                                <select name="to" id="cast" class="form-control">
                                                    <option value="">Select</option>
                                                    <?php foreach ($category as $caste) { ?>
                                                        <option value="<?php echo $caste['category']; ?>"><?php echo $caste['category']; ?></option>
                                                    <?php } ?>
                                                </select>
                                            </div>
                                            <br>
                                            <div class="md-form mb-4">
                                                <label data-error="wrong" data-success="right" for="form2">Mode of Transaction</label>
                                                <select name="mode" class="form-control" id="to">
                                                    <option value="">Select</option>
                                                    <option value="Cash">Cash</option>
                                                    <option value="Cheque">Cheque</option>
                                                </select>
                                            </div>
                                            <br>
                                            <div class="md-form mb-5">
                                                <label data-error="wrong" data-success="right" for="form3">Paid Date</label>

                                                <input type="date" id="date" class="form-control validate" name="date">
                                            </div>
                                    </div>
                                    <div class="modal-footer d-flex justify-content-center">
                                        <button class="btn btn-primary" onclick="check();">Add <i class="fas fa-paper-plane-o ml-1"></i></button>
                                    </div>
                                    </form>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

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

<script>
    $(document).ready(function() {
        $('.alert').fadeOut(3000);
        var table = $('#table_ids1').DataTable({
            "processing": true,
            "dom": 'lBfrtip',
            "lengthMenu": [
                [10, 25, 50, -1],
                [10, 25, 50, "All"]
            ],
            "buttons": [
                'copyHtml5',
                'excelHtml5',
                'csvHtml5',
                'pdfHtml5'
            ]
        });

        $(".buttons-html5").addClass("btn btn-primary");
        $('.dt-buttons').addClass("pt-3 pb-0");
    });

    function check() {
        var statement = $('#statement').val();
        var amount = $('#amount').val();
        var to = $('#to').val();
        var date = $('#date').val();
        if (statement == "") {
            alert("Statement Must Be Filled Out");
            event.preventDefault();
        }
        if (amount == "") {
            alert("Amount Must Be Filled Out");
            event.preventDefault();
        }
        if (to == "") {
            alert("To Must Be Filled Out");
            event.preventDefault();

        }
        if (date == "") {
            alert("Date  Must Be Filled Out");
            event.preventDefault();

        }
    }

    function edit(sno) {
        $('#statement' + sno).show();
        $('#amount' + sno).show();
        $('#to' + sno).show();
        $('#date' + sno).show();
        $('#save' + sno).show();
        $('#statementv' + sno).hide();
        $('#amountv' + sno).hide();
        $('#tov' + sno).hide();
        $('#datev' + sno).hide();
        $('#edit' + sno).hide();
        $('#delete' + sno).hide();
    }

    function save(sno, id) {
        var statement = $('#statement1' + sno).val();
        var amount = $('#amount1' + sno).val();
        var to = $('#to1' + sno).val();
        var paid_on = $('#date1' + sno).val();
        if (statement == "") {
            alert("Statement Must Be Filled Out");
            return false;
        }
        if (amount == "") {
            alert("Amount Must Be Filled Out");
            return false;

        }
        if (to == "") {
            alert("To Must Be Filled Out");
            return false;
        }
        if (paid_on == "") {
            alert("Date  Must Be Filled Out");
            return false;
        }
        $.ajax({
            type: 'POST',
            url: "<?php echo base_url() ?>index.php/Member/update_expense",
            data: {
                statement: statement,
                amount: amount,
                to: to,
                paid_on: paid_on,
                id: id
            },
            dataType: 'html',
            success: function(data) {
                if (data == 1) {
                    $('#statementv' + sno).html(statement);
                    $('#amountv' + sno).html(amount);
                    $('#tov' + sno).html(to);
                    $('#datev' + sno).html(paid_on);

                    $('#statementv' + sno).show();
                    $('#amountv' + sno).show();
                    $('#tov' + sno).show();
                    $('#datev' + sno).show();
                    $('#edit' + sno).show();
                    $('#delete' + sno).show();

                    $('#statement' + sno).hide();
                    $('#amount' + sno).hide();
                    $('#to' + sno).hide();
                    $('#date' + sno).hide();
                    $('#save' + sno).hide();
                    alert('updated Successfully..');
                }
            }
        });
    }
</script>