@extends('layouts.backend')

@section('content')

<div class="block block-rounded block-bordered" id="block-table" >
	<div class="block-content pb-4" >
		<h5 class="mb-0" >สินค้ายังไม่ได้ส่งครัว</h5>
		@foreach($results as $table)
		<p class="mb-0" >{{ $table->name . ' : ' . $table->count }}</p>
		@endforeach
	</div>
</div>

<div class="block block-rounded block-bordered" id="block-table" >
	<div class="block-content pb-4" >
		<div id="app" >
			<div class="grid-stack" data-gs-width="12" ></div>
		</div>
	</div>
</div>

<script id="entry-template" type="text/x-handlebars-template">
	<div class="grid-stack-item grid-table-type-@{{table_type}} grid-table-status-@{{status}}" >
		<div class="grid-stack-item-content d-flex justify-content-center align-items-center">
			<span>@{{name}}</span>
			<input type="hidden" class="grid-item-id" name="grid-item-id" value="@{{id}}" >
			<input type="hidden" class="grid-item-name" name="grid-item-name" value="@{{name}}" >
			<input type="hidden" class="grid-item-type" name="grid-item-type" value="@{{table_type}}" >
			<input type="hidden" class="grid-item-status" name="grid-item-status" value="@{{status}}" >
		</div>
	</div>
</script>

<script id="table-move-template" type="text/x-handlebars-template">
	<select class="form-control target-move-table-id" name="target-move-table-id" >
		@{{#each tables}}
		<option value="@{{ id }}" >@{{ name }}</option>
		@{{/each}}
	</select>
	<button type="button" class="btn btn-lg btn-primary btn-block btn-confirm-move-table mt-4">{{ trans('table.confirm_move_table') }}</button>
	<input type="hidden" class="current-move-table-id" name="current-move-table-id" value="@{{ id }}" >
	<input type="hidden" class="mode" name="mode" value="@{{ mode }}" >
</script>

<div class="modal" id="table-modal" 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">Action</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">
					<button type="button" class="btn btn-lg btn-primary btn-block btn-modal-order pt-4 pb-4">{{ trans('table.order') }}</button>
					<button type="button" class="btn btn-lg btn-success btn-block btn-modal-checkout">{{ trans('table.checkout') }}</button>
					<button type="button" class="btn btn-lg btn-info btn-block btn-move-table">{{ trans('table.move_table') }}</button>
					<button type="button" class="btn btn-lg btn-info btn-block btn-combined-table">{{ trans('table.combined_table') }}</button>
				</div>
			</div>
			<input type="hidden" class="table-id" name="table-id" value="" >
		</div>
	</div>
</div>

<div class="modal" id="move-table-modal" 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">Manage Table</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">
					
				</div>
			</div>
		</div>
	</div>
</div>

@endsection

@section('css')
<link rel="stylesheet" href="packages/gridstack/dist/gridstack.min.css" />
<link rel="stylesheet" href="assets/js/plugins/sweetalert2/sweetalert2.min.css" />
<style>
	.grid-stack-item-content {
		cursor: pointer;
	}
	.grid-table-type-2 .grid-stack-item-content {
		border: 1px dashed #dbdbdb;
		background-color: transparent;
	}
	.grid-table-type-1.grid-table-status-1 .grid-stack-item-content {
		background-color: rgba(0,0,0,.13);
	}
	.grid-table-type-1.grid-table-status-2 .grid-stack-item-content {
		background-color: #0665d0;
		color: #fff;
	}
	.grid-table-type-1.grid-table-status-3 .grid-stack-item-content {
		background-color: #82b54b;
		color: #fff;
	}
	.grid-table-type-1.grid-table-status-4 .grid-stack-item-content {
		background-color: #ffb119;
		color: #fff;
	}
</style>
@endsection

@section('script')
<script src="packages/handlebars/handlebars.min.js"></script>
{{-- <script src="packages/jquery/dist/jquery.min.js"></script> --}}
<script src="packages/jquery-ui/jquery-ui.min.js"></script>
<script src="packages/lodash/dist/lodash.min.js"></script>
<script src="packages/gridstack/dist/gridstack.min.js"></script>
<script src="packages/gridstack/dist/gridstack.jQueryUI.min.js"></script>
<script src="assets/js/plugins/sweetalert2/sweetalert2.min.js"></script>

<script type="text/javascript">

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

			var options = {
				width: 12,
				alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
				resizable: {
					handles: 'e, se, s, sw, w'
				},
				disableDrag: true,
				disableResize: true
			};
			$('.grid-stack').gridstack(options);
			var grid = $('.grid-stack').data('gridstack');

			function getTable(){
				$.get('rb-admin/gettable', null, function(res){
					console.log('res get', res);
					res.tables.forEach(function(element){
						var html = getTableObject(element);
						grid.addWidget(html, element.x, element.y, element.width, element.height, false, null, null, null, null, element.id);
					});
				}, 'json');
			}

			getTable();

			function getTableObject(obj){
				var source   = document.getElementById("entry-template").innerHTML;
				var template = Handlebars.compile(source);
				var context = {
					id : obj.id,
					table_type: obj.table_type,
					status: obj.status,
					name: obj.name
				};
				var html    = template(context);
				return html;
			}

			function mapNodes(nodes){
				return nodes.map(function(data){
					return {
						width: data.width,
						height: data.height,
						x: data.x,
						y: data.y,
						id: data.id
					};
				});
			}

			$(document).on("click", ".grid-stack-item-content", function () {
				var id = $(this).find(".grid-item-id").val();
				var name = $(this).find(".grid-item-name").val();
				var type = $(this).find(".grid-item-type").val();
				var status = $(this).find(".grid-item-status").val();
				if (type == 1) {
					showModal(id, name, type);
				}
			});

			function showModal(id, name, type){
				$("#table-modal .block-title").html(name);
				$("#table-modal .table-id").val(id);
				$('#table-modal').modal('show');
			}

			$(".btn-modal-order").on("click", function(){
				var id = $("#table-modal .table-id").val();
				window.location.href = "rb-admin/tableproduct/" + id;
			});

			$(".btn-move-table").on("click", function(){
				$('#table-modal').modal('hide');
				var _id = $("#table-modal .table-id").val();
				$.get("{{ route('get-free-table') }}", null, function(res){
					console.log('res', res);
					var source = document.getElementById("table-move-template").innerHTML;
					var template = Handlebars.compile(source);
					var context = {
						tables : res.tables,
						id : _id,
						mode: 'move'
					};
					var html = template(context);
					$('#move-table-modal .block-content').html(html);
					$('#move-table-modal').modal('show');
				}, 'json');
			});

			$(".btn-combined-table").on("click", function(){
				$('#table-modal').modal('hide');
				var _id = $("#table-modal .table-id").val();
				$.get("{{ route('get-active-table') }}", null, function(res){
					console.log('res', res);
					var source = document.getElementById("table-move-template").innerHTML;
					var template = Handlebars.compile(source);
					var context = {
						tables : res.tables,
						id : _id,
						mode : 'combined'
					};
					var html = template(context);
					$('#move-table-modal .block-content').html(html);
					$('#move-table-modal').modal('show');
				}, 'json');
			});

			$(document).on("click", ".btn-confirm-move-table", function () {
				var current_id = $('#move-table-modal .current-move-table-id').val();
				var target_id = $('#move-table-modal .target-move-table-id').val();
				var mode = $('#move-table-modal .mode').val();
				var endpoint = "";
				if (mode === "move") {
					endpoint = "{{ route('move-table') }}";
				} else if (mode === "combined") {
					endpoint = "{{ route('combined-table') }}";
				}
				$.post(endpoint, {
					current_id : current_id,
					target_id : target_id,
					_token : $('meta[name="csrf-token"]').attr('content')
				}, function(res){
					window.location.reload();
				}, 'json');
			});

			$(".btn-modal-checkout").on("click", function(){
				$('#table-modal').modal('hide');
				var table_id = $("#table-modal .table-id").val();
				$.get("{{ route('table-can-checkout') }}", {
					_token: $('meta[name="csrf-token"]').attr('content'),
					table_id: table_id
				}, function(res){
					if (res.can_checkout) {
						swal({
							title: "Are you sure?",
							text: "To Checkout ?",
							type: "warning",
							showCancelButton: true,
							confirmButtonClass: "btn btn-danger m-1",
							cancelButtonClass: "btn btn-secondary m-1",
							confirmButtonText: "Yes",
							html: false,
							preConfirm: function(e) {
								return new Promise(function(e) {
									setTimeout(function() {
										e()
									}, 50)
								}
								)
							}
						}).then(function(e) {
							if (e.value) {
								$.post('rb-admin/tablecheckout', {
									_token: $('meta[name="csrf-token"]').attr('content'),
									table_id: table_id
								}, function(res){
									window.location.reload();
								}, 'json');
							}
						});
					} else {
						rb_alert({
							title: 'ไม่สามารถ Checkout ได้',
							text: 'เนื่องจากมีอาหารที่ยังไม่ได้เสิร์ฟ',
							confirm_text: 'ตกลง',
							cancel_text: 'ยกเลิก',
							type: 'warning'
						});
					}
				}, 'json');
			});

		})(jQuery);

		

	});
	
</script>

@endsection