@extends('layouts.backend')

@section('title', $page_title)
@section('content')

<div class="block block-rounded block-bordered" id="block-table" >
	<div class="block-content pb-4" >

		<h2 class="content-heading">{{ trans('chef.new') }}</h2>
		<div class="row gutters-tiny push row-obj-new">
			
		</div>

		<h2 class="content-heading">{{ trans('chef.cooking') }}</h2>
		<div class="row gutters-tiny push row-obj-cooked">
			
		</div>

	</div>
</div>

<script id="entry-template" type="text/x-handlebars-template">
	<div class="col-6 col-md-4 col-xl-2">
		<a class="block block-link-pop text-center bg-primary obj-product" href="javascript:void(0)">
			<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-white">@{{ name }}</div>
					<div class="font-w400 text-white">Table @{{ table_name }}</div>
					<div class="font-w400 text-white">Qty.  @{{ qty }}</div>
					<div class="font-w400 text-white">เวลา @{{ created_at }}</div>
					@{{#if remark}}
					<div class="font-w400 text-white">*** @{{ remark }}</div>
					@{{/if}}
				</div>
			</div>
			<input type="hidden" name="id" class="input-id" value="@{{ id }}" >
			<input type="hidden" name="status" class="input-status" value="@{{ status }}" >
		</a>
	</div>
</script>

@endsection

@section('script')
<script src="packages/handlebars/handlebars.min.js"></script>
<script type="text/javascript">
	$(document).ready(function () {
		(function ($) {
			function getObjectHtml(product){
				var source = document.getElementById("entry-template").innerHTML;
				var template = Handlebars.compile(source);
				var html = template(product);
				return html;
			}

			function renderHtml(res){
				var _new = res.new;
				var cooked = res.cooked;
				$(".row-obj-new").html("");
				$(".row-obj-cooked").html("");
				_new.forEach(function(product) {
					$(".row-obj-new").append(getObjectHtml(product));
				});
				cooked.forEach(function(product) {
					$(".row-obj-cooked").append(getObjectHtml(product));
				});
			}

			
			function getDatas() {
				Dashmix.block('state_loading', '#block-table');
				$.get('rb-admin/chef/getProduct', null, function(res){
					console.log('res', res);
					renderHtml(res);
					Dashmix.block('state_normal', '#block-table');
				}, 'json');
			}
			getDatas();

			var timer = null;

			function start(){
				var timer = setInterval(function(){
					getDatas();
				}, 2000);
			}

			function stop(){
				if (timer) {
					clearInterval(timer);
					timer = null;
				}
				clearInterval(timer);
				timer = null;
			}

			start();

			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');
			}

			function updateStatus(id, status){
				var _id = id;
				$.post('rb-admin/chef/updateStatus', {
					_token: $('meta[name="csrf-token"]').attr('content'),
					id: id,
					status: status
				}, function(res){
					renderHtml(res);
					if (res.is_print) {
						var nn;
						printKitchen(_id, nn);
					}
				}, 'json');
			}

			$(document).on("click", ".obj-product", function(){
				var id = $(this).find(".input-id").val();
				var status = $(this).find(".input-status").val();
				console.log('status', status);
				updateStatus(id, status);
				/* if (status === '2') {
					updateStatus(id, status);
				} else {
					stop();
					$.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', "width=1200,height=1200");
							w.document.write(res.html);
							setTimeout(function() {
								w.focus();
								w.print();
								w.close();
							}, 300);
							start();
							updateStatus(id, status);
						}
					}, 'json');
				} */
				/* $.post('rb-admin/chef/updateStatus', {
					_token: $('meta[name="csrf-token"]').attr('content'),
					id: id,
					status: status
				}, function(res){
					renderHtml(res);
				}, 'json'); */
			});

		})(jQuery);
	});
</script>

@endsection