<?php defined( 'ABSPATH' ) || exit; ?>
<div class="quicker-tabs-wrapper">
	<div class="quicker-vertical-tab-pane">
	<?php
		$tabs = array(
			array(
				'id'     => 'tab-btn-options',
				'label'  => esc_html__( 'Button Options', 'quicker' ),
				'active' => true,
			),
			array(
				'id'     => 'tab-content-options',
				'label'  => esc_html__( 'Content Options', 'quicker' ),
				'active' => false,
			),
			array(
				'id'     => 'tab-customization-options',
				'label'  => esc_html__( 'Customization Options', 'quicker' ),
				'active' => false,
			),
		);
		?>
	<ul class="quicker-tabs vertical">
		<?php foreach ( $tabs as $tab ) : ?>
			<li class="<?php echo esc_attr( $tab['active'] ? 'active' : '' ); ?>" data-tab="<?php echo esc_attr( $tab['id'] ); ?>"><?php echo esc_html( $tab['label'] ); ?></li>
		<?php endforeach; ?>
	</ul>
	</div>
	<div class="quicker-vertical-tab">
		<div class="quicker-tab-content active" id="tab-btn-options">
			<?php
			$args = array(
				'label'   => esc_html__( 'Enable Quick View on Shop Page', 'quicker' ),
				'id'      => 'quicker_view',
				'checked' => $quicker_view,
			);
			quicker_checkbox_field( $args );

			$block_quicker_view = $quicker_view == 'yes' ? '' : 'd-none';

			$args = array(
				'label'   => esc_html__( 'Stick Add to Cart Button on the Quick View', 'quicker' ),
				'id'      => 'stick_add_to_cart_btn',
				'checked' => $stick_add_to_cart_btn,
				'disable' => $disable,
			);
			quicker_checkbox_field( $args );

			$args = array(
				'label'   => esc_html__( 'Hide Quick View on Mobile', 'quicker' ),
				'id'      => 'hide_quicker_view_mobile',
				'checked' => $hide_quicker_view_mobile,
			);
			quicker_checkbox_field( $args );

			$args = array(
				'label'      => esc_html__( 'Quick View Button Label', 'quicker' ),
				'id'         => 'quicker_btn_label',
				'field_type' => 'text',
				'disable'    => $disable,
				'value'      => $quicker_btn_label,
			);
			quicker_number_input_field( $args );

			?>
			<div class="single-block">
				<div class="form-label"><?php esc_html_e( 'Quick View Icon', 'quicker' ); ?></div>
				<div class="input-section">
					<button type="button" id="qview_icon" class="button button-secondary" <?php echo ! empty( $disable ) ? 'disabled' : ''; ?>><?php esc_html_e( 'Select Icon', 'quicker' ); ?></button>
					<input type="hidden" id="qview_icon_url" name="qview_icon" value="<?php echo esc_attr( $qview_icon ); ?>" />
					<span class="description" style="margin-left:8px;"><?php esc_html_e( 'Upload an SVG or image to replace the default Quick View icon.', 'quicker' ); ?></span>
				</div>
			</div>
			<div class="form-group">
				<div class="uploaded-icon-preview" style="margin-top:10px;">
					<?php if ( ! empty( $qview_icon ) ) :
						$preview_markup = \Quicker\Utils\Helper::inline_svg_or_img( $qview_icon );
						// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Sanitized in helper method
						echo $preview_markup;
					endif; ?>
				</div>
			</div>
			<?php

			$args = array(
				'label'    => esc_html__( "'QuickView' Button Position", 'quicker' ),
				'id'       => 'quicker_view_btn_postion',
				'selected' => $quicker_view_btn_postion,
				'options'  =>
					array(
						'within_image'   => esc_html__( 'Within the Product Image', 'quicker' ),
						'after_cart_btn' => esc_html__( 'After Add to Cart', 'quicker' ),
					),
				'disable'  => $disable,
			);
			quicker_select_field( $args );
			?>
		</div>

		<div class="quicker-tab-content" id="tab-content-options">
			<?php
			$args = array(
				'label'       => esc_html__( ' In QuickView Hide ', 'quicker' ),

				'id'          => 'quicker_view_options',
				'selected'    => $quicker_view_options,
				'options'     =>
					array(
						''         => esc_html__( 'Select Options', 'quicker' ),
						'image'    => esc_html__( 'Product Image', 'quicker' ),
						'title'    => esc_html__( 'Product Name', 'quicker' ),
						'rating'   => esc_html__( 'Product Rating', 'quicker' ),
						'price'    => esc_html__( 'Product Price', 'quicker' ),
						'meta'     => esc_html__( 'Product Meta', 'quicker' ),
						'add_cart' => esc_html__( 'Product Add Cart', 'quicker' ),
					),
				'disable'     => $disable,
				'select_type' => 'multiple',
			);
			quicker_select_field( $args );

			$args = array(
				'label'    => esc_html__( 'QuickView Show Product Description', 'quicker' ),

				'id'       => 'quicker_view_desc',
				'selected' => $quicker_view_desc,
				'options'  =>
					array(
						'no'    => esc_html__( "Don't Show Description", 'quicker' ),
						'short' => esc_html__( 'Short Description', 'quicker' ),
						'full'  => esc_html__( 'Full Description', 'quicker' ),
					),
			);
			quicker_select_field( $args );
			?>
		</div>

		<div class="quicker-tab-content" id="tab-customization-options">
			<h2 class="mt-0"><?php esc_html_e( 'Quick View', 'quicker' ); ?></h2>

			<?php
			$args = array(
				'label'      => esc_html__( 'Content Background', 'quicker' ),
				'id'         => 'quickview_content_bg',
				'field_type' => 'text',
				'value'      => $quickview_content_bg,
			);
			quicker_number_input_field( $args );

			$args = array(
				'label'      => esc_html__( 'Overlay Color', 'quicker' ),
				'id'         => 'quickview_overlay',
				'field_type' => 'text',
				'value'      => $quickview_overlay,
			);
			quicker_number_input_field( $args );
			?>
			<h2><?php esc_html_e( 'Button', 'quicker' ); ?></h2>
			<?php
			$args = array(
				'label'      => esc_html__( 'Color', 'quicker' ),
				'id'         => 'quickview_btn_color',
				'field_type' => 'text',
				'value'      => $quickview_btn_color,
			);
			quicker_number_input_field( $args );
			$args = array(
				'label'      => esc_html__( 'Hover Color', 'quicker' ),
				'id'         => 'quickview_btn_hover',
				'field_type' => 'text',
				'value'      => $quickview_btn_hover,
			);
			quicker_number_input_field( $args );
			$args = array(
				'label'      => esc_html__( 'Text Color', 'quicker' ),
				'id'         => 'quickview_text_color',
				'field_type' => 'text',
				'value'      => $quickview_text_color,
			);
			quicker_number_input_field( $args );
			$args = array(
				'label'      => esc_html__( 'Text Hover', 'quicker' ),
				'id'         => 'quickview_text_hover',
				'field_type' => 'text',
				'value'      => $quickview_text_hover,
			);
			quicker_number_input_field( $args );
			?>
			<h2><?php esc_html_e( 'Close Icon', 'quicker' ); ?></h2>
			<?php
			$args = array(
				'label'      => esc_html__( 'Color', 'quicker' ),
				'id'         => 'quickview_icon',
				'field_type' => 'text',
				'value'      => $quickview_icon,
			);
			quicker_number_input_field( $args );
			$args = array(
				'label'      => esc_html__( 'Hover Color', 'quicker' ),
				'id'         => 'quickview_icon_hover',
				'field_type' => 'text',
				'value'      => $quickview_icon_hover,
			);
			quicker_number_input_field( $args );
			?>
		</div>
	</div>
</div>


