<?php
/**
 * Heading for the customizer panels
 *
 * @package Multi
 */

if ( ! defined( 'ABSPATH' ) ) {
	die;
}
/**
 * Range control class
 */
class Multimagazine_Range_Control extends WP_Customize_Control {
	/**
	 * Minimum value
	 *
	 * @var integer $min Min. allowed value.
	 */
	public $min = 0;
	/**
	 * Maximum value
	 *
	 * @var integer $max Max. allowed value.
	 */
	public $max = 100;
	/**
	 * Step by which value changes on clicking the control's arrows
	 *
	 * @var integer $step Step value.
	 */
	public $step = 1;
	/**
	 * Control label
	 *
	 * @var string $label Label text.
	 */
	public $label = '';
	/**
	 * Default value
	 *
	 * @var integer $default Default value of the control.
	 */
	public $default = 0;

	/**
	 * Enqueues control's js
	 */
	public function enqueue() {
		wp_enqueue_script( 'multimagazine-range-control', get_template_directory_uri() . '/js/customize/range.js', array(), '1', true );
	}

	/**
	 * Renders the control
	 */
	public function render_content() {
		?>
		<label for="" class="customize-control-title"><?php echo esc_html( $this->label ); ?></label>
		<?php if ( ! empty( $this->description ) ) : ?>
		<span class="description customize-control-description"><?php echo esc_html( $this->description ); ?></span>
		<?php endif; ?>

		<div class="multi-range-control">
			<input
				type="range"
				id="<?php echo esc_attr( $this->id ); ?>"
				min="<?php echo esc_attr( $this->min ); ?>"
				max="<?php echo esc_attr( $this->max ); ?>"
				step="<?php echo esc_attr( $this->step ); ?>"
				class="multi-range-control-slider"
				value="<?php echo esc_attr( $this->value() ); ?>"
				>
			<input
				min="<?php echo esc_attr( $this->min ); ?>"
				max="<?php echo esc_attr( $this->max ); ?>"
				step="<?php echo esc_attr( $this->step ); ?>"
				value="<?php echo esc_attr( $this->value() ); ?>"
				type="number"
				class="multi-range-control-input"
				data-customize-setting-link="<?php echo esc_attr( $this->id ); ?>"
				>
			<a href="#" class="multi-range-control-reset dashicons dashicons-image-rotate" data-value="<?php echo esc_attr( $this->default ); ?>" title="<?php esc_attr_e( 'Reset to default', 'multimagazine' ); ?>"></a>
		</div>
		<?php
	}
}
