<?php

use Tech360\Utils as Utils;

$has_advanced_settings = get_field( 'enable_advanced_settings' ) && ( get_field( 'css_classes' ) || get_field( 'css_id' ) );

if( $has_advanced_settings ) {
	if( get_field( 'css_id' ) ) {
		$adv_id = Utils::sluggify( Utils::trim_all( get_field( 'css_id' ) ) );
	} else {
		$adv_id = 'service-' . get_the_ID();
	}
?>

<div id="<?php echo $adv_id ?>" class="<?php echo Utils::trim_all( get_field( 'css_classes' ) ) ?>">

<?php
}
?>
<div class="header-image position-relative" style="<?php Utils::_header_style( get_the_ID() ) ?>">
	<div class="container position-relative z-index-1">
		<div class="row">
			<div class="col-md-6">
				<h1 class="text-light"><?php the_title() ?></h1>
			</div>
		</div>
	</div>
<?php
if( get_field( 'header_overlay_opacity' ) ) {
	$overlay_style = [ 'background-color: #000' ];
	$overlay_style[] = sprintf( 'opacity: %s', ( intval( get_field( 'header_overlay_opacity' ) ) / 100 ) );
?>
	<span class="bg-overlay" style="<?php echo implode( '; ', $overlay_style ) ?>"></span>
<?php
}
?>
</div>

<div id="page-main-content" class="container py-5">
	<div class="row align-items-center">
		<div class="<?php echo has_post_thumbnail() || get_field( 'vehicle_gallery' ) ? 'col-md-6' : 'col' ?>">
			<?php
			if( get_field( 'vehicle_passenger_capacity' ) || get_field( 'vehicle_luggage_capacity' ) ) {
				$specs_class = 'vehicle-specs d-flex';
				if( '' == get_post()->post_content ) {
					$specs_class .= ' justify-content-md-center';
				}
			?>
			<div class="<?php echo $specs_class ?>">
				<?php
				if( get_field( 'vehicle_passenger_capacity' ) ) {
				?>
				<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' ) ?></span>
				</span>
				<?php
				}
				if( get_field( 'vehicle_luggage_capacity' ) ) {
				?>
				<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' ) ?></span>
				</span>
				<?php
				}
				?>
			</div>
			<?php
			}
			if( '' != get_post()->post_content ) {
			?>
			<div class="vehicle-description mt-4">
				<?php
				the_content();
				?>
			</div>
			<?php
			}
			?>
		</div>
		<?php
		if( has_post_thumbnail() || get_field( 'vehicle_gallery' ) ) {
		?>
		<div class="col-md-6 text-center mt-4 mt-md-0">
			<?php
			if( has_post_thumbnail() ) {
			?>
			<div class="vehicle-image">
				<?php the_post_thumbnail( 'post-thumbnail', [ 'class' => 'img-fluid' ] ); ?>
			</div>
			<?php
			}
			if( get_field( 'vehicle_gallery' ) ) {
			?>
			<div class="vehicle-gallery mt-4">
				<?php
				$gallery = explode( ',', get_field( 'vehicle_gallery' ) );
				foreach( $gallery as $img_id ) {
					$thumb = Utils::get_image_by_id( $img_id, false, 'tiny-thumbnail-square' );
					$full_url = Utils::get_image_by_id( $img_id );
					?>
					<a class="gallery-thumb img-border" href="<?php echo $full_url ?>" target="_blank" title="<?php echo $thumb[ 'title' ] ?>" data-lightbox="vehicle-gallery">
						<img src="<?php echo $thumb[ 'src' ] ?>" alt="<?php echo $thumb[ 'alt' ] ?>">
					</a>
					<?php
				}
				?>
			</div>
			<?php
			}
			?>
		</div>
		<?php
		}
		?>
	</div>
</div>

<?php
if( $has_advanced_settings ) {
?>
</div>
<?php
}
?>

<div class="container">
	<div class="row">
		<div class="col-md-8 offset-md-2 text-center">
			<h2 class="section-title"><?php esc_html_e( 'Check out our other vehicles', 'tech360' ) ?></h2>
		</div>
	</div>
	<div class="row mt-4 mb-5">
		<div class="col">
			<?php echo do_shortcode( sprintf( '[vehicles-slider exclude=%s]', get_the_ID() ) ); ?>
		</div>
	</div>
</div>
