<?php

namespace Elementor;

include get_template_directory() . '/elementor/' . 'contracts.php';

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

class PortfolioTabs extends Widget_Base
{

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

    public function get_title()
    {
        return __('Portfolio Tabs', TEXT_DOMAIN);
    }

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

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

    public function get_keywords()
    {
        return ['card', 'box', 'list', 'portfolio','tabs','nav','categories'];
    }

    protected function _register_controls()
    {
        $this->register_content_tab_tabs_controls();
        $this->register_content_tab_products_controls();
        $this->register_content_tab_items();
        $this->register_content_tab_query();

        $this->register_style_tabs_controls();
        $this->register_style_tab_card_controls();
        $this->register_style_tab_title_controls();
        $this->register_style_tab_more_button_controls();
        $this->register_style_tab_category_badge_controls();
    }


    // tabs

    protected function register_content_tab_tabs_controls()
    {
        $this->start_controls_section(
            'section_tabs',
            [
                'label' => esc_html__('tabs', TEXT_DOMAIN),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'tabs_align',
            [
                'type' => \Elementor\Controls_Manager::CHOOSE,
                'label' => esc_html__( 'Alignment', TEXT_DOMAIN ),
                'options' => [
                    'justify-content-start' => [
                        'title' => esc_html__( 'right', TEXT_DOMAIN ),
                        'icon' => 'eicon-text-align-right',
                    ],
                    'justify-content-center' => [
                        'title' => esc_html__( 'center', TEXT_DOMAIN ),
                        'icon' => 'eicon-text-align-center',
                    ],
                    'justify-content-end' => [
                        'title' => esc_html__( 'left', TEXT_DOMAIN ),
                        'icon' => 'eicon-text-align-left',
                    ],
                ],
                'default' => 'card-content-center',
            ]
        );

        $repeater = new Repeater();

        $categories = get_terms( [
            'taxonomy' => 'portfolio_cat',
            'hide_empty' => false,
        ] );

        $category_options = [];
        foreach ( $categories as $category ) {
            $category_options[$category->term_id . '|' . $category->name] = $category->name;
        }

        $repeater->add_control(
            'icon',
            [
                'label' => __( 'Icon', TEXT_DOMAIN ),
                'type' => \Elementor\Controls_Manager::ICONS,
            ]
        );

        $repeater->add_control(
            'category_id',
            [
                'label' => __( 'Select Category', TEXT_DOMAIN),
                'type' => \Elementor\Controls_Manager::SELECT2,
                'label_block' => true,
                'options' => $category_options,
                'multiple' => false,
                'default' => '',
            ]
        );

        $this->add_control(
            'selected_categories',
            [
                'label' => esc_html__('Items', TEXT_DOMAIN),
                'type' => \Elementor\Controls_Manager::REPEATER,
                'fields' => $repeater->get_controls(),
                // Extract just the name part from the encoded value
                'title_field' => '<# 
            var parts = category_id ? category_id.split("|") : ["", "No Category"]; 
            print(parts[1]); 
        #>',
                'frontend_available' => true,
            ]
        );


        $this->end_controls_section();
    }


    // products content
    protected function register_content_tab_products_controls(){
        $this->start_controls_section(
            'section_content',
            [
                'label' => esc_html__( 'Content', TEXT_DOMAIN ),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'show_category',
            [
                'label' => esc_html__('Show category', TEXT_DOMAIN),
                'type' => Controls_Manager::SWITCHER,
                'label_on' => esc_html__('show', TEXT_DOMAIN),
                'label_off' => esc_html__('hide', TEXT_DOMAIN),
                'return_value' => 'yes',
                'default' => 'yes',
            ]
        );

        $this->add_control(
            'show_more_btn',
            [
                'label' => esc_html__('Show Icon', TEXT_DOMAIN),
                'type' => Controls_Manager::SWITCHER,
                'label_on' => esc_html__('show', TEXT_DOMAIN),
                'label_off' => esc_html__('hide', TEXT_DOMAIN),
                'return_value' => 'yes',
                'default' => 'yes',
            ]
        );


        $this->add_control(
            'image_size',
            [
                'type' => Controls_Manager::SELECT,
                'label' => esc_html__( 'image size', TEXT_DOMAIN ),
                'options' => THUMB_SIZES,
                'default' => 'medium',
            ]
        );

        $this->end_controls_section();
    }

    // items
    protected function register_content_tab_items(){
        $this->start_controls_section(
            'items_section',
            [
                'label' => esc_html__('Items', TEXT_DOMAIN),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'col',
            [
                'type' => Controls_Manager::SELECT,
                'label' => esc_html__( 'desktop', TEXT_DOMAIN ),
                'options' => BS_ROWS,
                'default' => '3',
            ]
        );
        $this->add_control(
            'col_tablet',
            [
                'type' => Controls_Manager::SELECT,
                'label' => esc_html__( 'tablet', TEXT_DOMAIN ),
                'options' => BS_ROWS,
                'default' => '4',
            ]
        );
        $this->add_control(
            'col_mobile',
            [
                'type' => Controls_Manager::SELECT,
                'label' => esc_html__( 'mobile', TEXT_DOMAIN ),
                'options' => BS_ROWS,
                'default' => '12'
            ]
        );

        $this->end_controls_section();

    }

    // query
    protected function register_content_tab_query(){
        $this->start_controls_section(
            'query_section',
            [
                'label' => esc_html__('Query', TEXT_DOMAIN),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'count',
            [
                'label' => esc_html__( 'number', TEXT_DOMAIN ),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'default' =>8,
                'placeholder' => esc_html__( 'enter the number', TEXT_DOMAIN ),
            ]
        );

        $this->add_control(
            'orderby',
            [
                'type' => \Elementor\Controls_Manager::SELECT,
                'label' => esc_html__( 'order by', TEXT_DOMAIN ),
                'options' => [
                    'modified' => [
                        'title' => esc_html__( 'last update', TEXT_DOMAIN ),
                    ],
                    'newest' => [
                        'title' => esc_html__( 'newest', TEXT_DOMAIN ),
                    ],
                    'oldest' => [
                        'title' => esc_html__( 'oldest', TEXT_DOMAIN ),
                    ],
                    'rand' => [
                        'title' => esc_html__( 'random', TEXT_DOMAIN ),
                    ],
                ],
                'default' => 'newest',
            ]
        );

        $this->end_controls_section();

    }


    // style tabs
    protected function register_style_tabs_controls()
    {
        $this->start_controls_section(
            'section_tabs_style',
            [
                'label' => esc_html__('tabs', TEXT_DOMAIN),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_responsive_control(
            'tab_direction',
            [
                'type' => \Elementor\Controls_Manager::CHOOSE,
                'label' => esc_html__( 'Tab direction', TEXT_DOMAIN ),
                'options' => [
                    'flex-row' => [
                        'title' => esc_html__( 'horizontal', TEXT_DOMAIN ),
                        'icon' => 'eicon-h-align-stretch',
                    ],
                    'flex-column' => [
                        'title' => esc_html__( 'vertical', TEXT_DOMAIN ),
                        'icon' => 'eicon-v-align-middle',
                    ],

                ],
                'default' => 'card-content-center',
            ]
        );

        $this->add_responsive_control(
            'tabs_tab_width',
            [
                'label' => __('width', TEXT_DOMAIN),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px','%'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 500,
                    ],
                    '%' => [
                        'min' => 0,
                        'max' => 100,
                    ]
                ],
                'selectors' => [
                    '{{WRAPPER}} .bcp-tabs-nav-item' => 'width: {{SIZE}}{{UNIT}}!important;',
                ],
            ]
        );
        $this->add_responsive_control(
            'tabs_tab_height',
            [
                'label' => __('height', TEXT_DOMAIN),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px','%'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 500,
                    ],
                    '%' => [
                        'min' => 0,
                        'max' => 100,
                    ]
                ],
                'selectors' => [
                    '{{WRAPPER}} .bcp-tabs-nav-item' => 'height: {{SIZE}}{{UNIT}}!important;',
                ],
            ]
        );

        $this->add_responsive_control(
            'tabs_head_margin',
            [
                'label' => __('bottom margin', TEXT_DOMAIN),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px','%'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 500,
                    ],
                    '%' => [
                        'min' => 0,
                        'max' => 100,
                    ]
                ],
                'selectors' => [
                    '{{WRAPPER}} .bcp-tabs-head' => 'margin-bottom: {{SIZE}}{{UNIT}}!important;',
                ],
            ]
        );

        // icon
        $this->add_control(
            'tabs_icon_heading',
            [
                'label' => esc_html__('Icon', TEXT_DOMAIN),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before'
            ]
        );
        $this->add_responsive_control(
            'tabs_icon_margin',
            [
                'label' => __('margin', TEXT_DOMAIN),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px','%'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 500,
                    ],
                    '%' => [
                        'min' => 0,
                        'max' => 100,
                    ]
                ],
                'selectors' => [
                    '{{WRAPPER}} .bcp-tabs-nav-item' => 'gap: {{SIZE}}{{UNIT}}!important;',
                ],
            ]
        );
        $this->add_responsive_control(
            'tabs_icon_size',
            [
                'label' => __('Icon size', TEXT_DOMAIN),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em', 'rem'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .bcp-tabs-nav-item i' => 'font-size: {{SIZE}}{{UNIT}}!important;',
                    '{{WRAPPER}} .bcp-tabs-nav-item svg' => 'width: {{SIZE}}{{UNIT}}!important;height: {{SIZE}}{{UNIT}}!important;',
                ],
            ]
        );




        $this->add_control(
            'tabs_nav_heading',
            [
                'label' => esc_html__('links', TEXT_DOMAIN),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before'
            ]
        );
        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'tabs_nav_typography',
                'label' => esc_html__('typography', TEXT_DOMAIN),
                'selector' => '{{WRAPPER}} .bcp-tabs-nav-item ',
            ]
        );
        $this->add_responsive_control(
            'tabs_nav_margin',
            [
                'label' => esc_html__('margin', TEXT_DOMAIN),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .bcp-tabs-nav-item' => 'margin-left: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->start_controls_tabs(
            'tabs_nav_style_tabs'
        );
        // normal tab
        $this->start_controls_tab(
            'tabs_nav_style_normal_tab',
            [
                'label' => esc_html__('normal', TEXT_DOMAIN),
            ]
        );
        $this->add_responsive_control(
            'tabs_nav_badge_height',
            [
                'label' => __('Badge height', TEXT_DOMAIN),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em', 'rem'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 40,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .bcp-tabs-nav-item:before' => 'height: {{SIZE}}{{UNIT}}!important;',
                ],
            ]
        );
        $this->add_responsive_control(
            'tabs_nav_padding',
            [
                'label' => esc_html__('padding', TEXT_DOMAIN),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .bcp-tabs-nav-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
        $this->add_responsive_control(
            'tabs_nav_radius',
            [
                'label' => __('border radius', TEXT_DOMAIN),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', 'rem'],
                'selectors' => [
                    '{{WRAPPER}} .bcp-tabs-nav-item:before,{{WRAPPER}} .bcp-tabs-nav-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
        $this->add_control(
            'tabs_nav_color',
            [
                'label' => esc_html__('text color', TEXT_DOMAIN),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .bcp-tabs-nav-item' => 'color: {{VALUE}};',
                ],
            ]
        );
        $this->add_control(
            'tabs_nav_bg',
            [
                'label' => esc_html__('background color', TEXT_DOMAIN),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .bcp-tabs-nav-item' => 'background-color: {{VALUE}};',
                ],
            ]
        );
        $this->add_control(
            'tabs_icon_color',
            [
                'label' => esc_html__('Icon color', TEXT_DOMAIN),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .bcp-tabs-nav-item i' => 'color: {{VALUE}};',
                    '{{WRAPPER}} .bcp-tabs-nav-item svg' => 'stroke: {{VALUE}};',
                    '{{WRAPPER}} .bcp-tabs-nav-item svg path' => 'stroke: {{VALUE}};',
                ],
            ]
        );
        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'tabs_nav_border_type',
                'label' => esc_html__('border', TEXT_DOMAIN),
                'selector' => '{{WRAPPER}} .bcp-tabs-nav-item',
            ]
        );
        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'tabs_nav_shadow',
                'selector' => '{{WRAPPER}} .bcp-tabs-nav-item',
            ]
        );
        $this->end_controls_tab();
        // hover tab
        $this->start_controls_tab(
            'tabs_nav_style_hover_tab',
            [
                'label' => esc_html__('hover', TEXT_DOMAIN),
            ]
        );
        $this->add_responsive_control(
            'tabs_nav_padding_hover',
            [
                'label' => esc_html__('padding', TEXT_DOMAIN),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .bcp-tabs-nav-item:hover' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
        $this->add_responsive_control(
            'tabs_nav_radius_hover',
            [
                'label' => __('border radius', TEXT_DOMAIN),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', 'rem'],
                'selectors' => [
                    '{{WRAPPER}} .bcp-tabs-nav-item:hover:before' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
        $this->add_control(
            'tabs_nav_color_hover',
            [
                'label' => esc_html__('text color', TEXT_DOMAIN),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .bcp-tabs-nav-item:hover' => 'color: {{VALUE}};',
                ],
            ]
        );
        $this->add_control(
            'tabs_nav_bg_hover',
            [
                'label' => esc_html__('background color', TEXT_DOMAIN),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .bcp-tabs-nav-item:hover:before' => 'background-color: {{VALUE}};',
                ],
            ]
        );
        $this->add_control(
            'tabs_icon_color_hover',
            [
                'label' => esc_html__('Icon color', TEXT_DOMAIN),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .bcp-tabs-nav-item:hover i' => 'color: {{VALUE}}!important;',
                    '{{WRAPPER}} .bcp-tabs-nav-item:hover svg' => 'stroke: {{VALUE}} !important;',
                    '{{WRAPPER}} .bcp-tabs-nav-item:hover svg path' => 'stroke: {{VALUE}} !important;',
                ],
            ]
        );
        $this->add_control(
            'tabs_nav_badge_hover',
            [
                'label' => esc_html__('badge color', TEXT_DOMAIN),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .bcp-tabs-nav-item:hover:before' => 'background-color: {{VALUE}};',
                ],
            ]
        );
        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'tabs_nav_border_type_hover',
                'label' => esc_html__('border', TEXT_DOMAIN),
                'selector' => '{{WRAPPER}} .bcp-tabs-nav-item:hover',
            ]
        );
        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'tabs_nav_shadow_hover',
                'selector' => '{{WRAPPER}} .bcp-tabs-nav-item:hover:before',
            ]
        );
        $this->end_controls_tab();
        // active tab
        $this->start_controls_tab(
            'tabs_nav_style_active_tab',
            [
                'label' => esc_html__('active', TEXT_DOMAIN),
            ]
        );
        $this->add_responsive_control(
            'tabs_nav_badge_height_active',
            [
                'label' => __('Badge height', TEXT_DOMAIN),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em', 'rem'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 40,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .bcp-tabs-nav-item.active:before' => 'height: {{SIZE}}{{UNIT}}!important;',
                ],
            ]
        );
        $this->add_responsive_control(
            'tabs_nav_padding_active',
            [
                'label' => esc_html__('padding', TEXT_DOMAIN),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .bcp-tabs-nav-item.active' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
        $this->add_responsive_control(
            'tabs_nav_radius_active',
            [
                'label' => __('border radius', TEXT_DOMAIN),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', 'rem'],
                'selectors' => [
                    '{{WRAPPER}} .bcp-tabs-nav-item.active:before' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
        $this->add_control(
            'tabs_nav_color_active',
            [
                'label' => esc_html__('text color', TEXT_DOMAIN),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .bcp-tabs-nav-item.active' => 'color: {{VALUE}};',
                ],
            ]
        );
        $this->add_control(
            'tabs_nav_bg_active',
            [
                'label' => esc_html__('background color', TEXT_DOMAIN),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .bcp-tabs-nav-item.active' => 'background-color: {{VALUE}};',
                ],
            ]
        );
        $this->add_control(
            'tabs_icon_color_active',
            [
                'label' => esc_html__('Icon color', TEXT_DOMAIN),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .bcp-tabs-nav-item.active i' => 'color: {{VALUE}}!important;',
                    '{{WRAPPER}} .bcp-tabs-nav-item.active svg' => 'stroke: {{VALUE}}!important;',
                    '{{WRAPPER}} .bcp-tabs-nav-item.active svg path' => 'stroke: {{VALUE}}!important;',
                ],
            ]
        );
        $this->add_control(
            'tabs_nav_badge_active',
            [
                'label' => esc_html__('badge color', TEXT_DOMAIN),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .bcp-tabs-nav-item.active:before' => 'background-color: {{VALUE}};',
                ],
            ]
        );
        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'tabs_nav_border_type_active',
                'label' => esc_html__('border', TEXT_DOMAIN),
                'selector' => '{{WRAPPER}} .bcp-tabs-nav-item.active',
            ]
        );
        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'tabs_nav_shadow_active',
                'selector' => '{{WRAPPER}} .bcp-tabs-nav-item.active:before',
            ]
        );
        $this->end_controls_tab();
        $this->end_controls_tabs();

        $this->end_controls_section();
    }

    // style box
    protected function register_style_tab_card_controls(){
        $this->start_controls_section(
            'section_box_style',
            [
                'label' => esc_html__( 'Box', TEXT_DOMAIN ),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_responsive_control(
            'box_margin',
            [
                'label'      => __( 'margin', TEXT_DOMAIN ),
                'type'       => Controls_Manager::SLIDER,
                'size_units' => [ 'px', 'em', 'rem' ],
                'range'      => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'size' => 25,
                    'unit' => 'px',
                ],
                'selectors'  => [
                    '{{WRAPPER}} .post-item' => 'margin-bottom: {{SIZE}}{{UNIT}}!important;',
                ],
            ]
        );

        $this->add_responsive_control(
            'box_height',
            [
                'label' => __('height', TEXT_DOMAIN),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em', 'rem'],
                'range' => [
                    'px' => [
                        'min' => 50,
                        'max' => 1000,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => '240',
                ],
                'selectors' => [
                    '{{WRAPPER}} .post-item' => 'height: {{SIZE}}{{UNIT}}!important;',
                ],
            ]
        );

        $this->add_responsive_control(
            'box_padding',
            [
                'label'      => esc_html__( 'padding', TEXT_DOMAIN ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%' ],
                'selectors'  => [
                    '{{WRAPPER}} .post-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'box_radius',
            [
                'label'      => __( 'border radius', TEXT_DOMAIN ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', 'em', 'rem' ],
                'selectors'  => [
                    '{{WRAPPER}} .post-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
        $this->add_responsive_control(
            'box_image_radius',
            [
                'label'      => __( 'image border radius', TEXT_DOMAIN ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', 'em', 'rem' ],
                'selectors'  => [
                    '{{WRAPPER}} .post-item-image' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
        $this->add_control(
            'box_color',
            [
                'label'     => esc_html__( 'background color', TEXT_DOMAIN ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .post-item' => 'background-color: {{VALUE}};',
                ],
            ]
        );
        $this->add_control(
            'box_title_bg_color',
            [
                'label'     => esc_html__( 'title background color', TEXT_DOMAIN ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .post-item-content' => 'background: linear-gradient(0, transparent, {{VALUE}}, transparent)',
                ],
            ]
        );
        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name'     => 'box_border_type',
                'label'    => esc_html__( 'border', TEXT_DOMAIN ),
                'selector' => '{{WRAPPER}} .post-item',
            ]
        );
        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name'    => 'box_shadow',
                'selector' => '{{WRAPPER}} .post-item',
            ]
        );

        $this->end_controls_section();
    }

    // style title
    protected function register_style_tab_title_controls(){
        $this->start_controls_section(
            'section_title_style',
            [
                'label' => esc_html__( 'Title', TEXT_DOMAIN ),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name'     => 'title_typography',
                'label'    => esc_html__( 'typography', TEXT_DOMAIN ),
                'selector' => '{{WRAPPER}} .post-item .title',
            ]
        );

        $this->start_controls_tabs(
            'title_style_tabs',[
                'separator' => 'before'
            ]
        );

        // normal tab
        $this->start_controls_tab(
            'title_style_normal_tab',
            [
                'label' => esc_html__( 'normal', TEXT_DOMAIN ),
            ]
        );
        $this->add_control(
            'title_color',
            [
                'label'     => esc_html__( 'color', TEXT_DOMAIN ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .post-item .title' => 'color: {{VALUE}};',
                ],
            ]
        );
        $this->add_group_control(
            Group_Control_Text_Shadow::get_type(),
            [
                'name'     => 'title_text_shadow',
                'selector' => '{{WRAPPER}} .post-item .title',
            ]
        );
        $this->end_controls_tab();

        // hover tab
        $this->start_controls_tab(
            'category_style_hover_tab',
            [
                'label' => esc_html__( 'hover', TEXT_DOMAIN ),
            ]
        );
        $this->add_control(
            'title_color_hover',
            [
                'label'     => esc_html__( 'color', TEXT_DOMAIN ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .post-item:hover .title' => 'color: {{VALUE}};',
                ],
            ]
        );
        $this->add_group_control(
            Group_Control_Text_Shadow::get_type(),
            [
                'name'     => 'title_text_shadow_hover',
                'selector' => '{{WRAPPER}} .post-item:hover .title',
            ]
        );
        $this->end_controls_tab();

        $this->end_controls_tabs();
        $this->end_controls_section();
    }

    // style more button
    protected function register_style_tab_more_button_controls(){
        $this->start_controls_section(
            'section_more_style',
            [
                'label' => esc_html__( 'Read More Icon', TEXT_DOMAIN ),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_responsive_control(
            'more_icon_size',
            [
                'label' => __('Icon size', TEXT_DOMAIN),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em', 'rem'],
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 200,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .post-overly-icon' => 'font-size: {{SIZE}}{{UNIT}}!important;',
                ],
            ]
        );

        $this->add_control(
            'more_color',
            [
                'label'     => esc_html__( 'color', TEXT_DOMAIN ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .post-overly-icon' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->end_controls_section();
    }

    // style category badge
    protected function register_style_tab_category_badge_controls(){
        $this->start_controls_section(
            'section_category_badge_style',
            [
                'label' => esc_html__( 'Category Badge', TEXT_DOMAIN ),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_responsive_control(
            'category_border_radius',
            [
                'label' => esc_html__('border radius', TEXT_DOMAIN),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .post-item-cat' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}!important;',
                ],
            ]
        );

        $this->add_responsive_control(
            'category_offset',
            [
                'label' => __('margin', TEXT_DOMAIN),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em', 'rem'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .post-item-cat' => 'top: {{SIZE}}{{UNIT}}!important;right: {{SIZE}}{{UNIT}}!important;',
                ],
            ]
        );

        $this->start_controls_tabs(
            'category_style_tabs',[
                'separator' => 'before'
            ]
        );
        // normal tab
        $this->start_controls_tab(
            'category_style_normal_tab',
            [
                'label' => esc_html__( 'normal', TEXT_DOMAIN ),
            ]
        );
        $this->add_control(
            'category_bg_color',
            [
                'label' => esc_html__('background color', TEXT_DOMAIN),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .post-item-cat' => 'background-color: {{VALUE}};',
                ],
            ]
        );
        $this->add_control(
            'category_color',
            [
                'label' => esc_html__('color', TEXT_DOMAIN),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .post-item-cat' => 'color: {{VALUE}};',
                ],
            ]
        );
        $this->end_controls_tab();
        // hover tab
        $this->start_controls_tab(
            'title_style_hover_tab',
            [
                'label' => esc_html__( 'hover', TEXT_DOMAIN ),
            ]
        );
        $this->add_control(
            'category_bg_color_hover',
            [
                'label' => esc_html__('background color', TEXT_DOMAIN),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .post-item-cat:hover' => 'background-color: {{VALUE}};',
                ],
            ]
        );
        $this->add_control(
            'category_color_hover',
            [
                'label' => esc_html__('color', TEXT_DOMAIN),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .post-item-cat:hover' => 'color: {{VALUE}};',
                ],
            ]
        );
        $this->end_controls_tab();
        $this->end_controls_tabs();

        $this->end_controls_section();
    }


    protected function renderCategoriesQuery($settings): array
    {
        $custom_categories = $settings['selected_categories'];
        $category_items = [];

        if (!empty($custom_categories)) {
            foreach ($custom_categories as $item) {
                if (!empty($item['category_id'])) {
                    $parts = explode('|', $item['category_id']);
                    $cat_id = (int)$parts[0];
                    $icon = isset($item['icon']) ? $item['icon'] : null;
                    $category_items[] = [
                        'id' => $cat_id,
                        'icon' => $icon,
                    ];
                }
            }
        }

        if (empty($category_items)) {
            return [];
        }

        $unique_ids = array_unique(array_column($category_items, 'id'));

        $args = array(
            'taxonomy' => 'portfolio_cat',
            'include' => $unique_ids,
            'orderby' => 'include',
            'hide_empty' => false,
        );

        $terms = get_terms($args);

        if (is_wp_error($terms) || empty($terms)) {
            return [];
        }

        $terms_by_id = [];
        foreach ($terms as $term) {
            $terms_by_id[$term->term_id] = $term;
        }

        $ordered_categories = [];
        foreach ($category_items as $item) {
            $id = $item['id'];
            if (isset($terms_by_id[$id])) {
                $ordered_categories[] = [
                    'term' => $terms_by_id[$id],
                    'icon' => $item['icon'],
                ];
            }
        }

        return $ordered_categories;
    }



    protected function renderQuery($term):array{
        $settings = $this->get_settings();

        $order = "DESC";
        $orderBy = $settings['orderby'];
        if($orderBy == 'newest'){
            $orderBy = 'date';
        }
        if($orderBy == 'oldest'){
            $orderBy = 'date';
            $order = "ASC";
        }



        $args = array(
            'posts_per_page' => $settings['count'],
            'post_status' => 'publish',
            'post_type' => 'portfolios',
            'orderby' => $orderBy,
            'order' => $order,
        );

        $args['tax_query'][] = array(
            'taxonomy' => 'portfolio_cat',
            'field' => 'slug',
            'terms' => $term,
        );

        return $args;
    }


    protected function render()
    {
        $settings = $this->get_settings_for_display();
        $tabDirection = $settings['tab_direction'];

        // content
        $showCategory = $settings['show_category'];
        $showPostMoreBtn = $settings['show_more_btn'];

        // grid
        $col = 'col-lg-' . $settings['col'] . ' col-md-' . $settings['col_tablet'] . ' col-' . $settings['col_mobile'];
        $tabsAlign = $settings['tabs_align'];

        // section button link
        if (!empty($settings['section_btn_link']['url'])) {
            $this->add_link_attributes('section_btn_link', $settings['section_btn_link']);
        }


        $selectedCats = $this->renderCategoriesQuery($settings);
        if (!is_wp_error($selectedCats)) {
            if (!empty($selectedCats)) {
                // section
                echo "<div class='bcp-tabs'>";
                echo "<div class='bcp-tabs-head'>";
                echo "<div class='bcp-tabs-nav $tabsAlign'>";

                foreach ($selectedCats as $key => $catData){
                    $cat = $catData['term'];
                    $icon = $catData['icon'];

                    $active = '';
                    if ($key === array_key_first($selectedCats)) $active = 'active';
                    echo "<span class='bcp-tabs-nav-item $tabDirection $active' bcp-data-tab-id='$cat->term_id'>";
                    // Output the icon
                    if (!empty($icon)) {
                        \Elementor\Icons_Manager::render_icon($icon, [ 'aria-hidden' => 'true' ]);
                    }
                    echo " $cat->name</span>";
                }
                echo "</div>";
                echo "</div>";
                echo "<div class='bcp-tabs-content'>";

                foreach ($selectedCats as $key => $catData){
                    $cat = $catData['term'];
                    $active = '';
                    if ($key === array_key_first($selectedCats)) $active = 'active';
                    echo "<div class='bcp-tab-content $active' id='$cat->term_id'>";
                    echo "<div class='row'>";

                    // get query
                    $wp_query = new \WP_Query($this->renderQuery($cat->slug));
                    if ($wp_query->have_posts()) {

                        while ($wp_query->have_posts()): $wp_query->the_post(); global $post;?>
                            <div class='<?php echo $col?>'>
                                <div class="post-item portfolio-item elementor-portfolio">
                                    <div class="post-item-image">
                                        <a href="<?php the_permalink() ?>">
                                            <?php if (has_post_thumbnail()): the_post_thumbnail($settings['image_size']);
                                            else:
                                                echo "<img src='" . esc_url(get_template_directory_uri() . '/images/default.jpg') . "' alt='image'>";
                                            endif; ?>
                                        </a>
                                        <?php if ($showCategory === 'yes') {
                                            $category = get_the_terms( $post, 'portfolio_cat' );
                                            if (is_array($category)){
                                                $firstCategory = $category[0];
                                            }
                                            if(!empty($firstCategory)):?>
                                                <a href="<?php echo get_term_link($firstCategory->term_id,'portfolio_cat');?>" class="post-item-cat"><?php echo $firstCategory->name;?></a>
                                            <?php endif; } ?>

                                    </div>
                                    <div class="post-item-content">
                                        <a href="<?php the_permalink() ?>" class="title"><div><?php the_title(); ?></div></a>
                                    </div>
                                    <?php if($showPostMoreBtn === 'yes'):?>
                                        <a href="<?php the_permalink() ?>" class="post-overly-icon"><i class="icon-arrow-right"></i></a>
                                    <?php endif;?>
                                </div>
                            </div>
                        <?php endwhile;

                    } else {
                        echo '<div class="bg-dark text-white rounded-2 p-3">' . esc_html__('no portfolios found!', TEXT_DOMAIN) . '</div>';
                    }

                    echo "</div>"; // end row
                    echo "</div>"; // end content
                }
                echo "</div>"; // end contents
                echo "</div>"; // end tabs
            }else{
                echo "<div class='bg-dark text-white rounded-2 p-3'>".__('No categories selected.',TEXT_DOMAIN)."</div>";
            }
        }
    }
}

Plugin::instance()->widgets_manager->register_widget_type(new PortfolioTabs());