<?php
if ( ! defined( 'ABSPATH' ) ) exit;

use Elementor\Controls_Manager;
use Elementor\Repeater;
use Elementor\Icons_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;

class EPPRO_Advanced_FAQ_Widget extends EPPRO_Base_Widget {

    public function get_name(): string { return 'eppro_advanced_faq'; }

    public function get_style_depends(): array {
        return [ 'eppro-adv-faq' ];
    }

    public function get_script_depends(): array {
        return [ 'eppro-faq-script' ];
    }

    public function get_title(): string { return __( 'FAQ Pro', 'admore-widgets-suite' ); }
    public function get_icon(): string { return 'eicon-accordion'; }
    public function get_keywords(): array { return [ 'faq', 'accordion', 'questions', 'answers', 'eppro' ]; }

    protected function register_controls(): void {


        /* GENERAL SETTINGS */

        $this->start_controls_section(
            'faq_general',
            [
                'label' => __( 'General Settings', 'admore-widgets-suite' ),
            ]
        );

        $this->add_control(
            'enable_search',
            [
                'label'   => __( 'Enable Search', 'admore-widgets-suite' ),
                'type'    => Controls_Manager::SWITCHER,
                'default' => 'yes',
            ]
        );

        $this->add_control(
            'search_icon',
            [
                'label'     => __( 'Search Icon', 'admore-widgets-suite' ),
                'type'      => Controls_Manager::ICONS,
                'default'   => [
                    'value'   => 'fas fa-search',
                    'library' => 'fa-solid',
                ],
                'condition' => [ 'enable_search' => 'yes' ],
            ]
        );

        $this->add_control(
            'search_placeholder',
            [
                'label'     => __( 'Search Placeholder', 'admore-widgets-suite' ),
                'type'      => Controls_Manager::TEXT,
                'default'   => __( 'Search FAQ', 'admore-widgets-suite' ),
                'condition' => [ 'enable_search' => 'yes' ],
            ]
        );

        $this->add_control(
            'enable_tabs',
            [
                'label'   => __( 'Enable Tabs', 'admore-widgets-suite' ),
                'type'    => Controls_Manager::SWITCHER,
                'default' => 'yes',
            ]
        );

        $this->add_control(
            'open_first',
            [
                'label'        => __( 'Open First Item', 'admore-widgets-suite' ),
                'type'         => Controls_Manager::SWITCHER,
                'default'      => 'yes',
                'return_value' => 'yes',
            ]
        );

        $this->add_control(
            'accordion_mode',
            [
                'label'   => __( 'Accordion Mode', 'admore-widgets-suite' ),
                'type'    => Controls_Manager::SWITCHER,
                'default' => 'yes',
            ]
        );

        $this->add_control(
            'animation_type',
            [
                'label'   => __( 'Answer Animation', 'admore-widgets-suite' ),
                'type'    => Controls_Manager::SELECT,
                'default' => 'slide',
                'options' => [
                    'slide' => __( 'Slide', 'admore-widgets-suite' ),
                    'fade'  => __( 'Fade', 'admore-widgets-suite' ),
                ],
            ]
        );

        $this->add_control(
            'icon_position',
            [
                'label'   => __( 'Toggle Icon Position', 'admore-widgets-suite' ),
                'type'    => Controls_Manager::SELECT,
                'default' => 'right',
                'options' => [
                    'left'  => __( 'Left', 'admore-widgets-suite' ),
                    'right' => __( 'Right', 'admore-widgets-suite' ),
                ],
            ]
        );

        $this->add_control(
            'icon_open',
            [
                'label'   => __( 'Icon — Closed', 'admore-widgets-suite' ),
                'type'    => Controls_Manager::ICONS,
                'default' => [ 'value' => 'fas fa-plus', 'library' => 'fa-solid' ],
            ]
        );

        $this->add_control(
            'icon_close',
            [
                'label'   => __( 'Icon — Open', 'admore-widgets-suite' ),
                'type'    => Controls_Manager::ICONS,
                'default' => [ 'value' => 'fas fa-minus', 'library' => 'fa-solid' ],
            ]
        );

        $this->add_control(
            'enable_schema',
            [
                'label'   => __( 'Enable FAQ Schema (SEO)', 'admore-widgets-suite' ),
                'type'    => Controls_Manager::SWITCHER,
                'default' => 'yes',
            ]
        );

        $this->add_control(
            'toggle_all',
            [
                'label'        => __( 'Show Expand/Collapse All', 'admore-widgets-suite' ),
                'type'         => Controls_Manager::SWITCHER,
                'return_value' => 'yes',
                'separator'    => 'before',
            ]
        );

        $this->add_control(
            'expand_label',
            [
                'label'     => __( 'Expand Label', 'admore-widgets-suite' ),
                'type'      => Controls_Manager::TEXT,
                'default'   => __( 'Expand All', 'admore-widgets-suite' ),
                'condition' => [ 'toggle_all' => 'yes' ],
            ]
        );

        $this->add_control(
            'collapse_label',
            [
                'label'     => __( 'Collapse Label', 'admore-widgets-suite' ),
                'type'      => Controls_Manager::TEXT,
                'default'   => __( 'Collapse All', 'admore-widgets-suite' ),
                'condition' => [ 'toggle_all' => 'yes' ],
            ]
        );

        $this->end_controls_section();


        /* FAQ ITEMS */

        $this->start_controls_section(
            'faq_items',
            [ 'label' => __( 'FAQ Items', 'admore-widgets-suite' ) ]
        );

        $repeater = new Repeater();

        $repeater->add_control(
            'faq_question',
            [
                'label'   => __( 'Question', 'admore-widgets-suite' ),
                'type'    => Controls_Manager::TEXT,
                'default' => __( 'Sample FAQ Question', 'admore-widgets-suite' ),
            ]
        );

        $repeater->add_control(
            'faq_answer',
            [
                'label' => __( 'Answer', 'admore-widgets-suite' ),
                'type'  => Controls_Manager::WYSIWYG,
            ]
        );

        $repeater->add_control(
            'faq_category',
            [
                'label'   => __( 'Category', 'admore-widgets-suite' ),
                'type'    => Controls_Manager::TEXT,
                'default' => __( 'General', 'admore-widgets-suite' ),
            ]
        );

        $repeater->add_control(
            'faq_icon',
            [
                'label' => __( 'Icon', 'admore-widgets-suite' ),
                'type'  => Controls_Manager::ICONS,
            ]
        );

        $repeater->add_control(
            'faq_image',
            [
                'label'       => __( 'Answer Image', 'admore-widgets-suite' ),
                'type'        => Controls_Manager::MEDIA,
                'description' => __( 'Optional image displayed inside the answer.', 'admore-widgets-suite' ),
            ]
        );

        $this->add_control(
            'faq_list',
            [
                'label'       => __( 'FAQ Items', 'admore-widgets-suite' ),
                'type'        => Controls_Manager::REPEATER,
                'fields'      => $repeater->get_controls(),
                'default'     => [
                    [
                        'faq_question' => __( 'What is included in this package?', 'admore-widgets-suite' ),
                        'faq_answer'   => __( 'Our package includes everything you need to get started — full documentation, priority support, and lifetime updates.', 'admore-widgets-suite' ),
                        'faq_category' => __( 'General', 'admore-widgets-suite' ),
                    ],
                    [
                        'faq_question' => __( 'How do I get started?', 'admore-widgets-suite' ),
                        'faq_answer'   => __( 'Simply sign up, choose a plan, and follow the quick-start guide. You can be up and running in under 5 minutes.', 'admore-widgets-suite' ),
                        'faq_category' => __( 'General', 'admore-widgets-suite' ),
                    ],
                    [
                        'faq_question' => __( 'Can I cancel my subscription at any time?', 'admore-widgets-suite' ),
                        'faq_answer'   => __( 'Yes, you can cancel anytime from your account dashboard. No questions asked and no hidden fees.', 'admore-widgets-suite' ),
                        'faq_category' => __( 'Billing', 'admore-widgets-suite' ),
                    ],
                    [
                        'faq_question' => __( 'Do you offer a money-back guarantee?', 'admore-widgets-suite' ),
                        'faq_answer'   => __( 'Absolutely. We offer a full 30-day money-back guarantee — no questions asked.', 'admore-widgets-suite' ),
                        'faq_category' => __( 'Billing', 'admore-widgets-suite' ),
                    ],
                ],
                'title_field' => '{{{ faq_question }}}',
            ]
        );

        $this->end_controls_section();


        /* CARD STYLE */

        $this->start_controls_section(
            'card_style',
            [
                'label' => __( 'Card Style', 'admore-widgets-suite' ),
                'tab'   => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'card_background',
            [
                'label'     => __( 'Background', 'admore-widgets-suite' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .dtfaq-item' => 'background: {{VALUE}}',
                ],
            ]
        );

        $this->add_control(
            'card_hover_background',
            [
                'label'     => __( 'Hover Background', 'admore-widgets-suite' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [ '{{WRAPPER}} .dtfaq-item:hover' => 'background: {{VALUE}}' ],
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name'     => 'card_border',
                'selector' => '{{WRAPPER}} .dtfaq-item',
            ]
        );

        $this->add_responsive_control(
            'card_radius',
            [
                'label'      => __( 'Border Radius', 'admore-widgets-suite' ),
                'type'       => Controls_Manager::SLIDER,
                'size_units' => [ 'px' ],
                'selectors'  => [
                    '{{WRAPPER}} .dtfaq-item' => 'border-radius: {{SIZE}}{{UNIT}}',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name'     => 'card_shadow',
                'selector' => '{{WRAPPER}} .dtfaq-item',
            ]
        );

        $this->add_control(
            'active_heading',
            [
                'label'     => __( 'Active Item', 'admore-widgets-suite' ),
                'type'      => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'active_bg',
            [
                'label'     => __( 'Background', 'admore-widgets-suite' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [ '{{WRAPPER}} .dtfaq-item.active' => 'background-color: {{VALUE}}' ],
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name'     => 'active_border',
                'label'    => __( 'Border', 'admore-widgets-suite' ),
                'selector' => '{{WRAPPER}} .dtfaq-item.active',
            ]
        );

        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name'     => 'active_shadow',
                'label'    => __( 'Box Shadow', 'admore-widgets-suite' ),
                'selector' => '{{WRAPPER}} .dtfaq-item.active',
            ]
        );

        $this->end_controls_section();

        /* QUESTION STYLE */

        $this->start_controls_section(
            'question_style',
            [
                'label' => __( 'Question', 'admore-widgets-suite' ),
                'tab'   => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name'     => 'question_typography',
                'selector' => '{{WRAPPER}} .dtfaq-question-text',
            ]
        );

        $this->add_control(
            'question_color',
            [
                'label'     => __( 'Color', 'admore-widgets-suite' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [ '{{WRAPPER}} .dtfaq-question-text' => 'color: {{VALUE}};' ],
            ]
        );

        $this->add_control(
            'question_hover_color',
            [
                'label'     => __( 'Hover Color', 'admore-widgets-suite' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [ '{{WRAPPER}} .dtfaq-question:hover .dtfaq-question-text' => 'color: {{VALUE}};' ],
            ]
        );

        $this->add_control(
            'question_active_color',
            [
                'label'     => __( 'Active Color', 'admore-widgets-suite' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [ '{{WRAPPER}} .dtfaq-item.active .dtfaq-question-text' => 'color: {{VALUE}};' ],
            ]
        );

        $this->add_control(
            'question_bg',
            [
                'label'     => __( 'Background', 'admore-widgets-suite' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [ '{{WRAPPER}} .dtfaq-question' => 'background-color: {{VALUE}};' ],
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'question_active_bg',
            [
                'label'     => __( 'Active Background', 'admore-widgets-suite' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [ '{{WRAPPER}} .dtfaq-item.active .dtfaq-question' => 'background-color: {{VALUE}};' ],
            ]
        );

        $this->add_control(
            'question_hover_bg',
            [
                'label'     => __( 'Hover Background', 'admore-widgets-suite' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [ '{{WRAPPER}} .dtfaq-question:hover' => 'background-color: {{VALUE}};' ],
            ]
        );

        $this->add_responsive_control(
            'question_padding',
            [
                'label'      => __( 'Padding', 'admore-widgets-suite' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', 'em' ],
                'selectors'  => [ '{{WRAPPER}} .dtfaq-question' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
                'separator'  => 'before',
            ]
        );

        $this->add_responsive_control(
            'item_spacing',
            [
                'label'      => __( 'Spacing Between Items', 'admore-widgets-suite' ),
                'type'       => Controls_Manager::SLIDER,
                'size_units' => [ 'px' ],
                'range'      => [ 'px' => [ 'min' => 0, 'max' => 60 ] ],
                'default'    => [ 'size' => 8 ],
                'selectors'  => [ '{{WRAPPER}} .dtfaq-item + .dtfaq-item' => 'margin-top: {{SIZE}}{{UNIT}};' ],
            ]
        );

        $this->end_controls_section();

        /* ANSWER STYLE */

        $this->start_controls_section(
            'answer_style',
            [
                'label' => __( 'Answer', 'admore-widgets-suite' ),
                'tab'   => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name'     => 'answer_typography',
                'selector' => '{{WRAPPER}} .dtfaq-answer',
            ]
        );

        $this->add_control(
            'answer_color',
            [
                'label'     => __( 'Text Color', 'admore-widgets-suite' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [ '{{WRAPPER}} .dtfaq-answer' => 'color: {{VALUE}};' ],
            ]
        );

        $this->add_control(
            'answer_bg',
            [
                'label'     => __( 'Background', 'admore-widgets-suite' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [ '{{WRAPPER}} .dtfaq-answer' => 'background-color: {{VALUE}};' ],
            ]
        );

        $this->add_control(
            'answer_link_color',
            [
                'label'     => __( 'Link Color', 'admore-widgets-suite' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [ '{{WRAPPER}} .dtfaq-answer a' => 'color: {{VALUE}};' ],
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'answer_link_hover_color',
            [
                'label'     => __( 'Link Hover Color', 'admore-widgets-suite' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [ '{{WRAPPER}} .dtfaq-answer a:hover' => 'color: {{VALUE}};' ],
            ]
        );

        $this->add_responsive_control(
            'answer_padding',
            [
                'label'      => __( 'Padding', 'admore-widgets-suite' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', 'em' ],
                'selectors'  => [ '{{WRAPPER}} .dtfaq-answer' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name'     => 'answer_border',
                'selector' => '{{WRAPPER}} .dtfaq-answer',
            ]
        );

        $this->end_controls_section();

        /* TOGGLE-ALL BUTTON STYLE */

        $this->start_controls_section(
            'toggle_all_style',
            [
                'label'     => __( 'Toggle All Button', 'admore-widgets-suite' ),
                'tab'       => Controls_Manager::TAB_STYLE,
                'condition' => [ 'toggle_all' => 'yes' ],
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name'     => 'toggle_all_typography',
                'selector' => '{{WRAPPER}} .dtfaq-toggle-all-btn',
            ]
        );

        $this->add_control(
            'toggle_all_color',
            [
                'label'     => __( 'Text Color', 'admore-widgets-suite' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [ '{{WRAPPER}} .dtfaq-toggle-all-btn' => 'color: {{VALUE}};' ],
            ]
        );

        $this->add_control(
            'toggle_all_bg',
            [
                'label'     => __( 'Background', 'admore-widgets-suite' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [ '{{WRAPPER}} .dtfaq-toggle-all-btn' => 'background-color: {{VALUE}};' ],
            ]
        );

        $this->add_control(
            'toggle_all_hover_color',
            [
                'label'     => __( 'Hover Text Color', 'admore-widgets-suite' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [ '{{WRAPPER}} .dtfaq-toggle-all-btn:hover' => 'color: {{VALUE}};' ],
            ]
        );

        $this->add_control(
            'toggle_all_hover_bg',
            [
                'label'     => __( 'Hover Background', 'admore-widgets-suite' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [ '{{WRAPPER}} .dtfaq-toggle-all-btn:hover' => 'background-color: {{VALUE}};' ],
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name'     => 'toggle_all_border',
                'selector' => '{{WRAPPER}} .dtfaq-toggle-all-btn',
            ]
        );

        $this->add_responsive_control(
            'toggle_all_radius',
            [
                'label'      => __( 'Border Radius', 'admore-widgets-suite' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px' ],
                'selectors'  => [ '{{WRAPPER}} .dtfaq-toggle-all-btn' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
            ]
        );

        $this->add_responsive_control(
            'toggle_all_padding',
            [
                'label'      => __( 'Padding', 'admore-widgets-suite' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', 'em' ],
                'selectors'  => [ '{{WRAPPER}} .dtfaq-toggle-all-btn' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
            ]
        );

        $this->end_controls_section();

        /* ICON STYLE */

        $this->start_controls_section(
            'icon_style',
            [
                'label' => __( 'Toggle Icon', 'admore-widgets-suite' ),
                'tab'   => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'icon_color',
            [
                'label'     => __( 'Icon Color', 'admore-widgets-suite' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .dtfaq-toggle-icon i'   => 'color: {{VALUE}}',
                    '{{WRAPPER}} .dtfaq-toggle-icon svg' => 'fill: {{VALUE}}',
                ],
            ]
        );

        $this->add_control(
            'icon_active_color',
            [
                'label'     => __( 'Active Icon Color', 'admore-widgets-suite' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .dtfaq-item.active .dtfaq-toggle-icon i'   => 'color: {{VALUE}}',
                    '{{WRAPPER}} .dtfaq-item.active .dtfaq-toggle-icon svg' => 'fill: {{VALUE}}',
                ],
            ]
        );

        $this->add_control(
            'icon_size',
            [
                'label'      => __( 'Icon Size', 'admore-widgets-suite' ),
                'type'       => Controls_Manager::SLIDER,
                'size_units' => [ 'px' ],
                'range'      => [ 'px' => [ 'min' => 8, 'max' => 48 ] ],
                'selectors'  => [
                    '{{WRAPPER}} .dtfaq-toggle-icon i'   => 'font-size: {{SIZE}}{{UNIT}}',
                    '{{WRAPPER}} .dtfaq-toggle-icon svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}',
                ],
            ]
        );

        $this->add_control(
            'icon_rotation_speed',
            [
                'label'      => __( 'Rotation Transition (ms)', 'admore-widgets-suite' ),
                'type'       => Controls_Manager::SLIDER,
                'size_units' => [ 'ms' ],
                'range'      => [ 'ms' => [ 'min' => 100, 'max' => 1000, 'step' => 50 ] ],
                'default'    => [ 'size' => 300, 'unit' => 'ms' ],
                'selectors'  => [ '{{WRAPPER}} .dtfaq-toggle-icon' => 'transition: transform {{SIZE}}ms ease;' ],
            ]
        );

        $this->add_control(
            'icon_spacing',
            [
                'label'      => __( 'Icon Spacing from Edge', 'admore-widgets-suite' ),
                'type'       => Controls_Manager::SLIDER,
                'size_units' => [ 'px' ],
                'range'      => [ 'px' => [ 'min' => 0, 'max' => 40 ] ],
                'selectors'  => [
                    '{{WRAPPER}} .dtfaq-icon-right .dtfaq-toggle-icon' => 'margin-left: {{SIZE}}{{UNIT}}',
                    '{{WRAPPER}} .dtfaq-icon-left .dtfaq-toggle-icon'  => 'margin-right: {{SIZE}}{{UNIT}}',
                ],
            ]
        );

        $this->add_control(
            'icon_box_heading',
            [
                'label'     => __( 'Icon Box', 'admore-widgets-suite' ),
                'type'      => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'icon_box_bg',
            [
                'label'     => __( 'Background', 'admore-widgets-suite' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .dtfaq-toggle-icon' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'icon_box_active_bg',
            [
                'label'     => __( 'Background (Active)', 'admore-widgets-suite' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .dtfaq-item.active .dtfaq-toggle-icon' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'icon_box_padding',
            [
                'label'      => __( 'Padding', 'admore-widgets-suite' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', 'em' ],
                'selectors'  => [
                    '{{WRAPPER}} .dtfaq-toggle-icon' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'icon_box_radius',
            [
                'label'      => __( 'Border Radius', 'admore-widgets-suite' ),
                'type'       => Controls_Manager::SLIDER,
                'size_units' => [ 'px', '%' ],
                'range'      => [ 'px' => [ 'min' => 0, 'max' => 50 ], '%' => [ 'min' => 0, 'max' => 50 ] ],
                'selectors'  => [
                    '{{WRAPPER}} .dtfaq-toggle-icon' => 'border-radius: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'icon_box_size',
            [
                'label'      => __( 'Box Size (px)', 'admore-widgets-suite' ),
                'type'       => Controls_Manager::SLIDER,
                'size_units' => [ 'px' ],
                'range'      => [ 'px' => [ 'min' => 20, 'max' => 80 ] ],
                'selectors'  => [
                    '{{WRAPPER}} .dtfaq-toggle-icon' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;',
                ],
            ]
        );

        $this->end_controls_section();

        /* SEARCH BAR STYLE */

        $this->start_controls_section(
            'search_style',
            [
                'label'     => __( 'Search Bar', 'admore-widgets-suite' ),
                'tab'       => Controls_Manager::TAB_STYLE,
                'condition' => [ 'enable_search' => 'yes' ],
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name'     => 'search_typography',
                'selector' => '{{WRAPPER}} .dtfaq-search',
            ]
        );

        $this->add_control(
            'search_text_color',
            [
                'label'     => __( 'Text Color', 'admore-widgets-suite' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [ '{{WRAPPER}} .dtfaq-search' => 'color: {{VALUE}};' ],
            ]
        );

        $this->add_control(
            'search_bg',
            [
                'label'     => __( 'Background', 'admore-widgets-suite' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [ '{{WRAPPER}} .dtfaq-search' => 'background-color: {{VALUE}};' ],
            ]
        );

        $this->add_control(
            'search_placeholder_color',
            [
                'label'     => __( 'Placeholder Color', 'admore-widgets-suite' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .dtfaq-search::placeholder'               => 'color: {{VALUE}};',
                    '{{WRAPPER}} .dtfaq-search::-webkit-input-placeholder' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name'     => 'search_border',
                'selector' => '{{WRAPPER}} .dtfaq-search',
            ]
        );

        $this->add_control(
            'search_focus_border_color',
            [
                'label'     => __( 'Focus Border Color', 'admore-widgets-suite' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [ '{{WRAPPER}} .dtfaq-search:focus' => 'border-color: {{VALUE}}; outline: none;' ],
            ]
        );

        $this->add_responsive_control(
            'search_border_radius',
            [
                'label'      => __( 'Border Radius', 'admore-widgets-suite' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%' ],
                'selectors'  => [ '{{WRAPPER}} .dtfaq-search' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
            ]
        );

        $this->add_responsive_control(
            'search_padding',
            [
                'label'      => __( 'Padding', 'admore-widgets-suite' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', 'em' ],
                'selectors'  => [ '{{WRAPPER}} .dtfaq-search' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
            ]
        );

        $this->add_responsive_control(
            'search_bottom_spacing',
            [
                'label'      => __( 'Bottom Spacing', 'admore-widgets-suite' ),
                'type'       => Controls_Manager::SLIDER,
                'size_units' => [ 'px' ],
                'range'      => [ 'px' => [ 'min' => 0, 'max' => 60 ] ],
                'default'    => [ 'size' => 20 ],
                'selectors'  => [ '{{WRAPPER}} .dtfaq-search-wrapper' => 'margin-bottom: {{SIZE}}{{UNIT}};' ],
            ]
        );

        $this->add_control(
            'search_icon_color',
            [
                'label'     => __( 'Icon Color', 'admore-widgets-suite' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .dtfaq-search-icon'     => 'color: {{VALUE}};',
                    '{{WRAPPER}} .dtfaq-search-icon i'   => 'color: {{VALUE}};',
                    '{{WRAPPER}} .dtfaq-search-icon svg:not(.dtfaq-search-default)' => 'fill: {{VALUE}};',
                ],
                'separator' => 'before',
            ]
        );

        $this->end_controls_section();

        /* TAB BUTTONS STYLE */

        $this->start_controls_section(
            'tabs_style',
            [
                'label'     => __( 'Tab Buttons', 'admore-widgets-suite' ),
                'tab'       => Controls_Manager::TAB_STYLE,
                'condition' => [ 'enable_tabs' => 'yes' ],
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name'     => 'tab_typography',
                'selector' => '{{WRAPPER}} .dtfaq-tab',
            ]
        );

        $this->start_controls_tabs( 'tab_color_tabs' );

        $this->start_controls_tab( 'tab_normal', [ 'label' => __( 'Normal', 'admore-widgets-suite' ) ] );

        $this->add_control(
            'tab_color',
            [
                'label'     => __( 'Text Color', 'admore-widgets-suite' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [ '{{WRAPPER}} .dtfaq-tab' => 'color: {{VALUE}};' ],
            ]
        );

        $this->add_control(
            'tab_bg',
            [
                'label'     => __( 'Background', 'admore-widgets-suite' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [ '{{WRAPPER}} .dtfaq-tab' => 'background-color: {{VALUE}};' ],
            ]
        );

        $this->end_controls_tab();

        $this->start_controls_tab( 'tab_active', [ 'label' => __( 'Active', 'admore-widgets-suite' ) ] );

        $this->add_control(
            'tab_active_color',
            [
                'label'     => __( 'Text Color', 'admore-widgets-suite' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [ '{{WRAPPER}} .dtfaq-tab.active' => 'color: {{VALUE}};' ],
            ]
        );

        $this->add_control(
            'tab_active_bg',
            [
                'label'     => __( 'Background', 'admore-widgets-suite' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [ '{{WRAPPER}} .dtfaq-tab.active' => 'background-color: {{VALUE}};' ],
            ]
        );

        $this->end_controls_tab();

        $this->start_controls_tab( 'tab_hover', [ 'label' => __( 'Hover', 'admore-widgets-suite' ) ] );

        $this->add_control(
            'tab_hover_color',
            [
                'label'     => __( 'Text Color', 'admore-widgets-suite' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [ '{{WRAPPER}} .dtfaq-tab:hover' => 'color: {{VALUE}};' ],
            ]
        );

        $this->add_control(
            'tab_hover_bg',
            [
                'label'     => __( 'Background', 'admore-widgets-suite' ),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [ '{{WRAPPER}} .dtfaq-tab:hover' => 'background-color: {{VALUE}};' ],
            ]
        );

        $this->end_controls_tab();

        $this->end_controls_tabs();

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name'      => 'tab_border',
                'selector'  => '{{WRAPPER}} .dtfaq-tab',
                'separator' => 'before',
            ]
        );

        $this->add_responsive_control(
            'tab_border_radius',
            [
                'label'      => __( 'Border Radius', 'admore-widgets-suite' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%' ],
                'selectors'  => [ '{{WRAPPER}} .dtfaq-tab' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
            ]
        );

        $this->add_responsive_control(
            'tab_padding',
            [
                'label'      => __( 'Padding', 'admore-widgets-suite' ),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', 'em' ],
                'selectors'  => [ '{{WRAPPER}} .dtfaq-tab' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
            ]
        );

        $this->add_responsive_control(
            'tabs_gap',
            [
                'label'      => __( 'Gap Between Tabs', 'admore-widgets-suite' ),
                'type'       => Controls_Manager::SLIDER,
                'size_units' => [ 'px' ],
                'range'      => [ 'px' => [ 'min' => 0, 'max' => 40 ] ],
                'selectors'  => [ '{{WRAPPER}} .dtfaq-tabs' => 'gap: {{SIZE}}{{UNIT}};' ],
            ]
        );

        $this->add_responsive_control(
            'tabs_bottom_spacing',
            [
                'label'      => __( 'Bottom Spacing', 'admore-widgets-suite' ),
                'type'       => Controls_Manager::SLIDER,
                'size_units' => [ 'px' ],
                'range'      => [ 'px' => [ 'min' => 0, 'max' => 60 ] ],
                'default'    => [ 'size' => 16 ],
                'selectors'  => [ '{{WRAPPER}} .dtfaq-tabs' => 'margin-bottom: {{SIZE}}{{UNIT}};' ],
            ]
        );

        $this->end_controls_section();

        // Entrance animation — inherited from base
        $this->eppro_register_entrance_animation_controls();
    }


    protected function render() {

        $settings = $this->get_settings_for_display();

        if ( empty( $settings['faq_list'] ) ) {
            if ( \Elementor\Plugin::$instance->editor->is_edit_mode() ) {
                echo '<div class="eppro-editor-placeholder">
                    <svg width="36" height="36" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" class="eppro-editor-placeholder__icon"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
                    <p class="eppro-editor-placeholder__title">' . esc_html__( 'FAQ Pro', 'admore-widgets-suite' ) . '</p>
                    <p class="eppro-editor-placeholder__desc">' . esc_html__( 'Add FAQ items in the Content tab.', 'admore-widgets-suite' ) . '</p>
                </div>';
            }
            return;
        }

        $categories = [];

        foreach ( $settings['faq_list'] as $faq ) {
            $categories[] = $faq['faq_category'];
        }

        $categories = array_unique( $categories );

        ?>

        <div class="dtfaq-wrapper">

        <?php if ( $settings['enable_search'] === 'yes' ) : ?>

        <div class="dtfaq-search-wrapper">
            <span class="dtfaq-search-icon" aria-hidden="true">
                <?php if ( ! empty( $settings['search_icon']['value'] ) ) :
                    Icons_Manager::render_icon( $settings['search_icon'], [ 'aria-hidden' => 'true' ] );
                else : ?>
                <svg class="dtfaq-search-default" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                <?php endif; ?>
            </span>
            <input type="text" class="dtfaq-search" placeholder="<?php echo esc_attr( $settings['search_placeholder'] ); ?>">
        </div>

        <?php endif; ?>


        <?php if ( $settings['enable_tabs'] === 'yes' ) : ?>

        <div class="dtfaq-tabs">
            <button class="dtfaq-tab active" data-category="__all"><?php esc_html_e( 'All', 'admore-widgets-suite' ); ?></button>
            <?php foreach ( $categories as $cat ) : ?>
            <button class="dtfaq-tab" data-category="<?php echo esc_attr( $cat ); ?>">
                <?php echo esc_html( $cat ); ?>
            </button>
            <?php endforeach; ?>
        </div>

        <?php endif; ?>


        <?php
        $icon_pos   = $settings['icon_position'] ?? 'right';
        $has_open   = ! empty( $settings['icon_open']['value'] );
        $has_close  = ! empty( $settings['icon_close']['value'] );
        ?>
        <?php if ( 'yes' === ( $settings['toggle_all'] ?? '' ) ) : ?>
        <div class="dtfaq-toggle-all-wrap">
            <button type="button" class="dtfaq-toggle-all-btn" data-expand-label="<?php echo esc_attr( $settings['expand_label'] ?? __( 'Expand All', 'admore-widgets-suite' ) ); ?>" data-collapse-label="<?php echo esc_attr( $settings['collapse_label'] ?? __( 'Collapse All', 'admore-widgets-suite' ) ); ?>">
                <?php echo esc_html( $settings['expand_label'] ?? __( 'Expand All', 'admore-widgets-suite' ) ); ?>
            </button>
        </div>
        <?php endif; ?>

        <div class="dtfaq-items dtfaq-icon-<?php echo esc_attr( $icon_pos ); ?>"
             data-accordion="<?php echo esc_attr( $settings['accordion_mode'] ?? 'yes' ); ?>"
             data-animation="<?php echo esc_attr( $settings['animation_type'] ?? 'slide' ); ?>">

        <?php foreach ( $settings['faq_list'] as $index => $faq ) : ?>

        <?php
            $is_open    = ( ( $settings['open_first'] ?? '' ) === 'yes' && $index === 0 );
            $item_class = $is_open ? 'dtfaq-item active' : 'dtfaq-item';
        ?>
        <div class="<?php echo esc_attr( $item_class ); ?>"
             data-category="<?php echo esc_attr( $faq['faq_category'] ); ?>">

            <div class="dtfaq-question icon-<?php echo esc_attr( $icon_pos ); ?>"
                 role="button"
                 tabindex="0"
                 aria-expanded="<?php echo esc_attr( $is_open ? 'true' : 'false' ); ?>">
                <span class="dtfaq-left">
                    <?php if ( ! empty( $faq['faq_icon']['value'] ) ) {
                        Icons_Manager::render_icon( $faq['faq_icon'], [ 'aria-hidden' => 'true' ] );
                    } ?>
                    <span class="dtfaq-question-text">
                        <?php echo esc_html( $faq['faq_question'] ); ?>
                    </span>
                </span>
                <span class="dtfaq-toggle-icon dtfaq-icon-open" aria-hidden="true">
                    <?php if ( $has_open ) : Icons_Manager::render_icon( $settings['icon_open'], [ 'aria-hidden' => 'true' ] ); else : ?><i class="fas fa-plus"></i><?php endif; ?>
                </span>
                <span class="dtfaq-toggle-icon dtfaq-icon-close" aria-hidden="true" style="display:none">
                    <?php if ( $has_close ) : Icons_Manager::render_icon( $settings['icon_close'], [ 'aria-hidden' => 'true' ] ); else : ?><i class="fas fa-minus"></i><?php endif; ?>
                </span>
            </div>

            <div class="dtfaq-answer"<?php echo ! $is_open ? ' style="display:none"' : ''; ?>>
                <?php if ( ! empty( $faq['faq_image']['url'] ) ) : ?>
                    <div class="dtfaq-answer-image"><img src="<?php echo esc_url( $faq['faq_image']['url'] ); ?>" alt="" loading="lazy"></div>
                <?php endif; ?>
                <?php echo wp_kses_post( $faq['faq_answer'] ); ?>
            </div>

        </div>

        <?php endforeach; ?>

        </div>

        </div>

        <?php

        /* SCHEMA SEO */

        $schema = [];

        foreach ( $settings['faq_list'] as $faq ) {
            $schema[] = [
                '@type'          => 'Question',
                'name'           => $faq['faq_question'],
                'acceptedAnswer' => [
                    '@type' => 'Answer',
                    'text'  => wp_strip_all_tags( $faq['faq_answer'] ),
                ],
            ];
        }

        ?>

        <?php if ( ( $settings['enable_schema'] ?? 'yes' ) === 'yes' && ! empty( $schema ) ) :
            $faq_jsonld = wp_json_encode( [
                '@context'   => 'https://schema.org',
                '@type'      => 'FAQPage',
                'mainEntity' => $schema,
            ], JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT );
            $faq_handle = 'eppro-faq-jsonld-' . $this->get_id();
            wp_register_script( $faq_handle, false, [], EPPRO_VERSION, true );
            wp_enqueue_script( $faq_handle );
            wp_add_inline_script( $faq_handle, 'var _eppFaqSchema=document.createElement("script");_eppFaqSchema.type="application/ld+json";_eppFaqSchema.text=' . $faq_jsonld . ';document.head.appendChild(_eppFaqSchema);' );
        endif; ?>

        <?php
    }
}