<?php get_header(); ?>
<div class="uk-cover-container ">
    <canvas class="uk-visible@m" width="" height="300"></canvas>
    <canvas class="uk-hidden@m" width="" height="600"></canvas>




<?php if ( has_post_thumbnail() ) { ?>
	<img uk-img data-src="<?php the_post_thumbnail_url('large'); ?>" data-width data-height uk-cover>
      				
      				<?php } else { ?>
						<img src="<?php echo get_template_directory_uri(); ?>/images/*.*">
      				<?php } ?>



	<div class="uk-position-cover  uk-container uk-flex  uk-flex-middle">
       <h1 class="white uk-text-bold"><?php the_title(); ?></h1>
	   
    </div>
</div>
<div class="uk-container">
	<main role="main">
		
			<section class="uk-width-1-1 ">

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

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

				
			
				<?php
if (function_exists('get_field')) {

    $left_image = get_field('left_image');
    $right_heading = get_field('right_heading');
    $right_paragraph = get_field('right_paragraph');
}
?>
<div class="uk-card uk-card-default black uk-margin-xlarge-top uk-margin-large-bottom uk-flex uk-flex-middle uk-grid-small" uk-grid>	
<div class="uk-width-2-5@m uk-padding-remove ">
	 <div class="">
	 <?php if (!empty($left_image)) : ?>
        <div class="left-image">
            <img src="<?php echo esc_url($left_image); ?>" alt="Left Image">
        </div>
    <?php endif; ?>
	</div>
</div>
<div class="uk-width-3-5@m">
<div class="uk-padding-large">
	
<?= get_field('service_icon'); ?>

   

    <?php if (!empty($right_heading)) : ?>
        <div class="right-heading">
            <h2 class="dark-turq uk-margin-remove-top uk-text-bold"><?php echo esc_html($right_heading); ?></h2>
        </div>
    <?php endif; ?>

    <?php if (!empty($right_paragraph)) : ?>
        <div class="right-paragraph">
            <p class="uk-text-bolder"><?php echo esc_html($right_paragraph); ?></p>
        </div>
    <?php endif; ?>
	</div>
</div>
</div>
</div>

<div class="uk-width-1-3@m uk-margin-auto">                

<?php
$has_services = false; // Initialize a flag to check if services exist
$service_list = ''; // Initialize a variable to store the service list content

if (have_rows('service_list')) :
    // Build the service list
    $service_list .= '<ul class="uk-list uk-column-1-2@m">';
    while (have_rows('service_list')) : the_row();
        $included_service = get_sub_field('included_services');
        if ($included_service) {
            $has_services = true; // Set the flag to true if a service is found
            $service_list .= '<li class="uk-grid-small" uk-grid>
                                <div class="uk-width-auto">
                                    <i class="fa-regular green fa-circle-check"></i>
                                </div>
                                <div class="uk-width-expand">
                                    <span>' . esc_html($included_service) . '</span>
                                </div>
                              </li>';
        }
    endwhile;
    $service_list .= '</ul>';
endif;

// Display the heading and service list if there are services
if ($has_services) {
    echo '<h2 class="dark-turq uk-margin-remove-top uk-text-bold uk-text-center uk-margin-large-top">This Service Includes the Following</h2>';
    echo $service_list; // Output the service list
} else {
    // Display fallback message
    echo '<p></p>';
}
?>

</div>


					<?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; ?>
			</div>
			<div class="service-footer uk-margin-remove-bottom">			
				<h2 class="uk-text-center dark-turq uk-width-3-5@m uk-margin-auto">Let us be there with you and assist you with your needs so you can enjoy the special moments in life</h2>
				<div class="uk-width-1-4@m uk-margin-auto">
				<div class="uk-child-width-1-2@m uk-text-center uk-grid-collapse uk-margin-medium-top" uk-grid>
					<div>
						<a class="btn" href="">CONTACT US TODAY</a>
					</div>
					<div>
						<p class="green uk-margin-remove">CALL TO TALK</p>
						<h4 class=" uk-margin-remove"><a class="dark-turq" href="tel:2508636692">(250) 863-6692</a></h4>
					</div>
				</div>
				</div>
			</div>
			</section>
	
	</main>
</div>
<?php get_footer(); ?>
