<?php if(! defined('ABSPATH')){ return; }
/*
 Name: Stage Image Box
 Description: Create and display an Stage Image Box element. To be used with Icon Boxes.
 Class: TH_StageImageBox
 Category: content
 Level: 3
*/
/**
 * Class TH_StageImageBox
 *
 * Create and display an Stage Image Box element containing an image with tooltips. To be used with Icon Boxes.
 *
 * @package  Kallyas
 * @category Page Builder
 * @author   Team Hogash
 * @since    4.0.0
 */
class TH_StageImageBox extends ZnElements
{
    public static function getName(){
        return __( "Stage Image Box", 'zn_framework' );
    }

    /**
     * Output the inline css to head or after the element in case it is loaded via ajax
     */
    function css(){
        $css = '';
        $uid = $this->data['uid'];

        $tpadding = $this->opt('top_padding') || $this->opt('top_padding') === '0' ? 'padding-top : '.$this->opt('top_padding').'px;' : '';
        $bpadding = $this->opt('bottom_padding') || $this->opt('bottom_padding') === '0' ? 'padding-bottom:'.$this->opt('bottom_padding').'px;' : '';
        $css .= ".$uid .stage-ibx__stage { $tpadding $bpadding }";

        $ibstg_points_color = $this->opt('ibstg_points_color', '#FFFFFF');
        $css .= ".$uid .stage-ibx__point:after {background: ".zn_hex2rgba_str($ibstg_points_color, 60)."; box-shadow: 0 0 0 3px ".$ibstg_points_color."; }
        .$uid .stage-ibx__point:hover:after, .$uid .stage-ibx__point.is-hover:after { box-shadow: 0 0 0 5px ".$ibstg_points_color.", 0 4px 10px #000; } ";

        return $css;
    }

    /**
     * This method is used to display the output of the element.
     *
     * @return void
     */
    function element()
    {
        $uid = $this->data['uid'];

?>

<div class="stage-ibx <?php echo $uid; ?>">

    <?php if($img = $this->opt('ibstg_stageimg')){ ?>
    <div class="stage-ibx__stage">
        <img src="<?php echo $img ?>" alt="<?php echo $this->opt('ibstg_stageimg_alt','') ?>" class="stage-ibx__stage-img img-responsive">
    </div><!-- /.stage-ibx__stage -->
    <?php } ?>

    <div class="clearfix"></div>

</div><!-- /.stage-ibx -->

<?php

    }

    /**
     * This method is used to retrieve the configurable options of the element.
     * @return array The list of options that compose the element and then passed as the argument for the render() function
     */
    function options()
    {
        $uid = $this->data['uid'];

        return array (

            array (
                "name"        => sprintf(__( "ID: %s", 'zn_framework' ), $uid),
                "description" => __( "To be used in combination with Icon Boxes to display associative points. Copy this ID to the iconbox you'll be using.", 'zn_framework' ),
                "id"          => "ibstg_uid",
                "std"         => "",
                "type"        => "zn_title",
                "class"       => "zn_full"
            ),

            array (
                "name"        => __( "Stage Image", 'zn_framework' ),
                "description" => __( "Upload an image that will be placed in the middle", 'zn_framework' ),
                "id"          => "ibstg_stageimg",
                "std"         => "",
                "type"        => "media"
            ),

            array (
                "name"        => __( "Img Alt", 'zn_framework' ),
                "description" => __( "Add an alternative text for the image (SEO purposes)", 'zn_framework' ),
                "id"          => "ibstg_stageimg_alt",
                "std"         => "",
                "type"        => "text"
            ),

            array (
                "name"        => __( "Point Color", 'zn_framework' ),
                "description" => __( "The color of the points.", 'zn_framework' ),
                "id"          => "ibstg_points_color",
                "std"         => "#FFFFFF",
                "type"        => "colorpicker",
            ),

            array(
                'id'          => 'top_padding',
                'name'        => 'Top padding',
                'description' => 'Select the top padding ( in pixels ) for this section.',
                'type'        => 'slider',
                'std'         => '0',
                'class'       => 'zn_full',
                'helpers'     => array(
                    'min' => '0',
                    'max' => '150',
                    'step' => '1'
                ),
                'live' => array(
                    'type'      => 'css',
                    'css_class' => '.'.$uid.' .stage-ibx__stage',
                    'css_rule'  => 'padding-top',
                    'unit'      => 'px'
                )
            ),
            array(
                'id'          => 'bottom_padding',
                'name'        => 'Bottom padding',
                'description' => 'Select the bottom padding ( in pixels ) for this section.',
                'type'        => 'slider',
                'std'         => '0',
                'class'       => 'zn_full',
                'helpers'     => array(
                    'min' => '0',
                    'max' => '150',
                    'step' => '1'
                ),
                'live' => array(
                    'type'      => 'css',
                    'css_class' => '.'.$uid.' .stage-ibx__stage',
                    'css_rule'  => 'padding-bottom',
                    'unit'      => 'px'
                )
            ),

        );
    }
}
