<?php
/**
 * Template for displaying default element.
 *
 *
 * @author      ThimPress
 * @package     Thim_Builder/Templates
 * @version     1.0.0
 * @author      Thimpress, tuanta
 */

$background_images =  $instance['background_image'] ;
if(is_string($background_images) && !empty($background_images)){
   $background_images = explode(',',$background_images);
}
if($instance['enable_autoplay'] =='yes' || $instance['enable_autoplay'] == true){
    $enable_autoplay = 1;
    
}else{
    $enable_autoplay = 0;
}
$autoplay_speed = isset($instance['autoplay_speed']) ? $instance['autoplay_speed'] : 3000;
?>
<div class="element-main-slider">
    <div class="wrap-element" data-autoplay="<?php echo esc_attr($enable_autoplay) ?>" data-speed="<?php echo esc_attr($autoplay_speed) ?>">
    <?php if(!empty($background_images)){
        foreach($background_images as $bg_image){ 
            
            if(!empty($bg_image['id'])){
                    $image_id = $bg_image['id'];
            }else{
                    $image_id = $bg_image;
            }
    ?>
        
            <div class="inner-banner" style="background-image: url('<?php echo wp_get_attachment_image_url( $image_id,'full' ) ?>');">
                
                <div class="gradien"></div>
            </div>
        
        
    <?php }
    }
    ?>
    </div>
    <div class="bg-title-wrapper">
        <h2 class="bg-title"><?php echo esc_html($instance['bg_title']) ?></h2>
    </div>
    <div class="content-title container">
        <p class="primary-title">
            <?php echo esc_html($instance['primary_title'])?>
        </p>
        <p class="second-title">
            <?php echo esc_html($instance['second_title'])?>
        </p>
    </div> 
</div>