<?php /* Template Name: Homepage */ get_header(); ?>

<div class="uk-cover-container uk-text-center banner uk-margin-large-bottom">
    <canvas class="uk-visible@m" width="" height="700"></canvas>
    <canvas class="uk-hidden@m" width="" height="1000"></canvas>



	   <div class="uk-position-cover uk-text-center uk-height-1-1 uk-visible@m" >
        <div class="uk-height-1-1">
          <div class="uk-flex uk-flex-center uk-flex-bottom uk-grid-collapse uk-height-1-1" uk-grid >
            <div class="uk-width-1-3@m">
              <img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/happy-dog-group-hero.webp" data-width data-height uk-scrollspy=" cls: uk-animation-fade; delay: 200"> 
            </div>
            <div class="uk-width-1-3@m">

           </div>
           <div class="uk-width-1-3@m">
             <img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/happy-cat-group-hero.webp" data-width data-height uk-scrollspy=" cls: uk-animation-fade; delay: 200">
           </div>
         </div>
      </div>
    </div>

	  <div class="uk-position-cover uk-text-center uk-flex uk-flex-center uk-flex-middle" uk-scrollspy=" cls: uk-animation-fade; delay: 200">
      <div>
        <h1>Maw’n Pawz <br>Expert Pet Grooming <br>in Kaministiquia</h1>
        <h2 class="uk-margin-large-top uk-margin-large-bottom">Your Pet Deserves the Best Care</h2>

        <div class="uk-child-width-1-3@m" uk-grid>
		  <?php get_template_part('content-3features'); ?>

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

</div>


<div class="uk-container uk-container-large" uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 500">
  <div class="uk-text-center">
    <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-xlarge-bottom">Specialized Treatments for Happy, Healthy Pets</h2>


  <div class="uk-grid-large" uk-grid >
  
	<?php get_template_part('content-dogs'); ?>
	<?php get_template_part('content-cats'); ?>

  </div>
</div>


<div class="uk-container">
  <div class="small-animals-bg uk-padding uk-margin-large-top">
    <h2 class="white uk-text-center">Nail Trim / Grinding for Dogs, Cats,<br> Rabbits, and Other Small Animals</h2>
    <div class="uk-text-center">
      <a href="<?php echo home_url(); ?>/small-pet-services/" class="orange-btn uk-margin-medium-top">SMALL PET SERVICES</a>
    </div>
  </div>
</div>


<div class="uk-container uk-margin-xlarge-top uk-margin-xlarge-bottom quote-bg">

  <div class="" uk-slider>
    <div class="uk-position-relative">
        <div class="uk-slider-container ">
            <ul class="testimonials uk-slider-items uk-child-width-1-1 uk-grid" uk-scrollspy="target: > li; cls: uk-animation-fade; delay: 300">
                <?php
                    $args = array(
                        'post_type'      => 'testimonials',
                        'posts_per_page' => 12,
                        'meta_query'     => array(
                            array(
                                'key'     => 'show_on_home_page',
                                'value'   => '1',
                                'compare' => '=='
                            )
                        )
                    );

                    $loop = new WP_Query($args);

                    if ($loop->have_posts()) {
                        while ($loop->have_posts()) : $loop->the_post(); ?>
                        <li>
                            <div class="uk-grid-large uk-flex uk-flex-bottom" uk-grid>
                                <div class="uk-width-2-5@m">
                                    <div class="uk-inline">


                                        <img class="test1" uk-img data-src="<?php echo get_template_directory_uri()?>/images/review-pet-1.webp'" data-width data-height>
                                        <img class="test2" uk-img data-src="<?php echo get_template_directory_uri()?>/images/review-pet-2.webp'" data-width data-height>
                                        <img class="test3" uk-img data-src="<?php echo get_template_directory_uri()?>/images/review-pet-3.webp'" data-width data-height>
                                        <img class="test4" uk-img data-src="<?php echo get_template_directory_uri()?>/images/review-pet-4.webp'" data-width data-height>
                                        <img class="test5" uk-img data-src="<?php echo get_template_directory_uri()?>/images/review-pet-5.webp'" data-width data-height>


                                        <?php if ( has_post_thumbnail() ) { ?>
                                            <img class="circle" uk-img data-src="<?php echo esc_url(get_the_post_thumbnail_url(get_the_ID(), 'thumbnail')); ?>" data-width data-height>
                                        <?php } ?>
                                    </div>
                                </div>
                                <div class="uk-width-3-5@m">
                                  <img class="walk-icon" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/dog-cat-walk-icon.webp" data-width data-height>
                                  <h2 class="uk-margin-remove-bottom">What Our Happy Clients Say</h2>

                                    <div class="test-box uk-margin-large-top">
                                        <div class="stars yellow">
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                        </div>
                                        <?php the_content(); ?>
                                        <h5 class="uk-margin-remove-bottom"><?php the_title(); ?></h5>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <?php endwhile;
                    } else {
                        echo __('No testimonials found');
                    }
                    wp_reset_postdata();
                ?>
            </ul>
        </div>

        <div class="uk-hidden@s">
            <a class="uk-position-center-left uk-position-small" href uk-slidenav-previous uk-slider-item="previous"></a>
            <a class="uk-position-center-right uk-position-small" href uk-slidenav-next uk-slider-item="next"></a>
        </div>

        <div class="uk-visible@s">
            <a class="uk-position-center-left-out uk-position-small" href uk-slidenav-previous uk-slider-item="previous"></a>
            <a class="uk-position-center-right-out uk-position-small" href uk-slidenav-next uk-slider-item="next"></a>
        </div>

        <div class="uk-width-2-5@m">
            <div class="uk-slider-nav-container uk-margin-medium-top uk-flex uk-flex-center">
                <ul class="uk-slider-nav uk-dotnav "></ul>
            </div>
        </div>
      </div>
    </div>

</div>



</div>


  <div class="uk-container uk-container-large">


  <div class="uk-grid-large uk-child-width-1-2@m uk-flex uk-flex-middle" uk-grid>
    <div>
      <img class="walk-icon" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/dog-cat-walk-icon.webp" data-width data-height>
      <h2 class="uk-margin-remove-bottom">Hello, I’m Rebecca Maw</h2>
      <P class="uk-margin-remove-top small">Owner / Operator</P>

      <P class="uk-margin-medium-top uk-margin-medium-bottom">I am a Dog Lover and Enthusiast. I will care for your dog as if it were mine. I understand the need for your pets to have exercise and human playtime to have a happy and healthy time while you are away from them.</P>

      <div class="uk-child-width-auto" uk-grid>
        <div>
          <a href="<?php echo home_url(); ?>/about/" class="orange-btn">ABOUT US</a>
        </div>
        <div>
          <div class="uk-grid-small uk-flex uk-flex-middle uk-margin-xlarge-bottom" uk-grid>
            <div class="uk-width-auto">
              <img class="large-paw-icon" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/paw.webp" data-width data-height>
            </div>
            <div class="uk-width-expand">
              <P class="uk-margin-remove small">Let’s Talk!</P>
              <P class="uk-margin-remove orange"><a class="orange" href="tel:807-633-2873">807-633-2873</a></P>
            </div>
          </div>
        </div>
      </div>

    </div>
    <div>
      <img class="" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/rebecca-maw-pet-groomer-with-dogs.webp" data-width data-height>
    </div>
  </div>
</div>

<div class="uk-container">
  <div class="uk-child-width-1-3@m uk-grid-large uk-margin-large-top" uk-grid>
    <div>
      <div class="uk-text-right@m uk-text-center">
        <img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/2024-silver-winner-award-1.webp" data-width data-height>
      </div>
    </div>
    <div>
      <div class="uk-text-left@m uk-text-center">
        <img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/2023-platinum-winner-award-1.webp" data-width data-height>
      </div>
    </div>
	<div>
      <div class="uk-text-left@m uk-text-center">
        <img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/2022-gold-winner-award-1.webp" data-width data-height>
      </div>
    </div>
  </div>
</div>


<div class="uk-container uk-container-large uk-margin-xlarge-top">
  <div class="uk-text-center">
    <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
        $args = array(
            'post_type'      => 'beforeandafter',
            'posts_per_page' => 3,

        );

        $loop = new WP_Query($args);

        if ($loop->have_posts()) {
            while ($loop->have_posts()) : $loop->the_post();?>
            <div>
              <div class="custom-image-slider borders" id="customImageSlider<?php echo get_the_ID();?>"> <!-- Unique id -->
                  <?php
                  $image = get_field('after');
                  if( !empty( $image ) ): ?>
                      <img class="slider-before" src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" / alt="afterImage">>
                  <?php endif; ?>

                  <?php
                  $image = get_field('before');
                  if( !empty( $image ) ): ?>
                      <img class="slider-after" src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" / alt="Before">>
                  <?php endif; ?>

                  <div class="slider-handle">
                    <i class="fas fa-caret-left"></i>
                    <i class="fas fa-caret-right"></i>
                  </div>
                </div>
              </div>
            <?php endwhile;
        } else {
            echo __('No products found');
        }

        wp_reset_postdata();
        ?>


    </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>


    <div class="uk-text-center uk-margin-large-top uk-margin-xlarge-bottom"  uk-scrollspy="cls: uk-animation-fade; delay: 300">
      <a href="<?php echo home_url(); ?>/beforeandafter/" class="orange-btn">SEE MORE</a>
    </div>
</div>


<?php include 'template-getintouch.php'; ?>




<div class="uk-container uk-container-large uk-margin-large-top">
  <div class="uk-child-width-1-2@m uk-grid-large" uk-grid>
    <div>
      <img class="walk-icon" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/dog-cat-walk-icon.webp" data-width data-height>
      <h2 class="">Join Our Newsletter!</h2>
      <P>By subscribing, you’ll receive in your email, events and pet care tips, upcoming announcements, delicious pet recipes &amp; more.</P>
    </div>
    <div uk-scrollspy=" cls: uk-animation-fade; delay: 500">
      <?php gravity_form( 1, false, false, false, '', true, 12 ); ?>
    </div>
  </div>

  <h2 class="uk-text-center uk-margin-large-top uk-margin-large-bottom">Latest Posts</h2>


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

    <?php
        $args = array(
            'post_type'      => 'post',
            'posts_per_page' => 3,

        );

        $loop = new WP_Query($args);

        if ($loop->have_posts()) {
            while ($loop->have_posts()) : $loop->the_post();?>
            <div>
              <div class="blog-box">

                <?php if ( has_post_thumbnail() ) { ?>

                    <a class="blog-image" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" style="background-image:url('<?php the_post_thumbnail_url('thumbnail'); ?>')">
                    </a>

                <?php } else { ?>
                <?php } ?>

                <div class="post-date uk-margin-top"><?php echo get_the_date(); ?></div>

                <br>
                <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><h5 class="uk-margin-remove-bottom"><?php the_title(); ?></h5></a>

                <?php html5wp_excerpt('html5wp_index'); ?>

                <P><a href="<?php the_permalink(); ?>">Read More <i class="fa-regular fa-chevron-right uk-margin-small-left"></i></a></P>
              </div>

              </div>
            <?php endwhile;
        } else {
            echo __('No products found');
        }

        wp_reset_postdata();
        ?>

    </div>

    <div class="uk-text-center uk-margin-large-top uk-margin-large-bottom">
      <a href="<?php echo home_url(); ?>/blog/" class="orange-btn">VISIT OUR BLOG</a>
    </div>

</div>


<?php get_footer(); ?>