<?php
/**
 * Topping Groups admin functionality for FoodOrd.
 *
 * @package FoodOrd
 */

/**
 * Class Foodord_Topping_Groups
 */
class Foodord_Topping_Groups {

	/**
	 * Constructor.
	 */
	public function __construct() {
		// Scripts are enqueued from the main Foodord_Toppings class.
	}

	/**
	 * Render the Topping Groups section.
	 *
	 * @param array|null $existing_set Existing topping set data for edit mode.
	 */
	public function render_topping_groups_section( $existing_set = null ) {
		$selected_group_type = null;
		if ( $existing_set && isset( $existing_set['group_type'] ) ) {
			$selected_group_type = $existing_set['group_type'];
		}

		$required_states = array(
			'dropdown' => 0,
			'radio'    => 0,
			'checkbox' => 0,
		);

		if ( $existing_set && isset( $existing_set['is_required'] ) && $selected_group_type && isset( $required_states[ $selected_group_type ] ) ) {
			$required_states[ $selected_group_type ] = empty( $existing_set['is_required'] ) ? 0 : 1;
		}

		$toggle_aria_labels = array(
			'dropdown' => esc_attr__( 'Toggle whether customers must make a dropdown selection', 'foodord' ),
			'radio'    => esc_attr__( 'Toggle whether customers must make a radio selection', 'foodord' ),
			'checkbox' => esc_attr__( 'Toggle whether customers must make a checkbox selection', 'foodord' ),
		);
		?>
		<div class="wrc-topping-groups-container">
			<div class="wrc-topping-groups-header">
				<h3 class="wrc-section-title">
					<span class="dashicons dashicons-category"></span>
					<?php echo esc_html__( 'Select Group Type', 'foodord' ); ?>
				</h3>
				<p class="description">
					<?php echo esc_html__( 'Choose how customers will select toppings from this group', 'foodord' ); ?>
				</p>
			</div>
			<div class="wrc-topping-groups-content">
			
			<div class="group-type-options">
				<label class="group-type-option <?php echo esc_attr( 'dropdown' === $selected_group_type ? 'selected' : '' ); ?>" data-type="dropdown">
					<input type="radio" name="group_type" value="dropdown" class="group-type-radio"
						<?php
						checked( $selected_group_type, 'dropdown' );
						if ( ! $selected_group_type ) {
							echo esc_attr( ' checked' );
						}
						?>
					>
						<div class="option-content">
							<div class="option-icon">
								<span class="dashicons dashicons-arrow-down-alt2"></span>
							</div>
							<div class="option-details">
								<strong><?php echo esc_html__( 'Dropdown', 'foodord' ); ?></strong>
								<span><?php echo esc_html__( 'Compact single selection', 'foodord' ); ?></span>
							</div>
							<div class="group-type-option__toggle" data-hidden-input="topping_required_state_dropdown">
								<span class="group-type-option__toggle-text"><?php echo esc_html__( 'Required', 'foodord' ); ?></span>
								<button
									type="button"
									class="group-type-option__toggle-button"
									id="topping-dropdown-required-toggle"
									data-group-type="dropdown"
									data-hidden-input="topping_required_state_dropdown"
									aria-pressed="<?php echo esc_attr( $required_states['dropdown'] ? 'true' : 'false' ); ?>"
									aria-label="<?php echo esc_attr( $toggle_aria_labels['dropdown'] ); ?>"
								>
									<span class="group-type-option__toggle-track" aria-hidden="true">
										<span class="group-type-option__toggle-handle"></span>
									</span>
								</button>
							</div>
						</div>
				</label>
				<input type="hidden" name="topping_required_state[dropdown]" id="topping_required_state_dropdown" value="<?php echo esc_attr( $required_states['dropdown'] ); ?>" />
				
				<label class="group-type-option <?php echo esc_attr( 'radio' === $selected_group_type ? 'selected' : '' ); ?>" data-type="radio">
					<input type="radio" name="group_type" value="radio" class="group-type-radio"<?php checked( $selected_group_type, 'radio' ); ?>>
					<div class="option-content">
						<div class="option-icon">
							<span class="dashicons dashicons-marker"></span>
						</div>
						<div class="option-details">
							<strong><?php echo esc_html__( 'Radio Buttons', 'foodord' ); ?></strong>
							<span><?php echo esc_html__( 'Single selection with all options visible', 'foodord' ); ?></span>
						</div>
						<div class="group-type-option__toggle" data-hidden-input="topping_required_state_radio">
							<span class="group-type-option__toggle-text"><?php echo esc_html__( 'Required', 'foodord' ); ?></span>
							<button
								type="button"
								class="group-type-option__toggle-button"
								id="topping-radio-required-toggle"
								data-group-type="radio"
								data-hidden-input="topping_required_state_radio"
								aria-pressed="<?php echo esc_attr( $required_states['radio'] ? 'true' : 'false' ); ?>"
								aria-label="<?php echo esc_attr( $toggle_aria_labels['radio'] ); ?>"
							>
								<span class="group-type-option__toggle-track" aria-hidden="true">
									<span class="group-type-option__toggle-handle"></span>
								</span>
							</button>
						</div>
					</div>
				</label>
				<input type="hidden" name="topping_required_state[radio]" id="topping_required_state_radio" value="<?php echo esc_attr( $required_states['radio'] ); ?>" />
				
				<label class="group-type-option <?php echo esc_attr( 'checkbox' === $selected_group_type ? 'selected' : '' ); ?>" data-type="checkbox">
					<input type="radio" name="group_type" value="checkbox" class="group-type-radio"<?php checked( $selected_group_type, 'checkbox' ); ?>>
					<div class="option-content">
						<div class="option-icon">
							<span class="dashicons dashicons-yes"></span>
						</div>
						<div class="option-details">
							<strong><?php echo esc_html__( 'Checkboxes', 'foodord' ); ?></strong>
							<span><?php echo esc_html__( 'Multiple selections allowed', 'foodord' ); ?></span>
						</div>
						<div class="group-type-option__toggle" data-hidden-input="topping_required_state_checkbox">
							<span class="group-type-option__toggle-text"><?php echo esc_html__( 'Required', 'foodord' ); ?></span>
							<button
								type="button"
								class="group-type-option__toggle-button"
								id="topping-checkbox-required-toggle"
								data-group-type="checkbox"
								data-hidden-input="topping_required_state_checkbox"
								aria-pressed="<?php echo esc_attr( $required_states['checkbox'] ? 'true' : 'false' ); ?>"
								aria-label="<?php echo esc_attr( $toggle_aria_labels['checkbox'] ); ?>"
							>
								<span class="group-type-option__toggle-track" aria-hidden="true">
									<span class="group-type-option__toggle-handle"></span>
								</span>
							</button>
						</div>
					</div>
				</label>
				<input type="hidden" name="topping_required_state[checkbox]" id="topping_required_state_checkbox" value="<?php echo esc_attr( $required_states['checkbox'] ); ?>" />
			</div>
			
			<!-- Next Button -->
			<div class="group-type-actions">
				<button type="button" class="button button-primary" id="group-type-next">
					<?php echo esc_html__( 'Next', 'foodord' ); ?>
					<span class="dashicons dashicons-arrow-right-alt"></span>
				</button>
			</div>
			</div>
		</div>
		<?php
	}
}
