add date to quick payment entry, RT#73382
[freeside.git] / httemplate / elements / customer-table.html
index fc298b0..25c26b5 100644 (file)
@@ -1,18 +1,88 @@
-%  # options example...  
-%  #
-%  # #listrefs...
-%  # 'header'      => [ '#', 'Item' ],
-%  # 'fields'      => [
-%  #                    'column',
-%  #                    sub { my ($row,$param) = @_; $param->{"column$row"}; },
-%  #                  ],
-%  # 'sizes'       => [],                         # sizes ignored for immutable
-%  # 'types'       => ['immutable', ''],          # immutable or ''/text
-%  # 'param'       => { column0 => 1 },           # preset column of row 0 to 1
-%  # 
-
+<%doc>
+
+Example:
+
+  include( '/elements/customer-table.html',
+
+             ###
+             # required
+             ###
+
+             #listrefs...
+             'header'        => [ '#', 'Item' ],
+             'fields'        => [
+                                  'column',
+                                  sub { my ($row,$param) = @_;
+                                        $param->{"column$row"};
+                                      },
+                                ],
+
+             ###
+             # optional
+             ###
+
+             'name_singular' => 'customer', #label
+             'custnum_update_callback' => 'name_of_js_callback' #passed a rownum
+
+             #listrefs
+             'type'          => ['immutable', ''], # immutable, checkbox, date or ''/text
+             'align'         => [ 'c', 'l', 'r', '' ],
+             'size'          => [],                # sizes ignored for immutable
+             'color'         => [],
+             'footer'        => ['string', '_TOTAL'], # strings or the special
+                                                      #value _TOTAL
+             'footer_align'  => [ 'c', 'l', 'r', '' ],
+
+             'param'         => { column0 => 1 },  # preset column of row 0 to 1
+
+         )
+
+Some incomplete notes for javascript programmers:
+
+On page load, existing rows are initialized by passing values to addRow
+based on existing cgi values.  An empty row (marked with the 'emptyrow' 
+attribute) is created by invoking addRow without values.  After that, 
+to keep the non-empty row count (totalrows) accurate, use newEmptyRow to 
+create the next row.  There should only be one empty row at a time.
+
+Global vars:
+total_el  - element for displaying total number of rows
+totalrows - total number of non-empty rows
+rownum - really more of a "next row" value, used by addRow
+allrows - array of tr elements, one for each row
+
+Don't confuse the global rownum with the element attribute rownum
+that is set as a reference point on some of the elements generated
+by this script.  They have different values.
+
+Some of the functions:
+updateTotalRow() - updates total_el based on value of totalrows
+addDeleteButton(searchrow) - adds delete button to searchrow
+newEmptyRow() - replaces old empty row
+deleteRow() - removes the row specified by this.rownum
+addRow(values) - adds a new row (marked as empty if values aren't specified)
+
+This mason element is currently only used by misc/batch-cust_pay.html, 
+and probably should be cleaned up more before being used by anything else.
+
+</%doc>
+<LINK REL="stylesheet" TYPE="text/css" HREF="<%$fsurl%>elements/calendar-win2k-2.css" TITLE="win2k-2">
+<SCRIPT TYPE="text/javascript" SRC="<%$fsurl%>elements/calendar_stripped.js"></SCRIPT>
+<SCRIPT TYPE="text/javascript" SRC="<%$fsurl%>elements/calendar-en.js"></SCRIPT>
+<SCRIPT TYPE="text/javascript" SRC="<%$fsurl%>elements/calendar-setup.js"></SCRIPT>
 <SCRIPT TYPE="text/javascript">
 
+  var num_open_invoices = new Array;
+
+  function clearhint_invnum() {
+
+    if ( this.value == 'Not found' || this.value == 'Multiple' ) {
+      this.value = '';
+      this.style.color = '#000000';
+    }
+
+  }
+
   function clearhint_custnum() {
 
     if ( this.value == 'Not found' || this.value == 'Multiple' ) {
 
   }
 
-  function <% $opt{prefix} %>search_custnum() {
+  function update_customer(searchrow, customerArray) {
+      
+      var display_custnum_obj = document.getElementById('display_custnum'+searchrow);
+      var custnum_obj = document.getElementById('custnum'+searchrow);
+      var customer = document.getElementById('customer'+searchrow);
+      var customer_select = document.getElementById('cust_select'+searchrow);
+
+      display_custnum_obj.disabled = false;
+      display_custnum_obj.style.backgroundColor = '#ffffff';
+      customer.disabled = false;
+      customer.style.backgroundColor = '#ffffff';
+
+      if ( customerArray.length == 0 ) {
+
+          custnum_obj.value = '';
+          display_custnum_obj.value = 'Not found';
+          customer.value = 'Not found';
+          display_custnum_obj.style.color = '#ff0000';
+          customer.style.color = '#ff0000';
+
+          customer.style.display = '';
+          customer_select.style.display = 'none';
+          return false;
+
+      } else if ( customerArray.length >= 6 ) {
+
+          custnum_obj.value = customerArray[0];
+          display_custnum_obj.value = customerArray[6];
+          display_custnum_obj.style.color = '#000000';
+          customer.value = customerArray[1];
+
+          update_balance_text(searchrow, customerArray[2]);
+          update_status_text( searchrow, customerArray[3]);
+          update_status_color(searchrow, '#'+customerArray[4]);
+          update_num_open(searchrow, customerArray[5]);
+
+          customer.style.display = '';
+          customer_select.style.display = 'none';
+          return true;
+      }
+  }
+
+  function search_invnum() {
 
     this.style.color = '#000000'
 
-    var custnum_obj = this;
+    var invnum_obj = this;
     var searchrow = this.getAttribute('rownum');
-    var custnum = this.value;
+    var invnum = this.value;
 
-    if ( custnum == 'searching...' || custnum == 'Not found' || custnum == '' )
+    if ( invnum == 'searching...' || invnum == 'Not found' || invnum == '' )
       return;
 
     if ( this.getAttribute('magic') == 'nosearch' ) {
       return;
     }
 
-    if ( ( <% $opt{prefix} %>rownum - searchrow ) == 1 ) {
-      <% $opt{prefix} %>addRow();
+    if ( document.getElementById('row'+searchrow).emptyrow ) {
+      newEmptyRow(searchrow);
     }
     var customer = document.getElementById('customer'+searchrow);
     customer.value = 'searching...';
 
     customer.style.display = '';
     customer_select.style.display = 'none';
+    
+    update_balance_text(searchrow, '');
+    update_status_text(searchrow, '');
+    update_status_color(searchrow, '#000000');
+    update_num_open(searchrow, 0);
+
+    function search_invnum_update(customers) {
+      
+      var customerArray = eval('(' + customers + ')');
+      update_customer(searchrow, customerArray);
+
+% if ( $opt{invnum_update_callback} ) {
+        <% $opt{invnum_update_callback} %>(searchrow)
+% }
 
-    function search_custnum_update(name) {
+    }
 
-      var name = eval('(' + name + ')' );
+    invnum_search( invnum, search_invnum_update );
 
-      customer.disabled = false;
-      customer.style.backgroundColor = '#ffffff';
+  }
+
+  function search_custnum() {
+
+    this.style.color = '#000000'
+
+    var display_custnum_obj = this;
+    var searchrow = this.getAttribute('rownum');
+    var custnum_obj = document.getElementById('custnum'+searchrow);
+    var display_custnum = this.value;
+
+    if ( display_custnum == 'searching...' || display_custnum == 'Not found' || display_custnum == '' )
+      return;
+
+    if ( this.getAttribute('magic') == 'nosearch' ) {
+      this.setAttribute('magic', '');
+      return;
+    }
+
+    if ( document.getElementById('row'+searchrow).emptyrow ) {
+      newEmptyRow(searchrow);
+    }
+
+    var customer_obj = document.getElementById('customer'+searchrow);
+    customer_obj.value = 'searching...';
+    customer_obj.disabled = true;
+    customer_obj.style.color = '#000000';
+    customer_obj.style.backgroundColor = '#dddddd';
+
+    var customer_select = document.getElementById('cust_select'+searchrow);
+
+    customer_obj.style.display = '';
+    customer_select.style.display = 'none';
+
+    var invnum = document.getElementById('invnum'+searchrow);
+    invnum.value = '';
+
+    update_balance_text(searchrow, '');
+    update_status_text( searchrow, '');
+    update_status_color(searchrow, '#000000');    
+    update_num_open(searchrow, 0);
+
+    function search_custnum_update(customers) {
+
+      var customerArrayArray = eval('(' + customers + ')') || [];
+
+      if ( customerArrayArray.length == 0 ) {
+
+        update_customer(searchrow, []);
+
+      } else if ( customerArrayArray.length == 1 ) {
+
+        update_customer(searchrow, customerArrayArray[0]);
+% if ( $opt{custnum_update_callback} ) {
+          <% $opt{custnum_update_callback} %>(searchrow)
+% }
 
-      if ( name.length > 0 ) {
-        customer.value = name;
-        customer.setAttribute('magic', 'nosearch');
       } else {
-        customer.value = 'Not found';
-        customer.style.color = '#ff0000';
+
+        custnum_obj.value = 'Multiple'; // or something
         custnum_obj.style.color = '#ff0000';
 
+        //blank the current list
+        customer_select.options.length = 0;
+
+        opt(customer_select, '', 'Multiple customers match "' + custnum + '" - select one', '#ff0000');
+        //add the multiple customers
+        for ( var s = 0; s < customerArrayArray.length; s++ ) {
+          opt(customer_select,
+              JSON.stringify(customerArrayArray[s]),
+              customerArrayArray[s][1],
+              '#000000');
+        }
+
+        opt(customer_select, 'cancel', '(Edit search string)', '#000000');
+
+        customer_obj.style.display = 'none';
+
+        customer_select.style.display = '';
+
       }
 
     }
 
-    custnum_search( custnum, search_custnum_update );
+    custnum_search(display_custnum, search_custnum_update );
 
   }
 
-  function <% $opt{prefix} %>search_customer() {
+  function search_customer() {
 
     var customer_obj = this;
     var searchrow = this.getAttribute('rownum');
       return;
     }
 
-    if ( ( <% $opt{prefix} %>rownum - searchrow ) == 1 ) {
-      <% $opt{prefix} %>addRow();
+    if ( document.getElementById('row'+searchrow).emptyrow ) {
+      newEmptyRow(searchrow);
     }
+    
+    var invnum = document.getElementById('invnum'+searchrow);
+    invnum.value = '';
 
-    var custnum_obj = document.getElementById('custnum'+searchrow);
+    var custnum_obj = document.getElementById('display_custnum'+searchrow);
     custnum_obj.value = 'searching...';
     custnum_obj.disabled = true;
     custnum_obj.style.color = '#000000';
     custnum_obj.style.backgroundColor = '#dddddd';
 
     var customer_select = document.getElementById('cust_select'+searchrow);
-
+    
     function search_customer_update(customers) {
 
-      var customerArray = eval('(' + customers + ')');
+      var customerArrayArray = eval('(' + customers + ')') || [ [] ];
 
       custnum_obj.disabled = false;
       custnum_obj.style.backgroundColor = '#ffffff';
 
-      if ( customerArray.length == 0 ) {
-
-        custnum_obj.value = 'Not found';
-        custnum_obj.style.color = '#ff0000';
-        customer_obj.style.color = '#ff0000';
-
-        customer_obj.style.display = '';
-        customer_select.style.display = 'none';
-
-
-      } else if ( customerArray.length == 1 ) {
+      if ( customerArrayArray.length == 0 ) {
 
-        custnum_obj.value = customerArray[0][0];
-        customer_obj.value = customerArray[0][1];
+        update_customer(searchrow, []);
 
-        customer_obj.style.display = '';
-        customer_select.style.display = 'none';
+      } else if ( customerArrayArray.length == 1 ) {
 
+        update_customer(searchrow, customerArrayArray[0]);
+% if ( $opt{custnum_update_callback} ) {
+        <% $opt{custnum_update_callback} %>(searchrow)
+% }
 
       } else {
 
         custnum_obj.style.color = '#ff0000';
 
         //blank the current list
-        for ( var i = customer_select.length; i >= 0; i-- )
-          customer_select.options[i] = null;
+        customer_select.options.length = 0;
 
         opt(customer_select, '', 'Multiple customers match "' + customer + '" - select one', '#ff0000');
-
         //add the multiple customers
-        for ( var s = 0; s < customerArray.length; s++ )
-          opt(customer_select, customerArray[s][0], customerArray[s][1], '#000000');
+        for ( var s = 0; s < customerArrayArray.length; s++ ) {
+          opt(customer_select,
+              JSON.stringify(customerArrayArray[s]),
+              customerArrayArray[s][1],
+              '#000000');
+        }
 
         opt(customer_select, 'cancel', '(Edit search string)', '#000000');
 
 
   function select_customer() {
 
-    var custnum = this.options[this.selectedIndex].value;
+    var custnum_balance_status = this.options[this.selectedIndex].value;
     var customer = this.options[this.selectedIndex].text;
 
     var searchrow = this.getAttribute('rownum');
+    var display_custnum_obj = document.getElementById('display_custnum'+searchrow);
     var custnum_obj = document.getElementById('custnum'+searchrow);
     var customer_obj = document.getElementById('customer'+searchrow);
+    var balance_obj = document.getElementById('balance'+searchrow);
+    var status_obj = document.getElementById('status'+searchrow);
 
-    if ( custnum == '' ) {
+    if ( custnum_balance_status == '' ) {
 
-    } else if ( custnum == 'cancel' ) {
+    } else if ( custnum_balance_status == 'cancel' ) {
 
+      display_custnum_obj.value = '';
       custnum_obj.value = '';
       custnum_obj.style.color = '#000000';
 
       customer_obj.focus();
 
     } else {
+    
+      update_customer(searchrow, JSON.parse(custnum_balance_status));
 
-      custnum_obj.value = custnum;
-      custnum_obj.style.color = '#000000';
-
-      customer_obj.value = customer;
-      customer_obj.style.color = '#000000';
-
-      this.style.display = 'none';
-      customer_obj.style.display = '';
+% if ( $opt{custnum_update_callback} ) {
+      <% $opt{custnum_update_callback} %>(searchrow)
+% }
 
     }
 
     what.options[length] = optionName;
   }
 
-</SCRIPT>
-
-<TABLE ID="<% $opt{prefix} %>OneTrueTable" BGCOLOR="#cccccc" BORDER=0 CELLSPACING=0>
-
-<TR>
-  <TH>Cust #</TH>
-  <TH>Customer</TH>
-% foreach my $header ( @{$opt{header}} ) {
-    <TH><% $header %></TH>
-% }
-</TR>
-% my $row = 0;
-% for ( $row = 0; exists($param->{"custnum$row"}); $row++ ) { 
-
-    <TR>
-
-      <TD>
-        <INPUT TYPE="text" NAME="custnum<% $row %>" ID="custnum<% $row %>" SIZE=8 MAXLENGTH=12 VALUE="<% $param->{"custnum$row"} %>" rownum="<% $row %>">
-          <SCRIPT TYPE="text/javascript">
-            var custnum_input<% $row %> = document.getElementById("custnum<% $row %>");
-            custnum_input<% $row %>.onfocus = clearhint_custnum;
-            custnum_input<% $row %>.onchange = <% $opt{prefix} %>search_custnum;
-          </SCRIPT>
-      </TD>
-
-      <TD>
-        <INPUT TYPE="text" NAME="customer<% $row %>" ID="customer<% $row %>" SIZE=64 VALUE="<% $param->{"customer$row"} %>" rownum="<% $row %>">
-          <SCRIPT TYPE="text/javascript">
-            var customer_input<% $row %> = document.getElementById("customer<% $row %>");
-            customer_input<% $row %>.onfocus = clearhint_customer;
-            customer_input<% $row %>.onclick = clearhint_customer;
-            customer_input<% $row %>.onchange = <% $opt{prefix} %>search_customer;
-          </SCRIPT>
-        <SELECT NAME="cust_select<% $row %>" ID="cust_select<% $row %>" rownum="<% $row %>" STYLE="color:#ff0000; display:none">
-        </SELECT>
-          <SCRIPT TYPE="text/javascript">
-            var customer_select<% $row %> = document.getElementById("cust_select<% $row %>");
-            customer_select<% $row %>.onchange = select_customer;
-          </SCRIPT>
-      </TD>
+  function update_status_text(rownum, newval) {
+    document.getElementById('status'+rownum).value = newval;
+    document.getElementById('status'+rownum+'_text').innerHTML = newval;
+  }
 
-%   my $col = 0;
-%   foreach my $field ( @{$opt{fields}} ) {
-%     my $value;
-%     if ( ref($field) eq 'CODE' ) {
-%       $value = &{$field}($row,$param);
-%     } else {
-%       $value = $param->{"$field$row"}; 
-%     }
-%     my $name = (ref($field) eq 'CODE') ? "column${col}_$row" : "$field$row";
-%     my $size = $sizes->[$col] || 10;
-      <TD>
-%     if (! $types->[$col] || $types->[$col] eq 'text') {
-        <INPUT TYPE="text" NAME="<% $name %>" SIZE="<% $size %>" VALUE="<% $value %>" >
-%     } elsif ($types->[$col] eq 'immutable') {
-        <% $value %>
-        <INPUT TYPE="hidden" NAME="<% $name %>" VALUE="<% $value %>" >
-%     } else {
-        Cannot represent unknown type: <% $types->[$col] %>
-%     }
-      </TD>
-%     $col++;
-%   }
+  function update_status_color(rownum, newval) {
+    document.getElementById('statuscolor'+rownum).value = newval;
+    document.getElementById('status'+rownum+'_text').style.color = newval;
+  }
 
-    </TR>
-% } 
+  function update_balance_text(rownum, newval) {
+    document.getElementById('balance'+rownum).value = newval;
+    document.getElementById('balance'+rownum+'_text').innerHTML = newval;
+  }
 
+  function update_num_open(rownum, newval) {
+    document.getElementById('num_open'+rownum).value = newval;
+    num_open_invoices[rownum] = newval;
+  }
 
-</TABLE>
+  // updates display of total rows based on value of totalrows
+  function updateTotalRow () {
+    if ( totalrows == 1 ) {
+      total_el.innerHTML =
+        'Total '
+          + totalrows
+          + ' <% $opt{name_singular} || 'customer' %>';
+    } else {
+      total_el.innerHTML =
+        'Total '
+          + totalrows
+          + ' <% PL($opt{name_singular} || 'customer') %>';
+    }
+  }
 
-<% include('/elements/xmlhttp.html',
-              'url'  => $p. 'misc/xmlhttp-cust_main-search.cgi',
-              'subs' => [qw( custnum_search smart_search )],
-           )
-%>
+  var total_el, rownum, totalrows, allrows;
+
+  function addDeleteButton (searchrow) {
+    var td_delete = document.getElementById('delete'+searchrow);
+    var button_delete = document.createElement('INPUT');
+    button_delete.setAttribute('rownum', searchrow);
+    button_delete.setAttribute('type', 'button');
+    button_delete.setAttribute('value', 'X');
+    button_delete.onclick = deleteRow;
+    button_delete.style.color = '#ff0000';
+    button_delete.style.fontWeight = 'bold';
+    button_delete.style.paddingLeft = '2px';
+    button_delete.style.paddingRight = '2px';
+    td_delete.appendChild(button_delete);
+  }
 
-<SCRIPT TYPE="text/javascript">
+  function newEmptyRow (searchrow) {
+    // add delete button to current row
+    addDeleteButton(searchrow);
+    // mark current row as non-empty
+    var oldemptyrow = document.getElementById('row'+searchrow);
+    oldemptyrow.emptyrow = false;
+    // update totalrows
+    totalrows++
+    updateTotalRow();
+    // add a new empty row
+    addRow();
+  }
 
-  var <% $opt{prefix} %>rownum = <% $row %>;
+  function deleteRow() {
+    var thisrownum = this.getAttribute('rownum');
+% if ( $opt{delete_row_callback} ) {
+    // callback
+    <% $opt{delete_row_callback} %>(thisrownum);
+% }
+    // remove the actual row
+    var thisrow = document.getElementById('row'+thisrownum);
+    thisrow.parentNode.removeChild(thisrow);
+    // remove row from tally of all rows
+    var newrows = [];
+    for (i = 0; i < allrows.length; i++) {
+      if (allrows[i] == thisrownum) continue;
+      newrows.push(allrows[i]);
+    }
+    allrows = newrows;
+    totalrows--; // should never be deleting empty rows
+    updateTotalRow();
+    // recalculate column totals, if any
+% my $col = 0;
+% foreach my $footer ( @{$opt{footer}} ) {
+%   if ($footer eq '_TOTAL' ) {
+    calc_total<% $col %>()
+%   }
+%   $col++;
+% }
+  }
 
-  function <% $opt{prefix} %>addRow() {
+  function addRow(values) {
 
-    var table = document.getElementById('<% $opt{prefix} %>OneTrueTable');
+    var table = document.getElementById('OneTrueTable');
     var tablebody = table.getElementsByTagName('tbody').item(0);
 
-    var row = document.createElement('TR');
+    var row = table.insertRow(table.rows.length - 1);
+    var thisrownum = values ? values.rownum : rownum;
+    row.setAttribute('id', 'row'+thisrownum);
+    row.emptyrow = values ? false : true;
+    
+    var invnum_cell = document.createElement('TD');
+
+      var invnum_input = document.createElement('INPUT');
+      invnum_input.setAttribute('name', 'invnum'+thisrownum);
+      invnum_input.setAttribute('id',   'invnum'+thisrownum);
+      invnum_input.style.textAlign = 'right';
+      invnum_input.setAttribute('size', 8);
+      invnum_input.setAttribute('maxlength', 12);
+      invnum_input.setAttribute('rownum', thisrownum);
+      invnum_input.value = values ? values.invnum : '';
+      invnum_input.onfocus = clearhint_invnum;
+      invnum_input.onchange = search_invnum;
+      invnum_cell.appendChild(invnum_input);
+
+    row.appendChild(invnum_cell);
 
     var custnum_cell = document.createElement('TD');
 
+      var display_custnum_input = document.createElement('INPUT');
+      display_custnum_input.setAttribute('name', 'display_custnum'+thisrownum);
+      display_custnum_input.setAttribute('id',   'display_custnum'+thisrownum);
+      display_custnum_input.style.textAlign = 'right';
+      display_custnum_input.setAttribute('size', 8);
+      display_custnum_input.setAttribute('maxlength', 12);
+      display_custnum_input.setAttribute('rownum', thisrownum);
+      display_custnum_input.value = values ? values.custnum : '';
+      display_custnum_input.onfocus = clearhint_custnum;
+      display_custnum_input.onchange = search_custnum;
+      custnum_cell.appendChild(display_custnum_input);
+
       var custnum_input = document.createElement('INPUT');
-      custnum_input.setAttribute('name', 'custnum'+<% $opt{prefix} %>rownum);
-      custnum_input.setAttribute('id',   'custnum'+<% $opt{prefix} %>rownum);
-      custnum_input.setAttribute('size', 8);
-      custnum_input.setAttribute('maxlength', 12);
-      custnum_input.setAttribute('rownum', <% $opt{prefix} %>rownum);
-      custnum_input.onfocus = clearhint_custnum;
-      custnum_input.onchange = <% $opt{prefix} %>search_custnum;
+      custnum_input.type = 'hidden';
+      custnum_input.setAttribute('name', 'custnum'+thisrownum);
+      custnum_input.setAttribute('id',   'custnum'+thisrownum);
+      custnum_input.setAttribute('rownum', thisrownum);
+      custnum_input.value = values ? values.custnum : '';
       custnum_cell.appendChild(custnum_input);
 
     row.appendChild(custnum_cell);
+    
+    var status_cell = document.createElement('TD');
+      status_cell.style.textAlign = 'center';
+        
+      var status_span = document.createElement('SPAN');
+      status_span.setAttribute('id', 'status'+thisrownum+'_text');
+      status_span.style.fontWeight = 'bold';
+      status_span.style.color = values ? values.statuscolor : '';
+      status_span.setAttribute('rownum', thisrownum);
+      status_span.appendChild(
+        document.createTextNode(values ? values.status : '')
+      );
+      status_cell.appendChild(status_span);
+        
+      var status_input = document.createElement('INPUT');
+      status_input.setAttribute('type', 'hidden');
+      status_input.setAttribute('name', 'status'+thisrownum);
+      status_input.setAttribute('id',   'status'+thisrownum);
+      status_input.setAttribute('rownum', thisrownum);
+      status_input.value = values ? values.status : '';
+      status_cell.appendChild(status_input);
+
+      var statuscolor_input = document.createElement('INPUT');
+      statuscolor_input.setAttribute('type', 'hidden');
+      statuscolor_input.setAttribute('name', 'statuscolor'+thisrownum);
+      statuscolor_input.setAttribute('id',   'statuscolor'+thisrownum);
+      statuscolor_input.setAttribute('rownum', thisrownum);
+      statuscolor_input.value = values ? values.statuscolor : '';
+      status_cell.appendChild(statuscolor_input);
+
+    row.appendChild(status_cell);
 
     var customer_cell = document.createElement('TD');
 
       var customer_input = document.createElement('INPUT');
-      customer_input.setAttribute('name', 'customer'+<% $opt{prefix} %>rownum);
-      customer_input.setAttribute('id',   'customer'+<% $opt{prefix} %>rownum);
+      customer_input.setAttribute('name', 'customer'+thisrownum);
+      customer_input.setAttribute('id',   'customer'+thisrownum);
       customer_input.setAttribute('size', 64);
       customer_input.setAttribute('value', '(last name or company)' );
-      customer_input.setAttribute('rownum', <% $opt{prefix} %>rownum);
+      customer_input.setAttribute('rownum', thisrownum);
+      customer_input.value = values ? values.customer : '';
       customer_input.onfocus = clearhint_customer;
       customer_input.onclick = clearhint_customer;
-      customer_input.onchange = <% $opt{prefix} %>search_customer;
+      customer_input.onchange = search_customer;
       customer_cell.appendChild(customer_input);
 
       var customer_select = document.createElement('SELECT');
-      customer_select.setAttribute('name', 'cust_select'+<% $opt{prefix} %>rownum);
-      customer_select.setAttribute('id',   'cust_select'+<% $opt{prefix} %>rownum);
-      customer_select.setAttribute('rownum', <% $opt{prefix} %>rownum);
+      customer_select.setAttribute('name', 'cust_select'+thisrownum);
+      customer_select.setAttribute('id',   'cust_select'+thisrownum);
+      customer_select.setAttribute('rownum', thisrownum);
       customer_select.style.color = '#ff0000';
       customer_select.style.display = 'none';
       customer_select.onchange = select_customer;
       customer_cell.appendChild(customer_select);
 
     row.appendChild(customer_cell);
+    
+    var balance_cell = document.createElement('TD');
+
+      balance_cell.style.textAlign = 'right';
+      balance_cell.appendChild(document.createTextNode('<%$money_char%>'));
+
+      var balance_span = document.createElement('SPAN');
+      balance_span.setAttribute('id', 'balance'+thisrownum+'_text');
+      balance_span.setAttribute('rownum', thisrownum);
+      balance_cell.appendChild(balance_span);
+
+      balance_cell.appendChild(
+        document.createTextNode(String.fromCharCode(160) + (values ? values.balance : '')) //&nbsp;
+      );
+
+      var balance_input = document.createElement('INPUT');
+      balance_input.setAttribute('type', 'hidden');
+      balance_input.setAttribute('name', 'balance'+thisrownum);
+      balance_input.setAttribute('id',   'balance'+thisrownum);
+      balance_input.setAttribute('rownum', thisrownum);
+      balance_input.value = values ? values.balance : '';
+      balance_cell.appendChild(balance_input);
+
+      var num_open_input = document.createElement('INPUT');
+      num_open_input.setAttribute('type', 'hidden');
+      num_open_input.setAttribute('name', 'num_open'+thisrownum);
+      num_open_input.setAttribute('id',   'num_open'+thisrownum);
+      num_open_input.setAttribute('rownum', thisrownum);
+      balance_cell.appendChild(num_open_input);
+
+    row.appendChild(balance_cell);
 
 %   my $col = 0;
 %   foreach my $field ( @{$opt{fields}} ) {
-    var my_cell = document.createElement('TD');
+
+      var my_cell = document.createElement('TD');
+      my_cell.setAttribute('align', '<% $align{ $opt{align}->[$col] || 'l' } %>');
+%     if ($opt{'color'}->[$col]) {
+      my_cell.style.color = '<% $opt{color}->[$col] %>';
+%     }
 
 %     if ($types->[$col] eq 'immutable') {
-%       my $value;
-%       if ( ref($field) eq 'CODE' ) {
-%         $value = &{$field}($row,$param);
-%       } else {
-%         $value = $param->{"$field$row"}; 
-%       }
-        var my_text = document.createTextNode('<% $value %>');
+        var my_text = document.createTextNode(values ? values.<% $field %> : '');
         my_cell.appendChild(my_text);
 %     }
 
+%     my $name  = (ref($field) eq 'CODE') ? "column${col}_" : $field;
       var my_input = document.createElement('INPUT');
-      my_input.setAttribute('name', '<% $field %>'+<% $opt{prefix} %>rownum);
+      my_input.setAttribute('name', '<% $name %>'+thisrownum);
+      my_input.setAttribute('id',   '<% $name %>'+thisrownum);
+      my_input.style.textAlign = '<% $align{ $opt{align}->[$col] || 'l' } %>';
       my_input.setAttribute('size', <% $sizes->[$col] || 10 %>);
-%     if ($types->[$col] eq 'immutable') {
-        my_input.setAttribute('type', 'hidden');
+      my_input.setAttribute('rownum', thisrownum);
+%     if ( $types->[$col] eq 'immutable' ) {
+      my_input.setAttribute('type', 'hidden');
+%     } elsif ( $types->[$col] eq 'checkbox' ) {
+      my_input.setAttribute('type', 'checkbox');
+      my_input.checked = (values && values.<% $field %>) ? true : false;
+%     } elsif ( $types->[$col] eq 'date' ) {
+      my_input_button = document.createElement('IMG');
+      my_input_button.setAttribute('src', '<% $fsurl %>images/calendar.png');
+      my_input_button.setAttribute('title', <% mt('Select date') |js_string %>);
+      my_input_button.setAttribute('name', '<% $name %>'+thisrownum+'button');
+      my_input_button.setAttribute('id',   '<% $name %>'+thisrownum+'button');
+%     }
+      my_input.value = (values && values.<% $field %>) || '';
+%     if ( $opt{onchange}->[$col] ) {
+        my_input.onchange   = <% $opt{onchange}->[$col] %>;
+%     }
+%     elsif ( $opt{footer}->[$col] eq '_TOTAL' ) {
+        my_input.onchange   = calc_total<%$col%>;
+        my_input.onkeyup    = calc_total<%$col%>;
 %     }
       my_cell.appendChild(my_input);
+%     if ( $types->[$col] eq 'date' ) {
+      my_cell.appendChild(my_input_button);
+%     }
 
     row.appendChild(my_cell);
 
+%     if ( $types->[$col] eq 'date' ) {
+      Calendar.setup({
+        inputField: '<% $name %>'+thisrownum,
+        ifFormat:   "<% $date_format %>",
+        button:     '<% $name %>'+thisrownum+'button',
+        align:      "BR"
+      });
+%     }
+
 %     $col++;
 %   }
 
-    tablebody.appendChild(row);
+    var td_delete = document.createElement('TD');
+    td_delete.setAttribute('id', 'delete'+thisrownum);
+    row.appendChild(td_delete);
+    if (values) {
+      addDeleteButton(thisrownum);
+    }
 
-    <% $opt{prefix} %>rownum++;
+    update_num_open(thisrownum, (values ? values.num_open : '0'));
 
-  }
+% if ( $opt{add_row_callback} ) {
+    <% $opt{add_row_callback} %>(thisrownum, values);
+% }
+
+    // update the total number of rows display
+    allrows.push(thisrownum);
+    if (values) totalrows++;
+    updateTotalRow();
+
+    // update the next available row number
+    if (thisrownum >= rownum) {
+      rownum = thisrownum + 1;
+    }
+
+  } // end of addRow
+
+
+</SCRIPT>
+
+<TABLE ID="OneTrueTable" CLASS="fsinnerbox">
+
+<TR>
+  <TH>Inv #</TH>
+  <TH>Cust #</TH>
+  <TH>Status</TH>
+  <TH>Customer</TH>
+  <TH>Balance</TH>
+% foreach my $header ( @{$opt{header}} ) {
+    <TH><% $header %></TH>
+% }
+</TR>
+
+% my @rownums = sort { $a <=> $b } map /^custnum(\d+)$/, keys %$param;
+<TR id="row_total">
+  <TH COLSPAN=5 ID="_TOTAL_TOTAL">
+    Total <% @rownums || 0 %>
+    <% PL($opt{name_singular} || 'customer', ( @rownums || 0 ) ) %>
+  </TH>
+% my $col = 0;
+% foreach my $footer ( @{$opt{footer}} ) {
+%   my $align = $align{ $opt{'footer_align'}->[$col] || 'c' };
+%   if ($footer eq '_TOTAL' ) {
+%     my $id = $opt{'fields'}->[$col];
+%     $id = ref($id) ? "column${col}_TOTAL" : "${id}_TOTAL";
+      <TH ALIGN="<% $align %>" ID="<% $id %>">&nbsp;<% sprintf('%.2f', $total[$col] ) %></TH>
+%   } else {
+      <TH ALIGN="<% $align %>"><% $footer %></TH>
+%   }
+%   $col++;
+% }
+</TR>
 
-% unless ($cgi->param('error')) {
-  <% $opt{prefix} %>addRow();
+</TABLE>
+
+<SCRIPT TYPE="text/javascript">
+
+total_el =
+  document.getElementById("_TOTAL_TOTAL");
+
+rownum = 1; // really more of a "next row", used by addrow
+totalrows = 0; // will not include empty rows
+allrows = []; // will include empty rows
+
+% foreach my $row ( @rownums ) {
+%   if ( grep($param->{$_.$row},qw(invnum display_custnum custnum status statuscolor customer balance),@{$opt{fields}} ) ) {
+
+addRow({
+  rownum:<% $row %>,
+  num_open:<% $param->{"num_open$row"} |js_string %>,
+  invnum:<% $param->{"invnum$row"} |js_string %>,
+  display_custnum:<% $param->{"display_custnum$row"} |js_string %>,
+  custnum:<% $param->{"custnum$row"} |js_string %>,
+  status:<% $param->{"status$row"} |js_string %>,
+  statuscolor:<% $param->{"statuscolor$row"} |js_string %>,
+  customer:<% $param->{"customer$row"} |js_string %>,
+  balance:<% $param->{"balance$row"} |js_string %>,
+%     my $col = 0;
+%     foreach my $field ( @{$opt{fields}} ) {
+%       my $value;
+%       if ( ref($field) eq 'CODE' ) {
+%         $value = &{$field}($row,$param) || '';
+%       } else {
+%         $value = $param->{"$field$row"} || '';
+%       }
+%       my $name  = (ref($field) eq 'CODE') ? "column${col}" : "$field";
+  <% $name %>:<% $value |js_string %>,
+%       $col++;
+%     }
+});
+%   }
+% }
+
+addRow();
+
+% my $col = 0;
+% foreach my $footer ( @{$opt{footer}} ) {
+%   if ($footer eq '_TOTAL' ) {
+%     my $name = $opt{fields}->[$col];
+%     $name = ref($name) ? "column$col" : $name;
+      var th_el = document.getElementById("<%$name%>_TOTAL");
+      function calc_total<% $col %>() {
+        var row = 0;
+        var total = 0;
+        for (i = 0; i < allrows.length; i++) {
+          var value = document.getElementById("<%$name%>"+allrows[i]).value;
+          value = parseFloat(value);
+          if ( ! isNaN(value) ) {
+            total = total + value;
+          }
+        }
+        th_el.innerHTML = '&nbsp;' + total.toFixed(2);
+      }
+      calc_total<% $col %>()
+%   }
+%   $col++;
 % }
 </SCRIPT>
 
+<% include('/elements/xmlhttp.html',
+              'url'  => $p. 'misc/xmlhttp-cust_main-search.cgi',
+              'subs' => [qw( custnum_search smart_search invnum_search )],
+           )
+%>
+
 <%init>
 
 my(%opt) = @_;
+my $conf = new FS::Conf;
+my $date_format = $conf->config('date_format') || '%m/%d/%Y';
 
-$opt{prefix} = '' unless defined $opt{prefix};
-$opt{prefix} .= '_' if $opt{prefix};
-
-my $types = $opt{'types'} ? [ @{$opt{'types'}} ] : [];
-my $sizes = $opt{'sizes'} ? [ @{$opt{'sizes'}} ] : [];
+my $types = $opt{'type'} ? [ @{$opt{'type'}} ] : [];
+my $sizes = $opt{'size'} ? [ @{$opt{'size'}} ] : [];
 
 my $param = $opt{param};
 $param = $cgi->Vars if $cgi->param('error');
 
+$opt{$_} ||= [] foreach qw(align color footer footer_align);
+
+my @total = map 0, @{$opt{footer}};
+
+my %align = (
+  'l' => 'left',
+  'r' => 'right',
+  'c' => 'center',
+);
+
+my $money_char = $conf->config('money_char') || '$';
 </%init>