<script type="text/javascript" src="label.js"></script>
 <link rel="stylesheet" href="label.css" type="text/css">
     <script type="text/javascript">


	$(document).ready(function() {


			CreateTemplateView(8.5,11.00,0.156,0.5,4.0,3.333,3,2,0.188,0.0);


	});



    </script>
<script type="text/javascript">
    $(function(){
          $( "#showhidesearch" ).button({
            icons: {
                primary: "ui-icon-search"
            },
            text: true
        });

           $("#search").click(function(){

            loadGrid();

        });

         $("#add").click(function(){

            document.location.href="<?= site_url() ?>label/label/add";
        });
//  $("#edit").click(function(){
//        document.location.href="<?= site_url() . 'products/edit' ?>";
//     });

        jQuery("#bedata").click( function() {

            var rowid = jQuery("#lines").jqGrid('getGridParam','selarrrow');
            if( rowid != 0){
            var selid = jQuery("#lines").jqGrid('getCell', rowid, 'ID');

            document.location.href="<?= site_url() ?>inventory/materials/edit/"+selid;
            }
             else {

$( "#dialog" ).dialog( "open" );
            }
        });

        $("#dedata").click(function(){

            var gr = jQuery("#lines").jqGrid('getGridParam','selarrrow');
            if( gr != 0){
        var selid = jQuery("#lines").jqGrid('getCell', gr, 'ID');
        if (selid && confirm("Do you want to delete the selected material?")) {
           document.location.href="<?= site_url() ?>inventory/materials/delete/"+selid;
    }
    }
          else {

$( "#dialog" ).dialog( "open" );
            }
        });
          $("#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 reference = document.getElementById('reference');
        var name = document.getElementById('name');
        var category = document.getElementById('category');
        var taxcategory = document.getElementById('taxcategory');
            $("#lines").GridUnload();
        jQuery("#lines").jqGrid({
            url:'<?= site_url() ?>label/label/getlabels',
          postData: {reference: reference.value, name: name.value, category: category.value, taxcategory: taxcategory.value},
            datatype: "json",
            mtype : "post",
            colNames:['ID', 'DIMENSIONNAME' ,'PAGEWIDTH'],
            colModel:[
                {name:'ID',index:'ID', width:100,hidden:true},
                {name:'DIMENSIONNAME',index:'DIMENSIONNAME', width:50, align:"left"},
                {name:'PAGEWIDTH',index:'PAGEWIDTH', width:110},
//                {name:'CATEGORY',index:'CATEGORY', width:100},
//                {name:'TAXCATEGORY',index:'TAXCATEGORY', width:50}

            ],
            rowNum:15,
            rowList:[15,30,100000000],
            rownumbers: true,
            key: true,
            rownumWidth: 40,
            height: 350,
            width:800,
            pager: '#pgtoolbar1',
            sortname: 'NAME',
            viewrecords: true,
            sortorder: "asc",
            multiselect: true,
            reloadAfterEdit: true,
            reloadAfterSubmit: true,
              loadComplete: function() {
    $("option[value=100000000]").text('All');
},
            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(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('label/label/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>
<script type="text/javascript">
    $(function() {
        $( "#name" ).autocomplete({
            source: function(request, response) {
                $.ajax({ url: "<?php echo site_url('inventory/searchmaterials/getmaterialautocomplete'); ?>",
                    data: { term: $("#name").val()},
                    dataType: "json",
                    type: "POST",
                    success: function(data){
                        response(data);

                    }
                });
            },
            minLength: 1
        });
        $( "#reference" ).autocomplete({
            source: function(request, response) {
                $.ajax({ url: "<?php echo site_url('inventory/searchmaterials/getreferenceautocomplete'); ?>",
                    data: { term: $("#reference").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>Label</h2>
        </div>
        <!-- end page-heading -->
        <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 ...................................................................... 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>
						';
                            }

                            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">
                            <button id="add" name="add">New</button>
                            <button id="bedata" name="bedata">Edit</button>
                            <button id="dedata" name="delete">Delete</button>

</span>


                             <button id="showhidesearch" name="showhidesearch" style="float: right;">Search</button>

                         </div>


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

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

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