<?php get_header(); ?>


<div class="uk-cover-container uk-text-center banner uk-margin-large-bottom" uk-scrollspy="cls: uk-animation-fade; delay: 300">
    <canvas class="uk-visible@m" width="" height="400"></canvas>
    <canvas class="uk-hidden@m" width="" height="200"></canvas>

    <?php
    $banner_image = get_field('banner_image');
    if (!empty($banner_image)) : ?>
        <img uk-img data-src="<?php echo esc_url($banner_image['url']); ?>"
             alt="<?php echo esc_attr($banner_image['alt']); ?>"
             width="<?php echo esc_attr($banner_image['width']); ?>"
             height="<?php echo esc_attr($banner_image['height']); ?>"
             uk-cover>
    <?php else : ?>
        <img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/hero-senior-couple-at-pharmacy-holding-hands-1.webp"
             data-width data-height uk-cover>
    <?php endif; ?>

    <div uk-scrollspy="cls: uk-animation-fade; delay: 500" class="uk-position-cover uk-text-center uk-container uk-container-large uk-flex uk-flex-center uk-flex-middle">
        <div>
            <h1 class="white uk-margin-medium-top"><?php the_title(); ?></h1>
        </div>
    </div>
</div>






<div class="uk-container uk-container-large" uk-scrollspy="cls: uk-animation-fade; delay: 300">
	<main role="main">
			<section >

			<?php if (have_posts()): while (have_posts()) : the_post(); ?>

				<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>



					<?php the_content();?>


					<p class="uk-text-right"><?php edit_post_link( __('Edit this page'), '', '', 0, 'post-edit-link uk-text-large uk-padding-small uk-button-large uk-button uk-button-primary' ); ?></p>

				</article>

			<?php endwhile; ?>
			<?php endif; ?>

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


<div class="appointment-banner uk-text-center" uk-scrollspy="cls: uk-animation-fade; delay: 300">
	<div class="uk-container" uk-scrollspy="cls: uk-animation-fade; delay: 500">
		<h2 class="white"><?php echo esc_html( get_field('appointment_title') ); ?></h2>
		<h4 class="white"><?php echo esc_html( get_field('appointment_text') ); ?></h4>

		<a href="<?php echo home_url(); ?>/contact-us" class="uk-margin-medium-top white-btn">Contact Us</a>
	</div>
</div>


<div class="uk-padding">
	<h2 uk-scrollspy="cls: uk-animation-fade; delay: 300" class="uk-text-center uk-margin-large-top">Your <span class="green">Health</span>, Our <span class="green">Priority</span></h2>
  <h3 uk-scrollspy="cls: uk-animation-fade; delay: 300" class="uk-text-center uk-margin-large-bottom"><span class="green">Most services require scheduling in advance.</span> Select a service to find out more.</h3>


  <?php
  // WP_Query to fetch services posts
  $args = array(
      'post_type' => 'service',
      'posts_per_page' => -1, // Fetch all posts
  );
  $services_query = new WP_Query($args);

  if ($services_query->have_posts()) : ?>
  <div class="uk-padding" uk-slider="sets: true; finite: true;">

    <div class="uk-position-relative">

        <div class="uk-slider-container">
            <div class="uk-slider-items service-items uk-child-width-1-1 uk-child-width-1-3@m uk-child-width-1-4@xl uk-text-center" uk-grid uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 300">

              <?php while ($services_query->have_posts()) : $services_query->the_post(); ?>
                  <div>
                    <div class="uk-inline uk-transition-toggle">
                      <div class="uk-inline-clip ">
                          <?php if (has_post_thumbnail()) : ?>
                              <img src="<?php the_post_thumbnail_url('large'); ?>" alt="<?php the_title_attribute(); ?>">
                          <?php endif; ?>

                          <div class="white uk-transition-fade uk-position-cover uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle">
                              <p>Find Out More</p>
                          </div>
                        </div>

                      <h3 class="green"><?php the_title(); ?></h3>
                      <?php if (get_field('short_description')) : ?>
                          <p><?php the_field('short_description'); ?></p>
                      <?php endif; ?>
                      <a class="uk-position-cover" href="<?php the_permalink(); ?>"></a>
                    </div>
                  </div>
              <?php endwhile; ?>
            </div>
        </div>



        <div class="">
            <a class="slidy-nav uk-position-center-left-out uk-position-small" href uk-slider-item="previous"><i class="fa-regular fa-angle-left"></i></a>
            <a class="slidy-nav uk-position-center-right-out uk-position-small" href uk-slider-item="next"><i class="fa-regular fa-angle-right"></i></a>
        </div>

    </div>

  </div>
    <?php
    wp_reset_postdata();
  endif;?>
</div>




<?php get_footer(); ?>
