<?php

namespace BinoxEssentialApp\Widgets;

use Elementor\Control_Media;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Image_Size;
use Elementor\Group_Control_Text_Shadow;
use Elementor\Group_Control_Typography;
use Elementor\Icons_Manager;
use Elementor\Plugin;
use Elementor\Repeater;
use Elementor\Utils;
use Elementor\Widget_Base;
use Elementor\Controls_Manager;

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

/**
 * Testimonial
 *
 * Elementor widget for testimonial.
 *
 * @since 1.0.0
 */
class Faq_Search extends Widget_Base {

	/**
	 * Retrieve the widget name.
	 *
	 * @return string Widget name.
	 * @since 1.0.0
	 *
	 * @access public
	 */
	public function get_name() {
		return 'binox-faq-search';
	}

	/**
	 * Retrieve the widget title.
	 *
	 * @return string Widget title.
	 * @since 1.0.0
	 *
	 * @access public
	 */
	public function get_title() {
		return esc_html__( 'Binox FAQ Search', 'binox-essential' );
	}

	/**
	 * Retrieve the widget icon.
	 *
	 * @return string Widget icon.
	 * @since 1.0.0
	 *
	 * @access public
	 */
	public function get_icon() {
		return 'wcf eicon-search';
	}

	/**
	 * Retrieve the list of categories the widget belongs to.
	 *
	 * Used to determine where to display the widget in the editor.
	 *
	 * Note that currently Elementor supports only one category.
	 * When multiple categories passed, Elementor uses the first one.
	 *
	 * @return array Widget categories.
	 * @since 1.0.0
	 *
	 * @access public
	 */
	public function get_categories() {
		return [ 'weal-coder-addon' ];
	}

	public function get_style_depends() {
		wp_register_style( 'faq-search', BINOX_ESSENTIAL_ASSETS_URL . 'css/faq-search.css' );
		return [ 'faq-search' ];
	}

	public function get_script_depends() {
		wp_register_script( 'faq-search', BINOX_ESSENTIAL_ASSETS_URL. '/js/widgets/faq-search.js' , [ 'jquery' ], false, true );
		return [ 'faq-search' ];
	}

	/**
	 * Register the widget controls.
	 *
	 * Adds different input fields to allow the user to change and customize the widget settings.
	 *
	 * @since 1.0.0
	 *
	 * @access protected
	 */
	protected function register_controls() {
		$this->start_controls_section(
			'section_content',
			[
				'label' => esc_html__( 'FAQ Search', 'binox-essential' ),
			]
		);

		$this->add_control(
			'search_text',
			[
				'label' => esc_html__( 'Placeholder Text', 'binox-essential' ),
				'type' => Controls_Manager::TEXT,
				'default' => esc_html__( 'Ask a question...', 'binox-essential' ),
			]
		);

		$this->add_control(
			'search_icon',
			[
				'label' => esc_html__( 'Search Icon', 'binox-essential' ),
				'type' => Controls_Manager::ICONS,
				'skin' => 'inline',
				'label_block' => false,
			]
		);


		$this->add_control(
			'search_btn_text',
			[
				'label' => esc_html__( 'Button Text', 'binox-essential' ),
				'type' => Controls_Manager::TEXT,
				'default' => esc_html__( 'Search', 'binox-essential' ),
			]
		);

		$this->add_control(
			'search_btn_icon',
			[
				'label' => esc_html__( 'Button Icon', 'binox-essential' ),
				'type' => Controls_Manager::ICONS,
				'skin' => 'inline',
				'label_block' => false,
			]
		);

		$this->add_control(
			'faq_class',
			[
				'label' => esc_html__( 'Class Name', 'binox-essential' ),
				'type' => Controls_Manager::TEXT,
				'default' => esc_html__( '.faq-accordion', 'binox-essential' ),
				'placeholder' => esc_html__( '.faq-accordion', 'binox-essential' ),
				'description' => esc_html__( 'Add FAQ wrapper class name. Example: .faq-accordion', 'binox-essential' ),
			]
		);

		$this->end_controls_section();


		// Search Input/Icon
		$this->start_controls_section(
			'style_search_input',
			[
				'label' => esc_html__( 'Input', 'binox-essential' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'input_color',
			[
				'label' => esc_html__( 'Color', 'binox-essential' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .text-input' => 'color: {{VALUE}}',
				],
			]
		);

		$this->add_control(
			'placeholder_color',
			[
				'label' => esc_html__( 'Placeholder Color', 'binox-essential' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .text-input::placeholder' => 'color: {{VALUE}}',
					'{{WRAPPER}} .icon' => 'color: {{VALUE}}; fill: {{VALUE}}',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'input_typography',
				'selector' => '{{WRAPPER}} .text-input, {{WRAPPER}} .icon',
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name' => 'input_border',
				'selector' => '{{WRAPPER}} .text-input',
			]
		);

		$this->add_control(
			'input_b_radius',
			[
				'label'      => esc_html__( 'Border Radius', 'binox-essential' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
				'selectors'  => [
					'{{WRAPPER}} .text-input' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'input_padding',
			[
				'label'      => esc_html__( 'Padding', 'binox-essential' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
				'selectors'  => [
					'{{WRAPPER}} .text-input' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'icon_position',
			[
				'label' => esc_html__( 'Icon Position', 'binox-essential' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 100,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .icon' => 'left: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->end_controls_section();

		// Button Style
		$this->start_controls_section(
			'style_button',
			[
				'label' => esc_html__( 'Button', 'binox-essential' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'submit_color',
			[
				'label'     => esc_html__( 'Color', 'binox-essential' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .submit' => 'color: {{VALUE}};',
				],
			]
		);

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

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name' => 'submit_bg',
				'types' => [ 'classic', 'gradient' ],
				'selector' => '{{WRAPPER}} .submit',
			]
		);

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

		$this->add_control(
			'submit_b_radius',
			[
				'label'      => esc_html__( 'Border Radius', 'binox-essential' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
				'selectors'  => [
					'{{WRAPPER}} .submit' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'submit_padding',
			[
				'label'      => esc_html__( 'Padding', 'binox-essential' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
				'selectors'  => [
					'{{WRAPPER}} .submit' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'submit_pos_right',
			[
				'label' => esc_html__( 'Position Right', 'binox-essential' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 100,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .submit' => 'right: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'submit_pos_top',
			[
				'label' => esc_html__( 'Position Top', 'binox-essential' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 100,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .submit' => 'top: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->end_controls_section();

	}


	/**
	 * Render the widget output on the frontend.
	 *
	 * Written in PHP and used to generate the final HTML.
	 *
	 * @since 1.0.0
	 *
	 * @access protected
	 */
	protected function render() {
		$settings = $this->get_settings_for_display();

		

		?>
      <form class="faq__search" action="" method="post" data-class="<?php echo $settings['faq_class']; ?>">
				<div class="search-input">
					<div class="icon">
						<?php \Elementor\Icons_Manager::render_icon( $settings['search_icon'], [ 'aria-hidden' => 'true' ] ); ?>
					</div>
					<input type="text" class="text-input" id="faq_filter" value="" placeholder="<?php echo $settings['search_text']; ?>">
				</div>
				<span id="filter-count"></span>
				<button type="submit" class="submit">
					<?php 
					echo $settings['search_btn_text'];
					\Elementor\Icons_Manager::render_icon( $settings['search_btn_icon'], [ 'aria-hidden' => 'true' ] );
					?>
				</button>
			</form>
		<?php
	}

}
