@if (table$ | async; as table) {
	<ng-container *transloco="let t">
		<div class="flex flex-col flex-auto items-center overflow-hidden">
			<div class="flex flex-col flex-auto overflow-hidden w-full max-w-md xl:max-w-none">
				<div
					class="flex flex-col flex-auto overflow-hidden overflow-x-hidden border shadow-custom rounded-xl border-slate-200 bg-[#f9fafb]">
					<div class="flex flex-auto flex-col grow overflow-auto px-5 py-4">
						<!-- Title -->
						<div class="flex items-center justify-between pb-3 border-b border-black">
							<div class="font-medium">{{ table.tableNames.join(', ') }}</div>

							@if ((table.order?.items?.length ?? 0) > 0) {
								<div class="flex items-center space-x-2">
									@if ((table.order?.outstandingAmount ?? 0) > 0) {
										<div class="px-2 text-gray-500 border-2 border-red-400 cursor-pointer rounded-xl">
											{{ t('Outstanding Balance') }}
										</div>
									}
									@if ((table.order?.outstandingAmount ?? 0) === 0 && (table.order?.items?.length ?? 0) > 0) {
										<div class="px-2 text-gray-500 border-2 border-green-400 cursor-pointer rounded-xl">
											{{ t('Paid') }}
										</div>
									}

									@if (isFeatureEnabled(FeatureKey.Kitchen, settings?.features)) {
										@if (tableCookingState === OrderItemState.pending) {
											<button
												title="Ready to cook"
												class="bg-rose-400/80 text-white rounded-lg py-1 px-2"
												(click)="updateItemsState(table.order?.items ?? [], OrderItemState.ready_to_cook)">
												<svg lucideCookingPot />
											</button>
										}
										@if (![OrderItemState.served, OrderItemState.done].includes($any(tableCookingState))) {
											<button
												title="Mark as served"
												class="bg-cyan-400/80 text-white rounded-lg py-1 px-2"
												(click)="updateItemsState(table.order?.items ?? [], OrderItemState.served)">
												<svg lucideUtensilsCrossed />
											</button>
										}
										@if (tableCookingState === OrderItemState.served) {
											<button
												title="Mark as Done"
												class="bg-green-400/80 text-white rounded-lg py-1 px-2"
												(click)="updateItemsState(table.order?.items ?? [], OrderItemState.done)">
												<svg lucideCheck />
											</button>
										}
									}
								</div>
							}
						</div>

						<div class="flex items-center justify-between pt-3">
							<button
								(click)="selectedViewType = 'Order'"
								class="font-medium {{ selectedViewType === 'Order' ? 'text-black' : 'text-gray-500' }}">
								Order
							</button>
							<button
								(click)="selectedViewType = 'Menu'"
								class="font-medium {{ selectedViewType === 'Menu' ? 'text-black' : 'text-gray-500' }}">
								Menu
							</button>
						</div>

						@if (selectedViewType === 'Order') {
							<div class="flex flex-col h-full mt-2 py-3">
								@if (table.order?.items?.length === 0) {
									<div class="py-2">{{ t('empty_cart_notice') }}</div>
								}

								<!-- Items -->
								<div class="grow bg-white rounded-lg shadow">
									@if (table.order?.items ?? [] | kadiGroupBy: 'course'; as courseGroups) {
										@for (course of courseGroups | keyvalue; track course) {
											@if (courses.length > 0) {
												<div class="flex justify-between items-center pt-3 px-3 group">
													<div class="text-lg font-medium text-gray-600">
														<div>{{ course.key !== 'null' ? 'Course ' + course.key : 'No Course' }}</div>
													</div>

													<!-- Course Kitchen Actions -->
													@if (isFeatureEnabled(FeatureKey.Kitchen, settings?.features)) {
														<div class="space-x-2 transition-all invisible group-hover:visible">
															@if (tableCookingState === OrderItemState.pending) {
																<button
																	title="Ready to cook"
																	class="bg-rose-400/80 text-white rounded-lg py-1 px-2"
																	(click)="updateItemsState(course.value, OrderItemState.ready_to_cook)">
																	<svg lucideCookingPot />
																</button>
															}
															@if (![OrderItemState.served, OrderItemState.done].includes($any(tableCookingState))) {
																<button
																	title="Mark as served"
																	class="bg-cyan-400/80 text-white rounded-lg py-1 px-2"
																	(click)="updateItemsState(course.value, OrderItemState.served)">
																	<svg lucideUtensilsCrossed />
																</button>
															}
															@if (tableCookingState === OrderItemState.served) {
																<button
																	title="Mark as Done"
																	class="bg-green-400/80 text-white rounded-lg py-1 px-2"
																	(click)="updateItemsState(course.value, OrderItemState.done)">
																	<svg lucideCheck />
																</button>
															}
														</div>
													}
												</div>
											}

											@for (item of course.value; track item) {
												<kadi-swipe-actions>
													<!-- Item Card -->
													<div class="flex justify-between items-center w-full px-4 py-2 border-b border-b-gray-200">
														<div class="flex flex-col relative">
															<div class="flex items-center space-x-2">
																<div
																	[title]="item.name"
																	class="text-gray-500 text-lg max-w-52 truncate">
																	{{ item.name }}
																</div>
																@if (isFeatureEnabled(FeatureKey.Kitchen, settings?.features)) {
																	<div class="badge badge-{{ item.state }} px-2! text-xs font-normal">
																		{{ item.state | kadiItemState }}
																	</div>
																}
															</div>

															<div class="flex items-center space-x-4">
																<div class="text-blue-500 text-lg">
																	{{ item.unitPrice | currency: table.order?.currencyCode }}
																</div>
																<div class="text-gray-500">x{{ item.quantity }}</div>
																<!-- Total price that only shows when in split bill view -->
																@if (!item.paid && selectedBillType === 'Split') {
																	<div class="text-blue-500 text-lg font-bold">
																		{{ item.unitPrice * item.quantity | currency }}
																	</div>
																}
															</div>
														</div>

														<!-- Total price for pay all view -->
														@if (item.paid || selectedBillType === 'PayAll') {
															<div class="flex items-center space-x-4">
																<div
																	class="text-lg font-bold"
																	[ngClass]="item.paid ? 'text-green-500' : 'text-blue-500'">
																	{{ item.unitPrice * item.quantity | currency }}
																</div>
															</div>
														}

														<!-- Quantity selection for split bill view -->
														@if (!item.paid && selectedBillType === 'Split') {
															<div class="flex justify-between items-center space-x-4 p-1 border rounded-xl text-xl">
																<button
																	(click)="decrement(item)"
																	class="flex justify-center items-center bg-gray-200 w-6 h-6 rounded-full">
																	<span>-</span>
																</button>

																<div>{{ selectedQuantity(item.id) }}</div>

																<button
																	(click)="increment(item)"
																	class="flex justify-center items-center bg-gray-200 w-6 h-6 rounded-full">
																	<span>+</span>
																</button>
															</div>
														}
													</div>

													<!-- Swipe Actions -->
													@if (isFeatureEnabled(FeatureKey.Kitchen, settings?.features)) {
														<ng-template kadiSwipeAction="Right">
															<div class="grid grid-cols-3 grid-row-2 gap-1 px-2 pt-1">
																@if (item.state === OrderItemState.pending) {
																	<button
																		title="Ready to cook"
																		class="bg-rose-400/80 text-white rounded-lg py-1 px-2"
																		(click)="updateItemsState([item], OrderItemState.ready_to_cook)">
																		<svg lucideCookingPot />
																	</button>
																}
																@if (![OrderItemState.served, OrderItemState.done].includes($any(item.state))) {
																	<button
																		title="Mark as served"
																		class="bg-cyan-400/80 text-white rounded-lg py-1 px-2"
																		(click)="updateItemsState([item], OrderItemState.served)">
																		<svg lucideUtensilsCrossed />
																	</button>
																}
																@if (item.state === OrderItemState.served) {
																	<button
																		title="Mark as Done"
																		class="bg-green-400/80 text-white rounded-lg py-1 px-2"
																		(click)="updateItemsState([item], OrderItemState.done)">
																		<svg lucideCheck />
																	</button>
																}
															</div>

															@if (!item.course && item.state === OrderItemState.pending) {
																<div class="grid grid-cols-3 grid-row-2 gap-1 px-2 py-1">
																	@for (course of courses; track course) {
																		<button
																			title="Add to course {{ course }}"
																			class="bg-green-400/80 text-white rounded-lg py-1 px-2"
																			(click)="addToCourse($any(table.order).id, item.id, course)">
																			<span>{{ course }}</span>
																		</button>
																	}

																	<!-- Only allow to create 3 courses -->
																	@if (courses.length < 3) {
																		<button
																			title="Add to course {{ courses.length + 1 }}"
																			class="bg-green-400/80 text-white rounded-lg py-1 px-2"
																			(click)="addToCourse($any(table.order).id, item.id, courses.length + 1)">
																			<svg lucideCirclePlus />
																		</button>
																	}
																</div>
															}
														</ng-template>
													}
												</kadi-swipe-actions>
											}
										}
									}
								</div>

								<!-- Sub total -->
								<div class="pb-2 pt-8">
									<div class="flex items-center justify-between text-xl font-bold">
										<div>{{ t('Sum') }}</div>
										<div>{{ table.order?.baseAmount | currency: table.order?.currencyCode }}</div>
									</div>
									<div class="flex items-center justify-between pl-4 text-sm">
										<div>MwSt {{ table.order?.taxPercentage }}%</div>
										<div>{{ table.order?.taxAmount | currency: table.order?.currencyCode }}</div>
									</div>
								</div>

								<!-- Total -->
								<div class="py-2">
									<div class="flex items-center justify-between text-xl font-bold">
										<div>{{ t('Total') }}</div>
										<div>
											{{ table.order?.totalAmount | currency: table.order?.currencyCode }}
										</div>
									</div>
								</div>
							</div>
						} @else {
							<kadi-order-menu-view />
						}
					</div>

					@if (selectedViewType === 'Order') {
						<div class="flex">
							@if (selectedBillType === 'PayAll') {
								<button
									type="button"
									class="w-1/2 btn btn-primary btn-card-action mt-3 !rounded-r-none"
									(click)="pay($any(table.order))"
									[disabled]="table.order?.outstandingAmount === 0 || loading"
									[kadiLoadingButton]="loading">
									{{ t('Pay All') }}
								</button>
								<button
									type="button"
									class="w-1/2 btn btn-secondary btn-card-action mt-3 !rounded-l-none"
									(click)="selectedBillType = 'Split'">
									{{ t('Split Bill') }}
								</button>
							}

							@if (selectedBillType === 'Split') {
								<button
									type="button"
									class="w-1/2 btn btn-primary btn-card-action mt-3 !rounded-r-none"
									(click)="pay($any(table.order))"
									[disabled]="table.order?.outstandingAmount === 0 || loading"
									[kadiLoadingButton]="loading">
									{{ t('Pay Selected') }}
								</button>
								<button
									type="button"
									class="w-1/2 btn btn-danger btn-card-action mt-3 !rounded-l-none"
									(click)="selectedBillType = 'PayAll'">
									{{ t('Cancel') }}
								</button>
							}
						</div>
					} @else {
						<div class="flex">
							<button
								type="button"
								class="btn btn-primary btn-card-action mt-3"
								(click)="placeOrder($any(table.order?.id))"
								[disabled]="loading"
								[kadiLoadingButton]="loading">
								{{ t('Place Order') }}
							</button>
						</div>
					}
				</div>

				<!-- Notifications -->
				<div class="my-4 mx-2">
					<button
						class="btn btn-gray w-full !py-3"
						(click)="openNotificationsView()">
						{{ t('Notifications') }}
					</button>
				</div>
			</div>
		</div>
	</ng-container>
}