
            <div class="row">
                <div class="col-md-12">
                    <?php if(isset($success_msg) && $success_msg!=NULL){ ?>
                    <div class="alert alert-success"><?php echo $success_msg; ?></div>
                    <?php } ?>
                    <div id="response_msg"></div>
                    <div class="tabbable tabbable-custom boxless">
                        <ul class="nav nav-tabs">
                            <li class="<?php echo $pending; ?>">
                                <a href="#tab_1" data-toggle="tab"> Pending Cheques</a>
                            </li>
                            <li class="<?php echo $deposited; ?>">
                                <a href="#tab_2" data-toggle="tab"> Deposited Cheques </a>
                            </li>
                            <li class="<?php echo $returned; ?>">
                                <a href="#tab_3" data-toggle="tab"> Returned Cheques </a>
                            </li>
                            <li class="<?php echo $cancelled; ?>">
                                <a href="#tab_3" data-toggle="tab"> Cancelled Cheques </a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            
                            <div id="submit_this_cheque" class="modal fade" tabindex="-1" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                                            <h4 class="modal-title">Submit This Cheque</h4>
                                        </div>
                                        <form id="submit_cheque_action" class="form-horizontal" method="post">
                                            <div id="view_cheque_details"></div>
                                            <div class="modal-footer">
                                                <button type="button" data-dismiss="modal" class="btn default">Close</button>
                                                <button type="submit" class="btn green">Save changes</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>

                            <div class="modal fade" id="success_modal" tabindex="-1" role="basic" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                                            <h4 class="modal-title">Success!</h4>
                                        </div>
                                        <div class="modal-body">
                                            Cheque Submitted Successfully
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn green" data-dismiss="modal" onclick="window.location.reload()">Ok</button>
                                        </div>
                                    </div>
                                    <!-- /.modal-content -->
                                </div>
                                <!-- /.modal-dialog -->
                            </div>
                            <!-- /.modal -->
                            
                            <div class="tab-pane <?php echo $pending; ?>" id="tab_1">
                                <script type="text/javascript" language="javascript" >
                                    $(document).ready(function () {
                                        var dataTable = $('#pending_cheques').DataTable({
                                            order: [[ 0, "asc" ]],
                                            select: true,
                                            pageLength: 10,
                                            processing: true,
                                            serverSide: true,
                                            ajax: {
                                                url: "Json_data/json_data_records?json_type=cheques&status='Pending'", // json datasource
                                                type: "post", // method  , by default get
                                                error: function () {  // error handling
                                                    $(".employee-grid-error").html("");
                                                    $("#employee-grid").append('<tbody class="employee-grid-error"><tr><th colspan="6">No data found in the server</th></tr></tbody>');
                                                    $("#employee-grid_processing").css("display", "none");

                                                }
                                            }, "aoColumns": [
                                                {"sTitle": "", "sClass": "hidden"},
                                                {"sTitle": "ID"},
                                                {"sTitle": "Customer Name"},
                                                {"sTitle": "Contact Number"},
                                                {"sTitle": "Bank Name"},
                                                {"sTitle": "Deposit Date"},
                                                {"sTitle": "Amount"},
                                                {"sTitle": "Actions", "sClass": "actionWidthMembers"}
                                            ], "fnCreatedRow": function (nRow, aData, iDataIndex) {
                                                $(nRow).attr('id', '' + aData[0]);

                                            }
                                        });

                                    });
                                </script>

                                <!-- BEGIN EXAMPLE TABLE PORTLET-->
                                <div class="portlet box grey-cascade">
                                    <div class="portlet-title">
                                        <div class="caption">
                                            <i class="fa fa-user"></i>Pending Cheques
                                        </div>
                                    </div>
                                    <div class="portlet-body">
                                        <table id="pending_cheques" class="table table-striped table-bordered table-hover"></table>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane <?php echo $deposited; ?>" id="tab_2">
                                <script type="text/javascript" language="javascript" >
                                    $(document).ready(function () {
                                        var dataTable = $('#deposited_cheques').DataTable({
                                            order: [[ 0, "asc" ]],
                                            select: true,
                                            pageLength: 10,
                                            processing: true,
                                            serverSide: true,
                                            ajax: {
                                                url: "Json_data/json_data_records?json_type=cheques&status='Deposited'", // json datasource
                                                type: "post", // method  , by default get
                                                error: function () {  // error handling
                                                    $(".employee-grid-error").html("");
                                                    $("#employee-grid").append('<tbody class="employee-grid-error"><tr><th colspan="6">No data found in the server</th></tr></tbody>');
                                                    $("#employee-grid_processing").css("display", "none");

                                                }
                                            }, "aoColumns": [
                                                {"sTitle": "", "sClass": "hidden"},
                                                {"sTitle": "ID"},
                                                {"sTitle": "Customer Name"},
                                                {"sTitle": "Contact Number"},
                                                {"sTitle": "Bank Name"},
                                                {"sTitle": "Deposit Date"},
                                                {"sTitle": "Amount"},
                                                {"sTitle": "Actions", "sClass": "actionWidthMembers"}
                                            ], "fnCreatedRow": function (nRow, aData, iDataIndex) {
                                                $(nRow).attr('id', '' + aData[0]);

                                            }
                                        });

                                    });
                                </script>

                                <!-- BEGIN EXAMPLE TABLE PORTLET-->
                                <div class="portlet box grey-cascade">
                                    <div class="portlet-title">
                                        <div class="caption">
                                            <i class="fa fa-user"></i>Deposited Cheques
                                        </div>
                                    </div>
                                    <div class="portlet-body">
                                        <table id="deposited_cheques" class="table table-striped table-bordered table-hover"></table>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane <?php echo $returned; ?>" id="tab_3">
                                <script type="text/javascript" language="javascript" >
                                    $(document).ready(function () {
                                        var dataTable = $('#returned_cheques').DataTable({
                                            order: [[ 0, "asc" ]],
                                            select: true,
                                            pageLength: 10,
                                            processing: true,
                                            serverSide: true,
                                            ajax: {
                                                url: "Json_data/json_data_records?json_type=cheques&status='Returned'", // json datasource
                                                type: "post", // method  , by default get
                                                error: function () {  // error handling
                                                    $(".employee-grid-error").html("");
                                                    $("#employee-grid").append('<tbody class="employee-grid-error"><tr><th colspan="6">No data found in the server</th></tr></tbody>');
                                                    $("#employee-grid_processing").css("display", "none");

                                                }
                                            }, "aoColumns": [
                                                {"sTitle": "", "sClass": "hidden"},
                                                {"sTitle": "ID"},
                                                {"sTitle": "Customer Name"},
                                                {"sTitle": "Contact Number"},
                                                {"sTitle": "Bank Name"},
                                                {"sTitle": "Deposit Date"},
                                                {"sTitle": "Amount"},
                                                {"sTitle": "Actions", "sClass": "actionWidthMembers"}
                                            ], "fnCreatedRow": function (nRow, aData, iDataIndex) {
                                                $(nRow).attr('id', '' + aData[0]);

                                            }
                                        });

                                    });
                                </script>

                                <!-- BEGIN EXAMPLE TABLE PORTLET-->
                                <div class="portlet box grey-cascade">
                                    <div class="portlet-title">
                                        <div class="caption">
                                            <i class="fa fa-user"></i>Returned Cheques
                                        </div>
                                    </div>
                                    <div class="portlet-body">
                                        <table id="returned_cheques" class="table table-striped table-bordered table-hover"></table>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane <?php echo $returned; ?>" id="tab_4">
                                <script type="text/javascript" language="javascript" >
                                    $(document).ready(function () {
                                        var dataTable = $('#cancelled_cheques').DataTable({
                                            order: [[ 0, "asc" ]],
                                            select: true,
                                            pageLength: 10,
                                            processing: true,
                                            serverSide: true,
                                            ajax: {
                                                url: "Json_data/json_data_records?json_type=cheques&status='Cancelled'", // json datasource
                                                type: "post", // method  , by default get
                                                error: function () {  // error handling
                                                    $(".employee-grid-error").html("");
                                                    $("#employee-grid").append('<tbody class="employee-grid-error"><tr><th colspan="6">No data found in the server</th></tr></tbody>');
                                                    $("#employee-grid_processing").css("display", "none");

                                                }
                                            }, "aoColumns": [
                                                {"sTitle": "", "sClass": "hidden"},
                                                {"sTitle": "ID"},
                                                {"sTitle": "Customer Name"},
                                                {"sTitle": "Contact Number"},
                                                {"sTitle": "Bank Name"},
                                                {"sTitle": "Deposit Date"},
                                                {"sTitle": "Amount"},
                                                {"sTitle": "Actions", "sClass": "actionWidthMembers"}
                                            ], "fnCreatedRow": function (nRow, aData, iDataIndex) {
                                                $(nRow).attr('id', '' + aData[0]);

                                            }
                                        });

                                    });
                                </script>

                                <!-- BEGIN EXAMPLE TABLE PORTLET-->
                                <div class="portlet box grey-cascade">
                                    <div class="portlet-title">
                                        <div class="caption">
                                            <i class="fa fa-user"></i>Cancelled Cheques
                                        </div>
                                    </div>
                                    <div class="portlet-body">
                                        <table id="cancelled_cheques" class="table table-striped table-bordered table-hover"></table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> 
            </div>
            <!-- END DASHBOARD STATS -->
        </div>
    </div>
    <!-- END CONTENT -->
</div>
<!-- END CONTAINER -->