{% extends 'D2ShopBundle::base_pos.html.twig' %}

{% block head_script_extra %}
<script type="text/javascript" src="{{ asset('bundles/d2shop/js/pos_admin.js') }}"></script>
<script type="text/javascript" src="{{ asset('bundles/d2core/js/typeahead.js') }}"></script>
{% endblock head_script_extra %}

{% block head_style_extra %}
<style type="text/css">
.typeahead, .tt-query, .tt-hint {
	border: 2px solid #CCCCCC;
	border-radius: 8px;
	font-size: 14px; /* Set input font size */
	height: 35px;
	line-height: 30px;
	outline: medium none;
	width: 396px;
}
.typeahead {
	background-color: #FFFFFF;
}
.typeahead:focus {
	border: 2px solid #0097CF;
}
.tt-query {
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
	color: #999999;
}
.tt-menu {
	background-color: #FFFFFF;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 8px;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	margin-top: 12px;
	padding: 8px 0;
	width: 422px;
}
.tt-suggestion {
	font-size: 14px;  /* Set suggestion dropdown font size */
	padding: 3px 20px;
}
.tt-suggestion:hover {
	cursor: pointer;
	background-color: #0097CF;
	color: #FFFFFF;
}
.tt-suggestion p {
	margin: 0;

}
.twitter-typeahead {
	width: 100%;
	margin-top:10px;
}
</style>
{% endblock head_style_extra %}
    
{% block page_header %}
{% endblock page_header %}

{% block content %}
<div class="row">
	<div class="col-md-7">
		<div class="row">
			<div class="col-md-10">
				<p class="text-center" style="font-size:28px;font-weight:5"><span id="selector_title" >All Products</span></p>
				<hr/>
			</div>
			<div class="col-md-2">
				<a id="products_btn" href="javascript:ShowProducts()" class="btn btn-default" style="display:none">Show All Products</a>
				{% if sys_bandb_active == true and is_granted('ROLE_ADMIN_BANDB_MANAGE') %}
				<a id="bandb_btn" href="{{ path('admin_bandb_view') }}" class="btn btn-default pull-right">B&B Console</a>
				{% endif %}
			</div>
		</div>
		
		{# PRODUCT SECTION #}
		<div id="product_container" class="row">
			<div class="col-md-12">
			{% for entity in products %}
				{% if loop.first %}
				<div class="row">
				{% endif %}
					<div class="col-md-3">
						{% if entity.path is not null %}
						<img class="product_image" data-id="{{ entity.id }}" data-name="{{ entity.productName }}" src="/uploads/shop/products/{{ entity.path }}?v={{ entity.version }}" alt="IMAGE" class="img-responsive img-thumbnail" width="100%" />
						{% else %}
						<p>HELLO</p>
						{% endif %}
						<table id="product_desc_{{ entity.id }}" class="table table-condensed table-extra-condensed table-bordered" style="display:none;background-color:#d3d3d3;color:#000000;opacity:0.8;box-shadow: 4px 4px 4px rgba(50, 50, 50, 0.75);margin-top:-70px">
							<tr style="font-size:12px"><th colspan="2">{{ entity.productName }}</th></tr>
							<tr style="font-size:12px"><th>Price</th><td>R{{ entity.productPrice|number_format(2, '.', '') }}</td></tr>
						</table>
					</div>
					{% if not loop.first and loop.index%4 == 0 %}
				</div>
				<div class="row">
					{% endif %}
			{% endfor %}
				</div>
			</div>	
		</div>
		
		{# STOCK ITEM SECTION #}
		<div id="stock_item_container" class="row" style="display:none">
			<div class="col-md-12">
			{% for entity in products %}
				{% set stock_items = d2_get_product_items(entity.id) %}

				{% if stock_items|length > 0 %}
				{% for stock_item in stock_items %}

					{% if loop.first %}
					<div class="row stock_item_row" data-product="{{ entity.id }}">
					{% endif %}
					<div class="col-md-3">
						{% if stock_item.path is not null %}
						<img class="stock_item_image" data-id="{{ stock_item.id }}" src="/uploads/shop/stock_items/{{ stock_item.path }}?v={{ stock_item.version }}" alt="IMAGE" class="img-responsive img-thumbnail" width="100%" />
						{% elseif stock_item.product.path is not null %}
						<img class="stock_item_image" data-id="{{ stock_item.id }}" src="/uploads/shop/products/{{ stock_item.product.path }}?v={{ stock_item.product.version }}" alt="IMAGE" class="img-responsive img-thumbnail" width="100%" />
						{% else %}
						<p>HELLO</p>
						{% endif %}
						<table id="stock_item_desc_{{ stock_item.id }}" class="table table-condensed table-extra-condensed table-bordered" style="display:none;background-color:#d3d3d3;color:#000000;opacity:0.8;box-shadow: 4px 4px 4px rgba(50, 50, 50, 0.75);margin-top:-70px">
							<tr style="font-size:12px"><th colspan="2">{{ stock_item.description }}</th></tr>
							<tr style="font-size:12px"><th>Price</th><td>R{{ stock_item.itemPrice|number_format(2, '.', '') }}</td></tr>
						</table>
					</div>
						{% if not loop.first and loop.index%4 == 0 %}
					</div>
					<div class="row stock_item_row" data-product="{{ entity.id }}">
						{% endif %}
				{% endfor %}
					</div>
				{% endif %}
				
			{% endfor %}
				</div>	
		</div>

	</div>
	<div class="col-md-5">
		<div class="well">
			<table id="pos_table" class="table table-condensed table-bordered" style="">
				<tr><td style="width:60%" colspan="4"><input id="customer" class="typeahead form-control" autocomplete="off" placeholder="Type in Customer Name" type="text" value="" style="width:100%"></td><th colspan="3" style="text-align:right"><span id="pos_total" style="font-size:38px;font-weight:10">0.00</span></th></tr>
				<tr><td></td><th>Item</th><th style="text-align:right">Qty</th><th style="text-align:right">Unit Price</th><th style="text-align:right">Excl</th><th style="text-align:right">Tax</th><th style="text-align:right">Inc</th></tr>
			</table>
			<table id="pos_summary_table" class="table table-condensed table-bordered" style="">
				<tr><th style="width:60%; text-align:right" colspan="3">SUB TOTAL</th><th id="pos_summary_sub_total" style="text-align:right" ></th></tr>
				<tr><th style="text-align:right" colspan="3">VAT (15%)</th><th id="pos_summary_vat"  style="text-align:right" ></th></tr>
				<tr><th style="text-align:right" colspan="3">TOTAL</th><th id="pos_summary_total"  style="text-align:right" ></th></tr>
			</table>
			<table id="pos_remittance_table" class="table table-condensed table-bordered" style="">
				<tr><th style="width:60%; text-align:right" colspan="3">TYPE</th><th id="pos_remittance_type" style="text-align:right" ></th></tr>
				<tr><th style="text-align:right" colspan="3">REFERENCE</th><th id="pos_remittance_ref"  style="text-align:right" ></th></tr>
				<tr><th id="pos_remittance_clear" style="text-align:right" colspan="3">AMOUNT</th><th id="pos_remittance_amount"  style="text-align:right" ></th></tr>
			</table>
		</div>
	</div>
</div>    
<div class="row">
	<div class="col-md-offset-7 col-md-5">
		{#
		<span class="pull-left">
			<a id="check_out_btn" href="javascript:CheckoutPos()" class="btn btn-default disabled">Checkout</a>
		</span>
		#}
		<span class="pull-right">
			<a id="pos_invoice_btn" href="javascript:InvoicePos()" class="btn btn-default disabled">Generate Invoice</a>
			<a id="to_account_btn" href="javascript:AddAccountPos()" class="btn btn-default disabled">Add to Account</a>
			<a id="pos_clear_btn" href="javascript:ClearPos()" class="btn btn-default disabled">Clear</a>
		</span>
	</div>
</div>    
{% endblock content %}