<?php if(! defined('ABSPATH')){ return; }
/*
 Name: Screenshots Box
 Description: Create and display a Screenshots Box element
 Class: TH_ScreenshotsBox
 Category: content
 Level: 3
 Scripts: true
*/
/**
 * Class TH_ScreenshotsBox
 *
 * Create and display a Screenshots Box element
 *
 * @package  Kallyas
 * @category Page Builder
 * @author   Team Hogash
 * @since    4.0.0
 */
class TH_ScreenshotsBox extends ZnElements
{
    public static function getName(){
        return __( "Screenshots Box", 'zn_framework' );
    }

    /**
     * Load dependant resources
     */
    function scripts(){
        wp_enqueue_script( 'caroufredsel', THEME_BASE_URI . '/sliders/caroufredsel/jquery.carouFredSel-packed.js', array ( 'jquery' ), THEME_VERSION, true );
    }

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

        $sbStyle = (isset($options['sb_style']) && !empty($options['sb_style']) ? esc_attr($options['sb_style']) : 'kl-style-1');

        if( empty( $options['ssb_imag_single'] ) ) { return; }

        $dataAttribute = '';
        $paginationID = uniqid('th-');
        if('kl-style-2' == $sbStyle){
            $dataAttribute = 'data-carousel-pagination=".'.$paginationID.'"';
        }

        ?>

            <div class="screenshot-box <?php echo $sbStyle ?> fixclear">
                <div class="row">
                    <div class="col-sm-12 col-md-6">
                        <div class="left-side">
                            <h3 class="title"><?php echo $options['ssb_title'];?></h3>
                            <?php
                                if ( ! empty ( $options['ssb_feat_single'] ) && is_array( $options['ssb_feat_single'] ) ) {
                                    echo '<ul class="features">';
                                    foreach ( $options['ssb_feat_single'] as $feat ) {
                                        echo '<li>';
                                        // FEATURE TITLE
                                        if ( ! empty ( $feat['ssb_single_title'] ) ) {
                                            echo '<h4>' . $feat['ssb_single_title'] . '</h4>';
                                        }
                                        // FEATURE DESC
                                        if ( ! empty ( $feat['ssb_single_desc'] ) ) {
                                            echo '<span>' . $feat['ssb_single_desc'] . '</span>';
                                        }
                                        echo '</li>';
                                    }
                                    echo '</ul>';
                                }

                                // BUTTON LINK
                                if ( ! empty ( $options['ssb_link_text'] ) && ! empty ( $options['ssb_button_link']['url'] ) ) {
                                    echo '<a href="' . $options['ssb_button_link']['url'] . '" target="' .
                                         $options['ssb_button_link']['target'] . '" class="btn btn-fullcolor btn-third">' .
                                         $options['ssb_link_text'] . '</a>';
                                }
                            ?>
                        </div>
                    </div>

                    <div class="col-sm-12 col-md-6">
                        <div class="thescreenshot">
                            <div class="controls"><a href="#" class="prev"></a><a href="#" class="next"></a></div>
                            <ul class=" zn_screenshot-carousel" <?php echo $dataAttribute;?>>
                                <?php
                                    if ( ! empty ( $options['ssb_imag_single'] ) && is_array( $options['ssb_imag_single'] ) ) {
                                        foreach ( $options['ssb_imag_single'] as $image ) {
                                            $image = vt_resize( '', $image['ssb_single_screenshoot'], '580', '380', true );
                                            echo '<li><img src="' . $image['url'] . '" width="' . $image['width'] .
                                                 '" height="' . $image['height'] . '" alt=""></li>';
                                        }

                                    }
                                ?>
                            </ul>
                            <?php if(! empty($dataAttribute)) { ?>
                            <div class="<?php echo $paginationID;?>"></div>
                            <?php } ?>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end screenshot-box -->

        <?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()
    {
        $extra_options = array();

// FEATURES SINGLE
        $extra_options['ssb_feat_single'] = array (
            "name"           => __( "Features", 'zn_framework' ),
            "description"    => __( "Here you can add your desired features.", 'zn_framework' ),
            "id"             => "ssb_feat_single",
            "std"            => "",
            "type"           => "group",
            "add_text"       => __( "Feature", 'zn_framework' ),
            "remove_text"    => __( "Feature", 'zn_framework' ),
            "group_sortable" => true,
            "subelements"    => array (
                array (
                    "name"        => __( "Title", 'zn_framework' ),
                    "description" => __( "Please enter the desired title for this
                                            feature.", 'zn_framework' ),
                    "id"          => "ssb_single_title",
                    "std"         => "",
                    "type"        => "textarea"
                ),
                array (
                    "name"        => __( "Description", 'zn_framework' ),
                    "description" => __( "Please enter the desired description for this
                                            feature.", 'zn_framework' ),
                    "id"          => "ssb_single_desc",
                    "std"         => "",
                    "type"        => "textarea"
                )
            )
        );

// IMAGES SINGLE
        $extra_options['ssb_imag_single'] = array (
            "name"           => __( "Images", 'zn_framework' ),
            "description"    => __( "Here you can add your screenshots images.", 'zn_framework' ),
            "id"             => "ssb_imag_single",
            "std"            => "",
            "type"           => "group",
            "add_text"       => __( "Image", 'zn_framework' ),
            "remove_text"    => __( "Image", 'zn_framework' ),
            "group_sortable" => true,
            "subelements"    => array (
                array (
                    "name"        => __( "Image", 'zn_framework' ),
                    "description" => __( "Please choose your desired screenshot.", 'zn_framework' ),
                    "id"          => "ssb_single_screenshoot",
                    "std"         => "",
                    "type"        => "media"
                )
            )
        );
        return array (
                array (
                    "name"        => __( "Title", 'zn_framework' ),
                    "description" => __( "Please enter title for this box.", 'zn_framework' ),
                    "id"          => "ssb_title",
                    "std"         => "",
                    "type"        => "textarea",
                ),
                array (
                    "name"        => __( "Style", 'zn_framework' ),
                    "description" => __( "Please select the style you want to use.", 'zn_framework' ),
                    "id"          => "sb_style",
                    "std"         => "kl-style-1",
                    "type"        => "select",
                    "options"     => array (
                        'kl-style-1'     => __( 'Style 1', 'zn_framework' ),
                        'kl-style-2'    => __( 'Style 2 (since v4.0)', 'zn_framework' )
                    ),
                ),
                array (
                    "name"        => __( "Link Text", 'zn_framework' ),
                    "description" => __( "Please enter a text that will appear as a button
                                        link.", 'zn_framework' ),
                    "id"          => "ssb_link_text",
                    "std"         => "",
                    "type"        => "text",
                ),
                array (
                    "name"        => __( "Button Link", 'zn_framework' ),
                    "description" => __( "Please choose the link you want to use.", 'zn_framework' ),
                    "id"          => "ssb_button_link",
                    "std"         => "",
                    "type"        => "link",
                    "options"     => array (
                        '_blank' => __( "New window", 'zn_framework' ),
                        '_self'  => __( "Same window", 'zn_framework' )
                    )
                ),
                $extra_options['ssb_feat_single'],
                $extra_options['ssb_imag_single'],
        );
    }
}
