<section id="service-section" class="services-area home-services">
	<div class="<?php if(esc_attr(get_theme_mod('soccerclubacademy_feature_section_width','Box Width')) == 'Full Width'){ ?>container-fluid pd-0 <?php } elseif(esc_attr(get_theme_mod('soccerclubacademy_feature_section_width','Box Width')) == 'Box Width'){ ?> container <?php }?>">
		<div class="row justify-content-center text-center">
			<div class="col-md-10 col-lg-8">
				<div class="header-section">
					<?php $Service_heading = get_theme_mod('Service_heading','Our Feature'); ?>

					<h2 class="title"><?php echo apply_filters('soccerclubacademy_service', $Service_heading); ?></h2>
					<!-- <p class="description"><?php esc_html_e( 'Sed at blandit ante. Vivamus feugiat lacus eusus cipit attis, tortor mi aliquam.', 'soccer-club-academy' ); ?></p>					 -->
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-md-4 col-sm-6 col-xs-12">

				<div class="leftside">

					<?php for($p=1; $p<4; $p++) { ?>
			        <?php if( get_theme_mod('Service'.$p,false)) { ?>
			        <?php $querycolumns = new WP_query('page_id='.get_theme_mod('Service'.$p,true)); ?>
			        <?php while( $querycolumns->have_posts() ) : $querycolumns->the_post(); 
			          $image = wp_get_attachment_image_src(get_post_thumbnail_id() , true); ?>
			        <?php 
			          if(has_post_thumbnail()){
			            $img = esc_url($image[0]);
			          }
			          if(empty($image)){
			            $img = get_template_directory_uri().'/assets/images/default.png';
			          }
			        ?>
			        <?php 
						$icon = get_theme_mod('service_icon'.$p,'fa fa-trophy');
			        ?>

					<!-- Start Single Service -->
					<div class="box-space">


						<div class="threebox box<?php echo esc_attr( $p ) ?> <?php if($p % 3 == 0) { echo "last_column"; } ?>">       

						
						<div class="single-service">
							<a href="<?php echo esc_url( get_permalink() ); ?>">
								<div class="row">
									<div class="col-lg-4 col-md-4 col-xs-4 part-padding">
										<div class="part-1">
											<div class="iconBox">
												<div class="imageBox">
							                		<!-- <img  src="<?php echo $img; ?>" alt="<?php the_title(); ?>"> -->
							                		<i class="<?php echo $icon; ?>" aria-hidden="true"></i>
							                	</div>
						                	</div>		                					
										</div>
									</div>
									<div class="col-lg-8 col-md-8 col-xs-8">
										<div class="part-2">
											<h3 class="title"><?php the_title(); ?></h3>
											<p class="description"><?php the_excerpt(); ?></p>
											<!-- <a href="<?php echo esc_url( get_permalink() ); ?>"><?php esc_html_e( 'READ MORE', 'soccer-club-academy' ); ?></a> -->
										</div>
									</div>
								</div>
							</a>
							<div class="clearfix"></div>
						</div>

		              	</div>


					</div>
					<!-- / End Single Service -->

					<?php endwhile;
			           wp_reset_postdata(); ?>
			        <?php } } ?>
			        <div class="clear"></div> 
				
				</div>

			</div>

			<div class="col-md-4 col-sm-6 col-xs-12">
				<div class="imgserviceslider">

					<?php 
			              $center_image = get_theme_mod('center_image');
			              if(!empty($center_image)){
			                echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($center_image).'" class="img-responsive secondry-bg-img" />';
			              }else{
			                echo '<img alt="sign" src="'.get_template_directory_uri().'/assets/images/service_center.jpg"  />';
			              }	
		          	?>
				</div>
			</div>

			<div class="col-md-4 col-sm-6 col-xs-12">

				<div class="rightside">

					<?php for($p=4; $p<7; $p++) { ?>
			        <?php if( get_theme_mod('Service'.$p,false)) { ?>
			        <?php $querycolumns = new WP_query('page_id='.get_theme_mod('Service'.$p,true)); ?>
			        <?php while( $querycolumns->have_posts() ) : $querycolumns->the_post(); 
			          $image = wp_get_attachment_image_src(get_post_thumbnail_id() , true); ?>
			        <?php 
			          if(has_post_thumbnail()){
			            $img = esc_url($image[0]);
			          }
			          if(empty($image)){
			            $img = get_template_directory_uri().'/assets/images/default.png';
			          }
			        ?>

			        <?php 
						$icon = get_theme_mod('service_icon'.$p,'fa fa-trophy');
			        ?>

					<!-- Start Single Service -->
					<div class="box-space">
						<div class="threebox box<?php echo esc_attr( $p ) ?> <?php if($p % 3 == 0) { echo "last_column"; } ?>">   
							<div class="single-service">
								<a href="<?php echo esc_url( get_permalink() ); ?>">
									<div class="row">
										<div class="col-lg-4 col-md-4 col-xs-4 part-padding">
											<div class="part-1">
												<div class="iconBox">
													<div class="imageBox">
														<!-- <img  src="<?php echo $img; ?>" alt="<?php the_title(); ?>"> -->
														<i class="<?php echo $icon; ?>" aria-hidden="true"></i>
													</div>
												</div>			                					
											</div>
										</div>
										<div class="col-lg-8 col-md-8 col-xs-8">
											<div class="part-2">
												<h3 class="title"><?php the_title(); ?></h3>
												<p class="description"><?php the_excerpt(); ?></p>
												<!-- <a href="<?php echo esc_url( get_permalink() ); ?>"><?php esc_html_e( 'READ MORE', 'soccer-club-academy' ); ?></a> -->
											</div>
										</div>
									</div>
								</a>
								<div class="clearfix"></div>
							</div>
		              	</div>
					</div>
					<!-- / End Single Service -->

					<?php endwhile;
			           wp_reset_postdata(); ?>
			        <?php } } ?>
			        <div class="clear"></div> 
				
				</div>

			</div>
		</div>
	
	</div>
</section>
<script>
	const progressElement = document.querySelector('.progress');
const handle = progressElement.querySelector('.handle');
let progressBounds = progressElement.getBoundingClientRect();

let progress = 60;

const drawProgress = () => {
	progressElement.style.setProperty('--progress', `${progress}%`);
	progressElement.setAttribute('aria-valuenow', progress);
	progressBounds = progressElement.getBoundingClientRect();
	const svg = progressElement.querySelector('svg') || document.createElementNS('http://www.w3.org/2000/svg', 'svg');
	const path = progressElement.querySelector('svg path') || document.createElementNS('http://www.w3.org/2000/svg', 'path');
	const animate = progressElement.querySelector('svg path animate') || document.createElementNS('http://www.w3.org/2000/svg', 'animate');
	
	const height = progressBounds.height * 3;
	const width = progressBounds.width * (progress/100);
	const offset = 4;
	
	svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
	svg.setAttribute('width', width);
	path.setAttribute(
		'd',
		`M ${offset} ${height/2}
		${Array.from(Array(Math.ceil(width/height)).keys()).map(i =>
			`Q ${(i * height) + height/2 + offset} ${i % 2 === 0 ? 0 : height},
			${(i + 1) * height + offset} ${height/2}`
		).join(' ')}`
	);
	
	animate.setAttribute('attributeName', 'd');
	animate.setAttribute('dur', '1s');
	animate.setAttribute('repeatCount', 'indefinite');
	animate.setAttribute('values',
		`${/* Step 1 */''}
		M ${offset} ${offset}
		Q ${offset+.0001} ${offset}, ${offset+.0001} ${offset}
		Q ${offset} ${offset}, ${offset} ${offset}
		Q ${offset + height/2} ${height}, ${height + offset} ${height/2}
		${Array.from(Array(Math.ceil(width/height)).keys()).map(i =>
			`Q ${((i + 1) * height) + height/2 + offset} ${i % 2 === 0 ? 0 : height},
			${(i + 2) * height + offset} ${height/2}`
		).join(' ')};
		
		${/* Step 2 */''}
		M ${offset} ${height-offset}
		Q ${offset} ${height-offset}, ${offset} ${height-offset}
		Q ${offset + height/2} 0, ${height + offset} ${height/2}
		Q ${height + offset + height/2} ${height}, ${height*2 + offset} ${height/2}
		${Array.from(Array(Math.ceil(width/height)).keys()).map(i =>
			`Q ${((i + 2) * height) + height/2 + offset} ${i % 2 === 0 ? 0 : height},
			${(i + 3) * height + offset} ${height/2}`
		).join(' ')};
		
		${/* Step 3 */''}
		M ${offset} ${offset}
		Q ${offset + height/2} ${height}, ${height + offset} ${height/2}
		Q ${height + offset + height/2} 0, ${height*2 + offset} ${height/2}
		Q ${(height*2) + offset + height/2} ${height}, ${height*3 + offset} ${height/2}
		${Array.from(Array(Math.ceil(width/height)).keys()).map(i =>
			`Q ${((i + 3) * height) + height/2 + offset} ${i % 2 === 0 ? 0 : height},
			${(i + 4) * height + offset} ${height/2}`
		).join(' ')}`
	);
	
	if (!progressElement.querySelector('svg')) {
		path.appendChild(animate);
		svg.appendChild(path);
		progressElement.prepend(svg);
	}
};

window.addEventListener('resize', drawProgress, true);

const handleMouseMove = e => {
	e.preventDefault();
	let step = Math.round(((e.pageX - progressBounds.left) / progressBounds.width) * 100);
	if (step < 0) step = 0;
	if (step > 100) step = 100;
	progress = Math.abs(step);
	
	drawProgress();
};

handle.addEventListener('mousedown', () => {
	document.addEventListener('mousemove', handleMouseMove);

	document.addEventListener('mouseup', () => {
		document.removeEventListener('mousemove', handleMouseMove);
	}, { once: true });
});

drawProgress();
</script>