<?php

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

$wpcb_gallery_classes = '';
if ( wpcb_get_option( 'wpcb_border_style' ) ) {
	$wpcb_gallery_classes .= ' wpcb-border-' . wpcb_get_option( 'wpcb_border_style' );
}
if ( 'model' === wpcb_get_option( 'wpcb_configuration_visual_type' ) || 'model' === get_post_meta( $wpcb_configuration_id, '_visual_type', true ) ) {
	$wpcb_gallery_classes .= ' wpcb-configurator-gallery--model';
}

$wpcb_gallery_background_id = get_post_meta( $wpcb_configuration_id, '_background', true );
?>
<div class="wpcb-configurator-gallery<?php echo esc_attr( $wpcb_gallery_classes ); ?>"<?php 
	// Echo background url.
	if ( isset( $wpcb_gallery_background_id ) && $wpcb_gallery_background_id ) {
		echo ' style="background-image: url(' . esc_url( wp_get_attachment_image_url( $wpcb_gallery_background_id, 'full' ) ) . ');"';
	}
	?>>
	<div class="wpcb-configurator-gallery-content">
		<?php
		global $wpcb_configuration_id, $wpcb_gallery_slots;

		if ( 'model' === wpcb_get_option( 'wpcb_configuration_visual_type' ) || 'model' === get_post_meta( $wpcb_configuration_id, '_visual_type', true ) ) :
			// 3D model view
			$modelviewer_id = get_post_meta( $wpcb_configuration_id, '_wpcb_model_file', true ) ?: false;
			$modelviewer_url = get_post_meta( $wpcb_configuration_id, '_wpcb_model_file_url', true ) ?: false;
			$modelviewer_src = '';
			if ( $modelviewer_id ) {
				$modelviewer_src = wp_get_attachment_url( $modelviewer_id );
			} else if ( $modelviewer_url ) {
				$modelviewer_src = sanitize_url( $modelviewer_url );
			}

			if ( $modelviewer_src ) :
				$ratio = get_post_meta( $wpcb_configuration_id, '_model_ratio', true );
				$ratio_mobile = get_post_meta( $wpcb_configuration_id, '_model_ratio_mobile', true );

				$class = 'wpcb-configurator-gallery__model';
				if ( $ratio ) {
					$class .= ' ratio-' . $ratio;
				}
				if ( $ratio ) {
					$class .= ' ratio-mobile-' . $ratio_mobile;
				}
				?>
				<div class="<?php echo esc_attr( $class ); ?>">
					<model-viewer 
						id="wpcb-configurator-model-viewer" 
						camera-controls
						src="<?php echo esc_url( $modelviewer_src ); ?>"
						alt="<?php echo esc_attr( get_the_title( get_the_ID() ) ); ?>"
						<?php wpcb_output_modelviewer_attributes( $wpcb_configuration_id ); ?>>
						
						<?php
						/**
						 * Product configurator builder model viewer contents hook.
						 * 
						 */
						do_action( 'wpcb_model_viewer_contents' );
						?>

					</model-viewer>
				</div>
				<?php
			endif;
		 else :
			$wpcb_gallery_slots = carbon_get_post_meta( $wpcb_configuration_id, 'image_views' );

			if ( get_post_meta( $wpcb_configuration_id, '_include_woo_gallery', true ) 
				&& function_exists('is_product') && is_product() ) {
				
				global $product;
				$wpcb_gallery_slots = array();

				$post_thumbnail_id = $product->get_image_id();
				if ( $post_thumbnail_id ) {
					$wpcb_gallery_slots[] = $post_thumbnail_id;
				}

				$attachment_ids = $product->get_gallery_image_ids();
				if ( $attachment_ids ) {
					$wpcb_gallery_slots = array_merge( $wpcb_gallery_slots, $attachment_ids );
				}
			}

			if ( is_array( $wpcb_gallery_slots ) ) :
				?>
				<div class="wpcb-configurator-gallery__slick"<?php echo is_rtl() ? ' dir="rtl"' : ''; ?>>
					<?php 
					foreach ( $wpcb_gallery_slots as $wpcb_slot => $wpcb_image_id ) :
						$sizes = wp_get_attachment_metadata( $wpcb_image_id );
						?>
						<div
							data-slot="<?php echo esc_attr( $wpcb_slot + 1 ); ?>" 
							data-image="<?php echo esc_url( wp_get_attachment_image_url( $wpcb_image_id, 'full' ) ); ?>"
							data-width="<?php echo esc_attr( $sizes['width'] ); ?>"
							data-height="<?php echo esc_attr( $sizes['height'] ); ?>"
							class="wpcb-configurator-gallery__image">
							<canvas id="wpcb-configurator-gallery-canvas-<?php echo esc_attr( $wpcb_configuration_id ); ?>-<?php echo esc_attr( $wpcb_slot + 1 ); ?>"></canvas>
						</div>
						<?php
					endforeach;
					?>
				</div>
				<?php
			endif;
		endif;
		?>

	</div>
</div>
