<?php
/*
    VC basic extensions
    integrated in core theme
*/
namespace vc;

if( ! defined( 'ABSPATH' ) ) exit;

new helper_shortcode;
class helper_shortcode {

    /*
        General constructor
    */
    public function __construct() {

        // // return if vc is not installed  
        // if (!helper::is_active_plugin('js_composer/js_composer.php')) return;  
        if (is_admin()) return;   

        // helper shortcodes
        add_shortcode( 'preview_header', array($this, 'preview_header_sc') );
        add_shortcode( 'branding_typo', array($this, 'preview_fonts_sc') );
        add_shortcode( 'branding_colors', array($this, 'preview_colors_sc') );
        add_shortcode( 'preview_fonts', array($this, 'preview_fonts_sc') );
        add_shortcode( 'preview_colors', array($this, 'preview_colors_sc') );
        add_shortcode( 'preview_body', array($this, 'preview_body_sc') );
        add_shortcode( 'preview_headlines', array($this, 'preview_headlines_sc') );
        add_shortcode( 'preview_buttons', array($this, 'preview_buttons_sc') );
        add_shortcode( 'preview_links', array($this, 'preview_links_sc') );
        add_shortcode( 'preview_forms', array($this, 'preview_forms_sc') );
        add_shortcode( 'preview_messages', array($this, 'preview_messages_sc') );
        add_shortcode( 'preview_tables', array($this, 'preview_tables_sc') );
        add_shortcode( 'preview_usage', array($this, 'preview_usage_sc') );
        add_shortcode( 'preview_grid', array($this, 'preview_grid_sc') );
        add_shortcode( 'preview_dev', array($this, 'preview_dev_sc') );
        
    }
    
    /*
        Customizer Preview Page 
    */
    // helper functions
    public function make_empty_space ($size = 'M') {
        
        $h = '50px';
        if ($size === 'XS') $h = '20px';
        else if ($size === 'S') $h = '50px';
        else if ($size === 'M') $h = '80px';
        else if ($size === 'L') $h = '120px';
        else if ($size === 'XL') $h = '200px';
        else if (!empty($size) && is_numeric($size)) $h = $size.'px';
        
        $sc = '[vc_blank_space height="'.$h.'" height_sm="60%" height_md="70%" height_lg="80%"]';
        return do_shortcode($sc);
    }
    public function build_preview_section ($content='', $anchor='', $has_button=false) {
        $b = ($has_button === true) ? $this->make_empty_space('XS').$this->button_usage() : "";
        return "<div class='default_page_section' id='anchor_$anchor'>".
                        $this->make_empty_space().
                        "<div class='vc_row'>".
                            $content.
                        "</div>".
                        $b.
                        $this->make_empty_space().
                    "</div>";
    }
    public function button_usage ($anchor='usage', $text=null, $dir='down') {
        $text = $text === null ? __("zum Anwendungsbeispiel", 'core') : $text;
        return "<div class='vc_row right'><a class='shortlink' onclick='nav.scrollDown(anchor_$anchor)'>$text<span style='margin-left:5px;font-size:100%' class='arrow_$dir'></span></a></div>";
    }
    public static function vc_encode($string) {
        return str_replace("+", "%20", urlencode($string));
    }

    // render shortcodes
    public function preview_header_sc($atts, $content=null) {
        
        $sections = array(
            array(
                'anchor' => 'fonts',
                'name' => __('Schriften', 'core'),
            ),
            array(
                'anchor' => 'colors',
                'name' => __('Farben', 'core'),
            ),
            array(
                'anchor' => 'body',
                'name' => __('Body', 'core'),
            ),
            array(
                'anchor' => 'headlines',
                'name' => __('Überschriften', 'core'),
            ),
            array(
                'anchor' => 'buttons',
                'name' => __('Buttons', 'core'),
            ),
            array(
                'anchor' => 'links',
                'name' => _x('Links', 'web', 'core'),
            ),
            array(
                'anchor' => 'forms',
                'name' => __('Formularfelder', 'core'),
            ),
            array(
                'anchor' => 'messages',
                'name' => __('Benachrichtigungen', 'core'),
            ),
            array(
                'anchor' => 'tables',
                'name' => __('Tabellen', 'core'),
            ),
            array(
                'anchor' => 'usage',
                'name' => __('Anwendungsbeispiel', 'core'),
            ),
            array(
                'anchor' => 'grid',
                'name' => __('Seitenraster', 'core'),
            ),
        );
        
        $shortlinks = "<div class='vc_row shortlinks'>";
        foreach($sections as $section) {
            $shortlinks .= "<a class='shortlink' onclick='nav.scrollDown(anchor_".$section['anchor'].")'>".$section['name']."</a><span class='sep'>&nbsp;| </span>";
        }
        $shortlinks .= "</div>";
        
        
        $button1 = '<div class="animate_fast button" onclick="nav.scrollDown(anchor_fonts)">'.__('Los geht’s', 'core').'<span style="margin-left:10px;font-size:100%" class="arrow_down"></span></div>';
        $button2 = '<div class="animate_fast button sec" onclick="history.back()" style="margin-right:16px;"><span>'.__('Tutorial', 'core').'</span><span style="margin-left:10px;font-size:100%" class="arrow_right-up"></span></div>';
        
        $content = "<h6>GREYD.SUITE</h6>
                    <h1>".__('Aufbauseite', 'core')."</h1>
                    <p style='max-width:700px;'>".__('Diese Seite hilft dir beim Aufbau deines Designs. Hier werden alle zu gestaltenden Elemente exemplarisch dargestellt.', 'core')."</p>".
                    $this->make_empty_space('XS').
                    //$button2.
                    $button1.
                    $this->make_empty_space().
                    $shortlinks;
        
        return $this->build_preview_section($content, 'header');
        
    }
    public function preview_fonts_sc($atts, $content=null) {
        // $content = do_shortcode($content);
        // if (!get_theme_mod('enable_fontconcept', \processor::$root['FNTenable']['default'])) return;
        
        $fonts = $styles = array();
        $styles[1] = $styles[2] = $styles[3] = "";
        $fonts[1] = \processor::$mods['--fontFamily1'];
        $fonts[2] = \processor::$mods['--fontFamily2'];
        $fonts[3] = \processor::$mods['--fontFamily3'];
        if ($fonts[1] == "") {
            $fonts[1] = _x("Keine Auswahl", 'small', 'core');
            $styles[1] = "display: none;";
        }
        if ($fonts[2] == "") {
            $fonts[2] = _x("Keine Auswahl", 'small', 'core');
            $styles[2] = "display: none;";
        }
        if ($fonts[3] == "") {
            $fonts[3] = _x("Keine Auswahl", 'small', 'core');
            $styles[3] = "display: none;";
        }
        
        $content = '';
        for ($i = 1; $i < 4; $i++) {
            
            $content .= "<div class='vc_column_container vc_col-sm-4 branding_typo' id='branding_typo".$i."_wrap'>
                            <div class='branding_typo".$i."' style='".$styles[$i]."'>
                                <h3><span id='branding_typo".$i."_name'>".$fonts[$i]."</span></h3>
                                <div>
                                    <p>
                                        <span>ABCDEFGHIJKLMNOPQRSTUVWXYZ</span>
                                        <span>abcdefghijklmnopqrstuvwxyz</span>
                                        <span>1234567890</span>
                                    </p>
                                    <p>
                                        <small style='font-weight:100'>100 - Extra Thin</small><br>
                                        <small style='font-weight:200'>200 - Thin</small><br>
                                        <small style='font-weight:300'>300 - Light</small><br>
                                        <small style='font-weight:400'>400 - Regular</small><br>
                                        <small style='font-weight:500'>500 - Medium</small><br>
                                        <small style='font-weight:600'>600 - Semi-bold</small><br>
                                        <small style='font-weight:700'>700 - Bold</small><br>
                                        <small style='font-weight:800'>800 - Fat</small><br>
                                        <small style='font-weight:900'>900 - Extra-Fat</small><br>
                                    </p>
                                </div>
                            </div>".
                        $this->make_empty_space('XS').
                    "</div>";
            
        }
        
        return $this->build_preview_section($content, 'fonts');
        
    }
    public function preview_colors_sc($atts, $content=null) {
        // $content = do_shortcode($content);

        $color11 = \processor::$mods['--color11']; //get_theme_mod('color11', \processor::$root['--color11']['default']);
        $color12 = \processor::$mods['--color12']; //get_theme_mod('color12', \processor::$root['--color12']['default']);
        $color13 = \processor::$mods['--color13']; //get_theme_mod('color13', \processor::$root['--color13']['default']);
        $color21 = \processor::$mods['--color21']; //get_theme_mod('color21', \processor::$root['--color21']['default']);
        $color22 = \processor::$mods['--color22']; //get_theme_mod('color22', \processor::$root['--color22']['default']);
        $color23 = \processor::$mods['--color23']; //get_theme_mod('color23', \processor::$root['--color23']['default']);
        $color31 = \processor::$mods['--color31']; //get_theme_mod('color31', \processor::$root['--color31']['default']);
        $color32 = \processor::$mods['--color32']; //get_theme_mod('color32', \processor::$root['--color32']['default']);
        $color33 = \processor::$mods['--color33']; //get_theme_mod('color33', \processor::$root['--color33']['default']);
        $color41 = \processor::$mods['--color41']; //get_theme_mod('color41', \processor::$root['--color41']['default']);
        $color42 = \processor::$mods['--color42']; //get_theme_mod('color42', \processor::$root['--color42']['default']);
        $color43 = \processor::$mods['--color43']; //get_theme_mod('color43', \processor::$root['--color43']['default']);
        $color51 = \processor::$mods['--color51']; //get_theme_mod('color51', \processor::$root['--color51']['default']);
        $color52 = \processor::$mods['--color52']; //get_theme_mod('color52', \processor::$root['--color52']['default']);
        $color53 = \processor::$mods['--color53']; //get_theme_mod('color53', \processor::$root['--color53']['default']);
        $color61 = \processor::$mods['--color61']; //get_theme_mod('color61', \processor::$root['--color61']['default']);
        $color62 = \processor::$mods['--color62']; //get_theme_mod('color62', \processor::$root['--color62']['default']);
        $color63 = \processor::$mods['--color63']; //get_theme_mod('color63', \processor::$root['--color63']['default']);
        
        $content = "<div class='branding_colors'>
                        <div class='branding_color color11'><div></div><p><strong>".__('Primär', 'core')."</strong><br><span class='color_code'>".$color11."</span></p></div>
                        <div class='branding_color color12'><div></div><p><strong>".__('Sekundär', 'core')."</strong><br><span class='color_code'>".$color12."</span></p></div>
                        <div class='branding_color color13'><div></div><p><strong>".__('Alternative', 'core')."</strong><br><span class='color_code'>".$color13."</span></p></div>

                        <div class='branding_color color31'><div></div><p><strong>".__('Sehr dunkel', 'core')."</strong><br><span class='color_code'>".$color31."</span></p></div>
                        <div class='branding_color color21'><div></div><p><strong>".__('Dunkel', 'core')."</strong><br><span class='color_code'>".$color21."</span></p></div>
                        <div class='branding_color color32'><div></div><p><strong>".__('Leicht dunkel', 'core')."</strong><br><span class='color_code'>".$color32."</span></p></div>
                        <div class='branding_color color22'><div></div><p><strong>".__('Leicht hell', 'core')."</strong><br><span class='color_code'>".$color22."</span></p></div>
                        <div class='branding_color color33'><div></div><p><strong>".__('Hell', 'core')."</strong><br><span class='color_code'>".$color33."</span></p></div>
                        <div class='branding_color color23'><div></div><p><strong>".__('Sehr hell', 'core')."</strong><br><span class='color_code'>".$color23."</div>
                    </div>
                    <div class='branding_colors'>
                        <div class='branding_color color61'><div></div><p><strong>".__('Schwarz', 'core')."</strong><br><span class='color_code'>".$color61."</span></p></div>
                        <div class='branding_color color62'><div></div><p><strong>".__('Weiß', 'core')."</strong><br><span class='color_code'>".$color62."</span></p></div>
                    </div>
                    <a id='anchor_colors_symbol'></a>".
                    $this->make_empty_space().
                    "<div class='branding_colors'>
                        <div class='branding_color color41'><div></div><p><strong>".__('Hinweis dunkel', 'core')."</strong><br><span class='color_code'>".$color41."</span></p></div>
                        <div class='branding_color color51'><div></div><p><strong>".__('Hinweis hell', 'core')."</strong><br><span class='color_code'>".$color51."</span></p></div>
                    </div>
                    <div class='branding_colors'>
                        <div class='branding_color color42'><div></div><p><strong>".__('Erfolg dunkel', 'core')."</strong><br><span class='color_code'>".$color42."</span></p></div>
                        <div class='branding_color color52'><div></div><p><strong>".__('Erfolg hell', 'core')."</strong><br><span class='color_code'>".$color52."</span></p></div>
                    </div>
                    <div class='branding_colors'>
                        <div class='branding_color color43'><div></div><p><strong>".__('Fehler dunkel', 'core')."</strong><br><span class='color_code'>".$color43."</span></p></div>
                        <div class='branding_color color53'><div></div><p><strong>".__('Fehler hell', 'core')."</strong><br><span class='color_code'>".$color53."</span></p></div>
                    </div>".
                    $this->button_usage('messages', __('zu den Benachrichtigungen', 'core'));
        
        return $this->build_preview_section($content, 'colors');
    }
    public function preview_body_sc($atts, $content=null) {
        
        $font_size      = str_replace('px', '', \processor::$mods['--fontSize']); //get_theme_mod('font_size', \processor::$root['--fontSize']['default']);
        $font_size_lg   = str_replace('px', '', \processor::$mods['--fontSizeLG']); //get_theme_mod('font_size_lg', \processor::$root['--fontSizeLG']['default']);
        $font_size_md   = str_replace('px', '', \processor::$mods['--fontSizeMD']); //get_theme_mod('font_size_md', \processor::$root['--fontSizeMD']['default']);
        $font_size_sm   = str_replace('px', '', \processor::$mods['--fontSizeSM']); //get_theme_mod('font_size_sm', \processor::$root['--fontSizeSM']['default']);
        $font_size_xs   = str_replace('px', '', \processor::$mods['--fontSizeXS']); //get_theme_mod('font_size_xs', \processor::$root['--fontSizeXS']['default']);
        
        // get list-styles and replace wording
        $UlistStyle = \processor::$mods['--UlistStyle']; //get_theme_mod('ul_list_style', \processor::$root['--UlistStyle']['default']);
        $UlistStyle = str_replace(
            ['disc', 'circle', 'square', 'none'],
            [
                _x('gefüllter Kreis', 'small', 'core'), 
                _x('offener Kreis', 'small', 'core'), 
                _x('gefülltes Quadrat', 'small', 'core'), 
                _x('kein Symbol', 'small', 'core')
            ],
            $UlistStyle);
        $OlistStyle = \processor::$mods['--OlistStyle']; //get_theme_mod('ol_list_style', \processor::$root['--OlistStyle']['default']);
        $OlistStyle = str_replace(
            ['decimal-leading-zero', 'decimal', 'lower-roman', 'upper-roman', 'lower-greek', 'armenian', 'georgian', 'lower-alpha', 'upper-alpha', 'none'],
            [
                _x('numerisch mit Null (01. 02. ...)', 'small', 'core'), 
                _x('numerisch (1. 2. ...)', 'small', 'core'), 
                _x('römisch klein (i. ii. ...)', 'small', 'core'), 
                _x('römisch groß (I. II. ...)', 'small', 'core'), 
                _x('griechisch klein (α. β. ...)', 'small', 'core'), 
                _x('armenisch (Ա. Բ. ...)', 'small', 'core'), 
                _x('georgisch (ა. ბ. ...)', 'small', 'core'), 
                _x('alphabetisch klein (a. b. ...)', 'small', 'core'), 
                _x('alphabetisch groß (A. B. ...)', 'small', 'core'), 
                _x('keine Nummerierung', 'small', 'core')
            ],
            $OlistStyle);
        
        $content = "<p>".sprintf(__('Die Standard Schriftgröße des Textkörpers ist %spx.', 'core'), "<span class='value_preview' id='fontSize'>".$font_size."</span>")."</p>
                    <p class='breakpoint lg'>".sprintf(__('Die Schriftgröße für diese Bildschirmbreite (bis 1620px) ist %spx.', 'core'), "<span class='value_preview' id='fontSizeLG'>".$font_size_lg."</span>")."</p>
                    <p class='breakpoint md'>".sprintf(__('Die Schriftgröße für diese Bildschirmbreite (bis 1024px) ist %spx.', 'core'), "<span class='value_preview' id='fontSizeMD'>".$font_size_md."</span>")."</p>
                    <p class='breakpoint sm'>".sprintf(__('Die Schriftgröße für diese Bildschirmbreite (bis 767px) ist %spx.', 'core'), "<span class='value_preview' id='fontSizeSM'>".$font_size_sm."</span>")."</p>
                    <p class='breakpoint xs'>".sprintf(__('Die Schriftgröße für diese Bildschirmbreite (bis 480px) ist %spx.', 'core'), "<span class='value_preview' id='fontSizeXS'>".$font_size_xs."</span>")."</p>
                    <blockquote>".__('Das ist ein Blockzitat.', 'core')."</blockquote>
                    <ul>
                        <li>".__('Das ist eine ungeordnete Liste', 'core')."</li>
                        <li>".sprintf(__('Der Listenstil ist „%s“', 'core'), "<span class='value_preview' id='UlistStyle'>".$UlistStyle."</span>")."</li>
                    </ul>".
                    $this->make_empty_space('XS').
                    "<ol>
                        <li>".__('Das ist eine geordnete Liste', 'core')."</li>
                        <li>".sprintf(__('Der Listenstil ist „%s“', 'core'), "<span class='value_preview' id='OlistStyle'>".$OlistStyle."</span>")."</li>
                    </ol>".
                    $this->make_empty_space('XS');
        
        return $this->build_preview_section($content, 'body', true);
        
    }
    public function preview_headlines_sc($atts, $content=null) {
        
        $headline_sizes = array();
        $headline_sizes[1] = str_replace("em","",\processor::$mods['--H1fontSize']); //get_theme_mod('h1_font_size', \processor::$root['--H1fontSize']['default']);
        $headline_sizes[2] = str_replace("em","",\processor::$mods['--H2fontSize']); //get_theme_mod('h2_font_size', \processor::$root['--H2fontSize']['default']);
        $headline_sizes[3] = str_replace("em","",\processor::$mods['--H3fontSize']); //get_theme_mod('h3_font_size', \processor::$root['--H3fontSize']['default']);
        $headline_sizes[4] = str_replace("em","",\processor::$mods['--H4fontSize']); //get_theme_mod('h4_font_size', \processor::$root['--H4fontSize']['default']);
        $headline_sizes[5] = str_replace("em","",\processor::$mods['--H5fontSize']); //get_theme_mod('h5_font_size', \processor::$root['--H5fontSize']['default']);
        $headline_sizes[6] = str_replace("em","",\processor::$mods['--H6fontSize']); //get_theme_mod('h6_font_size', \processor::$root['--H6fontSize']['default']);
        
        $content = '';
        for ($i = 1; $i < 7; $i++) {
            $content .= "<h".$i.">
                            <span class='headline_size'>
                                <span class='value_preview' id='H".$i."fontSize'>".$headline_sizes[$i]."</span>em
                            </span>
                            ".__('Überschrift', 'core')."&nbsp;".$i." (H".$i.")".
                        "</h".$i.">";
        }
        
        return $this->build_preview_section($content.$this->make_empty_space('XS'), 'headlines', true);
    }
    public function preview_buttons_sc($atts, $content=null) {

        $button1_sc = '[vc_cbutton style="normal" mode="_button" linkk="|title:'.self::vc_encode(__('Primärer Button', 'core')).'||"][/vc_cbutton]';
        $button1h_sc = '[vc_cbutton style="normal" mode="_button _hover" linkk="|title:'.self::vc_encode(__('Hover Effekt', 'core')).'||"][/vc_cbutton]';
        $button1b_sc = '[vc_cbutton style="normal" size="_big" mode="_button" linkk="|title:'.self::vc_encode(__('Großer Button', 'core')).'||"][/vc_cbutton]';
        $button1s_sc = '[vc_cbutton style="normal" size="_small" mode="_button" linkk="|title:'.self::vc_encode(__('Kleiner Button', 'core')).'||"][/vc_cbutton]';

        $button2_sc = '[vc_cbutton style="normal" mode="_button _sec" linkk="|title:'.self::vc_encode(__('Sekundärer Button', 'core')).'||"][/vc_cbutton]';
        $button2h_sc = '[vc_cbutton style="normal" mode="_button _sec _hover" linkk="|title:'.self::vc_encode(__('Hover Effekt', 'core')).'||"][/vc_cbutton]';
        $button2b_sc = '[vc_cbutton style="normal" size="_big" mode="_button _sec" linkk="|title:'.self::vc_encode(__('Großer Button', 'core')).'||"][/vc_cbutton]';
        $button2s_sc = '[vc_cbutton style="normal" size="_small" mode="_button _sec" linkk="|title:'.self::vc_encode(__('Kleiner Button', 'core')).'||"][/vc_cbutton]';

        $button3_sc = '[vc_cbutton style="normal" mode="_button _trd" linkk="|title:'.self::vc_encode(__('Alternativer Button', 'core')).'||"][/vc_cbutton]';
        $button3h_sc = '[vc_cbutton style="normal" mode="_button _trd _hover" linkk="|title:'.self::vc_encode(__('Hover Effekt', 'core')).'||"][/vc_cbutton]';
        $button3b_sc = '[vc_cbutton style="normal" size="_big" mode="_button _trd" linkk="|title:'.self::vc_encode(__('Großer Button', 'core')).'||"][/vc_cbutton]';
        $button3s_sc = '[vc_cbutton style="normal" size="_small" mode="_button _trd" linkk="|title:'.self::vc_encode(__('Kleiner Button', 'core')).'||"][/vc_cbutton]';
        
        $content =  "<div class='vc_row'>
                        <div class='vc_column_container vc_col-sm-4'>".
                            do_shortcode($button1_sc).
                            do_shortcode($button1h_sc).
                        "</div>
                        <div class='vc_column_container vc_col-sm-4'>".
                            do_shortcode($button2_sc).
                            do_shortcode($button2h_sc).
                        "</div>
                        <div class='vc_column_container vc_col-sm-4'>".
                            do_shortcode($button3_sc).
                            do_shortcode($button3h_sc).
                        "</div>
                    </div>".
                    $this->make_empty_space('S').
                    "<div class='vc_row'>
                        <div class='vc_column_container vc_col-sm-4'>".
                            do_shortcode($button1b_sc).
                            do_shortcode($button1s_sc).
                        "</div>
                        <div class='vc_column_container vc_col-sm-4'>".
                            do_shortcode($button2b_sc).
                            do_shortcode($button2s_sc).
                        "</div>
                        <div class='vc_column_container vc_col-sm-4'>".
                            do_shortcode($button3b_sc).
                            do_shortcode($button3s_sc).
                        "</div>
                    </div>".$this->make_empty_space('S');
        
        return $this->build_preview_section($content, 'buttons', true);
        
    }
    public function preview_links_sc($atts, $content=null) {

        $link1_sc = '[vc_cbutton style="normal" mode="_link" linkk="|title:'.self::vc_encode(__('Primärer Link', 'core')).'||"][/vc_cbutton]';
        $link1h_sc = '[vc_cbutton style="normal" mode="_link _hover" linkk="|title:'.self::vc_encode(__('Hover Effekt', 'core')).'||"][/vc_cbutton]';

        $link2_sc = '[vc_cbutton style="normal" mode="_link _sec" linkk="|title:'.self::vc_encode(__('Sekundärer Link', 'core')).'||"][/vc_cbutton]';
        $link2h_sc = '[vc_cbutton style="normal" mode="_link _sec _hover" linkk="|title:'.self::vc_encode(__('Hover Effekt', 'core')).'||"][/vc_cbutton]';
        
        $content =  "<div class='vc_column_container vc_col-sm-4'>".
                        do_shortcode($link1_sc).
                        "<br>".
                        do_shortcode($link1h_sc).
                        $this->make_empty_space('S').
                    "</div>
                    <div class='vc_column_container vc_col-sm-4'>".
                        do_shortcode($link2_sc).
                        "<br>".
                        do_shortcode($link2h_sc).
                        $this->make_empty_space('XS').
                    "</div>";
        
        return $this->build_preview_section($content, 'links', true);
    }
    public function preview_forms_sc($atts, $content=null) {
        
        $button1_sc = '[vc_form_button]';
        
        $content =  "<div class='vc_column_container vc_col-sm-5'>
                            <form class='greyd_form'>
                                <div class='input-wrapper'>
                                    <label class='label' data-text='".__('Primäres Feld', 'core')."' for='input1'>".__('Primäres Feld', 'core')."<span class='requirement-required'> *</span></label>
                                    <span class='forms-tooltip'>
                                        <span class='forms-tooltip-toggle'></span>
                                        <span class='forms-tooltip-popup'>".__('Hier kann ein Hinweis stehen, der das Feld erklärt oder beschreibt, was eingegeben werden darf.', 'core')."</span>
                                    </span>
                                    <br>
                                    <input type='text' id='input1' name='input1' placeholder='".__('bitte eingeben', 'core')."' autocomplete='off'>
                                </div>
                                <div class='input-wrapper'>
                                    <label class='label' data-text='".__('Primäres Feld', 'core')."' for='input2'>".__('Hover Effekt', 'core')."<span class='requirement-required'> *</span></label><br>
                                    <input class='hover' type='text' id='input2' name='input2' placeholder='".__('bitte eingeben', 'core')."' autocomplete='off'>
                                </div>
                            </form>".
                            $this->make_empty_space('XS').
                        "</div>
                        <div class='vc_column_container vc_col-sm-5 vc_col-sm-offset-2'>
                            <form class='greyd_form'>
                                <div class='input-outer-wrapper'><div class='input-wrapper'>
                                    <label class='label' data-text='".__('Sekundäres Feld', 'core')."' for='input3'>".__('Sekundäres Feld', 'core')."<span class='requirement-optional'> ".__('(optional)', 'core')."</span></label><br>
                                    <div class='input-inner-wrapper'>
                                        <input class='sec' type='text' id='input3' name='input3' placeholder='".__('bitte eingeben', 'core')."' autocomplete='off'>
                                    </div>
                                </div></div>
                                <div class='input-outer-wrapper'><div class='input-wrapper'>
                                    <label class='label' data-text='".__('Sekundäres Feld', 'core')."' for='input4'>".__('Hover Effekt', 'core')."<span class='requirement-optional'> ".__('(optional)', 'core')."</span></label><br>
                                    <div class='input-inner-wrapper'>
                                        <input class='sec hover' type='text' id='input4' name='input4' placeholder='".__('bitte eingeben', 'core')."' autocomplete='off'>
                                    </div>
                                </div></div>
                            </form>".
                            $this->make_empty_space('XS').
                        "</div>
                        <div class='vc_column_container vc_col-sm-5'>
                            <form class='greyd_form'>
                                <div class='input-wrapper'>
                                    <label class='label' for='multiselect1'>".__('Multiselect', 'core')."</label>
                                        <span class='forms-tooltip'>
                                            <span class='forms-tooltip-toggle'></span>
                                            <span class='forms-tooltip-popup'>".__('Mit diesem speziellen Dropdown können Nutzer mehrere Felder gleichzeitig auswählen.', 'core')."</span>
                                        </span>
                                        <br>
                                    ".\vc\helper::render_multiselect(
                                        'multiselect1',
                                        array(
                                            'option1' => _x('Option', 'small', 'core')." 1",
                                            'option2' => _x('Option', 'small', 'core')." 2",
                                            'option3' => _x('Option', 'small', 'core')." 3",
                                            'option4' => _x('Option', 'small', 'core')." 4",
                                            'option5' => _x('Option', 'small', 'core')." 5",
                                        ),
                                        array( 'value' => 'option1,option4' )
                                    )."
                                </div>
                            </form>
                        </div>";
        
        return $this->build_preview_section($content, 'forms', true);
    }
    
    public function preview_messages_sc($atts, $content=null) {
        
        $content = '';
        
        $content .= helper::make_message(__('Die Hinweismeldung ist eine neutrale Nachricht, die einen informativen Charakter haben sollte.', 'core'), 'info');
        $content .= helper::make_message(__('Die Erfolgsmeldung erscheint zum Beispiel, wenn ein Formular erfolgreich abgesendet wurde.', 'core'), 'success');
        $content .= helper::make_message(__('Dies ist eine Fehlerbenachrichtigung, die beispielsweise bei fehlerhaften Formulareingaben angezeigt wird.', 'core'), 'danger');
        
        $content = "<div class='vc_column_container vc_col-sm-6'>".$content."</div><div class='vc_column_container vc_col-sm-12'>".$this->make_empty_space('S').$this->button_usage('colors_symbol', __('zu den Farben', 'core'), 'up')."</div>";
        
        return $this->build_preview_section($content, 'messages');
    }
    
    public function preview_tables_sc($atts, $content=null) {
        
        $content = '<table>
            <thead>
                <tr>
                    <th>'.__('Wo verwende ich Tabellen?', 'core').'</th>
                    <th>'.__('Wie mache ich das?', 'core').'</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>'.__('Tabellen kannst du z.B. mit dem Textmodul bauen.', 'core').'</td>
                    <td>'.sprintf(
                        __('Installiere dafür am besten unter %sGREYD.SUITE > Plugins%s das Plugin „TinyMCE Advanced“', 'core'),
                        '<a href="'.admin_url( 'admin.php?page=install-required-plugins').'" target="_blank">',
                        '</a>'
                    ).'</td>
                </tr>
                <tr>
                    <td>'.__('Oder du verwendest sie, um deine Posts darzustellen.', 'core').'</td>
                    <td>'.__('Wähle dafür im Postübersichtsmodul unter „Layout > Anordnung“ die Option „als Tabelle“ aus.', 'core').'</td>
                </tr>
            </tbody>
        </table>';
        
        return $this->build_preview_section($content, 'tables');
    }
    
    public function preview_usage_sc($atts, $content=null) {

        $button1_sc = '[vc_cbutton style="normal" mode="_button" linkk="|title:'.self::vc_encode(__('Primärer Button', 'core')).'||"][/vc_cbutton]';
        $button2_sc = '[vc_cbutton style="normal" mode="_button _sec" linkk="|title:'.self::vc_encode(__('Sekundärer Button', 'core')).'||"][/vc_cbutton]';
        $link2_sc   = '[vc_cbutton style="normal" mode="_link _sec" linkk="|title:'.self::vc_encode(__('Sekundärer Link', 'core')).'||"][/vc_cbutton]';

        $head1 = "<h4>".__('Überschrift', 'core')." 4</h4>".
                "<h1>".__('Überschrift', 'core')." 1</h1>".
                "<p>
                    ".__('Dies ist ein Textbereich mit deinen Farb- und Schriften-Einstellungen.', 'core')."
                </p><p>
                    ".__('Und so sieht ein normaler Absatz innerhalb eines Textbereichs mit deinen Einstellungen aus.', 'core')."
                </p><p>
                    ".__('Der eingestellte Abstand wirkt sich nicht nur innerhalb eines Textkörpers auf die Absätze aus, sondern auch auf den Abstand zu Elementen darüber & darunter:', 'core')."
                </p>".
                do_shortcode($button1_sc).
                $this->make_empty_space('XS');
        
        $head2 = "<h5>".__('Überschrift', 'core')." 5</h5>".
                "<h2>".__('Überschrift', 'core')." 2</h2>".
                "<p>".__('Ein Textblock kann neben reinem Text zum Beispiel eine', 'core')."</p>".
                "<ul><li>".__('ungeordnete Liste enthalten', 'core')."</li></ul>".
                "<ol><li>".__('oder auch eine geordnete Liste.', 'core')."</li></ol>".
                "<blockquote>".__('oder ein sogenanntes Blockzitat.', 'core')."</blockquote>".
                do_shortcode($link2_sc).
                $this->make_empty_space('S');
        
        $head3 = "<h6>".__('Überschrift', 'core')." 6</h6>".
                "<h3>".__('Überschrift', 'core')." 3</h3>".
                "<p>
                    ".sprintf(__('Dieser Textbereich enthält einen %sPrimären Link%s. Je nach Einstellungen verändert dieser sein Aussehen, wenn der Nutzer sich mit der Maus über den Link bewegt (Hover Effekt).', 'core'), "<a href='#'>", "</a>")."
                </p>".
                do_shortcode($button2_sc).
                $this->make_empty_space('S');
        
        $form_contact = "<h4>".__('Überschrift', 'core')." 4:<br>".__('Standard Kontaktformular', 'core')."</h4>
                        <form class='greyd_form' style='max-width:500px'>
                            <div class='input-wrapper'>
                                <label class='label' data-text='".__('Name', 'core')."' for='name'>".__('Name', 'core')."<span class='requirement-required'> *</span></label><br>
                                <input type='text' id='name' name='name' placeholder='".__('bitte eingeben', 'core')."' autocomplete='off' required>
                            </div>
                            <div class='input-wrapper'>
                                <label class='label' data-text='".__('E-Mail', 'core')."' for='email'>".__('E-Mail', 'core')."<span class='requirement-required'> *</span></label>
                                <span class='forms-tooltip'>
                                    <span class='forms-tooltip-toggle'></span>
                                    <span class='forms-tooltip-popup'>".__("Die E-Mail-Adresse sollte ein '@'-Zeichen und eine gültige Domain mit einem Punkt enthalten.", 'core')."</span>
                                </span>
                                <br>
                                <input class='validation' type='email' id='email' name='email' placeholder='".__('bitte eingeben', 'core')."' autocomplete='email' pattern=\"\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*\" required>
                            </div>
                            <div class='input-wrapper'>
                                <label class='label' data-text='".__('Nachricht', 'core')."' for='email'>".__('Nachricht', 'core')."<span class='requirement-optional'> ".__('(optional)', 'core')."</span></label><br>
                                <textarea rows='3' id='message' name='message' placeholder='".__('bitte eingeben', 'core')."'></textarea>
                            </div>
                            <div class='input-wrapper'>
                                <label class='checkbox-label' for='check'>
                                    <input type='checkbox' name='check' id='check' value='true' required>
                                    <div>".__('Checkboxen werden häufig am Ende eines Formulars für Zustimmungen zum Datenschutz o.Ä. verwendet.', 'core')."<span class='requirement-required'> *</span></div>
                                </label>
                            </div>
                            <button type='submit' name='submit' class='submitbutton' data-text='".__('senden', 'core')."' style='width:100%;'>".__('senden', 'core')."</button>
                        </form>";

        $form_more = "<h4>".__('Weitere Formularfelder', 'core')."</h4>
                    <form class='greyd_form' style='max-width:500px'>
                        <div class='input-wrapper'>
                            <label class='label' for='radio'>".__('Radio Buttons', 'core')."<span class='requirement-optional'> ".__('(optional)', 'core')."</span></label><br>
                            <fieldset>
                                <div><label for='option1'>
                                        <input type='radio' id='option1' value='option1' name='radio'>"._x('erste Option', 'small', 'core')."
                                </label><i></i></div>
                                <div><label for='option2'>
                                        <input type='radio' id='option2' value='option2' name='radio'>"._x('zweite Option', 'small', 'core')."
                                </label><i></i></div>
                                <div><label for='option3'>
                                        <input type='radio' id='option3' value='option3' name='radio'>"._x('dritte Option', 'small', 'core')."
                                </label><i></i></div>
                            </fieldset>
                        </div>
                        <div class='input-wrapper'>
                            <div class='custom-select'>
                                <label class='label' for='select1'".__('>Dropdown', 'core')."<span class='requirement-required'> *</span></label>
                                <span class='forms-tooltip'>
                                    <span class='forms-tooltip-toggle'></span>
                                    <span class='forms-tooltip-popup'>".__('Hier kann ein Hinweis stehen, der das Feld erklärt oder beschreibt, was eingegeben werden darf.', 'core')."</span>
                                </span>
                                <br>
                                <select name='select1' required>
                                    <option disabled='' value='' selected=''>".__('bitte auswählen', 'core')."</option>
                                    <option value='option1'>"._x('Option', 'small', 'core')." 1</option>
                                    <option value='option2'>"._x('Option', 'small', 'core')." 2</option>
                                    <option value='option3'>"._x('Option', 'small', 'core')." 3</option>
                                </select>
                            </div>
                        </div>
                        <div class='input-wrapper'>
                            <label class='label' for='multiselect1'>".__('Multiselect', 'core')."<span class='requirement-required'> *</span></label>
                                <span class='forms-tooltip'>
                                    <span class='forms-tooltip-toggle'></span>
                                    <span class='forms-tooltip-popup'>".__('Mit diesem speziellen Dropdown können Nutzer mehrere Felder gleichzeitig auswählen.', 'core')."</span>
                                </span>
                                <br>
                            ".\vc\helper::render_multiselect(
                                'multiselect1',
                                array(
                                    'option1' => _x('Option', 'small', 'core')." 1",
                                    'option2' => _x('Option', 'small', 'core')." 2",
                                    'option3' => _x('Option', 'small', 'core')." 3",
                                    'option4' => _x('Option', 'small', 'core')." 4",
                                    'option5' => _x('Option', 'small', 'core')." 5",
                                ),
                                array( 'value' => 'option1,option4' )
                            )."
                        </div>
                    </form>";
        
        $content =  "<div class='vc_column_container vc_col-sm-5'>".
                        $head1.
                        $head3.
                        $head2.
                        $this->make_empty_space('S').
                    "</div>".
                    "<div class='vc_column_container vc_col-sm-5 vc_col-sm-offset-2'>".
                        $this->make_empty_space('S').
                        $form_contact.
                        $this->make_empty_space('S').
                        $form_more.
                    "</div>";
        
        return $this->build_preview_section($content, 'usage');
    }
    public function preview_grid_sc($atts, $content=null) {
        
        $content = "<div class='vc_row row_xxl' style='margin-bottom:2em;'>
                    <div class='vc_column_container'><div class='vc_column-inner legend'>
                        <span class='tile color11'></span>".__('Gutter', 'core')."<br>
                        <span class='tile color21'></span>".__('Zeile', 'core')."<br>
                        <span class='tile color22'></span>".__('Padding', 'core')."
                    </div></div>
                </div>";
        
        $rows = array(
            array(
                'class' => 'row_l',
                'name' => __('Schmale Zeile (S)', 'core'),
            ),
            array(
                'class' => 'row_xl',
                'name' => __('Mittlere Zeile (M)', 'core'),
            ),
            array(
                'class' => 'row_xxl',
                'name' => __('Breite Zeile (L - Standard)', 'core'),
            ),
            array(
                'class' => 'row_xxxl',
                'name' => __('Extrabreite Zeile (XL)', 'core'),
            ),
        );
        
        foreach($rows as $row) {
            $row_content = '';
            for ($i = 0; $i < 12; $i++) {
                $row_content .= "<div class='wpb_column vc_column_container vc_col-sm-1 vc_col-xs-1 vc_col-has-fill'>
                                <div class='vc_column-inner'>
                                    <div class='wpb_wrapper'></div>
                                </div>
                            </div>";
            }
            $content .= "<div class='vc_row ".$row['class']."'>
                            <div class='vc_column_container'><div class='vc_column-inner'>
                            <p>".$row['name']."</p>
                            </div></div>
                        </div>
                        <div class='vc_row color_row ".$row['class']."'>".
                            $row_content.
                        "</div>".
                        $this->make_empty_space('XS');
            
        }
        
        return $this->build_preview_section($content, 'grid');
        
    }
    public function preview_dev_sc($atts, $content=null) {
        
        // if (isset($atts['dev']) && $atts['dev'] == 'true') {
        //     $text1 = \processor::$mods['DEPtext01'];
        //     $text2 = \processor::$mods['DEPtext02'];
        //     $content = "<div class='vc_row'>
        //                     <div class='dev_color'></div>
        //                     <div class='dev_col'></div>
        //                     <div class='dev_text'>$text1</div>
        //                     <div class='dev_text'>$text2</div>
        //                 </div>";

        //     return $this->build_preview_section ($content, 'dev');
        // }

    }
    
}
