<script type="text/javascript" src="<?= site_url() ?>js/jquery-ui-timepicker-addon.js">
 </script>
<script type="text/javascript">
    $(function(){
        
        $('#datefrom').datepicker({ dateFormat: 'yy-mm-dd'});
        $('#dateto').datepicker({ dateFormat: 'yy-mm-dd'});
        
        $( "#showhidesearch" ).button({
            icons: {
                primary: "ui-icon-search"
            },
            text: true
        });


        $("#search").click(function(){
            loadGrid();
        });
        
       
        $("#showhidesearch").click(function(){
            if(document.getElementById('searchbartop').style.display == 'none')
                $("#searchbartop").show("blind", { direction: "vertical" }, 300);
            else
                $("#searchbartop").hide("blind", { direction: "vertical" }, 300);
        });
       
        function loadGrid()
        {
            var mcategory = document.getElementById('mcategory');
            
            var products = document.getElementById('products');
            var datefrom = document.getElementById('datefrom');

            $("#lines").GridUnload();
            jQuery("#lines").jqGrid({
                url:'<?= site_url() ?>inventory/closingstock/getclosingstock',
                postData: { mcategory: mcategory.value,  products: products.value, datefrom: datefrom.value},
                datatype: "json",
                mtype : "post",
                colNames:['CATEGORY','BARCODE','ITEM','COST','OPENING', 'VALUE', 'IN', 'VALUE','OUT', 'VALUE','CLOSING', 'VALUE'],
                colModel:[
        {name:'CATEGORY',index:'CATEGORY', width:80,editoptions:{readonly:true,size:10}},            
        {name:'BARCODE',index:'BARCODE', width:80,editoptions:{readonly:true,size:10}},
                     {name:'ITEM',index:'ITEM', width:100,align:"left", editoptions:{readonly:true,size:10}},
                     {name:'COST',index:'COST', width:100,align:"right", formatter:"currency", formatoptions: {thousandsSeparator:","},editoptions:{readonly:true,size:10}},
                     {name:'OPENING',index:'OPENING', width:100,align:"center", editoptions:{readonly:true,size:10}},
                     {name:'OPENINGVALUE',index:'OPENINGVALUE', width:100,align:"right", formatter:"currency", formatoptions: {thousandsSeparator:","},summaryType:'sum'},
                     {name:'STOCKIN',index:'STOCKIN', width:100,align:"center", editoptions:{readonly:true,size:10}},
                     {name:'INVALUE',index:'INVALUE', width:100,align:"right", formatter:"currency", formatoptions: {thousandsSeparator:","},summaryType:'sum'},
                     {name:'STOCKOUT',index:'STOCKOUT', width:100,align:"center", editoptions:{readonly:true,size:10}},
                     {name:'OUTVALUE',index:'OUTVALUE', width:100,align:"right", formatter:"currency", formatoptions: {thousandsSeparator:","},summaryType:'sum'},
                     {name:'CLOSINGSTOCK',index:'CLOSINGSTOCK', width:100,align:"center", editoptions:{readonly:true,size:10}},
                     {name:'CLOSINGVALUE',index:'CLOSINGVALUE', width:100,align:"right", formatter:"currency", formatoptions: {thousandsSeparator:","},summaryType:'sum'}
                ],
                rowNum:10000,
                rownumbers: true,
                key: true,
                rownumWidth: 40,
                height: "auto",
                width: 1165,
                pager: '#pgtoolbar1',
                sortname: 'CATEGORY',
                viewrecords: true,
                sortorder: "ASC",
                footerrow: true,
            userDataOnFooter: false,
                reloadAfterEdit: true,
                reloadAfterSubmit: true,
            loadComplete: function() {
                           $("option[value=100000000]").text('All');
    
        var openingValue = jQuery('#lines').jqGrid('getCol', 'OPENINGVALUE', false, 'sum');                  
        var inValue = jQuery('#lines').jqGrid('getCol', 'INVALUE', false, 'sum');
        var outValue = jQuery('#lines').jqGrid('getCol', 'OUTVALUE', false, 'sum');
        var closingValue = jQuery('#lines').jqGrid('getCol', 'CLOSINGVALUE', false, 'sum');
                          

                          jQuery('#lines').jqGrid('footerData', 'set',
                          {
                              'BARCODE': 'Total:',
                              'OPENINGVALUE': openingValue,
                              'INVALUE': inValue,
                              'OUTVALUE': outValue,
                              'CLOSINGVALUE': closingValue
                           });

                          },
                        grouping:true,
                        groupingView : {
                        groupField : ['CATEGORY'],
                        groupSummary : [true],
                        groupColumnShow : [false],
                        groupText : ['<b>{0} - {1} Item(s)</b>'],
                        groupCollapse : false,
                        groupOrder: ['asc']
                    },
            beforeSelectRow: function(rowid, e)
        {
             jQuery("#lines").jqGrid('resetSelection');
                return(true);
        }
            });
            $("#lines").jqGrid('navGrid', '#pgtoolbar1',{view:false, del:false, search:false, refresh:false, add:false, edit:false, excel:true})
                .navButtonAdd('#pgtoolbar1',{
                                caption:"Export to Excel",
                                buttonicon:"ui-icon-save",
                                onClickButton: function(){
                                  exportExcel();
                                },
                                position:"last"
                            });
    function exportExcel()
        {
            var mya=new Array();
            mya=$("#lines").getDataIDs();  // Get All IDs
            var data=$("#lines").getRowData(mya[0]);     // Get First row to get the labels
            var colNames=new Array();
            var ii=0;
            for (var i in data){colNames[ii++]=i;}    // capture col names
            var html="";
            for(k=0;k<colNames.length;k++)
            {
            html=html+colNames[k]+",";     // output each Column as tab delimited
            }
            html=html+"\n";
            for(i=0;i<mya.length;i++)
                {
                data=$("#lines").getRowData(mya[i]); // get each row
                for(j=0;j<colNames.length;j++)
                    {
                    html=html+data[colNames[j]]+","; // output each column as tab delimited
                    }
                html=html+"\n";  // output each row with end of line

                }
            html=html+"\n";  // end of line at the end

            document.forms[0].exportdata.value=html;
            document.forms[0].method='POST';
            document.forms[0].action='<?php echo site_url('sales/sales/exportcsv'); ?>';  // send it to server which will open this contents in excel file
            document.forms[0].target='_blank';
            document.forms[0].submit();

        }

         }
        $(document).ready(function() {
            $("button").button();
            loadGrid(null);
        });
    });
</script>
<!--GET PRODUCTS FROM PRODUCT'S TABLE-->
<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() {


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

                    }
                });
            },
            minLength: 1
        });
    });
</script>
<script type="text/javascript">
    $(function() {
        $( "#mcategory" ).autocomplete({
            source: function(request, response) {
                $.ajax({ url: "<?php echo site_url('inventory/categories/getcategoryautocomplete'); ?>",
                    data: { term: $("#mcategory").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="demo">

<div id="dialog" title="Message">
	<p>Please select a row !</p>
</div>

</div><!-- End demo -->

<div class="main content clearfix">
<div class="page-heading">
            <h2>Closing Stock</h2>
        </div>
        <!-- end page-heading -->

        <table align="right" 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">
                            <?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><br>
';
                            }
                            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><br>
';
                            }
                            ?>
                            <!-- start product-table .........................................
                            ............................................ -->
                            <div id="toolbartop">


                                     
                                <button id="showhidesearch" name="showhidesearch" >Search</button>
                            </div>
                            <div id="searchbartop" style="display:none">
                                 <div class="myform-search clearfix">
                                <table>
                                    <tr>
                                    <form>
                                        <td>Date From<br>
                                            <input name="datefrom" type="text" id="datefrom" value="<?php echo date('Y-m-d'); ?>" class="inp-form-small"/>
                                        </td><td>&nbsp;&nbsp;</td>
                                        <td>Date To<br>
                                            <input name="dateto" type="text" id="dateto" value="<?php echo date('Y-m-d'); ?>" class="inp-form-small"/>
                                        </td><td>&nbsp;&nbsp;</td>
                                        <td>&nbsp;&nbsp;</td>

                                        <td>Category<br>
                                            <input id="mcategory" type="text" name="mcategory" class="inp-form"/>

                                        </td><td>&nbsp;&nbsp;&nbsp;</td>

                                        <td>Item<br>
                                            <input id="products" type="text" name="product" class="inp-form"/>
                                        </td>

                                        <td>&nbsp;</td>

                                       <form method="post" action="<?php echo site_url('inventory/currentinventory/exportcsv'); ?>">
                                    <input type="hidden" name="exportdata" id="exportdata" value="" />
                                        </form>

                                        </form>



                                        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>

                                        <td>
                                            <br>
                                            <button id="search" name="search">Show</button>

                                        </td><td>&nbsp;&nbsp;</td>
                                          <form><td>
                                            <br>
                                            <button value="Reset">Reset</button>
                                        </td></form>
                                    </tr>
                                </table>
                                <br>
                                 </div>
                            </div>

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

                        <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>
