$92 GRAYBYTE WORDPRESS FILE MANAGER $25

<?php
namespace bopeaElementor\Widgets;
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Image_Size;
use Elementor\Group_Control_Typography;
use Elementor\Schemes\Color;
use Elementor\Schemes\Typography;
use Elementor\Utils;
use Elementor\Control_Media;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Text_Shadow;
use Elementor\Group_Control_Background;
use Elementor\Repeater;
use Elementor\Icons_Manager;

defined('ABSPATH') || die();

class bopea_section_search_button extends Widget_Base {

    public function get_name() {
        return 'bopea-search-button';
    }

    public function get_title() {
        return esc_html__( 'Jelly Search Button', 'bopea-function' );
    }

    public function get_icon() {
        return 'eicon-search jl-icons';
    }

    public function get_categories() {
        return [ 'bopea-elements-head' ];
    }

    protected function register_controls() {
    $this->start_controls_section(
            'text_elements',
            [
                'label' => __( 'Search Icon', 'bopea-function' ),
            ]
        );
        
        $this->add_control(
            'jl_btn_icons',
            [
                'label' =>esc_html__( 'Icon', 'bopea-function' ),
                'type' => Controls_Manager::ICONS,
                'fa4compatibility' => 'jl_btn_icon',
                'label_block' => true,
                'default' => [
                    'value' => '',
                ]
            ]
        );        

        $this->end_controls_section();

        $this->start_controls_section(
            'section_style_marker',
            [
                'label' => __( 'Search Style', 'bopea-function' ),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );               

        $this->add_responsive_control(
            'icons_height',
            [
                'label' => __( 'Height Icon', 'bopea-function' ),
                'type' => Controls_Manager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 500,
                    ],
                ],
                'default' => [
                    'size' => '90',
                    'unit' => 'px'
                ],
                'selectors' => [
                    '{{WRAPPER}} .search_header_wrapper.search_form_menu_personal_click' => 'height: {{SIZE}}px',
                    '{{WRAPPER}} .search_header_wrapper.jlce-seach.search_form_menu_personal_click' => 'margin-left: 0px;',
                    '{{WRAPPER}} .search_header_wrapper .jli-search' => 'transform: scale(1) !important;',                    
                ],
            ]
        );     

        $this->add_responsive_control(
            'icons_margin',
            [
                'label'      => __( 'Margin', 'bopea-function' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%'],                
                'selectors'  => [
                    '{{WRAPPER}} .search_header_wrapper.jlce-seach.search_form_menu_personal_click' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
                ]
            ]
        );

        $this->add_responsive_control(
            'icons_padding',
            [
                'label'      => __( 'Padding', 'bopea-function' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%'],                
                'selectors'  => [
                    '{{WRAPPER}} .search_header_wrapper.jlce-seach.search_form_menu_personal_click' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
                ]
            ]
        );

        $this->add_responsive_control(
            'icons_size',
            [
                'label' => __( 'Font size', 'bopea-function' ),
                'type' => Controls_Manager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 200,
                    ],
                ],
                'default' => [
                    'size' => '20',
                    'unit' => 'px'
                ],
                'selectors' => [
                    '{{WRAPPER}} .search_header_wrapper.jlce-seach.search_form_menu_personal_click i' => 'font-size: {{SIZE}}px',
                ],
            ]
        );     
        $this->add_control(
            'jl_btn_search_color',
            [
                'label' =>esc_html__( 'Color', 'bopea-function' ),
                'type' => Controls_Manager::COLOR,
                'default' => '#000',
                'selectors' => [
                    '{{WRAPPER}}' => '--jl-menu-color: {{VALUE}};',
                    '{{WRAPPER}} .jl_shwp svg' => 'fill: currentColor;',
                ],
            ]
        );  

        $this->add_control(
            'jl_btn_search_color_dark',
            [
                'label' =>esc_html__( 'Color dark mode', 'bopea-function' ),
                'type' => Controls_Manager::COLOR,
                'default' => '#FFF',
                'selectors' => [
                    '.options_dark_skin {{WRAPPER}}' => '--jl-menu-color: {{VALUE}};',
                ],
            ]
        );  

        $this->add_control(
            'jl_btn_search_color_hover',
            [
                'label' =>esc_html__( 'Color Hover', 'bopea-function' ),
                'type' => Controls_Manager::COLOR,
                'default' => '',
                'selectors' => [
                    '{{WRAPPER}} .search_header_wrapper.jlce-seach.search_form_menu_personal_click:hover' => 'color: {{VALUE}} !important;'
                ],
            ]
        );   

        $this->add_control(
            'jl_btn_search_color_hover_dark',
            [
                'label' =>esc_html__( 'Color hover dark mode', 'bopea-function' ),
                'type' => Controls_Manager::COLOR,
                'default' => '',
                'selectors' => [
                    '.options_dark_skin {{WRAPPER}} .search_header_wrapper.jlce-seach.search_form_menu_personal_click:hover' => 'color: {{VALUE}} !important;'                    
                ],
            ]
        );   

        $this->add_responsive_control(
            'jl_search_drop',
            [
                'label' => __( 'Search dropdown position', 'bopea-function' ),
                'type' => Controls_Manager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => -500,
                        'max' => 500,
                    ],
                ],                             
                'default' => [
                    'size' => '-20',
                    'unit' => 'px'
                ],   
                'selectors' => [
                    '{{WRAPPER}} .jl_ajse' => 'right: {{SIZE}}px !important',
                    '{{WRAPPER}} .jl_ajse i.jli-search' => 'color: #fff !important; font-size: 12px !important;',
                ]                
            ]
        );   

        $this->add_responsive_control(
            'serach_drop_radius',
            [
                'label' => __( 'Search pop border radius', 'bopea-function' ),
                'type' => Controls_Manager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 500,
                    ],
                ],                
                'selectors' => [
                    '{{WRAPPER}}' => '--jl-sub-m-radius: {{SIZE}}px',
                ]                
            ]
        );  

        $this->add_responsive_control(
            'serach_button_radius',
            [
                'label' => __( 'Search button border radius', 'bopea-function' ),
                'type' => Controls_Manager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 500,
                    ],
                ],                
                'selectors' => [
                    '{{WRAPPER}}' => '--jl-sbr: {{SIZE}}px',
                ]                
            ]
        );  

        $this->end_controls_section();        
    }
    protected function render( ) {
       $settings = $this->get_settings_for_display();
        ?>
        <div class="jl_shwp">
        <div class="search_header_wrapper jlce-seach search_form_menu_personal_click">        
            <?php if (empty($settings['jl_btn_icons']['value'])) {?>
                <i class="jli-search"></i>
                    <?php }else{
                        $migrated = isset( $settings['__fa4_migrated']['jl_btn_icons'] );
                        $is_new = empty( $settings['jl_btn_icon'] );
                        if ( $is_new || $migrated ) {
                            Icons_Manager::render_icon( $settings['jl_btn_icons'], [ 'aria-hidden' => 'true' ] );
                        }else{
                        ?>
                        <i class="<?php echo esc_attr($settings['jl_btn_icon']); ?>" aria-hidden="true"></i>
                        <?php
                        }
                    }?>
        </div>
        <?php if(!empty(get_theme_mod('jl_search_layout'))){?>
        <div class="jl_ajse search_form_menu_personal">
                <div class="jl_search_head jl_search_list">
                        <?php get_search_form(); ?>                                
                        <div class="jl_search_box_li"></div>
                </div>
        </div>
        <?php }?>
        </div>
        <?php
    }
}