<script type="text/javascript">

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

    $(function(){
            $('#datepicker').datepicker({ dateFormat: 'yy-mm-dd' });

        jQuery("#lines").jqGrid({
            url:'<?= site_url() ?>inventory/tariff/gettariff',
            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

        });

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

    });

    function addLine(f)
    {
        oText = f.elements["material"];
        oText1 = f.elements["price"];
        if(oText.value.length>0)
        {
            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);

    }


</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
        });

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

    });
</script>
<div class="main content clearfix">
    <div class="page-heading">
        <h2>Edit 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">
                        <?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() . '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() . 'partner/supplierpricelist/editsupplierprice/' . $this->uri->segment(4); ?>" method="post" name="pgroup" >
                                                <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" value="<?= $supplier[0]->NAME ?>" type="text" class="inp-form"/></td>
                                                        </tr>
                                                        <tr>
                                                            <th><span style="color:red;">*</span>Price List Name</th>
                                                            <td><input name="listname" type="text" value="<?= $pricelist[0]->PRICELISTNAME ?>"class="inp-form" /></td>

                                                        </tr>
                                                        <tr>

                                                            <th><label><span style="color:red;">*</span>Valid From:</label></th>
                                                            <td> <input name="validfrom"  type="text" value="<?= $pricelist[0]->VALIDFROM ?>" id="datepicker"/></td>


                                                        </tr>
                                                        
                                                        <tr>
                                                            <td>
                                                                <label>Active</label>
                                                                <input name="active" type="checkbox" value="true" class="inp-form" <?= ($pricelist[0]->ACTIVE == 1) ? 'checked' : '' ?>/></td>
                                                        </tr>
                                                        
                                                        <tr> <th> <label><span style="color:red;">*</span>Material</label></th>

                                                            <td><input id="material"  name="material"   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" />

                                                                <input type='button' value='Add product' onClick='addLine(this.form)'/>
                                                                <input type='button' value='Remove Product' onClick='removeLine(this.form)'/>

                                                        </tr>

                                                        <tr>
                                                            <th>
                                                            </th>
                                                            <td>
                                                                <table id="lines"></table>
                                                                <div id="pgtoolbar2"></div>
                                                            </td>
                                                        </tr>
                                                        <th>&nbsp;</th>
                                                        <td valign="top">
                                                            <input type="hidden" name="lineitems" value="" />
                                                            <input type="hidden" name="update" value="update" /><br>
                                                            <input type="submit" value="Submit" name="submit"></td>
                                                    </table></div></form></div></div>
                            </tr>
                            <!-- end content-table-inner -->
                        </table></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>
