<?php
/**
 * Grid Feature Meta Box Template
 *
 * Variables available:
 * @var string $shop_id Shop page ID
 * @var string $page_type Current page type
 * @var string $target_options HTML options for target select
 * @var string $term_options HTML options for term select
 * @var string $row_options HTML options for row select
 * @var string $position_options HTML options for position select
 * @var string $width_options HTML options for width select
 * @var int    $col_count Number of columns
 * @var string $help_text Helper text for current selection
 *
 * @package Shoptimizer
 */

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

<p class="shoptimizer-grid-feature-instructions" style="margin: 0 0 15px; padding: 12px; background: #f0f6fc; border-left: 4px solid #2271b1; font-size: 13px; line-height: 1.5;">
	<?php esc_html_e( 'Click the top blue + button in the editor above and browse', 'shoptimizer' ); ?> <strong><?php esc_html_e( 'Patterns → Grid Features', 'shoptimizer' ); ?></strong>.
</p>

<div class="grid-features-wrap" role="region" aria-label="<?php esc_attr_e( 'Grid Feature Position Settings', 'shoptimizer' ); ?>">

	<div class="meta-title">
		<label for="shoptimizer-gf-target"><?php esc_html_e( 'Target:', 'shoptimizer' ); ?></label>
	</div>
	<div class="meta-input">
		<select name="shoptimizer_grid_feature[target]" id="shoptimizer-gf-target" class="grid-feature-select" data-shop-id="<?php echo esc_attr( $shop_id ); ?>" aria-describedby="shoptimizer-gf-instructions" style="width:100%;">
			<?php echo $target_options; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
		</select>
	</div>

	<div id="shoptimizer-gf-term-wrap" <?php echo ( 'shop' === $page_type ? 'style="display: none;"' : '' ); ?>>
		<label for="shoptimizer-gf-term" class="screen-reader-text"><?php esc_html_e( 'Select Category or Tag', 'shoptimizer' ); ?></label>
		<select id="shoptimizer-gf-term" name="shoptimizer_grid_feature_term" class="grid-feature-select2" data-type="<?php echo esc_attr( $page_type ); ?>" data-select="<?php esc_attr_e( 'Select', 'shoptimizer' ); ?>" data-placeholder="<?php esc_attr_e( 'Select', 'shoptimizer' ); ?> <?php echo esc_attr( $page_type ); ?>" style="width:100%;">
			<?php echo $term_options; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
		</select>
	</div>

	<div class="meta-title">
		<label for="shoptimizer-gf-row"><?php esc_html_e( 'Row:', 'shoptimizer' ); ?></label>
	</div>
	<div class="meta-input">
		<select name="shoptimizer_grid_feature[row]" id="shoptimizer-gf-row" class="grid-feature-select" aria-describedby="shoptimizer-gf-help" style="width:100%;">
			<?php echo $row_options; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
		</select>
	</div>

	<div class="meta-title">
		<label for="shoptimizer-gf-position"><?php esc_html_e( 'Column:', 'shoptimizer' ); ?></label>
	</div>
	<div class="meta-input">
		<select name="shoptimizer_grid_feature[position]" id="shoptimizer-gf-position" class="grid-feature-select" data-col-count="<?php echo esc_attr( $col_count ); ?>" aria-describedby="shoptimizer-gf-help" style="width:100%;">
			<?php echo $position_options; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
		</select>
	</div>

	<div class="meta-title">
		<label for="shoptimizer-gf-width"><?php esc_html_e( 'Column Span:', 'shoptimizer' ); ?></label>
	</div>
	<div class="meta-input">
		<select name="shoptimizer_grid_feature[width]" id="shoptimizer-gf-width" class="grid-feature-select" aria-describedby="shoptimizer-gf-help" style="width:100%;">
			<?php echo $width_options; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
		</select>
	</div>

	<div id="shoptimizer-gf-help" class="description" aria-live="polite">
		<?php echo esc_html( $help_text ); ?>
	</div>

	<?php if ( $duplicate_warning ) : ?>
		<div class="shoptimizer-duplicate-warning" style="margin-top: 15px; padding: 12px; background: #fff3cd; border-left: 4px solid #ffc107; border-radius: 3px;">
			<p style="margin: 0 0 8px 0; font-weight: 600; color: #856404;">
				⚠️ <?php esc_html_e( 'Duplicate Grid Feature', 'shoptimizer' ); ?>
			</p>
			<p style="margin: 0 0 8px 0; color: #856404;">
				<?php
				printf(
					esc_html__( '"%s" is already assigned to Row %s, Position %s. Only one Grid Feature will be displayed.', 'shoptimizer' ),
					'<strong>' . esc_html( $duplicate_warning['title'] ) . '</strong>',
					'<strong>' . esc_html( $duplicate_warning['row'] ) . '</strong>',
					'<strong>' . esc_html( $duplicate_warning['position'] ) . '</strong>'
				);
				?>
			</p>
			<p style="margin: 0;">
				<a href="<?php echo esc_url( get_edit_post_link( $duplicate_warning['id'] ) ); ?>" class="button button-small">
					<?php esc_html_e( 'Edit Existing Grid Feature', 'shoptimizer' ); ?>
				</a>
			</p>
		</div>
	<?php endif; ?>

	<input type="hidden" name="shoptimizer_grid_feature_tmp" id="shoptimizer_grid_feature_tmp" value="1" />
</div>

<style>
.grid-features-wrap { width: 100%; display: block; margin: 15px 0px 10px; }
.grid-features-wrap .meta-title { width: 100%; display: block; margin-bottom: 5px; }
.grid-features-wrap .meta-input, #shoptimizer-gf-term-wrap { width: 100%; display: block; margin-bottom: 15px; }
.block-editor-page .grid-features-wrap select { max-width: 100%; padding: 0 8px; width: calc(100% - 16px) !important; }
.grid-features-wrap .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; }
.grid-features-wrap #shoptimizer-gf-help { margin-top: 10px; font-style: italic; color: #646970; }
</style>
