<?php
/**
 * Widget Name: Flipbox
 * Description: A two-sided info box that flips ( or transitions ) from a front
 *              face to a back face on hover or click. Ships with selectable
 *              visual styles — classic horizontal flip, vertical flip, zoom
 *              fade, slide reveal and a 3D cube rotation. Each face supports
 *              an icon, title, description and the back face an optional CTA
 *              button. Only the selected style CSS file is loaded on the
 *              frontend.
 *
 * @package    captain-widgets-kit
 * @subpackage captain-widgets-kit/includes
 * @since      1.7.0
 */

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

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Icons_Manager;

/**
 * Class Captwiki_Flipbox
 *
 * @since 1.7.0
 */
class Captwiki_Flipbox extends Widget_Base {

	/**
	 * Get widget name.
	 *
	 * @since 1.7.0
	 * @return string
	 */
	public function get_name(): string {
		return 'captwiki-flipbox';
	}

	/**
	 * Get widget title.
	 *
	 * @since 1.7.0
	 * @return string
	 */
	public function get_title(): string {
		return esc_html__( 'Flipbox', 'captain-widgets-kit' );
	}

	/**
	 * Get widget icon.
	 *
	 * @since 1.7.0
	 * @return string
	 */
	public function get_icon(): string {
		return 'eicon-flip-box captwiki-el-logo';
	}

	/**
	 * Get widget categories.
	 *
	 * @since 1.7.0
	 * @return array
	 */
	public function get_categories(): array {
		return array( 'captwiki-essential' );
	}

	/**
	 * Get widget keywords.
	 *
	 * @since 1.7.0
	 * @return array
	 */
	public function get_keywords(): array {
		return array( 'flip', 'flipbox', 'flip box', 'info box', 'card', 'hover', 'captain-widgets-kit' );
	}

	/**
	 * Frontend script dependency.
	 *
	 * @since 1.7.0
	 * @return array
	 */
	public function get_script_depends(): array {
		return array( 'captwiki-flipbox' );
	}

	/**
	 * Common stylesheet dependency.
	 *
	 * @since 1.7.0
	 * @return array
	 */
	public function get_style_depends(): array {
		return array( 'captwiki_flipbox' );
	}

	/**
	 * Disable Elementor's default inner wrapper.
	 *
	 * @since 1.7.0
	 * @return bool
	 */
	public function has_widget_inner_wrapper(): bool {
		return ! \Elementor\Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
	}

	/**
	 * Selectable visual styles.
	 *
	 * @since 1.7.0
	 * @return array
	 */
	private function captwiki_style_options(): array {
		return array(
			'style-1' => esc_html__( 'Style 1 – Flip Horizontal', 'captain-widgets-kit' ),
			'style-2' => esc_html__( 'Style 2 – Flip Vertical', 'captain-widgets-kit' ),
			'style-3' => esc_html__( 'Style 3 – Zoom Fade', 'captain-widgets-kit' ),
			'style-4' => esc_html__( 'Style 4 – Slide Reveal', 'captain-widgets-kit' ),
			'style-5' => esc_html__( 'Style 5 – 3D Cube', 'captain-widgets-kit' ),
		);
	}

	/**
	 * Register widget controls.
	 *
	 * @since 1.7.0
	 * @return void
	 */
	protected function register_controls(): void {
		$this->register_settings_controls();
		$this->register_front_controls();
		$this->register_back_controls();

		$this->register_box_style_controls();
		$this->register_front_style_controls();
		$this->register_back_style_controls();
		$this->register_button_style_controls();
	}

	/**
	 * Content tab — layout & behaviour.
	 *
	 * @since 1.7.0
	 * @return void
	 */
	private function register_settings_controls(): void {

		$this->start_controls_section(
			'section_settings',
			array(
				'label' => esc_html__( 'Flipbox', 'captain-widgets-kit' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);

		$this->add_control(
			'widget_style',
			array(
				'label'   => esc_html__( 'Style', 'captain-widgets-kit' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'style-1',
				'options' => $this->captwiki_style_options(),
			)
		);

		$this->add_control(
			'flip_trigger',
			array(
				'label'   => esc_html__( 'Flip Trigger', 'captain-widgets-kit' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'hover',
				'options' => array(
					'hover' => esc_html__( 'Hover', 'captain-widgets-kit' ),
					'click' => esc_html__( 'Click', 'captain-widgets-kit' ),
				),
			)
		);

		$this->add_responsive_control(
			'box_height',
			array(
				'label'      => esc_html__( 'Height', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', 'vh' ),
				'range'      => array(
					'px' => array(
						'min' => 150,
						'max' => 700,
					),
					'vh' => array(
						'min' => 10,
						'max' => 100,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 280,
				),
				'selectors'  => array(
					'{{WRAPPER}} .captwiki-flipbox' => '--captwiki-fb-height: {{SIZE}}{{UNIT}};',
				),
			)
		);

		$this->add_control(
			'flip_duration',
			array(
				'label'     => esc_html__( 'Animation Duration (s)', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min'  => 0.2,
						'max'  => 2,
						'step' => 0.1,
					),
				),
				'default'   => array( 'size' => 0.7 ),
				'selectors' => array(
					'{{WRAPPER}} .captwiki-flipbox' => '--captwiki-fb-duration: {{SIZE}}s;',
				),
			)
		);

		$this->end_controls_section();
	}

	/**
	 * Content tab — front face.
	 *
	 * @since 1.7.0
	 * @return void
	 */
	private function register_front_controls(): void {

		$this->start_controls_section(
			'section_front',
			array(
				'label' => esc_html__( 'Front Side', 'captain-widgets-kit' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);

		$this->add_control(
			'front_icon',
			array(
				'label'   => esc_html__( 'Icon', 'captain-widgets-kit' ),
				'type'    => Controls_Manager::ICONS,
				'default' => array(
					'value'   => 'fas fa-rocket',
					'library' => 'fa-solid',
				),
			)
		);

		$this->add_control(
			'front_title',
			array(
				'label'       => esc_html__( 'Title', 'captain-widgets-kit' ),
				'type'        => Controls_Manager::TEXT,
				'default'     => esc_html__( 'Fast Performance', 'captain-widgets-kit' ),
				'label_block' => true,
				'dynamic'     => array( 'active' => true ),
			)
		);

		$this->add_control(
			'front_description',
			array(
				'label'   => esc_html__( 'Description', 'captain-widgets-kit' ),
				'type'    => Controls_Manager::TEXTAREA,
				'rows'    => 4,
				'default' => esc_html__( 'Hover over this box to discover what makes our service stand out.', 'captain-widgets-kit' ),
				'dynamic' => array( 'active' => true ),
			)
		);

		$this->add_control(
			'title_tag',
			array(
				'label'   => esc_html__( 'Title HTML Tag', 'captain-widgets-kit' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'h3',
				'options' => array(
					'h2'  => 'H2',
					'h3'  => 'H3',
					'h4'  => 'H4',
					'h5'  => 'H5',
					'h6'  => 'H6',
					'div' => 'div',
				),
			)
		);

		$this->end_controls_section();
	}

	/**
	 * Content tab — back face.
	 *
	 * @since 1.7.0
	 * @return void
	 */
	private function register_back_controls(): void {

		$this->start_controls_section(
			'section_back',
			array(
				'label' => esc_html__( 'Back Side', 'captain-widgets-kit' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);

		$this->add_control(
			'back_icon',
			array(
				'label' => esc_html__( 'Icon', 'captain-widgets-kit' ),
				'type'  => Controls_Manager::ICONS,
			)
		);

		$this->add_control(
			'back_title',
			array(
				'label'       => esc_html__( 'Title', 'captain-widgets-kit' ),
				'type'        => Controls_Manager::TEXT,
				'default'     => esc_html__( 'Built for Speed', 'captain-widgets-kit' ),
				'label_block' => true,
				'dynamic'     => array( 'active' => true ),
			)
		);

		$this->add_control(
			'back_description',
			array(
				'label'   => esc_html__( 'Description', 'captain-widgets-kit' ),
				'type'    => Controls_Manager::TEXTAREA,
				'rows'    => 4,
				'default' => esc_html__( 'Optimized assets, lazy loading and clean code keep every page lightning fast.', 'captain-widgets-kit' ),
				'dynamic' => array( 'active' => true ),
			)
		);

		$this->add_control(
			'back_button_text',
			array(
				'label'   => esc_html__( 'Button Text', 'captain-widgets-kit' ),
				'type'    => Controls_Manager::TEXT,
				'default' => esc_html__( 'Learn More', 'captain-widgets-kit' ),
				'dynamic' => array( 'active' => true ),
			)
		);

		$this->add_control(
			'back_button_link',
			array(
				'label'     => esc_html__( 'Button Link', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::URL,
				'dynamic'   => array( 'active' => true ),
				'default'   => array( 'url' => '' ),
				'condition' => array( 'back_button_text!' => '' ),
			)
		);

		$this->end_controls_section();
	}

	/**
	 * Style tab — box.
	 *
	 * @since 1.7.0
	 * @return void
	 */
	private function register_box_style_controls(): void {

		$this->start_controls_section(
			'section_box_style',
			array(
				'label' => esc_html__( 'Box', 'captain-widgets-kit' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_responsive_control(
			'box_border_radius',
			array(
				'label'      => esc_html__( 'Border Radius', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .captwiki-flipbox__face' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'box_border',
				'label'    => esc_html__( 'Border', 'captain-widgets-kit' ),
				'selector' => '{{WRAPPER}} .captwiki-flipbox__face',
			)
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'box_shadow',
				'label'    => esc_html__( 'Box Shadow', 'captain-widgets-kit' ),
				'selector' => '{{WRAPPER}} .captwiki-flipbox__face',
			)
		);

		$this->add_responsive_control(
			'content_padding',
			array(
				'label'      => esc_html__( 'Content Padding', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .captwiki-flipbox__content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);

		$this->add_responsive_control(
			'content_align',
			array(
				'label'                => esc_html__( 'Alignment', 'captain-widgets-kit' ),
				'type'                 => Controls_Manager::CHOOSE,
				'default'              => 'center',
				'options'              => array(
					'left'   => array(
						'title' => esc_html__( 'Left', 'captain-widgets-kit' ),
						'icon'  => 'eicon-text-align-left',
					),
					'center' => array(
						'title' => esc_html__( 'Center', 'captain-widgets-kit' ),
						'icon'  => 'eicon-text-align-center',
					),
					'right'  => array(
						'title' => esc_html__( 'Right', 'captain-widgets-kit' ),
						'icon'  => 'eicon-text-align-right',
					),
				),
				'selectors_dictionary' => array(
					'left'   => 'align-items: flex-start; text-align: left;',
					'center' => 'align-items: center; text-align: center;',
					'right'  => 'align-items: flex-end; text-align: right;',
				),
				'selectors'            => array(
					'{{WRAPPER}} .captwiki-flipbox__content' => '{{VALUE}}',
				),
			)
		);

		$this->end_controls_section();
	}

	/**
	 * Style tab — front face.
	 *
	 * @since 1.7.0
	 * @return void
	 */
	private function register_front_style_controls(): void {

		$this->start_controls_section(
			'section_front_style',
			array(
				'label' => esc_html__( 'Front Side', 'captain-widgets-kit' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'front_background',
				'label'    => esc_html__( 'Background', 'captain-widgets-kit' ),
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .captwiki-flipbox__front',
			)
		);

		$this->add_control(
			'front_icon_color',
			array(
				'label'     => esc_html__( 'Icon Color', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'{{WRAPPER}} .captwiki-flipbox__front .captwiki-flipbox__icon'     => 'color: {{VALUE}};',
					'{{WRAPPER}} .captwiki-flipbox__front .captwiki-flipbox__icon svg' => 'fill: {{VALUE}};',
				),
			)
		);

		$this->add_responsive_control(
			'front_icon_size',
			array(
				'label'      => esc_html__( 'Icon Size', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', 'em' ),
				'range'      => array(
					'px' => array(
						'min' => 12,
						'max' => 120,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .captwiki-flipbox__front .captwiki-flipbox__icon' => 'font-size: {{SIZE}}{{UNIT}};',
				),
			)
		);

		$this->add_control(
			'front_title_color',
			array(
				'label'     => esc_html__( 'Title Color', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'{{WRAPPER}} .captwiki-flipbox__front .captwiki-flipbox__title' => 'color: {{VALUE}};',
				),
			)
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'front_title_typography',
				'label'    => esc_html__( 'Title Typography', 'captain-widgets-kit' ),
				'selector' => '{{WRAPPER}} .captwiki-flipbox__front .captwiki-flipbox__title',
			)
		);

		$this->add_control(
			'front_desc_color',
			array(
				'label'     => esc_html__( 'Description Color', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'{{WRAPPER}} .captwiki-flipbox__front .captwiki-flipbox__desc' => 'color: {{VALUE}};',
				),
			)
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'front_desc_typography',
				'label'    => esc_html__( 'Description Typography', 'captain-widgets-kit' ),
				'selector' => '{{WRAPPER}} .captwiki-flipbox__front .captwiki-flipbox__desc',
			)
		);

		$this->end_controls_section();
	}

	/**
	 * Style tab — back face.
	 *
	 * @since 1.7.0
	 * @return void
	 */
	private function register_back_style_controls(): void {

		$this->start_controls_section(
			'section_back_style',
			array(
				'label' => esc_html__( 'Back Side', 'captain-widgets-kit' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'back_background',
				'label'    => esc_html__( 'Background', 'captain-widgets-kit' ),
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .captwiki-flipbox__back',
			)
		);

		$this->add_control(
			'back_icon_color',
			array(
				'label'     => esc_html__( 'Icon Color', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'{{WRAPPER}} .captwiki-flipbox__back .captwiki-flipbox__icon'     => 'color: {{VALUE}};',
					'{{WRAPPER}} .captwiki-flipbox__back .captwiki-flipbox__icon svg' => 'fill: {{VALUE}};',
				),
			)
		);

		$this->add_responsive_control(
			'back_icon_size',
			array(
				'label'      => esc_html__( 'Icon Size', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', 'em' ),
				'range'      => array(
					'px' => array(
						'min' => 12,
						'max' => 120,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .captwiki-flipbox__back .captwiki-flipbox__icon' => 'font-size: {{SIZE}}{{UNIT}};',
				),
			)
		);

		$this->add_control(
			'back_title_color',
			array(
				'label'     => esc_html__( 'Title Color', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'{{WRAPPER}} .captwiki-flipbox__back .captwiki-flipbox__title' => 'color: {{VALUE}};',
				),
			)
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'back_title_typography',
				'label'    => esc_html__( 'Title Typography', 'captain-widgets-kit' ),
				'selector' => '{{WRAPPER}} .captwiki-flipbox__back .captwiki-flipbox__title',
			)
		);

		$this->add_control(
			'back_desc_color',
			array(
				'label'     => esc_html__( 'Description Color', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'{{WRAPPER}} .captwiki-flipbox__back .captwiki-flipbox__desc' => 'color: {{VALUE}};',
				),
			)
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'back_desc_typography',
				'label'    => esc_html__( 'Description Typography', 'captain-widgets-kit' ),
				'selector' => '{{WRAPPER}} .captwiki-flipbox__back .captwiki-flipbox__desc',
			)
		);

		$this->end_controls_section();
	}

	/**
	 * Style tab — back button.
	 *
	 * @since 1.7.0
	 * @return void
	 */
	private function register_button_style_controls(): void {

		$this->start_controls_section(
			'section_button_style',
			array(
				'label'     => esc_html__( 'Button', 'captain-widgets-kit' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array( 'back_button_text!' => '' ),
			)
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'button_typography',
				'selector' => '{{WRAPPER}} .captwiki-flipbox__btn',
			)
		);

		$this->start_controls_tabs( 'tabs_button_style' );

		$this->start_controls_tab(
			'tab_button_normal',
			array( 'label' => esc_html__( 'Normal', 'captain-widgets-kit' ) )
		);

		$this->add_control(
			'button_text_color',
			array(
				'label'     => esc_html__( 'Text Color', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'{{WRAPPER}} .captwiki-flipbox__btn' => 'color: {{VALUE}};',
				),
			)
		);

		$this->add_control(
			'button_bg_color',
			array(
				'label'     => esc_html__( 'Background Color', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'{{WRAPPER}} .captwiki-flipbox__btn' => 'background-color: {{VALUE}};',
				),
			)
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'tab_button_hover',
			array( 'label' => esc_html__( 'Hover', 'captain-widgets-kit' ) )
		);

		$this->add_control(
			'button_text_color_hover',
			array(
				'label'     => esc_html__( 'Text Color', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'{{WRAPPER}} .captwiki-flipbox__btn:hover' => 'color: {{VALUE}};',
				),
			)
		);

		$this->add_control(
			'button_bg_color_hover',
			array(
				'label'     => esc_html__( 'Background Color', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'{{WRAPPER}} .captwiki-flipbox__btn:hover' => 'background-color: {{VALUE}};',
				),
			)
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->add_responsive_control(
			'button_padding',
			array(
				'label'      => esc_html__( 'Padding', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', 'em' ),
				'separator'  => 'before',
				'selectors'  => array(
					'{{WRAPPER}} .captwiki-flipbox__btn' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);

		$this->add_responsive_control(
			'button_border_radius',
			array(
				'label'      => esc_html__( 'Border Radius', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .captwiki-flipbox__btn' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);

		$this->end_controls_section();
	}

	/**
	 * Capture an Elementor icon as an HTML string.
	 *
	 * @since 1.7.0
	 * @param array $icon Icon control value.
	 * @return string
	 */
	private function captwiki_get_icon_html( array $icon ): string {
		ob_start();
		Icons_Manager::render_icon( $icon, array( 'aria-hidden' => 'true' ) );
		return (string) ob_get_clean();
	}

	/**
	 * Render one face ( front or back ) of the flipbox.
	 *
	 * @since 1.7.0
	 * @param string $side     Face key — 'front' or 'back'.
	 * @param array  $settings Widget settings.
	 * @return void
	 */
	private function captwiki_render_face( string $side, array $settings ): void {

		$icon      = isset( $settings[ $side . '_icon' ] ) ? (array) $settings[ $side . '_icon' ] : array();
		$title     = isset( $settings[ $side . '_title' ] ) ? trim( (string) $settings[ $side . '_title' ] ) : '';
		$desc      = isset( $settings[ $side . '_description' ] ) ? trim( (string) $settings[ $side . '_description' ] ) : '';
		$title_tag = in_array( $settings['title_tag'], array( 'h2', 'h3', 'h4', 'h5', 'h6', 'div' ), true ) ? $settings['title_tag'] : 'h3';

		echo '<div class="captwiki-flipbox__face captwiki-flipbox__' . esc_attr( $side ) . '">';
		echo '<div class="captwiki-flipbox__content">';

		if ( ! empty( $icon['value'] ) ) {
			echo '<span class="captwiki-flipbox__icon" aria-hidden="true">' . $this->captwiki_get_icon_html( $icon ) . '</span>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
		}

		if ( '' !== $title ) {
			echo '<' . esc_attr( $title_tag ) . ' class="captwiki-flipbox__title">' . esc_html( $title ) . '</' . esc_attr( $title_tag ) . '>';
		}

		if ( '' !== $desc ) {
			echo '<p class="captwiki-flipbox__desc">' . esc_html( $desc ) . '</p>';
		}

		if ( 'back' === $side ) {
			$this->captwiki_render_button( $settings );
		}

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

	/**
	 * Render the optional CTA button on the back face.
	 *
	 * @since 1.7.0
	 * @param array $settings Widget settings.
	 * @return void
	 */
	private function captwiki_render_button( array $settings ): void {

		$text = isset( $settings['back_button_text'] ) ? trim( (string) $settings['back_button_text'] ) : '';

		if ( '' === $text ) {
			return;
		}

		if ( ! empty( $settings['back_button_link']['url'] ) ) {
			$this->add_link_attributes( 'flipbox_button', $settings['back_button_link'] );
			$this->add_render_attribute( 'flipbox_button', 'class', 'captwiki-flipbox__btn' );

			echo '<a ' . $this->get_render_attribute_string( 'flipbox_button' ) . '>' . esc_html( $text ) . '</a>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
			return;
		}

		echo '<span class="captwiki-flipbox__btn">' . esc_html( $text ) . '</span>';
	}

	/**
	 * Render widget output on the frontend.
	 *
	 * @since 1.7.0
	 * @return void
	 */
	protected function render(): void {
		$settings = $this->get_settings_for_display();

		$allowed_styles = array_keys( $this->captwiki_style_options() );
		$style          = in_array( $settings['widget_style'], $allowed_styles, true ) ? $settings['widget_style'] : 'style-1';
		$trigger        = 'click' === $settings['flip_trigger'] ? 'click' : 'hover';

		// Load only the active style stylesheet, depending on the common one.
		wp_enqueue_style(
			'captwiki-flipbox-' . $style,
			CAPTWIKI_URL . 'assets/css/widgets/flipbox/captwiki-flipbox-' . $style . '.css',
			array( 'captwiki_flipbox' ),
			CAPTWIKI_VERSION
		);

		printf(
			'<div class="captwiki-flipbox captwiki-%1$s captwiki-flipbox--%2$s" data-trigger="%2$s"%3$s>',
			esc_attr( $style ),
			esc_attr( $trigger ),
			'click' === $trigger ? ' tabindex="0" role="button" aria-pressed="false"' : ''
		);

		echo '<div class="captwiki-flipbox__inner">';
		$this->captwiki_render_face( 'front', $settings );
		$this->captwiki_render_face( 'back', $settings );
		echo '</div>';

		echo '</div>';
	}
}
