<?php

namespace iKreateThemeElements\Modules\ServiceBlock\Widgets;

// Elementor Classes
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Image_Size;
use Elementor\Icons_Manager;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Typography;
use Elementor\Core\Schemes\Typography;
use Elementor\Core\Schemes\Color;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Text_Stroke;
use Elementor\Group_Control_Text_Shadow;
use Elementor\Group_Control_Css_Filter;
use Elementor\Utils;
use Elementor\Repeater;

if (!defined('ABSPATH')) {
    exit; // Exit if accessed directly.
}

class ServiceBlock extends Widget_Base {

    /** Widget Name */
    public function get_name() {
        return 'ikreateThemes-service-block';
    }

    /** Widget Title */
    public function get_title() {
        return esc_html__('Service Block', 'business-roy');
    }

    /** Icon */
    public function get_icon() {
        return 'eicon-image-box';
    }

    public function get_keywords() {
		return [ 'service', 'image', 'photo', 'block' ];
	}

    public function get_script_depends() {
		return [ 'imagesloaded' ];
	}

    /** Category */
    public function get_categories() {
        return ['ikreateThemes-elements'];
    }

    /** Controls */
    protected function register_controls() {


        $this->start_controls_section(
            'services_content', [
                'label' => esc_html__('Content', 'business-roy'),
            ]
        );

            $this->add_control(
                'layout', [
                    'label' => esc_html__('Layout', 'business-roy'),
                    'type' => Controls_Manager::SELECT,
                    'default' => 'style1',
                    'label_block' => true,
                    'options' => [
                        'style1' => esc_html__('Style 1', 'business-roy'),
                        'style2' => esc_html__('Style 2', 'business-roy'),
                    ],
                ]
            );

            $this->add_control(
                'serviceicon', [
                    'label' => esc_html__('Service Icon', 'business-roy'),
                    'type' => Controls_Manager::SWITCHER,
                    'label_on' => esc_html__('Show', 'business-roy'),
                    'label_off' => esc_html__('Hide', 'business-roy'),
                    'return_value' => 'yes',
                    'condition' => [
                        'layout' => ['style1'],
                    ],
                ]
            );

            $this->add_control(
                'serviceicon2', [
                    'label' => esc_html__('Service Icon', 'business-roy'),
                    'type' => Controls_Manager::SWITCHER,
                    'label_on' => esc_html__('Show', 'business-roy'),
                    'label_off' => esc_html__('Hide', 'business-roy'),
                    'return_value' => 'yes',
                    'default' => 'yes',
                    'condition' => [
                        'layout' => ['style2'],
                    ],
                ]
            );
            
            $this->add_responsive_control(
                'box_width', [
                    'label' => esc_html__('Box Width', 'business-roy'),
                    'type' => Controls_Manager::SLIDER,
                    'size_units' => ['%', 'px', 'em'],
                    'range' => [
                        '%' => [
                            'min' => 10,
                            'max' => 100,
                            'step' => 1,
                        ]
                    ],
                    'default' => [
                        'unit' => '%',
                        'size' => 100,
                    ],
                    'tablet_default' => [
                        'unit' => '%',
                        'size' => 100,
                    ],
                    'mobile_default' => [
                        'unit' => '%',
                        'size' => 100,
                    ],
                    'selectors' => [
                        '{{WRAPPER}} .iktheme-service-area .iktheme-service-detail .iktheme-service-box' => 'width: {{SIZE}}{{UNIT}};'
                    ],
                    'condition' => [
                        'layout' => ['style1'],
                    ],
                ]
            );

            $this->add_control(
                'custom_height', [
                    'label' => esc_html__('Custom Image Height', 'business-roy'),
                    'type' => Controls_Manager::SWITCHER,
                    'label_on' => esc_html__('Yes', 'business-roy'),
                    'label_off' => esc_html__('No', 'business-roy'),
                    'return_value' => 'yes',
                    'condition' => [
                        'layout' => ['style2'],
                    ],
                ]
            );

            $this->add_control(
                'image_height', [
                    'label' => esc_html__('Image Height', 'business-roy'),
                    'type' => Controls_Manager::SLIDER,
                    'size_units' => ['px'],
                    'range' => [
                        'px' => [
                            'min' => 300,
                            'max' => 700,
                            'step' => 10
                        ],
                    ],
                    'default' => [
                        'unit' => 'px',
                        'size' => 400,
                    ],
                    'selectors' => [
                        '{{WRAPPER}} .iktheme-service-area.style2 .iktheme-top-content img, {{WRAPPER}} .iktheme-service-area.style2 .iktheme-bottom-content' => 'min-height: {{SIZE}}{{UNIT}};',
                    ],
                    'condition' => [
                        'custom_height' => 'yes',
                    ],
                ]
            );

            $repeater = new Repeater();

            $repeater->add_control(
                'service_image',[
                    'label' => esc_html__( 'Choose Image', 'business-roy' ),
                    'type' => Controls_Manager::MEDIA,
                    'default' => [
                        'url' => Utils::get_placeholder_image_src(),
                    ]
                ]
            );

            $repeater->add_group_control(
                Group_Control_Image_Size::get_type(),[
                    'name' => 'service_image_size', // Actually its `image_size`
                    'default' => 'full',
                    'condition' => [
                        'service_image[id]!' => '',
                    ],
                ]
            );

            $repeater->add_control(
                'service_icon',[
                    'label' => esc_html__( 'Service Icon', 'business-roy' ),
                    'type' => Controls_Manager::ICONS,
                    'default' => [
                        'value' => 'fa-solid fa-bezier-curve',
                        'library' => 'fa-solid',
                    ],
                ]
            );

            $repeater->add_control(
                'service_title', [
                    'label' => esc_html__('Title', 'business-roy'),
                    'type' => Controls_Manager::TEXT,
                    'label_block' => true,
                    'default' => esc_html__('Your Service Heading', 'business-roy')
                ]
            );

            $repeater->add_control(
                'service_description', [
                    'label' => esc_html__('Short Description', 'business-roy'),
                    'type' => Controls_Manager::TEXTAREA,
                    'rows' => 10,
                    'placeholder' => esc_html__('Type your description here', 'business-roy'),
                    'label_block' => true,
                    'default' => esc_html__('End your search here! Unlock Our Premium Themes to launch your website. All themes are user-friendly and fully customizable.', 'business-roy')
                ]
            );

            $repeater->add_control(
                'service_button_text', [
                    'label' => esc_html__('Button Text', 'business-roy'),
                    'type' => Controls_Manager::TEXT,
                    'label_block' => true,
                    'default' => esc_html__('Read More', 'business-roy')
                ]
            );

            $repeater->add_control(
                'service_button_link',[
                    'label' => esc_html__( 'Link', 'business-roy' ),
                    'type' => Controls_Manager::URL,
                    'default' => [
                        'url' => '#',
                        'is_external' => false,
                        'nofollow' => false,
                    ],
                ]
            );

            $repeater->add_control(
                'link_click',[
                    'label' => esc_html__( 'Apply Link On', 'business-roy' ),
                    'type' => Controls_Manager::SELECT,
                    'options' => [
                        // 'box' => esc_html__( 'Whole Box', 'business-roy' ),
                        'button' => esc_html__( 'Button Only', 'business-roy' ),
                    ],
                    'default' => 'button',
                    'condition' => [
                        'service_button_link[url]!' => '',
                    ],
                ]
            );

            $repeater->add_control(
                'link_icon',[
                    'label' => esc_html__( 'Link Icon', 'business-roy' ),
                    'type' => Controls_Manager::ICONS,
                    'skin' => 'inline',
                    'default' => [
                        'library' => 'fa-solid',
                        'value' => 'fas fa-long-arrow-alt-right',
                    ],
                    'label_block' => false,
                    'skin_settings' => [
                        'inline' => [
                            'none' => [
                                'label' => 'Default',
                                'icon' => '',
                            ],
                            'icon' => [
                                'icon' => 'eicon-long-arrow-right',
                            ],
                        ],
                    ],
                    'recommended' => [
                        'fa-regular' => [
                            'arrow-alt-circle-right',
                        ],
                        'fa-solid' => [
                            'angle-double-right',
                            'angle-right',
                            'arrow-alt-circle-right',
                            'arrow-circle-right',
                            'arrow-right',
                            'caret-right',
                            'chevron-circle-right',
                            'chevron-right',
                            'long-arrow-alt-right',
                        ],
                    ],
                    'condition' => [
                        'service_button_link[url]!' => '',
                        'service_button_text!' => '',
                    ],
                ]
            );

            $this->add_control(
                'service_blocks',[
                    'label' => esc_html__( 'Service Items', 'business-roy' ),
                    'type' => Controls_Manager::REPEATER,
                    'show_label' => true,
                    'fields' => $repeater->get_controls(),
                    'default' => [
                        [
                            'service_image' => Utils::get_placeholder_image_src(),
                            'service_icon' => [
                                'value' => 'fas fa-trophy',
                                'library' => 'fa-solid',
                            ],
                            'service_title' => esc_html__( 'Your Service 1 Heading', 'business-roy' ),
                            'service_description' => esc_html__( 'End your search here! Unlock Our Premium Themes to launch your website. All themes are user-friendly and fully customizable.', 'business-roy' ),
                            'service_button_text' => esc_html__( 'Read More', 'business-roy' ),
                            'service_button_link' => '#',
                            'link_icon' => [
                                'value' => 'fas fa-long-arrow-alt-right',
                                'library' => 'fa-solid',
                            ],
                            
                        ],
                        [
                            'service_image' => Utils::get_placeholder_image_src(),
                            'service_icon' => [
                                'value' => 'fas fa-university',
                                'library' => 'fa-solid',
                            ],
                            'service_title' => esc_html__( 'Your Service 2 Heading', 'business-roy' ),
                            'service_description' => esc_html__( 'End your search here! Unlock Our Premium Themes to launch your website. All themes are user-friendly and fully customizable.', 'business-roy' ),
                            'service_button_text' => esc_html__( 'Read More', 'business-roy' ),
                            'service_button_link' => '#',
                            'link_icon' => [
                                'value' => 'fas fa-long-arrow-alt-right',
                                'library' => 'fa-solid',
                            ],
                            
                        ],
                        [
                            'service_image' => Utils::get_placeholder_image_src(),
                            'service_icon' => [
                                'value' => 'fab fa-alipay',
                                'library' => 'fa-solid',
                            ],
                            'service_title' => esc_html__( 'Your Service 3 Heading', 'business-roy' ),
                            'service_description' => esc_html__( 'End your search here! Unlock Our Premium Themes to launch your website. All themes are user-friendly and fully customizable.', 'business-roy' ),
                            'service_button_text' => esc_html__( 'Read More', 'business-roy' ),
                            'service_button_link' => '#',
                            'link_icon' => [
                                'value' => 'fas fa-long-arrow-alt-right',
                                'library' => 'fa-solid',
                            ],
                            
                        ],
                        [
                            'service_image' => Utils::get_placeholder_image_src(),
                            'service_icon' => [
                                'value' => 'fab fa-chrome',
                                'library' => 'fa-solid',
                            ],
                            'service_title' => esc_html__( 'Your Service 4 Heading', 'business-roy' ),
                            'service_description' => esc_html__( 'End your search here! Unlock Our Premium Themes to launch your website. All themes are user-friendly and fully customizable.', 'business-roy' ),
                            'service_button_text' => esc_html__( 'Read More', 'business-roy' ),
                            'service_button_link' => '#',
                            'link_icon' => [
                                'value' => 'fas fa-long-arrow-alt-right',
                                'library' => 'fa-solid',
                            ],
                            
                        ],
                        [
                            'service_image' => Utils::get_placeholder_image_src(),
                            'service_icon' => [
                                'value' => 'fab fa-creative-commons-share',
                                'library' => 'fa-solid',
                            ],
                            'service_title' => esc_html__( 'Your Service 5 Heading', 'business-roy' ),
                            'service_description' => esc_html__( 'End your search here! Unlock Our Premium Themes to launch your website. All themes are user-friendly and fully customizable.', 'business-roy' ),
                            'service_button_text' => esc_html__( 'Read More', 'business-roy' ),
                            'service_button_link' => '#',
                            'link_icon' => [
                                'value' => 'fas fa-long-arrow-alt-right',
                                'library' => 'fa-solid',
                            ],
                            
                        ],
                        [
                            'service_image' => Utils::get_placeholder_image_src(),
                            'service_icon' => [
                                'value' => 'fab fa-ello',
                                'library' => 'fa-solid',
                            ],
                            'service_title' => esc_html__( 'Your Service 6 Heading', 'business-roy' ),
                            'service_description' => esc_html__( 'End your search here! Unlock Our Premium Themes to launch your website. All themes are user-friendly and fully customizable.', 'business-roy' ),
                            'service_button_text' => esc_html__( 'Read More', 'business-roy' ),
                            'service_button_link' => '#',
                            'link_icon' => [
                                'value' => 'fas fa-long-arrow-alt-right',
                                'library' => 'fa-solid',
                            ],
                            
                        ]
                    ],
                    'title_field' => '{{{ service_title }}}',
                ]
            );
            
            $this->add_control(
                'service_bg_url',[
                    'label' => esc_html__( 'Choose Image', 'business-roy' ),
                    'type' => Controls_Manager::MEDIA,
                    'default' => [
                        'url' => Utils::get_placeholder_image_src(),
                    ],
                    'condition' => ['layout' => ['style1']],
                ]
            );

            $this->add_group_control(
               Group_Control_Image_Size::get_type(),[
                    'name' => 'thumbnail',
                    'exclude' => [ 'custom' ],
                    'include' => [],
                    'default' => 'full',
                    'condition' => [
                        'service_bg_url[url]!' => '',
                    ],
                    'condition' => ['layout' => ['style1']],
                ]
            );

        $this->end_controls_section();

        $this->start_controls_section(
            'settings_section', [
                'label' => esc_html__('Settings', 'business-roy'),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );

            $this->add_control(
                'title_html_tag', [
                    'label' => esc_html__('Title HTML Tag', 'business-roy'),
                    'type' => Controls_Manager::SELECT,
                    'label_block' => true,
                    'default' => 'h3',
                    'options' => [
                        'h1' => esc_html__('H1', 'business-roy'),
                        'h2' => esc_html__('H2', 'business-roy'),
                        'h3' => esc_html__('H3', 'business-roy'),
                        'h4' => esc_html__('H4', 'business-roy'),
                        'h5' => esc_html__('H5', 'business-roy'),
                        'h6' => esc_html__('H6', 'business-roy'),
                        'div' => esc_html__('div', 'business-roy'),
                        'span' => esc_html__('span', 'business-roy'),
                        'p' => esc_html__('p', 'business-roy')
                    ],
                ]
            );

        $this->end_controls_section();

        $this->start_controls_section(
            'general_styles', [
                'label' => esc_html__('Service Style', 'business-roy'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

            $this->add_control(
                'item_bg_color', [
                    'label' => esc_html__('Background Color', 'business-roy'),
                    'type' => Controls_Manager::COLOR,
                    'default' => '',
                    'selectors' => [
                        '{{WRAPPER}} .iktheme-service-area .iktheme-service-item-block, 
                        {{WRAPPER}} .iktheme-service-area.style2 .iktheme-bottom-content'=> 'background-color: {{VALUE}}',
                    ]
                ]
            );

            $this->add_control(
                'layout_position',[
                    'label' => esc_html__( 'Position', 'business-roy' ),
                    'type' => Controls_Manager::CHOOSE,
                    'default' => 'right',
                    'options' => [
                        'left' => [
                            'title' => esc_html__( 'Left', 'business-roy' ),
                            'icon' => 'eicon-h-align-left',
                        ],
                        'right' => [
                            'title' => esc_html__( 'Right', 'business-roy' ),
                            'icon' => 'eicon-h-align-right',
                        ]
                    ],
                    'render_type' => 'template',
                    'prefix_class' => 'iktheme-imageicon-layout-',
                    'condition' => [
                        'layout' => ['style1'],
                    ],
                ]
            );

            $this->add_control(
                'content_vertical_alignment',[
                    'label' => esc_html__( 'Vertical Alignment', 'business-roy' ),
                    'type' => Controls_Manager::CHOOSE,
                    'options' => [
                        'top' => [
                            'title' => esc_html__( 'Top', 'business-roy' ),
                            'icon' => 'eicon-v-align-top',
                        ],
                        'middle' => [
                            'title' => esc_html__( 'Middle', 'business-roy' ),
                            'icon' => 'eicon-v-align-middle',
                        ],
                        'bottom' => [
                            'title' => esc_html__( 'Bottom', 'business-roy' ),
                            'icon' => 'eicon-v-align-bottom',
                        ],
                    ],
                    'default' => 'middle',
                    'toggle' => false,
                    'selectors' => [
                        '{{WRAPPER}} .iktheme-service-area .iktheme-service-item-block' => 'align-items: {{VALUE}};',
                    ],
                    'selectors_dictionary' => [
                        'top' => 'flex-start',
                        'middle' => 'center',
                        'bottom' => 'flex-end',
                    ],
                    'condition' => [
                        'layout_position' => ['left','right'],
                        'layout' => ['style1'],
                        'serviceicon' => 'yes',
                    ],
                ]
            );

            $this->add_responsive_control(
                'servive_space',[
                    'label' => esc_html__( 'Content Spacing', 'business-roy' ),
                    'type' => Controls_Manager::SLIDER,
                    'size_units' => [ 'px', 'em', 'rem', 'custom' ],
                    'default' => [
                        'size' => 10,
                        'unit' => 'px',
                    ],
                    'range' => [
                        'px' => [
                            'min' => 0,
                            'max' => 100,
                        ],
                        'em' => [
                            'min' => 0,
                            'max' => 10,
                        ],
                        'rem' => [
                            'min' => 0,
                            'max' => 10,
                        ],
                    ],
                    'selectors' => [
                        '{{WRAPPER}} .iktheme-service-area .iktheme-service-item-block .iktheme-service-wrap, 
                        {{WRAPPER}} .iktheme-service-area.style2 .iktheme-bottom-content,
                        {{WRAPPER}} .iktheme-service-area.style3 .iktheme-bottom-content,
                        {{WRAPPER}} .iktheme-service-area.style4 .iktheme-bottom-content' => 'gap: {{SIZE}}{{UNIT}};',
                    ],
                ]
            );

            $this->add_control(
                'text_align',[
                    'label' => esc_html__( 'Alignment', 'business-roy' ),
                    'type' => Controls_Manager::CHOOSE,
                    'default' => 'default',
                    'options' => [
                        'default' => [
                            'title' => esc_html__( 'Default', 'business-roy' ),
                            'icon' => 'eicon-text-align-justify',
                        ],
                        'start' => [
                            'title' => esc_html__( 'Left', 'business-roy' ),
                            'icon' => 'eicon-text-align-left',
                        ],
                        'center' => [
                            'title' => esc_html__( 'Center', 'business-roy' ),
                            'icon' => 'eicon-text-align-center',
                        ],
                        'end' => [
                            'title' => esc_html__( 'Right', 'business-roy' ),
                            'icon' => 'eicon-text-align-right',
                        ],
                    ],
                    'render_type' => 'template',
                    'prefix_class' => 'iktheme-service-alignment-',
                    'condition' => [
                        'layout' => ['style1','style2'],
                    ],
                ]
            );

            $this->add_responsive_control(
                'item_padding', [
                    'label' => esc_html__('Padding', 'business-roy'),
                    'type' => Controls_Manager::DIMENSIONS,
                    'size_units' => ['px', '%', 'em'],
                    'selectors' => [
                        '{{WRAPPER}} .iktheme-service-area .iktheme-service-item-block, 
                        {{WRAPPER}} .iktheme-service-area.style2 .iktheme-bottom-content'  => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    ],
                    'condition' => [
                        'layout' => ['style1','style2'],
                    ],
                ]
            );

            $this->add_responsive_control(
                'item_radius', [
                    'label' => esc_html__('Radius', 'business-roy'),
                    'type' => Controls_Manager::DIMENSIONS,
                    'size_units' => ['px', '%', 'em'],
                    'selectors' => [
                        '{{WRAPPER}} .iktheme-service-area .iktheme-service-item-block' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    ],
                    'condition' => [
                        'layout' => ['style1'],
                    ],
                ]
            );

            $this->add_group_control(
                Group_Control_Box_Shadow::get_type(),[
                    'name' => 'item_box_shadow',
                    'condition' => [
                        'layout' => ['style1'],
                    ],
                    'selector' => '{{WRAPPER}} .iktheme-service-area .iktheme-service-item-block',
                ]
            );

        $this->end_controls_section();


        $this->start_controls_section(
            'icon_style', [
                'label' => esc_html__('Icon', 'business-roy'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

            $this->add_responsive_control(
                'icon_size', [
                    'label' => esc_html__('Icon Size', 'business-roy'),
                    'type' => Controls_Manager::SLIDER,
                    'size_units' => ['px'],
                    'range' => [
                        'px' => [
                            'min' => 10,
                            'max' => 200,
                            'step' => 1,
                        ]
                    ],
                    'default' => [
                        'unit' => 'px',
                        'size' => 50,
                    ],
                    'selectors' => [
                        '{{WRAPPER}} .iktheme-icon-boxicon.elementor-icon, 
                        {{WRAPPER}} .iktheme-service-area.style2 .iktheme-bottom-content .iktheme-icon-boxicon .elementor-icon' => 'font-size: {{SIZE}}{{UNIT}};'
                    ],
                ]
            );

            $this->add_control(
                'icon_color', [
                    'label' => esc_html__('Color', 'business-roy'),
                    'type' => Controls_Manager::COLOR,
                    'selectors' => [
                        '{{WRAPPER}} .iktheme-service-area .iktheme-service-item-block .iktheme-icon-boxicon, 
                        {{WRAPPER}} .iktheme-service-area.style2 .iktheme-bottom-content .iktheme-icon-boxicon .elementor-icon' => 'color: {{VALUE}}; fill: {{VALUE}};'
                    ],
                ]
            );

            $this->add_control(
                'icon_bg_color', [
                    'label' => esc_html__('Background Color', 'business-roy'),
                    'type' => Controls_Manager::COLOR,
                    'selectors' => [
                        '{{WRAPPER}} .iktheme-service-area.style2 .iktheme-bottom-content .iktheme-icon-boxicon' => 'background-color: {{VALUE}}',
                    ],
                    'condition' => [
                        'layout' => ['style2'],
                    ],
                ]
            );

        $this->end_controls_section();

        $this->start_controls_section(
            'count_style', [
                'label' => esc_html__('Number Count', 'business-roy'),
                'tab' => Controls_Manager::TAB_STYLE,
                'condition' => [
                    'layout' => ['style3'],
                ],
            ]
        );

            $this->add_control(
                'count_color', [
                    'label' => esc_html__('Color', 'business-roy'),
                    'type' => Controls_Manager::COLOR,
                    'default' => '',
                    'selectors' => [
                        '{{WRAPPER}} .iktheme-service-count' => 'color: {{VALUE}}',
                    ],
                ]
            );

            $this->add_group_control(
                Group_Control_Typography::get_type(), [
                    'name' => 'count_typography',
                    'label' => esc_html__('Typography', 'business-roy'),
                    'selector' => '{{WRAPPER}} .iktheme-service-count',
                ]
            );

            $this->add_group_control(
                Group_Control_Text_Stroke::get_type(),[
                    'name' => 'count_stroke',
                    'selector' => '{{WRAPPER}} .iktheme-service-count',
                ]
            );

            $this->add_group_control(
                Group_Control_Text_Shadow::get_type(),[
                    'name' => 'count_shadow',
                    'selector' => '{{WRAPPER}} .iktheme-service-count',
                ]
            );

        $this->end_controls_section();

        $this->start_controls_section(
            'title_style', [
                'label' => esc_html__('Title', 'business-roy'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

            $this->add_control(
                'title_color', [
                    'label' => esc_html__('Color', 'business-roy'),
                    'type' => Controls_Manager::COLOR,
                    'default' => '',
                    'selectors' => [
                        '{{WRAPPER}} .iktheme-item-title' => 'color: {{VALUE}}',
                        '{{WRAPPER}} .iktheme-item-title a' => 'color: {{VALUE}}',
                    ],
                ]
            );

            $this->add_group_control(
                Group_Control_Typography::get_type(), [
                    'name' => 'title_typography',
                    'label' => esc_html__('Typography', 'business-roy'),
                    'selector' => '{{WRAPPER}} .iktheme-item-title',
                ]
            );

            $this->add_group_control(
                Group_Control_Text_Stroke::get_type(),[
                    'name' => 'text_stroke',
                    'selector' => '{{WRAPPER}} .iktheme-item-title',
                ]
            );

            $this->add_group_control(
                Group_Control_Text_Shadow::get_type(),[
                    'name' => 'title_shadow',
                    'selector' => '{{WRAPPER}} .iktheme-item-title',
                ]
            );

        $this->end_controls_section();

        $this->start_controls_section(
            'description_style', [
                'label' => esc_html__('Description', 'business-roy'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

            $this->add_control(
                'description_color', [
                    'label' => esc_html__('Color', 'business-roy'),
                    'type' => Controls_Manager::COLOR,
                    'default' => '',
                    'selectors' => [
                        '{{WRAPPER}} .iktheme-item-description' => 'color: {{VALUE}}',
                    ],
                ]
            );

            $this->add_group_control(
                Group_Control_Typography::get_type(), [
                    'name' => 'description_typography',
                    'label' => esc_html__('Typography', 'business-roy'),
                    'selector' => '{{WRAPPER}} .iktheme-item-description',
                ]
            );

        $this->end_controls_section();

        
        $this->start_controls_section(
			'content_button',[
				'label' => esc_html__( 'Button (Read More)', 'business-roy' ),
				'tab' => Controls_Manager::TAB_STYLE,
			]
		);

            $this->add_group_control(
                Group_Control_Typography::get_type(),[
                    'name' => 'button_typography',
                    'selector' => '{{WRAPPER}} .iktheme-button',
                ]
            );

            $this->add_group_control(
                Group_Control_Text_Shadow::get_type(),[
                    'name' => 'button_text_shadow',
                    'selector' => '{{WRAPPER}} .iktheme-button',
                ]
            );

            $this->add_responsive_control(
                'button_padding',[
                    'label' => esc_html__( 'Padding', 'business-roy' ),
                    'type' => Controls_Manager::DIMENSIONS,
                    'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
                    'selectors' => [
                        '{{WRAPPER}} .iktheme-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    ],
                ]
            );

            $this->add_responsive_control(
                'button_border_radius',[
                    'label' => esc_html__( 'Border Radius', 'business-roy' ),
                    'type' => Controls_Manager::SLIDER,
                    'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
                    'range' => [
                        'px' => [
                            'max' => 100,
                        ],
                        'em' => [
                            'max' => 10,
                        ],
                        'rem' => [
                            'max' => 10,
                        ],
                    ],
                    'selectors' => [
                        '{{WRAPPER}} .iktheme-button' => 'border-radius: {{SIZE}}{{UNIT}};',
                    ],
                ]
            );

            $this->add_control(
                'heading_primary_button',[
                    'type' => Controls_Manager::HEADING,
                    'label' => esc_html__( 'Primary Button', 'business-roy' ),
                    'separator' => 'before',
                ]
            );

            $this->start_controls_tabs( 'primary_button_tabs' );

                $this->start_controls_tab(
                    'normal',[
                        'label' => esc_html__( 'Normal', 'business-roy' ),
                    ]
                );

                    $this->add_control(
                        'button_text_color',[
                            'label' => esc_html__( 'Text Color', 'business-roy' ),
                            'type' => Controls_Manager::COLOR,
                            'selectors' => [
                                '{{WRAPPER}} .iktheme-button, {{WRAPPER}} .iktheme-button.iktheme-button-noborder .iktheme-link-icon svg' => 'color: {{VALUE}}; fill: {{VALUE}};',
                            ],
                        ]
                    );

                    $this->add_group_control(
                        Group_Control_Background::get_type(),[
                            'name' => 'button_background',
                            'types' => [ 'classic', 'gradient' ],
                            'exclude' => [ 'image' ],
                            'selector' => '{{WRAPPER}} .iktheme-button',
                            'fields_options' => [
                                'background' => [
                                    'default' => 'classic',
                                ],
                            ],
                        ]
                    );

                    $this->add_group_control(
                        Group_Control_Border::get_type(),[
                            'name' => 'button_border_color',
                            'selector' => '{{WRAPPER}} .iktheme-button',
                            'default' => 'none',
                        ]
                    );

                $this->end_controls_tab();

                $this->start_controls_tab(
                    'hover',[
                        'label' => esc_html__( 'Hover', 'business-roy' ),
                    ]
                );

                    $this->add_control(
                        'button_hover_text_color',[
                            'label' => esc_html__( 'Text Color', 'business-roy' ),
                            'type' => Controls_Manager::COLOR,
                            'selectors' => [
                                '{{WRAPPER}} .iktheme-button:hover, {{WRAPPER}} .iktheme-button.iktheme-button-noborder:hover .iktheme-link-icon svg' => 'color: {{VALUE}}; fill: {{VALUE}};',
                            ],
                        ]
                    );

                    $this->add_group_control(
                        Group_Control_Background::get_type(),[
                            'name' => 'button_hover_background',
                            'types' => [ 'classic', 'gradient' ],
                            'exclude' => [ 'image' ],
                            'selector' => '{{WRAPPER}} .iktheme-button.iktheme-button-noborder::before',
                            'fields_options' => [
                                'background' => [
                                    'default' => 'classic',
                                ],
                            ],
                        ]
                    );

                    $this->add_group_control(
                        Group_Control_Border::get_type(),[
                            'name' => 'button_hover_border_color',
                            'selector' => '{{WRAPPER}} .iktheme-button:hover',
                            'default' => 'none',
                        ]
                    );

                $this->end_controls_tab();

            $this->end_controls_tabs();

		$this->end_controls_section();

        // Hover Effects Design
		$this->start_controls_section(
			'hover_effects',[
				'label' => esc_html__( 'Image Hover Effects', 'business-roy' ),
				'tab' => Controls_Manager::TAB_STYLE,
                'condition' => [
                    'layout' => ['style1','style2'],
                ],
			]
		);

            $this->add_group_control(
                Group_Control_Border::get_type(), [
                    'name' => 'image_border',
                    'selector' => '{{WRAPPER}} .iktheme-top-content, {{WRAPPER}} .iktheme-feature-service-img',
                    'separator' => 'before',
                ]
            );

            $this->add_control(
            	'transformation',[
            		'label' => esc_html__( 'Hover Animation', 'business-roy' ),
            		'type' => Controls_Manager::SELECT,
            		'options' => [
            			'' => 'None',
            			'zoom-in' => 'Zoom In',
            			'zoom-out' => 'Zoom Out',
            			'move-left' => 'Move Left',
            			'move-right' => 'Move Right',
            			'move-up' => 'Move Up',
            			'move-down' => 'Move Down',
            		],
            		'default' => 'zoom-in',
            	]
            );

            $this->start_controls_tabs( 'bg_effects_tabs' );

                $this->start_controls_tab( 'bg_normal_effect',[
                        'label' => esc_html__( 'Normal', 'business-roy' ),
                    ]
                );

                    $this->add_group_control(
						Group_Control_Background::get_type(),[
							'name' => 'overlay_background',
							'types' => [ 'classic', 'gradient' ],
							'exclude' => [ 'image' ],
							'selector' => '{{WRAPPER}} .iktheme-service-area.style2 .iktheme-service-image::after, {{WRAPPER}} .iktheme-feature-image::after',
							'fields_options' => [
								'background' => [
									'default' => 'classic',
								],
								'color' => [
									'default' => 'rgba(0,0,0,0.3)',
								],
							],
						]
					);

                    $this->add_group_control(
                        Group_Control_Css_Filter::get_type(),[
                            'name' => 'bg_filters',
                            'selector' => '{{WRAPPER}} .iktheme-service-image, {{WRAPPER}} .iktheme-feature-image',
                        ]
                    );

                    $this->add_control(
                        'overlay_blend_mode',[
                            'label' => esc_html__( 'Blend Mode', 'business-roy' ),
                            'type' => Controls_Manager::SELECT,
                            'options' => [
                                '' => esc_html__( 'Normal', 'business-roy' ),
                                'multiply' => 'Multiply',
                                'screen' => 'Screen',
                                'overlay' => 'Overlay',
                                'darken' => 'Darken',
                                'lighten' => 'Lighten',
                                'color-dodge' => 'Color Dodge',
                                'color-burn' => 'Color Burn',
                                'soft-light' => 'Soft Light',
                                'difference' => 'Differency',
                                'exclusion' => 'Exclusive',
                                'plus-darker' => 'Plus Darker',
                                'plus-lighter' => 'Plus Lighter',
                                'hue' => 'Hue',
                                'saturation' => 'Saturation',
                                'color' => 'Color',
                                'exclusion' => 'Exclusion',
                                'luminosity' => 'Luminosity',
                            ],
                            'selectors' => [
                                '{{WRAPPER}} .iktheme-service-image, {{WRAPPER}} .iktheme-feature-image' => 'mix-blend-mode: {{VALUE}}',
                            ],
                        ]
                    );

                $this->end_controls_tab();

                $this->start_controls_tab( 'bg_normal_hover_effect',[
                        'label' => esc_html__( 'Hover', 'business-roy' ),
                    ]
                );

                    $this->add_group_control(
                        Group_Control_Background::get_type(),[
                            'name' => 'overlay_background_hover',
                            'types' => [ 'classic', 'gradient' ],
                            'selector' => '{{WRAPPER}} .iktheme-top-content:hover .iktheme-service-image::after, {{WRAPPER}} .iktheme-top-content:focus .iktheme-service-image::after,
                                            {{WRAPPER}} .iktheme-feature-service-img:hover .iktheme-feature-image::after, {{WRAPPER}} .iktheme-feature-service-img:focus .iktheme-feature-image::after',
                            'exclude' => [ 'image' ],
                            'fields_options' => [
                                'background' => [
                                    'default' => 'classic',
                                ],
                                'color' => [
                                    'default' => 'rgba(0,0,0,0.2)',
                                ],
                            ],
                        ]
                    );

                    $this->add_group_control(
                        Group_Control_Css_Filter::get_type(),[
                            'name' => 'bg_filters_hover',
                            'selector' => '{{WRAPPER}} .iktheme-top-content:hover .iktheme-service-image::after, {{WRAPPER}} .iktheme-feature-service-img:hover .iktheme-feature-image::after',
                        ]
                    );

                    $this->add_control(
                        'effect_duration',[
                            'label' => esc_html__( 'Transition Duration', 'business-roy' ) . ' (ms)',
                            'type' => Controls_Manager::SLIDER,
                            'render_type' => 'template',
                            'default' => [
                                'size' => 1200,
                            ],
                            'range' => [
                                'px' => [
                                    'min' => 0,
                                    'max' => 3000,
                                    'step' => 100,
                                ],
                            ],
                            'selectors' => [
                                '{{WRAPPER}} .iktheme-service-image, {{WRAPPER}} .iktheme-feature-image' => 'transition-duration: {{SIZE}}ms',
                            ],
                            'separator' => 'before',
                        ]
                    );

                $this->end_controls_tab();

            $this->end_controls_tabs();

	    $this->end_controls_section();

    }

    /** Render Layout */
    protected function render() {

            $wrapper_tag = 'div';

            $settings = $this->get_settings_for_display();

            $title_tag = Utils::validate_html_tag( $settings['title_html_tag'] );

            $pages = $settings['service_blocks'];

            $layout = $settings['layout'];

            $serviceicon = $settings['serviceicon'];

            $serviceicon2 = $settings['serviceicon2'];
            
            $this->add_render_attribute('wrapper', 'class', [
                    'iktheme-service-area',
                    $layout,
                ]
            );

            $this->add_render_attribute( 'title', 'class', ['iktheme-item-title'] );
            $this->add_render_attribute( 'description', 'class', ['iktheme-item-description'] );
            $this->add_render_attribute( 'button_wrap', 'class', ['iktheme-button-wrap'] );
            $this->add_render_attribute( 'button', 'class', ['iktheme-item-link'] );
        ?>

        <<?php Utils::print_validated_html_tag( $wrapper_tag ); ?> <?php $this->print_render_attribute_string( 'wrapper' ); ?>>
            
            <?php if( !empty( $layout ) && $layout == 'style1' ){ 

                if (!empty($pages)) {

                    $leftArray = $rightArray = array();

                    if( $pages && is_array($pages) && count($pages) > 1 ){

                        list($leftArray, $rightArray) = array_chunk($pages, ceil(count($pages) / 2));

                    }else{

                        $leftArray = $pages;
                    }
                ?>
                    <div class="iktheme-service-detail">
                        <div class="iktheme-leftdata iktheme-service-box">
                            <?php 
                                foreach($leftArray as $leftindex => $leftpage): 

                                    $this->add_render_attribute('wrapper_'.$leftindex, 'class', ['iktheme-service-item-block']);
                                    $this->add_render_attribute( 'leftbutton_'.$leftindex, 'class', ['iktheme-item-link'] );
                                    $this->add_render_attribute( 'leftonlybutton_'.$leftindex, 'class', ['iktheme-button','iktheme-button-noborder'] );

                                    $wrapper_tag = 'div';
                                    $button_tag = 'a';

                                    if ( ! empty( $leftpage['service_button_link']['url'] ) ) {

                                        $link_element = 'leftbutton_'.$leftindex;
                                        $link_button = 'leftonlybutton_'.$leftindex;
                                        
                                        if ( 'box' === $leftpage['link_click'] ) {
                                            $wrapper_tag = 'a';
                                            $button_tag = 'div';
                                            $link_element = 'wrapper_'.$leftindex;
                                            $link_button = 'wrapper1_'.$leftindex;
                                        }

                                        $this->add_link_attributes( $link_element, $leftpage['service_button_link'] );
                                        $this->add_link_attributes( $link_button, $leftpage['service_button_link'] );
                                    }
                            ?>
                                <<?php Utils::print_validated_html_tag( $wrapper_tag ); ?> <?php $this->print_render_attribute_string( 'wrapper_'.$leftindex ); ?>>
                                    <?php if( $serviceicon == 'yes' ){ ?>
                                        <div class="iktheme-icon-boxicon elementor-icon">
                                            <?php Icons_Manager::render_icon( $leftpage['service_icon'], ['aria-hidden' => 'true'] ); ?>
                                        </div>
                                    <?php } ?>
                                    <div class="iktheme-service-wrap">
                                        <?php if ( ! empty( $leftpage['service_title'] ) ) : ?>
                                            <<?php Utils::print_validated_html_tag( $title_tag ); ?> <?php $this->print_render_attribute_string( 'title' ); ?>>
                                                <<?php Utils::print_validated_html_tag( $button_tag ); ?> <?php $this->print_render_attribute_string( 'leftbutton_'.$leftindex ); ?>>
                                                    <?php echo esc_html( $leftpage['service_title'] ); ?>
                                                </<?php Utils::print_unescaped_internal_string( $button_tag ); ?>>
                                            </<?php Utils::print_validated_html_tag( $title_tag ); ?>>
                                        <?php endif; ?>

                                        <?php if ( ! empty( $leftpage['service_description'] ) ) : ?>
                                            <div <?php $this->print_render_attribute_string( 'description' ); ?>>
                                                <?php echo esc_html( $leftpage['service_description'] ); ?>
                                            </div>
                                        <?php endif; ?>

                                        <?php if ( ! empty( $leftpage['service_button_text'] ) ) : ?>
                                            <div <?php $this->print_render_attribute_string( 'button_wrap' ); ?>>
                                                <<?php Utils::print_validated_html_tag( $button_tag ); ?> <?php $this->print_render_attribute_string( 'leftonlybutton_'.$leftindex ); ?>>
                                                    <?php echo esc_html( $leftpage['service_button_text'] ); ?>
                                                    <span class="iktheme-link-icon elementor-icon">
                                                        <?php Icons_Manager::render_icon($leftpage['link_icon'], ['aria-hidden' => 'true']); ?>
                                                    </span>
                                                </<?php Utils::print_unescaped_internal_string( $button_tag ); ?>>
                                            </div>
                                        <?php endif; ?>
                                    </div>
                                    
                                </<?php Utils::print_validated_html_tag( $wrapper_tag ); ?>>                                   
                            <?php endforeach; ?>
                        </div>

                        <div class="iktheme-feature-service-img ikreatethemes-bg-transform-<?php echo esc_attr( $settings['transformation'] ); ?>">
                            <div class="iktheme-feature-image ikreatethemes-bg">
                                <?php Group_Control_Image_Size::print_attachment_image_html( $settings, 'service_bg_url' ); ?>
                            </div>
                        </div>

                        <div class="iktheme-rightdata iktheme-service-box">
                            <?php
                                foreach($rightArray as $rightindex => $rightpage):
                                    
                                    $this->add_render_attribute('wrapper_'.$rightindex, 'class', ['iktheme-service-item-block']);
                                    $this->add_render_attribute( 'rightbutton_'.$rightindex, 'class', ['iktheme-item-link'] );
                                    $this->add_render_attribute( 'rightonlybutton_'.$rightindex, 'class', ['iktheme-button','iktheme-button-noborder'] );
                                    
                                    $wrapper_tag = 'div';
                                    $button_tag = 'a';

                                    if ( ! empty( $rightpage['service_button_link']['url'] ) ) {

                                        $link_element = 'rightbutton_'.$rightindex;
                                        $link_button = 'rightonlybutton_'.$rightindex;
                                        
                                        if ( 'box' === $rightpage['link_click'] ) {
                                            $wrapper_tag = 'a';
                                            $button_tag = 'div';
                                            $link_element = 'wrapper_'.$rightindex;
                                            $link_button = 'wrapper1_'.$rightindex;
                                        }

                                        $this->add_link_attributes( $link_element, $rightpage['service_button_link'] );
                                        $this->add_link_attributes( $link_button, $rightpage['service_button_link'] );
                                    }
                            ?>
                                <<?php Utils::print_validated_html_tag( $wrapper_tag ); ?> <?php $this->print_render_attribute_string( 'wrapper_'.$rightindex ); ?>>
                                    <?php if( $serviceicon == 'yes' ){ ?>
                                        <div class="iktheme-icon-boxicon elementor-icon">
                                            <?php Icons_Manager::render_icon( $rightpage['service_icon'], ['aria-hidden' => 'true'] ); ?>
                                        </div>
                                    <?php } ?>
                                    <div class="iktheme-service-wrap">
                                        <?php if ( ! empty( $rightpage['service_title'] ) ) : ?>
                                            <<?php Utils::print_validated_html_tag( $title_tag ); ?> <?php $this->print_render_attribute_string( 'title' ); ?>>
                                                <<?php Utils::print_validated_html_tag( $button_tag ); ?> <?php $this->print_render_attribute_string( 'rightbutton_'.$rightindex ); ?>>
                                                    <?php echo esc_html( $rightpage['service_title'] ); ?>
                                                </<?php Utils::print_unescaped_internal_string( $button_tag ); ?>>
                                            </<?php Utils::print_validated_html_tag( $title_tag ); ?>>
                                        <?php endif; ?>

                                        <?php if ( ! empty( $rightpage['service_description'] ) ) : ?>
                                            <div <?php $this->print_render_attribute_string( 'description' ); ?>>
                                                <?php echo esc_html( $rightpage['service_description'] ); ?>
                                            </div>
                                        <?php endif; ?>

                                        <?php if ( ! empty( $rightpage['service_button_text'] ) ) : ?>
                                            <div <?php $this->print_render_attribute_string( 'button_wrap' ); ?>>
                                                <<?php Utils::print_validated_html_tag( $button_tag ); ?> <?php $this->print_render_attribute_string( 'rightonlybutton_'.$rightindex ); ?>>
                                                    <?php echo esc_html( $rightpage['service_button_text'] ); ?>
                                                    <span class="iktheme-link-icon elementor-icon">
                                                        <?php Icons_Manager::render_icon($rightpage['link_icon'], ['aria-hidden' => 'true']); ?>
                                                    </span>
                                                </<?php Utils::print_unescaped_internal_string( $button_tag ); ?>>
                                            </div>
                                        <?php endif; ?>
                                    </div>
                                    
                                </<?php Utils::print_validated_html_tag( $wrapper_tag ); ?>>
                            <?php endforeach; ?>
                        </div>
                    </div>

            <?php } }else if( !empty( $layout ) && $layout == 'style2' ){  ?>
                <div class="iktheme-service-item-wrap">  
                    <?php 
                        $button_tag = 'a';
                        
                        foreach($pages as $pageindex => $page):

                            $this->add_link_attributes( "link_{$pageindex}", $page['service_button_link'] );
                            $this->add_render_attribute( "link_{$pageindex}", 
                                'class', [
                                    'iktheme-item-link ikreatethemes-bg-transform-'.$settings['transformation']
                                ] );
                            
                            $this->add_link_attributes( "linkonlybutton_{$pageindex}", $page['service_button_link'] );
                            $this->add_render_attribute( "linkonlybutton_{$pageindex}", 'class', ['iktheme-button','iktheme-button-noborder'] );
                    ?>
                        <div class="iktheme-service-block">
                            <?php if (!empty( $page['service_image'] )) { ?>
                                <div class="iktheme-top-content">
                                    <<?php Utils::print_validated_html_tag( $button_tag ); ?> <?php $this->print_render_attribute_string( "link_{$pageindex}" ); ?>>
                                        <div class="iktheme-service-image ikreatethemes-bg">
                                            <?php Group_Control_Image_Size::print_attachment_image_html( $page, 'service_image' ); ?>
                                        </div>
                                    </<?php Utils::print_unescaped_internal_string( $button_tag ); ?>>
                                </div>
                            <?php } ?>
                            <div class="iktheme-bottom-content">

                                <?php if( $serviceicon2 == 'yes' ): ?>
                                    <div class="iktheme-icon-boxicon elementor-icon">
                                        <div class="elementor-icon">
                                            <?php Icons_Manager::render_icon( $page['service_icon'], ['aria-hidden' => 'true'] ); ?>
                                        </div>
                                    </div>
                                <?php endif; ?>

                                <?php if ( ! empty( $page['service_title'] ) ) : ?>
                                    <<?php Utils::print_validated_html_tag( $title_tag ); ?> <?php $this->print_render_attribute_string( 'title' ); ?>>
                                        <<?php Utils::print_validated_html_tag( $button_tag ); ?> <?php $this->print_render_attribute_string( "link_{$pageindex}" ); ?>>
                                            <?php echo esc_html( $page['service_title'] ); ?>
                                        </<?php Utils::print_unescaped_internal_string( $button_tag ); ?>>
                                    </<?php Utils::print_validated_html_tag( $title_tag ); ?>>
                                <?php endif; ?>
                                
                                <?php if ( ! empty( $page['service_description'] ) ) : ?>
                                    <div <?php $this->print_render_attribute_string( 'description' ); ?>>
                                        <?php echo esc_html( $page['service_description'] ); ?>
                                    </div>
                                <?php endif; ?>

                                <?php if ( ! empty( $page['service_button_text'] ) ) : ?>
                                    <div <?php $this->print_render_attribute_string( 'button_wrap' ); ?>>
                                        <<?php Utils::print_validated_html_tag( $button_tag ); ?> <?php $this->print_render_attribute_string( "linkonlybutton_{$pageindex}" ); ?>>
                                            <?php echo esc_html( $page['service_button_text'] ); ?>
                                            <span class="iktheme-link-icon elementor-icon">
                                                <?php Icons_Manager::render_icon($page['link_icon'], ['aria-hidden' => 'true']); ?>
                                            </span>
                                        </<?php Utils::print_unescaped_internal_string( $button_tag ); ?>>
                                    </div>
                                <?php endif; ?>
                                
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            <?php } ?>
        </<?php Utils::print_validated_html_tag( $wrapper_tag ); ?>>

        <?php
    }

}