my capabilites widgets

<?php
namespace FilixCore\Widgets;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Scheme_Color;
use Elementor\Scheme_Typography;
use Elementor\Group_Control_Typography;



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


/**
 * Text Typing Effect
 *
 * Elementor widget for text typing effect.
 *
 * @since 1.7.0
 */
class Filix_capabilities extends Widget_Base {

    public function get_name() {
        return 'Filix_capabilities_sec';
    }

    public function get_title() {
        return esc_html__( 'Capabilites', 'filix-core' );
    }

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

    public function get_keywords() {
        return [ 'capabilities', 'my', 'filix' ];
    }

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

    public function get_style_depends() {
        return ['animated-headline'];
    }

    public function get_script_depends() {
        return ['animated-headline'];
    }

    protected function _register_controls() {

        // ----------------------------------------  Title Section  ------------------------------------//
        $this->start_controls_section(
            'capa_section',
            [
                'label' => esc_html__( 'Capabilities Section', 'filix-core' ),
            ]
        );

        $this->add_control(
            'capa_section_title',
            [
                'label' => esc_html__( 'Title Text', 'filix-core' ),
                'type' => Controls_Manager::TEXT,
                'label_block' => true,
                'default' => 'My Capabilities',
            ]
        );

        $this->add_control(
            'capa_animate_title',
            [
                'label' => esc_html__( 'Section Animate Ttitle', 'filix-core' ),
                'type' => Controls_Manager::TEXT,
                'label_block' => true,
                'default' => 'Capabilities',
            ]
        );

        $this->end_controls_section();

        /**
         * Capabilities Tab
         * ------------------------------ Capabilities Tab List Item  ------------------------------
         */
        $this->start_controls_section(
            'capa_tab_section',
            [
                'label' => esc_html__( 'Capabilities Tab List', 'filix-core' ),
            ]
        );

        $repeater = new \Elementor\Repeater();

        $repeater->add_control(
            'tab_li_title', [
                'label' => esc_html__( 'Tab Item Title', 'filix-core' ),
                'type' =>Controls_Manager::TEXT,
                'label_block' => true,
                'default' => 'UI/UX Design',
            ]
        );

        $repeater->add_control(
            'nab_tab_li_id',
            [
                'label' => esc_html__('Tab ID Link', 'filix-core'),
                'type' => Controls_Manager::TEXT,
                'label_block' => true,
                'default' => 'Enter Tab Content ID',
            ]
        );

        $this->add_control(
            'capabiliti_tab',
            [
                'label' => esc_html__( 'Capabiliti Tab', 'filix-core' ),
                'type' =>Controls_Manager::REPEATER,
                'fields' => $repeater->get_controls(),
                'title_field' => '{{{ tab_li_title }}}',
            ]
        );

        $repeater->end_controls_tab();

        $this->end_controls_section();

        /**
         * Capabilities Tab Content
         * ------------------------------ Capabilities Tab content  ------------------------------
         */
        $this->start_controls_section(
            'capa_tab_content',
            [
                'label' => esc_html__( 'Tab Item Content', 'filix-core' ),
            ]
        );

        $repeater = new \Elementor\Repeater();

        $repeater->add_control(
            'tab_item_id',
            [
                'label' => esc_html__('Tab Item ID', 'filix-core'),
                'type' => Controls_Manager::TEXT,
                'label_block' => true,
                'default' => 'Write the tab item ID here',
            ]
        );

        $repeater->add_control(
            'tab_item_top_text', [
                'label' => esc_html__( 'Description', 'filix-core' ),
                'type' =>Controls_Manager::WYSIWYG,
                'label_block' => true,
                'default' => 'Tab Content Here',
            ]
        );

        $service = new \Elementor\Repeater();

        $service->add_control(
            'service_icon',
            [
                'label' => esc_html__('Tab Item ID', 'filix-core'),
                'type' => Controls_Manager::ICON,
                'label_block' => true,
                'default' => 'fa fa-star',
            ]
        );

        $service->add_control(
            'service_title', [
                'label' => esc_html__( 'Service Title', 'filix-core' ),
                'type' =>Controls_Manager::TEXTAREA,
                'label_block' => true,
                'default' => 'Tab Content Here',
            ]
        );

        $service->add_control(
            'service_text', [
                'label' => esc_html__( 'Description', 'filix-core' ),
                'type' =>Controls_Manager::TEXTAREA,
                'label_block' => true,
                'default' => 'Tab Content Here',
            ]
        );

        $this->add_control(
            'service_list',
            [
                'label' => esc_html__( 'Service Item', 'filix-core' ),
                'type' =>Controls_Manager::REPEATER,
                'fields' => $service->get_controls(),
                'title_field' => '{{{ service_title }}}',
            ]
        );


        $this->add_control(
            'capabiliti_content_tab',
            [
                'label' => esc_html__( 'Capabiliti Tab', 'filix-core' ),
                'type' =>Controls_Manager::REPEATER,
                'fields' => $repeater->get_controls(),
                'title_field' => '{{{ tab_item_top_text }}}',
            ]
        );

        $this->add_responsive_control(
            'align',
            [
                'label' => __( 'Alignment', 'filix-core' ),
                'type' => Controls_Manager::CHOOSE,
                'options' => [
                    'left' => [
                        'title' => __( 'Left', 'filix-core' ),
                        'icon' => 'fa fa-align-left',
                    ],
                    'center' => [
                        'title' => __( 'Center', 'filix-core' ),
                        'icon' => 'fa fa-align-center',
                    ],
                    'right' => [
                        'title' => __( 'Right', 'filix-core' ),
                        'icon' => 'fa fa-align-right',
                    ],
                ],
                'default' => 'left',
                'selectors' => [
                    '{{WRAPPER}} .service_item' => 'text-align: {{VALUE}};',
                ],
            ]
        );

        $repeater->end_controls_tab();

        $this->end_controls_section();


        /**
         * Style Tab
         * ------------------------------ Style Title ------------------------------
         */
        $this->start_controls_section(
            'capa_style_title', [
                'label' => esc_html__( 'Style Title', 'filix-core' ),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'capa_color_title', [
                'label' => esc_html__( 'Title Color', 'filix-core' ),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .capabiliti_wrap .capabiliti_title' => 'color: {{VALUE}};',
                ],
                'defualt' => '#999',
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(), [
                'name' => 'capa_contnet_title',
                'scheme' => Scheme_Typography::TYPOGRAPHY_1,
                'selector' => '{{WRAPPER}} .capabiliti_title',
            ]
        );

        $this->end_controls_section();

        //------------------------------ Gradient Color ------------------------------
        $this->start_controls_section(
            'about_style_background',
            [
                'label' => esc_html__( 'Background', 'filix-core' ),
                'tab' => Controls_Manager::TAB_STYLE
            ]
        );

        // Gradient Color
        $this->add_control(
            'capa_bg_color', [
                'label' => esc_html__( 'Background Color', 'filix-core' ),
                'type' => Controls_Manager::COLOR,
                'scheme' => [
                    'type' => Scheme_Color::get_type(),
                    'value' => Scheme_Color::COLOR_1,
                ],
                'defualt' => '#000',
                'selectors' => [
                    '{{WRAPPER}} .capabiliti_wrap' => 'background: {{VALUE}};',
                ],
            ]
        );

        $this->end_controls_section();
    }

    protected function render() {
        $settings = $this->get_settings();
        $capabiliti_tab = $settings['capabiliti_tab'];
        $capabiliti_content_tab = $settings['capabiliti_content_tab'];
        $service_list = $settings['service_list'];
        $counter = 0;
        ?>

    <section class="capabiliti_wrap">
        <div class="bg_text" >
            <?php if (!empty($settings['capa_animate_title'])) : ?>
            <h1 class="bg_strock_text" data-parallax='{"x": 200}'><?php echo wp_kses_post($settings['capa_animate_title']); ?></h1>
            <?php endif; ?>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-12">
                    <?php if (!empty($settings['capa_section_title'])) : ?>
                    <h2 class="capabiliti_title wow fadeInUp"><?php echo wp_kses_post($settings['capa_section_title']); ?></h2>
                    <?php endif; ?>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-5 col-md-4 col-sm-12 col-12">
                    <ul class="nav nav-tabs capabiliti_tab">
                        <?php
                            if (!empty($capabiliti_tab)) {
                            foreach ($capabiliti_tab as $single_tab) {
                            $counter++; ?>
                            <li class="nav-item wow fadeInUp item-<?php echo $single_tab['_id'] ?>">
                                <a class="nav-link <?=($counter == 1) ? 'active' : ''?>" data-toggle="tab" href="#<?php echo esc_html($single_tab['nab_tab_li_id']); ?>">
                                <?php echo wp_kses_post($single_tab['tab_li_title']); ?></a>
                            </li>
                            <?php
                        }}
                        ?>
                    </ul>
                </div>
                <div class="col-lg-7 col-md-8 col-sm-12 col-12">
                    <div class="tab-content capabiliti_tab_content">
                        <?php
                        if (!empty($capabiliti_content_tab)) {
                        foreach ($capabiliti_content_tab as $service_content) {
                        $counter++; ?>
                        <div class="tab-pane fade show <?=($counter == 1) ? 'active' : ''?>" id="<?php echo esc_html($service_content['tab_item_id']); ?>">
                             <?php if (!empty($service_content['tab_item_top_text'])) : ?>
                        <p class="tabPara wow fadeInUp"><?php echo wp_kses_post($service_content['tab_item_top_text']); ?></p>
                        <?php endif; ?>

                            <div class="row">
                            <?php
                            if (!empty($service_list)) {
                            foreach ($service_list as $single_service) {
                                ?>
                                <div class="col-md-6 col-sm-6 col-12 wow fadeInUp">
                                    <div class="service_item">
                                        <div class="icon">
                                            <?php if (!empty($single_service['service_icon'])) : ?>
                                            <i class="<?php echo esc_html($single_service['service_icon']); ?>"></i>
                                            <?php endif; ?>
                                        </div>
                                        <div class="content">
                                            <?php if (!empty($single_service['service_title'])) : ?>
                                            <a href="#"><h4><?php echo esc_html($single_service['service_title']); ?></h4></a>
                                            <?php endif; ?>
                                            <?php if (!empty($single_service['service_text'])) : ?>
                                            <p><?php echo esc_html($single_service['service_text']); ?></p>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                </div>
                                <?php
                            }}
                            ?>
                            </div>
                        </div>

                        <?php
                        }}
                        ?>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <?php
    }
}