<?php

/**
 * Section Form.
 *
 * @since   4.4.0
 * @package Extra Product Options for WooCommerce
 *
 * Available Variables (from addon-builder.php):
 * @var array  $epofw_section     The section data array.
 * @var string $epofw_section_id  The section ID.
 * @var int    $epofw_get_post_id The addon post ID.
 */
if ( !defined( 'ABSPATH' ) ) {
    exit;
}
// Section Data.
$epofw_section_data = ( isset( $epofw_section ) ? $epofw_section : array() );
$epofw_section_id = epofw_check_array_key_exists( 'section_id', $epofw_section_data );
$epofw_section_title = epofw_check_array_key_exists( 'section_title', $epofw_section_data );
$epofw_section_status = epofw_check_array_key_exists( 'section_status', $epofw_section_data );
$epofw_section_order = epofw_check_array_key_exists( 'section_order', $epofw_section_data );
$epofw_section_settings = epofw_check_array_key_exists( 'section_settings', $epofw_section_data );
$epofw_section_background_color = epofw_check_array_key_exists( 'background_color', $epofw_section_settings );
$epofw_section_title_type = epofw_check_array_key_exists( 'title_type', $epofw_section_settings );
$epofw_section_title_type = ( !empty( $epofw_section_title_type ) ? $epofw_section_title_type : 'span' );
$epofw_section_title_color = epofw_check_array_key_exists( 'title_text_color', $epofw_section_settings );
$epofw_section_title_alignment = epofw_check_array_key_exists( 'title_alignment', $epofw_section_settings );
$epofw_section_description = epofw_check_array_key_exists( 'description', $epofw_section_settings );
$epofw_section_description_text_color = epofw_check_array_key_exists( 'description_text_color', $epofw_section_settings );
$epofw_section_description_alignment = epofw_check_array_key_exists( 'description_alignment', $epofw_section_settings );
// Margin settings.
$epofw_section_margin_settings = epofw_check_array_key_exists( 'margin', $epofw_section_settings );
$epofw_section_margin_top = epofw_check_array_key_exists( 'top', $epofw_section_margin_settings );
$epofw_section_margin_right = epofw_check_array_key_exists( 'right', $epofw_section_margin_settings );
$epofw_section_margin_bottom = epofw_check_array_key_exists( 'bottom', $epofw_section_margin_settings );
$epofw_section_margin_left = epofw_check_array_key_exists( 'left', $epofw_section_margin_settings );
$epofw_section_margin_units = epofw_check_array_key_exists( 'units', $epofw_section_margin_settings );
// Padding settings.
$epofw_section_padding_settings = epofw_check_array_key_exists( 'padding', $epofw_section_settings );
$epofw_section_padding_top = epofw_check_array_key_exists( 'top', $epofw_section_padding_settings );
$epofw_section_padding_right = epofw_check_array_key_exists( 'right', $epofw_section_padding_settings );
$epofw_section_padding_bottom = epofw_check_array_key_exists( 'bottom', $epofw_section_padding_settings );
$epofw_section_padding_left = epofw_check_array_key_exists( 'left', $epofw_section_padding_settings );
$epofw_section_padding_units = epofw_check_array_key_exists( 'units', $epofw_section_padding_settings );
// Border settings (available to all, but only functional for premium).
$epofw_section_border_color = epofw_check_array_key_exists( 'border_color', $epofw_section_settings );
$epofw_section_border_width = epofw_check_array_key_exists( 'border_width', $epofw_section_settings );
$epofw_section_border_style = epofw_check_array_key_exists( 'border_style', $epofw_section_settings );
$epofw_section_border_radius = epofw_check_array_key_exists( 'border_radius', $epofw_section_settings );
// Premium check for section settings.
$epofw_is_premium_user = false;
$epofw_section_premium_class = ( !$epofw_is_premium_user ? ' epofw-premium-field-disabled' : '' );
$epofw_section_premium_badge = ( !$epofw_is_premium_user ? '<span class="epofw-pro-badge-inline">' . esc_html__( 'PRO', 'extra-product-options-for-woocommerce' ) . '</span>' : '' );
$epofw_section_premium_disabled = ( !$epofw_is_premium_user ? ' disabled' : '' );
// Custom CSS.
$epofw_section_custom_css = epofw_check_array_key_exists( 'custom_css', $epofw_section_settings );
// Check if section styling is enabled.
$epofw_section_styling_enabled = epofw_check_array_key_exists( 'enabled', $epofw_section_settings );
// Explicitly check: if key exists and equals 'on', then enabled. Otherwise disabled.
$epofw_section_styling_enabled = ( 'on' === $epofw_section_styling_enabled ? 'on' : '' );
// Check if section label (title & description) display is enabled.
$epofw_section_label_enabled = epofw_check_array_key_exists( 'show_label', $epofw_section_settings );
// Explicitly check: if key exists and equals 'on', then enabled. Otherwise disabled.
$epofw_section_label_enabled = ( 'on' === $epofw_section_label_enabled ? 'on' : '' );
$epofw_tabs = array();
$epofw_tabs['general-settings'] = array(
    'label' => esc_html__( 'General Settings', 'extra-product-options-for-woocommerce' ),
    'icon'  => 'dashicons-heading',
);
$epofw_tabs['label-settings'] = array(
    'label' => esc_html__( 'Label Settings', 'extra-product-options-for-woocommerce' ),
    'icon'  => 'dashicons-admin-generic',
);
$epofw_tabs['section-settings'] = array(
    'label' => esc_html__( 'Section Settings', 'extra-product-options-for-woocommerce' ),
    'icon'  => 'dashicons-heading',
);
/**
 * Filter section settings tabs.
 *
 * Allows modules to add custom tabs to section settings modal.
 *
 * @since 4.4.5
 *
 * @param array  $epofw_tabs       Array of tabs with 'label' and 'icon' keys.
 * @param string $epofw_section_id       Section ID.
 * @param array  $epofw_section_settings Current section settings.
 */
$epofw_tabs = apply_filters(
    'epofw_section_settings_tabs',
    $epofw_tabs,
    $epofw_section_id,
    $epofw_section_settings
);
?>

<div class="epofw-settings-tabs">
	<?php 
$epofw_default_tab = 'general-settings';
foreach ( $epofw_tabs as $epofw_tab_key => $epofw_tab_data ) {
    ?>
		<button type="button" class="epofw-tab-btn <?php 
    echo ( $epofw_default_tab === $epofw_tab_key ? 'active' : '' );
    ?>" data-tab="<?php 
    echo esc_attr( $epofw_tab_key );
    ?>">
			<i class="dashicons <?php 
    echo esc_attr( $epofw_tab_data['icon'] );
    ?>"></i>
			<?php 
    echo esc_html( $epofw_tab_data['label'] );
    ?>
		</button>
		<?php 
}
?>
</div>

<!-- Hidden fields to preserve section data -->
<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 );
?>">

<div class="epofw-tab-content active" data-tab="general-settings">
	<div class="epofw-form-group">
		<div class="epofw-field-label">
			<label for="section_status"><?php 
esc_html_e( 'Section Status', 'extra-product-options-for-woocommerce' );
?></label>
			<div class="epofw-field-description">
				<?php 
esc_html_e( 'Choose whether this field is enabled or disabled on the frontend. Disabled fields will not appear to customers.', 'extra-product-options-for-woocommerce' );
?>
			</div>
		</div>
		<div class="epofw-field-input">
			<!-- OPTIMIZED: Flat structure (v4.4.0) -->
			<input type="checkbox" name="epofw_section[<?php 
echo esc_attr( $epofw_section_id );
?>][status]" id="section_status" value="on" <?php 
checked( $epofw_section_status, 'on' );
?>>
			<label for="section_status" class="toggle-switch"></label>
		</div>
	</div>
</div>

<div class="epofw-tab-content" data-tab="label-settings">
	<!-- Enable/Disable Section Title & Description -->
	<div class="epofw-form-group">
		<div class="epofw-field-label">
			<label for="section_label_enabled"><?php 
esc_html_e( 'Enable Section Title & Description', 'extra-product-options-for-woocommerce' );
?></label>
			<div class="epofw-field-description">
				<?php 
esc_html_e( 'Enable this to display section title and description on the frontend. If disabled, only fields will be shown without section headers (cleaner minimal display).', 'extra-product-options-for-woocommerce' );
?>
			</div>
		</div>
		<div class="epofw-field-input">
			<!-- OPTIMIZED: Nested settings structure (v4.4.0) -->
			<input type="checkbox" name="epofw_section[<?php 
echo esc_attr( $epofw_section_id );
?>][settings][show_label]" id="section_label_enabled" value="on" <?php 
checked( $epofw_section_label_enabled, 'on' );
?> class="epofw-has-sub" data-nextfe="section_label_content">
			<label for="section_label_enabled" class="toggle-switch"></label>
		</div>
	</div>

	<!-- Section Label Content (Title & Description Fields) -->
	<div id="section_label_content" style="display: <?php 
echo ( 'on' === $epofw_section_label_enabled ? 'block' : 'none' );
?>;">
		<div class="epofw-form-group">
			<div class="epofw-field-label">
				<label for="section_title"><?php 
esc_html_e( 'Title', 'extra-product-options-for-woocommerce' );
?></label>
				<div class="epofw-field-description">
					<?php 
esc_html_e( 'Enter a descriptive title for this section. This will be displayed to customers on the product page.', 'extra-product-options-for-woocommerce' );
?>
				</div>
			</div>
			<div class="epofw-field-input">
				<!-- OPTIMIZED: Flat structure (v4.4.0) -->
				<input type="text" name="epofw_section[<?php 
echo esc_attr( $epofw_section_id );
?>][title]" id="section_title" value="<?php 
echo esc_attr( $epofw_section_title );
?>">
			</div>
		</div>
		<div class="epofw-form-group">
			<div class="epofw-field-label">
				<label for="section_title_type"><?php 
esc_html_e( 'Title Type', 'extra-product-options-for-woocommerce' );
?></label>
				<div class="epofw-field-description">
					<?php 
esc_html_e( 'Choose the HTML heading level for the section title. H1 is the largest and most prominent, while H6 is the smallest.', 'extra-product-options-for-woocommerce' );
?>
				</div>
			</div>
			<div class="epofw-field-input">
				<select name="epofw_section[<?php 
echo esc_attr( $epofw_section_id );
?>][settings][title_type]" id="section_title_type" class="epofw-form-control epofw-label-code-example">
					<?php 
$epofw_heading_type_options = epofw_field_heading_type_options_data();
foreach ( $epofw_heading_type_options as $epofw_key => $epofw_value ) {
    ?>
						<option value="<?php 
    echo esc_attr( $epofw_key );
    ?>" <?php 
    selected( $epofw_section_title_type, $epofw_key );
    ?>><?php 
    echo esc_html( $epofw_value );
    ?></option>
						<?php 
}
?>
				</select>
			</div>
		</div>
		<div class="epofw-form-group">
			<div class="epofw-field-label">
				<label for="section_title_color"><?php 
esc_html_e( 'Title Color', 'extra-product-options-for-woocommerce' );
?></label>
				<div class="epofw-field-description">
					<?php 
esc_html_e( 'Choose the text color for the section title. This will override the default theme colors.', 'extra-product-options-for-woocommerce' );
?>
				</div>
			</div>
			<div class="epofw-field-input">
				<input type="text" name="epofw_section[<?php 
echo esc_attr( $epofw_section_id );
?>][settings][title_text_color]" id="section_title_color" value="<?php 
echo esc_attr( $epofw_section_title_color );
?>" class="epofw_colorpicker">
			</div>
		</div>
		<div class="epofw-form-group">
			<div class="epofw-field-label">
				<label for="section_title_alignment"><?php 
esc_html_e( 'Title Alignment', 'extra-product-options-for-woocommerce' );
?></label>
				<div class="epofw-field-description">
					<?php 
esc_html_e( 'Choose the text alignment for the section title.', 'extra-product-options-for-woocommerce' );
?>
				</div>
			</div>
			<div class="epofw-field-input">
				<select name="epofw_section[<?php 
echo esc_attr( $epofw_section_id );
?>][settings][title_alignment]" id="section_title_alignment" class="epofw-form-control">
					<option value=""><?php 
esc_html_e( 'Default', 'extra-product-options-for-woocommerce' );
?></option>
					<option value="left" <?php 
selected( $epofw_section_title_alignment, 'left' );
?>><?php 
esc_html_e( 'Left', 'extra-product-options-for-woocommerce' );
?></option>
					<option value="center" <?php 
selected( $epofw_section_title_alignment, 'center' );
?>><?php 
esc_html_e( 'Center', 'extra-product-options-for-woocommerce' );
?></option>
					<option value="right" <?php 
selected( $epofw_section_title_alignment, 'right' );
?>><?php 
esc_html_e( 'Right', 'extra-product-options-for-woocommerce' );
?></option>
					<option value="justify" <?php 
selected( $epofw_section_title_alignment, 'justify' );
?>><?php 
esc_html_e( 'Justify', 'extra-product-options-for-woocommerce' );
?></option>
				</select>
			</div>
		</div>
		<div class="epofw-form-group<?php 
echo esc_attr( $epofw_section_premium_class );
?>">
			<div class="epofw-field-label">
				<label for="section_description"><?php 
esc_html_e( 'Section Description', 'extra-product-options-for-woocommerce' );
echo wp_kses( $epofw_section_premium_badge, epofw_get_badge_allowed_html() );
?></label>
				<div class="epofw-field-description">
					<?php 
esc_html_e( 'Add a helpful description that will appear below the section title. This can provide additional context or instructions for customers.', 'extra-product-options-for-woocommerce' );
?>
				</div>
			</div>
			<div class="epofw-field-input">
				<textarea 
				<?php 
?>
				id="section_description" rows="4"<?php 
echo esc_attr( $epofw_section_premium_disabled );
?>>
<?php 
?>
</textarea>
			</div>
		</div>
		<div class="epofw-form-group<?php 
echo esc_attr( $epofw_section_premium_class );
?>">
			<div class="epofw-field-label">
				<label for="section_description_text_color"><?php 
esc_html_e( 'Description Text Color', 'extra-product-options-for-woocommerce' );
echo wp_kses( $epofw_section_premium_badge, epofw_get_badge_allowed_html() );
?></label>
				<div class="epofw-field-description">
					<?php 
esc_html_e( 'Choose the text color for the section description. This will override the default theme colors for better visual consistency.', 'extra-product-options-for-woocommerce' );
?>
				</div>
			</div>
			<div class="epofw-field-input">
				<input type="text" 
				<?php 
?>
				id="section_description_text_color" value="<?php 
echo esc_attr( $epofw_section_description_text_color );
?>" class="epofw_colorpicker"<?php 
echo esc_attr( $epofw_section_premium_disabled );
?>>
			</div>
		</div>
		<div class="epofw-form-group<?php 
echo esc_attr( $epofw_section_premium_class );
?>">
			<div class="epofw-field-label">
				<label for="section_description_alignment"><?php 
esc_html_e( 'Description Alignment', 'extra-product-options-for-woocommerce' );
echo wp_kses( $epofw_section_premium_badge, epofw_get_badge_allowed_html() );
?></label>
				<div class="epofw-field-description">
					<?php 
esc_html_e( 'Choose the text alignment for the section description.', 'extra-product-options-for-woocommerce' );
?>
				</div>
			</div>
			<div class="epofw-field-input">
				<select 
				<?php 
?>
				id="section_description_alignment" class="epofw-form-control"<?php 
echo esc_attr( $epofw_section_premium_disabled );
?>>
					<option value=""><?php 
esc_html_e( 'Default', 'extra-product-options-for-woocommerce' );
?></option>
					<option value="left" <?php 
selected( $epofw_section_description_alignment, 'left' );
?>><?php 
esc_html_e( 'Left', 'extra-product-options-for-woocommerce' );
?></option>
					<option value="center" <?php 
selected( $epofw_section_description_alignment, 'center' );
?>><?php 
esc_html_e( 'Center', 'extra-product-options-for-woocommerce' );
?></option>
					<option value="right" <?php 
selected( $epofw_section_description_alignment, 'right' );
?>><?php 
esc_html_e( 'Right', 'extra-product-options-for-woocommerce' );
?></option>
					<option value="justify" <?php 
selected( $epofw_section_description_alignment, 'justify' );
?>><?php 
esc_html_e( 'Justify', 'extra-product-options-for-woocommerce' );
?></option>
				</select>
			</div>
		</div>
	</div><!-- End section_label_content -->
</div>

<div class="epofw-tab-content" data-tab="section-settings">
	<!-- Enable/Disable Toggle for Section Styling -->
	<div class="epofw-form-group">
		<div class="epofw-field-label">
			<label for="section_styling_enabled"><?php 
esc_html_e( 'Enable Section Styling', 'extra-product-options-for-woocommerce' );
?></label>
			<div class="epofw-field-description">
				<?php 
esc_html_e( 'Enable this to apply custom styling to the section container. If disabled, the section will use minimal default styles.', 'extra-product-options-for-woocommerce' );
?>
			</div>
		</div>
		<div class="epofw-field-input">
			<input type="checkbox" name="epofw_section[<?php 
echo esc_attr( $epofw_section_id );
?>][settings][enabled]" id="section_styling_enabled" value="on" <?php 
checked( $epofw_section_styling_enabled, 'on' );
?> class="epofw-has-sub" data-nextfe="section_settings_content">
			<label for="section_styling_enabled" class="toggle-switch"></label>
		</div>
	</div>

	<!-- Section Settings Content -->
	<div id="section_settings_content" style="display: <?php 
echo ( 'on' === $epofw_section_styling_enabled ? 'block' : 'none' );
?>;">
		<div class="epofw-form-group">
			<div class="epofw-field-label">
				<label for="section_title"><?php 
esc_html_e( 'Background Color', 'extra-product-options-for-woocommerce' );
?></label>
				<div class="epofw-field-description">
					<?php 
esc_html_e( 'Choose a background color for the entire section. This will help distinguish this section from others and improve visual organization.', 'extra-product-options-for-woocommerce' );
?>
				</div>
			</div>
			<div class="epofw-field-input">
				<input type="text" name="epofw_section[<?php 
echo esc_attr( $epofw_section_id );
?>][settings][background_color]" id="section_background_color" value="<?php 
echo esc_attr( $epofw_section_background_color );
?>" class="epofw_colorpicker">
			</div>
		</div>
		<div class="epofw-form-group">
			<div class="epofw-field-label">
				<label for="section_margin_top"><?php 
esc_html_e( 'Section Margin', 'extra-product-options-for-woocommerce' );
?></label>
				<div class="epofw-field-description">
					<?php 
esc_html_e( 'Set the outer spacing around the section. Margin creates space outside the section border, pushing other elements away from it.', 'extra-product-options-for-woocommerce' );
?>
				</div>
			</div>
			<div class="epofw-field-input">
				<div class="epofw-spacing-inputs">
					<div class="epofw-spacing-input">
						<label for="section_margin_top"><?php 
esc_html_e( 'Top', 'extra-product-options-for-woocommerce' );
?></label>
						<input type="number" name="epofw_section[<?php 
echo esc_attr( $epofw_section_id );
?>][settings][margin][top]" id="section_margin_top" value="<?php 
echo esc_attr( $epofw_section_margin_top );
?>" placeholder="0">
					</div>
					<div class="epofw-spacing-input">
						<label for="section_margin_right"><?php 
esc_html_e( 'Right', 'extra-product-options-for-woocommerce' );
?></label>
						<input type="number" name="epofw_section[<?php 
echo esc_attr( $epofw_section_id );
?>][settings][margin][right]" id="section_margin_right" value="<?php 
echo esc_attr( $epofw_section_margin_right );
?>" placeholder="0">
					</div>
					<div class="epofw-spacing-input">
						<label for="section_margin_bottom"><?php 
esc_html_e( 'Bottom', 'extra-product-options-for-woocommerce' );
?></label>
						<input type="number" name="epofw_section[<?php 
echo esc_attr( $epofw_section_id );
?>][settings][margin][bottom]" id="section_margin_bottom" value="<?php 
echo esc_attr( $epofw_section_margin_bottom );
?>" placeholder="0">
					</div>
					<div class="epofw-spacing-input">
						<label for="section_margin_left"><?php 
esc_html_e( 'Left', 'extra-product-options-for-woocommerce' );
?></label>
						<input type="number" name="epofw_section[<?php 
echo esc_attr( $epofw_section_id );
?>][settings][margin][left]" id="section_margin_left" value="<?php 
echo esc_attr( $epofw_section_margin_left );
?>" placeholder="0">
					</div>
					<div class="epofw-spacing-input epofw-units-input">
						<label for="section_margin_units"><?php 
esc_html_e( 'Units', 'extra-product-options-for-woocommerce' );
?></label>
						<select name="epofw_section[<?php 
echo esc_attr( $epofw_section_id );
?>][settings][margin][units]" id="section_margin_units" class="epofw-form-control epofw-label-code-example">
							<option value="px" <?php 
selected( $epofw_section_margin_units, 'px' );
?>><?php 
esc_html_e( 'Pixels', 'extra-product-options-for-woocommerce' );
?></option>
							<option value="em" <?php 
selected( $epofw_section_margin_units, 'em' );
?>><?php 
esc_html_e( 'Em', 'extra-product-options-for-woocommerce' );
?></option>
							<option value="rem" <?php 
selected( $epofw_section_margin_units, 'rem' );
echo ( !$epofw_is_premium_user ? ' disabled' : '' );
?>><?php 
esc_html_e( 'Rem', 'extra-product-options-for-woocommerce' );
echo ( !$epofw_is_premium_user ? ' (Pro)' : '' );
?></option>
							<option value="%" <?php 
selected( $epofw_section_margin_units, '%' );
echo ( !$epofw_is_premium_user ? ' disabled' : '' );
?>><?php 
esc_html_e( 'Percent', 'extra-product-options-for-woocommerce' );
echo ( !$epofw_is_premium_user ? ' (Pro)' : '' );
?></option>
						</select>
					</div>
				</div>
			</div>
		</div>
		<div class="epofw-form-group">
			<div class="epofw-field-label">
				<label for="section_padding_top"><?php 
esc_html_e( 'Section Padding', 'extra-product-options-for-woocommerce' );
?></label>
				<div class="epofw-field-description">
					<?php 
esc_html_e( 'Set the inner spacing within the section. Padding creates space inside the section border, between the border and the content.', 'extra-product-options-for-woocommerce' );
?>
				</div>
			</div>
			<div class="epofw-field-input">
				<div class="epofw-spacing-inputs">
					<div class="epofw-spacing-input">
						<label for="section_padding_top"><?php 
esc_html_e( 'Top', 'extra-product-options-for-woocommerce' );
?></label>
						<input type="number" name="epofw_section[<?php 
echo esc_attr( $epofw_section_id );
?>][settings][padding][top]" id="section_padding_top" value="<?php 
echo esc_attr( $epofw_section_padding_top );
?>" placeholder="0">
					</div>
					<div class="epofw-spacing-input">
						<label for="section_padding_right"><?php 
esc_html_e( 'Right', 'extra-product-options-for-woocommerce' );
?></label>
						<input type="number" name="epofw_section[<?php 
echo esc_attr( $epofw_section_id );
?>][settings][padding][right]" id="section_padding_right" value="<?php 
echo esc_attr( $epofw_section_padding_right );
?>" placeholder="0">
					</div>
					<div class="epofw-spacing-input">
						<label for="section_padding_bottom"><?php 
esc_html_e( 'Bottom', 'extra-product-options-for-woocommerce' );
?></label>
						<input type="number" name="epofw_section[<?php 
echo esc_attr( $epofw_section_id );
?>][settings][padding][bottom]" id="section_padding_bottom" value="<?php 
echo esc_attr( $epofw_section_padding_bottom );
?>" placeholder="0">
					</div>
					<div class="epofw-spacing-input">
						<label for="section_padding_left"><?php 
esc_html_e( 'Left', 'extra-product-options-for-woocommerce' );
?></label>
						<input type="number" name="epofw_section[<?php 
echo esc_attr( $epofw_section_id );
?>][settings][padding][left]" id="section_padding_left" value="<?php 
echo esc_attr( $epofw_section_padding_left );
?>" placeholder="0">
					</div>
					<div class="epofw-spacing-input epofw-units-input">
						<label for="section_padding_units"><?php 
esc_html_e( 'Units', 'extra-product-options-for-woocommerce' );
?></label>
						<select name="epofw_section[<?php 
echo esc_attr( $epofw_section_id );
?>][settings][padding][units]" id="section_padding_units" class="epofw-form-control epofw-label-code-example">
							<option value="px" <?php 
selected( $epofw_section_padding_units, 'px' );
?>><?php 
esc_html_e( 'Pixels', 'extra-product-options-for-woocommerce' );
?></option>
							<option value="em" <?php 
selected( $epofw_section_padding_units, 'em' );
?>><?php 
esc_html_e( 'Em', 'extra-product-options-for-woocommerce' );
?></option>
							<option value="rem" <?php 
selected( $epofw_section_padding_units, 'rem' );
echo ( !$epofw_is_premium_user ? ' disabled' : '' );
?>><?php 
esc_html_e( 'Rem', 'extra-product-options-for-woocommerce' );
echo ( !$epofw_is_premium_user ? ' (Pro)' : '' );
?></option>
							<option value="%" <?php 
selected( $epofw_section_padding_units, '%' );
echo ( !$epofw_is_premium_user ? ' disabled' : '' );
?>><?php 
esc_html_e( 'Percent', 'extra-product-options-for-woocommerce' );
echo ( !$epofw_is_premium_user ? ' (Pro)' : '' );
?></option>
						</select>
					</div>
				</div>
			</div>
		</div>
		<div class="epofw-form-group<?php 
echo esc_attr( $epofw_section_premium_class );
?>">
			<div class="epofw-field-label">
				<label for="section_border_color"><?php 
esc_html_e( 'Border', 'extra-product-options-for-woocommerce' );
echo wp_kses( $epofw_section_premium_badge, epofw_get_badge_allowed_html() );
?></label>
				<div class="epofw-field-description">
					<?php 
esc_html_e( 'Configure the border for the section container.', 'extra-product-options-for-woocommerce' );
?>
				</div>
			</div>
			<div class="epofw-field-input">
				<div class="epofw-border-inputs">
					<div class="epofw-border-input">
						<label for="section_border_color"><?php 
esc_html_e( 'Color', 'extra-product-options-for-woocommerce' );
?></label>
						<input type="text" 
						<?php 
?>
						id="section_border_color" value="<?php 
echo esc_attr( $epofw_section_border_color );
?>" class="epofw_colorpicker"<?php 
echo esc_attr( $epofw_section_premium_disabled );
?>>
					</div>
					<div class="epofw-border-input">
						<label for="section_border_width"><?php 
esc_html_e( 'Width (px)', 'extra-product-options-for-woocommerce' );
?></label>
						<input type="number" 
						<?php 
?>
						id="section_border_width" value="<?php 
echo esc_attr( $epofw_section_border_width );
?>" placeholder="0" min="0" step="1"<?php 
echo esc_attr( $epofw_section_premium_disabled );
?>>
					</div>
					<div class="epofw-border-input epofw-border-style-input">
						<label for="section_border_style"><?php 
esc_html_e( 'Style', 'extra-product-options-for-woocommerce' );
?></label>
						<select 
						<?php 
?>
						id="section_border_style" class="epofw-form-control"<?php 
echo esc_attr( $epofw_section_premium_disabled );
?>>
							<option value=""><?php 
esc_html_e( 'Select Style', 'extra-product-options-for-woocommerce' );
?></option>
							<option value="solid" <?php 
selected( $epofw_section_border_style, 'solid' );
?>><?php 
esc_html_e( 'Solid', 'extra-product-options-for-woocommerce' );
?></option>
							<option value="dashed" <?php 
selected( $epofw_section_border_style, 'dashed' );
?>><?php 
esc_html_e( 'Dashed', 'extra-product-options-for-woocommerce' );
?></option>
							<option value="dotted" <?php 
selected( $epofw_section_border_style, 'dotted' );
?>><?php 
esc_html_e( 'Dotted', 'extra-product-options-for-woocommerce' );
?></option>
							<option value="double" <?php 
selected( $epofw_section_border_style, 'double' );
?>><?php 
esc_html_e( 'Double', 'extra-product-options-for-woocommerce' );
?></option>
							<option value="none" <?php 
selected( $epofw_section_border_style, 'none' );
?>><?php 
esc_html_e( 'None', 'extra-product-options-for-woocommerce' );
?></option>
						</select>
					</div>
					<div class="epofw-border-input">
						<label for="section_border_radius"><?php 
esc_html_e( 'Radius (px)', 'extra-product-options-for-woocommerce' );
?></label>
						<input type="number" 
						<?php 
?>
						id="section_border_radius" value="<?php 
echo esc_attr( $epofw_section_border_radius );
?>" placeholder="0" min="0" step="1"<?php 
echo esc_attr( $epofw_section_premium_disabled );
?>>
					</div>
				</div>
			</div>
		</div>

		<div class="epofw-form-group<?php 
echo esc_attr( $epofw_section_premium_class );
?>">
			<div class="epofw-field-label">
				<label for="section_custom_css"><?php 
esc_html_e( 'Custom CSS', 'extra-product-options-for-woocommerce' );
echo wp_kses( $epofw_section_premium_badge, epofw_get_badge_allowed_html() );
?></label>
				<div class="epofw-field-description">
					<?php 
esc_html_e( 'Add custom CSS styles for this section. These styles will be scoped to this section only. Use this for advanced styling that cannot be achieved through the standard settings.', 'extra-product-options-for-woocommerce' );
?>
				</div>
			</div>
			<div class="epofw-field-input">
				<textarea 
				<?php 
?>
				id="section_custom_css" rows="6" class="epofw-form-control" placeholder=".epofw-section-wrapper { /* Your CSS here */ }"<?php 
echo esc_attr( $epofw_section_premium_disabled );
?>><?php 
echo esc_textarea( $epofw_section_custom_css );
?></textarea>
			</div>
		</div>
	</div><!-- End section_settings_content -->
</div>

<?php 
/**
 * Fires after all section settings tabs content.
 *
 * Allows modules to add custom tab content for section settings.
 * Use with 'epofw_section_settings_tabs' filter to add the tab button.
 *
 * @since 4.4.5
 *
 * @param string $epofw_section_id       Section ID.
 * @param array  $epofw_section_data     Full section data array.
 * @param array  $epofw_section_settings Section settings array.
 */
do_action(
    'epofw_section_settings_tab_content',
    $epofw_section_id,
    $epofw_section_data,
    $epofw_section_settings
);