@extends('layouts.backend')

@section('title', 'Table : ' . $table->name)

@section('content')

<div class="row" >
	<div class="col-lg-6 col-md-12 col-sm-12 col-12" >
		<div class="block block-rounded block-bordered" id="block-table" >
			<div class="block-content pb-4" >

				<a href="{{ route('table-order') }}" class="btn btn-lg btn-primary btn-back" >Back</a>
				<button type="button" class="btn btn-lg btn-success btn-checkout">{{ trans('table.checkout') }}</button>
				<button type="button" class="btn btn-lg btn-info btn-send-to-kitchen">{{ trans('table.send_to_kitchen') }}</button>

				<br><br>
				<h3>รวม : <span class="table_total_text" >0</span> บาท</h3>

				<table class="table table-hover table-vcenter" >
					<thead class="thead-light" >
						<tr>
							<th style="width: 60%;" >
								สินค้า
							</th>
							<th style="width: 20%;" class="text-center" >จำนวน</th>
							<th style="width: 10%;" class="text-center" >#</th>
							<th style="width: 10%;" class="text-center" >#</th>
						</tr>
					</thead>
					<tbody id="table-body" >
						
					</tbody>
					<tfoot>
						<tr>
							<td colspan="2" class="text-right" >รวม</td>
							<td colspan="2" class="text-right" ><span class="table_total_text" >0</span></td>
						</tr>
					</tfoot>
				</table>
				<input type="hidden" name="table_id" id="table_id" value="{{ $table_id }}" >

			</div>
		</div>

	</div>
	<div class="col-lg-6 col-md-12 col-sm-12 col-12" >
		@blocknh()

		<input type="text" class="form-control mb-4" name="search" id="search" placeholder="ค้นหาสินค้า" >

		<div id="accordion" role="tablist" aria-multiselectable="true">
			@foreach($productCategory as $index => $cate)
			<div class="block block-rounded mb-1">
				<div class="block-header block-header-default" role="tab" id="accordion_h{{ $index }}">
					<a class="font-w600 collapsed" 
						data-toggle="collapse" 
						data-parent="#accordion" 
						href="#accordion_q{{ $index }}" 
						aria-expanded="false" 
						aria-controls="accordion_q{{ $index }}" 
						style="width: 100%;" >{{ $cate->name }}</a>
				</div>
				<div id="accordion_q{{ $index }}" class="collapse" role="tabpanel" aria-labelledby="accordion_h{{ $index }}" data-parent="#accordion" style="">
					<div class="block-content">
						<div class="row gutters-tiny push" >
														@foreach ($products as $index2 => $product)
								@if(strcmp($product->status, STATUS_ACTIVE) == 0)
								<div class="col-md-3 col-6">
									<a class="block text-center bg-primary add-product" href="javascript:;" >
										<div class="block-content block-content-full aspect-ratio-16-9 d-flex justify-content-center align-items-center">
											<div>
												<div class="font-w600 mt-2 text-uppercase text-muted">{{ $product->name }}</div>
											</div>
										</div>
										<input type="hidden" name="productid" value="{{ $product->id }}" >
									</a>
								</div>
								@endif
							@endforeach
						</div>
					</div>
				</div>
			</div>
			@endforeach
		</div>
		<br>
		@endblocknh
	</div>
</div>

<script id="entry-template" type="text/x-handlebars-template">
	<tr>
		<td>@{{ name }}<br>
			@{{#if remark}}
			<span>@{{ remark }}</span><br>
			@{{/if}}
			<span class="badge badge-pill badge-@{{ status_class }}">@{{ status_text }}</span>
		</td>
		<td class="text-center" >
			@{{#if show_edit_qty }}
			<input type="number" class="form-control product-qty" name="qty" placeholder="qty" value="@{{ qty }}" >
			@{{ else }}
			<span>@{{ qty }}</span>
			@{{/if}}
		</td>
		<td class="text-center" >
			@{{#if show_del }}
			<button type="button" class="btn btn-danger btn-rounded btn-del-table-product">
				<i class="fa fa-fw fa-times"></i>
			</button>
			@{{/if}}

			@{{#if show_confirm }}
			<button type="button" class="btn btn-success btn-rounded btn-confirm-served-table-product">
				<i class="fa fa-fw fa-check"></i>
			</button>
			@{{/if}}
		</td>
		<td class="text-center" >
			@{{#if show_reprint }}
			<button type="button" class="btn btn-primary btn-rounded btn-reprint-table-product">
				<i class="fa fa-fw fa-print"></i>
			</button>
			@{{/if}}
		</td>
		<input type="hidden" name="product_id" value="@{{ product_id }}" >
		<input type="hidden" name="id" value="@{{ id }}" >
		<input type="hidden" name="status" value="@{{ status }}" >
	</tr>
</script>

<script id="entry-template-2" type="text/x-handlebars-template">
	@{{#each categories}}
	<div class="block block-rounded mb-1">
		<div class="block-header block-header-default" role="tab" id="accordion_h@{{ @index }}">
			<a class="font-w600 collapsed" 
				data-toggle="collapse" 
				data-parent="#accordion" 
				href="#accordion_q@{{ @index }}" 
				aria-expanded="false" 
				aria-controls="accordion_q@{{ @index }}" 
				style="width: 100%;" >@{{ name }}</a>
		</div>
		<div id="accordion_q@{{ @index }}" class="collapse" role="tabpanel" aria-labelledby="accordion_h@{{ @index }}" data-parent="#accordion" style="">
			<div class="block-content">
				<div class="row gutters-tiny push" >
					@{{#each products}}
					<div class="col-md-3 col-6">
						<a class="block text-center bg-primary add-product" href="javascript:;" >
							<div class="block-content block-content-full aspect-ratio-16-9 d-flex justify-content-center align-items-center">
								<div>
									<div class="font-w600 mt-2 text-uppercase text-muted">@{{ name }}</div>
								</div>
							</div>
							<input type="hidden" name="productid" value="@{{ id }}" >
						</a>
					</div>
					@{{/each}}
				</div>
			</div>
		</div>
	</div>
	@{{/each}}
</script>

<script id="entry-template-3" type="text/x-handlebars-template">
	<div class="row gutters-tiny push" >
	@{{#each categories}}
		@{{#each products}}
		<div class="col-md-3 col-6">
			<a class="block text-center bg-primary add-product" href="javascript:;" >
				<div class="block-content block-content-full aspect-ratio-16-9 d-flex justify-content-center align-items-center">
					<div>
						<div class="font-w600 mt-2 text-uppercase text-muted">@{{ name }}</div>
					</div>
				</div>
				<input type="hidden" name="productid" value="@{{ id }}" >
			</a>
		</div>
		@{{/each}}
	@{{/each}}
	</div>
</script>

<div class="modal" id="modal-remark-product" tabindex="-1" role="dialog" aria-labelledby="modal-block-vcenter" style="display: none;" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered modal-dialog-popout" role="document">
		<div class="modal-content">
			<div class="block block-themed block-transparent mb-0">
				<div class="block-header bg-primary-dark">
					<h3 class="block-title">Remark</h3>
					<div class="block-options">
						<button type="button" class="btn-block-option" data-dismiss="modal" aria-label="Close">
							<i class="fa fa-fw fa-times"></i>
						</button>
					</div>
				</div>
				<div class="block-content pb-4">
					<input type="hidden" name="product_remark_id" id="product_remark_id" value="" >
					<input type="text" class="form-control" name="product_remark" id="product_remark" placeholder="Remark" >
					<br>
					<button type="button" class="btn btn-lg btn-primary btn-block btn-modal-add-product">{{ trans('table.order') }}</button>
				</div>
			</div>
		</div>
	</div>
</div>

{!! view('cancelorder.cancelorder')->render() !!}

@endsection

@section('css')
<link rel="stylesheet" href="assets/js/plugins/sweetalert2/sweetalert2.min.css" />
@endsection

@section('script')
<script src="packages/handlebars/handlebars.min.js"></script>
<script src="assets/js/plugins/sweetalert2/sweetalert2.min.js"></script>
<script type="text/javascript">

	$(document).ready(function () {
		(function ($) {

			var categories = [];

			function addProduct(id, remark){
				$.post('rb-admin/addtableproduct', {
					_token: $('meta[name="csrf-token"]').attr('content'),
					product_id: id,
					product_remark: remark,
					table_id: $("#table_id").val(),
					disable_cooking: "{{ $disable_cooking }}"
				}, function (res) {
					if (res.status) {
						/* var html = getTableObject(res.product);
						$("#table-body").append(html); */
						rerenderTableProduct(res.table_products, res.calculate);
					}
					$("#modal-remark-product").modal("hide");
				}, 'json');
			}

			function getTableObject(product){
				var source   = document.getElementById("entry-template").innerHTML;
				var template = Handlebars.compile(source);
				var status_class = "secondary";
				var status_text = "ใหม่";
				var _status = "" + product.status;
				//console.log('product.status', product.status, _status);
				switch(_status) {
					case "{{ ORDER_STATUS_NEW }}":
						status_class = "secondary";
						status_text = "{{ trans('lang.order_status_' . ORDER_STATUS_NEW) }}";
						break;
					case "{{ ORDER_STATUS_KITCHEN_NEW }}":
						status_class = "info";
						status_text = "{{ trans('lang.order_status_' . ORDER_STATUS_KITCHEN_NEW) }}";
						break;
					case "{{ ORDER_STATUS_COOKED }}":
						status_class = "warning";
						status_text = "{{ trans('lang.order_status_' . ORDER_STATUS_COOKED) }}";
						break;
					case "{{ ORDER_STATUS_WAITING_SERVE }}":
						status_class = "success";
						status_text = "{{ trans('lang.order_status_' . ORDER_STATUS_WAITING_SERVE) }}";
						break;
					case "{{ ORDER_STATUS_SERVED }}":
						status_class = "success";
						status_text = "{{ trans('lang.order_status_' . ORDER_STATUS_SERVED) }}";
						break;
					case "{{ ORDER_STATUS_CANCELED }}":
						status_class = "danger";
						status_text = "{{ trans('lang.order_status_' . ORDER_STATUS_CANCELED) }}";
						break;
				}
				var context = {
					name : product.name,
					qty : product.qty || 1,
					product_id : product.product_id,
					status : product.status,
					id : product.id,
					status_class: status_class,
					show_del: ( [3, 4, 5, 99, '3', '4', '5', '99'].indexOf(product.status) < 0 ? true : false ),
					show_edit_qty: ( [2, 3, 4, 5, 99, '2', '3', '4', '5', '99'].indexOf(product.status) < 0 ? true : false ),
					show_confirm: ( [4, "4"].indexOf(product.status) >= 0 ? true : false ),
					show_reprint: ( [1, "1"].indexOf(product.status) >= 0 ? false : true ),
					status_text: status_text,
					remark: product.remark
				};
				var html    = template(context);
				return html;
			}

			function getCategoriesObj(_categories, show_cate){
				var source = document.getElementById("entry-template-2").innerHTML;
				if (!show_cate) {
					source = document.getElementById("entry-template-3").innerHTML;
				}
				var template = Handlebars.compile(source);
				var context = {
					categories : _categories,
					show_cate: show_cate
				};
				var html    = template(context);
				return html;
			}

			$(document).on("click", ".btn-modal-add-product", function(){
				var productid = $("#modal-remark-product #product_remark_id").val();
				var productremark = $("#modal-remark-product #product_remark").val();
				addProduct(productid, productremark);
			});

			$(document).on("click", ".add-product", function(){
				var productid = $(this).find("input:hidden[name=productid]").val();
				//addProduct(productid);
				$("#modal-remark-product #product_remark_id").val(productid);
				$("#modal-remark-product #product_remark").val("");
				$("#modal-remark-product").modal("show");
			});

			$(document).on("change", ".product-qty", function () {
				var qty = $(this).val();
				var product_id = $(this).parents("tr").find("input:hidden[name=product_id]").val();
				var status = $(this).parents("tr").find("input:hidden[name=status]").val();
				var id = $(this).parents("tr").find("input:hidden[name=id]").val();
				$.post('rb-admin/changeqtytableproduct', {
					_token: $('meta[name="csrf-token"]').attr('content'),
					product_id: product_id,
					table_id: $("#table_id").val(),
					qty: qty,
					status: status,
					id: id,
				}, function (res) {
					rerenderTableProduct(res.table_products, res.calculate);
				}, 'json');
			});

			$(document).on("click", ".btn-del-table-product", function () {
				var product_id = $(this).parents("tr").find("input:hidden[name=product_id]").val();
				var status = $(this).parents("tr").find("input:hidden[name=status]").val();
				var id = $(this).parents("tr").find("input:hidden[name=id]").val();
				var table_id = $("#table_id").val();
				$("#modal-cancel-order #product_id").val(product_id);
				$("#modal-cancel-order #table_id").val(table_id);
				$("#modal-cancel-order #table_product_id").val(id);
				$("#modal-cancel-order #status").val(status);
				$("#modal-cancel-order").modal("show");
				/* $.post("{{ route('cancel-order') }}", {
					_token: $('meta[name="csrf-token"]').attr('content'),
					product_id: product_id,
					table_id: table_id,
				}, function (resdel) {
					$.post('rb-admin/del/table/product', {
						_token: $('meta[name="csrf-token"]').attr('content'),
						product_id: product_id,
						table_id: table_id,
						status: status,
						id: id,
					}, function (res) {
						rerenderTableProduct(res.table_products, res.calculate);
					}, 'json');
				}, 'json'); */
				/* $.post('rb-admin/del/table/product', {
					_token: $('meta[name="csrf-token"]').attr('content'),
					product_id: product_id,
					table_id: $("#table_id").val(),
					status: status,
					id: id,
				}, function (res) {
					rerenderTableProduct(res.table_products, res.calculate);
				}, 'json'); */
			});

			$(document).on("click", ".btn-modal-cancel-order", function () {
				var product_id = $("#modal-cancel-order #product_id").val();
				var status = $("#modal-cancel-order #status").val();
				var id = $("#modal-cancel-order #table_product_id").val();
				var table_id = $("#modal-cancel-order #table_id").val();
				$.post("{{ route('cancel-order') }}", {
					_token: $('meta[name="csrf-token"]').attr('content'),
					product_id: product_id,
					table_id: table_id,
					remark: $("#modal-cancel-order #cancel_remark").val()
				}, function (resdel) {
					$.post('rb-admin/del/table/product', {
						_token: $('meta[name="csrf-token"]').attr('content'),
						product_id: product_id,
						table_id: table_id,
						status: status,
						id: id,
					}, function (res) {
						$("#modal-cancel-order").modal("hide");
						rerenderTableProduct(res.table_products, res.calculate);
					}, 'json');
				}, 'json');
			});

			$(document).on("click", ".btn-confirm-served-table-product", function () {
				var product_id = $(this).parents("tr").find("input:hidden[name=product_id]").val();
				var status = $(this).parents("tr").find("input:hidden[name=status]").val();
				var id = $(this).parents("tr").find("input:hidden[name=id]").val();
				$.post("{{ route('serve-table-product') }}", {
					_token: $('meta[name="csrf-token"]').attr('content'),
					product_id: product_id,
					table_id: $("#table_id").val(),
					status: status,
					id: id,
				}, function (res) {
					rerenderTableProduct(res.table_products, res.calculate);
				}, 'json');
			});

			$(document).on("click", ".btn-reprint-table-product", function () {
				var product_id = $(this).parents("tr").find("input:hidden[name=product_id]").val();
				var status = $(this).parents("tr").find("input:hidden[name=status]").val();
				var id = $(this).parents("tr").find("input:hidden[name=id]").val();
				var nn;
				printKitchen(id, nn);
			});

			function rerenderTableProduct(table_products, calculate){
				Dashmix.block('state_loading', '#block-table');
				$("#table-body").html("");
				table_products.forEach(function(product){
					var html = getTableObject(product);
					$("#table-body").append(html);
				});
				$(".table_total_text").html(calculate.total_text);
				Dashmix.block('state_normal', '#block-table');
			}

			$.get('rb-admin/gettableproduct', {
				table_id: $("#table_id").val()
			}, function(res){
				var table_products = res.table_products;
				console.log('res', table_products);
				rerenderTableProduct(table_products, res.calculate);
				//$(".table_total_text").html(res.total_text);
			}, 'json');

			$.get('rb-admin/table-product-category', {
				table_id: $("#table_id").val()
			}, function(res){
				console.log('res', res);
				categories = res.categories;
				var html = getCategoriesObj(categories, true);
				$("#accordion").html(html);
			}, 'json');

			$(".btn-checkout").on("click", function(){
				// check that can checkout
				$.get("{{ route('table-can-checkout') }}", {
					_token: $('meta[name="csrf-token"]').attr('content'),
					table_id: $("#table_id").val()
				}, function(res){
					//console.log("res", res.can_checkout);
					if (res.can_checkout) {
						rb_confirm({
							title: 'ยืนยัน',
							text: 'Checkout',
							confirm_text: 'ตกลง',
							cancel_text: 'ยกเลิก',
							type: 'warning'
						}, function(e){
							if (e.value) {
								$.post('rb-admin/tablecheckout', {
									_token: $('meta[name="csrf-token"]').attr('content'),
									table_id: $("#table_id").val()
								}, function(res){
									window.location.href = "rb-admin/tableorder";
								}, 'json');
							}
						});
					} else {
						rb_alert({
							title: 'ไม่สามารถ Checkout ได้',
							text: 'เนื่องจากมีอาหารที่ยังไม่ได้เสิร์ฟ',
							confirm_text: 'ตกลง',
							cancel_text: 'ยกเลิก',
							type: 'warning'
						});
					}
				}, 'json');


				/*  */
			});

			function printKitchen(id, w){
				$.post("{{ route('print-order-item-kitchen') }}", {
					id: id,
					_token: $('meta[name="csrf-token"]').attr('content'),
				}, function(res){
					//console.log('res', res);
					if (res.status) {
						w = window.open(null, 'print_' + id, "width=600,height=1200,top=0,left=0", false);
						w.document.write(res.html);
						setTimeout(function() {
							w.focus();
							w.print();
							w.close();
						}, 200);
					}
				}, 'json');
			}

			$(".btn-send-to-kitchen").on("click", function(){
				Dashmix.block('state_loading', '#block-table');
				$.post("{{ route('table-send-to-kitchen') }}", {
					_token: $('meta[name="csrf-token"]').attr('content'),
					table_id: $("#table_id").val(),
					disable_cooking: "{{ $disable_cooking }}"
				}, function(res){
					//console.log('res', res);
					// remove print if disable cooking
					if (res.is_print) {
						if (res.current_new_order) {
							if (res.current_new_order.length > 0) {
								res.current_new_order.forEach(function(item){
									var nn;
									printKitchen(item, nn);
								});
							}
						}
					}
					rerenderTableProduct(res.table_products, res.calculate);
					Dashmix.block('state_normal', '#block-table');
				}, 'json');
			});

			$("#search").keyup(function(e){
				var _search = $("#search").val();
				var clone_categories = JSON.parse(JSON.stringify( categories ));
				var clone_categories2 = JSON.parse(JSON.stringify( categories ));
				clone_categories.forEach(function(category, index){
					var products = category.products;
					var filterdProducts = products.filter(function(item){
						var barcode = item.barcode;
						var name = item.name;
						if (name.indexOf(_search) !== -1) {
							return true;
						} else if (barcode.indexOf(_search) !== -1) {
							return true;
						} else {
							return false;
						}
					});
					clone_categories2[index]['products'] = filterdProducts;
				});
				//console.log('categories', clone_categories2);
				var html;
				if (_search.length > 0) {
					html = getCategoriesObj(clone_categories2, false);
					$("#accordion").html(html);
				} else {
					html = getCategoriesObj(clone_categories2, true);
				}
				$("#accordion").html(html);
			});

		})(jQuery);
	});

</script>

@endsection