<?php
class MFN_Options_gradient extends Mfn_Options_field
{

	/**
	 * Render
	 */

	public function render( $meta = false, $vb = false, $js = false )
	{

		$value = false;
		$border = false;
		$pseudoval = '';

	  // background-color: transparent;
	  // background-image: linear-gradient(270deg, #C65A5A 50%, #0A0909 100%); // linear
	  // background-image: radial-gradient(at center center, #C65A5A 50%, #0A0909 100%); // radial

	  if ( isset($this->value) ) {
			$value = $this->value;
		}

		if( isset($value['color']) && isset($value['color2']) && isset($value['location']) && isset($value['location2']) && isset($value['type']) && isset($value['angle']) && isset($value['position']) ){

			$pseudoval .= $value['type'].'(';

			if( $value['type'] == 'linear-gradient' ){
				$pseudoval .= $value['angle'].'deg, ';
			}else{
				$pseudoval .= 'at '.$value['position'].', ';
			}

			$pseudoval .= $value['color'].' ';
			$pseudoval .= $value['location'].'%, ';
			$pseudoval .= $value['color2'].' ';
			$pseudoval .= $value['location2'].'%)';

		}

		$rand = md5(time().rand(0, 9999));

		echo '<div class="gradient-form">';

			echo '<input '. $this->get_name( $meta, 'string' ) .' class="pseudo-field gradient-hidden mfn-field-value" type="hidden" data-key="string" value="'.$pseudoval.'" autocomplete="off"/>';

			// color 1

			echo '<div class="form-control">';
				echo '<label>Color</label>';
				echo '<div class="form-group color-picker has-addons has-addons-prepend">';
					echo '<div class="color-picker-group">';

						echo '<div class="form-addon-prepend">';
							echo '<a href="#" class="color-picker-open"><span class="label '. ( isset($value['color']) ? esc_attr( mfn_brightness( $value['color'] ) ) : null ) .'" style="background-color:'. ( isset($value['color']) ? esc_attr( $value['color'] ) : '' ) .';border-color:'. esc_attr( $border ) .'"><i class="icon-bucket"></i></span></a>';
						echo '</div>';

						echo '<div class="form-control has-icon has-icon-right">';
							if( $js ){
								echo '<input '. $this->get_name( $meta, 'color' ) .' class="mfn-form-control field-to-object gradient-color mfn-form-input color-picker-vb" type="text" value="\'+('.$js.' && '.$js.'["color"] ? '.$js.'["color"] : "")+\'" autocomplete="off" data-key="color" />';
							}else{
								echo '<input '. $this->get_name( $meta, 'color' ) .' class="mfn-form-control gradient-color mfn-form-input color-picker-vb" type="text" value="'. ( isset($value['color']) ? esc_attr( $value['color'] ) : '' ) .'" autocomplete="off" data-key="color" />';
							}
							echo '<a class="mfn-option-btn mfn-option-text color-picker-clear" href="#"><span class="text">Clear</span></a>';
						echo '</div>';

						if( ! $vb ){
							echo '<input class="has-colorpicker" type="text" value="'. esc_attr( $value['color'] ?? '' ) .'" data-alpha="true" autocomplete="off" style="visibility:hidden" />';
						}

					echo '</div>';
				echo '</div>';
			echo '</div>';

			// location 1

			echo '<div class="form-control">';
				echo '<label>Location</label>';
				echo '<div class="form-group range-slider">';
					echo '<div class="form-control">';
						if( $js ){
							echo '<input '. $this->get_name( $meta, 'location' ) .' class="mfn-form-control field-to-object mfn-form-input gradient-location mfn-sliderbar-value mfn-gradient-field" type="number" data-unit="" data-step="1" min="0" max="100" value="\'+('.$js.' && '.$js.'["location"] ? '.$js.'["location"] : "0")+\'" data-key="location">';
						}else{
							echo '<input '. $this->get_name( $meta, 'location' ) .' class="mfn-form-control mfn-form-input gradient-location mfn-sliderbar-value mfn-gradient-field" type="number" data-unit="" data-step="1" min="0" max="100" value="'. ( $value['location'] ?? '0' ) .'" data-key="location">';
						}
					echo '</div>';
					echo '<div class="sliderbar"></div>';
				echo '</div>';
			echo '</div>';

			// color 2

			echo '<div class="form-control">';
				echo '<label>Second color</label>';
				echo '<div class="form-group color-picker has-addons has-addons-prepend">';
					echo '<div class="color-picker-group">';

						echo '<div class="form-addon-prepend">';
							echo '<a href="#" class="color-picker-open"><span class="label '. ( isset($value['color2']) ? esc_attr( mfn_brightness( $value['color2'] ) ) : null ) .'" style="background-color:'. ( isset($value['color2']) ? esc_attr( $value['color2'] ) : '' ) .';border-color:'. esc_attr( $border ) .'"><i class="icon-bucket"></i></span></a>';
						echo '</div>';

						echo '<div class="form-control has-icon has-icon-right">';
							if( $js ){
								echo '<input '. $this->get_name( $meta, 'color2' ) .' class="mfn-form-control field-to-object gradient-color2 mfn-form-input color-picker-vb" type="text" value="\'+('.$js.' && '.$js.'["color2"] ? '.$js.'["color2"] : "")+\'" autocomplete="off" data-key="color2" />';
							}else{
								echo '<input '. $this->get_name( $meta, 'color2' ) .' class="mfn-form-control gradient-color2 mfn-form-input color-picker-vb" type="text" value="'. ( isset($value['color2']) ? esc_attr( $value['color2'] ) : '' ) .'" autocomplete="off" data-key="color2" />';
							}
							echo '<a class="mfn-option-btn mfn-option-text color-picker-clear" href="#"><span class="text">Clear</span></a>';
						echo '</div>';

						if( ! $vb ){
							echo '<input class="has-colorpicker" type="text" value="'. esc_attr( $value['color2'] ?? '' ) .'" data-alpha="true" autocomplete="off" style="visibility:hidden" />';
						}

					echo '</div>';
				echo '</div>';
			echo '</div>';

			// location 2

			echo '<div class="form-control">';
				echo '<label>Second location</label>';
				echo '<div class="form-group range-slider">';
					echo '<div class="form-control">';
						if( $js ){
							echo '<input '. $this->get_name( $meta, 'location2' ) .' class="mfn-form-control field-to-object mfn-form-input gradient-location2 mfn-sliderbar-value mfn-gradient-field" type="number" data-unit="" data-step="1" min="0" max="100" value="\'+('.$js.' && '.$js.'["location2"] ? '.$js.'["location2"] : "100")+\'" data-key="location2">';
						}else{
							echo '<input '. $this->get_name( $meta, 'location2' ) .' class="mfn-form-control mfn-form-input gradient-location2 mfn-sliderbar-value mfn-gradient-field" type="number" data-unit="" data-step="1" min="0" max="100" value="'. ( $value['location2'] ?? '100' ) .'" data-key="location2">';
						}
					echo '</div>';
					echo '<div class="sliderbar"></div>';
				echo '</div>';
			echo '</div>';

			// type

			echo '<div class="form-control mfn-form-row" id="gradient-type'.$rand.'">';
				echo '<label>Type</label>';
				echo '<div class="form-group">';
					echo '<select '. $this->get_name( $meta, 'type' ) .' class="mfn-form-control field-to-object condition-field mfn-form-input gradient-type" data-key="type">';
						if( $js ) {
							echo '<option \'+('.$js.' && '.$js.'["type"] && '.$js.'["type"] == "linear-gradient" ? "selected" : null)+\' value="linear-gradient">Linear gradient</option>';
							echo '<option \'+('.$js.' && '.$js.'["type"] && '.$js.'["type"] == "radial-gradient" ? "selected" : null)+\' value="radial-gradient">Radial gradient</option>';
						}else{
							echo '<option '. ( isset($value['type']) && $value['type'] == "linear-gradient" ? "selected" : null ) .' value="linear-gradient">Linear gradient</option>';
							echo '<option '. ( isset($value['type']) && $value['type'] == "radial-gradient" ? "selected" : null ) .' value="radial-gradient">Radial gradient</option>';
						}
					echo '</select>';
				echo '</div>';
			echo '</div>';

			// angle

			echo '<div class="form-control mfn-form-row activeif activeif-gradient-type' . $rand . '" '
			   . "data-condition='" . htmlspecialchars(json_encode([
			        'id'  => 'gradient-type' . $rand,
			        'opt' => 'is',
			        'val' => 'linear-gradient',
			    ]), ENT_QUOTES, 'UTF-8') . "'>";

				echo '<label>Angle</label>';
				echo '<div class="form-group range-slider">';
					echo '<div class="form-control">';
						if( $js ){
							echo '<input '. $this->get_name( $meta, 'angle' ) .' class="mfn-form-control field-to-object mfn-form-input gradient-angle mfn-sliderbar-value mfn-gradient-field" type="number" data-unit="" data-step="1" min="0" max="360" value="\'+('.$js.' && '.$js.'["angle"] ? '.$js.'["angle"] : "0")+\'" data-key="angle">';
						}else{
							echo '<input '. $this->get_name( $meta, 'angle' ) .' class="mfn-form-control mfn-form-input gradient-angle mfn-sliderbar-value mfn-gradient-field" type="number" data-unit="" data-step="1" min="0" max="360" value="'. ( $value['angle'] ?? '0' ) .'" data-key="angle">';
						}
					echo '</div>';
					echo '<div class="sliderbar"></div>';
				echo '</div>';
			echo '</div>';

			// position

			echo '<div class="form-control mfn-form-row activeif activeif-gradient-type' . $rand . '" '
			   . "data-condition='" . htmlspecialchars(json_encode([
			        'id'  => 'gradient-type' . $rand,
			        'opt' => 'is',
			        'val' => 'radial-gradient',
			    ]), ENT_QUOTES, 'UTF-8') . "'>";

				echo '<div class="form-group">';
					echo '<label>Position</label>';
					echo '<select '. $this->get_name( $meta, 'position' ) .' class="mfn-form-control field-to-object mfn-form-input gradient-position">';
						if( $js ){
							echo '<option \'+('.$js.' && '.$js.'["position"] && '.$js.'["position"] == "center center" ? "selected" : null)+\' value="center center">Center Center</option>';
							echo '<option \'+('.$js.' && '.$js.'["position"] && '.$js.'["position"] == "center left" ? "selected" : null)+\' value="center left">Center Left</option>';
							echo '<option \'+('.$js.' && '.$js.'["position"] && '.$js.'["position"] == "center right" ? "selected" : null)+\' value="center right">Center Right</option>';
							echo '<option \'+('.$js.' && '.$js.'["position"] && '.$js.'["position"] == "top center" ? "selected" : null)+\' value="top center">Top Center</option>';
							echo '<option \'+('.$js.' && '.$js.'["position"] && '.$js.'["position"] == "top left" ? "selected" : null)+\' value="top left">Top Left</option>';
							echo '<option \'+('.$js.' && '.$js.'["position"] && '.$js.'["position"] == "top right" ? "selected" : null)+\' value="top right">Top Right</option>';
							echo '<option \'+('.$js.' && '.$js.'["position"] && '.$js.'["position"] == "bottom center" ? "selected" : null)+\' value="bottom center">Bottom Center</option>';
							echo '<option \'+('.$js.' && '.$js.'["position"] && '.$js.'["position"] == "bottom left" ? "selected" : null)+\' value="bottom left">Bottom Left</option>';
							echo '<option \'+('.$js.' && '.$js.'["position"] && '.$js.'["position"] == "bottom right" ? "selected" : null)+\' value="bottom right">Bottom Right</option>';
						}else{
							echo '<option '.( !empty($value['position']) && $value['position'] == 'center center' ? "selected" : null ).' value="center center">Center Center</option>';
							echo '<option '.( !empty($value['position']) && $value['position'] == 'center left' ? "selected" : null ).' value="center left">Center Left</option>';
							echo '<option '.( !empty($value['position']) && $value['position'] == 'center right' ? "selected" : null ).' value="center right">Center Right</option>';
							echo '<option '.( !empty($value['position']) && $value['position'] == 'top center' ? "selected" : null ).' value="top center">Top Center</option>';
							echo '<option '.( !empty($value['position']) && $value['position'] == 'top left' ? "selected" : null ).' value="top left">Top Left</option>';
							echo '<option '.( !empty($value['position']) && $value['position'] == 'top right' ? "selected" : null ).' value="top right">Top Right</option>';
							echo '<option '.( !empty($value['position']) && $value['position'] == 'bottom center' ? "selected" : null ).' value="bottom center">Bottom Center</option>';
							echo '<option '.( !empty($value['position']) && $value['position'] == 'bottom left' ? "selected" : null ).' value="bottom left">Bottom Left</option>';
							echo '<option '.( !empty($value['position']) && $value['position'] == 'bottom right' ? "selected" : null ).' value="bottom right">Bottom Right</option>';
						}
					echo '</select>';
				echo '</div>';
			echo '</div>';

		echo '</div>';

	}


	/**
	 * Enqueue Function.
	 */

	public function enqueue()
	{
		// this field uses field_dimensions.js and field_color.js

		wp_enqueue_script( 'mfn-field-gradient', MFN_OPTIONS_URI .'fields/gradient/field_gradient.js', array( 'jquery' ), MFN_THEME_VERSION, true );

	}

}
