<?php
if (!defined('ABSPATH'))
    exit; // Exit if accessed directly
/**
 * Template Image
 * 
 * Access original fields: $args['mod_settings']
 * @author Themify
 */
if (TFCache::start_cache($args['mod_name'], self::$post_id, array('ID' => $args['module_ID']))):

    $chart_vars = apply_filters('themify_chart_init_vars', array(
        'trackColor' => 'rgba(0,0,0,.1)',
        'size' => 150
    ));

    $fields_default = array(
        'mod_title_feature' => '',
        'title_feature' => '',
        'overlap_image_feature' => '',
        'overlap_image_width' => '',
        'overlap_image_height' => '',
        'layout_feature' => 'icon-top',
        'content_feature' => '',
        'circle_percentage_feature' => '',
        'circle_color_feature' => '#de5d5d',
        'circle_stroke_feature' => '',
        'icon_type_feature' => 'icon',
        'image_feature' => '',
        'icon_feature' => '',
        'icon_color_feature' => '#000',
        'icon_bg_feature' => '',
        'circle_size_feature' => 'medium',
        'custom_circle_size_feature' => '',
        'link_feature' => '',
        'feature_download_link'=>'',
        'link_options' => false,
        'lightbox_width' => '',
        'lightbox_height' => '',
        'lightbox_width_unit' => 'px',
        'lightbox_height_unit' => 'px',
        'css_feature' => '',
        'animation_effect' => ''
    );
    $fields_args = wp_parse_args($args['mod_settings'], $fields_default);
	$fields_args['lightbox_width_unit'] = $fields_args['lightbox_width_unit'] ? $fields_args['lightbox_width_unit'] : 'px';
	$fields_args['lightbox_height_unit'] = $fields_args['lightbox_height_unit'] ? $fields_args['lightbox_height_unit'] : 'px';
    unset($args['mod_settings']);
    $animation_effect = self::parse_animation_effect($fields_args['animation_effect'], $fields_args);

    /* configure the chart size based on the option */
    if ($fields_args['circle_size_feature'] === 'large') {
        $chart_vars['size'] = 200;
    } elseif ($fields_args['circle_size_feature'] === 'medium') {
        $chart_vars['size'] = 150;
    } elseif ($fields_args['circle_size_feature'] === 'small') {
        $chart_vars['size'] = 100;
    }else{
	$chart_vars['size'] = isset($fields_args['custom_circle_size_feature']) ? $fields_args['custom_circle_size_feature'] : 150;
    }

    $fields_args['circle_percentage_feature'] = str_replace('%', '', $fields_args['circle_percentage_feature']); // remove % if added by user

    if ($fields_args['circle_percentage_feature'] === '') {
        $chart_class = 'no-chart';
        $fields_args['circle_percentage_feature'] = 0;
        $chart_vars['trackColor'] = 'rgba(0,0,0,0)'; // transparent
    } else {
        if ($fields_args['circle_percentage_feature'] > 100) {
            $fields_args['circle_percentage_feature'] = '100';
        }
        $chart_class = 'with-chart';
    }
    if ('' !== $fields_args['overlap_image_feature']) {
        $chart_class .= ' with-overlay-image';
    }
    $link_type = $link_attr = '';
    if (!empty($fields_args['link_options'])) {
        $link_type = 'regular';
        if ($fields_args['link_options'] === 'lightbox') {
            $link_type = 'lightbox';

            if ($fields_args['lightbox_width'] !== '' || $fields_args['lightbox_height'] !== '') {
                $lightbox_settings = array();
                $lightbox_settings[] = $fields_args['lightbox_width'] !== '' ? $fields_args['lightbox_width'] . $fields_args['lightbox_width_unit'] : '';
                $lightbox_settings[] = $fields_args['lightbox_height'] !== '' ? $fields_args['lightbox_height'] . $fields_args['lightbox_height_unit'] : '';

                $link_attr = sprintf('data-zoom-config="%s"', implode('|', $lightbox_settings));
            }
        } elseif ($fields_args['link_options'] === 'newtab') {
            $link_type = 'newtab';
        }
    }

    $container_class = apply_filters('themify_builder_module_classes', array(
        'module', 'module-' . $args['mod_name'], $args['module_ID'], $chart_class,'layout-' . $fields_args['layout_feature'], 'size-' . $fields_args['circle_size_feature'], $fields_args['css_feature'], $animation_effect
                    ), $args['mod_name'], $args['module_ID'], $fields_args);
	  
    if(!empty($args['element_id'])){
	$container_class[] = 'tb_'.$args['element_id'];
    }
    $container_props = apply_filters('themify_builder_module_container_props', array(
        'class' => implode(' ', $container_class),
            ), $fields_args, $args['mod_name'], $args['module_ID']);
    ?>
    <!-- module feature -->
   <div <?php echo self::get_element_attributes(self::sticky_element_props($container_props,$fields_args)); ?>>
        <?php
        // DYNAMIC STYLE
        $insetColor = $fields_args['icon_bg_feature'] !== '' ? esc_attr(Themify_Builder_Stylesheet::get_rgba_color($fields_args['icon_bg_feature'])) : '';
        $style = '<style type="text/css">';
        if ($fields_args['circle_stroke_feature']) {
            $fields_args['circle_stroke_feature'] = (int) $fields_args['circle_stroke_feature'];
            $circleBackground = $chart_vars['trackColor'];
            $circleColor = esc_attr(Themify_Builder_Stylesheet::get_rgba_color($fields_args['circle_color_feature']));
            $style.=".{$args['module_ID']} .module-feature-chart-html5 {
			    box-shadow: inset 0 0 0 " . $fields_args['circle_stroke_feature'] . "px {$circleBackground};
			}
			.{$args['module_ID']} .chart-loaded.chart-html5-fill {
			    box-shadow: inset 0 0 0 " . $fields_args['circle_stroke_feature'] . "px {$circleColor};
		    }";
        }
        if ($insetColor !== '') {
            $style.=".{$args['module_ID']} .chart-html5-inset {background-color: {$insetColor}}";
        }
        $style.='</style>';
        echo $style;
        ?>

        <?php if ($fields_args['mod_title_feature'] !== ''): ?>
            <?php echo $fields_args['before_title'] . apply_filters('themify_builder_module_title', $fields_args['mod_title_feature'], $fields_args) . $fields_args['after_title']; ?>
        <?php endif; ?>

        <div class="module-feature-image">
            <?php
            if ('' !== $fields_args['overlap_image_feature']) {
                echo themify_get_image('src=' . $fields_args['overlap_image_feature'] . '&w=' . $fields_args['overlap_image_width'] . '&h=' . $fields_args['overlap_image_height'] . '&ignore=true');
            };


			if ( !empty($fields_args['feature_download_link']) && $fields_args['feature_download_link'] == 'yes'  ){
				$link_attr .= ' download';
			}
            ?>

            <?php if ('' !== $fields_args['link_feature']) : ?>
                <a href="<?php echo esc_url($fields_args['link_feature']); ?>" <?php
                if ('lightbox' === $link_type) : echo 'class="themify_lightbox"';
                elseif ('newtab' === $link_type):echo 'target="_blank" rel="noopener"';
                endif;
                ?> <?php echo $link_attr; ?>>
                   <?php endif; ?>

                <div class="module-feature-chart-html5"
                <?php if (!empty($fields_args['circle_percentage_feature'])): ?>
                         data-progress="0"
                         data-progress-end="<?php esc_attr_e($fields_args['circle_percentage_feature']) ?>"
                         data-size="<?php echo $chart_vars['size']; ?>"
                     <?php endif; ?>
                     >
                    <div class="chart-html5-circle">
                        <?php if (!empty($fields_args['circle_percentage_feature'])): ?>
                            <div class="chart-html5-mask chart-html5-full">
                                <div class="chart-html5-fill"></div>
                            </div>
                            <div class="chart-html5-mask chart-html5-half">
                                <div class="chart-html5-fill"></div>
                            </div>
                        <?php endif; ?>
                        <div class="chart-html5-inset<?php if ('icon' === $fields_args['icon_type_feature'] && '' !== $fields_args['icon_feature']) echo ' chart-html5-inset-icon' ?>">

                            <?php if (strpos($fields_args['icon_type_feature'], 'image') !== false) : ?>
				<?php if($fields_args['image_feature'] !== ''):?>
				    <?php $alt = ( $alt_text = Themify_Builder_Model::get_alt_by_url($fields_args['image_feature']) ) ? $alt_text : $fields_args['title_feature']; ?>
				    <img src="<?php echo esc_url($fields_args['image_feature']); ?>" alt="<?php echo esc_attr($alt); ?>" />
				<?php endif; ?>
                            <?php else : ?>
                                <?php if ('' !== $insetColor) : ?><div class="module-feature-background" style="background: <?php echo $insetColor; ?>"></div><?php endif; ?>
                                <?php if ('' !== $fields_args['icon_feature']) : ?><i class="module-feature-icon <?php echo esc_attr(themify_get_icon($fields_args['icon_feature'])); ?>" style="color: <?php echo esc_attr(Themify_Builder_Stylesheet::get_rgba_color($fields_args['icon_color_feature'])); ?>"></i><?php endif; ?>
                            <?php endif; ?>

                        </div>
                    </div>
                </div>

                <?php if ('' !== $fields_args['link_feature']) : ?>
                </a>
            <?php endif; ?>
        </div>

        <div class="module-feature-content">
			<?php
				if ( ''!== $fields_args['title_feature']  ) {
                                    
                                    ?>
                                        <h3 class="module-feature-title"<?php if (Themify_Builder::$frontedit_active && '' === $fields_args['link_feature']):?> contenteditable="false" data-name="title_feature"<?php endif;?>>
                                            <?php if ('' !== $fields_args['link_feature']):?>
                                                <?php if($link_type==='newtab'){
                                                    $link_attr .= ' target="_blank" rel="noopener"';
                                                }
                                                elseif($link_type==='lightbox'){
                                                     $link_attr .= ' class="themify_lightbox"';
                                                }
                                            ?>
                                                <a<?php if(Themify_Builder::$frontedit_active):?> contenteditable="false" data-name="title_feature"<?php endif;?> href="<?php echo esc_url( $fields_args['link_feature'] )?>"<?php echo $link_attr?>><?php echo $fields_args['title_feature'] ?></a>
                                            <?php else:?>
                                                <?php echo $fields_args['title_feature'] ?>
                                            <?php endif;?>
                                        </h3>
                                <?php
				}
			?>
	    <div class="tb_text_wrap<?php if(Themify_Builder::$frontedit_active):?> tb_editor_enable<?php endif;?>"<?php if(Themify_Builder::$frontedit_active):?> contenteditable="false" data-name="content_feature"<?php endif;?>>
		<?php echo $fields_args['content_feature'] !== ''?apply_filters('themify_builder_module_content',$fields_args['content_feature']):''; ?>
	    </div>
	</div>

    </div>
    <!-- /module feature -->
<?php endif; ?>
<?php TFCache::end_cache(); ?>