<?php

/**
 * Addon Builder Template
 *
 * @package Extra_Product_Options_For_WooCommerce
 * @version 1.0.0
 */
// If this file is called directly, abort.
if ( !defined( 'ABSPATH' ) ) {
    exit;
}
// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- GET parameters used for read-only display purposes in admin page, not form processing.
$epofw_get_action = ( isset( $_GET['action'] ) ? sanitize_text_field( wp_unslash( $_GET['action'] ) ) : 'add' );
$epofw_get_data = '';
$epofw_field_type = '';
$epofw_get_post_id = '';
if ( 'edit' === $epofw_get_action ) {
    // phpcs:ignore WordPress.Security.NonceVerification.Recommended -- GET parameter used for read-only display purposes in admin page, not form processing.
    $epofw_get_post_id = ( isset( $_GET['post'] ) ? intval( sanitize_text_field( wp_unslash( $_GET['post'] ) ) ) : 0 );
    // Load data using optimized format (automatic migration if needed).
    $epofw_get_data = epofw_get_data_from_db( $epofw_get_post_id );
}
$epofw_check_general_data = epofw_check_array_key_exists( 'general', $epofw_get_data );
$epofw_check_epofw_addon_status = epofw_check_array_key_exists( 'epofw_addon_status', $epofw_get_data );
$epofw_check_epofw_addon_name = epofw_check_array_key_exists( 'epofw_addon_name', $epofw_get_data );
$epofw_check_epofw_addon_position = epofw_check_array_key_exists( 'epofw_addon_position', $epofw_get_data );
$epofw_additional_rule_detail = epofw_check_array_key_exists( 'additional_rule_data', $epofw_get_data );
// Normalize rule data to new nested format (handles backward compatibility).
$epofw_additional_rule_detail_normalized = epofw_normalize_additional_rules_data( $epofw_additional_rule_detail );
$epofw_selected_condition = '';
// Get status from custom table data if available, otherwise fallback to post status (legacy).
if ( !empty( $epofw_check_epofw_addon_status ) ) {
    $epofw_addon_status = $epofw_check_epofw_addon_status;
} else {
    // Fallback to post status for legacy data or when custom tables are disabled.
    $epofw_addon_status_from_db = get_post_status( $epofw_get_post_id );
    $epofw_addon_status = ( 'publish' === $epofw_addon_status_from_db ? 'on' : 'off' );
}
?>

<div class="epofw-addon-builder-container">
	<!-- Box 1: Addon Configuration -->
	<div class="epofw-configuration-box">
		<div class="epofw-box-header epofw-addon-conf">
			<div class="epofw-box-header-title">
				<h3><?php 
esc_html_e( 'Addon Configuration', 'extra-product-options-for-woocommerce' );
?></h3>
				<p class="epofw-box-description"><?php 
esc_html_e( 'Configure the basic settings and display rules for your product addon. Set the status, name, and define when and where this addon should appear on your products.', 'extra-product-options-for-woocommerce' );
?></p>
			</div>
			<?php 
epofw_render_tutorial_buttons( 'addon_configuration', 'medium', true );
?>
		</div>
		<div class="epofw-box-content">
			<!-- Status Field -->
			<div class="epofw-setting-field">
				<div class="epofw-setting-label">
					<label for="epofw_addon_status"><?php 
esc_html_e( 'Status', 'extra-product-options-for-woocommerce' );
?></label>
					<p class="epofw-field-description"><?php 
esc_html_e( 'Choose whether this addon is enabled or disabled on the frontend.', 'extra-product-options-for-woocommerce' );
?></p>
				</div>
				<div class="epofw-setting-input">
					<!-- OPTIMIZED: Flat structure (v4.4.0) -->
					<input type="checkbox" name="epofw_addon_status" id="epofw_addon_status" value="on" <?php 
checked( $epofw_addon_status, 'on' );
?>>
					<label for="epofw_addon_status" class="toggle-switch"></label>
				</div>
			</div>

			<!-- Name Field -->
			<div class="epofw-setting-field">
				<div class="epofw-setting-label">
					<label for="epofw_addon_name"><?php 
esc_html_e( 'Name', 'extra-product-options-for-woocommerce' );
?></label>
					<p class="epofw-field-description"><?php 
esc_html_e( 'Enter a unique name for this addon. This will be used as the addon identifier and displayed to customers.', 'extra-product-options-for-woocommerce' );
?></p>
				</div>
				<div class="epofw-setting-input">
					<!-- OPTIMIZED: Flat structure (v4.4.0) -->
					<input type="text" name="epofw_addon_name" id="epofw_addon_name" value="<?php 
echo esc_attr( $epofw_check_epofw_addon_name );
?>" placeholder="<?php 
esc_attr_e( 'Enter addon name...', 'extra-product-options-for-woocommerce' );
?>" class="epofw-name-input">
				</div>
			</div>

			<!-- Additional Rules Field -->
			<div class="epofw-setting-field epofw-additional-rules-field">
				<div class="epofw-setting-label">
					<label for="epofw_additional_rules">
						<?php 
esc_html_e( 'Additional Rules', 'extra-product-options-for-woocommerce' );
?>
					</label>
					<p class="epofw-field-description"><?php 
esc_html_e( 'Define conditional rules to control when and where this addon appears. Set product, category, or user role-based conditions.', 'extra-product-options-for-woocommerce' );
?></p>
				</div>
				<div class="epofw-setting-input">
					<div class="epofw-additional-rules-section" id="epofw_additional_rules_section">
						<div class="epofw-rule-groups-container">
							<?php 
// Use normalized data structure (handles backward compatibility).
$epofw_rule_data = $epofw_additional_rule_detail_normalized;
$epofw_groups = ( !empty( $epofw_rule_data['groups'] ) && is_array( $epofw_rule_data['groups'] ) ? $epofw_rule_data['groups'] : array() );
$epofw_logic_between_groups = ( isset( $epofw_rule_data['logic_between_groups'] ) ? $epofw_rule_data['logic_between_groups'] : 'and' );
if ( !empty( $epofw_groups ) ) {
    $epofw_group_count = count( $epofw_groups );
    $epofw_group_index = 0;
    foreach ( $epofw_groups as $epofw_group_id => $epofw_group ) {
        $epofw_group_logic = ( isset( $epofw_group['logic'] ) ? $epofw_group['logic'] : 'and' );
        $epofw_conditions = ( isset( $epofw_group['conditions'] ) && is_array( $epofw_group['conditions'] ) ? $epofw_group['conditions'] : array() );
        ++$epofw_group_index;
        ?>
									<div class="epofw-rule-group" data-group-id="<?php 
        echo esc_attr( $epofw_group_id );
        ?>">
										<div class="epofw-group-header">
											<span class="epofw-group-logic-label"><?php 
        esc_html_e( 'Match:', 'extra-product-options-for-woocommerce' );
        ?></span>
											<select name="additional_rule_data[groups][<?php 
        echo esc_attr( $epofw_group_id );
        ?>][logic]" class="epofw-group-logic" title="<?php 
        esc_attr_e( 'Logic for conditions within this group', 'extra-product-options-for-woocommerce' );
        ?>">
												<option value="and" <?php 
        selected( $epofw_group_logic, 'and' );
        ?>><?php 
        esc_html_e( 'All (AND)', 'extra-product-options-for-woocommerce' );
        ?></option>
												<option value="or" <?php 
        selected( $epofw_group_logic, 'or' );
        ?>><?php 
        esc_html_e( 'Any (OR)', 'extra-product-options-for-woocommerce' );
        ?></option>
											</select>
											<button type="button" class="button epofw-remove-group epofw-icon -minus" title="<?php 
        esc_attr_e( 'Remove Group', 'extra-product-options-for-woocommerce' );
        ?>"></button>
										</div>
										<div class="epofw-conditions-container">
											<?php 
        if ( !empty( $epofw_conditions ) ) {
            foreach ( $epofw_conditions as $epofw_condition_id => $epofw_condition_data ) {
                $epofw_condition = ( isset( $epofw_condition_data['condition'] ) ? $epofw_condition_data['condition'] : 'product' );
                $epofw_operator = ( isset( $epofw_condition_data['operator'] ) ? $epofw_condition_data['operator'] : 'is_equal_to' );
                $epofw_value = ( isset( $epofw_condition_data['value'] ) && is_array( $epofw_condition_data['value'] ) ? $epofw_condition_data['value'] : array() );
                $epofw_field_add_cnd_name = epofw_field_additional_conditional_name();
                $epofw_field_add_op_name = epofw_field_additional_conditional_operator( $epofw_condition );
                $epofw_select_field_array = array('product', 'category', 'tag');
                ?>
													<ul class="additional_rule_ul epofw-condition-row" data-group-id="<?php 
                echo esc_attr( $epofw_group_id );
                ?>" data-condition-id="<?php 
                echo esc_attr( $epofw_condition_id );
                ?>">
														<li>
															<select title='conditional_name' name="additional_rule_data[groups][<?php 
                echo esc_attr( $epofw_group_id );
                ?>][conditions][<?php 
                echo esc_attr( $epofw_condition_id );
                ?>][condition]" class="epofw_data_condition epofw_data_condition">
																<?php 
                if ( !empty( $epofw_field_add_cnd_name ) ) {
                    foreach ( $epofw_field_add_cnd_name as $epofw_cnd_key => $epofw_cnd_name ) {
                        ?>
																		<option value="<?php 
                        echo esc_attr( $epofw_cnd_key );
                        ?>" <?php 
                        selected( $epofw_condition, $epofw_cnd_key );
                        ?>><?php 
                        echo esc_html( $epofw_cnd_name );
                        ?></option>
																		<?php 
                    }
                }
                ?>
															</select>
														</li>
														<li>
															<select title='conditional_operator' name="additional_rule_data[groups][<?php 
                echo esc_attr( $epofw_group_id );
                ?>][conditions][<?php 
                echo esc_attr( $epofw_condition_id );
                ?>][operator]" class="epofw_data_operator">
																<?php 
                if ( !empty( $epofw_field_add_op_name ) ) {
                    foreach ( $epofw_field_add_op_name as $epofw_op_key => $epofw_op_name ) {
                        ?>
																		<option value="<?php 
                        echo esc_attr( $epofw_op_key );
                        ?>" <?php 
                        selected( $epofw_operator, $epofw_op_key );
                        ?>><?php 
                        echo esc_html( $epofw_op_name );
                        ?></option>
																		<?php 
                    }
                }
                ?>
															</select>
														</li>
														<li class="epofw_condition_field_data">
															<?php 
                if ( in_array( $epofw_condition, $epofw_select_field_array, true ) ) {
                    ?>
																<select title='conditional_field' id="epofw_condition_data_id_<?php 
                    echo esc_attr( $epofw_group_id );
                    ?>_<?php 
                    echo esc_attr( $epofw_condition_id );
                    ?>" class="epofw_condition_data_class_<?php 
                    echo esc_attr( $epofw_condition );
                    ?> epofw_condition_data_class multiselect2" name="additional_rule_data[groups][<?php 
                    echo esc_attr( $epofw_group_id );
                    ?>][conditions][<?php 
                    echo esc_attr( $epofw_condition_id );
                    ?>][value][]" multiple="multiple">
																	<?php 
                    if ( !empty( $epofw_value ) ) {
                        foreach ( $epofw_value as $epofw_value_id ) {
                            if ( 'product' === $epofw_condition ) {
                                ?>
																				<option value="<?php 
                                echo esc_attr( $epofw_value_id );
                                ?>" selected><?php 
                                echo wp_kses_post( get_the_title( $epofw_value_id ) );
                                ?></option>
																				<?php 
                            } elseif ( 'category' === $epofw_condition ) {
                                $epofw_get_category = get_term_by( 'id', $epofw_value_id, 'product_cat' );
                                if ( $epofw_get_category ) {
                                    ?>
																					<option value="<?php 
                                    echo esc_attr( $epofw_value_id );
                                    ?>" selected><?php 
                                    echo wp_kses_post( $epofw_get_category->name );
                                    ?></option>
																					<?php 
                                }
                            } elseif ( 'tag' === $epofw_condition ) {
                                $epofw_get_tag = get_term_by( 'id', $epofw_value_id, 'product_tag' );
                                if ( $epofw_get_tag ) {
                                    ?>
																					<option value="<?php 
                                    echo esc_attr( $epofw_value_id );
                                    ?>" selected><?php 
                                    echo wp_kses_post( $epofw_get_tag->name );
                                    ?></option>
																					<?php 
                                }
                            }
                        }
                    }
                    ?>
																</select>
																<div class="epofw_all_selection_btn">
																	<button type="button" class="button select_all_ad" data-cnd="<?php 
                    echo esc_attr( $epofw_condition );
                    ?>" data-nonce="<?php 
                    echo esc_attr( wp_create_nonce( 'epofw_select_all_product' ) );
                    ?>">
																		<?php 
                    esc_html_e( 'Select All', 'extra-product-options-for-woocommerce' );
                    ?>
																	</button>
																	<button type="button" class="button clear_all_ad" data-cnd="<?php 
                    echo esc_attr( $epofw_condition );
                    ?>">
																		<?php 
                    esc_html_e( 'Clear All', 'extra-product-options-for-woocommerce' );
                    ?>
																	</button>
																</div>
																<?php 
                }
                ?>
														</li>
														<li class="conditional_action_remove">
															<button type="button" class="button epofw-remove-condition epofw-icon -minus" title="<?php 
                esc_attr_e( 'Remove Condition', 'extra-product-options-for-woocommerce' );
                ?>"></button>
														</li>
													</ul>
													<?php 
            }
        }
        ?>
										</div>
										<div class="epofw-add-condition-action">
											<button type="button" class="button epofw-add-condition" data-group-id="<?php 
        echo esc_attr( $epofw_group_id );
        ?>">
												<?php 
        esc_html_e( 'Add Condition', 'extra-product-options-for-woocommerce' );
        ?>
											</button>
										</div>
									</div>
									<?php 
        // Add logic indicator between groups (but not after the last one).
        if ( $epofw_group_index < $epofw_group_count ) {
            ?>
										<div class="epofw-group-logic-separator" data-logic="<?php 
            echo esc_attr( $epofw_logic_between_groups );
            ?>">
											<span class="epofw-group-logic-text"><?php 
            echo ( 'or' === $epofw_logic_between_groups ? esc_html__( 'OR', 'extra-product-options-for-woocommerce' ) : esc_html__( 'AND', 'extra-product-options-for-woocommerce' ) );
            ?></span>
										</div>
										<?php 
        }
    }
}
?>
						</div>
						<div class="epofw-add-group-action">
							<button type="button" class="button epofw-add-group">
								<?php 
esc_html_e( 'Add Group', 'extra-product-options-for-woocommerce' );
?>
							</button>
							<span class="epofw-groups-logic-label"><?php 
esc_html_e( 'Groups match:', 'extra-product-options-for-woocommerce' );
?></span>
							<select name="additional_rule_data[logic_between_groups]" class="epofw-logic-between-groups" title="<?php 
esc_attr_e( 'Logic between multiple groups', 'extra-product-options-for-woocommerce' );
?>">
								<option value="and" <?php 
selected( $epofw_logic_between_groups, 'and' );
?>><?php 
esc_html_e( 'All (AND)', 'extra-product-options-for-woocommerce' );
?></option>
								<option value="or" <?php 
selected( $epofw_logic_between_groups, 'or' );
?>><?php 
esc_html_e( 'Any (OR)', 'extra-product-options-for-woocommerce' );
?></option>
							</select>
						</div>
					</div>
				</div>
			</div>

			<!-- Display Position Field -->
			<div class="epofw-setting-field">
				<div class="epofw-setting-label">
					<label for="epofw_addon_position"><?php 
esc_html_e( 'Display Position', 'extra-product-options-for-woocommerce' );
?></label>
					<p class="epofw-field-description"><?php 
esc_html_e( 'Choose where this addon appears on the product page - either before or after the Add to Cart button.', 'extra-product-options-for-woocommerce' );
?></p>
				</div>
				<div class="epofw-setting-input">
					<!-- OPTIMIZED: Flat structure (v4.4.0) -->
					<select name="epofw_addon_position" id="epofw_addon_position">
						<option value="before_add_to_cart" <?php 
selected( $epofw_check_epofw_addon_position, 'before_add_to_cart' );
?>><?php 
esc_html_e( 'Before Add to Cart', 'extra-product-options-for-woocommerce' );
?></option>
						<option value="after_add_to_cart" <?php 
selected( $epofw_check_epofw_addon_position, 'after_add_to_cart' );
?>><?php 
esc_html_e( 'After Add to Cart', 'extra-product-options-for-woocommerce' );
?></option>
					</select>
				</div>
			</div>
			<?php 
/**
 * Hook to add extra addon configuration fields.
 *
 * @since 4.4.6
 *
 * @param array  $epofw_get_data Addon data array.
 * @param string $method_id      Method ID for the current addon.
 */
do_action( 'epofw_addon_configuration_fields', $epofw_get_data, $epofw_get_post_id );
?>
		</div>
	</div>

	<!-- Box 2: Addon Builder -->
	<div class="epofw-builder-box">
		<div class="epofw-box-header">
			<h3><?php 
esc_html_e( 'Addon Builder', 'extra-product-options-for-woocommerce' );
?></h3>
			<p class="epofw-box-description"><?php 
esc_html_e( 'Build your addon by adding sections and form elements. Create a structured layout with various field types to collect customer information.', 'extra-product-options-for-woocommerce' );
?></p>
		</div>
		<div class="epofw-box-content">
			<!-- Action Bar -->
			<div class="epofw-builder-action-bar">
				<div class="epofw-action-left">
					<button type="button" class="epofw-btn epofw-btn-primary epofw-add-element">
						<i class="dashicons dashicons-plus"></i>
						<?php 
esc_html_e( 'Add element', 'extra-product-options-for-woocommerce' );
?>
					</button>
					<button type="button" class="epofw-btn epofw-btn-secondary epofw-add-section">
						<i class="dashicons dashicons-layout"></i>
						<?php 
esc_html_e( 'Add section', 'extra-product-options-for-woocommerce' );
?>
					</button>
				</div>
				</div>

			<!-- Form Builder Canvas -->
			<div class="epofw-builder-canvas">
				<?php 
wp_nonce_field( 'epofw_save_addon', 'epofw_save_addon_nonce' );
?>
				<input type="hidden" name="epofw_addon_action" value="save_addon">
				<input type="hidden" name="addon_id" value="<?php 
echo esc_attr( $epofw_get_post_id );
?>">

				<div class="epofw-sections-container" id="sections-container">
					<?php 
if ( !empty( $epofw_check_general_data ) ) {
    foreach ( $epofw_check_general_data as $epofw_section_id => $epofw_section ) {
        // translators: %d is the section number.
        $epofw_section_title = ( !empty( $epofw_section['section_title'] ) ? $epofw_section['section_title'] : sprintf( __( 'Section %d', 'extra-product-options-for-woocommerce' ), $epofw_section_id ) );
        $epofw_section_id = ( !empty( $epofw_section['section_id'] ) ? $epofw_section['section_id'] : wp_rand() );
        // Handle section_status: empty string means disabled, 'on' means enabled.
        // Use isset() to check if key exists, then check value explicitly (empty string is valid for disabled).
        $epofw_section_status = ( isset( $epofw_section['section_status'] ) ? $epofw_section['section_status'] : 'on' );
        $epofw_section_order = ( !empty( $epofw_section['section_order'] ) ? $epofw_section['section_order'] : 1 );
        $epofw_section_settings = ( !empty( $epofw_section['section_settings'] ) ? $epofw_section['section_settings'] : array() );
        ?>
							<div class="epofw-section" data-section-id="<?php 
        echo esc_attr( $epofw_section_id );
        ?>">
								<div class="epofw-section-header">
									<!-- OPTIMIZED: Flat structure for better performance (v4.4.0) -->
									<input type="hidden" name="epofw_section[<?php 
        echo esc_attr( $epofw_section_id );
        ?>][title]" value="<?php 
        echo esc_attr( $epofw_section_title );
        ?>">
									<input type="hidden" name="epofw_section[<?php 
        echo esc_attr( $epofw_section_id );
        ?>][id]" value="<?php 
        echo esc_attr( $epofw_section_id );
        ?>">
									<input type="hidden" name="epofw_section[<?php 
        echo esc_attr( $epofw_section_id );
        ?>][order]" value="<?php 
        echo esc_attr( $epofw_section_order );
        ?>">
									<input type="hidden" name="epofw_section[<?php 
        echo esc_attr( $epofw_section_id );
        ?>][status]" value="<?php 
        echo esc_attr( $epofw_section_status );
        ?>" class="epofw-section-status-value">
									<?php 
        // Add hidden inputs for ALL section settings to ensure they're saved.
        if ( !empty( $epofw_section_settings ) && is_array( $epofw_section_settings ) ) {
            foreach ( $epofw_section_settings as $epofw_setting_key => $epofw_setting_value ) {
                if ( is_array( $epofw_setting_value ) ) {
                    // Handle nested arrays (margin, padding).
                    foreach ( $epofw_setting_value as $epofw_sub_key => $epofw_sub_value ) {
                        ?>
													<input type="hidden" name="epofw_section[<?php 
                        echo esc_attr( $epofw_section_id );
                        ?>][settings][<?php 
                        echo esc_attr( $epofw_setting_key );
                        ?>][<?php 
                        echo esc_attr( $epofw_sub_key );
                        ?>]" value="<?php 
                        echo esc_attr( $epofw_sub_value );
                        ?>">
													<?php 
                    }
                } else {
                    ?>
												<input type="hidden" name="epofw_section[<?php 
                    echo esc_attr( $epofw_section_id );
                    ?>][settings][<?php 
                    echo esc_attr( $epofw_setting_key );
                    ?>]" value="<?php 
                    echo esc_attr( $epofw_setting_value );
                    ?>">
												<?php 
                }
            }
        }
        ?>
									<div class="epofw-section-drag">
										<i class="dashicons dashicons-menu"></i>
									</div>
									<div class="epofw-section-status-toggle" title="<?php 
        echo ( 'on' === $epofw_section_status ? esc_attr__( 'Click to disable', 'extra-product-options-for-woocommerce' ) : esc_attr__( 'Click to enable', 'extra-product-options-for-woocommerce' ) );
        ?>">
										<input type="checkbox" class="epofw-section-status-checkbox" data-section-id="<?php 
        echo esc_attr( $epofw_section_id );
        ?>" <?php 
        checked( $epofw_section_status, 'on' );
        ?>>
										<label class="epofw-toggle-switch"></label>
									</div>
									<div class="epofw-section-edit" data-section-id="<?php 
        echo esc_attr( $epofw_section_id );
        ?>">
										<i class="dashicons dashicons-edit"></i>
									</div>
									<div class="epofw-section-title">
										<span><?php 
        echo esc_html( $epofw_section_title );
        ?></span>
										<i class="dashicons dashicons-arrow-down-alt"></i>
									</div>
									<div class="epofw-section-actions">
										<button type="button" class="epofw-section-delete">
											<i class="dashicons dashicons-no-alt"></i>
										</button>
									</div>
								</div>
								<div class="epofw-section-content">
									<?php 
        // Extract all fields from row_groups structure for grouping.
        $epofw_all_section_fields = array();
        $epofw_row_groups_data = epofw_check_array_key_exists( 'row_groups', $epofw_section );
        if ( !empty( $epofw_row_groups_data ) && is_array( $epofw_row_groups_data ) ) {
            foreach ( $epofw_row_groups_data as $epofw_group_id => $epofw_group_data ) {
                if ( isset( $epofw_group_data['rows'] ) && is_array( $epofw_group_data['rows'] ) ) {
                    foreach ( $epofw_group_data['rows'] as $epofw_row_id => $epofw_row_data ) {
                        if ( isset( $epofw_row_data['fields'] ) && is_array( $epofw_row_data['fields'] ) ) {
                            // Use + operator to preserve numeric keys.
                            $epofw_all_section_fields = $epofw_all_section_fields + $epofw_row_data['fields'];
                        }
                    }
                }
            }
        }
        // Group fields by row_association for proper row-based display.
        $epofw_grouped_fields = epofw_group_fields_by_rows_admin( $epofw_all_section_fields );
        // Merge column_settings and row data from database into grouped fields.
        // Note: $epofw_row_groups_data is already extracted above.
        if ( !empty( $epofw_row_groups_data ) && is_array( $epofw_row_groups_data ) && !empty( $epofw_grouped_fields['row_based'] ) ) {
            foreach ( $epofw_row_groups_data as $epofw_group_id => $epofw_group_data ) {
                if ( isset( $epofw_group_data['rows'] ) && is_array( $epofw_group_data['rows'] ) && isset( $epofw_grouped_fields['row_based'][$epofw_group_id] ) ) {
                    foreach ( $epofw_group_data['rows'] as $epofw_row_id => $epofw_row_data ) {
                        if ( isset( $epofw_grouped_fields['row_based'][$epofw_group_id]['rows'][$epofw_row_id] ) ) {
                            // Merge column_settings if exists.
                            if ( isset( $epofw_row_data['column_settings'] ) ) {
                                $epofw_grouped_fields['row_based'][$epofw_group_id]['rows'][$epofw_row_id]['column_settings'] = $epofw_row_data['column_settings'];
                            }
                            // Merge row_number if exists (in case it's different).
                            if ( isset( $epofw_row_data['row_number'] ) ) {
                                $epofw_grouped_fields['row_based'][$epofw_group_id]['rows'][$epofw_row_id]['row_number'] = $epofw_row_data['row_number'];
                            }
                        }
                    }
                }
            }
        }
        ?>
									<div class="epofw-rows-container">
										<?php 
        // Use row_groups_data directly to preserve columns_groups structure.
        if ( !empty( $epofw_row_groups_data ) && is_array( $epofw_row_groups_data ) ) {
            foreach ( $epofw_row_groups_data as $epofw_group_id => $epofw_group_data ) {
                // v2.3: layout_type is now in columns_groups, not row_groups.
                // Calculate rows count from columns_groups.
                $epofw_rows_count = 0;
                if ( !empty( $epofw_group_data['columns_groups'] ) ) {
                    foreach ( $epofw_group_data['columns_groups'] as $epofw_cg_data ) {
                        $epofw_rows_count += count( $epofw_cg_data['rows'] ?? array() );
                    }
                } elseif ( !empty( $epofw_group_data['rows'] ) ) {
                    $epofw_rows_count = count( $epofw_group_data['rows'] );
                } elseif ( isset( $epofw_grouped_fields['row_based'][$epofw_group_id]['rows_count'] ) ) {
                    $epofw_rows_count = $epofw_grouped_fields['row_based'][$epofw_group_id]['rows_count'];
                }
                $epofw_group_class = ( 1 === (int) $epofw_rows_count ? 'epofw-single-group' : 'epofw-multi-group' );
                ?>
												<div class="epofw-row epofw-row-group <?php 
                echo esc_attr( $epofw_group_class );
                ?>" data-row-id="<?php 
                echo esc_attr( $epofw_group_id );
                ?>" data-group-id="<?php 
                echo esc_attr( $epofw_group_id );
                ?>">
													<div class="epofw-row-header epofw-row-group-header">
														<div class="epofw-row-drag epofw-row-group-drag">
															<i class="dashicons dashicons-menu"></i>
														</div>
														<div class="epofw-row-edit epofw-row-group-edit" data-row-id="<?php 
                echo esc_attr( $epofw_group_id );
                ?>" data-group-id="<?php 
                echo esc_attr( $epofw_group_id );
                ?>" data-section-id="<?php 
                echo esc_attr( $epofw_section_id );
                ?>">
															<i class="dashicons dashicons-edit"></i>
														</div>
														<div class="epofw-row-title epofw-row-group-title">
															<span><?php 
                esc_html_e( 'Row', 'extra-product-options-for-woocommerce' );
                ?></span>
														</div>
														<div class="epofw-row-actions epofw-row-group-actions">
															<button type="button" class="epofw-row-delete-btn epofw-row-group-delete" data-row-id="<?php 
                echo esc_attr( $epofw_group_id );
                ?>" data-group-id="<?php 
                echo esc_attr( $epofw_group_id );
                ?>" title="<?php 
                esc_attr_e( 'Delete Row', 'extra-product-options-for-woocommerce' );
                ?>">
																<i class="dashicons dashicons-no-alt"></i>
															</button>
														</div>
													</div>
													<div class="epofw-row-content epofw-row-group-content">
													<?php 
                // Use columns_groups structure.
                $epofw_columns_groups = array();
                if ( !empty( $epofw_group_data['columns_groups'] ) ) {
                    foreach ( $epofw_group_data['columns_groups'] as $epofw_columns_id => $epofw_columns_group_data ) {
                        $epofw_columns_groups[$epofw_columns_id] = array(
                            'columns_order' => ( isset( $epofw_columns_group_data['columns_order'] ) ? $epofw_columns_group_data['columns_order'] : 0 ),
                            'layout_type'   => ( isset( $epofw_columns_group_data['layout_type'] ) ? $epofw_columns_group_data['layout_type'] : 'single' ),
                            'columns'       => ( isset( $epofw_columns_group_data['rows'] ) ? $epofw_columns_group_data['rows'] : array() ),
                        );
                    }
                }
                // Sort columns groups by order.
                uasort( $epofw_columns_groups, function ( $a, $b ) {
                    return $a['columns_order'] - $b['columns_order'];
                } );
                // Helper function to render a single column.
                $epofw_render_column = function (
                    $epofw_row_id,
                    $epofw_row_data,
                    $epofw_col_num,
                    $epofw_columns_count,
                    $epofw_columns_id,
                    $epofw_columns_order,
                    $epofw_section_id,
                    $epofw_group_id,
                    $epofw_get_action
                ) use($epofw_section) {
                    $epofw_column_class = ( 1 === (int) $epofw_columns_count ? 'epofw-single-column' : 'epofw-multi-column' );
                    ?>
														<div class="epofw-column epofw-row-container <?php 
                    echo esc_attr( $epofw_column_class );
                    ?>" data-row-id="<?php 
                    echo esc_attr( $epofw_row_id );
                    ?>" data-columns-id="<?php 
                    echo esc_attr( $epofw_columns_id );
                    ?>" data-columns-order="<?php 
                    echo esc_attr( $epofw_columns_order );
                    ?>" data-row-number="<?php 
                    echo esc_attr( $epofw_col_num );
                    ?>">
															<!-- Hidden inputs for column association -->
															<input type="hidden" name="epofw_column[<?php 
                    echo esc_attr( $epofw_row_id );
                    ?>][section_id]" value="<?php 
                    echo esc_attr( $epofw_section_id );
                    ?>" class="epofw-column-section-id">
															<input type="hidden" name="epofw_column[<?php 
                    echo esc_attr( $epofw_row_id );
                    ?>][group_id]" value="<?php 
                    echo esc_attr( $epofw_group_id );
                    ?>" class="epofw-column-group-id">
															<input type="hidden" name="epofw_column[<?php 
                    echo esc_attr( $epofw_row_id );
                    ?>][row_id]" value="<?php 
                    echo esc_attr( $epofw_row_id );
                    ?>" class="epofw-column-row-id">
															<input type="hidden" name="epofw_column[<?php 
                    echo esc_attr( $epofw_row_id );
                    ?>][columns_id]" value="<?php 
                    echo esc_attr( $epofw_columns_id );
                    ?>" class="epofw-column-columns-id">
															<input type="hidden" name="epofw_column[<?php 
                    echo esc_attr( $epofw_row_id );
                    ?>][columns_order]" value="<?php 
                    echo esc_attr( $epofw_columns_order );
                    ?>" class="epofw-column-columns-order">
															<input type="hidden" name="epofw_column[<?php 
                    echo esc_attr( $epofw_row_id );
                    ?>][row_number]" value="<?php 
                    echo esc_attr( $epofw_col_num );
                    ?>" class="epofw-column-row-number">
															<div class="epofw-column-header epofw-row-header">
																<span class="epofw-column-drag" title="<?php 
                    esc_attr_e( 'Drag to reorder', 'extra-product-options-for-woocommerce' );
                    ?>">
																	<i class="dashicons dashicons-move"></i>
																</span>
																<div class="epofw-column-title epofw-row-title">
																	<i class="dashicons dashicons-grid-view"></i>
																	<span><?php 
                    esc_html_e( 'Column', 'extra-product-options-for-woocommerce' );
                    ?> <?php 
                    echo esc_html( $epofw_col_num );
                    ?></span>
																</div>
																<div class="epofw-column-actions epofw-row-actions">
																	<button type="button" class="epofw-column-delete epofw-row-delete" title="<?php 
                    esc_attr_e( 'Delete Column', 'extra-product-options-for-woocommerce' );
                    ?>">
																		<i class="dashicons dashicons-no-alt"></i>
																	</button>
																</div>
															</div>
															<div class="epofw-column-content epofw-row-content">
																<div class="epofw-elements-container" data-column-id="<?php 
                    echo esc_attr( $epofw_row_id );
                    ?>" data-row-id="<?php 
                    echo esc_attr( $epofw_row_id );
                    ?>">
																	<?php 
                    // Display fields for this column.
                    $epofw_has_fields = !empty( $epofw_row_data['fields'] );
                    if ( $epofw_has_fields ) {
                        foreach ( $epofw_row_data['fields'] as $epofw_field_id => $epofw_field_data ) {
                            if ( !is_array( $epofw_field_data ) ) {
                                continue;
                            }
                            $epofw_columns_id = ( isset( $epofw_columns_id ) ? $epofw_columns_id : '' );
                            $epofw_columns_order = ( isset( $epofw_columns_order ) ? $epofw_columns_order : 0 );
                            // Include field element template.
                            include EPOFW_PLUGIN_DIR . '/builder/field-element.php';
                        }
                    }
                    // Only hide the Add element button if there are fields.
                    $epofw_add_element_style = ( $epofw_has_fields ? 'display: none;' : '' );
                    ?>
																	<div class="epofw-element-add" style="<?php 
                    echo esc_attr( $epofw_add_element_style );
                    ?>">
																		<button type="button" class="epofw-add-element-btn" data-section-id="<?php 
                    echo esc_attr( $epofw_section_id );
                    ?>" data-row-id="<?php 
                    echo esc_attr( $epofw_row_id );
                    ?>" title="<?php 
                    esc_attr_e( 'Add element', 'extra-product-options-for-woocommerce' );
                    ?>">
																			<i class="dashicons dashicons-plus"></i>
																		</button>
																	</div>
																</div>
															</div>
														</div>
														<?php 
                };
                // Render columns groups.
                foreach ( $epofw_columns_groups as $epofw_columns_id => $epofw_columns_data ) {
                    $epofw_columns_count = count( $epofw_columns_data['columns'] );
                    $epofw_columns_class = ( 1 === (int) $epofw_columns_count ? 'epofw-columns-single' : 'epofw-columns-multi' );
                    $epofw_columns_order = $epofw_columns_data['columns_order'];
                    $epofw_layout_type = ( isset( $epofw_columns_data['layout_type'] ) ? $epofw_columns_data['layout_type'] : 'single' );
                    ?>
														<div class="epofw-columns <?php 
                    echo esc_attr( $epofw_columns_class );
                    ?>" data-columns-id="<?php 
                    echo esc_attr( $epofw_columns_id );
                    ?>" data-columns-order="<?php 
                    echo esc_attr( $epofw_columns_order );
                    ?>" data-columns-count="<?php 
                    echo esc_attr( $epofw_columns_count );
                    ?>" data-layout-type="<?php 
                    echo esc_attr( $epofw_layout_type );
                    ?>">
															<!-- Columns Group Header -->
															<div class="epofw-columns-header">
																<span class="epofw-columns-drag" title="<?php 
                    esc_attr_e( 'Drag to reorder', 'extra-product-options-for-woocommerce' );
                    ?>">
																	<i class="dashicons dashicons-move"></i>
																</span>
																<div class="epofw-columns-title">
																	<i class="dashicons dashicons-columns"></i>
																	<span>
																		<?php 
                    printf( 
                        /* translators: %d: number of columns */
                        esc_html__( 'Columns (%d)', 'extra-product-options-for-woocommerce' ),
                        esc_html( $epofw_columns_count )
                     );
                    ?>
																	</span>
																</div>
																<div class="epofw-columns-actions">
																	<button type="button" class="epofw-columns-delete" data-columns-id="<?php 
                    echo esc_attr( $epofw_columns_id );
                    ?>" title="<?php 
                    esc_attr_e( 'Delete Columns', 'extra-product-options-for-woocommerce' );
                    ?>">
																		<i class="dashicons dashicons-no-alt"></i>
																	</button>
																</div>
															</div>
															<!-- Hidden inputs for columns group data -->
															<input type="hidden" name="epofw_columns_group[<?php 
                    echo esc_attr( $epofw_columns_id );
                    ?>][section_id]" value="<?php 
                    echo esc_attr( $epofw_section_id );
                    ?>">
															<input type="hidden" name="epofw_columns_group[<?php 
                    echo esc_attr( $epofw_columns_id );
                    ?>][group_id]" value="<?php 
                    echo esc_attr( $epofw_group_id );
                    ?>">
															<input type="hidden" name="epofw_columns_group[<?php 
                    echo esc_attr( $epofw_columns_id );
                    ?>][columns_id]" value="<?php 
                    echo esc_attr( $epofw_columns_id );
                    ?>">
															<input type="hidden" name="epofw_columns_group[<?php 
                    echo esc_attr( $epofw_columns_id );
                    ?>][columns_order]" value="<?php 
                    echo esc_attr( $epofw_columns_order );
                    ?>">
															<input type="hidden" name="epofw_columns_group[<?php 
                    echo esc_attr( $epofw_columns_id );
                    ?>][layout_type]" value="<?php 
                    echo esc_attr( $epofw_layout_type );
                    ?>">
															<input type="hidden" name="epofw_columns_group[<?php 
                    echo esc_attr( $epofw_columns_id );
                    ?>][columns_count]" value="<?php 
                    echo esc_attr( $epofw_columns_count );
                    ?>">
															<div class="epofw-columns-content">
														<?php 
                    $epofw_col_num = 1;
                    foreach ( $epofw_columns_data['columns'] as $epofw_row_id => $epofw_row_data ) {
                        $epofw_render_column(
                            $epofw_row_id,
                            $epofw_row_data,
                            $epofw_col_num,
                            $epofw_columns_count,
                            $epofw_columns_id,
                            $epofw_columns_order,
                            $epofw_section_id,
                            $epofw_group_id,
                            $epofw_get_action
                        );
                        ++$epofw_col_num;
                    }
                    ?>
															<!-- Add Column button inside columns container (hidden when 2 columns - maximum allowed) -->
															<div class="epofw-add-column-container"<?php 
                    echo ( $epofw_columns_count >= 2 ? ' style="display: none;"' : '' );
                    ?>>
																<button type="button" class="epofw-add-column-btn" data-columns-id="<?php 
                    echo esc_attr( $epofw_columns_id );
                    ?>" data-row-id="<?php 
                    echo esc_attr( $epofw_group_id );
                    ?>" data-section-id="<?php 
                    echo esc_attr( $epofw_section_id );
                    ?>" title="<?php 
                    esc_attr_e( 'Add Column', 'extra-product-options-for-woocommerce' );
                    ?>">
																	<i class="dashicons dashicons-plus-alt2"></i>
																</button>
															</div>
															</div><!-- End epofw-columns-content -->
														</div><!-- End epofw-columns -->
														<?php 
                }
                // If no columns exist yet, show empty state with Add Columns button only.
                if ( empty( $ungrouped_columns ) && empty( $epofw_columns_groups ) ) {
                    ?>
														<div class="epofw-columns-empty-state">
															<p><?php 
                    esc_html_e( 'No columns yet. Click "Add Columns" below to add columns.', 'extra-product-options-for-woocommerce' );
                    ?></p>
														</div>
														<?php 
                }
                ?>
													<!-- Add Columns Button at the bottom of row -->
													<div class="epofw-add-columns-container">
														<button type="button" class="epofw-add-columns-btn" data-row-id="<?php 
                echo esc_attr( $epofw_group_id );
                ?>" data-section-id="<?php 
                echo esc_attr( $epofw_section_id );
                ?>" title="<?php 
                esc_attr_e( 'Add Columns', 'extra-product-options-for-woocommerce' );
                ?>">
															<i class="dashicons dashicons-plus-alt2"></i>
															<span><?php 
                esc_html_e( 'Add Columns', 'extra-product-options-for-woocommerce' );
                ?></span>
														</button>
													</div>
													</div> <!-- End epofw-row-content -->
												</div> <!-- End epofw-row-group -->

												<!-- Row Settings Modal for this specific row group -->
												<div class="epofw-section-modal" id="row-settings-modal-<?php 
                echo esc_attr( $epofw_group_id );
                ?>" style="display: none;">
													<div class="epofw-modal-overlay"></div>
													<div class="epofw-modal-content">
														<div class="epofw-modal-header">
															<h3><?php 
                esc_html_e( 'Row Settings', 'extra-product-options-for-woocommerce' );
                ?></h3>
															<button type="button" class="epofw-modal-close">&times;</button>
														</div>
														<div class="epofw-modal-body">
															<div class="epofw-modal-content-wrapper">
																<?php 
                // Get row group settings for this specific group.
                // Check row_groups structure first: epofw_data[general][section_id][row_groups][group_id][row_group_settings].
                $epofw_row_groups_data = epofw_check_array_key_exists( 'row_groups', $epofw_section );
                $epofw_row_group_settings = array();
                if ( !empty( $epofw_row_groups_data ) && isset( $epofw_row_groups_data[$epofw_group_id] ) ) {
                    $epofw_row_group_settings = epofw_check_array_key_exists( 'row_group_settings', $epofw_row_groups_data[$epofw_group_id] );
                }
                // Fallback to section-level row_group_settings (for backward compatibility with old data).
                if ( empty( $epofw_row_group_settings ) ) {
                    $epofw_row_group_settings = epofw_check_array_key_exists( 'row_group_settings', $epofw_section_settings );
                }
                if ( empty( $epofw_row_group_settings ) ) {
                    $epofw_row_group_settings = array();
                }
                // Include row form with group-specific data.
                if ( file_exists( EPOFW_PLUGIN_DIR . '/builder/row-form.php' ) ) {
                    include EPOFW_PLUGIN_DIR . '/builder/row-form.php';
                }
                ?>
															</div>
														</div>
														<div class="epofw-modal-footer">
															<button type="button" class="epofw-btn epofw-btn-secondary epofw-modal-cancel"><?php 
                esc_html_e( 'Cancel', 'extra-product-options-for-woocommerce' );
                ?></button>
															<button type="button" class="epofw-btn epofw-btn-primary epofw-save-row" data-group-id="<?php 
                echo esc_attr( $epofw_group_id );
                ?>" data-section-id="<?php 
                echo esc_attr( $epofw_section_id );
                ?>"><?php 
                esc_html_e( 'Done', 'extra-product-options-for-woocommerce' );
                ?></button>
														</div>
													</div>
												</div>

												<!-- Column Settings Modals for each column in this row group -->
												<?php 
                // v2.3: Iterate through columns_groups structure instead of rows.
                $epofw_all_columns_for_modals = array();
                if ( !empty( $epofw_group_data['columns_groups'] ) ) {
                    // New structure: get rows from columns_groups.
                    foreach ( $epofw_group_data['columns_groups'] as $epofw_columns_id => $epofw_columns_group_data ) {
                        if ( !empty( $epofw_columns_group_data['rows'] ) ) {
                            // Add columns_id and columns_order to each row for modal use.
                            foreach ( $epofw_columns_group_data['rows'] as $epofw_row_id => $epofw_row_data ) {
                                $epofw_row_data['columns_id'] = $epofw_columns_id;
                                $epofw_row_data['columns_order'] = ( isset( $epofw_columns_group_data['columns_order'] ) ? $epofw_columns_group_data['columns_order'] : 0 );
                                $epofw_all_columns_for_modals[$epofw_row_id] = $epofw_row_data;
                            }
                        }
                    }
                }
                foreach ( $epofw_all_columns_for_modals as $epofw_row_id => $epofw_row_data ) {
                    // Get column settings for this specific column.
                    $epofw_column_settings = epofw_check_array_key_exists( 'column_settings', $epofw_row_data );
                    if ( empty( $epofw_column_settings ) || !is_array( $epofw_column_settings ) ) {
                        $epofw_column_settings = array();
                    }
                    $epofw_columns_id = ( isset( $epofw_row_data['columns_id'] ) ? $epofw_row_data['columns_id'] : '' );
                    $epofw_columns_order = ( isset( $epofw_row_data['columns_order'] ) ? absint( $epofw_row_data['columns_order'] ) : 0 );
                    ?>
													<div class="epofw-section-modal" id="column-settings-modal-<?php 
                    echo esc_attr( $epofw_row_id );
                    ?>" style="display: none;">
														<div class="epofw-modal-overlay"></div>
														<div class="epofw-modal-content">
															<div class="epofw-modal-header">
																<h3><?php 
                    esc_html_e( 'Column Settings', 'extra-product-options-for-woocommerce' );
                    ?></h3>
																<button type="button" class="epofw-modal-close">&times;</button>
															</div>
															<div class="epofw-modal-body">
																<div class="epofw-modal-content-wrapper">
																	<?php 
                    // Include column form with column-specific data.
                    if ( file_exists( EPOFW_PLUGIN_DIR . '/builder/column-form.php' ) ) {
                        include EPOFW_PLUGIN_DIR . '/builder/column-form.php';
                    }
                    ?>
																</div>
															</div>
															<div class="epofw-modal-footer">
																<button type="button" class="epofw-btn epofw-btn-secondary epofw-modal-cancel"><?php 
                    esc_html_e( 'Cancel', 'extra-product-options-for-woocommerce' );
                    ?></button>
																<button type="button" class="epofw-btn epofw-btn-primary epofw-save-column" data-section-id="<?php 
                    echo esc_attr( $epofw_section_id );
                    ?>" data-group-id="<?php 
                    echo esc_attr( $epofw_group_id );
                    ?>" data-row-id="<?php 
                    echo esc_attr( $epofw_row_id );
                    ?>"><?php 
                    esc_html_e( 'Done', 'extra-product-options-for-woocommerce' );
                    ?></button>
															</div>
														</div>
													</div>
													<?php 
                }
                ?>

												<?php 
            }
        }
        // Also render row groups that have columns_groups but no fields yet (empty row groups from database).
        if ( !empty( $epofw_row_groups_data ) && is_array( $epofw_row_groups_data ) ) {
            foreach ( $epofw_row_groups_data as $epofw_group_id => $epofw_group_data ) {
                // Skip if already rendered (has fields in grouped_fields).
                if ( isset( $epofw_grouped_fields['row_based'][$epofw_group_id] ) ) {
                    continue;
                }
                // Skip if already rendered above (has columns_groups with rows).
                if ( !empty( $epofw_group_data['columns_groups'] ) ) {
                    continue;
                    // Already rendered in the first loop above.
                }
                // Render empty row group with rows but no columns_groups.
                if ( isset( $epofw_group_data['rows'] ) && is_array( $epofw_group_data['rows'] ) && !empty( $epofw_group_data['rows'] ) ) {
                    $epofw_rows_count = count( $epofw_group_data['rows'] );
                    $epofw_group_class = ( 1 === (int) $epofw_rows_count ? 'epofw-single-group' : 'epofw-multi-group' );
                    ?>
													<div class="epofw-row-group <?php 
                    echo esc_attr( $epofw_group_class );
                    ?>" data-group-id="<?php 
                    echo esc_attr( $epofw_group_id );
                    ?>" data-rows-count="<?php 
                    echo esc_attr( $epofw_rows_count );
                    ?>">
														<div class="epofw-row-group-header">
															<div class="epofw-row-group-drag">
																<i class="dashicons dashicons-menu"></i>
															</div>
															<div class="epofw-row-group-edit" data-group-id="<?php 
                    echo esc_attr( $epofw_group_id );
                    ?>" data-section-id="<?php 
                    echo esc_attr( $epofw_section_id );
                    ?>">
																<i class="dashicons dashicons-edit"></i>
															</div>
															<div class="epofw-row-group-title">
																<span><?php 
                    esc_html_e( 'Row', 'extra-product-options-for-woocommerce' );
                    ?></span>
															</div>
															<div class="epofw-row-group-actions">
																<button type="button" class="epofw-row-group-delete" data-group-id="<?php 
                    echo esc_attr( $epofw_group_id );
                    ?>" title="<?php 
                    esc_attr_e( 'Delete Row', 'extra-product-options-for-woocommerce' );
                    ?>">
																	<i class="dashicons dashicons-no-alt"></i>
																</button>
															</div>
														</div>
														<div class="epofw-row-group-content">
														<?php 
                    $epofw_row_number = 1;
                    foreach ( $epofw_group_data['rows'] as $epofw_row_id => $epofw_row_data ) {
                        $epofw_row_class = ( 1 === (int) $epofw_rows_count ? 'epofw-single-row' : 'epofw-multi-row' );
                        $epofw_current_row_number = ( isset( $epofw_row_data['row_number'] ) ? $epofw_row_data['row_number'] : $epofw_row_number );
                        ?>
															<div class="epofw-row-container <?php 
                        echo esc_attr( $epofw_row_class );
                        ?>" data-row-id="<?php 
                        echo esc_attr( $epofw_row_id );
                        ?>">
																<div class="epofw-row-header">
																	<div class="epofw-row-title">
																		<i class="dashicons dashicons-grid-view"></i>
																		<span><?php 
                        esc_html_e( 'Column', 'extra-product-options-for-woocommerce' );
                        ?> <?php 
                        echo esc_html( $epofw_current_row_number );
                        ?></span>
																	</div>
																	<div class="epofw-row-actions">
																		<button type="button" class="epofw-row-delete" title="<?php 
                        esc_attr_e( 'Delete Column', 'extra-product-options-for-woocommerce' );
                        ?>">
																			<i class="dashicons dashicons-no-alt"></i>
																		</button>
																	</div>
																</div>
																<div class="epofw-row-content">
																	<div class="epofw-elements-container" data-row-id="<?php 
                        echo esc_attr( $epofw_row_id );
                        ?>">
																		<div class="epofw-element-add">
																			<button type="button" class="epofw-add-element-btn" data-section-id="<?php 
                        echo esc_attr( $epofw_section_id );
                        ?>" data-row-id="<?php 
                        echo esc_attr( $epofw_row_id );
                        ?>" title="<?php 
                        esc_attr_e( 'Add element to this column', 'extra-product-options-for-woocommerce' );
                        ?>">
																				<i class="dashicons dashicons-plus"></i>
																			</button>
																		</div>
																	</div>
																</div>
															</div>
															<?php 
                        ++$epofw_row_number;
                    }
                    ?>
														</div> <!-- End epofw-row-group-content -->
													</div> <!-- End epofw-row-group -->

													<!-- Row Settings Modal for this specific row group -->
													<div class="epofw-section-modal" id="row-settings-modal-<?php 
                    echo esc_attr( $epofw_group_id );
                    ?>" style="display: none;">
														<div class="epofw-modal-overlay"></div>
														<div class="epofw-modal-content">
															<div class="epofw-modal-header">
																<h3><?php 
                    esc_html_e( 'Row Settings', 'extra-product-options-for-woocommerce' );
                    ?></h3>
																<button type="button" class="epofw-modal-close">&times;</button>
															</div>
															<div class="epofw-modal-body">
																<div class="epofw-modal-content-wrapper">
																	<?php 
                    // Get row group settings for this specific group.
                    $epofw_row_group_settings = array();
                    if ( isset( $epofw_group_data['row_group_settings'] ) ) {
                        $epofw_row_group_settings = $epofw_group_data['row_group_settings'];
                    }
                    if ( empty( $epofw_row_group_settings ) ) {
                        $epofw_row_group_settings = array();
                    }
                    // Include row form with group-specific data.
                    if ( file_exists( EPOFW_PLUGIN_DIR . '/builder/row-form.php' ) ) {
                        // Set prefixed variables for row-form.php template.
                        include EPOFW_PLUGIN_DIR . '/builder/row-form.php';
                    }
                    ?>
																</div>
															</div>
															<div class="epofw-modal-footer">
																<button type="button" class="epofw-btn epofw-btn-secondary epofw-modal-cancel"><?php 
                    esc_html_e( 'Cancel', 'extra-product-options-for-woocommerce' );
                    ?></button>
																<button type="button" class="epofw-btn epofw-btn-primary epofw-save-row" data-group-id="<?php 
                    echo esc_attr( $epofw_group_id );
                    ?>" data-section-id="<?php 
                    echo esc_attr( $epofw_section_id );
                    ?>"><?php 
                    esc_html_e( 'Done', 'extra-product-options-for-woocommerce' );
                    ?></button>
															</div>
														</div>
													</div>

													<!-- Column Settings Modals for each column in this row group -->
													<?php 
                    foreach ( $epofw_group_data['rows'] as $epofw_row_id => $epofw_row_data ) {
                        // Get column settings for this specific column.
                        $epofw_column_settings = ( isset( $epofw_row_data['column_settings'] ) ? $epofw_row_data['column_settings'] : array() );
                        if ( empty( $epofw_column_settings ) || !is_array( $epofw_column_settings ) ) {
                            $epofw_column_settings = array();
                        }
                        $epofw_columns_id = ( isset( $epofw_row_data['columns_id'] ) ? $epofw_row_data['columns_id'] : '' );
                        $epofw_columns_order = ( isset( $epofw_row_data['columns_order'] ) ? absint( $epofw_row_data['columns_order'] ) : 0 );
                        ?>
														<div class="epofw-section-modal" id="column-settings-modal-<?php 
                        echo esc_attr( $epofw_row_id );
                        ?>" style="display: none;">
															<div class="epofw-modal-overlay"></div>
															<div class="epofw-modal-content">
																<div class="epofw-modal-header">
																	<h3><?php 
                        esc_html_e( 'Column Settings', 'extra-product-options-for-woocommerce' );
                        ?></h3>
																	<button type="button" class="epofw-modal-close">&times;</button>
																</div>
																<div class="epofw-modal-body">
																	<div class="epofw-modal-content-wrapper">
																		<?php 
                        // Include column form with column-specific data.
                        if ( file_exists( EPOFW_PLUGIN_DIR . '/builder/column-form.php' ) ) {
                            include EPOFW_PLUGIN_DIR . '/builder/column-form.php';
                        }
                        ?>
																	</div>
																</div>
																<div class="epofw-modal-footer">
																	<button type="button" class="epofw-btn epofw-btn-secondary epofw-modal-cancel"><?php 
                        esc_html_e( 'Cancel', 'extra-product-options-for-woocommerce' );
                        ?></button>
																	<button type="button" class="epofw-btn epofw-btn-primary epofw-save-column" data-section-id="<?php 
                        echo esc_attr( $epofw_section_id );
                        ?>" data-group-id="<?php 
                        echo esc_attr( $epofw_group_id );
                        ?>" data-row-id="<?php 
                        echo esc_attr( $epofw_row_id );
                        ?>"><?php 
                        esc_html_e( 'Done', 'extra-product-options-for-woocommerce' );
                        ?></button>
																</div>
															</div>
														</div>
														<?php 
                    }
                    ?>

													<?php 
                }
            }
        }
        ?>
									</div>

									<!-- Section-specific Add Element button - Always at the bottom -->
									<div class="epofw-section-modal" id="section-settings-modal-<?php 
        echo esc_attr( $epofw_section_id );
        ?>" style="display: none;">
										<div class="epofw-modal-overlay"></div>
										<div class="epofw-modal-content">
											<div class="epofw-modal-header">
												<h3>
													<?php 
        printf( 
            /* translators: %s: Field type */
            esc_html__( '%s Settings', 'extra-product-options-for-woocommerce' ),
            esc_html( ucfirst( $epofw_section_title ) )
         );
        ?>
												</h3>
												<button type="button" class="epofw-modal-close">
													&times;
												</button>
											</div>
											<div class="epofw-modal-body">
												<div class="epofw-modal-content-wrapper">
														<?php 
        ob_start();
        if ( file_exists( EPOFW_PLUGIN_DIR . '/builder/section-form.php' ) ) {
            // The form file will have access to the current loop variables:
            // $field_data, $epofw_section, $epofw_get_post_id, $field_id.
            include EPOFW_PLUGIN_DIR . '/builder/section-form.php';
        }
        $epofw_content = ob_get_clean();
        echo $epofw_content;
        // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
        ?>
												</div>
											</div>
											<div class="epofw-modal-footer">
												<button type="button" class="epofw-btn epofw-btn-secondary epofw-modal-cancel"><?php 
        esc_html_e( 'Cancel', 'extra-product-options-for-woocommerce' );
        ?></button>
												<button type="button" class="epofw-btn epofw-btn-primary epofw-save-section"><?php 
        esc_html_e( 'Done', 'extra-product-options-for-woocommerce' );
        ?></button>
											</div>
										</div>
									</div>

									<div class="epofw-section-actions">
										<button type="button" class="epofw-add-row-btn" data-section-id="<?php 
        echo esc_attr( $epofw_section_id );
        ?>" title="<?php 
        esc_attr_e( 'Add Column', 'extra-product-options-for-woocommerce' );
        ?>">
											<i class="dashicons dashicons-grid-view"></i>
										</button>
									</div>
								</div>
							</div>
								<?php 
    }
} else {
    ?>
						<!-- Empty State -->
						<div class="epofw-empty-builder">
							<div class="epofw-empty-icon">
								<i class="dashicons dashicons-admin-plugins"></i>
							</div>
							<h3><?php 
    esc_html_e( 'Start Building Your Addon', 'extra-product-options-for-woocommerce' );
    ?></h3>
							<p><?php 
    esc_html_e( 'Add sections and elements to create your product addon', 'extra-product-options-for-woocommerce' );
    ?></p>
							<div class="epofw-empty-actions">
								<button type="button" class="epofw-btn epofw-btn-primary epofw-add-first-section">
									<i class="dashicons dashicons-plus"></i>
									<?php 
    esc_html_e( 'Add First Section', 'extra-product-options-for-woocommerce' );
    ?>
								</button>
								<button type="button" class="epofw-btn epofw-btn-secondary epofw-add-first-element">
									<i class="dashicons dashicons-plus"></i>
									<?php 
    esc_html_e( 'Add First Element', 'extra-product-options-for-woocommerce' );
    ?>
								</button>
							</div>
						</div>
					<?php 
}
?>
				</div>

				<!-- Add Section/Element Area -->
				<div class="epofw-add-area">
					<button type="button" class="epofw-add-section-btn">
						<i class="dashicons dashicons-plus"></i>
					</button>
				</div>

				<!-- Bottom Action Bar -->
				<div class="epofw-builder-footer-bar">
					<div class="epofw-footer-bar-content">
						<div class="epofw-footer-bar-info">
							<i class="dashicons dashicons-info-outline"></i>
							<span><?php 
esc_html_e( 'Remember to save your changes', 'extra-product-options-for-woocommerce' );
?></span>
						</div>
						<input type="submit" name="epofw_save" class="epofw-btn epofw-btn-primary epofw-btn-lg epofw-save-addon" value="<?php 
esc_html_e( 'Save Changes', 'extra-product-options-for-woocommerce' );
?>">
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- Element Selector Modal -->
<div class="epofw-element-selector-modal">
	<div class="epofw-modal-overlay"></div>
	<div class="epofw-modal-content">
		<div class="epofw-modal-header">
			<h3>
				<i class="dashicons dashicons-plus"></i> <?php 
esc_html_e( 'Select Element Type', 'extra-product-options-for-woocommerce' );
?>
			</h3>
			<button type="button" class="epofw-modal-close">&times;</button>
		</div>
		<div class="epofw-modal-body">
			<div class="epofw-field-type-grid">
				<?php 
$epofw_field_types = epofw_get_field_type_with_icon_and_description();
foreach ( $epofw_field_types as $epofw_field_type => $epofw_field_type_data ) {
    $epofw_icon_class = $epofw_field_type_data['icon'];
    $epofw_type_name = $epofw_field_type_data['name'];
    $epofw_description = $epofw_field_type_data['description'];
    $epofw_is_premium = ( isset( $epofw_field_type_data['is_premium'] ) ? $epofw_field_type_data['is_premium'] : false );
    $epofw_card_class = 'epofw-field-type-card';
    $epofw_premium_activate = epofw_fs()->can_use_premium_code();
    if ( $epofw_is_premium && !$epofw_premium_activate ) {
        $epofw_card_class .= ' epofw-premium-field';
    }
    ?>
					<div class="<?php 
    echo esc_attr( $epofw_card_class );
    ?>" data-type="<?php 
    echo esc_attr( $epofw_field_type );
    ?>">
						<?php 
    if ( $epofw_is_premium && !$epofw_premium_activate ) {
        ?>
							<span class="epofw-pro-badge"><?php 
        esc_html_e( 'Pro', 'extra-product-options-for-woocommerce' );
        ?></span>
						<?php 
    }
    ?>
						<div class="epofw-field-type-icon">
							<i class="dashicons <?php 
    echo esc_attr( $epofw_icon_class );
    ?>"></i>
						</div>
						<div class="epofw-field-type-content">
							<h5><?php 
    echo esc_html( $epofw_type_name );
    ?></h5>
							<p><?php 
    echo esc_html( $epofw_description );
    ?></p>
						</div>
					</div>
				<?php 
}
?>
			</div>
		</div>
	</div>
</div>

<!-- Element Selector Output Template In Section -->
<script type="text/html" id="tmpl-epofw-element-selector-output">
	<div class="epofw-element" data-element-id="" data-element-type="" data-action="<?php 
echo esc_attr( $epofw_get_action );
?>">
		<!-- Hidden inputs for field association - populated by JavaScript when element is added -->
		<input type="hidden" name="" value="" class="epofw-field-section-id" data-input-type="section_id">
		<input type="hidden" name="" value="" class="epofw-field-row-id" data-input-type="row_id">
		<input type="hidden" name="" value="" class="epofw-field-group-id" data-input-type="group_id">
		<input type="hidden" name="" value="" class="epofw-field-columns-id" data-input-type="columns_id">
		<input type="hidden" name="" value="" class="epofw-field-columns-order" data-input-type="columns_order">
		<input type="hidden" name="" value="" class="epofw-field-layout" data-input-type="layout">
		<input type="hidden" name="" value="" class="epofw-field-columns" data-input-type="columns">
		<input type="hidden" name="" value="on" class="epofw-field-status-value" data-input-type="field_status">
		<div class="epofw-element-drag">
			<i class="dashicons dashicons-menu"></i>
		</div>
		<div class="epofw-element-content">
			<div class="epofw-field-status-toggle" title="<?php 
esc_attr_e( 'Click to disable', 'extra-product-options-for-woocommerce' );
?>">
				<input type="checkbox" class="epofw-field-status-checkbox" data-field-id="" checked>
				<label class="epofw-toggle-switch"></label>
			</div>
			<div class="epofw-element-icon">
				<i class="dashicons dashicons-admin-generic"></i>
			</div>
			<div class="epofw-element-info">
				<div class="epofw-element-title">Custom Field</div>
				<div class="epofw-element-subtitle">type</div>
			</div>
			<div class="epofw-element-actions">
				<button type="button" class="epofw-edit-element" data-element-id="">
					<i class="dashicons dashicons-edit"></i>
				</button>
				<button type="button" class="epofw-element-delete">
					<i class="dashicons dashicons-no-alt"></i>
				</button>
			</div>
		</div>
		<!-- Add Element button removed from template - using section-specific buttons instead -->
	</div>
</script>

<!-- Element Settings Modal while edit after add element -->
<script type="text/html" id="tmpl-epofw-element-settings-modal">
	<div class="epofw-element-modal" style="display: none;">
		<div class="epofw-modal-overlay"></div>
		<div class="epofw-modal-content">
			<div class="epofw-modal-header">
				<h3><?php 
esc_html_e( 'Element Settings', 'extra-product-options-for-woocommerce' );
?></h3>
				<button type="button" class="epofw-modal-close">&times;</button>
			</div>
			<div class="epofw-modal-body">
				<div class="epofw-modal-content-wrapper">

				</div>
			</div>
			<div class="epofw-modal-footer">
				<button type="button" class="epofw-btn epofw-btn-secondary epofw-modal-cancel"><?php 
esc_html_e( 'Cancel', 'extra-product-options-for-woocommerce' );
?></button>
				<button type="button" class="epofw-btn epofw-btn-primary epofw-save-element"><?php 
esc_html_e( 'Done', 'extra-product-options-for-woocommerce' );
?></button>
			</div>
		</div>
	</div>
</script>

<!-- Section HTML -->
<script type="text/html" id="tmpl-epofw-section-html">
	<?php 
$epofw_section_id = esc_attr( $epofw_get_post_id . '_' . strtotime( 'now' ) );
?>
	<div class="epofw-section" data-section-id="<?php 
echo esc_attr( $epofw_section_id );
?>">
		<div class="epofw-section-header">
		<!-- OPTIMIZED: Flat structure for better performance (v4.4.0) -->
		<input type="hidden" name="epofw_section[<?php 
echo esc_attr( $epofw_section_id );
?>][title]" value="<?php 
echo esc_attr( 'Section ' . $epofw_section_id );
?>">
		<input type="hidden" name="epofw_section[<?php 
echo esc_attr( $epofw_section_id );
?>][id]" value="<?php 
echo esc_attr( $epofw_section_id );
?>">
		<input type="hidden" name="epofw_section[<?php 
echo esc_attr( $epofw_section_id );
?>][status]" value="on">
		<input type="hidden" name="epofw_section[<?php 
echo esc_attr( $epofw_section_id );
?>][order]" value="1">
		<!-- Section settings kept nested for now (can be optimized to JSON later) -->
		<input type="hidden" name="epofw_section[<?php 
echo esc_attr( $epofw_section_id );
?>][settings][collapsible]" value="">
		<input type="hidden" name="epofw_section[<?php 
echo esc_attr( $epofw_section_id );
?>][settings][collapsed]" value="">
		<input type="hidden" name="epofw_section[<?php 
echo esc_attr( $epofw_section_id );
?>][settings][section_class]" value="">
		<input type="hidden" name="epofw_section[<?php 
echo esc_attr( $epofw_section_id );
?>][settings][section_description]" value="">
		<div class="epofw-section-drag">
			<i class="dashicons dashicons-menu"></i>
		</div>
		<div class="epofw-section-edit" data-section-id="<?php 
echo esc_attr( $epofw_section_id );
?>">
			<i class="dashicons dashicons-edit"></i>
		</div>
		<div class="epofw-section-title">
			<span><?php 
esc_html_e( 'Section', 'extra-product-options-for-woocommerce' );
echo esc_html( $epofw_section_id );
?></span>
			<i class="dashicons dashicons-arrow-down-alt"></i>
		</div>
		<div class="epofw-section-actions">
			<button type="button" class="epofw-section-delete">
				<i class="dashicons dashicons-no-alt"></i>
			</button>
		</div>
		</div>
		<div class="epofw-section-content">
			<div class="epofw-rows-container">
				<div class="epofw-row-group epofw-single-group" data-group-id="group_<?php 
echo esc_attr( $epofw_section_id );
?>" data-rows-count="1">
					<div class="epofw-row-group-header">
						<div class="epofw-row-group-drag">
							<i class="dashicons dashicons-menu"></i>
						</div>
					<div class="epofw-row-group-edit" data-group-id="group_<?php 
echo esc_attr( $epofw_section_id );
?>" data-section-id="<?php 
echo esc_attr( $epofw_section_id );
?>">
						<i class="dashicons dashicons-edit"></i>
					</div>
						<div class="epofw-row-group-title">
							<span><?php 
esc_html_e( 'Row', 'extra-product-options-for-woocommerce' );
?></span>
						</div>
						<div class="epofw-row-group-actions">
							<button type="button" class="epofw-row-group-delete" data-group-id="group_<?php 
echo esc_attr( $epofw_section_id );
?>" title="<?php 
esc_attr_e( 'Delete Row', 'extra-product-options-for-woocommerce' );
?>">
								<i class="dashicons dashicons-no-alt"></i>
							</button>
						</div>
					</div>
					<div class="epofw-row-group-content">
					<?php 
$epofw_default_columns_id = 'columns_' . $epofw_section_id . '_group_' . $epofw_section_id;
?>
					<div class="epofw-columns epofw-columns-single" data-columns-id="<?php 
echo esc_attr( $epofw_default_columns_id );
?>" data-columns-order="0" data-columns-count="1" data-layout-type="single">
						<!-- Columns Group Header -->
						<div class="epofw-columns-header">
							<span class="epofw-columns-drag" title="<?php 
esc_attr_e( 'Drag to reorder', 'extra-product-options-for-woocommerce' );
?>">
								<i class="dashicons dashicons-move"></i>
							</span>
							<div class="epofw-columns-title">
								<i class="dashicons dashicons-columns"></i>
								<span><?php 
esc_html_e( 'Columns (1)', 'extra-product-options-for-woocommerce' );
?></span>
							</div>
							<div class="epofw-columns-actions">
								<button type="button" class="epofw-columns-delete" data-columns-id="<?php 
echo esc_attr( $epofw_default_columns_id );
?>" title="<?php 
esc_attr_e( 'Delete Columns', 'extra-product-options-for-woocommerce' );
?>">
									<i class="dashicons dashicons-no-alt"></i>
								</button>
							</div>
						</div>
						<!-- Hidden inputs for columns group data -->
						<input type="hidden" name="epofw_columns_group[<?php 
echo esc_attr( $epofw_default_columns_id );
?>][section_id]" value="<?php 
echo esc_attr( $epofw_section_id );
?>">
						<input type="hidden" name="epofw_columns_group[<?php 
echo esc_attr( $epofw_default_columns_id );
?>][group_id]" value="group_<?php 
echo esc_attr( $epofw_section_id );
?>">
						<input type="hidden" name="epofw_columns_group[<?php 
echo esc_attr( $epofw_default_columns_id );
?>][columns_id]" value="<?php 
echo esc_attr( $epofw_default_columns_id );
?>">
						<input type="hidden" name="epofw_columns_group[<?php 
echo esc_attr( $epofw_default_columns_id );
?>][columns_order]" value="0">
						<input type="hidden" name="epofw_columns_group[<?php 
echo esc_attr( $epofw_default_columns_id );
?>][layout_type]" value="single">
						<input type="hidden" name="epofw_columns_group[<?php 
echo esc_attr( $epofw_default_columns_id );
?>][columns_count]" value="1">
						<div class="epofw-columns-content">
						<div class="epofw-row-container epofw-single-row epofw-column epofw-single-column" data-row-id="row_<?php 
echo esc_attr( $epofw_section_id );
?>_1" data-columns-id="<?php 
echo esc_attr( $epofw_default_columns_id );
?>" data-columns-order="0" data-row-number="1">
						<!-- Hidden inputs for column association -->
						<input type="hidden" name="epofw_column[row_<?php 
echo esc_attr( $epofw_section_id );
?>_1][section_id]" value="<?php 
echo esc_attr( $epofw_section_id );
?>" class="epofw-column-section-id">
						<input type="hidden" name="epofw_column[row_<?php 
echo esc_attr( $epofw_section_id );
?>_1][group_id]" value="group_<?php 
echo esc_attr( $epofw_section_id );
?>" class="epofw-column-group-id">
						<input type="hidden" name="epofw_column[row_<?php 
echo esc_attr( $epofw_section_id );
?>_1][row_id]" value="row_<?php 
echo esc_attr( $epofw_section_id );
?>_1" class="epofw-column-row-id">
						<input type="hidden" name="epofw_column[row_<?php 
echo esc_attr( $epofw_section_id );
?>_1][columns_id]" value="<?php 
echo esc_attr( $epofw_default_columns_id );
?>" class="epofw-column-columns-id">
						<input type="hidden" name="epofw_column[row_<?php 
echo esc_attr( $epofw_section_id );
?>_1][columns_order]" value="0" class="epofw-column-columns-order">
						<input type="hidden" name="epofw_column[row_<?php 
echo esc_attr( $epofw_section_id );
?>_1][row_number]" value="1" class="epofw-column-row-number">
						<div class="epofw-row-header epofw-column-header">
							<span class="epofw-column-drag" title="<?php 
esc_attr_e( 'Drag to reorder', 'extra-product-options-for-woocommerce' );
?>">
								<i class="dashicons dashicons-move"></i>
							</span>
							<div class="epofw-row-title epofw-column-title">
								<i class="dashicons dashicons-grid-view"></i>
								<span><?php 
esc_html_e( 'Column', 'extra-product-options-for-woocommerce' );
?> 1</span>
							</div>
							<div class="epofw-row-actions epofw-column-actions">
								<button type="button" class="epofw-column-delete epofw-row-delete" title="<?php 
esc_attr_e( 'Delete Column', 'extra-product-options-for-woocommerce' );
?>">
									<i class="dashicons dashicons-no-alt"></i>
								</button>
							</div>
						</div>
							<div class="epofw-row-content">
								<div class="epofw-elements-container" data-row-id="row_<?php 
echo esc_attr( $epofw_section_id );
?>_1">
									<div class="epofw-element-add">
										<button type="button" class="epofw-add-element-btn" data-section-id="<?php 
echo esc_attr( $epofw_section_id );
?>" data-row-id="row_<?php 
echo esc_attr( $epofw_section_id );
?>_1" title="<?php 
esc_attr_e( 'Add element to this column', 'extra-product-options-for-woocommerce' );
?>">
											<i class="dashicons dashicons-plus"></i>
										</button>
									</div>
								</div>
							</div>
						</div>
						<!-- Add Column button inside columns container (hidden when 2 columns - maximum allowed, default is 1 column so button shows) -->
						<?php 
$epofw_default_columns_count = 1;
?>
						<div class="epofw-add-column-container"<?php 
echo ( $epofw_default_columns_count >= 2 ? ' style="display: none;"' : '' );
?>>
							<button type="button" class="epofw-add-column-btn" data-columns-id="<?php 
echo esc_attr( $epofw_default_columns_id );
?>" data-row-id="group_<?php 
echo esc_attr( $epofw_section_id );
?>" data-section-id="<?php 
echo esc_attr( $epofw_section_id );
?>" title="<?php 
esc_attr_e( 'Add Column', 'extra-product-options-for-woocommerce' );
?>">
								<i class="dashicons dashicons-plus-alt2"></i>
							</button>
						</div>
						</div><!-- End epofw-columns-content -->
					</div><!-- End epofw-columns -->
					<!-- Add Columns Button at the bottom of row -->
					<div class="epofw-add-columns-container">
						<button type="button" class="epofw-add-columns-btn" data-row-id="group_<?php 
echo esc_attr( $epofw_section_id );
?>" data-section-id="<?php 
echo esc_attr( $epofw_section_id );
?>" title="<?php 
esc_attr_e( 'Add Columns', 'extra-product-options-for-woocommerce' );
?>">
							<i class="dashicons dashicons-plus-alt2"></i>
							<span><?php 
esc_html_e( 'Add Columns', 'extra-product-options-for-woocommerce' );
?></span>
						</button>
					</div>
					</div> <!-- End epofw-row-group-content -->
				</div> <!-- End epofw-row-group -->
			</div>
		</div>
		<div class="epofw-section-actions">
			<button type="button" class="epofw-add-row-btn" data-section-id="<?php 
echo esc_attr( $epofw_section_id );
?>" title="<?php 
esc_attr_e( 'Add Column', 'extra-product-options-for-woocommerce' );
?>">
				<i class="dashicons dashicons-grid-view"></i>
			</button>
		</div>
	</div>
</script>


<script type="text/html" id="tmpl-epofw-section-settings-modal">
	<div class="epofw-section-modal" style="display: none;">
		<div class="epofw-modal-overlay"></div>
		<div class="epofw-modal-content">
			<div class="epofw-modal-header">
				<h3><?php 
esc_html_e( 'Section Settings', 'extra-product-options-for-woocommerce' );
?></h3>
				<button type="button" class="epofw-modal-close">&times;</button>
			</div>
			<div class="epofw-modal-body">
				<div class="epofw-modal-content-wrapper">

				</div>
			</div>
			<div class="epofw-modal-footer">
				<button type="button" class="epofw-btn epofw-btn-secondary epofw-modal-cancel"><?php 
esc_html_e( 'Cancel', 'extra-product-options-for-woocommerce' );
?></button>
				<button type="button" class="epofw-btn epofw-btn-primary epofw-save-section"><?php 
esc_html_e( 'Done', 'extra-product-options-for-woocommerce' );
?></button>
			</div>
		</div>
	</div>
</script>

<!-- Row Selection Modal Template -->
<script type="text/html" id="tmpl-epofw-row-selection-modal">
	<div class="epofw-section-modal epofw-row-selection-modal" style="display: none;">
		<div class="epofw-modal-overlay"></div>
		<div class="epofw-modal-content">
			<div class="epofw-modal-header">
				<h3><?php 
esc_html_e( 'Select Number of Columns', 'extra-product-options-for-woocommerce' );
?></h3>
				<button type="button" class="epofw-modal-close">&times;</button>
			</div>
			<div class="epofw-modal-body">
				<div class="epofw-row-options">
					<div class="epofw-row-option" data-rows="1">
						<div class="epofw-row-preview">
							<div class="epofw-row-visual">
								<div class="epofw-row-box"></div>
							</div>
						</div>
						<span><?php 
esc_html_e( '1 Column (Single)', 'extra-product-options-for-woocommerce' );
?></span>
					</div>

					<div class="epofw-row-option" data-rows="2">
						<div class="epofw-row-preview">
							<div class="epofw-row-visual">
								<div class="epofw-row-box"></div>
								<div class="epofw-row-box"></div>
							</div>
						</div>
						<span><?php 
esc_html_e( '2 Columns', 'extra-product-options-for-woocommerce' );
?></span>
					</div>
				</div>
			</div>
			<div class="epofw-modal-footer">
				<button type="button" class="epofw-btn epofw-btn-secondary epofw-modal-cancel"><?php 
esc_html_e( 'Cancel', 'extra-product-options-for-woocommerce' );
?></button>
				<button type="button" class="epofw-btn epofw-btn-primary epofw-create-rows"><?php 
esc_html_e( 'Create Columns', 'extra-product-options-for-woocommerce' );
?></button>
			</div>
		</div>
	</div>
</script>

<!-- Columns Selection Modal Template (for adding columns container within a row) -->
<script type="text/html" id="tmpl-epofw-columns-selection-modal">
	<div class="epofw-section-modal epofw-columns-selection-modal" style="display: none;">
		<div class="epofw-modal-overlay"></div>
		<div class="epofw-modal-content">
			<div class="epofw-modal-header">
				<h3><?php 
esc_html_e( 'Add Columns', 'extra-product-options-for-woocommerce' );
?></h3>
				<button type="button" class="epofw-modal-close">&times;</button>
			</div>
			<div class="epofw-modal-body">
				<p class="epofw-modal-description"><?php 
esc_html_e( 'Choose how many columns to add in this row:', 'extra-product-options-for-woocommerce' );
?></p>
				<div class="epofw-row-options">
					<div class="epofw-columns-option" data-rows="1">
						<div class="epofw-row-preview">
							<div class="epofw-row-visual">
								<div class="epofw-row-box"></div>
							</div>
						</div>
						<span><?php 
esc_html_e( '1 Column (Single)', 'extra-product-options-for-woocommerce' );
?></span>
					</div>

					<div class="epofw-columns-option" data-rows="2">
						<div class="epofw-row-preview">
							<div class="epofw-row-visual">
								<div class="epofw-row-box"></div>
								<div class="epofw-row-box"></div>
							</div>
						</div>
						<span><?php 
esc_html_e( '2 Columns', 'extra-product-options-for-woocommerce' );
?></span>
					</div>
				</div>
			</div>
			<div class="epofw-modal-footer">
				<button type="button" class="epofw-btn epofw-btn-secondary epofw-modal-cancel"><?php 
esc_html_e( 'Cancel', 'extra-product-options-for-woocommerce' );
?></button>
				<button type="button" class="epofw-btn epofw-btn-primary epofw-create-columns"><?php 
esc_html_e( 'Add Columns', 'extra-product-options-for-woocommerce' );
?></button>
			</div>
		</div>
	</div>
</script>

<!-- Column Template (individual column within a columns container) -->
<script type="text/html" id="tmpl-epofw-column">
	<div class="epofw-column epofw-row-container" data-row-id="{{ data.row_id }}" data-group-id="{{ data.group_id }}" data-columns-id="{{ data.columns_id }}" data-columns-order="{{ data.columns_order }}" data-row-number="{{ data.column_number }}">
		<!-- Hidden inputs for column association -->
		<input type="hidden" name="epofw_column[{{ data.column_id }}][section_id]" value="{{ data.section_id }}" class="epofw-column-section-id">
		<input type="hidden" name="epofw_column[{{ data.column_id }}][group_id]" value="{{ data.group_id }}" class="epofw-column-group-id">
		<input type="hidden" name="epofw_column[{{ data.column_id }}][row_id]" value="{{ data.column_id }}" class="epofw-column-row-id">
		<input type="hidden" name="epofw_column[{{ data.column_id }}][columns_id]" value="{{ data.columns_id }}" class="epofw-column-columns-id">
		<input type="hidden" name="epofw_column[{{ data.column_id }}][columns_order]" value="{{ data.columns_order }}" class="epofw-column-columns-order">
		<input type="hidden" name="epofw_column[{{ data.column_id }}][row_number]" value="{{ data.column_number }}" class="epofw-column-row-number">
		<div class="epofw-column-header epofw-row-header">
			<span class="epofw-column-drag" title="<?php 
esc_attr_e( 'Drag to reorder', 'extra-product-options-for-woocommerce' );
?>">
				<i class="dashicons dashicons-move"></i>
			</span>
			<div class="epofw-column-title epofw-row-title">
				<i class="dashicons dashicons-grid-view"></i>
				<span><?php 
esc_html_e( 'Column', 'extra-product-options-for-woocommerce' );
?> {{ data.column_number }}</span>
			</div>
			<div class="epofw-column-actions epofw-row-actions">
				<button type="button" class="epofw-column-delete epofw-row-delete" title="<?php 
esc_attr_e( 'Delete Column', 'extra-product-options-for-woocommerce' );
?>">
					<i class="dashicons dashicons-no-alt"></i>
				</button>
			</div>
		</div>
		<div class="epofw-column-content epofw-row-content">
			<div class="epofw-elements-container" data-column-id="{{ data.column_id }}" data-row-id="{{ data.row_id }}" data-group-id="{{ data.group_id }}">
				<div class="epofw-element-add">
					<button type="button" class="epofw-add-element-btn" data-section-id="{{ data.section_id }}" data-row-id="{{ data.row_id }}" data-group-id="{{ data.group_id }}" data-column-id="{{ data.column_id }}" title="<?php 
esc_attr_e( 'Add element to this column', 'extra-product-options-for-woocommerce' );
?>">
						<i class="dashicons dashicons-list-view"></i>
					</button>
				</div>
			</div>
		</div>
	</div>
</script>

<!-- Row Container Template (individual column) -->
<script type="text/html" id="tmpl-epofw-row-container">
	<div class="epofw-column epofw-row-container" data-row-id="{{ data.row_id }}" data-group-id="{{ data.group_id }}" data-columns-id="{{ data.columns_id }}" data-columns-order="{{ data.columns_order }}" data-row-number="{{ data.row_number }}">
		<!-- Hidden inputs for column association -->
		<input type="hidden" name="epofw_column[{{ data.row_id }}][section_id]" value="{{ data.section_id }}" class="epofw-column-section-id">
		<input type="hidden" name="epofw_column[{{ data.row_id }}][group_id]" value="{{ data.group_id }}" class="epofw-column-group-id">
		<input type="hidden" name="epofw_column[{{ data.row_id }}][row_id]" value="{{ data.row_id }}" class="epofw-column-row-id">
		<input type="hidden" name="epofw_column[{{ data.row_id }}][columns_id]" value="{{ data.columns_id }}" class="epofw-column-columns-id">
		<input type="hidden" name="epofw_column[{{ data.row_id }}][columns_order]" value="{{ data.columns_order }}" class="epofw-column-columns-order">
		<input type="hidden" name="epofw_column[{{ data.row_id }}][row_number]" value="{{ data.row_number }}" class="epofw-column-row-number">
		<div class="epofw-column-header epofw-row-header">
			<span class="epofw-column-drag" title="<?php 
esc_attr_e( 'Drag to reorder', 'extra-product-options-for-woocommerce' );
?>">
				<i class="dashicons dashicons-move"></i>
			</span>
			<div class="epofw-column-title epofw-row-title">
				<i class="dashicons dashicons-grid-view"></i>
				<span><?php 
esc_html_e( 'Column', 'extra-product-options-for-woocommerce' );
?> {{ data.row_number }}</span>
			</div>
			<div class="epofw-column-actions epofw-row-actions">
				<button type="button" class="epofw-column-delete epofw-row-delete" title="<?php 
esc_attr_e( 'Delete Column', 'extra-product-options-for-woocommerce' );
?>">
					<i class="dashicons dashicons-no-alt"></i>
				</button>
			</div>
		</div>
		<div class="epofw-column-content epofw-row-content">
			<div class="epofw-elements-container" data-row-id="{{ data.row_id }}" data-group-id="{{ data.group_id }}">
				<div class="epofw-element-add">
					<button type="button" class="epofw-add-element-btn" data-section-id="{{ data.section_id }}" data-row-id="{{ data.row_id }}" data-group-id="{{ data.group_id }}" title="<?php 
esc_attr_e( 'Add element to this column', 'extra-product-options-for-woocommerce' );
?>">
						<i class="dashicons dashicons-list-view"></i>
					</button>
				</div>
			</div>
		</div>
	</div>
</script>

<!-- Row Settings Modal Template -->
<script type="text/html" id="tmpl-epofw-row-settings-modal">
	<div class="epofw-section-modal" id="row-settings-modal-{{ data.group_id }}" style="display: none;">
		<div class="epofw-modal-overlay"></div>
		<div class="epofw-modal-content">
			<div class="epofw-modal-header">
				<h3><?php 
esc_html_e( 'Row Settings', 'extra-product-options-for-woocommerce' );
?></h3>
				<button type="button" class="epofw-modal-close">&times;</button>
			</div>
			<div class="epofw-modal-body">
				<div class="epofw-modal-content-wrapper">
					<!-- Row settings form will be loaded here via AJAX or included in PHP -->
				</div>
			</div>
			<div class="epofw-modal-footer">
				<button type="button" class="epofw-btn epofw-btn-secondary epofw-modal-cancel"><?php 
esc_html_e( 'Cancel', 'extra-product-options-for-woocommerce' );
?></button>
				<button type="button" class="epofw-btn epofw-btn-primary epofw-save-row" data-group-id="{{ data.group_id }}" data-section-id="{{ data.section_id }}"><?php 
esc_html_e( 'Done', 'extra-product-options-for-woocommerce' );
?></button>
			</div>
		</div>
	</div>
</script>

<!-- Column Settings Modal Template -->
<script type="text/html" id="tmpl-epofw-column-settings-modal">
	<div class="epofw-section-modal" id="column-settings-modal-{{ data.row_id }}" style="display: none;">
		<div class="epofw-modal-overlay"></div>
		<div class="epofw-modal-content">
			<div class="epofw-modal-header">
				<h3><?php 
esc_html_e( 'Column Settings', 'extra-product-options-for-woocommerce' );
?></h3>
				<button type="button" class="epofw-modal-close">&times;</button>
			</div>
			<div class="epofw-modal-body">
				<div class="epofw-modal-content-wrapper">
					<!-- Column settings form will be loaded here via AJAX or included in PHP -->
				</div>
			</div>
			<div class="epofw-modal-footer">
				<button type="button" class="epofw-btn epofw-btn-secondary epofw-modal-cancel"><?php 
esc_html_e( 'Cancel', 'extra-product-options-for-woocommerce' );
?></button>
				<button type="button" class="epofw-btn epofw-btn-primary epofw-save-column" data-section-id="{{ data.section_id }}" data-group-id="{{ data.group_id }}" data-row-id="{{ data.row_id }}"><?php 
esc_html_e( 'Done', 'extra-product-options-for-woocommerce' );
?></button>
			</div>
		</div>
	</div>
</script>

<!-- Card Loader Template -->
<script type="text/html" id="tmpl-epofw-card-loader">
	<div class="epofw-card-loader-overlay">
		<div class="epofw-card-loader">
			<span class="spinner is-active"></span>
			<span class="epofw-loader-text">{{ data.text }}</span>
		</div>
	</div>
</script>

<!-- Modal Loader Template -->
<script type="text/html" id="tmpl-epofw-modal-loader">
	<div class="epofw-modal-loader-overlay">
		<div class="epofw-modal-loader">
			<span class="spinner is-active"></span>
			<span class="epofw-loader-text">{{ data.text }}</span>
		</div>
	</div>
</script>

<!-- Save Overlay Template -->
<script type="text/html" id="tmpl-epofw-save-overlay">
	<div class="epofw-save-overlay">
		<div class="epofw-save-popup">
			<span class="spinner is-active"></span>
			<p class="epofw-save-text">{{ data.text }}</p>
		</div>
	</div>
</script>

<!-- Import Confirmation Modal Template -->
<script type="text/html" id="tmpl-epofw-import-modal">
	<div class="epofw-import-overlay">
		<div class="epofw-import-modal">
			<div class="epofw-import-icon">
				<span class="dashicons dashicons-download"></span>
			</div>
			<h2>{{ data.title }}</h2>
			<p class="epofw-import-message">{{ data.message }}</p>
			<div class="epofw-import-info">
				<p>
					<strong>{{ data.will_import }}</strong><br>
					• {{ data.demo_tshirt }}<br>
					• {{ data.demo_pizza }}<br>
					• {{ data.demo_event }}
					<# if ( data.is_premium ) { #>
					<br>• {{ data.demo_premium }}
					<# } #>
				</p>
			</div>
			<div class="epofw-import-buttons">
				<button type="button" class="button button-secondary epofw-import-cancel">{{ data.cancel }}</button>
				<button type="button" class="button button-primary epofw-import-confirm">{{ data.import_now }}</button>
			</div>
		</div>
	</div>
</script>
