<script type="text/javascript">
    var mydata = new Array();
    $(function(){
        $('#datepicker').datepicker({ dateFormat: 'yy-mm-dd' });
     
        jQuery("#lines").jqGrid({
            url:'<?= site_url() ?>partner/supplierpricelist/getsupplierpricelist',
            datatype: "array",
            colNames:['ID','PRODUCT','PRICE'],
            colModel:[
                {name:'id',index:'id', width:100,hidden:true, editable:false,editoptions:{size:10}},
                {name:'material',index:'material', width:100,editable:false,editoptions:{readonly:true,size:10}},
                {name:'price',index:'price', width:100,editable:true,align:"center",editoptions:{size:10},classes: 'editcell'}
            ],
            rowNum:10,
            rowList:[10,20,30],
            height: 250,
            width: 700,
            pager: '#pgtoolbar1',
            sortname: 'id',
            viewrecords: true,
            sortorder: "desc",

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

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


    });

    function addLine(f)
    {
        oText = f.elements["material"];
        oText1 = f.elements["price"];

        mydata.push({id:mydata.length+1,material:oText.value,price:oText1.value});

        //for(var i=0;i<=mydata.length;i++)
        jQuery("#lines").jqGrid('addRowData',mydata.length,mydata[mydata.length-1]);

        oLines = f.elements["lineitems"];
        oLines.value = serialize(mydata);
        oText.value='';
        oText1.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);

    }

 function productChanged()
    {
        oForm = document.forms[0];
                pname = oForm.elements["material"];

        $.ajax({ url: "<?php echo site_url('sales/sales/getproductcostandqoh'); ?>",
             data:{product: pname.value},
            dataType: "json",
            type: "POST",
            success: function(data){
                oPrice = oForm.elements["price"];
                oPrice.value = data.cost;
                oUom = oForm.elements["uom"];
                oUom.value = data.uom;


            }
        });

    }
</script>

<!-- PRODUCT 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() {
        $( "#material" ).autocomplete({
            source: function(request, response) {
                $.ajax({ url: "<?php echo site_url('inventory/searchmaterials/getmaterialautocomplete'); ?>",
                    data: { term: $("#material").val()},
                    dataType: "json",
                    type: "POST",
                    success: function(data){
                        response(data);

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

                    }
                });

            },
            minLength: 1
        });

    });
   
</script>
<div class="main content clearfix">
    <div class="page-heading">
        <h2>Add Supplier Pricelist</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"></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">
                    <div id="table-content">
                        <?=
                        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>');
                        ?>
                        <!-- START CONTENT TABLE INNER -->

                        <?php
                        if ($this->session->flashdata('msgt') == 'E') {
                            echo '
				<div id="message-red">
				<table border="0" width="100%" cellpadding="0" cellspacing="0">
				<tr>
					<td class="red-left">' . $this->session->flashdata('msg') . '</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>
						';
                        }
                        if ($this->session->flashdata('msgt') == 'S') {
                            echo '
					<div id="message-green">
					<table border="0" width="100%" cellpadding="0" cellspacing="0">
					<tr>
						<td class="green-left">' . $this->session->flashdata('msg') . '</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>
					';
                        }
                        ?>


                        <div class="myform-outer">
                            <div class="myform">
                                <form action="<?= site_url() . 'partner/supplierpricelist/addsupplierprice/'; ?>" method="post">
                                    <div class="myform-controls">
                                        <table border="0" cellpadding="0" cellspacing="0" id="id-form">
                                            <tr>
                                                <th><span style="color:red;">*</span>Supplier</th>
                                                <td><input id="suppliers" name="suppliers" type="text" class="inp-form"/></td>
                                            </tr>
                                            <tr>
                                                <th><span style="color:red;">*</span>Price List Name</th>
                                                <td><input name="listname" type="text" class="inp-form" /></td>

                                            </tr>
                                            <tr>

                                                <th><label><span style="color:red;">*</span>Valid From:</label></th>
                                                <td> <input name="validfrom"  type="text" id="datepicker"/></td>


                                            </tr>
                                            <tr>
                                                <td>
                                                    <label>Active</label>
                                                    <input name="active" type="checkbox" class="inp-form"/></td>
                                            </tr>
                                            <tr> <th> <label><span style="color:red;">*</span>Material</label></th>

                                                <td><input id="material"  name="material"    onblur='productChanged()' type="text" class="inp-form"/> <input name="uom" disabled="disabled" type="text" class="inp-form"/> </td>
                                            </tr>

                                            <tr>
                                                <th ><span style="color:red;"></span>Price</th>
                                                <td><input name="price" type="text" class="inp-form" onblur='productChanged(this.form)'/>

                                                    <input type='button' value='Add product' onClick='addLine(this.form)'/>
                                                    <input type='button' value='Remove Product' onClick='removeLine(this.form)'/>
<!--                                                    <button id="add" name="add" >Add</button>
                                                    <button id="remove" name="remove" >Remove</button> </td>-->

                                            </tr>
                                            <tr>
                                                <th>
                                                </th>
                                                <td>
                                                    <table id="lines">
                                                    <div id="pgtoolbar2"></div></table>
                                                </td>
                                            </tr>
                                            <th>&nbsp;</th>
                                            <td valign="top">
                                                   <div align="left"><br>
                                                <input type="hidden" name="lineitems" value="" />
                                                <input type="hidden" name="addsupplierprice" value="addline" /><br>
                                                <button type="submit" value="0" name="submit">Submit</button>
                                                   </div></td>
                                        </table></div></form></div></div>
                    </div></div>
            </td>

            <td id="tbl-border-right"></td>
        </tr>
        <tr>
            <th class="sized bottomleft"></th>
            <td id="tbl-border-bottom"></td>
            <th class="sized bottomright"></th>
        </tr>
    </table>
</div>