<style>
	.pos-success-wrapper {
		perspective: 1000px;
		margin-top: 15px;
		margin-bottom: 25px;
	}

	.pos-success-card {
		background: #ffffff;
		border: none;
		border-radius: 20px;
		box-shadow: 0 15px 35px rgba(0, 0, 0, 0.07), 0 5px 15px rgba(0, 0, 0, 0.04);
		overflow: hidden;
		transition: all 0.3s ease;
	}

	.pos-success-header {
		background: linear-gradient(135deg, #10b981 0%, #059669 100%);
		padding: 32px 20px 28px;
		position: relative;
		color: #ffffff;
		text-align: center;
	}

	.pos-success-header::after {
		content: '';
		position: absolute;
		bottom: -15px;
		left: 0;
		right: 0;
		height: 30px;
		background: #ffffff;
		border-radius: 20px 20px 0 0;
	}

	.pos-icon-badge {
		width: 76px;
		height: 76px;
		background: rgba(255, 255, 255, 0.2);
		backdrop-filter: blur(8px);
		border: 3px solid rgba(255, 255, 255, 0.4);
		border-radius: 50%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 12px;
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
		animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}

	.pos-icon-badge i {
		font-size: 42px;
		color: #ffffff;
		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.pos-order-title {
		font-size: 22px;
		font-weight: 700;
		margin: 0;
		color: #ffffff;
		letter-spacing: -0.3px;
	}

	.pos-order-badge {
		display: inline-block;
		background: rgba(255, 255, 255, 0.25);
		padding: 4px 14px;
		border-radius: 30px;
		font-size: 13px;
		font-weight: 600;
		margin-top: 6px;
		letter-spacing: 0.5px;
	}

	.pos-success-body {
		padding: 25px 25px 15px;
		text-align: center;
	}

	.pos-info-box {
		background: #f8fafc;
		border: 1px solid #e2e8f0;
		border-radius: 14px;
		padding: 16px 18px;
		margin-bottom: 20px;
	}

	.pos-info-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 6px 0;
		border-bottom: 1px dashed #e2e8f0;
	}

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

	.pos-info-label {
		color: #64748b;
		font-size: 13px;
		font-weight: 500;
		display: flex;
		align-items: center;
		gap: 6px;
	}

	.pos-info-value {
		color: #1e293b;
		font-weight: 700;
		font-size: 14px;
	}

	.pos-type-pill {
		background: #e0f2fe;
		color: #0369a1;
		padding: 4px 12px;
		border-radius: 8px;
		font-size: 12px;
		font-weight: 600;
		text-transform: uppercase;
	}

	.pos-qr-section {
		background: #ffffff;
		border: 2px dashed #cbd5e1;
		border-radius: 14px;
		padding: 15px;
		margin-top: 10px;
		transition: border-color 0.2s;
	}

	.pos-qr-section:hover {
		border-color: #10b981;
	}

	.pos-qr-img {
		max-width: 130px;
		height: auto;
		border-radius: 10px;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
	}

	.pos-qr-btn {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin-top: 10px;
		color: #10b981;
		font-weight: 600;
		font-size: 13px;
		text-decoration: none !important;
		transition: transform 0.2s, color 0.2s;
	}

	.pos-qr-btn:hover {
		color: #059669;
		transform: translateY(-1px);
	}

	.pos-success-footer {
		padding: 20px 25px 25px;
		background: #ffffff;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 12px;
	}

	.pos-btn-action {
		flex: 1 1 0px;
		white-space: nowrap;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 11px 16px;
		border-radius: 12px;
		font-weight: 600;
		font-size: 14px;
		transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
		border: none;
		cursor: pointer;
		text-decoration: none !important;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	}

	@media (max-width: 576px) {
		.pos-success-footer {
			flex-direction: column;
		}

		.pos-btn-action {
			width: 100%;
		}
	}

	.pos-btn-print {
		background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
		color: #ffffff !important;
	}

	.pos-btn-print:hover {
		background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
		box-shadow: 0 6px 16px rgba(3, 105, 161, 0.35);
		transform: translateY(-2px);
	}

	.pos-btn-invoice {
		background: linear-gradient(135deg, #10b981 0%, #059669 100%);
		color: #ffffff !important;
	}

	.pos-btn-invoice:hover {
		background: linear-gradient(135deg, #059669 0%, #047857 100%);
		box-shadow: 0 6px 16px rgba(5, 150, 105, 0.35);
		transform: translateY(-2px);
	}

	.pos-btn-new {
		background: #f1f5f9;
		color: #334155 !important;
		border: 1px solid #cbd5e1;
	}

	.pos-btn-new:hover {
		background: #e2e8f0;
		color: #0f172a !important;
		transform: translateY(-1px);
	}

	@keyframes popIn {
		0% {
			transform: scale(0);
			opacity: 0;
		}

		80% {
			transform: scale(1.15);
			opacity: 1;
		}

		100% {
			transform: scale(1);
		}
	}

	.sidebar-mini.sidebar-collapse .content-wrapper {
		background-color: var(--background-color) !important;
	}
</style>

<div class="row justify-content-center pos-success-wrapper">
	<div class="col-md-5 col-lg-5">

		<div class="pos-success-card">
			<div class="pos-success-header">
				<div class="pos-icon-badge">
					<i class="icofont-check-alt"></i>
				</div>
				<h3 class="pos-order-title">
					<?= !empty(lang('order_placed_successfully')) ? lang('order_placed_successfully') : 'Order Placed!'; ?>
				</h3>
				<span class="pos-order-badge">
					<?= !empty(lang('order_id')) ? lang('order_id') : 'Order ID'; ?>: #<span
						class="order_id"><?= $order_info['uid']; ?></span>
				</span>
			</div>

			<div class="pos-success-body">
				<div class="pos-info-box">
					<div class="pos-info-row">
						<span class="pos-info-label"><i class="fa fa-user-o"></i>
							<?= !empty(lang('customer_name')) ? lang('customer_name') : 'Customer'; ?></span>
						<span
							class="pos-info-value"><?= !empty($order_info['name']) ? $order_info['name'] : 'Guest'; ?></span>
					</div>

					<?php if (isset($order_info['phone']) && !empty($order_info['phone'])): ?>
						<div class="pos-info-row">
							<span class="pos-info-label"><i class="fa fa-phone"></i> <?= lang('phone'); ?></span>
							<span class="pos-info-value"><?= @$order_info['phone']; ?></span>
						</div>
					<?php endif; ?>

					<?php if (isset($order_info['order_type'])): ?>
						<div class="pos-info-row">
							<span class="pos-info-label"><i class="fa fa-cutlery"></i> Type</span>
							<span class="pos-type-pill"><?= order_type($order_info['order_type']); ?></span>
						</div>
					<?php endif; ?>
				</div>

				<div class="successOrder" id="prints" style="display:none;">
					<div class="confirmMsgArea">
						<h5><?= !empty(lang('order_id')) ? lang('order_id') : 'Order id'; ?>: #<span
								class="order_id"><?= $order_info['uid']; ?></span></h5>
						<div class="userDetails">
							<h4><?= $order_info['name']; ?></h4>
							<?php if (isset($order_info['phone']) && !empty($order_info['phone'])): ?>
								<p><?= @$order_info['phone']; ?></p>
							<?php endif; ?>
							<?php if (isset($order_info['order_type'])): ?>
								<h4><?= order_type($order_info['order_type']); ?></h4>
							<?php endif; ?>
						</div>
					</div>
				</div>

				<?php if (isset($shop_info['is_order_qr']) && $shop_info['is_order_qr'] == 1): ?>
					<div class="pos-qr-section">
						<img src="<?= base_url($order_info['qr_link']) ?>" alt="QR Code" class="pos-qr-img" id="qr_link">
						<div>
							<a href="<?= base_url($order_info['qr_link']) ?>" download target="blank"
								class="pos-qr-btn qrDownloadBtn" id="downloadLink" data-toggle="tooltip"
								title="Download QR Code">
								<i class="fa fa-download"></i>
								<?= !empty(lang('download')) ? lang('download') : 'Download QR'; ?>
							</a>
						</div>
					</div>
				<?php endif; ?>
			</div>

			<div class="pos-success-footer">
				<?php $printer = printer_config(restaurant()->id); ?>
				<?php if (isset($printer['show_print_btn']) && $printer['show_print_btn'] == 1): ?>
					<a href="javascript:;" class="pos-btn-action pos-btn-print print3">
						<i class="fa fa-print"></i> <?= !empty(lang('print')) ? lang('print') : 'Print Receipt'; ?>
					</a>
				<?php endif; ?>

				<a href="<?= base_url('invoice/' . auth('username') . '/' . $order_info['uid']); ?>" target="blank"
					class="pos-btn-action pos-btn-invoice">
					<i class="fa fa-file-pdf-o"></i> <?= !empty(lang('invoice')) ? lang('invoice') : 'View Invoice'; ?>
				</a>

				<a href="<?= base_url("admin/pos"); ?>" class="pos-btn-action pos-btn-new">
					<i class="fa fa-plus-circle"></i>
					<?= !empty(lang('new_order')) ? lang('new_order') : 'Create New Order'; ?>
				</a>
			</div>
		</div>

		<input type="hidden" class="base_url" value="<?= base_url(); ?>">

		<script type="text/javascript">
			(function ($) {
				$(document).ready(function () {
					var base_url = $('.base_url').val() || '<?= base_url(); ?>';
					var csrf_value = $('#csrf_value').length ? $('#csrf_value').attr('href') : '';
					var uid = '<?= isset($order_info['uid']) ? $order_info['uid'] : (isset($order_id) ? $order_id : ''); ?>';
					var printURL = '<?= base_url('admin/pos/direct_print/' . $order_info['uid']); ?>';

					function triggerPrint() {
						var url = printURL;
						$.get(url, {
							'csrf_test_name': csrf_value
						}, function (json) {
							console.log(json);
							if (json.st == 1) {
								console.log("Printed to thermal printer successfully");
							} else {
								alert("Failed to print to thermal printer. Please check printer connection.");
							}
						}, 'json');
					}

					$(document).off('click', '.print3').on('click', '.print3', function (e) {
						e.preventDefault();
						triggerPrint();
						return false;
					});
				});
			})(jQuery);
		</script>
	</div>
</div>