<?php
namespace Softech_Addons_for_Elementor\Widgets;
if (!defined('ABSPATH'))
    exit;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Icons_Manager;

class sitsel_flip_card extends Widget_Base
{

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

    public function get_title()
    {
        return __('SITS Flip Card', 'softech-addons-for-elementor');
    }

    public function get_icon()
    {
        return 'eicon-flip-box';
    }

    public function get_categories()
    {
        return ['sits-category'];
    }

    protected function _register_controls()
    {
        // Front Side Content
        $this->start_controls_section(
            'section_front_content',
            [
                'label' => __('Front Side', 'softech-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'front_icon',
            [
                'label' => __('Icon', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::ICONS,
                'default' => [
                    'value' => 'fas fa-star',
                    'library' => 'solid',
                ],
            ]
        );

        $this->add_control(
            'front_title',
            [
                'label' => __('Title', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::TEXT,
                'default' => __('Front Title', 'softech-addons-for-elementor'),
            ]
        );

        $this->add_control(
            'front_description',
            [
                'label' => __('Description', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::TEXTAREA,
                'default' => __('Front side description goes here.', 'softech-addons-for-elementor'),
                'description' => __('Adjust the widget’s height to fit your content properly', 'softech-addons-for-elementor'),
            ]
        );

        $this->end_controls_section();

        // Back Side Content
        $this->start_controls_section(
            'section_back_content',
            [
                'label' => __('Back Side', 'softech-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'back_icon',
            [
                'label' => __('Icon', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::ICONS,
                'default' => [
                    'value' => 'fas fa-check',
                    'library' => 'solid',
                ],
            ]
        );

        $this->add_control(
            'back_title',
            [
                'label' => __('Title', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::TEXT,
                'default' => __('Back Title', 'softech-addons-for-elementor'),
            ]
        );

        $this->add_control(
            'back_description',
            [
                'label' => __('Description', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::TEXTAREA,
                'default' => __('Back side description with more details.', 'softech-addons-for-elementor'),
                'description' => __('Adjust the widget’s height to fit your content properly', 'softech-addons-for-elementor'),
            ]
        );

        $this->add_control(
            'back_button_text',
            [
                'label' => __('Button Text', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::TEXT,
                'default' => __('Learn More', 'softech-addons-for-elementor'),
            ]
        );

        $this->add_control(
            'back_button_link',
            [
                'label' => __('Button Link', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::URL,
                'placeholder' => __('https://your-link.com', 'softech-addons-for-elementor'),
            ]
        );

        $this->end_controls_section();

        // Settings
       $this->start_controls_section(
    'section_settings',
    [
        'label' => __('Settings', 'softech-addons-for-elementor'),
        'tab' => Controls_Manager::TAB_CONTENT,
    ]
);

/* Flip Effect */
$this->add_control(
    'flip_effect',
    [
        'label' => __('Flip Effect', 'softech-addons-for-elementor'),
        'type' => Controls_Manager::SELECT,
        'default' => 'flip',
        'options' => [
            'flip'     => __('Flip', 'softech-addons-for-elementor'),
            'slide'    => __('Slide', 'softech-addons-for-elementor'),
            'push'     => __('Push', 'softech-addons-for-elementor'),
            'zoom-in'  => __('Zoom In', 'softech-addons-for-elementor'),
            'zoom-out' => __('Zoom Out', 'softech-addons-for-elementor'),
            'fade'     => __('Fade', 'softech-addons-for-elementor'),
        ],
    ]
);

/* Flip Direction – ONLY for Flip, Slide, Push */
$this->add_control(
    'flip_direction',
    [
        'label' => __('Flip Direction', 'softech-addons-for-elementor'),
        'type' => Controls_Manager::CHOOSE,
        'options' => [
            'left' => [
                'title' => __('Left', 'softech-addons-for-elementor'),
                'icon'  => 'eicon-h-align-left',
            ],
            'right' => [
                'title' => __('Right', 'softech-addons-for-elementor'),
                'icon'  => 'eicon-h-align-right',
            ],
            'up' => [
                'title' => __('Up', 'softech-addons-for-elementor'),
                'icon'  => 'eicon-v-align-top',
            ],
            'down' => [
                'title' => __('Down', 'softech-addons-for-elementor'),
                'icon'  => 'eicon-v-align-bottom',
            ],
        ],
        'default' => 'right',
        'condition' => [
            'flip_effect' => ['flip', 'slide', 'push'],
        ],
    ]
);

        $this->add_responsive_control(
            'card_height',
            [
                'label' => __('Height', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', '%', 'vh'],
                'range' => [
                    'px' => ['min' => 200, 'max' => 800],
                    '%' => ['min' => 10, 'max' => 100],
                    'vh' => ['min' => 10, 'max' => 100],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 300,
                ],
                'selectors' => [
                    '{{WRAPPER}} .sitsel-flip-card' => 'height: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();

        // Style - Card Container
        $this->start_controls_section(
            'section_card_style',
            [
                'label' => __('Card Container', 'softech-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'card_border_radius',
            [
                'label' => __('Border Radius', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .sitsel-flip-card, {{WRAPPER}} .sitsel-flip-card-inner, {{WRAPPER}} .sitsel-flip-card-front, {{WRAPPER}} .sitsel-flip-card-back' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'card_box_shadow',
                'selector' => '{{WRAPPER}} .sitsel-flip-card',
            ]
        );

        $this->end_controls_section();

        // Style - Front Side
        $this->start_controls_section(
            'section_front_style',
            [
                'label' => __('Front Side', 'softech-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Background::get_type(),
            [
                'name' => 'front_background',
                'types' => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} .sitsel-flip-card-front',
            ]
        );

        $this->add_responsive_control(
            'front_padding',
            [
                'label' => __('Padding', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .sitsel-flip-card-front .sitsel-flip-card-face-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'front_text_align',
            [
                'label' => __('Text Align', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::CHOOSE,
                'options' => [
                    'left' => [
                        'title' => __('Left', 'softech-addons-for-elementor'),
                        'icon' => 'eicon-text-align-left',
                    ],
                    'center' => [
                        'title' => __('Center', 'softech-addons-for-elementor'),
                        'icon' => 'eicon-text-align-center',
                    ],
                    'right' => [
                        'title' => __('Right', 'softech-addons-for-elementor'),
                        'icon' => 'eicon-text-align-right',
                    ],
                ],
                'default' => 'center',
                'selectors' => [
                    '{{WRAPPER}} .sitsel-flip-card-front' => 'text-align: {{VALUE}};',
                ],
            ]
        );

        // Front Icon Style
        $this->add_control(
            'front_icon_heading',
            [
                'label' => __('Icon', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'front_icon_color',
            [
                'label' => __('Color', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .sitsel-flip-card-front .sitsel-icon i, {{WRAPPER}} .sitsel-flip-card-front .sitsel-icon svg' => 'color: {{VALUE}}; fill: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'front_icon_size',
            [
                'label' => __('Size', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => ['min' => 10, 'max' => 70],
                ],
                'default' => ['size' => 48],
                'selectors' => [
                    '{{WRAPPER}} .sitsel-flip-card-front .sitsel-icon i, {{WRAPPER}} .sitsel-flip-card-front .sitsel-icon svg' => 'font-size: {{SIZE}}{{UNIT}};',
                ],
            ]
        );
$this->add_responsive_control(
    'front_icon_width',
    [
        'label' => __('Width', 'softech-addons-for-elementor'),
        'type' => Controls_Manager::SLIDER,
        'size_units' => ['px'],
        'range' => [
            'px' => ['min' => 10, 'max' => 60],
        ],
        'selectors' => [
            '{{WRAPPER}} .sitsel-flip-card-front .sitsel-icon' => 'width: {{SIZE}}{{UNIT}};',
        ],
    ]
);
        // Front Title Style
        $this->add_control(
            'front_title_heading',
            [
                'label' => __('Title', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'front_title_color',
            [
                'label' => __('Color', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .sitsel-flip-card-front h3' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'front_title_typography',
                'selector' => '{{WRAPPER}} .sitsel-flip-card-front h3',
            ]
        );

        // Front Description Style
        $this->add_control(
            'front_desc_heading',
            [
                'label' => __('Description', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'front_desc_color',
            [
                'label' => __('Color', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .sitsel-flip-card-front p' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'front_desc_typography',
                'selector' => '{{WRAPPER}} .sitsel-flip-card-front p',
            ]
        );

        $this->end_controls_section();

        // Style - Back Side
        $this->start_controls_section(
            'section_back_style',
            [
                'label' => __('Back Side', 'softech-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Background::get_type(),
            [
                'name' => 'back_background',
                'types' => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} .sitsel-flip-card-back',
            ]
        );

        $this->add_responsive_control(
            'back_padding',
            [
                'label' => __('Padding', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .sitsel-flip-card-back .sitsel-flip-card-face-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'back_text_align',
            [
                'label' => __('Text Align', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::CHOOSE,
                'options' => [
                    'left' => [
                        'title' => __('Left', 'softech-addons-for-elementor'),
                        'icon' => 'eicon-text-align-left',
                    ],
                    'center' => [
                        'title' => __('Center', 'softech-addons-for-elementor'),
                        'icon' => 'eicon-text-align-center',
                    ],
                    'right' => [
                        'title' => __('Right', 'softech-addons-for-elementor'),
                        'icon' => 'eicon-text-align-right',
                    ],
                ],
                'default' => 'center',
                'selectors' => [
                    '{{WRAPPER}} .sitsel-flip-card-back' => 'text-align: {{VALUE}};',
                ],
            ]
        );

        // Back Icon Style
        $this->add_control(
            'back_icon_heading',
            [
                'label' => __('Icon', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'back_icon_color',
            [
                'label' => __('Color', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .sitsel-flip-card-back .sitsel-icon i, {{WRAPPER}} .sitsel-flip-card-back .sitsel-icon svg' => 'color: {{VALUE}}; fill: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'back_icon_size',
            [
                'label' => __('Size', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => ['min' => 10, 'max' => 70],
                ],
                'default' => ['size' => 48],
                'selectors' => [
                    '{{WRAPPER}} .sitsel-flip-card-back .sitsel-icon i, {{WRAPPER}} .sitsel-flip-card-back .sitsel-icon svg' => 'font-size: {{SIZE}}{{UNIT}};',
                ],
            ]
        );
$this->add_responsive_control(
    'back_icon_width',
    [
        'label' => __('Width', 'softech-addons-for-elementor'),
        'type' => Controls_Manager::SLIDER,
        'size_units' => ['px'],
        'range' => [
            'px' => ['min' => 10, 'max' => 60],
        ],
        'selectors' => [
            '{{WRAPPER}} .sitsel-flip-card-back .sitsel-icon' => 'width: {{SIZE}}{{UNIT}};',
        ],
    ]
);
        // Back Title Style
        $this->add_control(
            'back_title_heading',
            [
                'label' => __('Title', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'back_title_color',
            [
                'label' => __('Color', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .sitsel-flip-card-back h3' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'back_title_typography',
                'selector' => '{{WRAPPER}} .sitsel-flip-card-back h3',
            ]
        );

        // Back Description Style
        $this->add_control(
            'back_desc_heading',
            [
                'label' => __('Description', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'back_desc_color',
            [
                'label' => __('Color', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .sitsel-flip-card-back p' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'back_desc_typography',
                'selector' => '{{WRAPPER}} .sitsel-flip-card-back p',
            ]
        );

        $this->end_controls_section();

        // Style - Button
        $this->start_controls_section(
            'section_button_style',
            [
                'label' => __('Button', 'softech-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'button_typography',
                'selector' => '{{WRAPPER}} .sitsel-btn',
            ]
        );

        $this->add_control(
            'button_text_color',
            [
                'label' => __('Text Color', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .sitsel-btn' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'button_bg_color',
            [
                'label' => __('Background Color', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .sitsel-btn' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Border::get_type(),
            [
                'name' => 'button_border',
                'selector' => '{{WRAPPER}} .sitsel-btn',
            ]
        );

        $this->add_control(
            'button_border_radius',
            [
                'label' => __('Border Radius', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .sitsel-btn' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'button_padding',
            [
                'label' => __('Padding', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .sitsel-btn' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'button_margin',
            [
                'label' => __('Margin', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .sitsel-btn' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        // Button Hover
        $this->add_control(
            'button_hover_heading',
            [
                'label' => __('Hover Effects', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'button_hover_text_color',
            [
                'label' => __('Hover Text Color', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .sitsel-btn:hover' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'button_hover_bg_color',
            [
                'label' => __('Hover Background Color', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .sitsel-btn:hover' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->end_controls_section();
    }

 public function get_style_depends() {
    wp_register_style(
        'sitsel-flip-card',
        SITS_ELEMENTOR_ADDONS_PLUGIN_URL . 'assets/css/flip-card.css',
        [],
        '1.1.0'
    );

    return [ 'sitsel-flip-card' ];
}


   protected function render()
{
    $settings  = $this->get_settings_for_display();
    $effect    = $settings['flip_effect'] ?? 'flip';
    $direction = $settings['flip_direction'] ?? 'right';

    echo '<div class="sitsel-flip-card" data-effect="' . esc_attr( $effect ) . '" data-direction="' . esc_attr( $direction ) . '">';
    echo '<div class="sitsel-flip-card-inner">';

    echo '<div class="sitsel-flip-card-front">';
    echo '<div class="sitsel-flip-card-face-content">';

    if ( ! empty( $settings['front_icon']['value'] ) ) {
        echo '<div class="sitsel-icon">';
        Icons_Manager::render_icon( $settings['front_icon'], [ 'aria-hidden' => 'true' ] );
        echo '</div>';
    }

    if ( ! empty( $settings['front_title'] ) ) {
        echo '<h3>' . esc_html( $settings['front_title'] ) . '</h3>';
    }

    if ( ! empty( $settings['front_description'] ) ) {
        echo '<p>' . esc_html( $settings['front_description'] ) . '</p>';
    }

    echo '</div>';
    echo '</div>';

    echo '<div class="sitsel-flip-card-back">';
    echo '<div class="sitsel-flip-card-face-content">';

    if ( ! empty( $settings['back_icon']['value'] ) ) {
        echo '<div class="sitsel-icon">';
        Icons_Manager::render_icon( $settings['back_icon'], [ 'aria-hidden' => 'true' ] );
        echo '</div>';
    }

    if ( ! empty( $settings['back_title'] ) ) {
        echo '<h3>' . esc_html( $settings['back_title'] ) . '</h3>';
    }

    if ( ! empty( $settings['back_description'] ) ) {
        echo '<p>' . esc_html( $settings['back_description'] ) . '</p>';
    }

    if ( ! empty( $settings['back_button_text'] ) ) {
        $btn_link = ! empty( $settings['back_button_link']['url'] ) ? $settings['back_button_link']['url'] : '#';
        $target   = ! empty( $settings['back_button_link']['is_external'] );
        $nofollow = ! empty( $settings['back_button_link']['nofollow'] );

        echo '<a href="' . esc_url( $btn_link ) . '" class="sitsel-btn"' . ( $target ? ' target="_blank"' : '' ) . ( $nofollow ? ' rel="nofollow"' : '' ) . '>' . esc_html( $settings['back_button_text'] ) . '</a>';
    }

    echo '</div>';
    echo '</div>';
    echo '</div>';
    echo '</div>';
}
}
