 	<cfoutput>
 		<script>
 			$(document).ready(function(e) {
+				new Vue({
+					el: '##app-endofday'
+				});
+
 				var dc = {
 					dhcid_subtotal: 0,
 					dhcid_total: 0,

					});
					event.preventDefault();
				});
				
				completedRoutine = function(data) {
					// Show shop takings
					$.sidepanel(data);
				}
				
				$('.ScratchcardsForm').submit(function(event) {
					dc.dhsc_form = $(this).serialize();
					$(this).fadeOut(function() {

				});
			});
		</script>

		<cfset poundArray = [50,20,10,5,2,1]>

		<div id="app-endofday">
			<form method="post" enctype="multipart/form-data" class="CashInDrawerForm">
				<span class="title">Cash In Drawer</span>

				<table border="0">
					<cfset tabIndex = 0>
					<cfset subTotal = 0>
					<cfloop array="#poundArray#" index="denom">
						<cfset tabIndex++>
						<cfset dataMOD = denom * 100>
						<cfset poundFld = "dhcid_#NumberFormat(dataMOD,'0000')#">
						<cfset penceFld = "dhcid_#NumberFormat(denom,'0000')#">
						<cfif StructIsEmpty(today)>
							<cfset poundValue = 0>
							<cfset penceValue = 0>
						<cfelse>
							<cfset poundValue = StructFind(today,poundFld)>
							<cfset penceValue = StructFind(today,penceFld)>
						</cfif>
						<cfset subTotal += (poundValue + penceValue)>
						<tr>
							<th>&pound;#denom#</th>
							<td><input type="text" name="#poundFld#" class="money ui" data-mod="#dataMOD#" placeholder="GBP" tabindex="#tabIndex#" value="#poundValue#" /></td>
							<th>#denom#p</th>
							<td><input type="text" name="#penceFld#" class="money ui" data-mod="#denom#" placeholder="GBP" tabindex="#tabIndex+6#" value="#penceValue#" /></td>
						</tr>
					</cfloop>
				</table>

				<table border="0">
					<tr>
						<th align="right">Sub Total</th>
						<td><input type="text" placeholder="GBP" class="money subtotal" value="#subTotal#" disabled></td>
					</tr>
					<tr>
						<th align="right">Z Cash</th>
						<td><input type="text" placeholder="GBP" class="money zcash" disabled value="#DecimalFormat(session.till.total.cashINDW)#"></td>
					</tr>
					<cfset diff = subTotal - session.till.total.cashINDW>
					<cfif abs(diff) lt 0.01><cfset diff = 0></cfif>
					<tr>
						<th align="right">Difference</th>
						<td><input type="text" placeholder="GBP" class="money diff" value="#DecimalFormat(diff)#" disabled></td>
						<td align="right" colspan="2"><span class="cidFace"></span></td>
					</tr>
				</table>
				<input type="submit" class="appbtn" value="Continue">
			</form>

			<form method="post" enctype="multipart/form-data" class="ScratchcardsForm" style="display:none;">
				<span class="title">
					<span class="back icon-circle-left"></span>
					Scratchcards
				</span>

				<table border="0">
					<tr>
						<th>Game</th>
						<th>Pack</th>
						<th>Value</th>
						<th>Start</th>
						<th>End</th>
						<th>Qty</th>
						<th>Total</th>
					</tr>
					<cfset totalSC = 0>
					<cfset gameValues = [10,5,5,3,2,2,1,1]>
					<cfset packQtys = [25,50,50,60,90,90,180,180]>
					<cfloop from="1" to="8" index="game">
						<cfset gStart = "dhsc_g#game#_start">
						<cfset gEnd = "dhsc_g#game#_end">
						<cfif StructIsEmpty(today)>
							<cfset start = 0>
							<cfset end = 0>
						<cfelse>
							<cfset start = StructFind(today,gStart)>
							<cfset end = StructFind(today,gEnd)>
						</cfif>
						<cfset sold = end - start>
						<cfset value = sold * gameValues[game]>
						<cfset totalSC += value>
						<tr>
							<th>#game#</th>
							<th>#packQtys[game]#</th>
							<th>&pound;#gameValues[game]#</th>
							<td><input type="text" name="#gStart#" data-qty="#packQtys[game]#" data-value="#gameValues[game]#" data-maximum="#packQtys[game]-1#"
									 data-wholenumber="true" data-pack="#packQtys[game]#" data-game="#game#" data-minimum="0" class="scratch ui2" placeholder="##" value="#start#" /></td>
							<td><input type="text" name="#gEnd#" data-qty="#packQtys[game]#" data-value="#gameValues[game]#" data-maximum="#packQtys[game]-1#"
									 data-wholenumber="true" data-pack="#packQtys[game]#" data-game="#game#" data-minimum="0" class="scratch ui2" placeholder="##" value="#end#" /></td>
							<td><input type="text" name="dhsc_g#game#_qty" value="#sold#" class="scratch ui2" disabled="disabled" /></td>
							<td><input type="text" name="dhsc_g#game#_total" value="#DecimalFormat(value)#" class="money dhsc_g#game#_total" disabled="disabled"></td>
						</tr>
					</cfloop>
				</table>

				<input type="submit" class="appbtn" value="Continue">
			</form>

			<form method="post" enctype="multipart/form-data" class="LotteryForm" style="display:none;">
				<span class="title">
					<span class="back icon-circle-left"></span>
					Lottery
				</span>
				<table border="0">
					<tr>
						<th align="right">Lottery Draws</th>
						<td>
							<input type="text" name="lotto_draws" class="money lotto-ui" placeholder="GBP" value="#DecimalFormat(-lottoDraws)#">
						</td>
					</tr>

					<tr>
						<th align="right">Scratchcards</th>
						<td>
							<input type="text" name="lotto_sc" class="money lotto-ui" placeholder="GBP" value="#DecimalFormat(-scratchCards)#">
						</td>
					</tr>

					<tr>
						<th align="right">Lottery Prizes</th>
						<td>
							<input type="text" name="lotto_prizes" class="money lotto-ui" placeholder="GBP" value="#DecimalFormat(-lottoPrizes)#">
						</td>
					</tr>

					<tr>
						<th align="right">Scratch Prizes</th>
						<td>
							<input type="text" name="lotto_sc_prizes" class="money lotto-ui" placeholder="GBP" value="#DecimalFormat(-scratchPrizes)#">
						</td>
					</tr>

					<tr>
						<th align="right">Lottery Total</th>
						<td>
							<input type="text" name="lotto_total" class="money lotto-ui" placeholder="GBP" value="0">
						</td>
					</tr>
				</table>

				<input type="submit" class="appbtn" value="Complete">
			</form>
		</div>
	</cfoutput>

	<cfcatch type="any">
