<link rel="stylesheet" href="/js/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="/js/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="/js/jqwidgets/jqxdata.js"></script> 
<script type="text/javascript" src="/js/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="/js/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="/js/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="/js/jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="/js/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="/js/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="/js/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="/js/jqwidgets/jqxgrid.sort.js"></script> 
<script type="text/javascript" src="/js/jqwidgets/jqxgrid.pager.js"></script> 
<script type="text/javascript" src="/js/jqwidgets/jqxgrid.selection.js"></script> 
<script type="text/javascript" src="/js/jqwidgets/jqxgrid.edit.js"></script> 
<script type="text/javascript">
  $(document).ready(function () {
    var url = "/admin/accounts/invoice_data.php?data[iid]={INV_NUMBER}";
    var source = {
      datatype: "json",
      datafields: [
        { name: 'id_id', type: 'int'},
        { name: 'quantity', type: 'int' },
        { name: 'code', type: 'string' },
        { name: 'description', type: 'string' },
        { name: 'rate', type: 'float' },
        { name: 'amount', type: 'float' },
        { name: 'taxable', type: 'bool' }
      ],
      id: 'id_id',
      url: url,
      root: "data",
      addrow: function (rowid, rowdata, position, commit) {
        // synchronize with the server - send insert command
        // call commit with parameter true if the synchronization with the server is successful 
        //and with parameter false if the synchronization failed.
        // you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
        commit(true);
      },
      deleterow: function (rowid, commit) {
        // synchronize with the server - send delete command
        // call commit with parameter true if the synchronization with the server is successful 
        //and with parameter false if the synchronization failed.
        commit(true);
      }
    };
 
    var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
      if (value < 20) {
        return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
      }
      else {
        return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
      }
    }

    var dataAdapter = new $.jqx.dataAdapter(source, {
      downloadComplete: function (data, status, xhr) { },
      loadComplete: function (data) { },
      loadError: function (xhr, status, error) { }
    });

    // initialize jqxGrid
    $("#jqxgrid").jqxGrid( {
      width: 750,
      source: dataAdapter,                
      pageable: true,
      autoheight: true,
      sortable: true,
      altrows: true,
      enabletooltips: true,
      editable: true,
      showtoolbar: true,
      rendertoolbar: function (toolbar) {
        var me = this;
        var container = $("<div style='margin: 5px;'></div>");
        toolbar.append(container);
        container.append('<input id="addrowbutton" type="button" value="Add New Row" />');
        container.append('<input style="margin-left: 5px;" id="deleterowbutton" type="button" value="Delete Selected Row" />');
        $("#addrowbutton").jqxButton();
        $("#deleterowbutton").jqxButton();

        // create new row.
        $("#addrowbutton").on('click', function () {
          var commit = $("#jqxgrid").jqxGrid('addrow', null, {});
        });

        // delete row.
        $("#deleterowbutton").on('click', function () {
          //var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
          //var selectedcell = $("#jqxgrid").jqxGrid('getselectedcell');
          var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedcell').rowindex;
          var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
          if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
            var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
            var commit = $("#jqxgrid").jqxGrid('deleterow', id);
          }
        });
      },
      columns: [
        { text: 'Item',        datafield: 'code', width: 100 },
        { text: 'Quantity',    datafield: 'quantity', cellsformat: 'f', width: 100 },
        { text: 'Description', datafield: 'description', width: 300 },
        { text: 'Rate',        datafield: 'rate', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 100 },
        {
          text: 'Total',       datafield: 'amount', cellsformat: 'c2', cellsalign: 'right', width: 100, editable: false,
          cellsrenderer: function(index, datafield, value, defaultvaule, column, rowdata) {
            var total = parseFloat(rowdata.rate) * parseFloat(rowdata.quantity);
            return("<div style='margin: 4px;' class='jqx-right-align'>" + dataAdapter.formatNumber(total, "c2") + "</div>");
          }
        },
        { text: 'Tax', columntype: 'checkbox', datafield: 'taxable', align: 'center', width: 50 }
      ]
    });
  });
</script>

<h1>View Invoice</h1>
<hr />
<br />
{MESSAGES}
<!-- Start Header -->
<div style="float:left;margin-bottom:25px;">
<img src="/images/ubix_logo.jpg"><br /><br />
10 Harbor Park Drive<br />
Port Washington, NY 11050<br />
</div>
<div style="float:right;" align="right">
<font style="font-size:24px;font-weight:bold;">Invoice</font><br /><br />
<div class="iTable">
  <div class="iRow">
    <div class="iCell_Center">Date</div>
    <div class="iCell_Center">Invoice #</div>
  </div>
  <div class="iRow">
    <div class="iCell_Center">{INV_DATE}</div>
    <div class="iCell_Center">{INV_NUMBER}</div>
  </div>
</div>
</div>
<!-- End Header -->

<!-- Bill To Box -->
<div style="clear: both;margin-left:25px;margin-bottom:10px;">
  <div class="iTable" style="width:350px;">
    <div class="iRow">
      <div class="iCell">Bill To</div>
    </div>
    <div class="iRow">
      <div class="iCell" style="height:75px;">{BILL_TO}</div>
    </div>
  </div>
</div>
<!-- End Bill To Box -->

<!-- Start Line Items Box -->
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
     </div>
<!-- End Line Items Box -->

<!-- Start Total Box -->
  <div class="iTable" style="width:100%;">
    <div class="iRow" style="height:50px;">
      <div class="iCell" style="border-top: 0px;vertical-align:top;">{NOTES}</div>
      <div class="iCell" style="width:101px;border-top: 0px;border-right: 0px;vertical-align:middle;"><font style="weight:bold;font-size:20px;">Total:</font></div>
      <div class="iCell_Right" style="width:100px;border-top: 0px;border-left: 0px;vertical-align:middle;">${INV_TOTAL}</div>
    </div>
  </div>
<!-- End Total Box -->