<?php

defined( 'ABSPATH' ) or die;

use Tech360\Utils as Utils;

add_shortcode( 'vehicles-slider', 'vehicles_slider' );

function vehicles_slider( $atts ) {

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

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

	$query_args = [
		'post_type' => 'vehicle',
		'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_vehicles_slider( $items, $has_bg );
		return ob_get_clean();
	}

}

// get_posts() render function
function render_vehicles_slider( $items, $has_bg ) {
?>
<div id="vehicles-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 bg-white text-center">
			<?php
			if( has_post_thumbnail( $slide->ID ) ) {
			?>
			<div>
				<a href="<?php echo $link ?>" title="<?php echo $title ?>">
					<?php echo get_the_post_thumbnail( $slide->ID, 'post-thumbnail', [ 'class' => 'img-fluid mx-auto' ] ) ?>
				</a>
			</div>
			<div class="slide-content mt-4 bg-white">
				<a href="<?php echo $link ?>" title="<?php echo $title ?>">
					<h4><?php echo $title ?></h4>
				</a>
				<?php
				if( get_field( 'vehicle_passenger_capacity', $slide->ID ) || get_field( 'vehicle_luggage_capacity', $slide->ID ) ) {
				?>
				<div class="vehicle-specs d-flex mt-4 justify-content-center">
					<?php
					if( get_field( 'vehicle_passenger_capacity', $slide->ID ) ) {
					?>
					<span class="spec passengers d-flex">
						<i class="fas fa-fw fa-user-friends"></i>
						<span class="number"><?php echo get_field( 'vehicle_passenger_capacity', $slide->ID ) ?></span>
					</span>
					<?php
					}
					if( get_field( 'vehicle_luggage_capacity', $slide->ID ) ) {
					?>
					<span class="spec luggage d-flex">
						<i class="fas fa-fw fa-suitcase-rolling"></i>
						<span class="number"><?php echo get_field( 'vehicle_luggage_capacity', $slide->ID ) ?></span>
					</span>
					<?php
					}
					?>
				</div>
				<?php
				}
				?>
				<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 bg-white">
				<a href="<?php echo $link ?>" title="<?php echo $title ?>">
					<h4><?php echo $title ?></h4>
				</a>
				<?php
				if( get_field( 'vehicle_passenger_capacity', $slide->ID ) || get_field( 'vehicle_luggage_capacity', $slide->ID ) ) {
				?>
				<div class="vehicle-specs d-flex mt-4 justify-content-center">
					<?php
					if( get_field( 'vehicle_passenger_capacity', $slide->ID ) ) {
					?>
					<span class="spec passengers d-flex">
						<i class="fas fa-fw fa-user-friends"></i>
						<span class="number"><?php echo get_field( 'vehicle_passenger_capacity', $slide->ID ) ?></span>
					</span>
					<?php
					}
					if( get_field( 'vehicle_luggage_capacity', $slide->ID ) ) {
					?>
					<span class="spec luggage d-flex">
						<i class="fas fa-fw fa-suitcase-rolling"></i>
						<span class="number"><?php echo get_field( 'vehicle_luggage_capacity', $slide->ID ) ?></span>
					</span>
					<?php
					}
					?>
				</div>
				<?php
				}
				?>
				<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($) {
		$('#vehicles-slider').slick({
			infinite: true,
			slidesToShow: 3,
			slidesToScroll: 1,
			autoplay: true,
			autoplaySpeed: 6000,
			speed: 500,
			pauseOnHover: true,
			arrows: false,
			dots: true,
			responsive: [
				{
					breakpoint: 992,
					settings: {
						slidesToShow: 2
					}
				},
				{
					breakpoint: 768,
					settings: {
						slidesToShow: 1
					}
				},
			]
		});
	})(jQuery);
</script>

<?php
}
