<script type="text/javascript">
    $(document).ready(function () {
        $('#editabledatatable').dataTable({
            "destroy": true,
            "ajax": "<?php echo base_url(); ?>finance/accounts/getaccounts",
            "columns": [
                {"data": "id",
                    render: function (data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    }
                },
                {"data": "NAME"},
                {"data": "AVAILABLE_BALANCE"},
                {
                    "data": null,
                    "mRender": function (data, type, full) {
                        return '<a class="btn btn-info btn-xs shiny" onclick="return myFunction(this.id)" data-toggle="modal" data-target="#myModal" id=' + data.ID + ' ' + 'href=#' + '><i class="fa fa-edit"></i></a>&nbsp;&nbsp;<a class="btn btn-danger btn-xs  delete" data-toggle="modal" data-target="#confirmmodal" onclick="return confirmFunction(this.id)" id=' + data.ID + ' ' + 'href=#' + '><i class="fa fa-trash-o"></i></a>';
                    }
                }
            ]
        });
    });
</script>
<script type="text/javascript">
    function myFunction(id) {
        // id = $(this).attr('id');
        $.ajax({
            url: base_url + 'finance/accounts/editaccount/' + id,
            success: function (data) {
                var json = $.parseJSON(data);

                for (var i = 0; i < json.length; ++i)
                {
                    $("#id").val(json[i].ID);
                    $("#name").val(json[i].NAME);
                    $("#initial_balance").val(json[i].INITIAL);
                }

            }
        });
    }
    function confirmFunction(id) {
        $("#okid").val(id);
    }
    function deleteFunction() {
        id = $("#okid").val();
        $.ajax({
            url: base_url + 'finance/accounts/deleteaccount/' + id,
            success: function (data) {
                location.reload(true);
                $("#confirmmodal").hide();
                $("#modal-success").show();

            }
        });
    }
</script>
<!-- Page Content -->
<div class="page-content">
    <!-- Page Header -->
    <div class="page-header position-relative">
        <div class="header-title">
            <h1>
                Accounts
            </h1>
        </div>
        <!--Header Buttons-->
        <div class="header-buttons">
            <a class="sidebar-toggler" href="#">
                <i class="fa fa-arrows-h"></i>
            </a>
            <a class="refresh" id="refresh-toggler" href="">
                <i class="glyphicon glyphicon-refresh"></i>
            </a>
            <a class="fullscreen" id="fullscreen-toggler" href="#">
                <i class="glyphicon glyphicon-fullscreen"></i>
            </a>
        </div>
        <!--Header Buttons End-->
    </div>
    <!-- /Page Header -->
    <!-- Page Body -->
    <div class="page-body">
        <div class="row">
            <div class="col-xs-12 col-md-12">
                <div class="widget">
                    <?php
                    if ($this->session->flashdata('success_msg')) {
                        ?>
                        <div class="alert alert-success">
                            <a href="#" class="close" data-dismiss="alert">&times;</a>
                            <?php echo $this->session->flashdata('success_msg'); $this->session->unset_userdata('success_msg');?>
                        </div>
                        <?php
                    }
                    ?>
                    <div class="widget-body">
                        <div class="table-toolbar">
                            <div class="form-group"> <a type="button" class="btn btn-success icon-only new" data-toggle="modal" data-target="#myModal" id="editabledatatable_new" href="javascript:void(0);" >
                                    <i class="fa fa-plus"></i>
                                </a></div>
                            <div id="myModal" class="modal fade" role="dialog">
                                <div class="modal-dialog">
                                    <!-- Modal content-->
                                    <div class="modal-content">
                                        <form action="<?php echo base_url(); ?>finance/accounts/addaccount" method="post">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                                <h4 class="modal-title">Add New</h4>
                                            </div>
                                            <div class="modal-body">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <input type="hidden" id="id" name="id">
                                                        <div class="form-group">
                                                            <input type="text" class="form-control" name="name" id="name" placeholder="Name" required="">
                                                        </div>
                                                        <div class="form-group">
                                                            <textarea class="form-control" name="iniial" id="initial" placeholder="Initial Balance" rows="5" ></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="submit" class="btn btn-success">Submit</button>
                                                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div id="confirmmodal" class="modal fade" role="dialog">
                                <div class="modal-dialog">
                                    <!-- Modal content-->
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                            <h4 class="modal-title">Are you sure?</h4>
                                        </div>
                                        <div class="modal-footer">
                                            <input type="hidden" id="okid" value="">
                                            <button type="button" class="btn btn-success" onclick="return deleteFunction()">Ok</button>
                                            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-responsive"> 
                                <table class="table table-striped table-hover table-bordered editable" id="editabledatatable">
                                    <thead>
                                        <tr role="row">
                                            <th>
                                                ID
                                            </th>
                                            <th>
                                                NAME
                                            </th>
                                            <th>
                                                AVAILABLE BALANCE
                                            </th>

                                            <th>
                                                Action
                                            </th>
                                        </tr>
                                    </thead>

                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Page Body -->
    </div>
    <!-- /Page Content -->
</div>
<!-- /Page Container -->
<!-- Main Container -->
</div>