<?php
class DIPI_FlipBox extends DIPI_Builder_Module {

    protected $module_credits = array(
        'module_uri' => 'https://divi-pixel.com/modules/flip-box',
        'author' => 'Divi Pixel',
        'author_uri' => 'https://divi-pixel.com',
    );

    public function init()
    {
        $this->icon_path = plugin_dir_path(__FILE__) . "dp-flip.svg";
        $this->slug = 'dipi_flip_box';
        $this->vb_support = 'on';
        $this->name = esc_html__('Pixel Flip Box', 'dipi-divi-pixel');
        $this->settings_modal_toggles = [

            'general' => [
                'toggles' => [
                    'front_side' => esc_html__('Front Side', 'dipi-divi-pixel'),
                    'back_side' => esc_html__('Back Side', 'dipi-divi-pixel'),
                    'settings' => esc_html__('Settings', 'dipi-divi-pixel'),
                    'flip_animation' => esc_html__('Flip Animation', 'dipi-divi-pixel'),
                ],
            ],

            'advanced' => [
                'toggles' => [
                    'front_side_background' => esc_html__('Front Background', 'dipi-divi-pixel'),
                    'back_side_background' => esc_html__('Back Background', 'dipi-divi-pixel'),
                    'front_icon_image' => esc_html__('Front Image & Icon', 'dipi-divi-pixel'),
                    'back_icon_image' => esc_html__('Back Image & Icon', 'dipi-divi-pixel'),
                    'front_text' => [
                        'sub_toggles' => [
                            'title' => [
                                'name' => 'Title',
                            ],
                            'desc' => [
                                'name' => 'Description',
                            ],
                        ],
                        'tabbed_subtoggles' => true,
                        'title' => esc_html__('Front Text', 'dipi-divi-pixel'),
                        'priority' => 49,
                    ],
                    'back_text' => [
                        'sub_toggles' => [
                            'title' => [
                                'name' => 'Title',
                            ],
                            'desc' => [
                                'name' => 'Description',
                            ],
                        ],
                        'tabbed_subtoggles' => true,
                        'title' => esc_html__('Back Text', 'dipi-divi-pixel'),
                        'priority' => 49,
                    ],
                    'width' => [
                        'title' => esc_html__('Sizing', 'dipi-divi-pixel'),
                        'priority' => 65,
                    ],
                ],
            ],
        ];
    }

    public function get_custom_css_fields_config()
    {

        $fields = [];

        $fields['front_card_container'] = [
            'label' => esc_html__('Front Card Container', 'dipi-divi-pixel'),
            'selector' => '%%order_class%% .dipi-flip-box-front-side',
        ];

        $fields['front_image_icon'] = [
            'label' => esc_html__('Front Image/Icon', 'dipi-divi-pixel'),
            'selector' => '%%order_class%% .dipi-front-image-icon-wrap',
        ];

        $fields['front_title'] = [
            'label' => esc_html__('Front Title', 'dipi-divi-pixel'),
            'selector' => '%%order_class%% .dipi-flip-box-front-side .dipi-flip-box-heading',
        ];

        $fields['front_description'] = [
            'label' => esc_html__('Front Description', 'dipi-divi-pixel'),
            'selector' => '%%order_class%% .dipi-flip-box-front-side .dipi-desc',
        ];

        $fields['front_button'] = [
            'label' => esc_html__('Front Button', 'dipi-divi-pixel'),
            'selector' => '%%order_class%% .dipi-front-button',
        ];

        $fields['back_card_container'] = [
            'label' => esc_html__('Back Card Container', 'dipi-divi-pixel'),
            'selector' => '%%order_class%% .dipi-flip-box-back-side',
        ];

        $fields['back_image_icon'] = [
            'label' => esc_html__('Back Image/Icon', 'dipi-divi-pixel'),
            'selector' => '%%order_class%% .dipi-back-image-icon-wrap',
        ];

        $fields['back_title'] = [
            'label' => esc_html__('Back Title', 'dipi-divi-pixel'),
            'selector' => '%%order_class%% .dipi-flip-box-back-side .dipi-flip-box-heading',
        ];

        $fields['back_description'] = [
            'label' => esc_html__('Back Description', 'dipi-divi-pixel'),
            'selector' => '%%order_class%% .dipi-flip-box-back-side .dipi-desc',
        ];

        $fields['back_button'] = [
            'label' => esc_html__('Back Button', 'dipi-divi-pixel'),
            'selector' => '%%order_class%% .dipi-back-button',
        ];

        return $fields;
    }

    public function get_fields()
    {

        $fields = [];

        $fields['front_title'] = [
            'label' => esc_html__('Front Title', 'dipi-divi-pixel'),
            'type' => 'text',
            'toggle_slug' => 'front_side',
        ];

        $fields['use_front_icon'] = [
            'label' => esc_html__('Icon for Front Side', 'dipi-divi-pixel'),
            'type' => 'yes_no_button',
            'option_category' => 'basic_option',
            'options' => [
                'off' => esc_html__('No', 'dipi-divi-pixel'),
                'on' => esc_html__('Yes', 'dipi-divi-pixel'),
            ],
            'default' => 'off',
            'toggle_slug' => 'front_side',
            'affects' => [
                'front_icon_image',
                'front_icon_color',
                'front_circle_icon',
                'front_circle_color',
                'front_circle_border',
                'front_circle_border_color',
                'front_icon_size',
                'front_icon_image',
            ],
        ];

        $fields["front_image"] = [
            'label' => esc_html__('Image', 'dipi-divi-pixel'),
            'type' => 'upload',
            'option_category' => 'basic_option',
            'upload_button_text' => esc_attr__('Upload an image', 'dipi-divi-pixel'),
            'choose_text' => esc_attr__('Choose an Image', 'dipi-divi-pixel'),
            'update_text' => esc_attr__('Set As Image', 'dipi-divi-pixel'),
            'hide_metadata' => true,
            'show_if' => ['use_front_icon' => 'off'],
            'toggle_slug' => 'front_side',
            'dynamic_content' => 'image',
        ];

        $fields["front_image_width"] = [
            'label' => esc_html__('Front Image Width', 'dipi-divi-pixel'),
            'type' => 'range',
            'validate_unit' => true,
            'default' => '100%',
            'default_unit' => '%',
            'show_if' => ['use_front_icon' => 'off'],
            'range_settings' => array(
                'min' => '0',
                'max' => '100',
                'step' => '1',
            ),
            'tab_slug' => 'advanced',
            'toggle_slug' => 'width',
        ];

        $fields['front_icon'] = [
            'label' => esc_html__('Front Icon', 'dipi-divi-pixel'),
            'type' => 'select_icon',
            'default' => '5',
            'show_if' => ['use_front_icon' => 'on'],
            'toggle_slug' => 'front_side',
        ];

        $fields["front_icon_color"] = [
            'label' => esc_html__('Icon Color', 'dipi-divi-pixel'),
            'type' => 'color-alpha',
            'default' => '#7EBEC5',
            'depends_show_if' => 'on',
            'tab_slug' => 'advanced',
            'toggle_slug' => 'front_icon_image',
        ];

        $fields["front_circle_icon"] = [
            'label' => esc_html__('Circle Icon', 'dipi-divi-pixel'),
            'type' => 'yes_no_button',
            'option_category' => 'configuration',
            'default' => 'off',
            'options' => array(
                'on' => esc_html__('Yes', 'dipi-divi-pixel'),
                'off' => esc_html__('No', 'dipi-divi-pixel'),
            ),
            'depends_show_if' => 'on',
            'tab_slug' => 'advanced',
            'toggle_slug' => 'front_icon_image',
        ];

        $fields["front_circle_color"] = [
            'label' => esc_html__('Circle Color', 'dipi-divi-pixel'),
            'type' => 'color-alpha',
            'custom_color' => true,
            'show_if' => array(
                'front_circle_icon' => 'on',
            ),
            'depends_show_if' => 'on',
            'tab_slug' => 'advanced',
            'toggle_slug' => 'front_icon_image',
        ];

        $fields["front_circle_border"] = [
            'label' => esc_html__('Show Circle Border', 'dipi-divi-pixel'),
            'type' => 'yes_no_button',
            'option_category' => 'configuration',
            'default' => 'off',
            'options' => [
                'on' => esc_html__('Yes', 'dipi-divi-pixel'),
                'off' => esc_html__('No', 'dipi-divi-pixel'),
            ],
            'depends_show_if' => 'on',
            'tab_slug' => 'advanced',
            'toggle_slug' => 'front_icon_image',
        ];

        $fields["front_circle_border_color"] = [
            'label' => esc_html__('Circle Border Color', 'dipi-divi-pixel'),
            'type' => 'color-alpha',
            'custom_color' => true,
            'show_if' => [
                'front_circle_border' => 'on',
            ],
            'depends_show_if' => 'on',
            'tab_slug' => 'advanced',
            'toggle_slug' => 'front_icon_image',
        ];

        $fields["front_icon_size"] = [
            'label' => esc_html__('Icon Font Size', 'dipi-divi-pixel'),
            'type' => 'range',
            'validate_unit' => true,
            'default' => '40px',
            'default_unit' => 'px',
            'range_settings' => array(
                'min' => '0',
                'max' => '100',
                'step' => '1',
            ),
            'depends_show_if' => 'on',
            'tab_slug' => 'advanced',
            'toggle_slug' => 'front_icon_image',
        ];

        $fields['front_content'] = [
            'label' => esc_html__('Body Text', 'dipi-divi-pixel'),
            'type' => 'tiny_mce',
            'option_category' => 'basic_option',
            'toggle_slug' => 'front_side',
        ];

        $fields['use_front_button'] = [
            'label' => esc_html__('Show Front Side Button', 'dipi-divi-pixel'),
            'type' => 'yes_no_button',
            'option_category' => 'basic_option',
            'default' => 'off',
            'options' => [
                'off' => esc_html__('No', 'dipi-divi-pixel'),
                'on' => esc_html__('Yes', 'dipi-divi-pixel'),
            ],
            'affects' => [
                'front_button_text',
                'front_button_link',
                'front_button_link_target',
            ],
            'toggle_slug' => 'front_side',
        ];

        $fields["front_button_text"] = [
            'label' => esc_html__('Button Text', 'dipi-divi-pixel'),
            'type' => 'text',
            'default' => esc_html__('Click Here', 'dipi-divi-pixel'),
            'option_category' => 'basic_option',
            'depends_show_if' => 'on',
            'toggle_slug' => 'front_side',
        ];

        $fields["front_button_link"] = [
            'label' => esc_html__('Button Link', 'dipi-divi-pixel'),
            'type' => 'text',
            'default' => '#',
            'option_category' => 'basic_option',
            'depends_show_if' => 'on',
            'toggle_slug' => 'front_side',
        ];

        $fields["front_button_link_target"] = [
            'label' => esc_html__('Button Link Target', 'dipi-divi-pixel'),
            'type' => 'select',
            'option_category' => 'layout',
            'default' => 'same_window',
            'default_on_child' => true,
            'options' => [
                'same_window' => esc_html__('In The Same Window', 'dipi-divi-pixel'),
                'new_window' => esc_html__('In The New Window', 'dipi-divi-pixel'),
            ],
            'depends_show_if' => 'on',
            'toggle_slug' => 'front_side',
        ];

        // Back side
        $fields['back_title'] = [
            'label' => esc_html__('Back Title', 'dipi-divi-pixel'),
            'type' => 'text',
            'toggle_slug' => 'back_side',
        ];

        $fields['use_back_icon'] = [
            'label' => esc_html__('Icon for Back Side', 'dipi-divi-pixel'),
            'type' => 'yes_no_button',
            'option_category' => 'basic_option',
            'options' => [
                'off' => esc_html__('No', 'dipi-divi-pixel'),
                'on' => esc_html__('Yes', 'dipi-divi-pixel'),
            ],
            'default' => 'off',
            'toggle_slug' => 'back_side',
            'affects' => [
                'back_icon_image',
                'back_icon_color',
                'back_circle_icon',
                'back_circle_color',
                'back_circle_border',
                'back_circle_border_color',
                'back_icon_size',
                'back_icon_image',
            ],
        ];

        $fields["back_image"] = [
            'label' => esc_html__('Image', 'dipi-divi-pixel'),
            'type' => 'upload',
            'option_category' => 'basic_option',
            'upload_button_text' => esc_attr__('Upload an image', 'dipi-divi-pixel'),
            'choose_text' => esc_attr__('Choose an Image', 'dipi-divi-pixel'),
            'update_text' => esc_attr__('Set As Image', 'dipi-divi-pixel'),
            'description' => esc_html__('Upload an image to display as before image', 'dipi-divi-pixel'),
            'hide_metadata' => true,
            'show_if' => ['use_back_icon' => 'off'],
            'toggle_slug' => 'back_side',
            'dynamic_content' => 'image',
        ];

        $fields["back_image_width"] = [
            'label' => esc_html__('Back Image Width', 'dipi-divi-pixel'),
            'type' => 'range',
            'validate_unit' => true,
            'default' => '100%',
            'default_unit' => '%',
            'show_if' => ['use_back_icon' => 'off'],
            'range_settings' => array(
                'min' => '0',
                'max' => '100',
                'step' => '1',
            ),
            'tab_slug' => 'advanced',
            'toggle_slug' => 'width',
        ];

        $fields['back_icon'] = [
            'label' => esc_html__('Back Icon', 'dipi-divi-pixel'),
            'type' => 'select_icon',
            'option_category' => 'basic_option',
            'default' => '5',
            'show_if' => ['use_back_icon' => 'on'],
            'toggle_slug' => 'back_side',
        ];

        $fields["back_icon_color"] = [
            'label' => esc_html__('Icon Color', 'dipi-divi-pixel'),
            'type' => 'color-alpha',
            'default' => '#7EBEC5',
            'depends_show_if' => 'on',
            'tab_slug' => 'advanced',
            'toggle_slug' => 'back_icon_image',
        ];

        $fields["back_circle_icon"] = [
            'label' => esc_html__('Circle Icon', 'dipi-divi-pixel'),
            'type' => 'yes_no_button',
            'option_category' => 'configuration',
            'default' => 'off',
            'options' => array(
                'on' => esc_html__('Yes', 'dipi-divi-pixel'),
                'off' => esc_html__('No', 'dipi-divi-pixel'),
            ),
            'depends_show_if' => 'on',
            'tab_slug' => 'advanced',
            'toggle_slug' => 'back_icon_image',
        ];

        $fields["back_circle_color"] = [
            'label' => esc_html__('Circle Color', 'dipi-divi-pixel'),
            'type' => 'color-alpha',
            'custom_color' => true,
            'show_if' => array(
                'back_circle_icon' => 'on',
            ),
            'depends_show_if' => 'on',
            'tab_slug' => 'advanced',
            'toggle_slug' => 'back_icon_image',
        ];

        $fields["back_circle_border"] = [
            'label' => esc_html__('Show Circle Border', 'dipi-divi-pixel'),
            'type' => 'yes_no_button',
            'option_category' => 'configuration',
            'default' => 'off',
            'options' => [
                'on' => esc_html__('Yes', 'dipi-divi-pixel'),
                'off' => esc_html__('No', 'dipi-divi-pixel'),
            ],
            'depends_show_if' => 'on',
            'tab_slug' => 'advanced',
            'toggle_slug' => 'back_icon_image',
        ];

        $fields["back_circle_border_color"] = [
            'label' => esc_html__('Circle Border Color', 'dipi-divi-pixel'),
            'type' => 'color-alpha',
            'custom_color' => true,
            'show_if' => [
                'back_circle_border' => 'on',
            ],
            'depends_show_if' => 'on',
            'tab_slug' => 'advanced',
            'toggle_slug' => 'back_icon_image',
        ];

        $fields["back_icon_size"] = [
            'label' => esc_html__('Icon Font Size', 'dipi-divi-pixel'),
            'type' => 'range',
            'validate_unit' => true,
            'default' => '40px',
            'default_unit' => 'px',
            'range_settings' => array(
                'min' => '0',
                'max' => '100',
                'step' => '1',
            ),
            'depends_show_if' => 'on',
            'tab_slug' => 'advanced',
            'toggle_slug' => 'back_icon_image',
        ];

        $fields['back_content'] = [
            'label' => esc_html__('Body Text', 'dipi-divi-pixel'),
            'type' => 'tiny_mce',
            'option_category' => 'basic_option',
            'toggle_slug' => 'back_side',
        ];

        $fields['use_back_button'] = [
            'label' => esc_html__('Show Back Side Button', 'dipi-divi-pixel'),
            'type' => 'yes_no_button',
            'option_category' => 'basic_option',
            'default' => 'off',
            'options' => [
                'off' => esc_html__('No', 'dipi-divi-pixel'),
                'on' => esc_html__('Yes', 'dipi-divi-pixel'),
            ],
            'affects' => [
                'back_button_text',
                'back_button_link',
                'back_button_link_target',
            ],
            'toggle_slug' => 'back_side',
        ];

        $fields["back_button_text"] = [
            'label' => esc_html__('Button Text', 'dipi-divi-pixel'),
            'type' => 'text',
            'default' => esc_html__('Click Here', 'dipi-divi-pixel'),
            'option_category' => 'basic_option',
            'depends_show_if' => 'on',
            'toggle_slug' => 'back_side',
        ];

        $fields["back_button_link"] = [
            'label' => esc_html__('Button Link', 'dipi-divi-pixel'),
            'type' => 'text',
            'default' => '#',
            'option_category' => 'basic_option',
            'depends_show_if' => 'on',
            'toggle_slug' => 'back_side',
        ];

        $fields["back_button_link_target"] = [
            'label' => esc_html__('Button Link Target', 'dipi-divi-pixel'),
            'type' => 'select',
            'option_category' => 'layout',
            'default' => 'same_window',
            'default_on_child' => true,
            'options' => [
                'same_window' => esc_html__('In The Same Window', 'dipi-divi-pixel'),
                'new_window' => esc_html__('In The New Window', 'dipi-divi-pixel'),
            ],
            'depends_show_if' => 'on',
            'toggle_slug' => 'back_side',
        ];

        $fields["flip_box_height"] = [
            'label' => esc_html__('Flip Box Height', 'dipi-divi-pixel'),
            'type' => 'range',
            'validate_unit' => true,
            'default' => '250px',
            'default_unit' => 'px',
            'range_settings' => array(
                'min' => '0',
                'max' => '500',
                'step' => '1',
            ),
            'toggle_slug' => 'settings',
        ];

        $fields["flip_box_speed"] = [
            'label' => esc_html__('Flip Speed', 'dipi-divi-pixel'),
            'type' => 'range',
            'validate_unit' => true,
            'default' => '600ms',
            'default_unit' => 'ms',
            'range_settings' => array(
                'min' => '0',
                'max' => '2000',
                'step' => '100',
            ),
            'toggle_slug' => 'settings',
        ];

        $fields["flip_box_align_front"] = [
            'label' => esc_html__('Front Content Align', 'dipi-divi-pixel'),
            'type' => 'select',
            'option_category' => 'basic_option',
            'default' => 'center',
            'options' => array(
                'left' => esc_html__('Left', 'dipi-divi-pixel'),
                'center' => esc_html__('Center', 'dipi-divi-pixel'),
                'right' => esc_html__('Right', 'dipi-divi-pixel'),
            ),
            'toggle_slug' => 'settings',
        ];

        $fields["flip_box_align_back"] = [
            'label' => esc_html__('Back Content Align', 'dipi-divi-pixel'),
            'type' => 'select',
            'option_category' => 'basic_option',
            'default' => 'center',
            'options' => array(
                'left' => esc_html__('Left', 'dipi-divi-pixel'),
                'center' => esc_html__('Center', 'dipi-divi-pixel'),
                'right' => esc_html__('Right', 'dipi-divi-pixel'),
            ),
            'toggle_slug' => 'settings',
        ];

        $fields["flip_box_animation"] = [
            'label' => esc_html__('Select Flip Animation', 'dipi-divi-pixel'),
            'type' => 'select',
            'option_category' => 'layout',
            'default' => 'flip_horizontally_ltr',
            'default_on_child' => true,
            'options' => [
                'flip_horizontally_ltr' => esc_html__('Left to Right', 'dipi-divi-pixel'),
                'flip_horizontally_rtl' => esc_html__('Right to Left', 'dipi-divi-pixel'),
                'flip_vertically_ttb' => esc_html__('Top to Bottom', 'dipi-divi-pixel'),
                'flip_vertically_btt' => esc_html__('Bottom to Top', 'dipi-divi-pixel'),
            ],
            'depends_show_if' => 'on',
            'toggle_slug' => 'flip_animation',
        ];

        $fields['use_3d_effect'] = [
            'label' => esc_html__('Use 3D Content Effect', 'dipi-divi-pixel'),
            'type' => 'yes_no_button',
            'option_category' => 'basic_option',
            'options' => [
                'off' => esc_html__('No', 'dipi-divi-pixel'),
                'on' => esc_html__('Yes', 'dipi-divi-pixel'),
            ],
            'default' => 'off',
            'toggle_slug' => 'flip_animation',
        ];

        $fields['use_3d_flip_box'] = [
            'label' => esc_html__('Use 3D Flipbox', 'dipi-divi-pixel'),
            'type' => 'yes_no_button',
            'option_category' => 'basic_option',
            'options' => [
                'off' => esc_html__('No', 'dipi-divi-pixel'),
                'on' => esc_html__('Yes', 'dipi-divi-pixel'),
            ],
            'default' => 'off',
            'toggle_slug' => 'flip_animation',
        ];

        $fields["flip_box_3d_flank_color"] = [
            'label' => esc_html__('Flip Box 3D Flank Color', 'dipi-divi-pixel'),
            'type' => 'color-alpha',
            'custom_color' => true,
            'show_if' => [
                'use_3d_flip_box' => 'on',
            ],
            'toggle_slug' => 'flip_animation',
        ];

        $additional_options = [];

        $additional_options['front_side_bg_color'] = [
            'label' => esc_html__('Front Background', 'dipi-divi-pixel'),
            'type' => 'background-field',
            'base_name' => "front_side_bg",
            'context' => "front_side_bg",
            'option_category' => 'layout',
            'custom_color' => true,
            'default' => ET_Global_Settings::get_value('all_buttons_bg_color'),
            'depends_show_if' => 'on',
            'tab_slug' => 'advanced',
            'toggle_slug' => "front_side_background",
            'background_fields' => array_merge(
                ET_Builder_Element::generate_background_options('front_side_bg', 'gradient', "advanced", "front_side_background", "front_side_bg_gradient"),
                ET_Builder_Element::generate_background_options("front_side_bg", "color", "advanced", "front_side_background", "front_side_bg_color"),
                ET_Builder_Element::generate_background_options("front_side_bg", "image", "advanced", "front_side_background", "front_side_bg_image")
            ),
        ];

        $additional_options['back_side_bg_color'] = [
            'label' => esc_html__('Back Background', 'dipi-divi-pixel'),
            'type' => 'background-field',
            'base_name' => "back_side_bg",
            'context' => "back_side_bg",
            'option_category' => 'layout',
            'custom_color' => true,
            'default' => ET_Global_Settings::get_value('all_buttons_bg_color'),
            'depends_show_if' => 'on',
            'tab_slug' => 'advanced',
            'toggle_slug' => "back_side_background",
            'background_fields' => array_merge(
                ET_Builder_Element::generate_background_options('back_side_bg', 'gradient', "advanced", "back_side_background", "back_side_bg_gradient"),
                ET_Builder_Element::generate_background_options("back_side_bg", "color", "advanced", "back_side_background", "back_side_bg_color"),
                ET_Builder_Element::generate_background_options("back_side_bg", "image", "advanced", "back_side_background", "back_side_bg_image")
            ),
        ];

        $additional_options = array_merge($additional_options, $this->generate_background_options("front_side_bg", 'skip', "advanced", "front_side_background", "front_side_bg_gradient"));
        $additional_options = array_merge($additional_options, $this->generate_background_options("front_side_bg", 'skip', "advanced", "front_side_background", "front_side_bg_color"));
        $additional_options = array_merge($additional_options, $this->generate_background_options("front_side_bg", 'skip', "advanced", "front_side_background", "front_side_bg_image"));
        $additional_options = array_merge($additional_options, $this->generate_background_options("back_side_bg", 'skip', "advanced", "back_side_background", "back_side_bg_gradient"));
        $additional_options = array_merge($additional_options, $this->generate_background_options("back_side_bg", 'skip', "advanced", "back_side_background", "back_side_bg_color"));
        $additional_options = array_merge($additional_options, $this->generate_background_options("back_side_bg", 'skip', "advanced", "back_side_background", "back_side_bg_image"));

        return array_merge($fields, $additional_options);
    }

    public function get_advanced_fields_config()
    {

        $advanced_fields = [];

        $advanced_fields["text"] = false;
        $advanced_fields["text_shadow"] = false;
        $advanced_fields["fonts"] = false;

        $advanced_fields["borders"]["default"] = [
            'css' => [
                'main' => [
                    'border_radii' => "%%order_class%% .dipi-flip-box-front-side, %%order_class%% .dipi-flip-box-back-side",
                    'border_styles' => "%%order_class%% .dipi-flip-box-front-side, %%order_class%% .dipi-flip-box-back-side",
                ],
            ],
        ];

        $advanced_fields["fonts"]["front_title"] = [
            'label' => esc_html__('Title', 'dipi-divi-pixel'),
            'css' => [
                'main' => "%%order_class%% .dipi-flip-box-front-side .dipi-flip-box-heading",
            ],
            'important' => 'all',
            'hide_text_align' => true,
            'toggle_slug' => 'front_text',
            'sub_toggle' => 'title',
            'line_height' => [
                'range_settings' => [
                    'min' => '1',
                    'max' => '100',
                    'step' => '1',
                ],
            ],
        ];

        $advanced_fields["fonts"]["front_desc"] = [
            'label' => esc_html__('Description', 'dipi-divi-pixel'),
            'css' => [
                'main' => "%%order_class%% .dipi-flip-box-front-side .dipi-desc",
            ],
            'important' => 'all',
            'hide_text_align' => true,
            'toggle_slug' => 'front_text',
            'sub_toggle' => 'desc',
            'line_height' => [
                'range_settings' => [
                    'min' => '1',
                    'max' => '100',
                    'step' => '1',
                ],
            ],
        ];

        $advanced_fields["fonts"]["back_title"] = [
            'label' => esc_html__('Title', 'dipi-divi-pixel'),
            'css' => [
                'main' => "%%order_class%% .dipi-flip-box-back-side .dipi-flip-box-heading",
            ],
            'important' => 'all',
            'hide_text_align' => true,
            'toggle_slug' => 'back_text',
            'sub_toggle' => 'title',
            'line_height' => [
                'range_settings' => [
                    'min' => '1',
                    'max' => '100',
                    'step' => '1',
                ],
            ],
        ];

        $advanced_fields["fonts"]["back_desc"] = [
            'label' => esc_html__('Description', 'dipi-divi-pixel'),
            'css' => [
                'main' => "%%order_class%% .dipi-flip-box-back-side .dipi-desc",
            ],
            'important' => 'all',
            'hide_text_align' => true,
            'toggle_slug' => 'back_text',
            'sub_toggle' => 'desc',
            'line_height' => [
                'range_settings' => [
                    'min' => '1',
                    'max' => '100',
                    'step' => '1',
                ],
            ],
        ];

        $advanced_fields["box_shadow"]["default"] = [
            'label' => esc_html__('Flip Box Shadow', 'dipi-divi-pixel'),
            'css' => [
                'main' => "%%order_class%% .dipi-flip-box-front-side, %%order_class%% .dipi-flip-box-back-side",
            ],
        ];

        $advanced_fields['margin_padding'] = [
            'css' => [
                'margin' => "%%order_class%% .dipi-flip-box-front-side, %%order_class%% .dipi-flip-box-back-side",
                'padding' => "%%order_class%% .dipi-flip-box-front-side-innner, %%order_class%% .dipi-flip-box-back-side-innner",
                'important' => 'all',
            ],
        ];

        $advanced_fields['button']["front_button"] = [
            'label' => esc_html__('Front Button', 'dipi-divi-pixel'),
            'css' => [
                'main' => "%%order_class%% .dipi-front-button",
                'important' => true,
            ],
            'use_alignment' => false,
            'box_shadow' => [
                'css' => [
                    'main' => "%%order_class%% .dipi-front-button",
                    'important' => true,
                ],
            ],
            'margin_padding' => [
                'css' => [
                    'main' => "%%order_class%% .dipi-front-button.et_pb_button",
                    'important' => 'all',
                ],
            ],
        ];

        $advanced_fields['button']["back_button"] = [
            'label' => esc_html__('Back Button', 'dipi-divi-pixel'),
            'css' => [
                'main' => "%%order_class%% .dipi-back-button",
                'important' => 'all',
            ],
            'use_alignment' => false,
            'box_shadow' => [
                'css' => [
                    'main' => "%%order_class%% .dipi-back-button",
                    'important' => true,
                ],
            ],
            'borders' => [
                'css' => [
                    'main' => "%%order_class%% .dipi-back-button",
                    'important' => true,
                ],
            ],
            'margin_padding' => [
                'css' => [
                    'main' => "%%order_class%% .dipi-back-button.et_pb_button",
                    'important' => true,
                ],
            ],
        ];

        $advanced_fields['borders']['front_image'] = [
            'css' => [
                'main' => [
                    'border_radii' => "%%order_class%% .dipi-flip-box-front-side .dipi-image-wrap img",
                    'border_styles' => "%%order_class%% .dipi-flip-box-front-side .dipi-image-wrap img",
                ],
            ],
            'tab_slug' => 'advanced',
            'toggle_slug' => 'front_icon_image',
            'depends_on' => ['use_front_icon'],
            'depends_show_if' => 'off',
        ];

        $advanced_fields['box_shadow']['front_image'] = [
            'label' => esc_html__('Front Image Box Shadow', 'dipi-divi-pixel'),
            'option_category' => 'layout',
            'tab_slug' => 'advanced',
            'show_if' => ['use_front_icon' => 'off'],
            'css' => [
                'main' => '%%order_class%% .dipi-flip-box-front-side .dipi-image-wrap img',
                'overlay' => 'inset',
            ],
            'tab_slug' => 'advanced',
            'toggle_slug' => 'front_icon_image',
        ];

        $advanced_fields['borders']['back_image'] = [
            'css' => [
                'main' => [
                    'border_radii' => "%%order_class%% .dipi-flip-box-back-side .dipi-image-wrap img",
                    'border_styles' => "%%order_class%% .dipi-flip-box-back-side .dipi-image-wrap img",
                ],
            ],
            'tab_slug' => 'advanced',
            'toggle_slug' => 'back_icon_image',
            'depends_on' => ['use_back_icon'],
            'depends_show_if' => 'off',
        ];

        $advanced_fields['box_shadow']['back_icon_image'] = [
            'label' => esc_html__('Back Image Box Shadow', 'dipi-divi-pixel'),
            'option_category' => 'layout',
            'tab_slug' => 'advanced',
            'show_if' => ['use_back_icon' => 'off'],
            'css' => [
                'main' => '%%order_class%% .dipi-flip-box-back-side .dipi-image-wrap img',
                'overlay' => 'inset',
            ],
            'tab_slug' => 'advanced',
            'toggle_slug' => 'back_icon_image',
        ];

        return $advanced_fields;
    }

    public function _render_front_side($args = [])
    {
        $front_icon_image = '';
        if ('on' == $this->props['use_front_icon']) {
            $front_icon = et_pb_process_font_icon($this->props['front_icon']);
            $front_icon_image = sprintf('
              <div class="dipi-front-image-icon-wrap dipi-icon-wrap">
                  <span class="et-pb-icon et-pb-font-icon dipi-flip-box-front-icon">
                      %1$s
                  </span>
              </div>',
                esc_attr($front_icon)
            );
        } else if (isset($this->props['front_image']) && '' !== $this->props['front_image']) {
            $front_icon_image = sprintf('
              <div class="dipi-front-image-icon-wrap dipi-image-wrap">
                  <img src="%1$s" alt="front-image">
              </div>',
                esc_attr($this->props['front_image'])
            );
        }

        $front_title = '';
        if ('' !== $this->props['front_title']) {
            $front_title = sprintf('
                <h2 class="dipi-flip-box-heading">%1$s</h2>',
                esc_attr($this->props['front_title'])
            );
        }

        $front_content = '';
        if ('' !== $this->props['front_content']) {
            $front_content = sprintf('
                <div class="dipi-desc">%1$s</div>',
                $this->props['front_content']
            );
        }

        $front_button = '';
        if ('on' === $this->props['use_front_button']) {

            $front_button_rel = $this->props['front_button_rel'];
            $front_button_text = $this->props['front_button_text'];
            $front_button_link = $this->props['front_button_link'];
            $front_button_icon = $this->props['front_button_icon'];
            $front_button_target = 'new_window' == $this->props['front_button_link_target'] ? '_blank' : '';
            $front_button_custom = $this->props['custom_front_button'];

            $front_button = $this->render_button([
                'button_classname' => [" dipi-front-button"],
                'button_custom' => $front_button_custom,
                'button_rel' => $front_button_rel,
                'button_text' => $front_button_text,
                'button_url' => $front_button_link,
                'custom_icon' => $front_button_icon,
                'has_wrapper' => false,
                'url_new_window' => $front_button_target,
            ]);

        }

        $front_parallax_bg = '';
        if ('on' == $this->props["front_side_bg_parallax"]) {
            $front_parallax_bg = $this->_dipi_parallax_image_bg("front_side_bg");
        }

        $front_content_render = '';
        if ('' !== $front_title || '' !== $front_content) {
            $front_content_render = sprintf('
                <div class="dipi-text">
                    %1$s
                    %2$s
                </div>',
                $front_title,
                $front_content
            );
        }

        return sprintf('
            <div class="dipi-flip-box-front-side">
                %1$s
                <div class="dipi-flip-box-front-side-innner">
                    %2$s
                    %3$s
                    %4$s
                </div>
            </div>
            ',
            $front_parallax_bg,
            $front_icon_image,
            $front_content_render,
            $front_button
        );

    }

    public function _render_back_side($args = [])
    {

        $back_icon_image = '';
        if ('on' == $this->props['use_back_icon']) {
            $back_icon = et_pb_process_font_icon($this->props['back_icon']);
            $back_icon_image = sprintf('
                <div class="dipi-back-image-icon-wrap dipi-icon-wrap">
                    <span class="et-pb-icon et-pb-font-icon dipi-flip-box-back-icon">%1$s</span>
                </div>',
                esc_attr($back_icon)
            );
        } else if (isset($this->props['back_image']) && '' !== $this->props['back_image']) {
            $back_icon_image = sprintf('
                <div class="dipi-back-image-icon-wrap dipi-image-wrap">
                    <img class="dipi-flip-box-back-imge" src="%1$s" alt="">
                </div>',
                esc_attr($this->props['back_image'])
            );
        }

        $back_title = '';
        if ('' !== $this->props['back_title']) {
            $back_title = sprintf('
                <h2 class="dipi-flip-box-heading">
                    %1$s
                </h2>',
                esc_attr($this->props['back_title'])
            );
        }

        $back_content = '';
        if ('' !== $this->props['back_content']) {
            $back_content = sprintf('
                <div class="dipi-desc">%1$s</div>',
                $this->props['back_content']
            );
        }

        $back_button = '';
        if ('on' === $this->props['use_back_button']) {

            $back_button_rel = $this->props['back_button_rel'];
            $back_button_text = $this->props['back_button_text'];
            $back_button_link = $this->props['back_button_link'];
            $back_button_icon = $this->props['back_button_icon'];
            $back_button_target = 'new_window' == $this->props['back_button_link_target'] ? '_blank' : '';
            $front_button_custom = $this->props['custom_back_button'];
            $back_button = $this->render_button([
                'button_classname' => [" dipi-back-button"],
                'button_custom' => $back_button_custom,
                'button_rel' => $back_button_rel,
                'button_text' => $back_button_text,
                'button_url' => $back_button_link,
                'custom_icon' => $back_button_icon,
                'has_wrapper' => false,
                'url_new_window' => $back_button_target,
            ]);

        }

        $back_parallax_bg = '';
        if ('on' == $this->props["back_side_bg_parallax"]) {
            $back_parallax_bg = $this->_dipi_parallax_image_bg("back_side_bg");
        }

        $back_content_render = '';
        if ('' !== $back_title || '' !== $back_content) {
            $back_content_render = sprintf('
                <div class="dipi-text">
                    %1$s
                    %2$s
                </div>',
                $back_title,
                $back_content
            );
        }

        return sprintf('
            <div class="dipi-flip-box-back-side">
                %1$s
                <div class="dipi-flip-box-back-side-innner">
                    %2$s
                    %3$s
                    %4$s
                </div>
            </div>',
            $back_parallax_bg,
            $back_icon_image,
            $back_content_render,
            $back_button
        );
    }

    /**
     * Background Process
     */
    public function _dipi_process_background(string $class_name, string $base_name, $render_slug)
    {

        $background_images = [];
        $background_style = '';

        $use_bg_gradient = $this->props["{$base_name}_use_color_gradient"];
        $bg_type = $this->props["{$base_name}_color_gradient_type"];
        $bg_direction = $this->props["{$base_name}_color_gradient_direction"];
        $bg_direction_radial = $this->props["{$base_name}_color_gradient_direction_radial"];
        $bg_start = $this->props["{$base_name}_color_gradient_start"];
        $bg_end = $this->props["{$base_name}_color_gradient_end"];
        $bg_start_position = $this->props["{$base_name}_color_gradient_start_position"];
        $bg_end_position = $this->props["{$base_name}_color_gradient_end_position"];
        $bg_overlays_image = $this->props["{$base_name}_color_gradient_overlays_image"];

        // Gradient
        if ('on' === $use_bg_gradient) {

            $direction = $bg_type === 'linear' ? $bg_direction : "circle at {$bg_direction_radial}";
            $start_position = et_sanitize_input_unit($bg_start_position, false, '%');
            $end_position = et_sanitize_input_unit($bg_end_position, false, '%');
            $gradient_bg = "{$bg_type}-gradient({$direction}, {$bg_start} {$start_position},{$bg_end} {$end_position})";

            if (!empty($gradient_bg)) {
                $background_images[] = $gradient_bg;
            }

            $has_bg_gradient = true;

        } else {
            $has_bg_gradient = false;
        }

        $bg_image = $this->props["{$base_name}_image"];
        $parallax = $this->props["{$base_name}_parallax"];
        $is_bg_image_active = '' !== $bg_image && 'on' !== $parallax;

        if ($is_bg_image_active) {

            $has_bg_image = true;

            $bg_size = $this->props["{$base_name}_size"];
            if ('' !== $bg_size) {
                $background_style .= sprintf(
                    'background-size: %1$s !important; ',
                    esc_html($bg_size)
                );
            }

            $bg_position = $this->props["{$base_name}_position"];
            if ('' !== $bg_position) {
                $background_style .= sprintf(
                    'background-position: %1$s !important; ',
                    esc_html(str_replace('_', ' ', $bg_position))
                );
            }

            $bg_repeat = $this->props["{$base_name}_repeat"];
            if ('' !== $bg_repeat) {
                $background_style .= sprintf(
                    'background-repeat: %1$s !important; ',
                    esc_html($bg_repeat)
                );
            }

            $bg_blend = $this->props["{$base_name}_blend"];
            if ('' !== $bg_blend) {
                $background_style .= sprintf(
                    'background-blend-mode: %1$s !important;',
                    esc_html($bg_blend)
                );
            }

            $background_images[] = sprintf('url(%1$s)', esc_html($bg_image));
        }

        if (!empty($background_images)) {
            if ('on' !== $bg_overlays_image) {
                $background_images = array_reverse($background_images);
            }

            $background_style .= sprintf(
                'background-image: %1$s !important;',
                esc_html(join(', ', $background_images))
            );
        }

        if (!$has_bg_gradient || !$has_bg_image) {
            $background_color = $this->props["{$base_name}_color"];
            if ('' !== $background_color) {
                $background_style .= sprintf(
                    'background-color: %1$s !important; ',
                    esc_html($background_color)
                );
            }
        }

        if ('' !== $background_style) {
            ET_Builder_Element::set_style($render_slug, array(
                'selector' => "%%order_class%% {$class_name}",
                'declaration' => rtrim($background_style),
            ));
        }
    }

    /**
     * Parallax Image Background
     */
    public function _dipi_parallax_image_bg($base_name)
    {

        $bg_image = $this->props["{$base_name}_image"];
        $parallax = $this->props["{$base_name}_parallax"];
        $parallax_method = $this->props["{$base_name}_parallax_method"];
        $parallax_classname = [];

        if ('' !== $bg_image && 'on' === $parallax) {
            $parallax_classname[] = 'et_parallax_bg';
            if ('off' === $parallax_method) {
                $parallax_classname[] = 'et_pb_parallax_css';
            }
        }

        return sprintf(
            '<span class="et_parallax_bg_wrap"><span
            class="%1$s"
            style="background-image: url(%2$s);"
          ></span></span>',
            esc_attr(implode(' ', $parallax_classname)),
            esc_url($bg_image)
        );

    }

    /**
     * Render
     */
    public function render($attrs, $content = null, $render_slug)
    {

        $this->_dipi_process_background(".dipi-flip-box-front-side", "front_side_bg", $render_slug);
        $this->_dipi_process_background(".dipi-flip-box-back-side", "back_side_bg", $render_slug);
        $this->_dipi_apply_css($render_slug);

        $flip_box_animation = '';

        if ('flip_horizontally_ltr' == $this->props['flip_box_animation'] && 'off' == $this->props['use_3d_flip_box']) {
            $flip_box_animation = 'dipi-flip-left-right';
        } elseif ('flip_horizontally_rtl' == $this->props['flip_box_animation'] && 'off' == $this->props['use_3d_flip_box']) {
            $flip_box_animation = 'dipi-flip-right-left';
        } elseif ('flip_vertically_ttb' == $this->props['flip_box_animation'] && 'off' == $this->props['use_3d_flip_box']) {
            $flip_box_animation = 'dipi-flip-top-bottom';
        } elseif ('flip_vertically_btt' == $this->props['flip_box_animation'] && 'off' == $this->props['use_3d_flip_box']) {
            $flip_box_animation = 'dipi-flip-bottom-top';
        }

        if ('on' == $this->props['use_3d_flip_box']) {
            if ('flip_horizontally_ltr' == $this->props['flip_box_animation']) {
                $flip_box_animation = 'dipi-flip-box-3d-cube dipi-flip-ltr';
            } elseif ('flip_horizontally_rtl' == $this->props['flip_box_animation']) {
                $flip_box_animation = 'dipi-flip-box-3d-cube dipi-flip-rtl';
            } elseif ('flip_vertically_ttb' == $this->props['flip_box_animation']) {
                $flip_box_animation = 'dipi-flip-box-3d-cube dipi-flip-ttb';
            } elseif ('flip_vertically_btt' == $this->props['flip_box_animation']) {
                $flip_box_animation = 'dipi-flip-box-3d-cube dipi-flip-btt';
            }
        }

        $dipi_3d_flank = ('on' == $this->props['use_3d_flip_box']) ? '<div class="dipi-flip-box-3d-flank"></div>' : '';
        $use_3d_effect = ('on' == $this->props['use_3d_effect']) ? 'dipi-3d-flip-box' : '';

        return sprintf(
            '<div class="dipi-flip-box-container">
            <div class="dipi-flip-box-inner %3$s %4$s">
              <div class="dipi-flip-box-inner-wrapper">
                %1$s
                %2$s
                %5$s
              </div>
            </div>
           </div>',
            $this->_render_front_side([]),
            $this->_render_back_side([]),
            $flip_box_animation,
            $use_3d_effect,
            $dipi_3d_flank
        );
    }

    /**
     * Custom CSS
     */
    public function _dipi_apply_css($render_slug)
    {

        $front_icon_color = $this->props['front_icon_color'];
        $front_circle_icon = $this->props['front_circle_icon'];
        $front_circle_color = $this->props['front_circle_color'];
        $front_circle_border = $this->props['front_circle_border'];
        $front_circle_border_color = $this->props['front_circle_border_color'];
        $front_icon_size = $this->props['front_icon_size'];
        $front_image_width = $this->props['front_image_width'];
        $back_icon_color = $this->props['back_icon_color'];
        $back_circle_icon = $this->props['back_circle_icon'];
        $back_circle_color = $this->props['back_circle_color'];
        $back_circle_border = $this->props['back_circle_border'];
        $back_circle_border_color = $this->props['back_circle_border_color'];
        $back_icon_size = $this->props['back_icon_size'];
        $back_image_width = $this->props['back_image_width'];
        $flip_box_height = $this->props['flip_box_height'];
        $flip_box_speed = $this->props['flip_box_speed'];
        $flip_box_align_front = $this->props['flip_box_align_front'];
        $flip_box_align_back = $this->props['flip_box_align_back'];
        $flip_box_3d_flank_color = $this->props['flip_box_3d_flank_color'];

        \ET_Builder_Element::set_style($render_slug, [
            'selector' => '%%order_class%% .dipi-back-button:after',
            'declaration' => "font-size: inherit !important; line-height: inherit !important;",
        ]);

        if ('on' == $this->props['use_3d_flip_box']):
            \ET_Builder_Element::set_style($render_slug, [
                'selector' => '%%order_class%% .dipi-flip-box-3d-cube',
                'declaration' => "transition-duration: {$flip_box_speed} !important;",
            ]);

        else:

            \ET_Builder_Element::set_style($render_slug, [
                'selector' => '%%order_class%% .dipi-flip-box-front-side, %%order_class%% .dipi-flip-box-back-side',
                'declaration' => "transition-duration: {$flip_box_speed} !important;",
            ]);

        endif;

        if ('left' == $flip_box_align_front):

            \ET_Builder_Element::set_style($render_slug, [
                'selector' => '%%order_class%% .dipi-flip-box-front-side-innner',
                'declaration' => "text-align: left !important;",
            ]);

            \ET_Builder_Element::set_style($render_slug, [
                'selector' => '%%order_class%% .dipi-front-image-icon-wrap',
                'declaration' => "margin-left: 0 !important; margin-right: auto !important;",
            ]);

        elseif ('center' == $flip_box_align_front):

            \ET_Builder_Element::set_style($render_slug, [
                'selector' => '%%order_class%% .dipi-flip-box-front-side-innner',
                'declaration' => "text-align: center !important;",
            ]);

        elseif ('right' == $flip_box_align_front):

            \ET_Builder_Element::set_style($render_slug, [
                'selector' => '%%order_class%% .dipi-flip-box-front-side-innner',
                'declaration' => "text-align: right !important;",
            ]);

            \ET_Builder_Element::set_style($render_slug, [
                'selector' => '%%order_class%% .dipi-front-image-icon-wrap',
                'declaration' => "margin-right: 0 !important; margin-left: auto !important;",
            ]);

        endif;

        if ('left' == $flip_box_align_back):
            \ET_Builder_Element::set_style($render_slug, [
                'selector' => '%%order_class%% .dipi-flip-box-back-side-innner',
                'declaration' => "text-align: left !important;",
            ]);

            \ET_Builder_Element::set_style($render_slug, [
                'selector' => '%%order_class%% .dipi-back-image-icon-wrap',
                'declaration' => "margin-right: auto !important; margin-left: 0 !important;",
            ]);

        elseif ('center' == $flip_box_align_back):

            \ET_Builder_Element::set_style($render_slug, [
                'selector' => '%%order_class%% .dipi-flip-box-back-side-innner',
                'declaration' => "text-align: center !important;",
            ]);

        elseif ('right' == $flip_box_align_back):

            \ET_Builder_Element::set_style($render_slug, [
                'selector' => '%%order_class%% .dipi-flip-box-back-side-innner',
                'declaration' => "text-align: right !important;",
            ]);

            \ET_Builder_Element::set_style($render_slug, [
                'selector' => '%%order_class%% .dipi-back-image-icon-wrap',
                'declaration' => "margin-right: 0 !important; margin-left: auto !important;",
            ]);

        endif;

        \ET_Builder_Element::set_style($render_slug, [
            'selector' => '%%order_class%% .dipi-flip-box-front-side .dipi-flip-box-front-icon',
            'declaration' => "color: {$front_icon_color} !important;",
        ]);

        if ('on' == $front_circle_icon):
            \ET_Builder_Element::set_style($render_slug, [
                'selector' => '%%order_class%% .dipi-flip-box-front-side .dipi-front-icon-circle',
                'declaration' => "background-color: {$front_circle_color} !important;",
            ]);
        endif;

        \ET_Builder_Element::set_style($render_slug, [
            'selector' => '%%order_class%% .dipi-flip-box-3d-cube .dipi-flip-box-3d-flank',
            'declaration' => "background-color: {$flip_box_3d_flank_color} !important;",
        ]);

        if ('on' == $front_circle_border):
            \ET_Builder_Element::set_style($render_slug, [
                'selector' => '%%order_class%% .dipi-flip-box-front-side .dipi-front-icon-border',
                'declaration' => "border-color: {$front_circle_border_color} !important;",
            ]);
        endif;

        \ET_Builder_Element::set_style($render_slug, [
            'selector' => '%%order_class%% .dipi-flip-box-front-side .dipi-flip-box-front-icon',
            'declaration' => "font-size: {$front_icon_size} !important;",
        ]);

        \ET_Builder_Element::set_style($render_slug, [
            'selector' => '%%order_class%% .dipi-flip-box-back-side .dipi-flip-box-back-icon',
            'declaration' => "color: {$back_icon_color} !important;",
        ]);

        if ('on' == $back_circle_icon):
            \ET_Builder_Element::set_style($render_slug, [
                'selector' => '%%order_class%% .dipi-flip-box-back-side .dipi-back-icon-circle',
                'declaration' => "background-color: {$back_circle_color} !important;",
            ]);
        endif;

        if ('on' == $back_circle_border):
            \ET_Builder_Element::set_style($render_slug, [
                'selector' => '%%order_class%% .dipi-flip-box-back-side .dipi-back-icon-border',
                'declaration' => "border-color: {$back_circle_border_color} !important;",
            ]);
        endif;

        \ET_Builder_Element::set_style($render_slug, [
            'selector' => '%%order_class%% .dipi-flip-box-back-side .dipi-flip-box-back-icon',
            'declaration' => "font-size: {$back_icon_size} !important;",
        ]);

        \ET_Builder_Element::set_style($render_slug, [
            'selector' => '%%order_class%% .dipi-flip-box-inner-wrapper',
            'declaration' => "height: {$flip_box_height} !important;",
        ]);

        \ET_Builder_Element::set_style($render_slug, [
            'selector' => '%%order_class%% .dipi-flip-box-front-side .dipi-image-wrap',
            'declaration' => "max-width: {$front_image_width} !important;",
        ]);

        \ET_Builder_Element::set_style($render_slug, [
            'selector' => '%%order_class%% .dipi-flip-box-back-side .dipi-image-wrap',
            'declaration' => "max-width: {$back_image_width} !important;",
        ]);
    }
}

new DIPI_FlipBox;