<?php
require 'verifica_cookie.php';
require 'conexao.php';

$mesa    = (isset($_GET['mesa'])) ? $_GET['mesa'] : '';
$comanda = (isset($_GET['comanda'])) ? $_GET['comanda'] : '';
$cliente = (isset($_GET['cliente'])) ? $_GET['cliente'] : '';
$item    = (isset($_GET['item'])) ? $_GET['item'] : '';
$pdo     = Conexao::getInstance();

$sql = "SELECT i.ite_001, i.mat_001, i.ite_002, m.mat_003, i.ite_011, i.ite_005, i.ven_001, ";
$sql .= "i.ite_006, i.ite_009, i.tamanho, i.gar_001 ";
$sql .= "FROM venda v INNER JOIN vendaitem i ON v.ven_001 = i.ven_001 ";
$sql .= "INNER JOIN materiais m ON m.mat_001 = i.mat_001 ";
$sql .= "WHERE i.sit_001 = 4 AND v.sit_001 = 8 ";
$sql .= "AND i.ite_001 = {$item}";

if (empty($comanda)):
	$sql .= "AND v.ven_025 = {$mesa} AND v.ven_024 = 'M' ";
else:
	$sql .= "AND v.ven_026 = {$comanda} AND v.ven_024 = 'C' ";
endif;

$sql .= "ORDER BY i.ite_001 ";
$stm = $pdo->prepare($sql);
$stm->execute();
$item = $stm->fetch(PDO::FETCH_OBJ);

$sql = 'SELECT o.descricao, o.valor ';
$sql .= 'FROM vendaitemopcional v INNER JOIN opcional o ON v.id_opcional = o.id_opcional ';
$sql .= 'WHERE id_venda = :id_venda and id_vendaitem = :item';
$stm = $pdo->prepare($sql);
$stm->bindValue(':id_venda', $item->ven_001);
$stm->bindValue(':item', $item->ite_001);
$stm->execute();
$opcional = $stm->fetch(PDO::FETCH_OBJ);

$sql = 'SELECT usu_002 FROM usuarios ';
$sql .= 'WHERE usu_001 = :id_usuario';
$stm = $pdo->prepare($sql);
$stm->bindValue(':id_usuario', $item->gar_001);
$stm->execute();
$usuario = $stm->fetch(PDO::FETCH_OBJ);

$sql = 'SELECT b_cancelamento_mesa FROM usuarios ';
$sql .= 'WHERE usu_001 = :id_usuario';
$stm = $pdo->prepare($sql);
$stm->bindValue(':id_usuario', $_COOKIE['id']);
$stm->execute();
$autorizacao = $stm->fetch(PDO::FETCH_OBJ);

?>
<!DOCTYPE html>
<html>

<head>
	<title>Comanda Eletrônica</title>
	<?php require 'includes/inc_head.php'; ?>
	<style>
		* {
			box-sizing: border-box;
		}

		.det-page {
			display: flex;
			flex-direction: column;
			min-height: 100vh;
			background: #f5f6fa;
		}

		.det-header {
			background: #3f51b5;
			color: #fff;
			padding: 10px 12px;
			display: flex;
			align-items: center;
			gap: 8px;
			flex-shrink: 0;
			z-index: 10;
		}

		.det-header .btn-voltar {
			width: 36px;
			height: 36px;
			border-radius: 50%;
			border: none;
			background: rgba(255, 255, 255, 0.15);
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			flex-shrink: 0;
		}

		.det-header .btn-voltar i {
			font-size: 20px;
		}

		.det-header-title {
			font-size: 15px;
			font-weight: 700;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			flex: 1;
		}

		.det-content {
			flex: 1;
			padding: 16px 12px 100px;
			max-width: 500px;
			margin: 0 auto;
			width: 100%;
		}

		.det-card {
			background: #fff;
			border-radius: 14px;
			border: 1px solid #e0e3eb;
			overflow: hidden;
		}

		.det-card-header {
			background: linear-gradient(135deg, #3f51b5, #5c6bc0);
			padding: 16px;
			color: #fff;
		}

		.det-card-header-nome {
			font-size: 15px;
			font-weight: 700;
			line-height: 1.3;
		}

		.det-card-header-qtde {
			font-size: 12px;
			opacity: 0.85;
			margin-top: 2px;
		}

		.det-card-body {
			padding: 0;
		}

		.det-row {
			display: flex;
			align-items: center;
			gap: 10px;
			padding: 12px 16px;
			border-bottom: 1px solid #f0f0f3;
		}

		.det-row:last-child {
			border-bottom: none;
		}

		.det-row-icon {
			width: 34px;
			height: 34px;
			border-radius: 50%;
			background: #e8eaf6;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
		}

		.det-row-icon i {
			font-size: 18px;
			color: #3f51b5;
		}

		.det-row-info {
			flex: 1;
			min-width: 0;
		}

		.det-row-label {
			font-size: 10px;
			font-weight: 700;
			text-transform: uppercase;
			color: #9e9e9e;
			letter-spacing: 0.3px;
		}

		.det-row-value {
			font-size: 14px;
			font-weight: 600;
			color: #212121;
			word-break: break-word;
		}

		.det-aviso {
			background: #fff3e0;
			border: 1.5px solid #ffb74d;
			border-radius: 10px;
			padding: 10px 14px;
			margin-top: 14px;
			font-size: 12px;
			font-weight: 600;
			color: #e65100;
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.det-aviso i {
			font-size: 18px;
		}

		.det-footer {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 1000;
			display: flex;
		}

		.det-footer .btn-footer {
			flex: 1;
			height: 50px;
			border: none;
			font-size: 14px;
			font-weight: 700;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 6px;
			color: #fff;
			transition: all 0.15s ease;
		}

		.det-footer .btn-footer:active {
			filter: brightness(0.88);
		}

		.det-footer .btn-footer i {
			font-size: 20px;
		}

		.det-footer .btn-voltar-footer {
			background: #3f51b5;
		}

		.det-footer .btn-excluir-footer {
			background: #e74c3c;
		}

		.det-nao-encontrado {
			text-align: center;
			padding: 60px 20px;
			color: #9e9e9e;
		}

		.det-nao-encontrado i {
			font-size: 56px;
			display: block;
			margin-bottom: 12px;
			color: #e0e0e0;
		}

		.det-nao-encontrado p {
			font-size: 15px;
			font-weight: 600;
		}

		/* ── Dark Theme Overrides ── */
		[data-theme="dark"] .det-page {
			background: var(--bg-body);
		}

		[data-theme="dark"] .det-header {
			background: var(--bg-header);
		}

		[data-theme="dark"] .det-card {
			background: var(--bg-card);
			border-color: var(--border-color);
		}

		[data-theme="dark"] .det-card-header {
			background: linear-gradient(135deg, #1a237e, #283593);
		}

		[data-theme="dark"] .det-row {
			border-bottom-color: var(--border-color);
		}

		[data-theme="dark"] .det-row-icon {
			background: #1a237e;
		}

		[data-theme="dark"] .det-row-icon i {
			color: var(--color-primary);
		}

		[data-theme="dark"] .det-row-label {
			color: var(--text-secondary);
		}

		[data-theme="dark"] .det-row-value {
			color: var(--text-primary);
		}

		[data-theme="dark"] .det-aviso {
			background: #3e2200;
			border-color: #8a5600;
			color: #ffb74d;
		}

		[data-theme="dark"] .det-nao-encontrado {
			color: var(--text-secondary);
		}

		[data-theme="dark"] .det-nao-encontrado i {
			color: var(--border-color);
		}
	</style>
</head>

<body>
	<script>
		loadPagina()
	</script>
	<div class="det-page" id="page" style="display:none">

		<!-- HEADER -->
		<div class="det-header">
			<button class="btn-voltar" onclick="window.history.go(-1)">
				<i class="material-icons">arrow_back</i>
			</button>
			<span class="det-header-title">Detalhes do Item</span>
		</div>

		<?php if ($item): ?>
			<div class="det-content">
				<div class="det-card">
					<div class="det-card-header">
						<div class="det-card-header-nome"><?= htmlspecialchars($item->mat_003) ?></div>
						<div class="det-card-header-qtde">Qtde: <?= number_format($item->ite_002, 3, ',', '.') ?></div>
					</div>
					<div class="det-card-body">
						<div class="det-row">
							<div class="det-row-icon"><i class="material-icons">attach_money</i></div>
							<div class="det-row-info">
								<div class="det-row-label">Valor</div>
								<div class="det-row-value">R$ <?= number_format($item->ite_005, 2, ',', '.') ?></div>
							</div>
						</div>
						<div class="det-row">
							<div class="det-row-icon"><i class="material-icons">person</i></div>
							<div class="det-row-info">
								<div class="det-row-label">Garçom</div>
								<div class="det-row-value"><?= htmlspecialchars($usuario->usu_002) ?></div>
							</div>
						</div>
						<div class="det-row">
							<div class="det-row-icon"><i class="material-icons">access_time</i></div>
							<div class="det-row-info">
								<div class="det-row-label">Hora</div>
								<div class="det-row-value"><?= htmlspecialchars($item->ite_009) ?></div>
							</div>
						</div>
						<?php if (!empty($item->tamanho)): ?>
							<div class="det-row">
								<div class="det-row-icon"><i class="material-icons">straighten</i></div>
								<div class="det-row-info">
									<div class="det-row-label">Tamanho</div>
									<div class="det-row-value"><?= htmlspecialchars($item->tamanho) ?></div>
								</div>
							</div>
						<?php endif; ?>
						<?php if (!empty($opcional)): ?>
							<div class="det-row">
								<div class="det-row-icon"><i class="material-icons">tune</i></div>
								<div class="det-row-info">
									<div class="det-row-label">Opcional</div>
									<div class="det-row-value"><?= htmlspecialchars($opcional->descricao) ?></div>
								</div>
							</div>
						<?php endif; ?>
						<?php if (!empty($item->ite_006)): ?>
							<div class="det-row">
								<div class="det-row-icon"><i class="material-icons">speaker_notes</i></div>
								<div class="det-row-info">
									<div class="det-row-label">Observação</div>
									<div class="det-row-value"><?= htmlspecialchars($item->ite_006) ?></div>
								</div>
							</div>
						<?php endif; ?>
					</div>
				</div>

				<?php if ($autorizacao->b_cancelamento_mesa): ?>
					<div class="det-aviso">
						<i class="material-icons">warning</i>
						<span>Itens fracionados serão excluídos todos os produtos</span>
					</div>
					<input type="hidden" id="item" value="<?= $item->ite_001 ?>">
					<input type="hidden" id="venda" value="<?= $item->ven_001 ?>">
				<?php endif; ?>
			</div>

			<!-- FOOTER -->
			<div class="det-footer">
				<button class="btn-footer btn-voltar-footer" onclick="window.history.go(-1)">
					<i class="material-icons">arrow_back</i> VOLTAR
				</button>
				<?php if ($autorizacao->b_cancelamento_mesa): ?>
					<button class="btn-footer btn-excluir-footer btn-excluir">
						<i class="material-icons">delete</i> EXCLUIR
					</button>
				<?php endif; ?>
			</div>

		<?php else: ?>
			<div class="det-content">
				<div class="det-nao-encontrado">
					<i class="material-icons">search_off</i>
					<p>Item não encontrado.</p>
				</div>
			</div>
			<div class="det-footer">
				<button class="btn-footer btn-voltar-footer" onclick="window.history.go(-1)" style="width:100%;">
					<i class="material-icons">arrow_back</i> VOLTAR
				</button>
			</div>
		<?php endif; ?>
	</div>

	<!-- Modal de Exclusão -->
	<dialog class="mdl-dialog modal-excluir">
		<div class="mdl-dialog__content">
			<p>
			<h5>Excluir item?</h5>
			<p><span class="produto red"></span></p>
			</p>
		</div>
		<div class="mdl-dialog__actions">
			<button type="button" class="mdl-button close">Cancelar</button>
			<button type="button" class="mdl-button mdl-button--raised mdl-button--colored excluir btn-red">Excluir</button>
		</div>
	</dialog>

	<?php include 'includes/inc_js.php'; ?>
	<script>
		function preloader() {
			ProcessingModal.hide();
			$('#page').show();
		}
		window.onload = preloader;

		var dialogExcluir = document.querySelector('.modal-excluir')
		if (dialogExcluir && !dialogExcluir.showModal) {
			dialogPolyfill.registerDialog(dialogExcluir);
		}

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

			$('.btn-excluir').click(function(event) {
				dialogExcluir.showModal();
			});

			$('.close').click(function(event) {
				dialogExcluir.close();
			});

			$('.excluir').click(function(event) {
				var item = $('#item').val();
				var venda = $('#venda').val();

				$.ajax({
					url: 'excluir_item.php',
					type: 'POST',
					dataType: 'JSON',
					data: {
						id_venda: venda,
						item: item
					},
					beforeSend: function() {
						$('.excluir').html('Excluindo ...');
					},
					success: function(retorno) {
						if (retorno.status == '1') {
							window.location = 'pedido.php?mesa=' + <?= $mesa ?>;
						} else {
							alert(retorno.erro);
						}
					}
				});
			});
		});
	</script>
</body>

</html>