{% extends 'layouts/base' %}

{% block content %}

	{% embed 'skeletons/internalPage' %}

		{% block internal %}
		{% import "macros/images" as images %}
		{% import 'macros' as macros %}	

			{% set services = craft.entries({
				section: "services",
				with: [
					"featureImage",
				],
			}).all() %}

			{# TODO: Pagination #}
			<div class="container">
				{% embed "skeletons/listing" with {
					self: {
						classes: "pb-32",
						heading: block.heading|default,
						cards: services,
						cardType: "article",
					}
				} %}
				
				{% block listingHeader %}{% endblock %}
				{% endembed %}
			</div>

			<!-- Before After Gallery -->
			<section class="container mb-10 py-16 xl:mb-16 xl:py-24">
				<h1 class="heading-1 text-center text-blue">Our Gallery</h1>
				<div class="grid mt-10 gap-10 md:grid-cols-2 xl:grid-cols-3 lg:mt-16">
					{% for item in entry.beforeAfterGallery.all() %}
						<section class="before-after-image">
							<div>
								<article class="relative">
									<!-- Background -->
									<div class="relative z-0 overflow-hidden pointer-events-none background-before aspect-[16/9]">
										{{ images.imagerSrcset(
												item.beforeImage[0],
												'beforeAfter',
												{
													classes: 'object-cover object-center w-full h-full childFull',
												}
											)
										}}
										<h6 class="absolute type-2xl bottom-4 left-4 text-imperial">
											Before
										</h6>
									</div>
									<!-- Foreground -->
									<div class="absolute inset-0 z-10 overflow-hidden pointer-events-none foreground-after aspect-[16/9]">
										<div class="relative w-full h-full">
											{{ images.imagerSrcset(
													item.afterImage[0],
													'beforeAfter',
													{
														classes: 'object-cover object-center w-full h-full childFull',
													}
												)
											}}
											<h6 class="absolute type-2xl bottom-4 right-4 text-imperial">
												After
											</h6>
										</div>
									</div>
									<input type="range"
										min="10"
										max="90"
										value="30"
										class="before-after-slider absolute inset-0 z-20 w-full h-full opacity-0 cursor-move"
										name="slider"
									/>
									<div class="slider-handle absolute left-0 z-30 p-2 -translate-x-1/2 -translate-y-1/2 rounded-full pointer-events-none top-1/2 bg-imperial">
										<svg xmlns="http://www.w3.org/2000/svg"
											class="w-6 h-6 text-white rotate-90"
											fill="none"
											viewBox="0 0 24 24"
											stroke="currentColor"
											stroke-width="2">
											<path stroke-linecap="round"
												stroke-linejoin="round"
												d="M8 9l4-4 4 4m0 6l-4 4-4-4" />
										</svg>
									</div>
								</article>
							</div>
						</section>
					{% endfor %}
				</div>
				<button class="show-more-btn pBtn mx-auto mt-16 justify-center w-36 xl:mt-24">
					View All
				</button>
			</section>
			<script>
				// ---------- Before After Gallery
				const fImgs = document.querySelectorAll(".foreground-after");
				fImgs.forEach((image) => {
					image.style.clipPath = `polygon(30% 0, 100% 0, 100% 100%, 30% 100%)`;
				});

				const handles = document.querySelectorAll(".slider-handle");
				handles.forEach((handle) => {
					handle.style.left = `30%`;
				});

				const sliders = document.querySelectorAll(".before-after-slider");
				sliders.forEach((slider) => {
					const fImg = slider.previousElementSibling;
					const handle = slider.nextElementSibling;

					slider.addEventListener("input", (e) => {
						const value = e.target.value;
						handle.style.left = `${value}%`;
						fImg.style.clipPath = `polygon(${value}% 0, 100% 0, 100% 100%, ${value}% 100%)`;
					});
				});

				// ---------- Show/Hide button

				const beforeAfterImagesNodeList = document.querySelectorAll(".before-after-image");
				const beforeAfterImages = Array.from(beforeAfterImagesNodeList).slice(3);

				const showMoreBtn = document.querySelector(".show-more-btn");

				function hideImages() {
					beforeAfterImages.forEach((image) => {
						image.style.display = "none"
					});
					showMoreBtn.textContent = "View All"
				}

				function showImages() {
					beforeAfterImages.forEach((image) => {
						image.style.display = "block"
					});
					showMoreBtn.textContent = "Show Less"
				}

				hideImages();

				showMoreBtn.addEventListener("click", () => {
					if (showMoreBtn.textContent === "View All") {
						showImages();
					} else {
						hideImages();
					}
				})

			</script>

			{% include "blocks/global/faq" %}

		{% endblock %}

	{% endembed %}

{% endblock content %}