<?php

// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
/**
 * Customize Toggle control class.
 *
 * @package pawfect
 *
 * @see     WP_Customize_Control
 * @access  public
 */

/**
 * Class pawfect_Customize_Toggle_Control
 */
class pawfect_Customize_Toggle_Control extends pawfect_Customize_Base_Control {

	/**
	 * Customize control type.
	 *
	 * @access public
	 * @var    string
	 */
	public $type = 'pawfect-toggle';

	/**
	 * Enqueue control related scripts/styles.
	 */
	public function enqueue() {
		parent::enqueue(); // This loads the base control assets including controls.css
		
		// No need for separate toggle CSS/JS - everything is in controls.css and controls.js
	}

	/**
	 * Render the control's content.
	 */
	protected function render_content() {
		?>
		<label for="toggle_<?php echo esc_attr($this->id); ?>">
			<span class="customize-control-title">
				<?php echo esc_html($this->label); ?>
			</span>
			<?php if (!empty($this->description)) : ?>
			<span class="description customize-control-description"><?php echo esc_html($this->description); ?></span>
			<?php endif; ?>
			<input class="screen-reader-text"
				   name="toggle_<?php echo esc_attr($this->id); ?>"
				   id="toggle_<?php echo esc_attr($this->id); ?>"
				   type="checkbox"
				   value="<?php echo esc_attr($this->value()); ?>"
				   <?php $this->link(); ?>
				   <?php checked($this->value()); ?>
				   hidden />
			<span class="switch"></span>
		</label>
		<?php
	}

	/**
	 * Render the control's content template
	 */
	protected function content_template() {
		?>
		<# if ( data.label ) { #>
			<span class="customize-control-title">{{{ data.label }}}</span>
		<# } #>
		<# if ( data.description ) { #>
			<span class="description customize-control-description">{{{ data.description }}}</span>
		<# } #>

		<label>
			<input type="checkbox" value="{{ data.value }}" {{{ data.link }}} <# if ( data.value ) { #> checked="checked" <# } #> />
			<span class="switch"></span>
		</label>
		<?php
	}

}
