<!DOCTYPE html>
<html>
<head>
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;"> -->
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport"
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link href="css/ionicons.css" media="all" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/materialize.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/lightslider.css"/>
<link rel="stylesheet" type="text/css" href="css/st.css">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<!-- <script type="text/javascript" src="cordova.js"></script> -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
<title>Soham</title>
</head>
<body>
<header class="headers white-text pink-bg z-depth-1 hdrs" style="height: auto;" id="log"></header>
<header class="header headerss pink-bg z-depth-1 hdr" id="log" style="">
<div class="navbar">
<button class="darken-2 navigation button-collapse" onclick="goBack()" style="background:#f58b3d;">
<i class="ion-android-arrow-back"></i>
</button>
<h5>Invoice</h5>
<button class="pink-bg navigation go-to-cart" onclick="window.location.href='#'"></button>
</div>
</header>
<div class="main-container" id="main-container">
<div class="invoice-container" id="invoice-container">
<br>
<!-- <div class="order-details" id="personal-details">
<p><b>Name: </b> Ravi</p>
<p><b>Email: </b>ravi@gmail.com</p>
<p><b>Phone: </b>1234567890</p>
<p><b>Order Date: </b>06/03/2018</p>
</div> -->
<br>
<h5 class="center">Products Details</h5>
<table class="table" id="product-table">
<thead>
<tr>
<th>Id</th>
<th>Product Name</th>
<th>Quantity</th>
<th>Price</th>
<th>Item Total</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th colspan="4" class="center">Grand Total</th>
<th>200</th>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="footer">
<div class="footer-icon no-gap center-align" onclick="window.location.href='index.html'">
<!--<i class="ion-home footer-icon"></i>-->
<img src="img/mhome.png" style="height:26px;">
<p class="footer-label no-gap">
Home
</p>
</div>
<div class="footer-icon no-gap center-align" onclick="window.location.href='categories.html'">
<i class="ion-android-apps"></i>
<p class="footer-label no-gap">
Categories
</p>
</div>
<!-- <div class="footer-icon no-gap center-align" onclick="window.location.href='search.html'">
<i class="ion-android-search"></i>
<p class="footer-label no-gap">
Search
</p>
</div> -->
<div class="footer-icon no-gap center-align" onclick="window.location.href='offer.html'">
<img src="img/discount.png" style="height:25px;">
<p class="footer-label no-gap">
Offers
</p>
</div>
<div class="footer-icon no-gap center-align" onclick="window.location.href='cart.html'">
<i class="ion-android-cart"></i>
<p class="footer-label no-gap">
Cart
</p>
</div>
</div>
<script>
document.addEventListener('deviceready',ready,false);
function ready() {
if(checkLogin()) {
let orderId = {orderId: sessionStorage.orderId};
const invoiceContainer = document.getElementById('invoice-container');
const personalDetails = document.getElementById('personal-details');
const table = document.getElementById('product-table');
let orders = '';
let finalTotal = 0;
let personal = "";
showLoader();
postFetchRequest('/appcode/fetch_invoice_details.php',orderId)
.then((res) => {
console.log(res);
if(res.status === 1) {
personal = `
<p><b>Name: </b> ${res.temporder.name}</p>
<p><b>Email: </b>${res.temporder.email}</p>
<p><b>Phone: </b>${res.temporder.phone}</p>
<p><b>Order Date: </b>${res.temporder.order_date}</p>`;
personalDetails.innerHTML = personal;
res.order_details.forEach((item, index) => {
finalTotal += item.price * item.quantity;
orders += `
<tr>
<th>${index + 1}</th>
<th>${item.name}</th>
<th>${item.quantity}</th>
<th>${item.price}</th>
<th>${item.price * item.quantity}</th>
</tr>`;
});
table.querySelector('tbody').innerHTML = orders;
let tableFooter = table.querySelector('tfoot');
tableFooter.innerHTML = `
<tr>
<th colspan="4">Sub Total Amount</th>
<th>${parseFloat(res.temporder.total_without_coupon).toFixed(2)}</th>
</tr>`;
if(res.temporder.coupon_code) {
tableFooter.innerHTML += `
<tr>
<th colspan="4">Total Coupon Discount</th>
<th>${parseFloat(res.temporder.amount - res.temporder.total_without_coupon).toFixed(2)}</th>
</tr>`;
}
tableFooter.innerHTML += `
<tr>
<th colspan="4">Total Paid Amount</th>
<th>${parseFloat(res.temporder.amount).toFixed(2)}</th>
</tr>`;
} else {
if(res.status === 2) {
alert("No Order Found");
} else if(res.status === 0) {
alert(unexpectedError);
} else {
alert(unexpectedError);
}
}
removeLoader();
})
.catch((err) => {
console.error(err);
alert(unexpectedError);
removeLoader();
});
} else {
alert("Please login to view order invoice.");
}
}
</script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/myfunctions.js"></script>
</body>
</html>