<?php get_header(); ?>
<div class="uk-container uk-container-large">
	<main role="main">
			<section >

				<div class="uk-text-center uk-margin-large-top">
					<img class="walk-icon" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/dog-cat-walk-icon.webp" data-width data-height>
				</div>
				<h2 class="uk-text-center uk-margin-large-bottom">Amazing Before &amp; After Transformations at Maw’n Pawz</h2>



				<div class="uk-child-width-1-3@m" uk-grid  uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 300">

					<?php get_template_part('loop-beforeandafter'); ?>
				</div>



				    <script>
				    document.addEventListener("DOMContentLoaded", function () {
				  const sliders = document.querySelectorAll(".custom-image-slider");

				  sliders.forEach(function (slider) {
				    const afterImage = slider.querySelector(".slider-after");
				    const handle = slider.querySelector(".slider-handle");

				    // Set initial handle position and clipPath
				    const initialPercentage = 50;
				    handle.style.left = `${initialPercentage}%`;
				    afterImage.style.clipPath = `inset(0 ${100 - initialPercentage}% 0 0)`;

				    let dragging = false;
				    let lastX = 0;

				    // Add mouse event listeners
				    handle.addEventListener("mousedown", (e) => {
				      dragging = true;
				      lastX = e.clientX;
				      e.preventDefault();
				    });

				    document.addEventListener("mouseup", () => {
				      dragging = false;
				    });

				    document.addEventListener("mouseleave", () => {
				      dragging = false;
				    });

				    document.addEventListener("mousemove", (e) => {
				      if (!dragging) return;

				      const rect = slider.getBoundingClientRect();
				      const x = e.clientX - rect.left;
				      let widthPercentage = (x / rect.width) * 100;

				      // Add constraint to keep the handle within 1% of either edge
				      widthPercentage = Math.max(0, Math.min(widthPercentage, 100));

				      // Update handle position using requestAnimationFrame
				      window.requestAnimationFrame(() => {
				        handle.style.left = `${widthPercentage}%`;
				        afterImage.style.clipPath = `inset(0 ${100 - widthPercentage}% 0 0)`;
				      });

				      lastX = x;
				    });

				    // Add touch event listeners
				    handle.addEventListener("touchstart", (e) => {
				      dragging = true;
				      lastX = e.touches[0].clientX;
				      e.preventDefault();
				    });

				    document.addEventListener("touchend", () => {
				      dragging = false;
				    });

				    slider.addEventListener("touchcancel", () => {
				      dragging = false;
				    });

				    slider.addEventListener("touchmove", (e) => {
				      if (!dragging) return;

				      const rect = slider.getBoundingClientRect();
				      const x = e.touches[0].clientX - rect.left;
				      let widthPercentage = (x / rect.width) * 100;

				      // Add constraint to keep the handle within 1% of either edge
				      widthPercentage = Math.max(0, Math.min(widthPercentage, 100));

				      // Update handle position using requestAnimationFrame
				      window.requestAnimationFrame(() => {
				        handle.style.left = `${widthPercentage}%`;
				        afterImage.style.clipPath = `inset(0 ${100 - widthPercentage}% 0 0)`;
				      });

				      lastX = x;
				    });
				  });
				  });

				    </script>

				<?php get_template_part('pagination'); ?>

			</section>
	</main>
</div>

<?php get_footer(); ?>
