<?php
namespace Elementor;

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

use Elementor\Lumex_Title_Controls_Trait;
use Elementor\Lumex_BG_Image_Controls_Trait;

/**
 * Lumex Intro Widget.
 *
 * @since 1.0
 */
class Lumex_Intro_Widget extends Widget_Base {
	use Lumex_Title_Controls_Trait;
	use Lumex_BG_Image_Controls_Trait;

	public function get_name() {
		return 'lumex-intro';
	}

	public function get_title() {
		return esc_html__( 'Intro', 'lumex-plugin' );
	}

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

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

	/**
	 * Register widget controls.
	 *
	 * @since 1.0
	 */
	protected function register_controls() {

		$this->start_controls_section(
			'content_tab',
			[
				'label' => esc_html__( 'Content', 'lumex-plugin' ),
				'tab' => Controls_Manager::TAB_CONTENT,
			]
		);

		// add background image controls
		$this->add_lumex_bg_image_controls();

		// add title helper controls
		$this->add_lumex_title_controls();

		$this->add_control(
			'show_breadcrumbs',
			[
				'label' => esc_html__( 'Show Breadcrumbs', 'lumex-plugin' ),
				'type' => Controls_Manager::SWITCHER,
				'label_on' => __( 'Yes', 'lumex-plugin' ),
				'label_off' => __( 'No', 'lumex-plugin' ),
				'return_value' => 'yes',
				'default' => 'yes',
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'content_styling',
			[
				'label'     => esc_html__( 'Content Styles', 'lumex-plugin' ),
				'tab'       => Controls_Manager::TAB_STYLE,
			]
		);

		// Title
		// add title helper style controls
		$this->add_lumex_title_style_controls();

		$this->add_control(
			'breadcrumbs_color',
			[
				'label'     => esc_html__( 'Breadcrumb Color', 'lumex-plugin' ),
				'type'      => Controls_Manager::COLOR,
				'default'	=> '',
				'selectors' => [
					'{{WRAPPER}} .mil-hero-main .mil-breadcrumbs li a' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'breadcrumbs_hover_color',
			[
				'label'     => esc_html__( 'Breadcrumb Hover Color', 'lumex-plugin' ),
				'type'      => Controls_Manager::COLOR,
				'default'	=> '',
				'selectors' => [
					'{{WRAPPER}} .mil-hero-main .mil-breadcrumbs li a:hover' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'breadcrumbs_typography',
				'label'     => esc_html__( 'Breadcrumb Typography', 'lumex-plugin' ),
				'selector' => '{{WRAPPER}} .mil-hero-main .mil-breadcrumbs li a',
			]
		);

		$this->add_control(
			'breadcrumbs_sep_color',
			[
				'label'     => esc_html__( 'Breadcrumb Separator Color', 'lumex-plugin' ),
				'type'      => Controls_Manager::COLOR,
				'default'	=> '',
				'selectors' => [
					'{{WRAPPER}} .mil-breadcrumbs li:after' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'breadcrumbs_sep_typography',
				'label'     => esc_html__( 'Breadcrumb Separator Typography', 'lumex-plugin' ),
				'selector' => '{{WRAPPER}} .mil-breadcrumbs li:after',
			]
		);

		// add bg overlay helper styles controls
		$this->add_lumex_bg_image_style_controls();

		$this->end_controls_section();
	}


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

		$page_id = get_the_ID();

		$this->add_inline_editing_attributes( 'title', 'basic' );

		?>

		<!-- hero -->
		<div class="mil-hero-inner" id="top">
			<?php if ( $settings['bg_type'] === 'video' ) : ?>
			<video autoplay="autoplay" loop="loop" muted playsinline oncontextmenu="return false;" preload="auto" class="mil-hero-bg mil-scale-img-top" data-value-1="1" data-value-2="1.3" style="object-position: center;">
				<source src="<?php echo esc_url( $settings['video']['url'] ); ?>">
			</video>
			<?php else : ?>
			<?php if ( $settings['image'] ) : $image = wp_get_attachment_image_url( $settings['image']['id'], 'lumex_1920xAuto' ); $image_alt = get_post_meta( $settings['image']['id'], '_wp_attachment_image_alt', true); ?>
			<img src="<?php echo esc_url( $image ); ?>" alt="<?php echo $image_alt ? esc_attr( $image_alt ) : esc_attr__( 'image', 'lumex-plugin' ); ?>" class="mil-hero-bg mil-scale-img-top" data-value-1="1" data-value-2="1.3" />
			<?php endif; ?>
			<?php endif; ?>
			<?php if ( $settings['overlay'] === 'yes' ) : ?>
			<div class="mil-overlay<?php if ( $settings['side_gradient'] === 'yes' ) : ?> mil-side-gradient<?php endif; ?><?php if ( $settings['blur'] === 'yes' ) : ?> mil-blur<?php endif; ?>" style="opacity: .8;"></div>
			<?php endif; ?>

			<div class="mil-hero-content">
				<div class="mil-container">
					<div class="row mil-aie">
						<div class="col-lg-12 mil-tac">
							<?php if ( $settings['title'] ) : ?>
							<<?php echo esc_attr( $settings['title_tag'] ); ?> class="<?php echo esc_attr( $settings['title_style'] ); ?> mil-c-m-4 mil-mb-5 mil-title-el"<?php if ( $settings['title_highlight'] ) : ?> data-whighlight="<?php echo esc_attr( $settings['title_highlight'] ); ?>" data-whighlight-color="<?php echo esc_attr( $settings['title_highlight_color'] ); ?>"<?php endif; ?>>
								<span <?php echo $this->get_render_attribute_string( 'title' ); ?>>
									<?php echo wp_kses_post( $settings['title'] ); ?>
								</span>
							</<?php echo esc_attr( $settings['title_tag'] ); ?>>
							<?php endif; ?>
							<?php if ( function_exists( 'lumex_breadcrumbs' ) && $settings['show_breadcrumbs'] == 'yes' ) : lumex_breadcrumbs( $page_id ); endif; ?>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- hero end -->

		<?php
	}
}

Plugin::instance()->widgets_manager->register( new Lumex_Intro_Widget() );