<?php

defined( 'ABSPATH' ) or die;

use Tech360\Utils as Utils;

add_shortcode( 'services-slider', 'services_slider' );

function services_slider( $atts ) {

	$has_bg = is_array( $atts ) ? in_array( 'has_bg', $atts ) : false;

	$atts = shortcode_atts( [
		'exclude' => ''
	], $atts );

	$query_args = [
		'post_type' => 'service',
		'posts_per_page' => -1,
		'orderby' => 'menu_order',
		'order' => 'ASC'
	];

	if( $atts[ 'exclude' ] ) {
		$query_args[ 'exclude' ] = explode( ' ', Utils::trim_all( $atts[ 'exclude' ] ) );
	}

	// Using get_posts() function
	$items = get_posts( $query_args );

	// If get_posts() there's no need to reset the query
	if( ! empty( $items ) ) {
		ob_start();
		render_services_slider( $items, $has_bg );
		return ob_get_clean();
	}

}

// get_posts() render function
function render_services_slider( $items, $has_bg ) {
?>
<div id="services-slider" class="t360-slider slider-controls-outside">
<?php
foreach( $items as $slide ) {
	$title = apply_filters( 'the_title', $slide->post_title, $slide->ID );
	$link = get_the_permalink( $slide->ID );
	?>
	<div class="px-3 py-4">
		<div class="slide-inner img-border d-md-flex bg-white">
			<?php
			if( has_post_thumbnail( $slide->ID ) ) {
			?>
			<div class="slide-thumb px-0 c-md-5 position-relative">
				<a href="<?php echo $link ?>" title="<?php echo $title ?>">
					<?php echo get_the_post_thumbnail( $slide->ID, 'post-thumbnail', [ 'class' => 'img-md-cover img-fullwidth' ] ) ?>
				</a>
			</div>
			<div class="slide-content c-md-7 p-3 bg-white position-relative">
				<a href="<?php echo $link ?>" title="<?php echo $title ?>">
					<h4><?php echo $title ?></h4>
				</a>
				<?php tech360_excerpt( $slide->ID, 40 ) ?>
				<a class="btn btn-primary mt-4" href="<?php echo $link ?>" title="<?php echo $title ?>">Learn more</a>
			</div>
			<?php
			} else {
			?>
			<div class="slide-content p-3 bg-white">
				<a href="<?php echo $link ?>" title="<?php echo $title ?>">
					<h4><?php echo $title ?></h4>
				</a>
				<?php tech360_excerpt( $slide->ID, 40 ) ?>
				<a class="btn btn-primary mt-4" href="<?php echo $link ?>" title="<?php echo $title ?>">Learn more</a>
			</div>
			<?php
			}
			?>
		</div>
	</div>
	<?php
}
?>
</div>

<script>
	(function($) {
		$('#services-slider').slick({
			infinite: true,
			slidesToShow: 2,
			slidesToScroll: 1,
			autoplay: true,
			autoplaySpeed: 6000,
			speed: 500,
			pauseOnHover: true,
			arrows: false,
			dots: true,
			responsive: [
				{
					breakpoint: 992,
					settings: {
						slidesToShow: 1
					}
				}
			]
		});
	})(jQuery);
</script>

<?php
}
