
<script type="text/javascript">
    var mydata=<?php echo $lines; ?> ;
    $(document).ready(function() {
oForm = document.forms[0];
oLines = oForm.elements["lineitems"];
oLines.value = serialize(mydata);

});

     $(function(){
        jQuery("#lines").jqGrid({
            url:'<?= site_url() ?>inventory/productgroups/getproductgroups',
            datatype: "array",
            colNames:['ID','PRODUCT'],
            colModel:[
                {name:'ID',index:'ID', width:100,editable:false,editoptions:{readonly:true,size:10}},
                {name:'PRODUCT',index:'PRODUCT', width:100,editable:false,editoptions:{size:10}}
            ],
            rowNum:10,
            rowList:[10,20,30],
            height: 250,
            width: 700,
            pager: '#pgtoolbar1',
            sortname: 'ID',
            viewrecords: true,
            sortorder: "desc",

            multiselect: true

     });

for(var i=0;i<mydata.length;i++)
{

mydata[i]['ID']=i+1;
jQuery("#lines").jqGrid('addRowData',i+1,mydata[i]);
}
    $(document).ready(function() {
        $("button").button();

    });
   $("#add").click(function(){
        addLine();
        return false;
    });
  
    });
    function updatelineitems()
{

    for(var i=0;i<mydata.length;i++){

        if(mydata[i]['product']==null){
            mydata.splice(i, 1);
        }

    }

    oForm = document.forms[0];
    oLines = oForm.elements["lineitems"];
    oLines.value = serialize(mydata);
}
     function addLine(f)
    {
        oText = f.elements["product"];
        //oSelect = f.elements["plist"];
        if(oText.value.length>0)
        {
            mydata.push({ID:mydata.length+1,PRODUCT:oText.value});

            //for(var i=0;i<=mydata.length;i++)
            jQuery("#lines").jqGrid('addRowData',mydata.length,mydata[mydata.length-1]);
// ids=mydata.length;
//        delrow = "<input style='height:22px;width:30px;' type='button' value='Del' onclick=\"removeline("+ids+")\"  />";
//        jQuery("#lines").jqGrid('setRowData', ids, { action: delrow });
//
//        updatelineitems();
//        oText.value='';
            oLines = f.elements["lineitems"];
            oLines.value = serialize(mydata);
            oText.value='';

           }
    }


    function removeLine(f)
    {
        var ids = $('#lines').getGridParam('selarrrow');
        alert (ids);
        for (  var i = ids.length-1; i>=0; i--) {
            $('#lines').delRowData(ids[i]);
            mydata.splice(i, 1);
        }
        oLines = f.elements["lineitems"];
        oLines.value = serialize(mydata);

    }


 </script>
<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() {
$( "#product" ).autocomplete({
source: function(request, response) {

$.ajax({ url: "<?php echo site_url('inventory/searchproducts/getproductsautocomplete'); ?>",
data: { term: $("#product").val()},
dataType: "json",
type: "POST",
success: function(data){
response(data);
}
});

},
minLength: 1
});

});
</script>


<div class="main content clearfix">
<div class="page-heading">
            <h2>Edit Product Group</h2>
</div>
        <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 -->
                    <div id="content-table-inner">
                        <?php
                        if (@$message) {
                            echo '
				<!--  start message-green -->
				<div id="message-green">
				<table border="0" width="100%" cellpadding="0" cellspacing="0">
				<tr>
					<td class="green-left">' . $message . ' <a href="' . site_url() . 'inventory/products/warehouses">Go to warehouse list.</a></td>
					<td class="green-right"><a class="close-green"><img src="' . site_url() . 'images/table/icon_close_green.gif"   alt="" /></a></td>
				</tr>
				</table>
				</div>
				<!--  end message-green -->

	';
                        }
                        ?>
                        <?= validation_errors('<div id="message-red"><table border="0" width="100%" cellpadding="0" cellspacing="0"><tr><td class="red-left">', '</td><td class="red-right"><a class="close-red"><img src="' . site_url() . '/images/table/icon_close_red.gif" alt="" /></a></td></tr></table></div>'); ?>
                        <table border="0" width="100%" cellpadding="0" cellspacing="0">
                            <tr valign="top">
                                <td>

                                    <!-- start id-form -->
                                                <div class="myform-outer">
                           <div class="myform">
                                    <form action="<?= site_url() . 'inventory/productgroups/editproductgroup/' . $this->uri->segment(4); ?>" method="post" name="pgroup" >
                                          <div class="myform-controls">
                                        <table border="0" cellpadding="0" cellspacing="0"  id="id-form">

                                            <tr>
                                                <th valign="top"><span style="color:red;"></span>Group name</th>
                                                <td><input name="groupname" type="text" value="<?= $group[0]->NAME ?>"  class="inp-form" /></td>

                                            </tr>
                                            <tr>
                                                <th>Product
                                                </th>
                                                <td>  <input id="product" type="text" name="product" class="inp-form" onblur='productChanged(this.form)'/>
                                                      <input type='button' value='Add Product' onClick='addLine(this.form)' />
<!--                                                 <button id="add" name="add">Add</button>-->
                                            </td>
                                            </tr>
                                                  
                                             

<!--                                                </td>-->
<!--                                            </tr>-->
                                            <tr>
                                                <th>

                                                </th>
                                                <td>
                                                    <table id="lines"></table>
                                                    <div id="pgtoolbar2"></div>
                                                    <input type="hidden" name="lineitems" value="" />
                                                    <input type='button' value='Remove Product' onClick='removeLine(this.form)' />
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>&nbsp;</th>
                                                <td valign="top">
<div align="left">
                                                    <input type="hidden" name="update" value="addline" />
<!--                                                    <input type="submit" value="Submit" name="submit">-->
                                                    <button type="submit" value="0" name="submit">Submit</button>
<!--                                                     <button type="submit" value="" name="submit">Submit</button>--></div>

                                                </td>
                                            </tr>
                                        </table>
                                          </div>
                                    </form>
                           </div>
                                                </div>
                                    <!-- end id-form  -->
                                </td>
                            </tr>
                        </table>

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


                    </div>
                    <!--  end content-table-inner  -->
                </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>