<?php
// End recent blog with thumlist for post single page


function service_box_fun($atts) {
    wp_enqueue_style('owl-services-box', get_stylesheet_directory_uri() . '/elementor/service-box/service_box_style.css');

}
add_action('wp_footer', 'service_box_fun');



// Register the widget
add_action('elementor/widgets/widgets_registered', function () {
    class service_box extends \Elementor\Widget_Base {

        public function get_name() {
            return 'services-box';
        }

        public function get_title() {
            return __('Service Box', 'text-domain');
        }

        public function get_icon() {
            return 'eicon-button';
        }

        public function get_categories() {
            return ['basic'];
        }

        protected function _register_controls() {

            
            $this->start_controls_section(
                'content_over_effect_section',
                [
                    'label' => esc_html__( 'Content Hover Effect', 'textdomain' ),
                ]
            );
            
            $this->add_control(
                'content_over_effect',
                [
                    'label' => esc_html__( 'Dispaly', 'textdomain' ),
                    'type' => \Elementor\Controls_Manager::SWITCHER,
                    'label_on' => esc_html__( 'Show', 'textdomain' ),
                    'label_off' => esc_html__( 'Hide', 'textdomain' ),
                    'return_value' => 'yes',
                    'default' => 'yes',
                    'render_type' => 'template',
                ]
            );
            
            $this->end_controls_section();
            



            $this->start_controls_section(
                'title_section',
                [
                    'label' => __('Title', 'text-domain'),
                    'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
                ]
            );
            $this->add_control(
                'title',
                [
                    'label' => __('Title', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::TEXT,
                    'default' => __('Title', 'text-domain'),
                    'label_block' => true,
                    'dynamic' => [
                        'active' => true,
                    ],
                    'default' => __('Default Title', 'text-domain'),
                ]
            );
         

            $this->end_controls_section();



            
            $this->start_controls_section(
                'content_section',
                [
                    'label' => __('Content', 'text-domain'),
                    'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
                ]
            );

                
             $this->add_control(
                'content',
                [
                    'label' => __('Content', 'text-domain'),
                    'default' => 'orem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type',
                    'type' => \Elementor\Controls_Manager::WYSIWYG,
                 
                    'label_block' => true,
                ]
            );

           
            $this->end_controls_section();

          

            $this->start_controls_section(
                'image_section',
                [
                    'label' => __('Image', 'text-domain'),
                    'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
                ]
            );

            
            $this->add_control(
                'image',
                [
                    'label' => __('Image', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::MEDIA,
                    'default' => [
                        'url' => \Elementor\Utils::get_placeholder_image_src(),
                    ],
                ]
            );

            $this->end_controls_section();

            // start css 

            $this->start_controls_section(
                'box_outer',
                [
                    'label' => __('Box Outer', 'text-domain'),
                    'tab' => \Elementor\Controls_Manager::TAB_STYLE,
                ]
            );

            $this->add_responsive_control(
                'box_outer_position',
                [
                    'label' => __('Position', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::SELECT,
                    'options' => [
                        'static' => __('Static', 'text-domain'),
                        'relative' => __('Relative', 'text-domain'),
                        'absolute' => __('Absolute', 'text-domain'),
                        'fixed' => __('Fixed', 'text-domain'),
                    ],
                    'default' => 'relative', // Set the default value to 'relative'
                    'selectors' => [
                        '{{WRAPPER}} .services_box_list' => 'position: {{VALUE}};',
                    ],
                ]
            );

            $this->add_responsive_control(
                'box_overflow_style',
                [
                    'label' => __('Overflow Style', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::SELECT,
                    'options' => [
                        'visible' => __('Visible', 'text-domain'),
                        'hidden' => __('Hidden', 'text-domain'),
                        'scroll' => __('Scroll', 'text-domain'),
                        'auto' => __('Auto', 'text-domain'),
                    ],
                    'default' => 'hidden', // Set the default value to 'visible'
                    'selectors' => [
                        '{{WRAPPER}} .services_box_list' => 'overflow: {{VALUE}};',
                    ],
                ]
            );

            $this->add_responsive_control(
                'box_outer_padding',
                [
                    'label' => __('Padding', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::DIMENSIONS,
                    'size_units' => ['px', '%', 'em'],
                    'selectors' => [
                        '{{WRAPPER}} .services_box_list' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    ],
                ]
            );

            

            $this->end_controls_section();

            $this->start_controls_section(
                'hover_style_section',
                [
                    'label' => __('Box Inner', 'text-domain'),
                    'tab' => \Elementor\Controls_Manager::TAB_STYLE,
                ]
            );

            $this->add_responsive_control(
                'box_inner_alignment',
                [
                    'label' => __('Text Alignment', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::CHOOSE,
                    'options' => [
                        'left' => [
                            'title' => __('Left', 'text-domain'),
                            'icon' => 'eicon-text-align-left',
                        ],
                        'center' => [
                            'title' => __('Center', 'text-domain'),
                            'icon' => 'eicon-text-align-center',
                        ],
                        'right' => [
                            'title' => __('Right', 'text-domain'),
                            'icon' => 'eicon-text-align-right',
                        ],
                        'justify' => [
                            'title' => __('Justify', 'text-domain'),
                            'icon' => 'eicon-text-align-justify',
                        ],
                    ],
                    'selectors' => [
                        '{{WRAPPER}} .services_box' => 'text-align: {{VALUE}};',
                    ],
                    'default' => 'left',
                ]
            );

            
            $this->add_responsive_control(
                'box_bg_color',
                [
                    'label' => __('BG Color', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::COLOR,
                    'selectors' => [
                        '{{WRAPPER}} .services_box' => 'background-color: {{VALUE}};',
                    ],
                ]
            );

            
            $this->add_responsive_control(
                'content_inner_width',
                [
                    'label' => __('Width', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::SLIDER,
                    'size_units' => ['px', '%'], // Adjust units as needed
                    'range' => [
                        'px' => [
                            'min' => 0,
                            'max' => 1000, // Adjust max width as needed
                            'step' => 1,
                        ],
                    ],
                    'selectors' => [
                        '{{WRAPPER}} .content_inner' => 'width: {{SIZE}}{{UNIT}};',
                    ],
                ]
            );
            

            $this->add_responsive_control(
                'content_inner_height',
                [
                    'label' => __(' Height', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::SLIDER,
                    'size_units' => ['px', '%', 'vh'], // Adjust units as needed
                    'range' => [
                        'px' => [
                            'min' => 0,
                            'max' => 1000, // Adjust max height as needed
                            'step' => 1,
                        ],
                    ],
                    'selectors' => [
                        '{{WRAPPER}} .content_inner' => 'height: {{SIZE}}{{UNIT}};',
                    ],
                ]
            );
            

            $this->add_responsive_control(
                'border_style',
                [
                    'label' => __('Border Style', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::SELECT,
                    'options' => [
                        'none' => __('None', 'text-domain'),
                        'solid' => __('Solid', 'text-domain'),
                        'dashed' => __('Dashed', 'text-domain'),
                        'dotted' => __('Dotted', 'text-domain'),
                        'double' => __('Double', 'text-domain'),
                        // Add more options as needed
                    ],
                    'selectors' => [
                        '{{WRAPPER}} .content_inner' => 'border-style: {{VALUE}};',
                    ],
                ]
            );
            
            $this->add_responsive_control(
                'box_border_width',
                [
                    'label' => __('Border Width', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::DIMENSIONS,
                    'size_units' => ['px', '%', 'em'],
                    'selectors' => [
                        '{{WRAPPER}} .content_inner' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    ],
                    'condition' => [
                        'border_style!' => 'none',
                    ],
                    
                ]
            );
            
            $this->add_control(
                'border_color',
                [
                    'label' => __('Border Color', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::COLOR,
                    'selectors' => [
                        '{{WRAPPER}} .content_inner' => 'border-color: {{VALUE}};',
                    ],
                    'condition' => [
                        'border_style!' => 'none',
                    ],
                    
                ]
            );
            
          
              $this->add_responsive_control(
                'box_bg_padding',
                [
                    'label' => __('Padding', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::DIMENSIONS,
                    'size_units' => ['px', '%', 'em'],
                    'selectors' => [
                        '{{WRAPPER}} .services_box' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    ],
                ]
            );

            $this->add_responsive_control(
                'box_padding_inner',
                [
                    'label' => __('Padding For Inner', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::DIMENSIONS,
                    'size_units' => ['px', '%', 'em'],
                    'selectors' => [
                        '{{WRAPPER}} .content_inner' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    ],
                ]
            );


             $this->add_responsive_control(
                'box_bg_margin',
                [
                    'label' => __('Margin', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::DIMENSIONS,
                    'size_units' => ['px', '%', 'em'],
                    'selectors' => [
                        '{{WRAPPER}} .services_box' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    ],
                ]
            );
            
            $this->add_control(
                'display_type',
                [
                    'label' => __('Display Type', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::SELECT,
                    'default' => 'flex',
                    'options' => [
                        'flex' => __('Flex', 'text-domain'),
                        'block' => __('Block', 'text-domain'),
                        'grid' => __('Grid', 'text-domain'),
                    ],
                    'selectors' => [
                        '{{WRAPPER}} .services_box' => 'display: {{VALUE}};',
                    ],
                    
                ]
            );
            $this->add_control(
                'flex_direction',
                [
                    'label' => __('Flex Direction', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::SELECT,
                    'default' => 'column',
                    'options' => [
                        'row' => __('Row', 'text-domain'),
                        'row-reverse' => __('Row Reverse', 'text-domain'),
                        'column' => __('Column', 'text-domain'),
                        'column-reverse' => __('Column Reverse', 'text-domain'),
                    ],
                    'condition' => [
                        'display_type' => 'flex',
                    ],
                    'selectors' => [
                        '{{WRAPPER}} .services_box' => 'flex-direction: {{VALUE}};',
                    ],
                ]
            );
            $this->add_control(
                'justify_content',
                [
                    'label' => __('Justify Content', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::SELECT,
                    'options' => [
                        'flex-start' => __('Flex Start', 'text-domain'),
                        'flex-end' => __('Flex End', 'text-domain'),
                        'center' => __('Center', 'text-domain'),
                        'space-between' => __('Space Between', 'text-domain'),
                        'space-around' => __('Space Around', 'text-domain'),
                    ],
                    'default' => 'center',
                    'condition' => [
                        'display_type' => 'flex',
                    ],
                    'selectors' => [
                        '{{WRAPPER}} .services_box' => 'justify-content: {{VALUE}};',
                    ],
                ]
            );

            $this->add_control(
                'align_items',
                [
                    'label' => __('Align Items', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::SELECT,
                    'options' => [
                        'flex-start' => __('Flex Start', 'text-domain'),
                        'flex-end' => __('Flex End', 'text-domain'),
                        'center' => __('Center', 'text-domain'),
                        'baseline' => __('Baseline', 'text-domain'),
                        'stretch' => __('Stretch', 'text-domain'),
                    ],
                    'default' => 'center',
                    'condition' => [
                        'display_type' => 'flex',
                    ],
                    'selectors' => [
                        '{{WRAPPER}} .services_box' => 'align-items: {{VALUE}};',
                    ],
                ]
            );



            $this->end_controls_section();
           

            $this->start_controls_section(
                'content_box_hover_style_section',
                [
                    'label' => __('Content Hover Effect', 'text-domain'),
                    'tab' => \Elementor\Controls_Manager::TAB_STYLE,
                ]
            );

                  $this->add_responsive_control(
                    'box_bg_position',
                    [
                        'label' => __('Position', 'text-domain'),
                        'type' => \Elementor\Controls_Manager::SELECT,
                        'options' => [
                            'static' => __('Static', 'text-domain'),
                            'relative' => __('Relative', 'text-domain'),
                            'absolute' => __('Absolute', 'text-domain'),
                            'fixed' => __('Fixed', 'text-domain'),
                        ],
                        'selectors' => [
                            '{{WRAPPER}} .hover_effect' => 'position: {{VALUE}};  -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;',
                        ],
                    ]
                );

                $this->start_controls_tabs(
                    'style_tabs'
                );

                $this->start_controls_tab(
                    'style_normal_tab',
                    [
                        'label' => esc_html__( 'Normal', 'textdomain' ),
                    ]
                );
                $this->add_responsive_control(
                    'box_bg_position_values',
                    [
                        'label' => __('Position Values', 'text-domain'),
                        'type' => \Elementor\Controls_Manager::DIMENSIONS,
                        'size_units' => ['px', '%', 'em'],
                        'default' => [
                            'top' => 0,
                            'right' => 0,
                            'bottom' => 0,
                            'left' => 0,
                        ],
                        'selectors' => [
                            '{{WRAPPER}} .hover_effect' => 'position: {{box_bg_position.VALUE}}; left: {{LEFT}}{{UNIT}}; top: {{TOP}}{{UNIT}}; right: {{RIGHT}}{{UNIT}}; bottom: {{BOTTOM}}{{UNIT}};',
                        ],
                        'condition' => [
                            'box_bg_position!' => 'static',
                        ],
                    ]
                );

                $this->add_responsive_control(
                    'box_opacity',
                    [
                        'label' => __('Opacity', 'text-domain'),
                        'type' => \Elementor\Controls_Manager::SLIDER,
                        'size_units' => [],
                        'range' => [
                            'px' => [
                                'min' => 0,
                                'max' => 1,
                                'step' => 0.01,
                            ],
                        ],
                        'default' => [
                            'unit' => '',
                            'size' => 1,
                        ],
                        'selectors' => [
                            '{{WRAPPER}} .hover_effect' => 'opacity: {{SIZE}};',
                        ],
                    ]
                );

                
                
                $this->end_controls_tab();


                $this->start_controls_tab(
                    'style_hover_tab',
                    [
                        'label' => esc_html__( 'Hover', 'textdomain' ),
                    ]
                );
                
                $this->add_responsive_control(
                    'box_bg_position_values_hover',
                    [
                        'label' => __('Position Values', 'text-domain'),
                        'type' => \Elementor\Controls_Manager::DIMENSIONS,
                        'size_units' => ['px', '%', 'em'],
                        'default' => [
                            'top' => 0,
                            'right' => 0,
                            'bottom' => 0,
                            'left' => 0,
                        ],
                        'selectors' => [
                            '{{WRAPPER}}:hover .hover_effect' => 'position: {{box_bg_position_hover.VALUE}}; left: {{LEFT}}{{UNIT}}; top: {{TOP}}{{UNIT}}; right: {{RIGHT}}{{UNIT}}; bottom: {{BOTTOM}}{{UNIT}};',
                        ],
                       
                    ]
                );

                $this->add_responsive_control(
                    'box_opacity_hover',
                    [
                        'label' => __('Opacity', 'text-domain'),
                        'type' => \Elementor\Controls_Manager::SLIDER,
                        'size_units' => [],
                        'range' => [
                            'px' => [
                                'min' => 0,
                                'max' => 1,
                                'step' => 0.01,
                            ],
                        ],
                        'default' => [
                            'unit' => '',
                            'size' => 1,
                        ],
                        'selectors' => [
                            '{{WRAPPER}}:hover .hover_effect' => 'opacity: {{SIZE}};',
                        ],
                    ]
                );


                $this->end_controls_tab();


                $this->end_controls_tabs();

            

            $this->end_controls_section();

            

            $this->start_controls_section(
                'title_style_section',
                [
                    'label' => __('Title', 'text-domain'),
                    'tab' => \Elementor\Controls_Manager::TAB_STYLE,
                ]
            );
            
            $this->add_responsive_control(
                'title_padding',
                [
                    'label' => __('Padding', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::DIMENSIONS,
                    'size_units' => ['px', '%', 'em'],
                    'selectors' => [
                        '{{WRAPPER}} .service_name' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    ],
                ]
            );
            
            $this->add_responsive_control(
                'title_color',
                [
                    'label' => __('Color', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::COLOR,
                    'selectors' => [
                        '{{WRAPPER}} .service_name' => 'color: {{VALUE}};',
                    ],
                ]
            );
            
            $this->add_group_control(
                \Elementor\Group_Control_Typography::get_type(),
                [
                    'name' => 'font_typography',
                    'selector' => '{{WRAPPER}} .service_name',
                ]
            );
            
            $this->end_controls_section();


            // Additional Title
            $this->start_controls_section(
                'additional_title_tab_content',
                [
                    'label' => __('Additional Title', 'text-domain'),
                    'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
                ]
            );
            $this->add_control(
                'additional_title',
                [
                    'label' => esc_html__( 'Dispaly', 'textdomain' ),
                    'type' => \Elementor\Controls_Manager::SWITCHER,
                    'label_on' => esc_html__( 'Show', 'textdomain' ),
                    'label_off' => esc_html__( 'Hide', 'textdomain' ),
                    'return_value' => 'yes',
                    'default' => 'yes',
                    'render_type' => 'template',
                ]
            );

            $this->end_controls_section();

            $this->start_controls_section(
                'fix_title_style_section',
                [
                    'label' => __('Additional Title', 'text-domain'),
                    'tab' => \Elementor\Controls_Manager::TAB_STYLE,
                    'condition' => [
                        'additional_title' => 'yes',
                    ],
                ]
            );

            $this->add_control(
                'fix_title_display_type',
                [
                    'label' => __('Display Type', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::SELECT,
                    'default' => 'none',
                    'options' => [
                        'flex' => __('Flex', 'text-domain'),
                        'block' => __('Block', 'text-domain'),
                        'grid' => __('Grid', 'text-domain'),
                        'none' => __('None', 'text-domain'),
                    ],
                    'selectors' => [
                        '{{WRAPPER}} .service_name_fix' => 'display: {{VALUE}};',
                    ],
                    
                ]
            );


            $this->add_responsive_control(
                'fix_title_padding',
                [
                    'label' => __('Padding', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::DIMENSIONS,
                    'size_units' => ['px', '%', 'em'],
                    'selectors' => [
                        '{{WRAPPER}} .service_name_fix' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    ],
                    'condition' => [
                        'fix_title_display_type!' => 'none',
                    ],
                ]
            );
            
            $this->add_responsive_control(
                'fix_title_margin',
                [
                    'label' => __('Margin', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::DIMENSIONS,
                    'size_units' => ['px', '%', 'em'],
                    'selectors' => [
                        '{{WRAPPER}} .service_name_fix' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    ],
                    'condition' => [
                        'fix_title_display_type!' => 'none',
                    ],
                ]
            );
            
            $this->add_responsive_control(
                'fix_title_color',
                [
                    'label' => __('Color', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::COLOR,
                    'selectors' => [
                        '{{WRAPPER}} .service_name_fix' => 'color: {{VALUE}};',
                    ],
                    'condition' => [
                        'fix_title_display_type!' => 'none',
                    ],
                ]
            );
            
            $this->add_responsive_control(
                'fix_title_bg_color',
                [
                    'label' => __('BG Color', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::COLOR,
                    'selectors' => [
                        '{{WRAPPER}} .service_name_fix' => 'background-color: {{VALUE}};',
                    ],
                    'condition' => [
                        'fix_title_display_type!' => 'none',
                    ],
                ]
            );

            $this->add_group_control(
                \Elementor\Group_Control_Typography::get_type(),
                [
                    'name' => 'font_typography_fix',
                    'selector' => '{{WRAPPER}} .service_name_fix',
                    'condition' => [
                        'fix_title_display_type!' => 'none',
                    ],
                ]
            );

            $this->end_controls_section();
            // End Additional Title
 

            $this->start_controls_section(
                'content_style_section',
                [
                    'label' => __('Content', 'text-domain'),
                    'tab' => \Elementor\Controls_Manager::TAB_STYLE,
                ]
            );
            
            $this->add_responsive_control(
                'title_alignment',
                [
                    'label' => __('Text Alignment', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::CHOOSE,
                    'options' => [
                        'left' => [
                            'title' => __('Left', 'text-domain'),
                            'icon' => 'eicon-text-align-left',
                        ],
                        'center' => [
                            'title' => __('Center', 'text-domain'),
                            'icon' => 'eicon-text-align-center',
                        ],
                        'right' => [
                            'title' => __('Right', 'text-domain'),
                            'icon' => 'eicon-text-align-right',
                        ],
                        'justify' => [
                            'title' => __('Justify', 'text-domain'),
                            'icon' => 'eicon-text-align-justify',
                        ],
                    ],
                    'selectors' => [
                        '{{WRAPPER}} .service_dec' => 'text-align: {{VALUE}};',
                    ],
                    'default' => 'left',
                ]
            );


            $this->add_responsive_control(
                'content_padding',
                [
                    'label' => __('Padding', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::DIMENSIONS,
                    'size_units' => ['px', '%', 'em'],
                    'selectors' => [
                        '{{WRAPPER}} .service_dec' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    ],
                ]
            );
            
            
            $this->add_responsive_control(
                'content_color',
                [
                    'label' => __('Color', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::COLOR,
                    'selectors' => [
                        '{{WRAPPER}} .service_dec' => 'color: {{VALUE}};',
                    ],
                ]
            );
            
            $this->add_group_control(
                \Elementor\Group_Control_Typography::get_type(),
                [
                    'name' => 'font_typography',
                    'selector' => '{{WRAPPER}} .service_dec',
                ]
            );
            $this->end_controls_section();


           
        

           



            $this->start_controls_section(
                'img_style_section',
                [
                    'label' => __('Image', 'text-domain'),
                    'tab' => \Elementor\Controls_Manager::TAB_STYLE,
                ]
            );

            $this->add_responsive_control(
                'img_width',
                [
                    'label' => __('Width', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::SLIDER,
                    'size_units' => ['px', '%'], // Adjust units as needed
                    'range' => [
                        'px' => [
                            'min' => 0,
                            'max' => 1000, // Adjust max width as needed
                            'step' => 1,
                        ],
                    ],
                    'selectors' => [
                        '{{WRAPPER}} .services_box_img' => 'width: {{SIZE}}{{UNIT}};',
                    ],
                ]
            );
            

            $this->add_responsive_control(
                'img_height',
                [
                    'label' => __(' Height', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::SLIDER,
                    'size_units' => ['px', '%', 'vh'], // Adjust units as needed
                    'range' => [
                        'px' => [
                            'min' => 0,
                            'max' => 1000, // Adjust max height as needed
                            'step' => 1,
                        ],
                    ],
                    'selectors' => [
                        '{{WRAPPER}} .services_box_img' => 'height: {{SIZE}}{{UNIT}};',
                    ],
                ]
            );
            


             //  padding control
             $this->add_responsive_control(
                'img_padding',
                [
                    'label' => __('Padding', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::DIMENSIONS,
                    'size_units' => ['px', '%', 'em'],
                    'selectors' => [
                        '{{WRAPPER}} .services_box_img' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    ],
                ]
            );

              //  padding control
              $this->add_responsive_control(
                'img_margin',
                [
                    'label' => __('Margin', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::DIMENSIONS,
                    'size_units' => ['px', '%', 'em'],
                    'selectors' => [
                        '{{WRAPPER}} .services_box_img' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    ],
                ]
            );

            $this->add_responsive_control(
                'img_border_style',
                [
                    'label' => __('Border Style', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::SELECT,
                    'options' => [
                        'none' => __('None', 'text-domain'),
                        'solid' => __('Solid', 'text-domain'),
                        'dashed' => __('Dashed', 'text-domain'),
                        'dotted' => __('Dotted', 'text-domain'),
                        'double' => __('Double', 'text-domain'),
                        // Add more options as needed
                    ],
                    'selectors' => [
                        '{{WRAPPER}} .services_box_img' => 'border-style: {{VALUE}};',
                    ],
                ]
            );
            
            $this->add_responsive_control(
                'img_border_width',
                [
                    'label' => __('Border Width', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::DIMENSIONS,
                    'size_units' => ['px', '%', 'em'],
                    'selectors' => [
                        '{{WRAPPER}} .services_box_img' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    ],
                    'condition' => [
                        'img_border_style!' => 'none',
                    ],
                    
                ]
            );
            
            $this->add_control(
                'img_border_color',
                [
                    'label' => __('Border Color', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::COLOR,
                    'selectors' => [
                        '{{WRAPPER}} .services_box_img' => 'border-color: {{VALUE}};',
                    ],
                    'condition' => [
                        'img_border_style!' => 'none',
                    ],
                ]
            );

            $this->end_controls_section();

            // Read More

            $this->start_controls_section(
                'read_more_section',
                [
                    'label' => __('Read More', 'text-domain'),
                    'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
                ]
            );

            $this->add_control(
                'read_more_display',
                [
                    'label' => esc_html__( 'Read More Button', 'textdomain' ),
                    'type' => \Elementor\Controls_Manager::SWITCHER,
                    'label_on' => esc_html__( 'Show', 'textdomain' ),
                    'label_off' => esc_html__( 'Hide', 'textdomain' ),
                    'return_value' => 'yes',
                    'default' => 'yes',
                ]
            );
            
            $this->add_control(
                'button_text',
                [
                    'label' => __('Button Text', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::TEXT,
                    'default' => __('Read More', 'text-domain'), // Set your default value here
                    'condition' => [
                        'read_more_display' => 'yes', // Show only when 'read_more_display' is set to 'yes'
                    ]
                ]
            );
            
            $this->add_control(
                'button_url',
                [
                    'label' => __('Button URL', 'text-domain'),
                    'type' => \Elementor\Controls_Manager::URL,
                    'default' => [
                        'url' => '#',
                    ],
                    'condition' => [
                        'read_more_display' => 'yes', // Show only when 'show_title' is set to 'yes'
                    ]
                ]
            );

            $this->end_controls_section();


            $this->start_controls_section(
                'read_more_style_section',
                [
                    'label' => __('Button', 'text-domain'),
                    'tab' => \Elementor\Controls_Manager::TAB_STYLE,
                    'condition' => [
                        'read_more_display' => 'yes',
                    ],
                ]
            );

            $this->start_controls_tabs(
                'style_tabs_btn'
            );
                $this->start_controls_tab(
                                'btn_style_normal_tab',
                                [
                                    'label' => esc_html__( 'Normal', 'textdomain' ),
                                ]
                            );

                            $this->add_responsive_control(
                                'btn_style_color',
                                [
                                    'label' => __('Color', 'text-domain'),
                                    'type' => \Elementor\Controls_Manager::COLOR,
                                    'selectors' => [
                                        '{{WRAPPER}} .elementor-button' => 'color: {{VALUE}};',
                                    ],
                                ]
                            );
                
                            $this->add_responsive_control(
                                'btn_style_bg_color',
                                [
                                    'label' => __('BG Color', 'text-domain'),
                                    'type' => \Elementor\Controls_Manager::COLOR,
                                    'selectors' => [
                                        '{{WRAPPER}} .elementor-button' => 'background-color: {{VALUE}};',
                                    ],
                                ]
                            );
                
                                $this->add_responsive_control(
                                    'btn_style_padding',
                                    [
                                        'label' => __('Padding', 'text-domain'),
                                        'type' => \Elementor\Controls_Manager::DIMENSIONS,
                                        'size_units' => ['px', '%', 'em'],
                                        'selectors' => [
                                            '{{WRAPPER}} .elementor-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                                        ],
                                    ]
                                );
                
                                $this->add_responsive_control(
                                    'btn_style_margin',
                                    [
                                        'label' => __('Margin', 'text-domain'),
                                        'type' => \Elementor\Controls_Manager::DIMENSIONS,
                                        'size_units' => ['px', '%', 'em'],
                                        'selectors' => [
                                            '{{WRAPPER}} .elementor-button' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                                        ],
                                    ]
                                );
                
                
                                $this->add_responsive_control(
                                    'btn_style_border_style',
                                    [
                                        'label' => __('Border', 'text-domain'),
                                        'type' => \Elementor\Controls_Manager::SELECT,
                                        'options' => [
                                            'none' => __('None', 'text-domain'),
                                            'solid' => __('Solid', 'text-domain'),
                                            'dashed' => __('Dashed', 'text-domain'),
                                            'dotted' => __('Dotted', 'text-domain'),
                                            'double' => __('Double', 'text-domain'),
                                            // Add more options as needed
                                        ],
                                        'selectors' => [
                                            '{{WRAPPER}} .elementor-button' => 'border-style: {{VALUE}};',
                                        ],
                                    ]
                                );
                
                                $this->add_responsive_control(
                                    'btn_style_border_width',
                                    [
                                        'label' => __('Border Width', 'text-domain'),
                                        'type' => \Elementor\Controls_Manager::DIMENSIONS,
                                        'size_units' => ['px', '%', 'em'],
                                        'selectors' => [
                                            '{{WRAPPER}} .elementor-button' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                                        ],
                                        'condition' => [
                                            'border_style!' => 'none',
                                        ],
                                        
                                    ]
                                );
                
                                $this->add_control(
                                    'btn_style_border_color',
                                    [
                                        'label' => __('Border Color', 'text-domain'),
                                        'type' => \Elementor\Controls_Manager::COLOR,
                                        'selectors' => [
                                            '{{WRAPPER}} .elementor-button' => 'border-color: {{VALUE}};',
                                        ],
                                        'condition' => [
                                            'border_style!' => 'none',
                                        ],
                                        
                                    ]
                                );


                $this->end_controls_tab();

                $this->start_controls_tab(
                                'btn_style_hover_tab',
                                [
                                    'label' => esc_html__( 'Hover', 'textdomain' ),
                                ]
                            );
                            $this->add_responsive_control(
                                'btn_style_color_hover',
                                [
                                    'label' => __('Color', 'text-domain'),
                                    'type' => \Elementor\Controls_Manager::COLOR,
                                    'selectors' => [
                                        '{{WRAPPER}} .elementor-button:hover' => 'color: {{VALUE}};',
                                    ],
                                ]
                            );
                            
                            $this->add_responsive_control(
                                'btn_style_bg_color_hover',
                                [
                                    'label' => __('BG Color', 'text-domain'),
                                    'type' => \Elementor\Controls_Manager::COLOR,
                                    'selectors' => [
                                        '{{WRAPPER}} .elementor-button:hover' => 'background-color: {{VALUE}};',
                                    ],
                                ]
                            );
                            
                            $this->add_responsive_control(
                                'btn_style_padding_hover',
                                [
                                    'label' => __('Padding Hover', 'text-domain'),
                                    'type' => \Elementor\Controls_Manager::DIMENSIONS,
                                    'size_units' => ['px', '%', 'em'],
                                    'selectors' => [
                                        '{{WRAPPER}} .elementor-button:hover' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                                    ],
                                ]
                            );
                            
                            $this->add_responsive_control(
                                'btn_style_margin_hover',
                                [
                                    'label' => __('Margin', 'text-domain'),
                                    'type' => \Elementor\Controls_Manager::DIMENSIONS,
                                    'size_units' => ['px', '%', 'em'],
                                    'selectors' => [
                                        '{{WRAPPER}} .elementor-button:hover' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                                    ],
                                ]
                            );
                            
                            $this->add_responsive_control(
                                'btn_style_border_style_hover',
                                [
                                    'label' => __('Border', 'text-domain'),
                                    'type' => \Elementor\Controls_Manager::SELECT,
                                    'options' => [
                                        'none' => __('None', 'text-domain'),
                                        'solid' => __('Solid', 'text-domain'),
                                        'dashed' => __('Dashed', 'text-domain'),
                                        'dotted' => __('Dotted', 'text-domain'),
                                        'double' => __('Double', 'text-domain'),
                                        // Add more options as needed
                                    ],
                                    'selectors' => [
                                        '{{WRAPPER}} .elementor-button:hover' => 'border-style: {{VALUE}};',
                                    ],
                                ]
                            );
                            
                            $this->add_responsive_control(
                                'btn_style_border_width_hover',
                                [
                                    'label' => __('Border Width', 'text-domain'),
                                    'type' => \Elementor\Controls_Manager::DIMENSIONS,
                                    'size_units' => ['px', '%', 'em'],
                                    'selectors' => [
                                        '{{WRAPPER}} .elementor-button:hover' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                                    ],
                                    'condition' => [
                                        'border_style_hover!' => 'none',
                                    ],
                                    
                                ]
                            );
                            
                            $this->add_control(
                                'btn_style_border_color_hover',
                                [
                                    'label' => __('Border Color', 'text-domain'),
                                    'type' => \Elementor\Controls_Manager::COLOR,
                                    'selectors' => [
                                        '{{WRAPPER}} .elementor-button:hover' => 'border-color: {{VALUE}};',
                                    ],
                                    'condition' => [
                                        'border_style_hover!' => 'none',
                                    ],
                                    
                                ]
                            );
                            


                $this->end_controls_tab();

                 // End Read More

          $this->end_controls_tabs();


            $this->end_controls_section();

           

            
        }

        protected function render() {
            $item = $this->get_settings_for_display();
            global $slider_id;
           // foreach ($settings['items'] as $item) {
                ?>
           <div class="services_box_list">
                <?php if (!empty($item['image']['url'])) : ?>
                    <div class="services_box_img">
                        <img src="<?php echo esc_url($item['image']['url']); ?>" alt="<?php echo esc_attr($item['title']); ?>">
                    </div>
                <?php endif; ?>

                <?php if ($item['additional_title'] === 'yes') : ?>
                    <div class="service_name_fix">
                        <?php echo $item['title']; ?>
                    </div>
                <?php endif; ?>

                <div class="services_box<?php echo ($item['content_over_effect'] === 'yes') ? ' hover_effect' : ''; ?>">
                    <div class="content_inner">
                        <h2 class="service_name">
                            <?php echo $item['title']; ?>
                        </h2>
                        <div class="service_dec">
                            <?php echo $item['content']; ?>
                        </div>
                        <?php if ($item['read_more_display'] === 'yes') : ?>
                            <div class="service_link">
                                <a href="<?php echo esc_url($item['button_url']['url']); ?>" class="elementor-button">
                                    <?php echo esc_html($item['button_text']); ?>
                                </a>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>

                <?php
         //   }
            ?>

         <?php 
          

            
        }
    }

    \Elementor\Plugin::instance()->widgets_manager->register_widget_type(new service_box());
    
});




?>