<?php include VIEWPATH . 'common_layouts/include/style_1.php'; ?>
<div class="singleItemDetails">
	<div class="container">
		<div class="itemDetailsMenu">
			<ul>
				<li>
					<a href="<?= url($slug); ?>"><i class="fa fa-arrow-left"></i> <?= lang('back'); ?></a>
				</li>
			</ul>
		</div>
		<div class="row justify-content-center pb-20">
			<div class="col-md-8">
				<div class="singleItemDetailsBody">
					<?php $this->load->view('layouts/inc/item_details_thumb_2', ['is_close' => 0]); ?>
				</div>

				<!-- Similar Items Section -->
				<?php if (!empty($similar_items)): ?>
					<div class="similar-items-section mt-20">
						<h4 class="section-title"><?= !empty(lang('similar_items')) ? lang('similar_items') : 'Similar Items'; ?></h4>
						<div class="items-carousel">
							<div class="items-scroll">
								<?php foreach ($similar_items as $similar_item): ?>
									<a href="<?= base_url('item-details/' . md5($similar_item['item_id']) . '/item'); ?>">
										<div class="item-card">
											<div class="item-thumb">
												<img src="<?= get_img($similar_item['thumb'], $similar_item['img_url'], $similar_item['img_type']); ?>" alt="<?= html_escape($similar_item['title']); ?>">
												<?= is_newItem($similar_item['created_at'] ?? ''); ?>
											</div>
											<div class="item-details">
												<h6 class="item-name"><?= html_escape($similar_item['title']); ?></h6>
												<div class="item-price">
													<?= __price($similar_item, $similar_item['shop_id'], '', isset($offer_discount) ? $offer_discount : 0); ?>
												</div>
											</div>

										</div>
									</a>
								<?php endforeach; ?>
							</div>
						</div>
					</div>
				<?php endif; ?>

				<!-- Last Visited Items Section -->
				<?php if (!empty($last_visited_items)): ?>
					<div class="last-visited-section mt-4">
						<h4 class="section-title"><?= !empty(lang('last_visited_items')) ? lang('last_visited_items') : 'Last Visited Items'; ?></h4>
						<div class="items-carousel">
							<div class="items-scroll">
								<?php foreach ($last_visited_items as $visited_item): ?>
									<a href="<?= base_url('item-details/' . md5($visited_item['item_id']) . '/item'); ?>" class="text-decoration-none">
										<div class="item-card">
											<div class="item-thumb">
												<img src="<?= get_img($visited_item['thumb'], $visited_item['img_url'], $visited_item['img_type']); ?>" alt="<?= html_escape($visited_item['title']); ?>">
												<?= is_newItem($visited_item['created_at'] ?? ''); ?>
											</div>
											<div class="item-details">
												<h6 class="item-name"><?= html_escape($visited_item['title']); ?></h6>
												<div class="item-price">
													<?= __price($visited_item, $visited_item['shop_id'], '', isset($offer_discount) ? $offer_discount : 0); ?>
												</div>
											</div>
										</div>
									</a>
								<?php endforeach; ?>
							</div>
						</div>
					</div>
				<?php endif; ?>

			</div>
		</div>
	</div>

	<style>
		.similar-items-section,
		.last-visited-section {
			border-top: 1px solid var(--border-color);
			padding-top: 20px;
		}

		.section-title {
			color: var(--color);
			font-weight: 600;
			margin-bottom: 15px;
			font-size: 1.1rem;
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.section-title::before {
			content: '';
			width: 4px;
			height: 20px;
			background: linear-gradient(135deg, var(--color) 0%, var(--color-dark) 100%);
			border-radius: 2px;
		}

		.items-carousel {
			position: relative;
			overflow: hidden;
			border-radius: 12px;
		}

		.items-scroll {
			display: flex;
			gap: 12px;
			overflow-x: auto;
			-webkit-overflow-scrolling: touch;
			scroll-behavior: smooth;
			padding: 4px;
			scrollbar-width: thin;
			scrollbar-color: var(--color) var(--bg-color);
		}

		.items-scroll::-webkit-scrollbar {
			height: 6px;
		}

		.items-scroll::-webkit-scrollbar-track {
			background: var(--background-color);
			border-radius: 3px;
		}

		.items-scroll::-webkit-scrollbar-thumb {
			background: var(--background-color);
			border-radius: 3px;
		}

		.items-scroll::-webkit-scrollbar-thumb:hover {
			background: #aaa;
		}

		.item-card {
			display: flex;
			width: max-content;
			background-color: var(--soft-background);
			color: var(--color);
			border-radius: 12px;
			border: 1px solid var(--border-color);
		}

		.item-card:hover {
			transform: translateY(-3px);
			box-shadow: 0 8px 20px var(--box-shadow);
			border-color: var(--border-color);
		}

		.item-card a {
			display: block;
			text-decoration: none;
			color: inherit;
		}

		.item-thumb {
			--ratio: 60px;
			position: relative;
			width: var(--ratio);
			height: var(--ratio);
			flex: 0 0 var(--ratio);
			overflow: hidden;
			border-radius: .5rem;
		}

		.item-thumb img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform 0.3s ease;
		}

		.item-card:hover .item-thumb img {
			transform: scale(1.1);
		}

		.item-details {
			padding: 8px 6px;
			text-align: center;
		}

		.item-name {
			font-size: 0.75rem;
			font-weight: 500;
			color: var(--color);
			margin: 0 0 4px 0;
			line-height: 1.1;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
			min-height: 16px;
		}

		.item-price {
			font-size: 0.7rem !important;
			font-weight: 600;
			margin: 0;
		}

		.item-price span {
			font-size: 0.7rem !important;
			font-weight: 600;
			margin: 0;
		}

		/* Responsive adjustments */
		@media (max-width: 576px) {
			.item-card {
				width: 100%;
				max-width: max-content;
			}

			.items-scroll {
				gap: 10px;
			}
		}
	</style>