<?php $image = $this->getImage() ?>
<?php $afterImage = $this->getAfterImage() ?>
<div class="content-block mgs-image-block multiple-image">
	<?php if($image!='' && $afterImage!=''): ?>
		<?php $builderHelper = $this->helper('MGS\Fbuilder\Helper\Data'); ?>
		<?php if($builderHelper->isFileExist('images', $image) && $builderHelper->isFileExist('images', $afterImage)): ?>
			<?php $blockId = rand() . time(); ?>
			<div class="image-content <?php echo $this->getMultipleEffect() ?>">
				<span class="span-container<?php if($this->getBoxShadown()): ?> mgs-box-shadow<?php endif ?>" id="before-after<?php echo $blockId ?>">
					<?php if($this->getMultipleEffect()=='fade' && ($builderHelper->getRealUrl($this->getData('url')) !='#')): ?>
						<a href="<?php echo $builderHelper->getRealUrl($this->getData('url'))?>">
					<?php endif ?>
					<img src="<?php echo $builderHelper->getImageUrl('images', $image) ?>" alt="" class="before-image"/>
					<img src="<?php echo $builderHelper->getImageUrl('images', $afterImage) ?>" alt="" class="after-image"/>
					<?php if($this->getMultipleEffect()=='fade' && ($builderHelper->getRealUrl($this->getData('url')) !='#')): ?>
						</a>
					<?php endif ?>
				</span>
			</div>
			
			<?php if($this->getMultipleEffect()=='slide'): ?>
				<script type="text/javascript">
					require([
						'jquery',
						'beforeafter'
					], function(jQuery){
						(function($) {
							$("#before-after<?php echo $blockId ?>").twentytwenty({
								orientation: '<?php echo $this->getSlideType()?>',
								no_overlay: true,
								move_slider_on_hover: false,
								move_with_handle_only: true,
								click_to_move: true
							});
						})(jQuery);
					});
				</script>
			<?php endif ?>
		<?php else: ?>
			<div class="message info empty"><div><?php echo __('File is not exist on server.') ?></div></div>
		<?php endif ?>
	<?php else: ?>
		<div class="message info empty"><div><?php echo __('Have no image to display.') ?></div></div>
	<?php endif ?>
</div>



