<script type="text/javascript">

    var params=0;
    var lines = new Array();
    $(function(){    


        $( "#showhidesearch" ).button({
            icons: {
                primary: "ui-icon-search"
            },
            text: true
        });

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

            loadGrid();
        });

    });


    function loadGrid(){

        var datefrom = document.getElementById('datepicker');
        var dateto = document.getElementById('datepicker2');
        var dataurl='<?= site_url() ?>sales/costing/getcosting';

        $("#lines").GridUnload();
        $.ajax(
        {
            url: "<?= site_url() ?>sales/costing/getcolumns/" + params ,
            type : "GET",
            data: "",
            dataType : "json",
            success: function(data)
            {
                
                jQuery("#lines").jqGrid({
                    url: data.url,
                    postData: {datefrom: datefrom.value, dateto: dateto.value},
                    mtype : "post",
                    datatype: "json",
                   colNames:['WAREHOUSE','COST','%','SALE','%', 'MARGIN','%'],
            colModel:[
                {name:'NAME',index:'NAME', width:100,editable:true,editoptions:{size:10}},
                {name:'COST',index:'COST', formatter:'currency', formatoptions: {thousandsSeparator:','}, width:50,align:"right", classes: 'costcell'},
                {name:'COSTPCT',index:'COSTPCT', width:25,editable:true,align:"center", classes: 'costcell'},
                {name:'SALE',index:'SALE', formatter:'currency', formatoptions: {thousandsSeparator:','}, width:50,align:"right", classes: 'salecell'},
                {name:'SALEPCT',index:'SALEPCT',width:25,editable:true,align:"center", classes: 'salecell'},
                {name:'MARGIN',index:'MARGIN', formatter:'currency', formatoptions: {thousandsSeparator:','}, width:50,align:"right", classes: 'margincell'},
                {name:'MARGINPCT',index:'MARGINPCT',formatter:'currency',width:25,editable:true,align:"center", classes: 'margincell'},

            ],
                    rowNum:0,
                    key: true,
                    height:'auto',
                    autowidth:true,
                sortname: 'id',
                 footerrow: true,
            userDataOnFooter: true,
            loadComplete: function() {
                          var costSum = jQuery('#lines').jqGrid('getCol', 'COST', false, 'sum');
                          var saleSum = jQuery('#lines').jqGrid('getCol', 'SALE', false, 'sum');
                          var marginSum = jQuery('#lines').jqGrid('getCol', 'MARGIN', false, 'sum');
                            var marginPct = ((saleSum - costSum)/saleSum)* 100;
                           
                          jQuery('#lines').jqGrid('footerData', 'set',
                          {
                              'NAME': 'Total:',
                                'COST': costSum,
                                'COSTPCT': '100%',
                                'SALE': saleSum,
                                'SALEPCT': '100%',
                                'MARGIN': marginSum,
                                'MARGINPCT': marginPct
                           });

                          
                    },
                    afterInsertRow: function(rowid, aData) {
//                        if (aData.AMOUNT == '' ) {
//                            jQuery('#lines').setCell(rowid,'NAME', '', {fontSize :'1.2em', fontWeight :'bold',background:'#696969', color:'#ffffff'});
//                            jQuery('#lines').setCell(rowid,'AMOUNT', '', {fontSize :'1.2em', fontWeight :'bold',background:'#696969', color:'#ffffff'});
//                            jQuery('#lines').setCell(rowid,'PERCENTAGE', '', {fontSize :'1.2em', fontWeight :'bold',background:'#696969', color:'#ffffff'});
//
//                        }
//                        else if (aData.PERCENTAGE == '100%') {
//                            jQuery('#lines').setCell(rowid,'NAME', '', {fontSize :'1.2em', fontWeight :'bold',background:'#3BA4D1', color:'#ffffff'});
//                            jQuery('#lines').setCell(rowid,'AMOUNT', '', {fontSize :'1.2em', fontWeight :'bold',background:'#3BA4D1', color:'#ffffff'});
//                            jQuery('#lines').setCell(rowid,'PERCENTAGE', '', {fontSize :'1.2em', fontWeight :'bold',background:'#3BA4D1', color:'#ffffff'});
//
//                        }
//                        else if (aData.NAME == 'SALES') {
//                            jQuery('#lines').setCell(rowid,'NAME', '', {background:'#696969', color:'#ffffff'});
//                            jQuery('#lines').setCell(rowid,'AMOUNT', '', {background:'#696969', color:'#ffffff'});
//                            jQuery('#lines').setCell(rowid,'PERCENTAGE', '', {background:'#696969', color:'#ffffff'});
//
//                        }
//                        else if (aData.NAME == 'GROSS MARGIN') {
//                            jQuery('#lines').setCell(rowid,'NAME', '', {fontSize :'1.4em', fontWeight :'bold',background:'#1B1E1F', color:'#ffffff'});
//                            jQuery('#lines').setCell(rowid,'AMOUNT', '', {fontSize :'1.4em', fontWeight :'bold',background:'#1B1E1F', color:'#ffffff'});
//                            jQuery('#lines').setCell(rowid,'PERCENTAGE', '', {fontSize :'1.4em', fontWeight :'bold',background:'#1B1E1F', color:'#ffffff'});
//
//                        }
                            

                    }

                })
            },
            error: function(x, e)
            {
                alert(x.readyState + " "+ x.status +" "+ e.msg);
            }

        });


    }

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

</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>
<script>
    // increase the default animation speed to exaggerate the effect
    $.fx.speeds._default = 1000;
    $(function() {
        $( "#dialog" ).dialog({
            autoOpen: false,
            show: "blind",
            hide: "explode",buttons: {
                Ok: function() {
                    $( this ).dialog( "close" );
                }
            }

        });

    });
</script>

<div class="main content clearfix">
    <div class="page-heading">
        <h2>Costing</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>
                <div id="content-table-inner">
                    <div id="table-content">
                        <?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>
					';
                        }
                        ?>
                        <!--  start product-table ..................................................................................... -->
                        <div id="toolbartop">
<!--                           <span class="button-strip">-->
                     <?php $dateTo = date('Y-m-d') ;
                     $dateFrom = strtotime(date("Y-m-d", strtotime($dateTo)) . " -7 day");?>
                            <table>
                                <tr>
                                    <td valign="bottom"><label>Date</label><br>
                                        <input name="datefrom" type="text"  value="<?php echo date("Y-m-d", $dateFrom) ?>"id="datepicker"/>
                                    </td>
                                    <td valign="bottom"><label>Date To</label><br>
                                        <input name="dateto" type="text" value="<?php echo  $dateTo ; ?>" id="datepicker2"/>
                                    </td>
                                    <td valign="bottom">
                                        <button id="show" name="show">Show</button>
                                    </td>
                                </tr>
                            </table>



                        </div>

                        <div align="center">
                        <table id="lines"></table>
                        <div id="pgtoolbar1"></div>
                        </div>
                    </div>
                </div>
            </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>