<?php

defined( 'ABSPATH' ) || exit;
/**
 * Media Slider template part — Swiper-based gallery + video slider.
 *
 * Used by both the default single template and the Elementor widget.
 *
 * Expected variables (via extract in getTemplatePart):
 * @var array  $slides      Slides array from MediaSliderRenderer::buildSlides().
 * @var string $aspect      CSS padding-bottom value (default: '56.25%').
 * @var int    $thumbs_per  Thumbnails per view (default: 5).
 * @var bool   $autoplay    Autoplay enabled (default: false).
 * @var bool   $loop        Loop enabled (default: false).
 *
 * @package ThemeREX\AutoDealer
 */

if ( empty( $slides ) ) {
	echo '<div class="trx-ad-media-slider trx-ad-media-slider--empty">';
	echo '<p>' . esc_html__( 'No media available for this listing.', 'trx-auto-dealer' ) . '</p>';
	echo '</div>';
	return;
}

$aspect     = $aspect ?? '56.25%';
$thumbs_per = $thumbs_per ?? 5;
$autoplay   = $autoplay ?? false;
$loop       = $loop ?? false;

$play_icon = '<span class="trx-ad-ms-play"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></span>';
?>
<div class="trx-ad-media-slider"
	style="--trx-ad-ms-aspect: <?php echo esc_attr( $aspect ); ?>"
	data-thumbs-per="<?php echo esc_attr( (string) $thumbs_per ); ?>"
	data-autoplay="<?php echo $autoplay ? '1' : '0'; ?>"
	data-loop="<?php echo $loop ? '1' : '0'; ?>">

	<!-- Main slider -->
	<div class="swiper trx-ad-ms-main">
		<div class="swiper-wrapper">
			<?php foreach ( $slides as $i => $slide ) : ?>
				<div class="swiper-slide" data-slide-type="<?php echo esc_attr( $slide['type'] ); ?>">
					<?php
					switch ( $slide['type'] ) {
						case 'image':
							printf(
								'<img src="%s" alt="%s" loading="%s" data-trx-ad-lightbox data-full-src="%s">',
								esc_url( $slide['src'] ),
								esc_attr( get_the_title() ),
								0 === $i ? 'eager' : 'lazy',
								esc_url( $slide['full'] ?? $slide['src'] )
							);
							break;

						case 'video-self':
							printf(
								'<video src="%s" controls preload="metadata" playsinline></video>',
								esc_url( $slide['src'] )
							);
							break;

						case 'video-external':
							$embed_url = $slide['embed'] ?? '';
							if ( ! empty( $slide['thumb'] ) ) {
								printf(
									'<img src="%s" alt="" class="trx-ad-ms-video-poster" data-embed="%s">%s',
									esc_url( $slide['thumb'] ),
									esc_url( $embed_url ),
									wp_kses( $play_icon, \ThemeREX\AutoDealer\allowedHtml() )
								);
							} else {
								printf(
									'<iframe src="%s" allowfullscreen loading="lazy"></iframe>',
									esc_url( $embed_url )
								);
							}
							break;
					}
					?>
				</div>
			<?php endforeach; ?>
		</div>
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
	</div>

	<?php if ( count( $slides ) > 1 ) : ?>
	<!-- Thumbs slider -->
	<div class="swiper trx-ad-ms-thumbs">
		<div class="swiper-wrapper">
			<?php foreach ( $slides as $slide ) : ?>
				<div class="swiper-slide">
					<?php
					$thumb_src = $slide['thumb'] ?? '';
					if ( '' === $thumb_src && 'image' === $slide['type'] ) {
						$thumb_src = $slide['src'] ?? '';
					}
					if ( '' !== $thumb_src ) {
						printf( '<img src="%s" alt="" loading="lazy">', esc_url( $thumb_src ) );
					} else {
						echo '<span class="trx-ad-ms-thumb-placeholder"></span>';
					}
					if ( 'image' !== $slide['type'] ) {
						echo wp_kses( $play_icon, \ThemeREX\AutoDealer\allowedHtml() );
					}
					?>
				</div>
			<?php endforeach; ?>
		</div>
	</div>
	<?php endif; ?>

</div>
