<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Brandon | Grocery</title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="css/prettyPhoto.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<script src="Scripts/jquery-1.10.2.js"></script>
<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="styles/jqx.base.css" type="text/css" />
<script src="Scripts/jquery.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/jqxcore.js"></script>
<script src="Scripts/jqxdata.js"></script>
<script src="Scripts/jqxbuttons.js"></script>
<script src="Scripts/jqxscrollbar.js"></script>
<script src="Scripts/jqxlistbox.js"></script>
<script src="Scripts/jqxcombobox.js"></script>
<script src="Scripts/GeneraScripts.js"></script>
<script>
$(function () {
$(this).bind("contextmenu", function (e) {
//e.preventDefault();
});
});
</script>
<script type="text/javascript">
$(function () {
$("[data-toggle=popover]").popover({
html: true,
content: function () {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function () {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
},
template: '<div class="popover" style="height:200px;width:280px;opacity: 1.0;"><div class="arrow"></div><h4 class="popover-title"></h4><div class="popover-content"></div><div class="popover-footer" align="center"><a href="#" class="btn btn-info btn-xs">Close</a></div></div>',
});
// Custom jQuery to hide popover on click of the close button
$(document).on("click", ".popover-footer .btn", function () {
$(this).parents(".popover").popover('hide');
});
});
</script>
<style type="text/css">
.bs-example {
/*margin: 40px 40px;*/
z-index: -1;
}
</style>
<style>
.popover {
background: tomato !important;
}
.popover.bottom .arrow:after {
border-bottom-color: tomato;
}
</style>
<script type="text/javascript">
var itemCategory = "";
itemCategory = GetQueryString("category");
$(document).ready(function () {
if (localStorage) {
//alert('yes');
} else {
//alert('no');
}
showCategory();
})
$(document).ready(function () {
$(".dropdown-menu li a").click(function () {
$("#options").text($(this).text());
});
});
var orderStatus;
var uEmail = ""
var tokenKey = 'accessToken';
checkLiveToken();
function checkLiveToken() {
var token = sessionStorage.getItem(tokenKey);
var headers = {};
if (token) {
headers.Authorization = 'Bearer ' + token;
}
$.ajax({
type: 'GET',
url: 'api/values',
headers: headers,
success: function (data, status, jqXHR) {
uEmail = data;
$("#userEmail").val(data);
userDetail(data);
},
error: function (xhr) {
//alert("failed. Get Value");
}
});
}
if (uEmail == '') {
userDetail("");
}
var d = new Date();
var day = d.getDate();
var month = d.getMonth() + 1;
var year = d.getFullYear();
if (day < 10) {
day = "0" + day;
}
if (month < 10) {
month = "0" + month;
}
var todayDate = year + "-" + month + "-" + day;
$("#todayDate").val(todayDate);
var pickuptime = d.toLocaleTimeString();
var orderId = "";
var orderType = "Delivery";
var from = "";
var shoppingDate = "";
var grandTotal = 0;
function userDetail(uEmail) {
$.ajax({
type: 'GET',
url: 'http://localhost:49440/Service1.svc/UserAccountDetail/' + uEmail,
dataType: "json",
success: function (data, status, jqXHR) {
accountType = data[0].accountType;
userAccount = data[0].userAccount;
$("#userAccount").val(data[0].userAccount);
$("#accountName").val(data[0].accountName);
$("#businessName").val(data[0].businessName);
$("#acctType").val(data[0].accountType);
var arr = uEmail.split('@');
var first = arr.shift(); //or arr[arr.length-1];
var last = arr.pop(); //or arr[0];
todayOrder(data[0].userAccount, todayDate, first);
var html = "";
html += "<ul class='nav navbar-nav' style='font-size:14px;'></li>"
html += "<li><a href=''><font size='2px'>" + first + " </font></a></li>"
if (accountType == 'MarketOwner') {
html += "<li><a href='http://localhost:49440/BrandonGroceryPanel/Index.html?userAccount=" + data[0].userAccount + "'><font size='2px'>Account</font></a></li>"
} else {
html += "<li><a href='Account.html'><font size='2px'>Account</font></a></li>"
html += "<li><a href='' onclick='newOrder();'><font size='2px'>New Order</font></a></li>"
}
html += "</ul>"
$("#user").html(html);
$("#user1").html("Hi " + first);
},
error: function (xhr) {
//alert("failed. Get Value");
}
});
}
function showCategory(){
var html="";
html += "<ul class='nav nav-pills nav-stacked'>"
html += "<li><div id='rcorners2'><a href='index.html?category=Meat'><img src='images/menuImages/Grocery/chicken.jpg' width='40px' height='40px' style='border-radius: 50%;' /> <span class='pull-right'></span>Meat</a></div></li>"
html += "<li><div id='rcorners2'><a href='index.html?category=Seafood'><img src='images/menuImages/Grocery/fish.jpg' width='40px' height='40px' style='border-radius: 50%;' /> <span class='pull-right'></span>Sea Food</a></div></li>"
html += "<li><div id='rcorners2'><a href='index.html?category=Vegetables'><img src='images/menuImages/Grocery/vegetable.jpg' width='40px' height='40px' style='border-radius: 50%;' /> <span class='pull-right'></span>vegetables</a></div></li>"
html += "<li><div id='rcorners2'><a href='index.html?category=Rice'><img src='images/menuImages/Grocery/Rice2.jpg' width='40px' height='40px' style='border-radius: 50%;' /> <span class='pull-right'></span>Rice</a></div></li>"
html += "<li><div id='rcorners2'><a href='index.html?category=Fruit'><img src='images/menuImages/Grocery/fruit.jpg' width='40px' height='40px' style='border-radius: 50%;' /> <span class='pull-right'></span>Fruit</a></div></li>"
html += "<li><div id='rcorners2'><a href='index.html?category=Beverages'><img src='images/menuImages/Grocery/Laza2.png' width='40px' height='40px' style='border-radius: 50%;' /> <span class='pull-right'></span>Beverages</a></div></li>"
html += "<li><div id='rcorners2'><a href='index.html?category=Beer'><img src='images/menuImages/Grocery/BudLite6_1.png' width='40px' height='40px' style='border-radius: 50%;' /> <span class='pull-right'></span>Beer</a></div></li>"
html += "<li><div id='rcorners2'><a href='index.html?category=Noodles'><img src='images/menuImages/Grocery/BanhPho1.jpg' width='40px' height='40px' style='border-radius: 50%;' /> <span class='pull-right'></span>Noodles</a></div></li>"
html += "<li><div id='rcorners2'><a href='index.html?category=Sauces'><img src='images/menuImages/Grocery/ChiliSauce2.jpg' width='40px' height='40px' style='border-radius: 50%;' /> <span class='pull-right'></span>Sauces</a></div></li>"
html += "<li><div id='rcorners2'><a href='index.html?category=CookingOil'><img src='images/menuImages/Grocery/CookingOil4.jpg' width='40px' height='40px' style='border-radius: 50%;' /> <span class='pull-right'></span>Cooking Oil</a></div></li>"
html += "<li><div id='rcorners2'><a href='index.html?category=InstantFood'><img src='images/menuImages/Grocery/PhoGoi1.jpg' width='40px' height='40px' style='border-radius: 50%;' /> <span class='pull-right'></span>Instant Food</a></div></li>"
html += "<li><div id='rcorners2'><a href='index.html?category=DriedFood'><img src='images/menuImages/Grocery/BanhTrang4.jpg' width='40px' height='40px' style='border-radius: 50%;' /> <span class='pull-right'></span>Dried Food</a></div></li>"
html += "</ul>"
$("#showCategory").html(html);
}
function orderNumber(length) {
var result = '';
var characters = '0123456789';
var charactersLength = characters.length;
for (var i = 0; i < length; i++) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
return userAccount + "-" + result;
}
function newOrder() {
var orderData = {
userAccount: userAccount,
orderId: orderNumber(4),
shoppingDate: todayDate,
orderStatus: 'new',
orderType: "Delivery",
pickupDate: todayDate,
pickupTime: "11:00 AM",
grandTotal: 0
};
$.ajax({
url: 'api/Grocery/CreateGroceryOrder',
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(orderData),
success: function (data, status, jqXHR) {
userAccount = data.userAccount;
orderId = data.orderId;
shoppingDate = data.shoppingDate;
orderType = data.orderType;
orderStatus = data.status;
pickupDate = data.pickupDate;
pickupTime = data.pickupTime;
grandtotal = data.grandtotal;
$("#orderId").val(orderId);
$("#todayDate").val(shoppingDate);
},
error: function (xhr) {
alert("failed. Get Value");
}
});
}
if (itemCategory == '') {
UserSortItems1('Meat', orderId,orderStatus);
} else {
UserSortItems1(itemCategory, orderId,orderStatus);
}
function todayOrder(userAccount, todayDate, first) {
$.ajax({
type: 'GET',
url: "http://localhost:49440/Service1.svc/GroceryOrder/" + userAccount + "/" + todayDate,
dataType: "json",
success: function (data, status, jqXHR) {
if (data.length > 0) {
$("#orderId").val(data[0].orderId);
$("#orderId1").html(data[0].orderId);
$("#todayDate").val(data[0].shoppingDate);
$("#grandTotal").val(data[0].grandTotal);
$("#orderStatus").val(data[0].orderStatus);
$("#orderType").val(data[0].orderType);
orderStatus = data[0].orderStatus;
orderId = data[0].orderId;
orderType = data[0].orderType;
UserSortItems1(itemCategory, orderId, orderStatus);
getShoppingItem(orderId);
$("#user").html("");
$("#user1").html("");
var html = "";
html += "<ul class='nav navbar-nav' style='font-size:14px'></li>"
html += "<li><a href=''><font size='2px'>" + first + " </font></a></li>"
html += "<li><a href='Account.html'><font size='2px'>Account</font></a></li>"
if (orderId == '') {
html += "<li><a href='' onclick='newOrder();'><font size='2px'>New Order</font></a></li>"
} else {
html += "<li><a href=''><font size='2px'>Order Number: " + orderId + "</font></a></li>"
}
html += "</ul>"
$("#user").html(html);
$("#user1").html("Hi " + first);
}
},
error: function (xhr) {
alert("failed. Get Value");
}
});
}
//This session is for new inventory
function UserSortItems1(category, orderId, orderStatus) {
var url = "http://localhost:49440/Service1.svc/UserSortItems/00-1/" + category
// prepare the data
var source =
{
datatype: "json",
datafields: [
{ name: 'ID', type: 'int' },
{ name: 'userAccount', type: 'int' },
{ name: 'category', type: 'string' },
{ name: 'itemNameEN', type: 'string' },
{ name: 'itemNameVN', type: 'string' },
{ name: 'UOM', type: 'string' },
{ name: 'itemPrice', type: 'money' },
{ name: 'promotion', type: 'int' },
{ name: 'coupons', type: 'int' },
{ name: 'itemImages', type: 'string' },
{ name: 'itemStatus', type: 'int' }],
id: 'ID',
url: url
};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function (records) {
// get data records.
var record = dataAdapter.records;
// get the length of the records array.
var length = records.length;
// loop through the records and display them in a table.
var html = "";
for (var i = 0; i < length; i++) {
var record = records[i];
var heading = 'ONSALE ITEMS';
var price = record.itemPrice;
var detail = record.itemNameVN + '<br><font color="blue">(' + record.itemNameEN + ')</font>';
html += "<div class='col-sm-2'>"
html += "<div class='bs-example'>"
html += "<div class='popover-demo'>"
html += "<div class='single-item'>"
html += "<div class='iteminfo text-center'>"
html += "<div class='item-image-wrapper' data-toggle='popover' tabindex='50' data-placement='right' title='test' data-popover-content='#a2'>"
html += "<a href='#'><img src='" + record.itemImages + "' class='item img-responsive' style='width:150px;height:100px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;' /></a>"
html += "</div>"
html += "<h5><font color=''>$" + record.itemPrice.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1.") + " / " + record.UOM + "</font></h5>"
if (orderId == "") {
orderId = "0"
}
html += "<h6>" + detail + "</6><br><input type='checkbox' class='custom-control-input' onclick='itemCheck(" + record.ID + ");'> Save to cart"
html += "</div>"
html += "</div>"
html += "<img src='images/home/sale.png' class='sale' />"
html += "</div>"
html += "</div>"
html += "</div>"
}
$("#orderId").val(orderId);
$("#orderStatus").val(orderStatus);
$("#sortItems").html(html);
},
loadError: function (jqXHR, status, error) {
},
beforeLoadComplete: function (records) {
}
});
// perform data binding.
dataAdapter.dataBind();
};
function itemCheck(itemID) {
var userEmail = $("#userEmail").val();
if (userEmail == '') {
//alert("You need to login");
} else if ($("#orderId").val() == '' || $("#orderStatus").val() == 'closed') {
alert("You need to create an order");
} else {
AddNewShoppingItem(itemID);
}
}
function AddNewShoppingItem(recordId) {
$('#loading-image').show();
var html = "";
var shoppingItem = {
recordId: recordId,
orderId: $("#orderId").val(),
userAccount: $("#userAccount").val(),
};
$.ajax({
url: 'api/Grocery/AddNewShoppingItem',
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(shoppingItem),
success: function (data) {
getShoppingItem($("#orderId").val());
// $("#thankyouMessage").html("Item saved successfully");
},
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);
}
});
};
var subTotal = 0;
var recordLength;
//This session is for new inventory
function getShoppingItem(orderId) {
var url = "http://localhost:49440/Service1.svc/ShoppingCartByOrderID/" + orderId;
// prepare the data
var source =
{
datatype: "json",
datafields: [
{ name: 'ID', type: 'int' },
{ name: 'userAccount', type: 'int' },
{ name: 'category', type: 'string' },
{ name: 'itemNameENG', type: 'string' },
{ name: 'itemNameVN', type: 'string' },
{ name: 'UOM', type: 'string' },
{ name: 'itemPrice', type: 'money' },
{ name: 'promotion', type: 'int' },
{ name: 'coupons', type: 'int' },
{ name: 'itemImages', type: 'string' },
{ name: 'itemStatus', type: 'int' }],
id: 'ID',
url: url
};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function (records) {
// get data records.
var record = dataAdapter.records;
// get the length of the records array.
var length = records.length;
recordLength = length;
// loop through the records and display them in a table.
var html = "";
var iRecordCount = 1;
var iRecordNo = 0
html += "<table border='1' width='100%'>"
html += "<tr>"
html += "<td width='60%' height='20px'><b>Item</b></td>"
html += "<td width='18%' height='20px' style='text-align:right'><b>Price</b></td>"
html += "<td width='10%' height='20px' style='text-align:right'><b>Qty</b></td>"
//html += "<td width='15%' height='20px' style='text-align:right'><b>Total</b></td>"
html += "<td width='5%' style='text-align:right'><b></b></td>"
html += "</tr>"
for (var i = 0; i < length; i++) {
var record = records[i];
var heading = 'ONSALE ITEMS';
var price = record.itemPrice;
var detail = record.itemNameVN + '<font color=""> (' + record.itemNameENG + ')</font>';
html += "<tr>"
html += "<td>" + detail + "</td>"
html += "<td style='text-align:right'>$" + record.itemPrice.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1.") + "<input type='hidden' id='itemPrice' name='itemPrice' value='" + record.itemPrice + "' style='width:50px'></td>"
html += "<td align='right'>" + record.quantity + "<input type='hidden' id='quantity' name='quantity' style='width:90%;text-align:right' value='" + record.quantity + "' onblur='updatePrice(" + iRecordNo + ");' disabled></td>"
//html += "<td style='text-align:right'>$" + record.total.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1.") + "<input type='hidden' id='total' style='width:90%;text-align:right' value='" + record.total + "' disabled='disabled'></td>"
html += "<td style='text-align:right'><a class='cart_quantity_delete' href=''><i class='fa fa-times'></i><img src='images/deleteIcon.png' width='10px' onclick='deleteItem(" + record.ID + ");'/></a></td>"
html += "</tr>"
iRecordNo = iRecordNo + 1;
iRecordCount = iRecordCount + 1;
subTotal = subTotal + parseFloat(record.total);
}
html += "</table>"
html += "<table>"
html += "<tr>"
html += "<td align='right'><a href='Cart.html' class='btn btn-info btn-xs'>View Cart</a></td>"
html += "</table>"
$("#CartItems").html(html);
$("#selectedItems").html(html);
$("#subTotal").html("$" + subTotal);
},
loadError: function (jqXHR, status, error) {
},
beforeLoadComplete: function (records) {
}
});
// perform data binding.
dataAdapter.dataBind();
};
function updatePrice(iRecordNo) {
var itemPrice = "0";
var quantity = "0";
var totalPrice = "0";
if (recordLength > 1) {
for (var i = 0; i < recordLength; i++) {
itemPrice = document.GroceryItem.itemPrice[i].value;
quantity = document.GroceryItem.quantity[i].value;
totalPrice = parseFloat(itemPrice) * quantity;
totalPrice = roundNumber(totalPrice, 2);
document.GroceryItem.total[i].value = totalPrice;
}
} else {
itemPrice = document.GroceryItem.itemPrice.value;
quantity = document.GroceryItem.quantity.value;
totalPrice = parseFloat(itemCost) * quantity;
totalPrice = roundNumber(totalPrice, 2);
document.GroceryItem.total.value = totalPrice;
}
}
function saveChange(recordId, itemPrice) {
var quantity = "0";
if (recordLength > 1) {
for (var i = 0; i < recordLength; i++) {
quantity = document.GroceryItem.quantity[i].value;
}
} else {
quantity = document.GroceryItem.quantity.value;
}
var totalPrice = "0";
totalPrice = parseFloat(itemPrice) * quantity;
totalPrice = roundNumber(totalPrice, 2);
var shoppingItem = {
recordId: recordId,
quantity: quantity,
totalPrice: totalPrice
};
$.ajax({
url: 'api/Grocery/SaveChange',
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(shoppingItem),
success: function (data) {
$("#thankyouMessage").html("Ticket saved successfully");
},
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 deleteItem(recordId) {
$('#loading').show();
var shoppingItem = {
recordId: recordId,
orderId: "",
total: 0
};
$.ajax({
url: 'api/Grocery/RemoveShoppingItem',
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(shoppingItem),
success: function (data) {
// $("#thankyouMessage").html("Ticket saved successfully");
getShoppingItem($("#orderId").val());
$('#loading').hide();
},
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);
}
});
}
</script>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial;
font-size: 14px;
}
#priNav {
margin: 0px 0 0px 0;
padding: 0;
list-style-type: none;
text-align: center;
height: 36px;
}
</style>
<style type="text/css">
.loading {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff;
}
.loader {
left: 50%;
margin-left: -4em;
font-size: 10px;
border: .8em solid rgba(218, 219, 223, 1);
border-left: .8em solid rgba(58, 166, 165, 1);
animation: spin 1.1s infinite linear;
}
.loader, .loader:after {
border-radius: 50%;
width: 4em;
height: 4em;
display: block;
position: absolute;
top: 50%;
margin-top: -4.05em;
}
@keyframes spin {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
</style>
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,900);
.module {
background: url(template/images/HeaderPanel.png);
background-size: cover;
width: 100%;
height: 80px;
margin: 0px 0 0 0px;
position: relative;
float: left;
}
.top h2 {
color: grey;
margin: 0;
padding: 20px;
}
.lr p {
font-family: 'Roboto', sans-serif;
position: absolute;
bottom: 20px;
left: 20px;
color: white;
margin: 0;
}
.mid h2 {
font-family: 'Roboto', sans-serif;
font-weight: 900;
color: white;
text-transform: uppercase;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
font-size: 2rem;
transform: translate(-50%, -50%);
}
.cap p {
padding: 20px;
color: white;
font: 12px Monaco, Mono-Space;
margin: 0;
}
div.polaroid {
width: 80%;
height: auto;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19);
text-align: left;
padding: 5px;
}
</style>
<style>
#rcorners2 {
border-radius: 30px;
border: 2px solid #73AD21;
padding: 5px;
width: 210px;
height: 50px;
}
</style>
<script>
$(window).load(function () {
$('#loading').hide();
});
</script>
</head>
<body>
<input type="hidden" id="userAccount" />
<input type="hidden" id="todayDate" />
<input type="hidden" id="grandTotal" />
<input type="hidden" id="orderId" />
<input type="hidden" id="orderType" />
<div id="orderId1"></div>
<div class="container">
<div id="loading" class="loading">
<div class="loader"></div>
</div>
<div class="row">
<div class="col-sm-7">
<div class="logo pull-left">
<!--<div class="btn-group">-->
<div id="user"></div>
<!--</div>-->
</div>
</div>
<div class="col-sm-5">
<div class="shop-menu pull-right">
<ul class="nav navbar-nav" style="font-size:14px">
<li><a href="login.html"><i class="fa fa-lock"></i> Login</a></li>
<li><a href='login.html'><i class='fa fa-user'></i> Register</a></li>
<li><a href='contact-us.html'><i class='fa fa-envelope'></i> Contact Us</a></li>
</ul>
</div>
</div>
</div>
</div>
<!--</div>
</div>-->
<div class="header-bottom">
<!--header-bottom-->
<div class="container" style="margin-top:-40px">
<div class="row">
<div class="col-sm-12">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="mainmenu pull-left">
<ul class="nav navbar-nav collapse navbar-collapse">
<li><a href="index.html" class="active">Groceries</a></li>
<li><a href="Kitchenware.html">KitchenWares</a></li>
<li><a href="Coupons.html">Coupons</a></li>
</ul>
</div>
<div class="mainmenu pull-right">
<ul class="nav navbar-nav collapse navbar-collapse">
<li><a href="" class="active"></a></li>
<li><a href=""></a></li>
<li><a href="Maps/Maps.html">Maps</a></li>
</ul>
</div>
</div>
</div>
</div>
</div><!--/header-bottom-->
<section id="slider" style="margin-top:-20px">
<!--slider-->
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="slider-carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#slider-carousel" data-slide-to="0" class="active"></li>
<li data-target="#slider-carousel" data-slide-to="1"></li>
<li data-target="#slider-carousel" data-slide-to="2"></li>
<li data-target="#slider-carousel" data-slide-to="3"></li>
<li data-target="#slider-carousel" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="col-sm-3">
<h4><span>BRANDON</span>-<font color='#A52A2A'>GROCERY</font></h4>
<h2></h2>
<p>Order Online</p>
</div>
<div class="col-sm-9">
<div align="center"><img src="images/banner/banner1.png" style="width:35%;height:200px;" align="middle" /></div>
</div>
</div>
<div class="item">
<div class="col-sm-3">
<h4><span>BRANDON</span>-<font color='#A52A2A'>GROCERY</font></h4>
<h2></h2>
<p>You pick up </p>
</div>
<div class="col-sm-9">
<img src="images/banner/banner2.png" style="width:65%;height:200px" align="middle" />
</div>
</div>
<div class="item">
<div class="col-sm-3">
<h4><span>BRANDON</span>-<font color='#A52A2A'>GROCERY</font></h4>
<h2></h2>
<p>Order Online</p>
</div>
<div class="col-sm-9">
<div align="center">
<img src="images/banner/Vegestables3.jpg" style="width:45%;height:200px" align="middle" />
</div>
</div>
</div>
<div class="item">
<div class="col-sm-3">
<h4><span>BRANDON</span>-<font color='#A52A2A'>GROCERY</font></h4>
<h2></h2>
<p> We delivery</p>
</div>
<div class="col-sm-9">
<div align="center">
<img src="images/banner/Vegestables4.jpg" style="width:45%;height:200px" align="middle" />
</div>
</div>
</div>
<div class="item">
<div class="col-sm-3">
<h4><span>BRANDON</span>-<font color='#A52A2A'>GROCERY</font></h4>
<h2></h2>
<p> </p>
</div>
<div class="col-sm-9">
<div align="center">
<img src="images/banner/Vegestables5.jpg" style="width:55%;height:200px" align="middle" />
</div>
</div>
</div>
<div class="item">
<div class="col-sm-3">
<h4><span>BRANDON</span>-<font color='#A52A2A'>GROCERY</font></h4>
<h2></h2>
<p> </p>
</div>
<div class="col-sm-9">
<div align="center">
<img src="images/banner/Spice1.jpg" style="width:65%;height:200px" />
</div>
</div>
</div>
</div>
<a href="#slider-carousel" class="left control-carousel hidden-xs" data-slide="prev">
<i class="fa fa-angle-left"></i>
</a>
<a href="#slider-carousel" class="right control-carousel hidden-xs" data-slide="next">
<i class="fa fa-angle-right"></i>
</a>
</div>
</div>
</div>
</div>
</section><!--/slider-->
<input type="hidden" id="userEmail" />
<section>
<div class="container">
<div class="row">
<div class="col-sm-3" style="margin-top:-30px">
<div class="left-sidebar">
<div class="brands_products">
<!--brands_products-->
<h2>Category</h2>
<div class="panel-group category-products" id="accordian">
</div><!--/category-products-->
<div class="brands_products">
<div class="brands-name">
<div id="showCategory"></div>
</div>
</div><!--/brands_products-->
</div>
</div>
</div>
<!---#################################################################-->
<div class="col-sm-9 padding-right" style="margin-top:-30px">
<div class="new_items">
<h2 class="title text-center">On Sale</h2>
<div id="onSaleItem"></div>
<form name="GroceryItem" method="POST">
<div id="sortItems"></div>
</form>
</div><!--new_items-->
</div>
</div>
</div>
</section>
<div id="a1" class="hidden">
<div class="popover-heading"></div>
<div class="popover-body">
<div id="CartItems" style="width:380px;"></div>
</div>
<div id="a2" class="hidden">
<div class="popover-heading"><div id="user1"></div></div>
<div class="popover-body"><div id="selectedItems" style="font-size:11px;color:white"></div></div>
</div>
<div id="thankyouMessage"></div>
<div class="footer-bottom">
<div class="container">
<div class="row">
<p class="pull-left">Brandon Grocery</p>
<p class="pull-right"><span><a target="_blank" href="http://www.brandoncode.com">BrandonCode.com</a></span></p>
</div>
</div>
</div>
</div>
<script src="http://www.brandoncode.com/UX/bootstrap/js/bootstrap.min.js"></script>
<!-- Slimscroll -->
<script src="http://www.brandoncode.com/UX/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="http://www.brandoncode.com/UX/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="http://www.brandoncode.com/UX/dist/js/app.min.js"></script>
<!-- iCheck -->
<script src="http://www.brandoncode.com/UX/plugins/iCheck/icheck.min.js"></script>
</body>
</html>