<?php
namespace ova_framework\Widgets;
use Elementor;
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Utils;
use Elementor\Group_Control_Image_Size;
use Elementor\Group_Control_Css_Filter;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Typography;
use Elementor\Core\Schemes\Typography;
if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}


class ova_iso extends Widget_Base {

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

	public function get_title() {
		return __( 'Isotope', 'ova-framework' );
	}

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

	public function get_categories() {
		return [ 'ovatheme' ];
	}

	public function get_keywords() {
		return [ 'image', 'photo', 'visual' ];
	}

	public function get_script_depends() {

		  wp_enqueue_script( 'isotope', OVA_PLUGIN_URI.'assets/libs/isotope.pkgd.min.js', [ 'jquery' ], false, true );

		
		return [ 'script-elementor' ];
	}


	protected function register_controls() {




		$this->start_controls_section(
			'section_image',
			[
				'label' => __( 'Image', 'ova-framework' ),
			]
		);
       	$repeater = new \Elementor\Repeater();



		$repeater->add_control(
			'desk_logo',
			[
				'label' => __( 'Image', 'ova-framework' ),
				'type' => Controls_Manager::MEDIA,
				'dynamic' => [
					'active' => true,
				],
				'default' => [
					'url' => Utils::get_placeholder_image_src(),
				],
			]
		);
		$repeater->add_group_control(
			Group_Control_Image_Size::get_type(),
			[
				'name' => 'desk_logo',
				'default' => 'full',
				'separator' => 'none',
			]
		);

		

		$repeater->add_control(
			'large_width',
			[
				'label' => __( 'Use large width', 'ova-framework' ),
				'type' => Controls_Manager::SELECT,
				'default' => 'no',
				'options' => [
					'no' => esc_html__( 'No', 'ova-framework' ),
					'yes' => esc_html__( 'Yes', 'ova-framework' ),
				]
			]
		);


		$repeater->add_control(
			'title',
			[
				'label' => __( 'Title', 'ova-framework' ),
				'type' => \Elementor\Controls_Manager::TEXT,
			]
		);

		$repeater->add_control(
			'title2',
			[
				'label' => __( 'Sub Title', 'ova-framework' ),
				'type' => \Elementor\Controls_Manager::TEXT,
			]
		);

		$repeater->add_control(
			'title3',
			[
				'label' => __( 'Text Button', 'ova-framework' ),
				'type' => \Elementor\Controls_Manager::TEXT,
			]
		);

			$repeater->add_control(
			'link',
			[
				'label' => __( 'Link', 'ova-framework' ),
				'type' => Controls_Manager::URL,
				'placeholder' => __( 'https://your-link.com', 'ova-framework' ),
				'default' => [
					'url' => '#',
				],
			]
		);

			$repeater->add_control(
				'show_title',
				[
					'label'        => __( 'Show Heading', 'ovaev' ),
					'type'         => Controls_Manager::SWITCHER,
					'return_value' => 'yes',
					'default'      => 'no',
					'separator'    => 'before',
				]
			);

			$repeater->add_control(
			'version',
			[
				'label' => __( 'Version', 'ova-framework' ),
				'type' => Controls_Manager::SELECT,
				'default' => 'version_1',
				'options' => [
					'version_1' => esc_html__( 'Version 1', 'ova-framework' ),
					'version_2' => esc_html__( 'Version 2', 'ova-framework' ),
				]
			]
		);

				$repeater->add_control(
			'Background',
			[
				'label' => __( 'Background', 'ova-framework' ),
				'type' => Controls_Manager::SELECT,
				'default' => 'Background_1',
				'options' => [
					'Background_1' => esc_html__( 'Background 1', 'ova-framework' ),
					'Background_2' => esc_html__( 'Background 2', 'ova-framework' ),
					'Background_3' => esc_html__( 'Background 3', 'ova-framework' ),

				]
			]
		);




				$this->add_control(
			'tabs',
			[
				'label' => __( 'Tabs', 'ova-framework' ),
				'type' => Controls_Manager::REPEATER,
				'fields' => $repeater->get_controls(),
			]
		);
			



		$this->end_controls_section();


		$this->start_controls_section(
			'section_title',
			[
				'label' => __( 'Title Version 1', 'ova-framework' ),
				'tab' => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'title_typography',
				'selector' => '{{WRAPPER}} .content_iso .text_iso.version_1 .title_1',
			]
		);

		$this->add_control(
			'color_title',
			[
				'label' => __( 'Color ', 'ova-framework' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .content_iso .text_iso.version_1 .title_1' => 'color : {{VALUE}};',
				],
			]
		);

		$this->add_responsive_control(
			'margin_title',
			[
				'label' => __( 'Margin', 'ova-framework' ),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em', '%' ],
				'selectors' => [
					'{{WRAPPER}} .content_iso .text_iso.version_1 .title_1' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_sub_title',
			[
				'label' => __( 'Sub Title Version 1', 'ova-framework' ),
				'tab' => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'sub_title_typography',
				'selector' => '{{WRAPPER}} .content_iso .text_iso.version_1 .title_2',
			]
		);

		$this->add_control(
			'color_sub_title',
			[
				'label' => __( 'Color', 'ova-framework' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .content_iso .text_iso.version_1 .title_2' => 'color : {{VALUE}};',
				],
			]
		);


		$this->add_responsive_control(
			'margin_sub_title',
			[
				'label' => __( 'Margin', 'ova-framework' ),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em', '%' ],
				'selectors' => [
					'{{WRAPPER}} .content_iso .text_iso.version_1 .title_2' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_title2',
			[
				'label' => __( 'Title Version 2', 'ova-framework' ),
				'tab' => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'title_typography2',
				'selector' => '{{WRAPPER}} .content_iso .text_iso.version_2 .title_1',
			]
		);

		$this->add_control(
			'color_title2',
			[
				'label' => __( 'Color ', 'ova-framework' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .content_iso .text_iso.version_2 .title_1' => 'color : {{VALUE}};',
				],
			]
		);

		$this->add_responsive_control(
			'margin_title2',
			[
				'label' => __( 'Margin', 'ova-framework' ),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em', '%' ],
				'selectors' => [
					'{{WRAPPER}} .content_iso .text_iso.version_2 .title_1' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_sub_title2',
			[
				'label' => __( 'Sub Title Version 2', 'ova-framework' ),
				'tab' => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'sub_title_typography2',
				'selector' => '{{WRAPPER}} .content_iso .text_iso.version_2 .title_2',
			]
		);

		$this->add_control(
			'color_sub_title2',
			[
				'label' => __( 'Color', 'ova-framework' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .content_iso .text_iso.version_2 .title_2' => 'color : {{VALUE}};',
				],
			]
		);


		$this->add_responsive_control(
			'margin_sub_title2',
			[
				'label' => __( 'Margin', 'ova-framework' ),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em', '%' ],
				'selectors' => [
					'{{WRAPPER}} .content_iso .text_iso.version_2 .title_2' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->end_controls_section();
	}

	protected function render() {

		$settings 	= $this->get_settings_for_display();
		$tabs 		= $settings['tabs'];

		?>
	  	<div class="ova_isotope grid">
	  		<div class="grid-sizer"></div>
	  			<?php if( !empty( $tabs ) ) : ?>
					<?php 
					foreach( $tabs as $item ) { 
							
		                $title3 	 = $item['title3'] != '' ? esc_html( $item['title3'] ) : '';
                        $show_title  = $item['show_title'] != '' ? esc_html( $item['show_title'] ) : '';
                        $large_width = $item['large_width'] == 'no' ? '' : 'grid-item--width2';

                        $img_url = $item['desk_logo']['url'];
                        $img_id  = $item['desk_logo']['id'];
                        $img_alt = "";

                        if ( !empty( $img_id ) ) {
							$img_alt = get_post_meta( $img_id, '_wp_attachment_image_alt', true );
							if ( empty( $img_alt ) ) {
								$img_alt = get_the_title( $img_id );
							}
						}

						?>
						<div class="grid-item <?php echo ' '.$large_width; ?>">
						 	<div class="content_iso <?php echo esc_attr( $item['Background'] ); ?>">
								 
								 <img class="" src="<?php echo esc_url( $img_url ); ?>" alt="<?php echo esc_html( $img_alt ); ?>" />

								 <div class="text_iso <?php echo esc_attr( $item['version'] ); ?>">
									 
									 <div class="title_1">
									 	<?php echo esc_html__( $item['title'] ); ?>
									 </div>
									 
									 <div class="title_2">
									 	<?php echo esc_html__( $item['title2'] ); ?>
									 </div>

									 <?php if( $show_title == 'yes' ) { ?>
										 <div class="btn_iso">
										 	<a class="learn_more" href="<?php echo $item['link']['url']; ?>">
										 		<?php echo esc_html__( $title3 ); ?>
										 	</a>
										 </div>
									 <?php } ?>

								</div>
							</div>
						 
						</div> 
					<?php } ?>
				<?php endif; ?>
		</div>
		<?php
	}
	
}