<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Web Pos</title>
        <meta name="description" content="All the features of Saleculator + Administrative features.">
        <link rel="icon" type="image/ico" href="<?= site_url() ?>favicon.ico">
        <link rel="stylesheet" href="<?= site_url() ?>css/default.css" type="text/css" media="screen" title="default" />
        <link rel="stylesheet" href="<?= site_url() ?>css/menu_style.css" type="text/css" />
        <link rel="stylesheet" href="<?= site_url() ?>css/forms.css" type="text/css" />

        <!--         JQUERY -->
        <link type="text/css" href="<?= site_url() ?>css/flick/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
        <link rel="stylesheet" type="text/css" media="screen" href="<?= site_url() ?>css/ui.jqgrid.css" />
        <script src="<?= site_url() ?>js/jquery-1.6.2.min.js" type="text/javascript"></script>
        <script src="<?= site_url() ?>js/grid.locale-en.js" type="text/javascript"></script>
        <script src="<?= site_url() ?>js/jquery.jqGrid.min.js" type="text/javascript"></script>
        <script src="<?= site_url() ?>js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
        <script src="<?= site_url() ?>js/custom.js" type="text/javascript"></script>

        <!--         JQGRID -->
        <link rel="stylesheet" type="text/css" media="screen" href="<?= site_url() ?>css/ui.jqgrid.css" />
        <script src="<?= site_url() ?>js/grid.locale-en.js" type="text/javascript"></script>
        <script src="<?= site_url() ?>js/jquery.jqGrid.min.js" type="text/javascript"></script>

        <!--         SERIALISE/UNSERIALISE/CLOSE MESSAGE -->
        <script src="<?= site_url() ?>js/custom.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="<?= site_url() ?>css/style.css" media="screen">
        <link rel="stylesheet" type="text/css" href="<?= site_url() ?>css/navi.css" media="screen">
        <style type="text/css">#wrapper-250{width:98%;margin:0 auto;}</style>
        <script type="text/javascript">

            function loadgrid() {
                $("#lines1").GridUnload();

                jQuery("#lines1").jqGrid({
                    url: '<?= site_url() ?>pos/ticket/gettickets/<?= $tableID ?>',
                    datatype: "json",
                    mtype: "post",
                    colNames: ['ID', 'PRODUCT', 'PRICE', 'QUANTITY', 'KOT'],
                    colModel: [
                        {name: 'ID', index: 'ID', width: 25, editable: true, editoptions: {readonly: true, size: 10}, hidden: true, key: true},
                        {name: 'PRODUCT', index: 'PRODUCT', width: 150, editable: true},
                        {name: 'PRICE', index: 'PRICE', width: 50, align: "right", editable: false, formatter: 'currency', formatoptions: {thousandsSeparator: ','}, editoptions: {size: 10}},
                        {name: 'QUANTITY', index: 'QUANTITY', align: "center", width: 25, editable: true},
                        {name: 'KOT', index: 'KOT', width: 25, editable: true, edittype: "select",   align: "center"}
                    ],
                    rownumbers: true,
                    key: true,
                    //rowNum:15,
                    //rowList:[15,30,45],
                    //rownumWidth: 25,
                    height: 'auto',
                    
                    autowidth: true,
                    multiselect: true,
                    beforeSelectRow: function(rowid, e)
                    {
                        jQuery("#lines1").jqGrid('resetSelection');
                        return(true);
                    },loadComplete: function() {
        var grid = $("#lines1");
        var ids = grid.getDataIDs();
        for (var i = 0; i < ids.length; i++) {
            grid.setRowData ( ids[i], false, {height: 20+i*2} );
        }
        // grid.setGridHeight('auto');
    }
                    //sortname: 'ID',
                    // sortorder: "desc",
                    /*multiselect: true,beforeSelectRow: function(rowid, e)
                     {
                     jQuery("#lines1").jqGrid('resetSelection');
                     return(true);
                     }*/
                });
                jQuery("#add").click(function() {

                    var rowid = jQuery("#lines1").jqGrid('getGridParam', 'selarrrow');

                    if (rowid != 0) {
                        var selid = jQuery("#lines1").jqGrid('getCell', rowid, 'ID');
                        if (selid != false) {
                            document.location.href = "<?= site_url() ?>pos/ticket/itemPlus/<?php echo $tableID ?>/" + selid + "/1";
                        }
                    }
                    else
                        alert("Please select a row !");
                });
                jQuery("#minus").click(function() {

                    var rowid = jQuery("#lines1").jqGrid('getGridParam', 'selarrrow');
                    if (rowid != 0) {
                        var selid = jQuery("#lines1").jqGrid('getCell', rowid, 'ID');
                        if (selid != false) {
                            document.location.href = "<?= site_url() ?>pos/ticket/itemPlus/<?php echo $tableID ?>/" + selid + "/2";
                        }
                    }
                    else
                        alert("Please select a row !");
                });
                jQuery("#kot").click(function() {

                    var rowid = jQuery("#lines1").jqGrid('getGridParam', 'selarrrow');
                    if (rowid != 0) {
                        var selid = jQuery("#lines1").jqGrid('getCell', rowid, 'ID');
                        if (selid != false) {
                            document.location.href = "<?= site_url() ?>pos/ticket/itemPlus/<?php echo $tableID ?>/" + selid + "/3";
                        }
                    }
                    else
                        alert("Please select a row !");
                });




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

                    var rowid = jQuery("#lines1").jqGrid('getGridParam', 'selarrrow');


                    if (rowid && confirm("Do you want to delete the ticket?")) {
                        document.location.href = "<?= site_url() ?>pos/ticket/deleteTicket/<?php echo $tableID ?>";
                    }


                });

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

                    var rowid = jQuery("#lines1").jqGrid('getGridParam', 'selarrrow');
                    if (rowid && confirm("Do you want to settle the bill?")) {
                        document.location.href = "<?= site_url() ?>pos/ticket/billSettlement/<?php echo $tableID ?>";
                    }

                });
                 jQuery("#menu").click(function() {                 
                        document.location.href = "<?= site_url() ?>pos/tables/select/<?php echo $tableID ?>";                 

                });
                 jQuery("#table").click(function() {
                        document.location.href = "<?= site_url() ?>pos/tables";

                });
                 jQuery("#logout").click(function() {
                        document.location.href = "<?= site_url() ?>pos/tables/logout";

                });

            }

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

            });


        </script>
        

  <script>
  $(function() {
    $( "input[type=submit], a, button" )
      .button()
      .click(function( event ) {
        event.preventDefault();
      });
  });
  </script>

    <body>
        
        <div id="wrapper-250">
                   
            <br><div><br></div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span class="button-strip">
                <input id="add" type="submit" value="PLUS"  style="height: 40px; width: 80px; font-size:20px;"/>
                <input id="minus" type="submit" value="MINUS" style="height: 40px; width: 80px; font-size:20px;"/>
                <input id="delete" type="submit" value="DELETE" style="height: 40px; width: 100px; font-size:20px;"/>
                <input id="kot" type="submit" value="KOT" style="height: 40px; width: 80px; font-size:20px;"/>
                <input id="bill" type="submit" value="BILL" style="height: 40px; width: 80px; font-size:20px;" />
                <input id="menu" type="submit" value="MENU" style="height: 40px; width: 80px; font-size:20px;" />
                <input id="table" type="submit" value="TABLE" style="height: 40px; width: 80px; font-size:20px;" />
                   
                        <?php echo '<a href="">' . $tableName[0]['NAME'] . '  ' . $tableToken[0]['NAME'] . '</a>'; ?>
                
                <input id="logout" type="submit" value="Logout" style="height: 40px; width: 80px; font-size:20px;" />
<!--                <button  id="add" name="add" class="button1"><img src="<?= site_url() ?>images/add-icon.png" alt=add  style=margin:-6px></button>
                <button  id="minus" name="minus" class="button1"><img src="<?= site_url() ?>images/zoom_out.png" alt=add  style=margin:-6px></button>
                <button  id="delete" name="delete" class="button1"><img src="<?= site_url() ?>images/button_cancel.png" alt=add  style=margin:-6px></button>
                <button  id="kot" name="kot" class="button1">KOT</button>
                <button  id="bill" name="bill" class="button1">BILL</button>-->
            </span><div><br></div>     
                            </div>
            <div>
                <table id="lines1"></table>
            </div>
       
    </body>






