$80 GRAYBYTE WORDPRESS FILE MANAGER $52

<?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;

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

class bopea_section_title extends Widget_Base {

  public $base;

    public function get_name() {
        return 'bopea-section-title';
    }

    public function get_title() {
        return esc_html__( 'Section Title', 'bopea-function' );
    }

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

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

    protected function register_controls() {

        $this->start_controls_section(
            'section_tab',
            [
                'label' => esc_html__('Section Title Settings', 'bopea-function'),
            ]
        );

      $this->add_control(
      'section_title', [
        'label'       => esc_html__( 'Section Title', 'bopea-function' ),
        'description' => esc_html__( 'Custom span title color, EX: <span>Title</span> Title', 'bopea-function' ),
        'type'        => Controls_Manager::TEXT,
        'label_block' => true,
        'default'     => 'Section title',
        'placeholder' => esc_html__( 'Section text', 'bopea-function' )        
      ]
      );
      $this->add_control(
      'section_desc', [
        'label'       => esc_html__( 'Section description', 'bopea-function' ),
        'type'        => Controls_Manager::TEXT,
        'label_block'   => true,
      ]
      );
      $this->add_control(
      'section_btn_text', [
        'label'       => esc_html__( 'Section button text', 'bopea-function' ),
        'type'        => Controls_Manager::TEXT,
        'label_block'   => true,
      ]
      );
      $this->add_control(
            'jl_text_url',
            [
                'label' =>esc_html__( 'Section title URL', 'bopea-function' ),
                'type' => Controls_Manager::URL,                
            ]
     );

     $this->add_control(
            'jl_btn_url',
            [
                'label' =>esc_html__( 'Section button URL', 'bopea-function' ),
                'type' => Controls_Manager::URL,                
            ]
        );
    $this->add_control(
            'tag',
            [
                'label' => __( 'Title Tag', 'bopea-function' ),
                'type' => Controls_Manager::SELECT,
                'options' => [
                    'h1' => 'H1',
                    'h2' => 'H2',
                    'h3' => 'H3',
                    'h4' => 'H4',
                    'h5' => 'H5',
                    'h6' => 'H6',
                    'div' => 'div',
                    'span' => 'span',
                    'p' => 'p',
                ],
                'default' => 'h2',
            ]
        );
      $this->end_controls_section();
      $this->start_controls_section(
      'section_tab_style', [
        'label'  => esc_html__( 'Section Title Options', 'bopea-function' ),
        'tab'     => Controls_Manager::TAB_STYLE,
      ]
        );     
      $this->add_control(
            'section_style',
            [
                'label'     =>esc_html__( 'Section title styles', 'bopea-function' ),
                'type'      => Controls_Manager::SELECT,
                'default'   => 'jl_sec_style1',
                'options'   => [
                        'jl_sec_style1'      =>esc_html__( 'Line bottom', 'bopea-function' ),
                        'jl_sec_style2'    =>esc_html__( 'Line top', 'bopea-function' ),
                        'jl_sec_style3'    =>esc_html__( 'Line center', 'bopea-function' ),
                        'jl_sec_style4'    =>esc_html__( 'Double line bottom', 'bopea-function' ),
                        'jl_sec_style5'    =>esc_html__( 'Double line top', 'bopea-function' ),
                        'jl_sec_style6'    =>esc_html__( 'Double line center', 'bopea-function' ),
                        'jl_sec_style8'    =>esc_html__( 'Text only', 'bopea-function' ),
                        'jl_sec_style9'    =>esc_html__( 'Title with background cut', 'bopea-function' ),
                        'jl_sec_style10'    =>esc_html__( 'Title with background line', 'bopea-function' ),
                        'jl_sec_style11'    =>esc_html__( 'Title line left', 'bopea-function' ),
                        'jl_sec_style12'    =>esc_html__( 'Title with doted circle', 'bopea-function' ),
                        'jl_sec_style12a'    =>esc_html__( 'Title with doted circle left/right', 'bopea-function' ),
                        'jl_sec_style13'    =>esc_html__( 'Title with doted squre', 'bopea-function' ),
                        'jl_sec_style13a'    =>esc_html__( 'Title with doted squre left/right', 'bopea-function' ),
                        'jl_sec_style14'    =>esc_html__( 'Title with doted parallelogram', 'bopea-function' ),
                        'jl_sec_style14a'    =>esc_html__( 'Title with doted parallelogram left/right', 'bopea-function' ),
                        'jl_sec_style18'    =>esc_html__( 'Title with doted custom', 'bopea-function' ),
                        'jl_sec_style18a'    =>esc_html__( 'Title with doted custom left/right', 'bopea-function' ),
                        'jl_sec_style15'    =>esc_html__( 'Title line with line color', 'bopea-function' ),
                        'jl_sec_style16'    =>esc_html__( 'Title with background full', 'bopea-function' ),
                        'jl_sec_style17'    =>esc_html__( 'Title with background full with arrow', 'bopea-function' ),
                    ],
            ]
        );

        $this->add_control(
            'jl_msk_img',
            [
                'label' => esc_html__( 'Custom doted (SVG)', 'bopea-function' ),
                'type' => Controls_Manager::MEDIA,                
                'selectors' => [
                    '{{WRAPPER}} .jl-heading-text:before' => 'mask-image:url( {{URL}} );',
                    '{{WRAPPER}} .jl-heading-text:after' => 'mask-image:url( {{URL}} );',
                ],
                'condition' => [
                    'section_style'    => ['jl_sec_style18','jl_sec_style18a']
                ]
            ]
        );   
        
        $this->add_responsive_control(
            'jl_msk_ds',
            [
                'label' => __( 'Custom doted size', 'bopea-function' ),
                'type' => Controls_Manager::SLIDER,                                
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 200,
                        'step' => 1,
                    ]
                ],
                'selectors' => [
                    '{{WRAPPER}} .jlcus_sec_title' => '--jl-msk-size: {{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'section_style'    => ['jl_sec_style18','jl_sec_style18a']
                ]
            ]
        );

        $this->add_responsive_control(
            'jl_msk_wd',
            [
                'label' => __( 'Custom doted width', 'bopea-function' ),
                'type' => Controls_Manager::SLIDER,                                
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 400,
                        'step' => 1,
                    ]
                ],
                'selectors' => [
                    '{{WRAPPER}} .jlcus_sec_title' => '--jl-msk-width: {{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'section_style'    => ['jl_sec_style18','jl_sec_style18a']
                ]
            ]
        );

        $this->add_control(
            'jl_cusd_ri',
            [
                'label' => esc_html__( 'Custom doted right flip', 'bopea-function' ),
                'type' => Controls_Manager::SWITCHER,
                'selectors' => [
                    '{{WRAPPER}} .jl-heading-text:after' => '-moz-transform: scale(-1, 1); -o-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); transform: scale(-1, 1);',
                ],
                'condition' => [
                    'section_style'    => ['jl_sec_style18a']
                ]            
            ]
            );

      $this->add_responsive_control(
            'jlc_align',
            array(
                'label'     => __( 'Alignment', 'bopea-function' ),
                'type'      => Controls_Manager::CHOOSE,
                'options'   => array(
                    'left'   => array(
                        'title' => __( 'Left', 'bopea-function' ),
                        'icon'  => 'eicon-text-align-left',
                    ),
                    'center' => array(
                        'title' => __( 'Center', 'bopea-function' ),
                        'icon'  => 'eicon-text-align-center',
                    ),
                    'right'  => array(
                        'title' => __( 'Right', 'bopea-function' ),
                        'icon'  => 'eicon-text-align-right',
                    ),
                ),
                'toggle'    => false,
                'default'   => 'left',
                'selectors' => array(
                    '{{WRAPPER}} .jlcus_sec_title' => '--sect-t-algin: {{VALUE}};',
                    '{{WRAPPER}} .jlcus_sec_title .jl_sct_bt' => 'top: 0px;',
                )                
            )
        );

        $this->add_responsive_control(
            'sec_line_top',
            [
                'label' => __( 'Section line top', 'bopea-function' ),
                'type' => Controls_Manager::SLIDER,                                
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 200,
                        'step' => 1,
                    ]
                ],
                'selectors' => [
                    '{{WRAPPER}} .jlcus_sec_title .jlcus_sect_inner' => 'border-top: {{SIZE}}{{UNIT}} solid;',
                ],
                'condition' => [
                    'section_style'    => ['jl_sec_style10','jl_sec_style12','jl_sec_style13','jl_sec_style14', 'jl_sec_style12a','jl_sec_style13a','jl_sec_style14a', 'jl_sec_style18', 'jl_sec_style18a']
                ]
            ]
        );

        $this->add_responsive_control(
            'sec_line_bottom',
            [
                'label' => __( 'Section line bottom', 'bopea-function' ),
                'type' => Controls_Manager::SLIDER,                
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 200,
                        'step' => 1,
                    ]
                ],
                'selectors' => [
                    '{{WRAPPER}} .jlcus_sec_title .jlcus_sect_inner' => 'border-bottom: {{SIZE}}{{UNIT}} solid;',
                ],
                'condition' => [
                    'section_style'    => ['jl_sec_style10','jl_sec_style12','jl_sec_style13','jl_sec_style14', 'jl_sec_style12a','jl_sec_style13a','jl_sec_style14a', 'jl_sec_style18', 'jl_sec_style18a']
                ]
            ]
        );

        $this->add_responsive_control(
            'sec_line_padding',
            [
                'label'      => __( 'Section line space', 'bopea-function' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%'],                
                'selectors'  => [
                    '{{WRAPPER}} .jlcus_sec_title .jlcus_sect_inner' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
                ],
                'condition' => [
                    'section_style'    => ['jl_sec_style12','jl_sec_style13','jl_sec_style14', 'jl_sec_style12a','jl_sec_style13a','jl_sec_style14a', 'jl_sec_style18', 'jl_sec_style18a'],                                        
                ]
            ]
        );        

        $this->add_control(
            'sec_line_color',
            [
              'label' => __( 'Section line color', 'bopea-function' ),
              'type' => Controls_Manager::COLOR,        
              'default' => '#000',
              'selectors' => [
                  '{{WRAPPER}}  .jlcus_sec_title .jlcus_sect_inner' => 'border-color: {{VALUE}}',
              ],
              'condition' => [
                  'section_style'    => ['jl_sec_style10','jl_sec_style12','jl_sec_style13','jl_sec_style14', 'jl_sec_style12a','jl_sec_style13a','jl_sec_style14a', 'jl_sec_style18', 'jl_sec_style18a']
              ]
            ]
          );
      
          $this->add_control(
            'sec_line_color_dark',
            [
              'label' => __( 'Section line color dark mode', 'bopea-function' ),
              'default' => '#3c3c3c',
              'type' => Controls_Manager::COLOR,        
              'selectors' => [
                  '.options_dark_skin {{WRAPPER}}  .jlcus_sec_title .jlcus_sect_inner' => 'border-color: {{VALUE}}',
              ],
              'condition' => [
                  'section_style'    => ['jl_sec_style10','jl_sec_style12','jl_sec_style13','jl_sec_style14', 'jl_sec_style12a','jl_sec_style13a','jl_sec_style14a', 'jl_sec_style18', 'jl_sec_style18a']
              ]
            ]
          );
          
        $this->add_responsive_control(
            'sec_line_height',
            [
                'label' => __( 'Line size', 'bopea-function' ),
                'type' => Controls_Manager::SLIDER,                
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 200,
                        'step' => 1,
                    ]
                ],
                'selectors' => [
                    '{{WRAPPER}} .jlcus_sec_title' => '--sect-line-size: {{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'section_style'    => ['jl_sec_style1','jl_sec_style2','jl_sec_style3','jl_sec_style9','jl_sec_style11','jl_sec_style15']
                ]
            ]
        );

        $this->add_responsive_control(
            'sec_ac_line_height',
            [
                'label' => __( 'Active line width', 'bopea-function' ),
                'type' => Controls_Manager::SLIDER,                
                'default' => [
                    'size' => 5,
                ],
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 200,
                        'step' => 1,
                    ]
                ],
                'selectors' => [
                    '{{WRAPPER}} .jlcus_sec_title' => '--sect-ac-line-size: {{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'section_style'    => ['jl_sec_style15']
                ]
            ]
        );

          $this->add_responsive_control(
            'sec_line_width',
            [
                'label' => __( 'Line width', 'bopea-function' ),
                'type' => Controls_Manager::SLIDER,                
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 2000,
                        'step' => 1,
                    ]
                ],
                'selectors' => [
                    '{{WRAPPER}} .jlcus_sec_title' => '--sect-line-w: {{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'section_style'    => ['jl_sec_style3','jl_sec_style6']
                ]
            ]
        );

        $this->add_responsive_control(
            'sec_line_space',
            [
                'label' => __( 'Title space', 'bopea-function' ),
                'type' => Controls_Manager::SLIDER,
                'default' => [
                    'size' => 5,
                ],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 200,
                        'step' => 1,
                    ]
                ],
                'selectors' => [
                    '{{WRAPPER}} .jlcus_sec_title' => '--sect-line-space: {{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'section_style!'    => ['jl_sec_style16','jl_sec_style17']
                ]
            ]
        );        

        $this->add_responsive_control(
            'jl_title_border_radius',
            [
                'label'      => esc_html__( 'Border Radius', 'victro' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px'],
                'selectors'  => [
                    '{{WRAPPER}} .jlcus_sec_title'=> '--sect-rtop: {{TOP}}{{UNIT}}; --sect-rright: {{RIGHT}}{{UNIT}}; --sect-rbottom: {{BOTTOM}}{{UNIT}}; --sect-rleft: {{LEFT}}{{UNIT}};'
                ],
                'condition' => [
                    'section_style'    => ['jl_sec_style9','jl_sec_style10','jl_sec_style16','jl_sec_style17']
                ]
            ]
        );

        $this->add_responsive_control(
            'jl_title_bg_padding',
            [
                'label'      => esc_html__( 'Background Padding', 'victro' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px'],
                'selectors'  => [
                    '{{WRAPPER}} .jlcus_sec_title.jl_sec_style10 .jl-heading-text .jl_ttw, {{WRAPPER}} .jlcus_sec_title.jl_sec_style9 .jl-heading-text .jl_ttw'=> 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
                ],
                'condition' => [
                    'section_style'    => ['jl_sec_style9','jl_sec_style10']
                ]
            ]
        );

        $this->add_control(
            'section_title_font',
            [
                'label'     =>esc_html__( 'Section Title font', 'bopea-function' ),
                'type'      => Controls_Manager::SELECT,
                'default'   => 'jl_secf_title',
                'options'   => [
                        'jl_secf_title'      =>esc_html__( 'Title font', 'bopea-function' ),
                        'jl_secf_menu'    =>esc_html__( 'Menu font', 'bopea-function' ),
                        'jl_secf_body'    =>esc_html__( 'Body font', 'bopea-function' ),
                        'jl_secf_cus'    =>esc_html__( 'Custom font', 'bopea-function' ),
                    ],
            ]
        );

        $this->add_responsive_control(
        'sec_font_size',
        [
            'label' => __( 'Title font size', 'bopea-function' ),
            'type' => Controls_Manager::SLIDER,
            'size_units' => [ 'px', 'em' ],
            'default' => [
                'size' => 23,
            ],
            'range' => [
                'px' => [
                    'min' => 1,
                    'max' => 200,
                    'step' => 1,
                ]
            ],
            'selectors' => [
                '{{WRAPPER}} .jlcus_sec_title' => '--sect-t-size: {{SIZE}}{{UNIT}};',
            ],
            'condition' => [
                'section_title_font'    => ['jl_secf_title','jl_secf_menu','jl_secf_body']
            ]
        ]
    );    

    $this->add_control(
        'jl_en_pbg',
        [
            'label' => esc_html__( 'Enable title background', 'bopea-function' ),
            'type' => Controls_Manager::SWITCHER,
            'return_value' => 'yes',
            'default' => 'no',    
            'condition' => [
                'section_style'    => ['jl_sec_style12','jl_sec_style13','jl_sec_style14', 'jl_sec_style12a','jl_sec_style13a','jl_sec_style14a', 'jl_sec_style18', 'jl_sec_style18a'],
            ]    
        ]
    );

    $this->add_control(
        'sec_bg_color',
        [
          'label' => __( 'Title background color dark mode', 'bopea-function' ),              
          'type' => Controls_Manager::COLOR,        
          'selectors' => [
              '{{WRAPPER}} .jlcus_sec_title .jl-heading-text' => 'background-color: {{VALUE}}',
          ],
          'condition' => [
            'jl_en_pbg'    => 'yes',
          ]
        ]
      );

    $this->add_control(
        'sec_bg_color_dark',
        [
          'label' => __( 'Title background color dark mode', 'bopea-function' ),              
          'type' => Controls_Manager::COLOR,        
          'selectors' => [
              '.options_dark_skin {{WRAPPER}} .jlcus_sec_title .jl-heading-text' => 'background-color: {{VALUE}}',
          ],
          'condition' => [
            'jl_en_pbg'    => 'yes',
          ]
        ]
      );

    $this->add_responsive_control(
        'sec_bg_padding',
        [
            'label'      => __( 'Title background padding', 'bopea-function' ),
            'type'       => Controls_Manager::DIMENSIONS,
            'size_units' => [ 'px'],                
            'selectors'  => [
                '{{WRAPPER}} .jlcus_sec_title .jl-heading-text' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
            ],
            'condition' => [                    
                'jl_en_pbg'    => 'yes',
            ]
        ]
    );

    $this->add_responsive_control(
        'sec_bg_radius',
        [
            'label'      => __( 'Title background radius', 'bopea-function' ),
            'type'       => Controls_Manager::DIMENSIONS,
            'size_units' => [ 'px'],                
            'selectors'  => [
                '{{WRAPPER}} .jlcus_sec_title .jl-heading-text' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
            ],
            'condition' => [                    
                'jl_en_pbg'    => 'yes',
            ]
        ]
    );

    $this->add_control(
        'jl_title_up',
        [
            'label' => esc_html__( 'Title Uppercase', 'bopea-function' ),
            'type' => Controls_Manager::SWITCHER,
            'selectors' => [
                '{{WRAPPER}} .jlcus_sec_title .jl-heading-text' => 'text-transform: uppercase !important;',
            ],
            'condition' => [
                'section_title_font'    => ['jl_secf_title','jl_secf_menu','jl_secf_body']
            ]            
        ]
        );

      $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'title_typography', 
                'label' =>esc_html__( 'Title typography', 'bopea-function' ),               
                'selector' => '{{WRAPPER}} .jlcus_sec_title.jl_secf_cus .jl-heading-text',
                'condition' => [
                    'section_title_font'    => 'jl_secf_cus'
                ]
            ]
        );

        $this->add_responsive_control(
            'sec_desc_size',
            [
                'label' => __( 'Description font size', 'bopea-function' ),
                'type' => Controls_Manager::SLIDER,                
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 200,
                        'step' => 1,
                    ]
                ],
                'selectors' => [
                    '{{WRAPPER}} .jlcus_sec_title .jl_sct_sub' => 'font-size: {{SIZE}}{{UNIT}} !important;',
                ],
                'condition'=>[
                    'section_desc!'=>'',
                ],
            ]
        );   
        
        $this->add_responsive_control(
            'sec_desc_space',
            [
                'label' => __( 'Description space', 'bopea-function' ),
                'type' => Controls_Manager::SLIDER,                
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 200,
                        'step' => 1,
                    ]
                ],
                'selectors' => [
                    '{{WRAPPER}} .jlcus_sec_title .jl_sct_sub' => 'margin-top: {{SIZE}}{{UNIT}} !important;',
                ],
                'condition'=>[
                    'section_desc!'=>'',
                ],
            ]
        );   

      $this->add_control(
            'section_btn_font',
            [
                'label'     =>esc_html__( 'Section button font', 'bopea-function' ),
                'type'      => Controls_Manager::SELECT,
                'default'   => 'jl_secb_menu',
                'options'   => [
                        'jl_secb_title'      =>esc_html__( 'Title font', 'bopea-function' ),
                        'jl_secb_menu'    =>esc_html__( 'Menu font', 'bopea-function' ),
                        'jl_secb_body'    =>esc_html__( 'Body font', 'bopea-function' ),
                        'jl_secb_cus'    =>esc_html__( 'Custom font', 'bopea-function' ),
                ],
                'condition'=>[
                        'section_btn_text!'=>'',
                ],
            ]
        );  

      $this->add_responsive_control(
        'sec_btn_font_size',
        [
            'label' => __( 'Button font size', 'bopea-function' ),
            'type' => Controls_Manager::SLIDER,
            'size_units' => [ 'px', 'em' ],
            'default' => [
                'size' => 14,
            ],
            'range' => [
                'px' => [
                    'min' => 1,
                    'max' => 200,
                    'step' => 1,
                ]
            ],
            'selectors' => [
                '{{WRAPPER}} .jlcus_sec_title' => '--sect-btn-size: {{SIZE}}{{UNIT}};',
            ],
            'condition' => [
                'section_btn_font'    => ['jl_secb_title','jl_secb_menu','jl_secb_body'],                
                'section_btn_text!'=>'',                
            ]
        ]
    );

      $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'btn_typography', 
                'label' =>esc_html__( 'Button typography', 'bopea-function' ),               
                'selector' => '{{WRAPPER}} .jlcus_sec_title.jl_secb_cus .jl_sct_bt',
                'condition' => [
                    'section_btn_font'    => 'jl_secb_cus',
                    'section_btn_text!'=>'',                
                ]
            ]
        );

    $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'desc_typography', 
                'label' =>esc_html__( 'Description typography', 'bopea-function' ),               
                'selector' => '{{WRAPPER}} .jlcus_sec_title .jl_sct_sub',                
                'condition'=>[
                        'section_desc!'=>'',
                ],
            ]
        );

        $this->add_control(
            'jl_show_tico',
            [
                'label' => esc_html__( 'Show title arrow', 'bopea-function' ),
                'type' => Controls_Manager::SWITCHER,
                'return_value' => 'yes',
                'default' => 'no',    
                'condition' => [
                    'section_style!'    => ['jl_sec_style9','jl_sec_style10','jl_sec_style16','jl_sec_style17','jl_sec_style12a','jl_sec_style13a','jl_sec_style14a', 'jl_sec_style18', 'jl_sec_style18a']
                ]    
            ]
        );

        $this->add_responsive_control(
            'sec_arr_space',
            [
                'label' => __( 'Arrow space', 'bopea-function' ),
                'type' => Controls_Manager::SLIDER,                
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 200,
                        'step' => 1,
                    ]
                ],
                'selectors' => [
                    '{{WRAPPER}} .jlcus_sec_title' => '--sect-arr-space: {{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'section_style!'    => ['jl_sec_style9','jl_sec_style10','jl_sec_style16','jl_sec_style17'],
                    'jl_show_tico'=>'yes'
                ]
            ]
        );

        $this->add_control(
      'title_color',
      [
        'label' => __( 'Title color', 'bopea-function' ),
        'type' => Controls_Manager::COLOR,        
        'default' => '#000',
        'selectors' => [
            '{{WRAPPER}} .jlcus_sec_title' => '--sect-t-color: {{VALUE}}',
        ],
      ]
    );

    $this->add_control(
      'title_color_dark',
      [
        'label' => __( 'Title color dark mode', 'bopea-function' ),
        'default' => '#fff',
        'type' => Controls_Manager::COLOR,        
        'selectors' => [
            '.options_dark_skin {{WRAPPER}} .jlcus_sec_title' => '--sect-t-color: {{VALUE}}',
        ],
      ]
    );

    $this->add_control(
        'titlesp_color',
        [
          'label' => __( 'Title <span> color', 'bopea-function' ),
          'type' => Controls_Manager::COLOR,        
          'selectors' => [
              '{{WRAPPER}} .jlcus_sec_title' => '--sect-ts-color: {{VALUE}}',
          ],
        ]
      );
  
      $this->add_control(
        'titlesp_color_dark',
        [
          'label' => __( 'Title <span> color dark mode', 'bopea-function' ),
          'type' => Controls_Manager::COLOR,        
          'selectors' => [
              '.options_dark_skin {{WRAPPER}} .jlcus_sec_title' => '--sect-ts-color: {{VALUE}}',
          ],
        ]
      );

    $this->add_control(
        'ac_line_color',
        [
          'label' => __( 'Active line color', 'bopea-function' ),
          'type' => Controls_Manager::COLOR,        
          'default' => '#000',
          'selectors' => [
              '{{WRAPPER}} .jlcus_sec_title' => '--ac-line-color: {{VALUE}}',
          ],
          'condition' => [
              'section_style'    => ['jl_sec_style15']
          ]
        ]
      );
  
      $this->add_control(
        'ac_line_color_dark',
        [
          'label' => __( 'Active line color dark mode', 'bopea-function' ),
          'default' => '#fff',
          'type' => Controls_Manager::COLOR,        
          'selectors' => [
              '.options_dark_skin {{WRAPPER}} .jlcus_sec_title' => '--ac-line-color: {{VALUE}}',
          ],
          'condition' => [
              'section_style'    => ['jl_sec_style15']
          ]
        ]
      );

    $this->add_control(
        'titlebg_color',
        [
          'label' => __( 'Title bg color', 'bopea-function' ),
          'type' => Controls_Manager::COLOR,        
          'default' => '#e9e9e9',
          'selectors' => [
              '{{WRAPPER}} .jlcus_sect_inner' => 'background: {{VALUE}}',
              '{{WRAPPER}} .jl_sec_style17 .jlcus_sect_inner:before' => '    border-top-color: {{VALUE}}',
          ],
          'condition' => [
            'section_style'    => ['jl_sec_style16','jl_sec_style17']
          ]
        ]
      );
  
      $this->add_control(
        'titlebg_color_dark',
        [
          'label' => __( 'Title bg color dark mode', 'bopea-function' ),
          'default' => '#3c3c3c',
          'type' => Controls_Manager::COLOR,        
          'selectors' => [
              '.options_dark_skin {{WRAPPER}} .jlcus_sect_inner' => 'background: {{VALUE}}',
              '.options_dark_skin {{WRAPPER}} .jl_sec_style17 .jlcus_sect_inner:before' => '    border-top-color: {{VALUE}}',
          ],
          'condition' => [
            'section_style'    => ['jl_sec_style16','jl_sec_style17']
          ]
        ]
      );

      $this->add_responsive_control(
        'sec_title_bg_h',
        [
            'label' => __( 'Title bg height', 'bopea-function' ),
            'type' => Controls_Manager::SLIDER,
            'default' => [
                'size' => 40,
            ],
            'range' => [
                'px' => [
                    'min' => 1,
                    'max' => 200,
                    'step' => 1,
                ]
            ],
            'selectors' => [
                '{{WRAPPER}} .jlcus_sect_inner' => 'height: {{SIZE}}{{UNIT}}; align-items: center;padding: 0px 15px;',
            ],
            'condition' => [
                'section_style'    => ['jl_sec_style16','jl_sec_style17']
            ]
        ]
    );

    $this->add_control(
        'jl_title_wauto',
        [
            'label' => esc_html__( 'Title width auto', 'bopea-function' ),
            'type' => Controls_Manager::SWITCHER,
            'selectors' => [
                '{{WRAPPER}} .jlcus_sect_inner' => 'width: unset !important;',
            ],
            'condition' => [
                'section_style'    => ['jl_sec_style16','jl_sec_style17']
            ]            
        ]
        );

    $this->add_control(
      'title_desc_color',
      [
        'label' => __( 'Description color', 'bopea-function' ),
        'type' => Controls_Manager::COLOR,        
        'default' => '#666',
        'selectors' => [
            '{{WRAPPER}} .jlcus_sec_title' => '--sect-dsc-color: {{VALUE}}',
        ],
        'condition'=>[
                        'section_desc!'=>'',
        ],
      ]
    );
    

    $this->add_control(
      'title_desc_color_dark',
      [
        'label' => __( 'Description color dark mode', 'bopea-function' ),
        'default' => '#ddd',
        'type' => Controls_Manager::COLOR,        
        'selectors' => [
            '.options_dark_skin {{WRAPPER}} .jlcus_sec_title' => '--sect-dsc-color: {{VALUE}}',
        ],
        'condition'=>[
                        'section_desc!'=>'',
        ],
      ]
    );
    
    $this->add_control(
      'line_color',
      [
        'label' => __( 'Skin / Line / dot color', 'bopea-function' ),
        'default' => '#e9ecef',
        'type' => Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .jlcus_sec_title' => '--sect-line-color: {{VALUE}}'
        ],
            'condition' => [
                'section_style'    => ['jl_sec_style1','jl_sec_style2','jl_sec_style3','jl_sec_style4','jl_sec_style5','jl_sec_style6','jl_sec_style9','jl_sec_style10','jl_sec_style11','jl_sec_style12','jl_sec_style13','jl_sec_style14', 'jl_sec_style12a','jl_sec_style13a','jl_sec_style14a', 'jl_sec_style18', 'jl_sec_style18a','jl_sec_style15']
        ]
      ]
    );
    

    $this->add_control(
      'line_color_dark',
      [
        'label' => __( 'Skin / Line / dot dark mode color', 'bopea-function' ),
        'default' => '#49494b',
        'type' => Controls_Manager::COLOR,
        'selectors' => [
            '.options_dark_skin {{WRAPPER}} .jlcus_sec_title' => '--sect-line-color: {{VALUE}}'        
        ],
            'condition' => [
                'section_style'    => ['jl_sec_style1','jl_sec_style2','jl_sec_style3','jl_sec_style4','jl_sec_style5','jl_sec_style6', 'jl_sec_style9','jl_sec_style10','jl_sec_style11','jl_sec_style12','jl_sec_style13','jl_sec_style14', 'jl_sec_style12a','jl_sec_style13a','jl_sec_style14a', 'jl_sec_style18', 'jl_sec_style18a','jl_sec_style15']
        ]
      ]
    );

    $this->add_control(
        'button_color',
        [
          'label' => __( 'Button text color', 'bopea-function' ),
          'type' => Controls_Manager::COLOR,        
          'selectors' => [
              '{{WRAPPER}} .jlcus_sec_title' => '--sect-btn-color: {{VALUE}}',
          ],
          'condition'=>[
                          'section_btn_text!'=>'',
          ],
        ]
      );
      $this->add_control(
        'button_color_dark',
        [
          'label' => __( 'Button text color dark mode', 'bopea-function' ),
          'type' => Controls_Manager::COLOR,        
          'selectors' => [
              '.options_dark_skin {{WRAPPER}} .jlcus_sec_title' => '--sect-btn-color: {{VALUE}}',
          ],
          'condition'=>[
                          'section_btn_text!'=>'',
          ],
        ]
      );

    $this->add_control(
                'jl_show_icons',
                [
                    'label' => esc_html__( 'Show button arrow', 'bopea-function' ),
                    'type' => Controls_Manager::SWITCHER,
                    'return_value' => 'yes',
                    'default' => 'no',
                    'condition'=>[
                        'section_btn_text!'=>'',
                    ],  
                ]
    );    
    
    $this->add_control(
        'button_ic_color',
        [
          'label' => __( 'Button icon color', 'bopea-function' ),
          'type' => Controls_Manager::COLOR,        
          'selectors' => [
              '{{WRAPPER}} .jlcus_sec_title' => '--sect-btn-ic: {{VALUE}}',
          ],
          'condition'=>[
                          'section_btn_text!'=>'',
                          'jl_show_icons'=>'yes',
          ],
        ]
      );
      $this->add_control(
        'button_ic_color_dark',
        [
          'label' => __( 'Button icon color dark mode', 'bopea-function' ),
          'type' => Controls_Manager::COLOR,        
          'selectors' => [
              '.options_dark_skin {{WRAPPER}} .jlcus_sec_title' => '--sect-btn-ic: {{VALUE}}',
          ],
          'condition'=>[
                          'section_btn_text!'=>'',
                          'jl_show_icons'=>'yes',
          ],
        ]
      );
    
    $this->add_control(
                'jl_bg_btn',
                [
                    'label' => esc_html__( 'Enable button background', 'bopea-function' ),
                    'type' => Controls_Manager::SWITCHER,
                    'return_value' => 'yes',
                    'default' => 'no',
                    'condition'=>[
                        'section_btn_text!'=>'',
                    ],
                ]
    );

    $this->add_control(
      'jl_btn_bg',
      [
        'label' => __( 'Button background', 'bopea-function' ),
        'type' => Controls_Manager::COLOR,
        'default' => '#fff',
        'selectors' => [
            '{{WRAPPER}} .jlcus_sec_title' => '--sect-btn-bg: {{VALUE}};'        
        ],
        'condition' => [
            'jl_bg_btn'    => 'yes',
            'section_btn_text!'=>'',
        ]
      ]
    );

    $this->add_control(
      'jl_btn_bg_dark',
      [
        'label' => __( 'Button dark mode background', 'bopea-function' ),
        'type' => Controls_Manager::COLOR,
        'default' => '#ff1d46',
        'selectors' => [
            '.options_dark_skin {{WRAPPER}} .jlcus_sec_title' => '--sect-btn-bg: {{VALUE}};'        
        ],
        'condition' => [
            'jl_bg_btn'    => 'yes',
            'section_btn_text!'=>'',
        ]
      ]
    );
    $this->add_responsive_control(
        'jl_btn_radius',
        [
            'label' => __( 'Button rounded coner', 'bopea-function' ),
            'type' => Controls_Manager::SLIDER,            
            'range' => [
                'px' => [
                    'min' => 0,
                    'max' => 200,
                    'step' => 1,
                ]
            ],
            'selectors' => [
                '{{WRAPPER}} .jlcus_sec_title' => '--sect-btn-rounded: {{SIZE}}{{UNIT}} !important;',
            ],
            'condition' => [
                'jl_bg_btn'    => 'yes',
                'section_btn_text!'=>'',
            ]            
        ]
    );

    $this->add_responsive_control(
            'jl_btn_padding',
            [
                'label'      => __( 'Button Padding', 'bopea-function' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%'],                
                'selectors'  => [
                    '{{WRAPPER}} .jlcus_sec_title.jl_sec_btn_bg .jl_sct_bt span' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
                ],
                'condition' => [
                    'jl_bg_btn'    => 'yes',
                    'section_btn_text!'=>'',
                ]
            ]
        );
        $this->end_controls_section();
    }
    protected function render( ) { 
        $settings = $this->get_settings_for_display();
        $tag = $settings['tag'];
        $section_style = $settings['section_style'];
        $section_title = $settings['section_title'];
        $section_desc = $settings['section_desc'];
        $section_btn_text = $settings['section_btn_text'];        
        $jl_show_icons = $settings['jl_show_icons'];
        $jl_show_tico = $settings['jl_show_tico'];
        $section_title_font = $settings['section_title_font'];
        $section_btn_font = $settings['section_btn_font'];
        $jl_bg_btn = $settings['jl_bg_btn'];        
        if ($jl_bg_btn === 'yes') {
            $jl_bg_btn = 'jl_sec_btn_bg';
        }        
        $this->add_render_attribute(
            'section_head',
            array(                
                'class' => array('jlcus_sec_title', $section_style, $section_title_font, $section_btn_font, $jl_bg_btn),
            )
        );
        if ( ! empty( $settings['jl_text_url']['url'] ) ) {
            $this->add_link_attributes( 'jl_text_url', $settings['jl_text_url'] );
        }
        if ( ! empty( $settings['jl_btn_url']['url'] ) ) {
            $this->add_link_attributes( 'jl_btn_url', $settings['jl_btn_url'] );
        }                                
        ?>
          <div <?php echo $this->get_render_attribute_string( 'section_head' ); ?>>
            <div class="jlcus_sect_inner">
                  <?php if(!empty($section_title)){?>
                  <<?php echo esc_html($tag); ?> class="jl-heading-text">
                        <?php if ( ! empty( $settings['jl_text_url']['url'] ) ) {?><a <?php echo $this->get_render_attribute_string( 'jl_text_url' ); ?> class="jlopt-text-link"><?php }?>
                        <span class="jl_ttw"><?php echo $section_title;?></span><?php if ($jl_show_tico === 'yes') {?><i class="jli-tarrow"></i><?php }?>
                        <?php if ( ! empty( $settings['jl_text_url']['url'] ) ) {?></a><?php }?>
                  </<?php echo esc_html($tag); ?>>
                  <?php }?>
                  <?php if(!empty($section_btn_text)){?>
                  <p class="jl_sct_bt">
                        <?php if ( ! empty( $settings['jl_btn_url']['url'] ) ) {?><a <?php echo $this->get_render_attribute_string( 'jl_btn_url' ); ?> class="jlopt-text-link"><?php }?>
                        <span class="jl_bt_inner">
                        <span><?php echo wp_kses_post($section_btn_text);?></span>
                        <?php if ($jl_show_icons === 'yes') {?><i class="jli-carrow"></i><?php }?>
                        </span>
                        <?php if ( ! empty( $settings['jl_btn_url']['url'] ) ) {?></a><?php }?>
                  </p>
                  <?php }?>
            </div>                    
            <?php if (!empty($section_desc)) {?><p class="jl_sct_sub"><?php echo $section_desc;?></p><?php }?>
          </div>                    
    <?php  
    }    
}