<?php
namespace Elementor;

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

/**
 * Lumex Image Widget.
 *
 * @since 1.0
 */
class Lumex_Image_Widget extends Widget_Base {

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

	public function get_title() {
		return esc_html__( 'Section Image', '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,
			]
		);

		$this->add_control(
			'image',
			[
				'label' => esc_html__( 'Image', 'lumex-plugin' ),
				'type' => Controls_Manager::MEDIA,
				'default' => [
					'url' => \Elementor\Utils::get_placeholder_image_src(),
				],
			]
		);

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

		$this->end_controls_section();

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

		$this->add_control(
			'overlay_bgcolor',
			[
				'label'     => esc_html__( 'Overlay BG Color', 'lumex-plugin' ),
				'type'      => Controls_Manager::COLOR,
				'default'	=> '',
				'selectors' => [
					'{{WRAPPER}} .mil-square-box .mil-overlay' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'image_opacity',
			[
				'label' => esc_html__( 'Opacity', 'elementor' ),
				'type' => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'max' => 1,
						'min' => 0.10,
						'step' => 0.01,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .mil-square-box .mil-overlay' => 'opacity: {{SIZE}};',
				],
			]
		);

		$this->end_controls_section();
	}


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

		?>
		
		<?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); ?>
		<div class="mil-image-frame mil-angle mil-mb-4">
			<img src="<?php echo esc_url( $image ); ?>" alt="<?php echo $image_alt ? esc_attr( $image_alt ) : esc_attr__( 'image', 'lumex-plugin' ); ?>" class="mil-scale-img" data-value-1="1.1" data-value-2="1" />
			<?php if ( $settings['overlay_show'] == 'yes' ) : ?>
			<div class="mil-overlay" style="opacity: .1"></div>
			<?php endif; ?>
		</div>
		<?php endif; ?>

		<?php
	}
}

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