<?php
/**
 * Amazon Mapping View
 *
 * @package    MOMCS_Sync
 * @subpackage MOMCS_Sync/views/src/common/pages/supplier/attribute-mapping
 * @author     miniOrange
 */

declare(strict_types=1);

namespace MOMCS_Sync\Views\Src\Common\Pages\Supplier\Attribute_Mapping;

use MOMCS_Sync\Includes\Common\Utils\Utils;
use MOMCS_Sync\Views\Src\Common\Pages\Supplier\Attribute_Mapping\Amazon_Template_Mapping_View;

// Explicitly require the interface file.
require_once __DIR__ . DIRECTORY_SEPARATOR . 'interface-mapping-view.php';

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

/**
 * Class for rendering the Amazon mapping view.
 */
class Amazon_Mapping_View implements Mapping_View_Interface {

	/**
	 * Render the mapping view.
	 *
	 * @return void
	 */
	public function render() {
		// Get WooCommerce product attributes.
		$wc_attributes = Utils::get_wc_product_attributes();

		?>
		<div class="momcs-mapping-container">
			<div class="momcs-mapping-header">
				<div class="momcs-mapping-header-icon">
					<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3"/><path d="M21 8V5a2 2 0 0 0-2-2h-3"/><path d="M3 16v3a2 2 0 0 0 2 2h3"/><path d="M16 21h3a2 2 0 0 0 2-2v-3"/><line x1="9" y1="12" x2="15" y2="12"/></svg>
				</div>
				<h2><?php esc_html_e( 'Template Mapping', 'multi-channel-for-woocommerce' ); ?></h2>
				<span class="momcs-field-tooltip-wrapper">
					<span class="dashicons dashicons-info-outline momcs-field-tooltip-icon"></span>
					<span class="momcs-field-tooltip"><?php esc_html_e( 'Map your WooCommerce product fields to Amazon product fields.', 'multi-channel-for-woocommerce' ); ?></span>
				</span>
			</div>

			<div id="momcs-mapping-form">
				<!-- Validation Error Container -->
				<div id="momcs-mapping-validation-container" style="display: none;"></div>

				<!-- Default Fields Accordion -->
				<div class="momcs-mapping-accordion">
					<div class="momcs-mapping-accordion-header">
						<span class="momcs-mapping-accordion-icon">
							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
						</span>
						<h3><?php esc_html_e( 'Default Fields', 'multi-channel-for-woocommerce' ); ?></h3>
						<span class="momcs-mapping-accordion-toggle dashicons dashicons-arrow-down-alt2"></span>
					</div>
					<div class="momcs-mapping-accordion-content">
						<!-- Column Headers -->
						<div class="momcs-mapping-field-headers">
							<div class="momcs-mapping-field-header-label">
								<?php esc_html_e( 'Amazon Field', 'multi-channel-for-woocommerce' ); ?>
								<span style="color: #d63638; margin-left: 5px;">*</span>
							</div>
							<div class="momcs-mapping-field-header-input">
								<?php esc_html_e( 'WooCommerce Field', 'multi-channel-for-woocommerce' ); ?>
								<span style="color: #d63638; margin-left: 5px;">*</span>
							</div>
						</div>
						
						<!-- SKU Mapping -->
						<div class="momcs-mapping-field" data-required="true">
							<div class="momcs-mapping-field-row">
								<div class="momcs-mapping-field-label">
									<label for="amazon_sku">
										<?php esc_html_e( 'SKU', 'multi-channel-for-woocommerce' ); ?>
										<span style="color: #d63638;">*</span>
									</label>
								</div>
								<div class="momcs-mapping-field-input">
									<select id="amazon_sku" name="amazon_mapping[sku]" class="momcs-mapping-select" data-field-name="SKU" required>
										<option value=""><?php esc_html_e( 'Select Field...', 'multi-channel-for-woocommerce' ); ?></option>
										<option value="_sku" selected><?php esc_html_e( 'Product SKU', 'multi-channel-for-woocommerce' ); ?></option>
										<?php foreach ( $wc_attributes as $attr_key => $attr_label ) : ?>
											<option value="<?php echo esc_attr( $attr_key ); ?>"><?php echo esc_html( $attr_label ); ?></option>
										<?php endforeach; ?>
									</select>
								</div>
							</div>
						</div>
						
						<!-- Item Name Mapping -->
						<div class="momcs-mapping-field" data-required="true">
							<div class="momcs-mapping-field-row">
								<div class="momcs-mapping-field-label">
									<label for="amazon_item_name">
										<?php esc_html_e( 'Item Name', 'multi-channel-for-woocommerce' ); ?>
										<span style="color: #d63638;">*</span>
									</label>
								</div>
								<div class="momcs-mapping-field-input">
									<select id="amazon_item_name" name="amazon_mapping[item_name]" class="momcs-mapping-select" data-field-name="Item Name" required>
										<option value=""><?php esc_html_e( 'Select Field...', 'multi-channel-for-woocommerce' ); ?></option>
										<option value="post_title" selected><?php esc_html_e( 'Product Title', 'multi-channel-for-woocommerce' ); ?></option>
										<?php foreach ( $wc_attributes as $attr_key => $attr_label ) : ?>
											<option value="<?php echo esc_attr( $attr_key ); ?>"><?php echo esc_html( $attr_label ); ?></option>
										<?php endforeach; ?>
									</select>
								</div>
							</div>
						</div>
						
						<!-- Brand Mapping -->
						<div class="momcs-mapping-field" data-required="true">
							<div class="momcs-mapping-field-row">
								<div class="momcs-mapping-field-label">
									<label for="amazon_brand">
										<?php esc_html_e( 'Brand', 'multi-channel-for-woocommerce' ); ?>
										<span style="color: #d63638;">*</span>
									</label>
								</div>
								<div class="momcs-mapping-field-input">
									<select id="amazon_brand" name="amazon_mapping[brand]" class="momcs-mapping-select" data-field-name="Brand" required>
										<option value=""><?php esc_html_e( 'Select Field...', 'multi-channel-for-woocommerce' ); ?></option>
										<option value="product_brand" selected><?php esc_html_e( 'Product Brand', 'multi-channel-for-woocommerce' ); ?></option>
										<?php foreach ( $wc_attributes as $attr_key => $attr_label ) : ?>
											<option value="<?php echo esc_attr( $attr_key ); ?>"><?php echo esc_html( $attr_label ); ?></option>
										<?php endforeach; ?>
									</select>
								</div>
							</div>
						</div>
						
						<!-- Price Mapping -->
						<div class="momcs-mapping-field" data-required="true">
							<div class="momcs-mapping-field-row">
								<div class="momcs-mapping-field-label">
									<label for="amazon_price">
										<?php esc_html_e( 'Price', 'multi-channel-for-woocommerce' ); ?>
										<span style="color: #d63638;">*</span>
									</label>
								</div>
								<div class="momcs-mapping-field-input">
									<select id="amazon_price" name="amazon_mapping[price]" class="momcs-mapping-select" data-field-name="Price" required>
										<option value=""><?php esc_html_e( 'Select Field...', 'multi-channel-for-woocommerce' ); ?></option>
										<option value="_regular_price" selected><?php esc_html_e( 'Regular Price', 'multi-channel-for-woocommerce' ); ?></option>
										<option value="_sale_price"><?php esc_html_e( 'Sale Price', 'multi-channel-for-woocommerce' ); ?></option>
										<?php foreach ( $wc_attributes as $attr_key => $attr_label ) : ?>
											<option value="<?php echo esc_attr( $attr_key ); ?>"><?php echo esc_html( $attr_label ); ?></option>
										<?php endforeach; ?>
									</select>
								</div>
							</div>
						</div>
						
						<!-- Quantity Mapping -->
						<div class="momcs-mapping-field" data-required="true">
							<div class="momcs-mapping-field-row">
								<div class="momcs-mapping-field-label">
									<label for="amazon_quantity">
										<?php esc_html_e( 'Quantity', 'multi-channel-for-woocommerce' ); ?>
										<span style="color: #d63638;">*</span>
									</label>
								</div>
								<div class="momcs-mapping-field-input">
									<select id="amazon_quantity" name="amazon_mapping[quantity]" class="momcs-mapping-select" data-field-name="Quantity" required>
										<option value=""><?php esc_html_e( 'Select Field...', 'multi-channel-for-woocommerce' ); ?></option>
										<option value="_stock" selected><?php esc_html_e( 'Stock Quantity', 'multi-channel-for-woocommerce' ); ?></option>
										<?php foreach ( $wc_attributes as $attr_key => $attr_label ) : ?>
											<option value="<?php echo esc_attr( $attr_key ); ?>"><?php echo esc_html( $attr_label ); ?></option>
										<?php endforeach; ?>
									</select>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<!-- Template Mapping Accordion -->
				<div class="momcs-mapping-accordion">
					<div class="momcs-mapping-accordion-header">
						<span class="momcs-mapping-accordion-icon">
							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 21V9"/></svg>
						</span>
						<h3><?php esc_html_e( 'Add Template Mapping', 'multi-channel-for-woocommerce' ); ?></h3>
						<span class="momcs-mapping-accordion-toggle dashicons dashicons-arrow-down-alt2"></span>
					</div>
					<div class="momcs-mapping-accordion-content">
				<div class="momcs-mapping-field">
							<div id="momcs-template-mapping-container">
								<?php
								// Include the template mapping view.
								$template_mapping_view = new Amazon_Template_Mapping_View();
								$template_mapping_view->render();
								?>
							</div>
						</div>
					</div>
				</div>
				
				<!-- Remove the mapping actions div with save button -->
			</div>
		</div>
		<?php
	}
}
