<?php
namespace ElementPack\Modules\HoverBox\Skins;

use Elementor\Skin_Base as Elementor_Skin_Base;

use Elementor\Icons_Manager;
use ElementPack\Utils;

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

class Skin_Envelope extends Elementor_Skin_Base {
	public function get_id() {
		return 'bdt-envelope';
	}

	public function get_title() {
		return __( 'Envelope', 'bdthemes-element-pack' );
	}

	public function render() {
		$settings = $this->parent->get_settings_for_display();
		$hoverBoxEvent = ! empty( $settings['hover_box_event'] ) ? $settings['hover_box_event'] : false;

		if ( ! empty( $settings['box_image_effect'] ) && $settings['box_image_effect'] === 'yes' ) {
			$img_effect = isset( $settings['box_image_effect_select'] ) ? $settings['box_image_effect_select'] : '';
			if ( $img_effect !== '' ) {
				$this->parent->add_render_attribute( 'hover_box', 'class', 'bdt-ep-hover-box-img-effect bdt-' . esc_attr( $img_effect ) );
			}
		}

		$this->parent->add_render_attribute(
			[
				'hover_box' => [
					'id'            => 'bdt-ep-hover-box-' . esc_attr( $this->parent->get_id() ),
					'class'         => 'bdt-ep-hover-box bdt-ep-hover-box-skin-envelope',
					'data-settings' => [
						wp_json_encode( array_filter( [
							'box_id'      => 'bdt-ep-hover-box-' . $this->parent->get_id(),
							'mouse_event' => $hoverBoxEvent,
						] ) ),
					],
				],
			]
		);
		?>
		<div <?php $this->parent->print_render_attribute_string( 'hover_box' ); ?>>
			<?php $this->parent->box_content( $settings ); ?>
			<?php $this->box_items( $settings ); ?>
		</div>
		<?php
	}

	public function render_navigation( $settings ) {
		if ( empty( $settings['show_navigation_arrows'] ) || $settings['show_navigation_arrows'] !== 'yes' ) {
			return;
		}
		?>
		<a class="bdt-position-center-left bdt-margin-medium-left bdt-slidenav bdt-hidden-hover" href="#" bdt-slidenav-previous bdt-slider-item="previous"></a>
		<a class="bdt-position-center-right bdt-margin-medium-right bdt-slidenav bdt-hidden-hover" href="#" bdt-slidenav-next bdt-slider-item="next"></a>
		<?php
	}

	public function box_items( $settings ) {
		$id = $this->parent->get_id();
		$hover_box_items = isset( $settings['hover_box'] ) && is_array( $settings['hover_box'] ) ? $settings['hover_box'] : [];

		$this->parent->add_render_attribute( 'box-settings', 'data-bdt-ep-hover-box-items', 'connect: #bdt-box-content-' . esc_attr( $id ) . ';' );
		$this->parent->add_render_attribute( 'box-settings', 'class', [
			'bdt-ep-hover-box-item-wrap',
			'bdt-grid',
			'bdt-grid-small',
			'bdt-grid-collapse',
			'bdt-slider-items',
		] );
		$this->parent->add_render_attribute( 'box-settings', 'data-bdt-grid', '' );

		$desktop_cols = isset( $settings['columns'] ) ? (int) $settings['columns'] : 3;
		$tablet_cols  = isset( $settings['columns_tablet'] ) ? (int) $settings['columns_tablet'] : 2;
		$mobile_cols  = isset( $settings['columns_mobile'] ) ? (int) $settings['columns_mobile'] : 2;

		$this->parent->add_render_attribute( 'box-settings', 'class', 'bdt-child-width-1-' . esc_attr( $mobile_cols ) );
		$this->parent->add_render_attribute( 'box-settings', 'class', 'bdt-child-width-1-' . esc_attr( $tablet_cols ) . '@s' );
		$this->parent->add_render_attribute( 'box-settings', 'class', 'bdt-child-width-1-' . esc_attr( $desktop_cols ) . '@m' );

		$this->parent->add_render_attribute( 'slider-settings', 'class', 'bdt-slider bdt-visible-toggle' );
		$this->parent->add_render_attribute( 'slider-settings', 'data-bdt-slider', wp_json_encode( array_filter( [
			'autoplay'          => false,
			'autoplay-interval' => 7000,
			'finite'            => false,
			'pause-on-hover'    => true,
		] ) ) );

		$active_item = $this->parent->activeItem( isset( $settings['hover_box_active_item'] ) ? $settings['hover_box_active_item'] : 1, count( $hover_box_items ) );
		$content_position = isset( $settings['content_position'] ) ? $settings['content_position'] : '';
		$title_tag = Utils::get_valid_html_tag( isset( $settings['title_tags'] ) ? $settings['title_tags'] : 'h3' );
		?>
		<div <?php $this->parent->print_render_attribute_string( 'slider-settings' ); ?>>
			<div <?php $this->parent->print_render_attribute_string( 'box-settings' ); ?>>
				<?php foreach ( $hover_box_items as $index => $item ) :
					$tab_count = $index + 1;
					$tab_id    = 'bdt-box-' . $tab_count . esc_attr( $id );
					$expected_id = 'bdt-box-' . $active_item . esc_attr( $id );

					if ( $tab_id === $expected_id ) {
						$this->parent->add_render_attribute( 'box-item', 'class', 'bdt-ep-hover-box-item active', true );
					} else {
						$this->parent->add_render_attribute( 'box-item', 'class', 'bdt-ep-hover-box-item', true );
					}

					$this->parent->add_render_attribute( 'bdt-ep-hover-box-title', 'class', 'bdt-ep-hover-box-title', true );

					$title_key  = 'title_' . $index;
					$button_key = 'button_' . $index;
					$this->parent->add_render_attribute( $title_key, 'class', 'bdt-ep-hover-box-title-link', true );
					$this->parent->add_link_attributes( $title_key, isset( $item['title_link'] ) ? $item['title_link'] : [] );
					$this->parent->add_link_attributes( $button_key, isset( $item['button_link'] ) ? $item['button_link'] : [] );
					?>
					<div>
						<div <?php $this->parent->print_render_attribute_string( 'box-item' ); ?> data-id="<?php echo esc_attr( $tab_id ); ?>">
							<div class="bdt-ep-hover-box-description bdt-position-small bdt-position-<?php echo esc_attr( $content_position ); ?>">
								<?php if ( ! empty( $settings['show_icon'] ) && $settings['show_icon'] === 'yes' && ! empty( $item['selected_icon']['value'] ) ) : ?>
									<a class="bdt-ep-hover-box-icon-box" href="javascript:void(0);" data-tab-index="<?php echo esc_attr( $index ); ?>">
										<span class="bdt-ep-hover-box-icon-wrap">
											<?php Icons_Manager::render_icon( $item['selected_icon'], [ 'aria-hidden' => 'true' ] ); ?>
										</span>
									</a>
								<?php endif; ?>

								<?php if ( ! empty( $item['hover_box_sub_title'] ) && ! empty( $settings['show_sub_title'] ) && $settings['show_sub_title'] === 'yes' ) : ?>
									<div class="bdt-ep-hover-box-sub-title">
										<?php echo wp_kses( $item['hover_box_sub_title'], element_pack_allow_tags( 'title' ) ); ?>
									</div>
								<?php endif; ?>

								<?php if ( ! empty( $item['hover_box_title'] ) && ! empty( $settings['show_title'] ) && $settings['show_title'] === 'yes' ) : ?>
									<<?php echo esc_attr( $title_tag ); ?> <?php $this->parent->print_render_attribute_string( 'bdt-ep-hover-box-title' ); ?>>
										<?php
										$title_link_url = isset( $item['title_link']['url'] ) ? $item['title_link']['url'] : '';
										if ( $title_link_url !== '' ) :
											?>
											<a <?php $this->parent->print_render_attribute_string( $title_key ); ?>>
										<?php endif; ?>
										<?php echo wp_kses( $item['hover_box_title'], element_pack_allow_tags( 'title' ) ); ?>
										<?php if ( $title_link_url !== '' ) : ?>
											</a>
										<?php endif; ?>
									</<?php echo esc_attr( $title_tag ); ?>>
								<?php endif; ?>

								<?php if ( ! empty( $item['hover_box_content'] ) && ! empty( $settings['show_content'] ) && $settings['show_content'] === 'yes' ) : ?>
									<div class="bdt-ep-hover-box-text">
										<?php echo wp_kses_post( $item['hover_box_content'] ); ?>
									</div>
								<?php endif; ?>

								<?php if ( ! empty( $item['hover_box_button'] ) && ! empty( $settings['show_button'] ) && $settings['show_button'] === 'yes' ) : ?>
									<div class="bdt-ep-hover-box-button">
										<a <?php $this->parent->print_render_attribute_string( $button_key ); ?>>
											<?php echo wp_kses_post( $item['hover_box_button'] ); ?>
										</a>
									</div>
								<?php endif; ?>
							</div>
						</div>
					</div>
				<?php endforeach; ?>
			</div>
			<?php $this->render_navigation( $settings ); ?>
		</div>
		<?php
	}
}

