<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">

		<!--
			Try to exclude the application CSS here, in order to
			avoid conflicts with the style of the template.
			<link rel="stylesheet" href="../assets/css/main.css">
		-->

		<link rel="stylesheet" href="../node_modules/@fortawesome/fontawesome-free/css/all.css">

		<!-- Insert this line above script imports  -->
		<script type="text/javascript">
			if (typeof module === 'object') {
				window.module = module;
				module = undefined;
			}
		</script>

		<script src="../assets/js/jquery.min.js"></script>

		<!-- Insert this line after script imports -->
		<script type="text/javascript">
			if (window.module) {
				module = window.module;
			}
		</script>

		<!-- Load system -->
		<script type="text/javascript">
			const ipc = require('electron').ipcRenderer;

			const UIBundle = require('../assets/js/language/bundle.js');
			const UIConfig = require('../assets/js/system/config.js');
			const UIPrintFormat = require('../assets/js/print/format.js');

			// setup language
			const locale = require('electron').remote.getGlobal('locale');
			const bundle = UIBundle.getInstance(locale);

			const config = new UIConfig();
		</script>
	</head>

	<body>
		<div style="padding: 5px 10px;">

			<table align="center" style="margin: 0 auto; width: 100%; max-width: 600px; border-spacing: 0; font-family: sans-serif;">

				<!-- logo -->

				<tr>
					<td style="padding: 0 0 10px; text-align: center;">
						<i class="fas fa-pizza-slice" style="font-size: 64px;"></i>
					</td>
				</tr>
				
				<!-- restaurant name -->

				<tr>	
					<td style="padding: 0 0 10px; text-align: center;" id="restaurant-logo">
						<!--Logo-->
					</td>
				</tr>
				
				<!-- order details -->

				<tr>
					<td style="padding: 10px 0 10px; text-align: center; border-top: 1px solid #ddd;">
						<table style="width: 100%; border-spacing: 0;">

							<!-- order number -->

							<tr>
								<td style="text-align: left;" id="ordnum-label">
									<!--Order Number-->
								</td>

								<td style="text-align: right;" >
									123 - ABCD1234EFGH5678
								</td>
							</tr>

							<!-- order status -->

							<tr>
								<td style="text-align: left;" id="status-label">
									<!--Status-->
								</td>
								
								<td style="text-align: right;" id="status-value">
									<!--CONFIRMED-->
								</td>
							</tr>

							<!-- check-in -->

							<tr>
								<td style="text-align: left;" id="date-label">
									<!--Date-->
								</td>

								<td style="text-align: right;" id="date-value">
									<!--[NOW]-->
								</td>
							</tr>

							<!-- service -->

							<tr>
								<td style="text-align: left;" id="service-label">
									<!--Service-->
								</td>

								<td style="text-align: right;" id="service-value">
									<!--Delivery-->
								</td>
							</tr>

							<!-- payment -->

							<tr>
								<td style="text-align: left;" id="payment-label">
									<!--Payment-->
								</td>
								
								<td style="text-align: right;" id="payment-value">
									<!--PayPal-->
								</td>
							</tr>
							
							<!-- total -->

							<tr>
								<td style="text-align: left;" id="total-label">
									<!--Total to Pay-->
								</td>

								<td style="text-align: right;" id="total-value">
									<!--[Amount]-->
								</td>
							</tr>

						</table>
					</td>
				</tr>
				
				<!-- order items -->

				<tr>
					<td style="padding: 10px 0 10px; text-align: center; border-top: 1px solid #ddd;">
						<table style="width: 100%; border-spacing: 0;">

							<!-- item -->

							<tr>
								<td style="text-align: left;">
									<span>2x</span>
									<span id="pizza-margherita"><!--Pizza Margherita--></span>
								</td>

								<td style="text-align: right;" id="pizza-margherita-cost">
									<!--Pizza Amount-->
								</td>
							</tr>

							<tr>
								<td style="padding: 0 0 0 30px; text-align: left; font-size: 90%; font-style: italic;" colspan="2" id="pizza-margherita-notes">
									<!-- Pizza notes-->
								</td>
							</tr>
							
							<!-- topping -->

							<tr>
								<td style="padding: 0 0 0 30px; text-align: left; font-size: 90%;" colspan="2">
									<span id="pizza-margherita-crust-label"><!--Crust--></span>
									<span id="pizza-margherita-crust-value"><!--Thin--></span>
								</td>
							</tr>
							
							<!-- topping -->

							<tr>
								<td style="padding: 0 0 0 30px; text-align: left; font-size: 90%;" colspan="2">
									<span id="pizza-margherita-toppings-label"><!--Toppings--></span>
									<span id="pizza-margherita-toppings-value"><!--Wurstel, Ham--></span>
								</td>
							</tr>
							
							<!-- item -->

							<tr>
								<td style="text-align: left;">
									<span>1x</span>
									<span id="can-coca"><!--Can - Coca-Cola--></span>
								</td>

								<td style="text-align: right;" id="can-coca-cost">
									<!--[Coca Amount]-->
								</td>
							</tr>

							<!-- item -->

							<tr>
								<td style="text-align: left;">
									<span>1x</span>
									<span id="sparkling-water"><!--Sparkling Water - 500 ml--></span>
								</td>

								<td style="text-align: right;" id="sparkling-water-cost">
									<!--[Water Amount]-->
								</td>
							</tr>

						</table>
					</td>
				</tr>
				
				<!-- total -->

				<tr>
					<td style="padding: 10px 0 10px; text-align: center; border-top: 1px solid #ddd;">
						<table style="width: 100%; border-spacing: 0;">

							<!-- grand total -->

							<tr>
								<td style="text-align: left;" id="grand-total-label">
									<!--Grand Total-->
								</td>

								<td style="text-align: right;" id="grand-total-value">
									<!--[Grand Total Amount]-->
								</td>
							</tr>

							<!-- total net -->

							<tr style="font-size: 90%;">
								<td style="text-align: left;" id="total-net-label">
									<!--Total Net-->
								</td>

								<td style="text-align: right;" id="total-net-value">
									<!--[Total Net Amount]-->
								</td>
							</tr>

							<!-- delivery charge -->

							<tr style="font-size: 90%;">
								<td style="text-align: left;" id="delivery-fee-label">
									<!--Delivery fee-->
								</td>

								<td style="text-align: right;" id="delivery-fee-value">
									<!--[Delivery fee Amount]-->
								</td>
							</tr>
							
							<!-- taxes  -->

							<tr style="font-size: 90%;">
								<td style="text-align: left;" id="total-tax-label">
									<!--Taxes-->
								</td>

								<td style="text-align: right;" id="total-tax-value">
									<!--[Taxes Amount]-->
								</td>
							</tr>
							
							<!-- tip -->

							<tr style="font-size: 90%;">
								<td style="text-align: left;" id="tip-amount-label">
									<!--Tip-->
								</td>

								<td style="text-align: right;" id="tip-amount-value">
									<!--[Tip Amount]-->
								</td>
							</tr>
								
						</table>
					</td>
				</tr>
				
				<!-- customer -->
				
				<tr>
					<td style="padding: 10px 0 10px; text-align: center; border-top: 1px solid #ddd;">
						<table style="width: 100%; border-spacing: 0;">
									
							<tr>
								<td style="text-align: left; width: 30%;" id="billing-name-label">
									<!--Name-->
								</td>
								<td style="text-align: left;" id="billing-name-value">
									<!--[Name]-->
								</td>
							</tr>
							
							<tr>
								<td style="text-align: left; width: 30%;" id="billing-mail-label">
									<!--E-mail-->
								</td>
								<td style="text-align: left;" id="billing-mail-value">
									<!--[E-mail]-->
								</td>
							</tr>
							
							<tr>
								<td style="text-align: left; width: 30%;" id="billing-phone-label">
									<!--Phone-->
								</td>
								<td style="text-align: left;" id="billing-phone-value">
									<!--[Phone]-->
								</td>
							</tr>
							
							<tr>
								<td style="text-align: left; width: 30%;" id="billing-city-label">
									<!--City-->
								</td>
								<td style="text-align: left;" id="billing-city-value">
									<!--[City]-->
								</td>
							</tr>
															
							<tr>
								<td style="text-align: left; width: 30%;" id="billing-address-label">
									<!--Address-->
								</td>
								<td style="text-align: left;" id="billing-address-value">
									<!--[Address]-->
								</td>
							</tr>

							<tr>
								<td style="text-align: left; width: 30%;" id="billing-zip-label">
									<!--ZIP Code-->
								</td>
								<td style="text-align: left;" id="billing-zip-value">
									<!--[ZIP Code]-->
								</td>
							</tr>
							
							<tr>
								<td style="text-align: left; width: 30%;" id="billing-notes-label">
									<!--Special Request-->
								</td>
								<td style="text-align: left;" id="billing-notes-value">
									<!--[Special Request]-->
								</td>
							</tr>
						
						</table>
					</td>
				</tr>
					
			</table>

		</div>
	</body>

	<script type="text/javascript">

		// set up translations
		jQuery(function($) {
			// Logo
			$('#restaurant-logo').html(bundle.__('sample.logo'));

			// Order number
			$('#ordnum-label').html(bundle.__('sample.ordernumber'));

			// Status
			$('#status-label').html(bundle.__('sample.status.label'));
			$('#status-value').html(bundle.__('sample.status.value'));

			// Date
			let now = new Date();
			$('#date-label').html(bundle.__('sample.date'));
			$('#date-value').html(
				now.toLocaleDateString() + ' ' +
				now.toLocaleTimeString(locale, {hour: '2-digit', minute: '2-digit'})
			);

			// Service
			$('#service-label').html(bundle.__('sample.service.label'));
			$('#service-value').html(bundle.__('sample.service.value'));

			// Payment
			$('#payment-label').html(bundle.__('sample.payment.label'));
			$('#payment-value').html(bundle.__('sample.payment.value'));

			// Total to pay
			$('#total-label').html(bundle.__('sample.total.label'));
			$('#total-value').html(bundle.__('sample.total.value'));

			// Pizza Margherita
			$('#pizza-margherita').html(bundle.__('sample.items.pizzamargherita.name'));
			$('#pizza-margherita-cost').html(bundle.__('sample.items.pizzamargherita.cost'));
			$('#pizza-margherita-notes').html(bundle.__('sample.items.pizzamargherita.notes'));
			$('#pizza-margherita-crust-label').html(bundle.__('sample.items.pizzamargherita.crust.label'));
			$('#pizza-margherita-crust-value').html(bundle.__('sample.items.pizzamargherita.crust.value'));
			$('#pizza-margherita-toppings-label').html(bundle.__('sample.items.pizzamargherita.toppings.label'));
			$('#pizza-margherita-toppings-value').html(bundle.__('sample.items.pizzamargherita.toppings.value'));

			// Can Coca-Cola
			$('#can-coca').html(bundle.__('sample.items.cocacola.name'));
			$('#can-coca-cost').html(bundle.__('sample.items.cocacola.cost'));

			// Sparkling Water
			$('#sparkling-water').html(bundle.__('sample.items.water.name'));
			$('#sparkling-water-cost').html(bundle.__('sample.items.water.cost'));

			// Grand total
			$('#grand-total-label').html(bundle.__('sample.pricelines.grandtotal.label'));
			$('#grand-total-value').html(bundle.__('sample.pricelines.grandtotal.value'));

			// Total net
			$('#total-net-label').html(bundle.__('sample.pricelines.totalnet.label'));
			$('#total-net-value').html(bundle.__('sample.pricelines.totalnet.value'));

			// Total tax
			$('#total-tax-label').html(bundle.__('sample.pricelines.taxes.label'));
			$('#total-tax-value').html(bundle.__('sample.pricelines.taxes.value'));

			// Delivery fee
			$('#delivery-fee-label').html(bundle.__('sample.pricelines.delivery.label'));
			$('#delivery-fee-value').html(bundle.__('sample.pricelines.delivery.value'));

			// Tip amount
			$('#tip-amount-label').html(bundle.__('sample.pricelines.tip.label'));
			$('#tip-amount-value').html(bundle.__('sample.pricelines.tip.value'));

			// Billing name
			$('#billing-name-label').html(bundle.__('sample.billing.name.label'));
			$('#billing-name-value').html(bundle.__('sample.billing.name.value'));

			// Billing e-mail
			$('#billing-mail-label').html(bundle.__('sample.billing.mail.label'));
			$('#billing-mail-value').html(bundle.__('sample.billing.mail.value'));

			// Billing phone
			$('#billing-phone-label').html(bundle.__('sample.billing.phone.label'));
			$('#billing-phone-value').html(bundle.__('sample.billing.phone.value'));

			// Billing city
			$('#billing-city-label').html(bundle.__('sample.billing.city.label'));
			$('#billing-city-value').html(bundle.__('sample.billing.city.value'));

			// Billing address
			$('#billing-address-label').html(bundle.__('sample.billing.address.label'));
			$('#billing-address-value').html(bundle.__('sample.billing.address.value'));

			// Billing ZIP
			$('#billing-zip-label').html(bundle.__('sample.billing.zip.label'));
			$('#billing-zip-value').html(bundle.__('sample.billing.zip.value'));

			// Billing notes
			$('#billing-notes-label').html(bundle.__('sample.billing.notes.label'));
			$('#billing-notes-value').html(bundle.__('sample.billing.notes.value'));
		});

		ipc.on('receive-details', (event, arg) => {
			// wait for configuration loading
			config.onLoad(() => {
				// create a page format
				let format = new UIPrintFormat(config.get('pageformat', 'A4'), config.get('pagesize', {}));

				// include @page CSS declaration
				jQuery('head').append('<style> @page { ' + format.getPageSizeCSS() + ' } </style>');

				// get custom CSS
				let style = config.get('printstyle', '').trim();

				if (style) {
					jQuery('head').append('<style>\n' + style + '\n</style>');
				}

				ipc.send('printer-ready', arg);
			});
		});

	</script>
</html>