
<?php
/**
 * Template Tile
 * 
 * Access original fields: $args['mod_settings']
 * @author Themify
 */

defined( 'ABSPATH' ) || exit;

$mod_name = $args['mod_name'];
$element_id = $args['module_ID'];

$field_args = $args['mod_settings']+ array(
    'size' => 'square-large',
    'flip_effect' => 'flip-horizontal',
    'color_front' => 'tb_default_color',
    'color_back' => 'tb_default_color',
    'title_front' => '',
    'title_back' => '',
    'type_front' => 'text',
    'type_back' => 'text',
    'text_front' => '',
    'text_back' => '',
    'button_link_front' => '',
    'button_link_back' => '',
    'button_param_front' => array(),
    'button_param_back' => array(),
    'icon_type_front' => 'icon',
    'icon_type_back' => 'icon',
    'icon_front' => '',
    'icon_back' => '',
    'image_front' => '',
    'image_back' => '',
    'icon_color_front' => '',
    'icon_color_back' => '',
    'background_repeat_front' => '',
    'background_repeat_back' => '',
    'gallery_front' => '',
    'gallery_back' => '',
    'gallery_autoplay_front' => '0',
    'gallery_autoplay_back' => '0',
    'address_map_front' => '',
    'address_map_back' => '',
    'type_map_front' => 'ROADMAP',
    'type_map_back' => 'ROADMAP',
    'zoom_map_front' => 8,
    'zoom_map_back' => 8,
    'scrollwheel_map_front' => 'enable',
    'scrollwheel_map_back' => 'enable',
    'draggable_map_front' => 'enable',
    'draggable_map_back' => 'enable',
    'action_text_front' => '',
    'action_text_back' => '',
    'action_link_front' => '',
    'action_link_back' => '',
    'tile_autoflip' => 0,
    'background_color_front' => '',
    'background_color_back' => '',
    'text_color_front' => '',
    'text_color_back' => '',
    'link_color_front' => '',
    'link_color_back' => '',
    'background_image_front' => '',
    'background_image_front_width' => '',
    'background_image_front_height' => '',
    'background_image_back' => '',
    'background_image_back_width' => '',
    'background_image_back_height' => '',
    'animation_effect' => '',
    'css_class' => ''
);
$sides = array('front', 'back');
if($field_args['flip_effect']==='flip-left'){
	$field_args['flip_effect']='flip-horizontal';
}
$tile_size = Builder_Tiles::get_tile_sizes()[$field_args['size']];

if (( $field_args['type_back'] === 'blank' ) || ( $field_args['type_back'] === 'text' && $field_args['text_back'] === '' && $field_args['background_image_back'] === '' && $field_args['title_back'] == '' ) // enable flip on back text tiles with no text but have background image
	|| ( $field_args['type_back'] === 'button' && $field_args['title_back'] === '' && $field_args['image_back'] === '' && $field_args['icon_back'] === '' ) || ( $field_args['type_back'] === 'gallery' && $field_args['gallery_back'] === '' ) || ( $field_args['type_back'] === 'map' && $field_args['address_map_back'] === '' )
) {
    $class = 'no-flip';
} else {
    $class = 'has-flip';
}

$container_class = apply_filters('themify_builder_module_classes', array(
    'module', 'module-' . $mod_name, $element_id, 'size-' . $field_args['size'], $field_args['flip_effect'], $class, $field_args['css_class'], 'tile-type-front-' . $field_args['type_front'], (in_array( Builder_Tiles::get_option( 'fluid_tiles' ), array( 'yes', 1, '1' ),true ) ? 'fluid-tile' : ''),'tf_mw'
), $mod_name, $element_id, $field_args);

if(!empty($fields_args['global_styles']) && Themify_Builder::$frontedit_active===false){
    $container_class[] = $fields_args['global_styles'];
}
$container_class[]='tf_opacity';
$out_effect = array(
    'fadeInUp' => 'fadeOutDown',
    'fadeIn' => 'fadeOut',
    'fadeInLeft' => 'fadeOutLeft',
    'fadeInRight' => 'fadeOutRight',
    'fadeInDown' => 'fadeOutUp',
    'zoomInUp' => 'zoomOutDown',
    'zoomInLeft' => 'zoomOutLeft',
    'zoomInRight' => 'zoomOutRight',
    'zoomInDown' => 'zoomOutUp',
);

$flip_button_enabled = apply_filters('builder_tiles_enable_flip_button', true);
$container_props = apply_filters('themify_builder_module_container_props', self::parse_animation_effect($field_args, array(
	'id' => $element_id,
	'class' => implode(' ',$container_class),
)), $field_args, $mod_name, $element_id);

$isLatest=false;
if ( Themify_Builder::$frontedit_active === false ) {
    $container_props['data-lazy'] = 1;
     if(method_exists('Themify_Enqueue_Assets','preFetchAnimtion')){
		$isLatest=true;
		Themify_Enqueue_Assets::preFetchAnimtion(true);
		if($field_args['flip_effect']==='flip-horizontal' || $field_args['flip_effect']==='flip-vertical'){
			Themify_Builder_Model::loadCssModules('bt_'.str_replace('-','_',$field_args['flip_effect']),Builder_Tiles::$url.'assets/modules/'.$field_args['flip_effect'].'.css',Builder_Tiles::get_version());
		}
    }
}
$styles = array();
foreach( $sides as $side ){
    $type = $field_args['type_' . $side];
    if( $type === 'text' || $type==='button') {
	    $k = '.module.' . $element_id. ' .tile-' . $side;
		$styles[$k]=[];
	    if( $field_args['background_color_' . $side] !== '' ) {
		    $styles[$k][] = 'background-color:' . Themify_Builder_Stylesheet::get_rgba_color( $field_args['background_color_' . $side]) . ';';
	    }
	    if( $field_args['text_color_' . $side] !== '' ) {
			$color = Themify_Builder_Stylesheet::get_rgba_color( $field_args['text_color_' . $side] );
			$styles[$k][] = 'color:' . $color;
			$styles[$k.' .tile-title'][] = 'color:' . $color;
	    }
	    if( $field_args['background_image_' . $side] !== '' ) {
			$w = !empty($field_args['background_image_' . $side . '_width'])? $field_args['background_image_' . $side . '_width'] : $tile_size['width'];
			$h =  !empty($field_args['background_image_' . $side . '_height'])?$field_args['background_image_' . $side . '_height']:$tile_size['height'];
			$image = themify_get_image( array('src'=>$field_args['background_image_' . $side],'w'=>$w, 'h'=>$h,'urlonly'=>true ));

			if (!empty($image)) {
				$styles[$k][] = 'background-image:url("' . $image . '")';
			}
	    }
	    if( $field_args['link_color_' . $side] !== '' ) {
		    $styles[$k.' a'][] = 'color:' . Themify_Builder_Stylesheet::get_rgba_color( $field_args['link_color_' . $side] );
	    }
		if(empty($styles[$k])){
			unset($styles[$k]);
		}
    } 
    if($isLatest===true){
		Themify_Builder_Model::load_color_css($field_args['color_' . $side]);
    }
}
?>

<!-- module tile -->
<div <?php echo self::get_element_attributes(self::sticky_element_props($container_props,$field_args)); ?> data-auto-flip="<?php  echo (int)$field_args['tile_autoflip']; ?>" data-in-effect="<?php echo $field_args['flip_effect']; ?>" <?php if(isset($out_effect[$field_args['flip_effect']])):?> data-out-effect="<?php echo $out_effect[$field_args['flip_effect']]; ?>"<?php endif;?>>
	<?php $container_props=$out_effect=$container_class=$args=null;?>
	<?php do_action( 'themify_builder_before_template_content_render' ); ?>
	<div class="tile-flip-box-wrap tf_abs tf_box tf_overflow tf_w tf_h">
		
		<?php if( ! empty( $styles ) ) : ?>
			<style>
				<?php foreach( $styles as $selector => $st ) {
					if( ! empty( $st ) ){
					    echo $selector,'{',implode( ';',( array ) $st ),'}';
					}
				} ?>
			</style>
		<?php endif;?>
		
		<?php 
		unset($styles);
		foreach( $sides as $side ) :
			$type = $field_args['type_' . $side];
		
			if($field_args['color_' . $side]==='default'){
				$field_args['color_' . $side]='tb_default_color';
			}
			if($isLatest===true && ($type==='button' || $type==='map')){
			    Themify_Builder_Model::loadCssModules('bt_'.$type,Builder_Tiles::$url.'assets/modules/types/'.$type.'.css',Builder_Tiles::get_version());
			}
			?>
			<div class="tile-<?php echo $side; ?> tile-type-<?php echo $type; ?> ui <?php echo $field_args['color_' . $side]; ?> tf_box tf_w tf_h tf_overflow<?php if($side==='back'):?> tf_abs tf_hidden<?php else:?> tf_rel<?php endif;?> tf_scrollbar">
				<div class="tile-inner tf_box">
					<?php if( $type === 'text' ) : ?>
						<?php if( $field_args['title_' . $side] !== '' ) : ?>
							<h4 class="tile-title"><?php echo wp_kses_post( $field_args['title_' . $side] ); ?></h4>
						<?php endif; ?>

						<div class="tile-content">
							<?php echo apply_filters( 'themify_builder_module_content', $field_args['text_' . $side] ); ?>
						</div>
					<?php elseif( $type === 'button' ) :
						if( $field_args['button_link_' . $side] !== '' ) :?>
							<?php 
							$params_side = isset( $field_args['button_link_params_' . $side] )? explode('|', $field_args['button_link_params_'.$side]) : array();
							$inLightbox=in_array( 'lightbox', $params_side, true );?>
							<a href="<?php echo $inLightbox===true?esc_url( $field_args['button_link_' . $side] ):esc_attr( $field_args['button_link_' . $side] )?>"<?php if($inLightbox===true):?> class="themify_lightbox"<?php elseif(in_array( 'newtab', $params_side, true )):?> target="_blank"<?php endif;?>>
						<?php endif;?>

						<?php if( '' !== $field_args['title_' . $side] ) : ?>
							<h4 class="tile-title"><?php echo wp_kses_post( $field_args['title_' . $side] ); ?></h4>
						<?php endif; ?>
						<?php if(($field_args['icon_type_'.$side] === 'icon' && $field_args['icon_'.$side] !== '') || ($field_args['icon_type_' . $side] === 'image' && $field_args['image_'.$side] !== '')) : ?>
						    <?php 
						    if($isLatest===true){
								Themify_Builder_Model::loadCssModules('bt_tile_icon',Builder_Tiles::$url.'assets/modules/tile-icon.css',Builder_Tiles::get_version());
						    }
						    ?>
						    <?php if( $field_args['icon_type_'.$side] === 'icon') : ?>
							    <span class="tile-icon"<?php if($field_args['icon_color_'.$side]!==''):?> style="color:<?php echo Themify_Builder_Stylesheet::get_rgba_color($field_args['icon_color_'.$side])?>"<?php endif;?>><?php echo themify_get_icon($field_args["icon_{$side}"]); ?></span>
						    <?php else: ?>
							    <img src="<?php echo esc_url($field_args['image_'.$side]); ?>" alt="<?php esc_attr_e($field_args['title_' . $side]); ?>" class="tile-icon">				    
						    <?php endif; ?>
						<?php endif; ?>
						<?php if( $field_args['button_link_' . $side] !== '' ):?>
							</a>
						<?php endif; ?>
					<?php elseif( $type === 'gallery' ) :
						$images = themify_get_gallery_shortcode( $field_args['gallery_' . $side] );
						
						if( !empty($images)) : ?>
						<?php 
							$thumbs=array();
							if(empty($field_args['gallery_autoplay_'.$side])){
								$field_args['gallery_autoplay_'.$side]='off';
							}
						?>
							<div class="twg-wrap tf_rel tf_overflow tf_h">
								<div class="tf_swiper-container tf_carousel tf_overflow tf_rel tf_h" data-lazy="1" data-css_url="<?php echo Builder_Tiles::$url?>assets/modules/types/gallery" data-auto="<?php echo $field_args['gallery_autoplay_'.$side]; ?>" data-effect="fade" data-thumbs="<?php echo $element_id?>" data-speed="1000" data-auto-reverse="1" data-slider_nav="0" data-pager="0">
									<div class="tf_swiper-wrapper tf_lazy tf_rel tf_w tf_h">
											<?php foreach( $images as $image ) :
											$full = wp_get_attachment_url( $image->ID);
											if(empty($full)){
												continue;
											}
											$alt = ( $alt_text = get_post_meta( $image->ID, '_wp_attachment_image_alt', true ) ) ? $alt_text : $image->post_name;
											$thumbs[]= $image->ID;
											?>

											<div class="tf_swiper-slide twg-holder tf_lazy">
												<?php echo themify_get_image(array('src'=>$full,'alt'=>$alt,'is_slider'=>true));?>
											</div>
										<?php endforeach; ?>
									</div>
								</div>
								<?php $count=count($thumbs);?>
								<div class="tf_swiper-container tf_carousel bt_thumbs tf_abs_b tf_overflow tf_w" data-lazy="1" data-wrapvar="0" data-height="auto" data-auto="<?php echo $field_args['gallery_autoplay_'.$side]; ?>" data-speed="1000" data-visible="<?php echo 12 >= $count ? $count : 12 ?>" data-auto-reverse="1" data-slider_nav="0" data-pager="0" data-thumbs-id="<?php echo $element_id?>">
									<div class="tf_swiper-wrapper tf_lazy tf_rel tf_w">
									<?php foreach ( $thumbs as $thumb ) : ?>
										<div class="tf_swiper-slide twg-holder tf_lazy">
											<?php echo themify_get_image(array('src'=>$thumb,'w'=>33,'h'=>33,'is_slider'=>true))?>
										</div>
									<?php endforeach; ?>
									</div>
								</div>
							</div>
						<?php endif; ?>
					<?php elseif( $type === 'map' && $field_args['address_map_' . $side]!=='') :
						$field_args['address_map_' . $side] = preg_replace( '/\s+/', ' ', trim( $field_args['address_map_' . $side] ) );?>
						<div class="themify_map map-container tf_h"
							<?php if(Themify_Builder::$frontedit_active === false):?>data-lazy="1"<?php endif;?>
							data-address="<?php esc_attr_e( $field_args['address_map_' . $side] ); ?>"
							data-type="<?php  esc_attr_e( $field_args['type_map_' . $side] ); ?>"
							data-zoom="<?php esc_attr_e( $field_args['zoom_map_' . $side] ); ?>"
							data-scroll="<?php echo $field_args['scrollwheel_map_' . $side] === 'enable'?1:''; ?>"
							data-drag="<?php echo $field_args['draggable_map_' . $side] === 'enable'?1:''; ?>"
						></div>
					<?php endif; ?>

					<?php if($field_args['action_link_'.$side]!=='' && ( $type === 'text' || $type === 'gallery' )) :
						    $params_side = isset( $field_args['action_param_' . $side]) ? explode('|', $field_args['action_param_'.$side]) : array();
							$inLightbox=in_array( 'lightbox', $params_side, true );
						    if($isLatest===true){
								Themify_Builder_Model::loadCssModules('bt_action_button',Builder_Tiles::$url.'assets/modules/action-button.css',Builder_Tiles::get_version());
						    }
						?>
						<a href="<?php echo $inLightbox===true ? esc_url($field_args['action_link_'.$side]) : esc_attr($field_args['action_link_'.$side]); ?>" class="action-button<?php if( $inLightbox===true ):?> themify_lightbox<?php endif;?>"<?php if($inLightbox===false && in_array( 'newtab', $params_side, true )):?> target="_blank"<?php endif;?>><span></span><?php echo $field_args['action_text_' . $side]; ?></a>
					<?php endif; ?>
					<?php if ($flip_button_enabled===true):?>
						<a href="#" class="tile-flip-back-button tf_hide"></a>
					<?php endif;?>
				</div>
			</div><!-- .tile-<?php echo $side; ?> -->

		<?php endforeach; ?>
	</div>

	<?php do_action('themify_builder_after_template_content_render'); ?>
</div><!-- /module tile -->