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

<!-- ======= Hero Section ======= -->
<section id="hero">
	<div id="heroCarousel" data-bs-interval="5000" class="carousel slide carousel-fade" data-bs-ride="carousel">

		<ol class="carousel-indicators" id="hero-carousel-indicators"></ol>

		<div class="carousel-inner" role="listbox">

			<?php
				if ( query_posts( array( 'post_type' => 'slider', 'order' => 'ASC', 'posts_per_page' => -1 ) ) ) {
			?>            

				<?php $i = 1; ?>
				<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

				<?php $image_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full'); ?>    

					<div class="carousel-item <?php if($i == 1){ echo 'active'; } ?>" style="background-image: url(<?php echo $image_url[0]; ?>)">
						<div class="container">
							<p class="text-uppercase"><?php the_title(); ?></p>
							<h2 class="title-text"><?php echo get_the_content(); ?></h2>
							<a href="#about" class="btn-get-started scrollto">Read More</a>
						</div>
					</div>
					
					<?php $i++; ?>

				<?php endwhile; endif; wp_reset_query(); ?>                

			<?php } ?>

		</div>

		<a class="carousel-control-prev" href="#heroCarousel" role="button" data-bs-slide="prev">
			<span class="carousel-control-prev-icon bi bi-chevron-left" aria-hidden="true"></span>
		</a>

		<a class="carousel-control-next" href="#heroCarousel" role="button" data-bs-slide="next">
			<span class="carousel-control-next-icon bi bi-chevron-right" aria-hidden="true"></span>
		</a>

	</div>
</section>
<!-- End Hero -->

<main id="main">

	<!-- ======= About Us Section ======= -->
	<section id="about" class="about">
		<div class="container" data-aos="fade-up">
			<div class="row">
				<div class="col-lg-6 pt-4 pt-lg-0 content" data-aos="fade-right">
					<div class="text-left section-title">
						<h2 class="title-text"><?php echo get_field('about_title'); ?></h2>
					</div>
					<?php echo get_field('about_content'); ?>
				</div>
				<div class="col-lg-6" data-aos="fade-left">
					<img src="<?php echo get_field('about_image'); ?>" class="img-fluid" alt="">
				</div>
			</div>

		</div>
	</section>
	<!-- End About Us Section -->

	<!-- ======= Services Section ======= -->
	<section id="services" class="services">
		<div class="container" data-aos="fade-up">
			<div class="section-title">
				<h2 class="title-text">Our <span>Services</span></h2>
			</div>
			<div class="services-slider swiper" data-aos="fade-up" data-aos-delay="100">
				<div class="swiper-wrapper">

					<?php if( have_rows('service_list') ): ?>
						
						<?php while( have_rows('service_list') ): the_row(); 
							$service_image = get_sub_field('service_image');
							$service_title = get_sub_field('service_title');
							$service_content = get_sub_field('service_content');
						?>
							<div class="swiper-slide">
								<div class="icon-box" data-aos="zoom-in" data-aos-delay="100">
									<div class="icon"><img src="<?php echo $service_image; ?>" width="68" height="68">
										<!-- <i class="fas fa-usd-circle"></i> --></div>
									<div class="icon-box-desc">
										<h4 class="title"><a href="javascript:void(0)"><?php echo $service_title; ?></a></h4>
										<p class="description"><?php echo $service_content; ?></p>
									</div>
								</div>
							</div>
						<?php endwhile; ?>
						
					<?php endif; ?>
					
				</div>

				<div class="swiper-button-prev"></div>
				<div class="swiper-button-next"></div>
				<div class="swiper-pagination"></div>
			</div>

		</div>
	</section>
	<!-- End Services Section -->

	<!-- ======= Contact Section ======= -->
	<section id="contact" class="contact pt-0">
		<div>
			<iframe style="border:0; width: 100%; height: 480px;" src="<?php echo get_field('map', 'option'); ?>"
				frameborder="0" allowfullscreen></iframe>
		</div>

		<div class="container">
			<div class="row contact-detail">
				<div class="col-lg-6">
					<div class="row">
						<div class="col-md-12">
							<div class="info-box">
								<i class="bx bx-map"></i>
								<h3>Our Address</h3>
								<p><?php echo get_field('address', 'option'); ?></p>
							</div>
						</div>
						<div class="col-md-6">
							<div class="info-box mt-4">
								<i class="bx bx-envelope"></i>
								<h3>Email Us</h3>
								<p><?php echo get_field('email_id_one', 'option'); ?><br><?php echo get_field('email_id_two', 'option'); ?></p>
							</div>
						</div>
						<div class="col-md-6">
							<div class="info-box mt-4">
								<i class="bx bx-phone-call"></i>
								<h3>Call Us</h3>
								<p><?php echo get_field('phone_number_one', 'option'); ?><br><?php echo get_field('phone_number_two', 'option'); ?></p>
							</div>
						</div>
					</div>

				</div>

				<div class="col-lg-6">
					<?php echo do_shortcode('[contact-form-7 id="57" title="Contact Us" html_class="php-email-form"]'); ?>
				</div>

			</div>

		</div>
	</section>
	<!-- End Contact Section -->

</main>
<!-- End #main -->

<?php
get_footer();
?>