counter/src/lib/component/EndCommand.svelte

<script>
	import { onMount } from 'svelte';
	import { goto } from '$app/navigation';
	import { page } from '$app/stores';
	import { browser } from '$app/environment';

	import trash_icon from '$lib/assets/trash_white.svg';
	import arrow_back from '$lib/assets/arrow_back.svg';
	import add_green from '$lib/assets/add_green.svg';
	import cart_icon from '$lib/assets/cart_icon.svg';

	let token = null;
	let company = null;
	let orderId = null;
	let tableIdNum = null;

	if (browser) {
		token = localStorage.getItem('token');
		company = Number(localStorage.getItem('company'));
		orderId = Number(localStorage.getItem('order'));
		tableIdNum = localStorage.getItem('table');
	}

	let selectedCategory = null;
	let isPaymentModalOpen = false;
	let selectedPaymentMethod = null;

	let orderItems = [];
	let products = [];
	let categories = [];

	$: totalAmount = orderItems.reduce(
		(sum, item) => sum + Number(item.product_details?.product_price ?? 0) * (item.quantity ?? 1),
		0
	);

	async function fetchOrderItems() {
		try {
			const myHeaders = new Headers();
			myHeaders.append('Authorization', `Bearer ${token}`);
			myHeaders.append('Content-Type', 'application/json');

			if (orderId) {
				const rawItems = JSON.stringify({
					order_id: orderId,
					company_id: company
				});

				const resItems = await fetch('https://dev2.mixtech.dev.br/order_item/get', {
					method: 'POST',
					headers: myHeaders,
					body: rawItems
				});
				const itemsResult = await resItems.json();
				orderItems = itemsResult.data || [];
				orderItems = orderItems.map((item) => ({ ...item, quantity: item.quantity ?? 1 }));
			} else {
				orderItems = [];
			}
		} catch (error) {
			console.error('Erro ao buscar itens do pedido:', error);
		}
	}

	async function fetchProductsAndCategories() {
		try {
			const myHeaders = new Headers();
			myHeaders.append('Authorization', `Bearer ${token}`);
			myHeaders.append('Content-Type', 'application/json');

			const raw = JSON.stringify({
				company_id: company
			});

			const requestOptions = {
				method: 'POST',
				headers: myHeaders,
				body: raw,
				redirect: 'follow'
			};

			const resCategories = await fetch('https://dev2.mixtech.dev.br/category/get', requestOptions);
			const categoriesResult = await resCategories.json();
			categories = categoriesResult.data || [];

			const resProducts = await fetch('https://dev2.mixtech.dev.br/product/get', requestOptions);
			const productsResult = await resProducts.json();
			products = productsResult.data || [];
		} catch (error) {
			console.error('Erro ao buscar produtos e categorias:', error);
		}
	}

	onMount(async () => {
		await fetchOrderItems();
		await fetchProductsAndCategories();
	});

	$: if (categories.length > 0 && !selectedCategory) {
		selectedCategory = categories[0].category_name;
	}

	$: filteredProducts = selectedCategory
		? products.filter((p) => {
				const cat = categories.find((c) => c.category_id === p.category_id);
				return cat?.category_name === selectedCategory;
			})
		: products;

	async function handleAddItem(product) {
		const myHeaders = new Headers();
		myHeaders.append('Authorization', `Bearer ${token}`);
		myHeaders.append('Content-Type', 'application/json');
		const payload = {
			company_id: company,
			order_id: orderId,
			product_id: product.product_id
		};
		await fetch('https://dev2.mixtech.dev.br/order_item/create', {
			method: 'POST',
			headers: myHeaders,
			body: JSON.stringify(payload)
		});
		await fetchOrderItems();
	}

	async function removeItemFromOrder(tableId, itemId) {
		const myHeaders = new Headers();
		myHeaders.append('Authorization', `Bearer ${token}`);
		myHeaders.append('Content-Type', 'application/json');
		await fetch('https://dev2.mixtech.dev.br/order_item/delete', {
			method: 'DELETE',
			headers: myHeaders,
			body: JSON.stringify({
				company_id: company,
				item_id: itemId
			})
		});
		await fetchOrderItems();
	}

	async function handlePaymentConfirm() {
		if (!selectedPaymentMethod) {
			console.warn('Selecione uma forma de pagamento');
			return;
		}
		const myHeaders = new Headers();
		myHeaders.append('Authorization', `Bearer ${token}`);
		myHeaders.append('Content-Type', 'application/json');
		await fetch('https://dev2.mixtech.dev.br/order/close', {
			method: 'POST',
			headers: myHeaders,
			body: JSON.stringify({
				company_id: company,
				order_id: orderId,
				payment_method: selectedPaymentMethod
			})
		});
		isPaymentModalOpen = false;
		goto('/tables');
	}
</script>

<div class="container mx-auto">
	<div class="mb-6 flex items-center">
		<button
			on:click={() => goto('/dashboard/commands')}
			class="mr-4 rounded-lg bg-gray-800 p-2 hover:bg-gray-700"
		>
			<img src={arrow_back} alt="Voltar" class="h-5 w-5" />
		</button>
		<h1 class="text-2xl font-bold">Mesa {tableIdNum}</h1>
	</div>

	<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
		<div class="overflow-hidden rounded-lg bg-gray-800 shadow-lg lg:col-span-2">
			<div class="bg-gray-700 p-4">
				<h2 class="text-lg font-semibold">Adicionar Produtos</h2>
			</div>

			<div class="bg-gray-750 flex overflow-x-auto border-b border-gray-700 p-2">
				{#each categories as category}
					<button
						class="mx-1 whitespace-nowrap rounded-md px-4 py-2 text-sm font-medium {selectedCategory ===
						category.category_name
							? 'bg-indigo-600 text-white'
							: 'bg-gray-700 text-gray-300 hover:bg-gray-600'}"
						on:click={() => (selectedCategory = category.category_name)}
					>
						{category.category_name}
					</button>
				{/each}
			</div>

			<div
				class="grid max-h-[calc(100vh-400px)] grid-cols-2 gap-4 overflow-y-auto p-4 sm:grid-cols-3 md:grid-cols-4"
			>
				{#each filteredProducts as product}
					<button
						class="hover:bg-gray-650 rounded-lg bg-gray-700 p-4 text-left"
						on:click={() => handleAddItem(product)}
					>
						<div class="flex h-full flex-col">
							<h3 class="mb-2 line-clamp-2 font-medium">
								{product.product_name ?? 'Nome Indisponível'}
							</h3>
							<div class="mt-auto flex items-center justify-between">
								<span class="font-semibold text-emerald-400"
									>R$ {Number(product.product_price ?? 0).toFixed(2)}</span
								>
								<img src={add_green} alt="Adicionar" class="h-5 w-5 text-emerald-400" />
							</div>
							{#if product.product_is_kitchen}
								<span class="mt-2 rounded-full bg-yellow-800 px-2 py-0.5 text-xs text-yellow-300"
									>Cozinha</span
								>
							{/if}
						</div>
					</button>
				{/each}
			</div>
		</div>

		<div
			class="flex h-full flex-col overflow-hidden rounded-lg bg-gray-800 shadow-lg md:h-[calc(100vh-200px)]"
		>
			<div class="bg-gray-700 p-4">
				<h2 class="text-lg font-semibold">Comanda</h2>
			</div>

			<div class="flex-1 overflow-y-auto p-4">
				{#if orderItems.length === 0}
					<div class="py-6 text-center text-gray-400">
						<img src={cart_icon} class="mx-auto mb-2 h-10 w-10 opacity-50" alt="Nenhum item" />
						<p>Nenhum item adicionado</p>
					</div>
				{:else}
					{#each orderItems as item, index}
						<div class="bg-gray-750 flex items-center justify-between rounded-lg p-3">
							<div class="flex-1">
								<h3 class="font-medium">
									{item.product_details?.product_name ?? 'Nome Indisponível'}
								</h3>
								<p class="text-sm text-gray-400">
									R$ {Number(item.product_details?.product_price ?? 0).toFixed(2)} x {item.quantity ??
										1}
								</p>
							</div>
							<div class="flex items-center space-x-2">
								<button
									on:click={() => removeItemFromOrder(tableIdNum, item.order_item_id)}
									class="ml-2 rounded bg-red-700 p-1 hover:bg-red-600"
								>
									<img src={trash_icon} class="h-4 w-4" alt="Remover" />
								</button>
							</div>
						</div>
					{/each}
				{/if}
			</div>

			<div class="bg-gray-750 border-t border-gray-700 p-4">
				<div class="mb-2 flex justify-between">
					<span class="font-medium">Subtotal:</span>
					<span>R$ {totalAmount.toFixed(2)}</span>
				</div>

				<button
					on:click={() => (isPaymentModalOpen = true)}
					disabled={orderItems.length === 0}
					class="flex w-full items-center justify-center rounded-lg bg-emerald-600 py-3 font-medium hover:bg-emerald-700 disabled:cursor-not-allowed disabled:opacity-50"
				>
					Fechar Atendimento
				</button>
			</div>
		</div>
	</div>

	{#if isPaymentModalOpen}
		<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4">
			<div class="w-full max-w-lg rounded-lg bg-gray-800 p-6 shadow-xl">
				<h2 class="mb-4 text-xl font-bold">Finalizar Pedido</h2>

				<div class="mb-6">
					<h3 class="mb-3 text-lg font-medium">Resumo do Pedido</h3>
					<div class="mb-4 max-h-60 overflow-y-auto sm:max-h-80">
						{#each orderItems as item}
							<div class="flex justify-between border-b border-gray-700 py-2">
								<span
									>{item.quantity ?? 1}x {item.product_details?.product_name ??
										'Nome Indisponível'}</span
								>
								<span
									>R$ {(
										Number(item.product_details?.product_price ?? 0) * (item.quantity ?? 1)
									).toFixed(2)}</span
								>
							</div>
						{/each}
					</div>
					<div class="flex justify-between text-lg font-semibold">
						<span>Total:</span>
						<span>R$ {totalAmount.toFixed(2)}</span>
					</div>
				</div>

				<h3 class="mb-3 text-lg font-medium">Forma de Pagamento</h3>
				<div class="mb-6 grid grid-cols-1 gap-3 sm:grid-cols-2">
					{#each ['CASH', 'PIX', 'DEBIT', 'CREDIT'] as method}
						<button
							class="flex flex-col items-center justify-center rounded-lg border-2 p-4 transition-colors {selectedPaymentMethod ===
							method
								? 'border-emerald-500 bg-emerald-900/20'
								: 'border-gray-700 hover:border-gray-600'}"
							on:click={() => (selectedPaymentMethod = method)}
						>
							<span
								>{method === 'CASH'
									? 'Dinheiro'
									: method === 'PIX'
										? 'Pix'
										: method === 'DEBIT'
											? 'Cart\u00e3o de D\u00e9bito'
											: 'Cart\u00e3o de Cr\u00e9dito'}</span
							>
						</button>
					{/each}
				</div>

				<div class="flex space-x-3">
					<button
						on:click={() => (isPaymentModalOpen = false)}
						class="flex-1 rounded-lg bg-gray-700 py-3 font-medium hover:bg-gray-600"
					>
						Cancelar
					</button>
					<button
						on:click={handlePaymentConfirm}
						disabled={!selectedPaymentMethod}
						class="flex-1 rounded-lg bg-emerald-600 py-3 font-medium hover:bg-emerald-700 disabled:cursor-not-allowed disabled:opacity-50"
					>
						Confirmar Pagamento
					</button>
				</div>
			</div>
		</div>
	{/if}
</div>