{% extends "base.html.twig" %}
{% block title %}Shop{% endblock %}

{% block body %}
	<style>
		.pd__promises {
			margin-bottom: var(--ds-size-space-2);
		}
		.lbl-green {
			color: var(--ds-color-semantic-success-base);
		}
		.lbl-blue {
			color: var(--ds-color-semantic-info-base);
		}
	</style>
	<div class="page-body">
		<div class="ln-o-container ln-o-container--soft padding-bottom-default">
			<div data-testid="content-wrap" style="">
				<div class="ln-o-section padding-top-default offers">
					<div class="tpr-plp__container offers__title-container">
						<div class="ln-u-text-align-center">
							<h1 class="tpr-plp__heading offers__title" data-testid="offers-title">
								Thank You — Choose Your Gift
							</h1>
							<p class="offers__promotion-tscs" data-testid="tpr-tscs">
								You’ve completed the survey. As a thank-you, choose one gift from the available selection.
							</p>
						</div>
					</div>
				</div>
				<div id="main" class="ln-o-section">
					<div class="ln-u-text-align-center">
						<ul class="ln-o-grid ln-o-grid--matrix ln-o-grid--equal-height">
							{% for product in products %}
								<li class="pt-grid-item ln-o-grid__item ln-u-6/12@xs ln-u-1/3@sm ln-u-3/12@md ln-u-2/12@xl">
									<article
										data-testid="product-tile-{{ loop.index }}"
										data-product-id="{{ product.id }}"
										data-product-name="{{ product.name|e('html_attr') }}"
										data-product-price="{{ product.price }}"
										data-product-image="{{ cache_image(product.image)|default('')|e('html_attr') }}"
										data-product-currency="GBP"
										class="ln-c-card pt pt-card"
									>
										<div aria-hidden="true">
											{% for offer in product.offers %}
												<div class="product-details-title__tag">
												</div>
											{% endfor %}
											{% if product.previous_price is not null %}
												<div class="product-details-title__tag">
													<span data-testid="offer-label" class="promotional-tag">Offer</span>
												</div>
											{% endif %}
											{% if product.labels is defined and product.labels|length > 0 %}
												<div class="product-labels">
													{% for label in product.labels %}
														<span class="product-label">{{ label }}</span>
													{% endfor %}
												</div>
											{% endif %}
										</div>
										<div class="pt__content pt--reduced-padding pt__content--optimised pt__content--with-header">
											<div class="pt__image-wrapper">
												<div class="pt-image__ribbon-wrapper">
													<div style="display: contents">
														<a
															class="pt-image pt-image__link"
															tabindex="-1"
															aria-hidden="true"
														>
															{% if product.image %}
																<img title="{{ product.name }}" src="{{ cache_image(product.image) }}" alt="{{ product.name }}" data-testid="pt-image" aria-hidden="true"/>
															{% else %}
																<picture>
																	<source srcset="{{ cache_image('https://via.placeholder.com/300x300?text=' ~ product.name|url_encode) }}" type="image/webp"/>
																	<source srcset="{{ cache_image('https://via.placeholder.com/300x300?text=' ~ product.name|url_encode) }}" type="image/jpeg"/>
																</picture>
															{% endif %}
														</a>
													</div>
												</div>
												<div class="product-header product-header--citrus">&nbsp;</div>
											</div>
											<div class="pt__wrapper">
												<div class="pt__wrapper-inner">
													<div class="pt__wrapper__top">
														<div class="product-description-box">
															<div style="display: contents">
																<h2 class="pt__info__description" data-testid="product-tile-description">
																	<a
																		class="pt__link"
																		title="{{ product.name }}"
																		aria-label="{{ product.name[: 50] }}..."
																	>
																		{{ product.name[: 47] }}{% if product.name|length > 47 %}...{% endif %}</a>
																</h2>
															</div>
														</div>
														<div class="pt__inline-meta pt__inline-meta--promotions" data-testid="promotions-wrapper">
															{% for offer in product.offers %}
																<span class="promotion-message__wrapper">{{ offer.label }}</span>
															{% endfor %}
															{% if product.previous_price is not null and product.previous_price != product.price %}
																<span class="promotion-message__wrapper">Save {{ '%.2f'|format(product.previous_price - product.price) }}</span>
															{% endif %}
														</div>
													</div>
												</div>
												<div class="pt__controls pt__controls--optimised" data-testid="pt-control-buttons">
													<div class="pt-button">
														<button
															data-testid="add-button"
															class="ln-c-button ln-c-button--filled ln-c-button--full pt__add-button--reduced-height"
															type="button"
														>
															Claim</button>
													</div>
												</div>
											</div>
										</div>
									</article>
								</li>
							{% endfor %}
						</ul>
					</div>
				</div>
				<section class="ln-o-section ln-o-section ln-u-soft-sm"></section>
			</div>
		</div>
		<div class="ds-c-toast-container ds-c-toast-container--position-bottom-center" data-pkgid="@sainsburys-tech/fable-4.23.0-toast-container"></div>
	</div>

	<script>
		document.addEventListener("DOMContentLoaded", function () {
			var STORAGE_KEY = "tv_bullet_gift";
			var CHECKOUT_URL = "{{ base_url }}/survey.php?page=checkout&s={{ s }}";

			function getGift() {
				try {
					return JSON.parse(localStorage.getItem(STORAGE_KEY)) || null;
				} catch (_) {
					return null;
				}
			}

			function setGift(product) {
				localStorage.setItem(STORAGE_KEY, JSON.stringify(product));
			}

			document
				.querySelectorAll('[data-testid="add-button"]')
				.forEach(function (btn) {
					btn.addEventListener("click", function () {
						var tile = btn.closest("[data-product-id]");
						if (!tile) return;
						var id = tile.dataset.productId;
						var name = tile.dataset.productName;
						var price = parseFloat(tile.dataset.productPrice);
						var image = tile.dataset.productImage || "";
						var currency = tile.dataset.productCurrency || "GBP";

						var product = {
							id: String(id),
							name: name,
							price: price,
							image: image,
							currency: currency,
						};
						setGift(product);

						document.cookie =
							"tv_bullet_cart=" +
							encodeURIComponent(JSON.stringify([product])) +
							"; Path=/; Max-Age=86400; SameSite=Lax";

						btn.textContent = "Added ✓";
						btn.disabled = true;
						setTimeout(function () {
							window.location.href = CHECKOUT_URL;
						}, 350);
					});
				});
		});
	</script>
{% endblock %}