<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<title>Brandon Invoice</title>
<script src="https://code.jquery.com/jquery-1.7.1.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel='stylesheet' type='text/css' href='css/style.css' />
<link rel='stylesheet' type='text/css' href='css/print.css' media="print" />
<script type='text/javascript' src='js/actionScript.js'></script>
<style type="text/css">
#myPopoverContent {
display: none;
float: right;
}
.popover {
max-width: 750px;
height: 200px;
margin-left: 5px;
margin-top: 150px;
}
</style>
<style>
h2 {
font-family: Sitka Display;
color: brown;
font-size: 16pt;
}
Intro {
font-family: Sitka Display;
color: white;
font-size: 12pt;
}
h4 {
font-family: Sitka Display;
color: black;
font-size: 14pt;
}
h5 {
font-family: Sitka Display;
color: black;
font-size: 14pt;
}
h6 {
font-family: Sitka Display;
color: black;
font-size: 10pt;
}
/*Expand textarea content mouse hover*/
td.description textarea {
position: absolute;
min-height: 30px;
width: 400px;
transition: all 200ms;
}
td.description textarea:focus {
z-index: 1001;
min-height: 250px;
}
</style>
<script>
$(document).ready(function () {
var userAccount = '00-1';
var InvoiceNumber = '';
var subTotals = '0';
var quoteDate;
var paid = '0';
var due = '0';
var recordId = "";
var yyyy;
var mm;
var dd;
var randomFour = Math.floor(1000 + Math.random() * 9000);
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10) {
dd = '0' + dd;
}
if (mm < 10) {
mm = '0' + mm;
}
var quoteDate = yyyy + '-' + mm + '-' + dd;
var currentTime = today.getMinutes() + "" + today.getSeconds();
$("#userAccount").val(userAccount);
getQuoteList(userAccount);
if (InvoiceNumber == '') {
InvoiceNumber = currentTime + "-" + randomFour;
$("#quoteNo").html(quoteNumber);
$("#quoteNumber").val(quoteNumber);
$("#quoteDate").html(quoteDate);
initialInvoice();
} else {
getQuoteList(userAccount);
InvoiceList(userAccount);
}
function initialInvoice() {
var html = "";
html += "<table id='items'>"
html += "<tr>"
html += "<th>Item</th>"
html += "<th>Description</th>"
html += "<th>Unit Cost</th>"
html += "<th>Quantity</th>"
html += "<th>Price</th>"
html += "</tr>"
html += "<tr class='item-row'>"
html += "<td class='item-name'><div class='delete-wpr'><textarea></textarea><a class='delete' href='javascript: ; ' title='Remove row'>X</a></div></td>"
html += "<td class='description'><textarea></textarea></td>"
html += "<td><textarea class='cost'>$0.00</textarea></td>"
html += "<td><textarea class='qty'></textarea></td>"
html += "<td><span class='price'>$0.00</span></td>"
html += "</tr>"
html += "<tr id='hiderow'>"
html += "<td colspan='5'><a id='addrow' href='javascript:;' title='Add a row'><img src='images/add.png' width=''/>Add a row</a></td>"
html += "</tr>"
html += "<tr>"
html += "<td colspan='2' class='blank'></td>"
html += "<td colspan='2' class='total-line'>Subtotal</td>"
html += "<td class='total-value'><div id='subtotal'>0.00</div></td>"
html += "</tr>"
html += "<tr> "
html += "<td colspan='2' class='blank'></td>"
html += "<td colspan='2' class='total-line'>Total</td>"
html += "<td class='total-value'><div id='total'>$0.00</div></td>"
html += "</tr>"
html += "<tr>"
html += "<td colspan='2' class='blank'></td>"
html += "<td colspan='2' class='total-line'>Amount Paid</td>"
html += "<td class='total-value'><textarea id='paid'>$0.00</textarea></td>"
html += "</tr>"
html += "<tr>"
html += "<td colspan='2' class='blank'></td>"
html += "<td colspan='2' class='total-line balance'>Balance Due</td>"
html += "<td class='total-value balance'><div class'due'>$0.00</div></td>"
html += "</tr>"
html += "</table>"
$("#InvoiceItemList").html(html);
}
function getQuoteList(userAccount) {
var html = "";
$.ajax({
type: 'GET',
url: "http://localhost:98/BrandonCodeService.svc/InvoiceListAll/" + userAccount,
dataType: 'json',
success: function (data, status, jqXHR) {
//alert(data.length);
html += "<table id='' border='1' style='width:100%;font-size:11px'>"
for (var i = 0; i < data.length; i++) {
html += "<tr>"
html += "<td onclick='quoteHeader(" + data[i].invoiceNumber + "," + data[i].quoteDate + ");'>" + data[i].invoiceNumber + "</td>"
html += "</tr>"
html += "<input type='hidden' id='userAccount' value=" + userAccount + ">";
html += "<input type='hidden' id='invNumber' value=" + data[i].invoiceNumber + ">";
html += "<input type='hidden' id='quoteDate' value=" + data[i].quoteDate + ">";
html += "<input type='hidden' id='invoiceDate' value=" + data[i].invoiceDate + ">";
}
html += "</table>"
html += "<input type='hidden' id='balance1' value=" + subTotals + ">";
$("#QuoteList").html(html);
// $(".item-row:last").html(html);
},
error: function (xhr) {
$("#failed_message").html("Invalid Login. Check your Email and Password ");
}
})
}
});
function quoteHeader(invNumber, quoteDate) {
$("#quoteNo").html($("#invNumber").val());
$("#quoteNumber").val(invNumber);
$("#quoteDate").html(quoteDate);
InvoiceItems();
}
var recordLength;
function InvoiceItems() {
//alert($("#userAccount").val() + ", " + $("#invNumber").val());
var subTotals = '0';
var html = "";
$.ajax({
type: 'GET',
url: "http://localhost:98/BrandonCodeService.svc/InvoiceItems/" + $("#userAccount").val() + "/" + $("#invNumber").val(),
dataType: 'json',
success: function (data, status, jqXHR) {
//alert(data.length);
html += "<table id='items' border='1' style='width:100%;font-size:11px'>"
html += "<tr>"
html += "<th><h5>Item<h5></th>"
html += "<th>Description</th>"
html += "<th>Unit Cost</th>"
html += "<th>Quantity</th>"
html += "<th>Total Amount</th>"
html += "</tr>"
recordLength = data.length;
var iRecordCount = 1;
var iRecordNo = 0
for (var i = 0; i < data.length; i++) {
html += "<tr class='item-row'>"
html += "<td class='item-name'><div class='delete-wpr'><textarea id='itemName'>" + data[i].itemName + "</textarea ><a class='delete' href='javascript:;' title 'Remove row'><img src='images/delete.png' id='delete' onclick='deleteMe();'/></a></div></td>"
html += "<td class='description'><textarea id='itemDescription'>" + data[i].itemDescription + "</textarea></td>"
html += "<td class='cost'><textarea id='unitCost' onblur='updatePrice();'>" + CurrencyFormatted(data[i].unitCost) + "</textarea></td>"
html += "<td class='qty'><textarea id='quantity' onblur='updatePrice();'>" + data[i].quantity + "</textarea></td>"
html += "<td class='totalCost'>"
html += "<table width=100%>"
html += "<tr>"
html += "<td><textarea id='totalCost'>" + data[i].totalCost + "</textarea></td>"
html += "<td><img src='images/SaveIcon.png' style='height:20px' onclick='updateQuote(" + data[i].ID + "," + iRecordNo + ");'/></td>"
html += "<tr>"
html += "</table>"
html += "</td>"
html += "</tr>"
html += "</tr>"
html += "<input type='hidden' name='recordId' id='recordId' value=" + data[i].ID + ">";
iRecordNo = iRecordNo + 1;
iRecordCount = iRecordCount + 1;
subTotals = parseFloat(subTotals) + parseFloat(data[i].totalCost);
}
html += "<tr id='hiderow'>"
html += "<td colspan='5'><a id='addrow' href='javascript:;' title='Add a row'><img src='images/add.png' onclick=''/>Add a row</a></td>"
html += "</tr>"
html += "<tr>"
html += "<td colspan='2' class='blank'></td>"
html += "<td colspan='2' class='total-line'>Subtotal</td>"
html += "<td class='total-value' align='right'><div id='subtotal'><h4>$" + CurrencyFormatted(subTotals) + "</h4></div></td>"
html += "<input type='hidden' id='subtotal1' value=" + subTotals + ">";
html += "</tr>"
html += "<tr>"
html += "<td colspan='2' class='blank'></td>"
html += "<td colspan='2' class='total-line'>Total</td>"
html += "<td class='total-value' align='right'><div id='total'><h4>$" + CurrencyFormatted(subTotals) + "</h4></div></td>"
html += "<input type='hidden' id='total1' value=" + subTotals + ">";
html += "</tr>"
html += "<tr>"
html += "<td colspan='2' class='blank'></td>"
html += "<td colspan='2' class='total-line'>Amount Paid</td>"
html += "<td class='total-value'>$0.00</textarea></td>"
html += "</tr>"
html += "<tr>"
html += "<td colspan='2' class='blank'></td>"
html += "<td colspan='2' class='total-line balance'>Balance Due</td>"
html += "<td class='total-value balance'><div class='due'>$0.00</div></td>"
html += "</tr>"
html += "</table>"
html += "<input type='hidden' id='balance1' value=" + subTotals + ">";
$("#invNumber").val(invNumber);
var dueAmt = subTotals;
$("#amtDue").html(dueAmt);
$("#InvoiceItemList").html(html);
},
error: function (xhr) {
$("#failed_message").html("Invalid Login. Check your Email and Password ");
}
})
}
function AddQuote() {
debugger;
var quoteData = {
userAccount: "00-1",
invoiceNumber: randomFour,
quoteDate: currentDate,
invoiceDate: currentDate,
amountDue: amountDue
};
$.ajax({
url: '/api/Invoice/NewQuote',
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(quoteData),
success: function (data) {
message += "<h4><font color='green'>Appointment added successfully and We will see you on " + $('#apptDate').val() + " at " + $('#apptTime').val() + "</h4></div>";
AddNewItem();
},
error: function (xhr) {
var c = xhr.responseText;
var l = c.match(/\w+/g);
$('#loading').hide();
var html;
html += "<font color='red'>" + xhr.responseText + "</font>";
$('#thankyouMessage').html(html);
}
});
}
function AddNewItem() {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10) {
dd = '0' + dd;
}
if (mm < 10) {
mm = '0' + mm;
}
var quoteDate = yyyy + '-' + mm + '-' + dd;
var quoteData = {
userAccount: "00-1",
invoiceNumber: $("#invNumber").val(),
itemName: "",
itemDescription: "",
unitCost: 0,
laborCost: 0,
quantity: 1,
totalCost: 0,
quoteDate: quoteDate,
invoiceDate: quoteDate
};
$.ajax({
url: '/api/Invoice/NewQuoteItem',
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(quoteData),
success: function (data) {
var message = "";
//acctNumber = $('#acctNumber').val(),
message += "<h4><font color='green'>Appointment added successfully and We will see you on " + $('#apptDate').val() + " at " + $('#apptTime').val() + "</h4></div>";
quoteItems();
},
error: function (xhr) {
var c = xhr.responseText;
var l = c.match(/\w+/g);
$('#loading').hide();
var html;
html += "<font color='red'>" + xhr.responseText + "</font>";
$('#thankyouMessage').html(html);
}
});
}
function updateQuote(recordId, recordNo) {
//var recordId = $("#recordId").val();
var itemName = "";
var description = "";
var unitCost = parseFloat($("#unitCost").val());
var quantity = parseInt($("#quantity").val());
var totalCost = unitCost * quantity;
totalCost = roundNumber(totalCost, 2);
if (recordLength > 0) {
for (var i = 0; i < recordLength; i++) {
recordId = document.QuoteItems.recordId[recordNo].value;
itemName = document.QuoteItems.itemName[recordNo].value;
description = document.QuoteItems.itemDescription[recordNo].value;
unitCost = document.QuoteItems.unitCost[recordNo].value;
laborCost = "0";
quantity = document.QuoteItems.quantity[recordNo].value;
price = parseFloat(unitCost) * quantity;
price = roundNumber(price, 2);
document.QuoteItems.totalCost[recordNo].value = price;
}
} else {
recordId = document.QuoteItems.recordId.value;
itemName = document.QuoteItems.itemName.value;
description = document.QuoteItems.itemDescription.value;
unitCost = document.QuoteItems.unitCost.value;
quantity = document.QuoteItems.quantity.value;
price = parseFloat(unitCost) * quantity;
price = roundNumber(price, 2);
document.QuoteItems.totalCost.value = price;
} var html = "";
var quoteData = {
ID: recordId,
itemName: itemName,
itemDescription: description,
unitCost: unitCost,
quantity: quantity,
totalCost: price,
};
$.ajax({
type: 'POST',
url: '/api/Invoice/UpdateQuote',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(quoteData),
success: function (data) {
$("#items").html(data)
$("#thankyouMessage").html("Quotes update successfully");
}
});
}
function deleteMe(recordId) {
var deleteData = {
ID: recordId,
};
$.ajax({
url: '/api/Invoice/DeleteQuoteItem',
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(deleteData),
success: function (data) {
$("#items").html(data)
},
error: function (xhr) {
var c = xhr.responseText;
var l = c.match(/\w+/g)
var html;
html += "<font color='red'>" + xhr.responseText + "</font>";
$('#thankyouMessage').html(html);
}
});
}
function updatePrice() {
//var quantity = length; //document.QuoteItems.Qty.length; //document.QuoteItems.txtUCOST[i].value recordId
var recordId;
var unitCost = "0";
var laborCost = "0";
var quantity = "0";
var price = "0";
if (recordLength > 0) {
for (var i = 0; i < recordLength; i++) {
recordId = document.QuoteItems.recordId[i].value;
unitCost = document.QuoteItems.unitCost[i].value;
laborCost = "0";
quantity = document.QuoteItems.quantity[i].value;
price = parseFloat(unitCost) * quantity;
price = roundNumber(price, 2);
document.QuoteItems.totalCost[i].value = price;
}
} else {
recordId = document.QuoteItems.recordId.value;
unitCost = document.QuoteItems.unitCost.value;
laborCost = "0";
quantity = document.QuoteItems.quantity.value;
price = parseFloat(unitCost) * quantity;
price = roundNumber(price, 2);
document.QuoteItems.totalCost.value = price;
}
}
function CurrencyFormatted(amount) {
var i = parseFloat(amount);
if (isNaN(i)) { i = 0.00; }
var minus = '';
if (i < 0) { minus = '-'; }
i = Math.abs(i);
i = parseInt((i + .005) * 100);
i = i / 100;
s = new String(i);
if (s.indexOf('.') < 0) { s += '.00'; }
if (s.indexOf('.') === (s.length - 2)) { s += '0'; }
s = minus + s;
return s;
}
</script>
</head>
<body>
<input type="hidden" id="userAccount" />
<input type="hidden" id="quoteNumber" />
<div id="page-wrap">
<textarea id="header">INVOICE</textarea>
<div id="identity">
<textarea id="address">Brandon Invoice
12345 Shophie Street
Arlington, WI 53719
Phone: (555) 555-5555</textarea>
<div id="logo">
<div id="logoctr">
<a href="javascript:;" id="change-logo" title="Change logo">Change Logo</a>
<a href="javascript:;" id="save-logo" title="Save changes">Save</a>
|
<a href="javascript:;" id="delete-logo" title="Delete logo">Delete Logo</a>
<a href="javascript:;" id="cancel-logo" title="Cancel changes">Cancel</a>
</div>
<div id="logohelp">
<input id="imageloc" type="text" size="50" value="" /><br />
(max width: 540px, max height: 100px)
</div>
<img id="image" src="images/logo1.png" alt="logo" />
</div>
</div>
<div style="clear:both"></div>
<div id="customer">
<textarea id="customer-title"> Customer
Dallas, TX</textarea>
<br />
<table id="meta" style="text-align:right">
<tr>
<td class="meta-head">Quote #</td>
<td>
<table width="100%">
<tr>
<td><div id="quoteNo"></div></td>
<td>
<a href="#" class="btn btn-primary" tabindex="0" data-toggle="popover" data-popover-content="#a1" data-placement="right" style="height:20px">...</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="meta-head">Date</td>
<td><div id="quoteDate"></div></td>
</tr>
</table>
</div>
<form id="QuoteItems" name="QuoteItems">
<div id="InvoiceItemList"></div>
</form>
<div id="a1" class="hidden">
<div class="popover-heading">Invoice List</div>
<div class="popover-body"><div id="QuoteList"></div></div>
</div>
<div id="printing">
<div>
<img src="../images/printer.png" onclick="printResult()" />
<img src="../images/email1.jpg" />
</div>
</div>
<div id="terms">
<h5>Terms</h5>
<textarea>NET 30 Days. Finance Charge of 1.5% will be made on unpaid balances after 30 days.</textarea>
</div>
</div>
</body>
</html>