<script type="text/javascript">
    var params=0;
    $(function(){

        $("#show").click(function(){

            var customers = document.getElementById('customers');

            $("#lines").GridUnload();

            jQuery("#lines").jqGrid({
            url:'<?= site_url() ?>reports/partners/getcustomers',
          postData: {customers: customers.value},
                        mtype : "post",
                        datatype: "json",
            colNames:['NAME', 'MAXDEBT','CURDEBT','CURDATE', 'NOTES'],
            colModel:[
                {name:'NAME',index:'NAME', width:100,editable:true,editoptions:{readonly:true,size:10}},
                {name:'MAXDEBT',index:'MAXDEBT', width:100,editable:true,align:"center",editoptions:{size:10}},
                {name:'CURDEBT',index:'CURDEBT', width:100,editable:true,align:"center",editoptions:{size:10}},
                {name:'CURDATE',index:'CURDATE', width:150,editable:true,align:"left",editoptions:{size:10}},
                {name:'NOTES',index:'NOTES', width:50,editable:true,align:"center",editoptions:{readonly:true,size:10}}
                  ],
            rowNum:10,
            rowList:[10,20,30],
            rownumbers: true,
            key: true,
            rownumWidth: 40,
            height: 231,
            width: 1150,
            pager: '#pgtoolbar1',
            sortname: 'id',
            viewrecords: true,
            sortorder: "desc",
            multiselect: true,
            reloadAfterEdit: true,
            reloadAfterSubmit: true

        });



    });

    $(document).ready(function() {
        $("button").button();
    });

    });

</script>
<!-- CUSTOMER AUTOCOMPLETE -->
<style>
    .ui-autocomplete-loading { background: white url('<?= site_url() ?>public/images/ui-anim_basic_16x16.gif') right center no-repeat; }
</style>

<script type="text/javascript">
    $(function() {
        $( "#customers" ).autocomplete({
            source: function(request, response) {
                $.ajax({ url: "<?php echo site_url('partner/customers/getcustomersautocomplete'); ?>",
                    data: { term: $("#customers").val()},
                    dataType: "json",
                    type: "POST",
                    success: function(data){
                        response(data);

                    }
                });
            },
            minLength: 1
        });
    });
</script>


<div id="content-outer">
    <!-- start content -->
    <div id="content">
        <!--  start page-heading -->
        <div id="page-heading">
            <h1>Customers</h1>
        </div>
        <!-- end page-heading -->
        <table border="0" width="100%" cellpadding="0" cellspacing="0" id="content-table">
            <tr>
                <th rowspan="3" class="sized"><img src="<?= site_url() ?>images/shared/side_shadowleft.jpg" width="20" height="300" alt="" /></th>
                <th class="topleft"></th>
                <td id="tbl-border-top">&nbsp;</td>
                <th class="topright"></th>
                <th rowspan="3" class="sized"><img src="<?= site_url() ?>images/shared/side_shadowright.jpg" width="20" height="300" alt="" /></th>
            </tr>
            <tr>
                <td id="tbl-border-left"></td>
                <td>
                    <!--  start content-table-inner ...................................................................... START -->
                    <div id="content-table-inner">
                        <!--  start table-content  -->
                        <div id="table-content">

                            <!--  start product-table ..................................................................................... -->

                            <table>
                                <td>
                                    &nbsp;&nbsp;Customers<br>
                                    &nbsp;&nbsp;<input id="customers" name="customers" class="inp-form"/>
                                </td>

                                <th valign="middle">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
                                <td>
                                    <br>
                                    <button id="show" name="add">Show</button>
                                </td>

                                </tr>
                                <tr><td>&nbsp;</td></tr>
                            </table>
                            <br/>

                            <table id="lines"></table>
                            <div id="pgtoolbar1"></div>
                            <!--  end content-table  -->

                            <div class="clear"></div>


                        </div>
                        <!--  end content-table-inner ............................................END  -->
                </td>
                <td id="tbl-border-right"></td>
            </tr>
            <tr>
                <th class="sized bottomleft"></th>
                <td id="tbl-border-bottom">&nbsp;</td>
                <th class="sized bottomright"></th>
            </tr>
        </table>
        <div class="clear">&nbsp;</div>

    </div>
    <!--  end content -->
    <div class="clear">&nbsp;</div>
</div>
<!--  end content-outer........................................................END -->

<div class="clear">&nbsp;</div>