<?php
/**
 * Underscore.js template.
 *
 * @since 3.3
 * @package fusion-library
 */

?>
<#
	var fieldId     = 'undefined' === typeof param.param_name ? param.id : param.param_name,
		defaultParam  = 'undefined' === typeof param.default ? '' : param.default,
		option_value  = _.isEmpty( option_value ) ? defaultParam : option_value,
		choices       = 'undefined' === typeof param.choices ? [] : param.choices,
		options       = option_value ? JSON.parse( FusionPageBuilderApp.base64Decode( option_value ) ) : [],
		placeholder   = 'undefined' === typeof param.placeholder ? [] : param.placeholder,
		comparisons   = 'undefined' === typeof param.comparisons ? [] : param.comparisons;

		if ( ! choices.length ) {
			// Filter map to only get form elements.
			formElements = _.filter( FusionPageBuilderApp.collection.models, function( element ) {
				var params = element.get( 'params' );
				if ( 'object' !== typeof params ) {
					return false;
				}
				return element.get( 'element_type' ).includes( 'fusion_form' ) && 'fusion_form_submit' !== element.get( 'element_type' ) && 'fusion_form_image_select_input' !== element.get( 'element_type' ) && ( 'string' === typeof params.label || 'undefined' === typeof params.label ) && 'string' === typeof params.name;
			} );

			_.each( formElements, function( formElement ) {
				var params     = formElement.get( 'params' ),
					inputLabel   = 'string' === typeof params.label && '' !== params.label ? params.label : params.name,
					elementType  = formElement.get( 'element_type' ),
					arrayType    = 'fusion_form_checkbox' === elementType || 'fusion_form_image_select' === elementType ? '[]' : '',
					options      = {};

				if ( ( 'undefined' === typeof atts || ( 'undefined' !== typeof atts && atts.cid !== formElement.get( 'cid' ) ) ) && ( '' !== params.name || '' !== inputLabel ) ) {
					options = {
						'id' : params.name + arrayType,
						'title' : inputLabel,
						'type' : 'text',
						'comparisons' : comparisons
					};
					choices.push( options );
				}
			} );
		}
		choices.unshift( placeholder );
#>
<div class="fusion-builder-option-logics fusion-option-{{ fieldId }}">
	<# if ( choices.length ) { #>
		<a href="#" class="fusion-builder-add-sortable-child"><span class="fusiona-plus"></span><span class="add-sortable-child-text">{{ fusionBuilderText.add_new_logic }}</span></a>
		<div class="options-grid">
			<ul class="fusion-logics">
				<# _.each( options, function( option ) {
					var operator = option.operator,
						value	= option.value,
						hasOr = 'or' === operator ? 'has-or' : '',
						field	= option.field,
						additionals = 'undefined' !== typeof option.additionals ? option.additionals: null,
						additionals_text = 'undefined' !== typeof option.additionals_text ? option.additionals_text: null,
						comparison = option.comparison.split( ' ' ).join( '-' ).toLowerCase(),
						currentChoice = choices.find( ( { id } ) => id === field );

						// return eaerly if option no longer exists.
						if ( 'undefined' === typeof currentChoice ) {
							return;
						}

						const description = currentChoice.description || '';
				#>
					<li class="fusion-logic {{hasOr}}" aria-label-or="{{fusionBuilderText.logic_separator_text}}">
						<div class="fusion-logic-controller-head">
							<div class="logic-edit">
								<a href="#" class="fusion-sortable-edit" tabIndex="-1" aria-label="<?php esc_attr_e( 'Move Row', 'fusion-builder' ); ?>">
									<span class="fusiona-pen"></span>
								</a>
							</div>
							<h4 class="logic-title">{{currentChoice.title}}</h4>
							<div class="logic-remove">
								<a href="#" class="fusion-sortable-remove" tabIndex="-1" aria-label="<?php esc_attr_e( 'Remove Row', 'fusion-builder' ); ?>">
									<span class="fusiona-trash-o"></span>
								</a>
							</div>
						</div>
						<div class="fusion-logic-controller-content">
							<# if ( description ) { #> 
								<div class="logic-description description">{{{ description }}}</div>
							<# } #> 
						<div class="logic-field">
							<div class="logic-field-wrapper">
								<# if ( 'undefined' !== typeof FusionApp ) { #>
									<div class="fusion-select-wrapper">
										<select id="{{ fieldId }}" name="{{ fieldId }}" class="fusion-dont-update fusion-logic-choices fusion-hide-from-atts">
										<# _.each( choices, function( choice, key ) { #>
											<#
												choiceName    = 'object' === typeof choice.title ? choice.title[0] : choice.title;
												choiceValue   = Number.isInteger( choice.id ) ? parseInt( choice.id ) : choice.id;
												isPlaceholder = 'placeholder' === choice.id ? 'disabled selected hidden' : '';
											#>
											<option value="{{ choiceValue }}" {{isPlaceholder}} {{ typeof( choiceValue ) !== 'undefined' && field === choiceValue ?  ' selected="selected"' : '' }} >{{ choiceName }}</option>
										<# }); #>
										</select>
										<span class="fusiona-arrow-down"></span>
									</div>

								<# } else { #>
								<div class="select_arrow">
								<select id="{{ fieldId }}" name="{{ fieldId }}" class="fusion-hide-from-atts fusion-logic-choices fusion-select-field<# if ( skipDebounce ) { #> fusion-skip-debounce<# } #><?php echo ( is_rtl() ) ? ' fusion-select-field-rtl' : ''; ?>"<?php echo ( is_rtl() ) ? ' data-dir="rtl"' : ''; ?>>
								<# _.each( choices, function( choice, key ) { #>
									<#
									choiceName    = 'object' === typeof choice.title ? choice.title[0] : choice.title;
									choiceValue   = Number.isInteger( choice.id ) ? parseInt( choice.id ) : choice.id;
									isPlaceholder = 'placeholder' === choice.id ? 'disabled selected hidden' : '';
									#>
									<option value="{{ choiceValue }}" {{isPlaceholder}} {{ typeof( choiceValue ) !== 'undefined' && field === choiceValue ?  ' selected="selected"' : '' }} >{{ choiceName }}</option>
								<# }); #>
								</select>
								</div>
								<# } #>
							</div>
							<# if ( null !== additionals || 'object' === typeof currentChoice.additionals ) { #>
								<div class="logic-additionals">
									<# 
									let additionalsFields = {};
									if ( 'undefined' !== typeof currentChoice.additionals.type ) {
										additionalsFields = { 0: currentChoice.additionals };
									} else {
										additionalsFields = currentChoice.additionals;
									}
									#>
									<# _.each( additionalsFields, function( additional, key ) { #>
										<# if ( 'text' === additional.type ) { #>
											<# const fieldValue = null !== additionals_text ? additionals_text : additionals; #>
											<input type="text" value="{{ fieldValue }}" placeholder="{{ additional.placeholder }}" class="fusion-hide-from-atts fusion-logic-additionals-field" />
										<# } else if ( 'select' === additional.type ) { #>
											<# if ( 'undefined' !== typeof FusionApp ) { #>
												<div class="fusion-select-wrapper">
													<select id="{{ fieldId }}" name="{{ fieldId }}" class="fusion-logic-additionals fusion-select-field fusion-hide-from-atts">
														<# _.each( additional.options, function( choiceName, choiceValue ) {
															choiceName  = 'object' === typeof choiceName ? choiceName[0] : choiceName;
															choiceValue = Number.isInteger( choiceValue ) ? parseInt( choiceValue ) : choiceValue;
														#>
														<option value="{{ choiceValue }}" {{ typeof( additionals ) !== 'undefined' && additionals === choiceValue ?  ' selected="selected"' : '' }} >{{ choiceName }}</option>
														<# } ); #>
													</select>
													<span class="fusiona-arrow-down"></span>
												</div>
											<# } else { #>
												<div class="select_arrow">
												<select id="{{ fieldId }}" name="{{ fieldId }}" class="fusion-hide-from-atts fusion-logic-additionals fusion-select-field<# if ( skipDebounce ) { #> fusion-skip-debounce<# } #><?php echo ( is_rtl() ) ? ' fusion-select-field-rtl' : ''; ?>"<?php echo ( is_rtl() ) ? ' data-dir="rtl"' : ''; ?>>
													<# _.each( additional.options, function( choiceName, choiceValue ) { #>
														<#
														choiceName  = 'object' === typeof choiceName ? choiceName[0] : choiceName;
														choiceValue = Number.isInteger( choiceValue ) ? parseInt( choiceValue ) : choiceValue;
														#>
														<option value="{{ choiceValue }}" {{ typeof( additionals ) !== 'undefined' && additionals === choiceValue ?  ' selected="selected"' : '' }} >{{ choiceName }}</option>
													<# }); #>
												</select>
												</div>
											<# }
										} #>
									<# } ); #>
								</div>
							<# } #>
						</div>
						<div class="fusion-logic-controller">
							<div class="logic-comparison-dropdown">
								<select class="logic-comparison-selection fusion-hide-from-atts">
									<# _.each( currentChoice.comparisons, function( comparisonName, comparisonValue ) { #>
										<#
											isSelected    = comparison === comparisonValue ? 'selected="selected"' : '';
										#>
										<option value="{{comparisonValue}}" {{isSelected}}>{{comparisonName}}</option>
									<# }); #>
								</select>
							</div>
						</div>
						<div class="logic-value">
							<div class="logic-value-field">
								<# if ( 'text' === currentChoice.type ) { #>
										<input type="text" value="{{ value }}" class="fusion-hide-from-atts fusion-logic-option" />
									<# } else if ( 'select' === currentChoice.type ) { #>
										<# if ( 'undefined' !== typeof FusionApp ) { #>
											<div class="fusion-select-wrapper">
												<select id="{{ fieldId }}" name="{{ fieldId }}" class="fusion-dont-update fusion-logic-option fusion-hide-from-atts">
												<# let groupOpen = false; #>
												<# _.each( currentChoice.options, function( choiceName, choiceValue ) { #>
													<#
														choiceName  = 'object' === typeof choiceName ? choiceName[0] : choiceName;
														choiceValue = Number.isInteger( choiceValue ) ? parseInt( choiceValue ) : choiceValue;
													#>
													<# if ( -1 !== choiceValue.indexOf( 'group__' ) ) { #>
														<# if ( groupOpen ) { #>
															</optgroup>
														<# } #>
														<# groupOpen = true #>
														<optgroup label="{{ choiceName }}">
													<# } else { #>
														<option value="{{ choiceValue }}" {{ typeof( value ) !== 'undefined' && value === choiceValue ?  ' selected="selected"' : '' }} >{{ choiceName }}</option>
													<# } #>
												<# }); #>
												<# if ( groupOpen ) { #>
													</optgroup>
												<# } #>
												</select>
												<span class="fusiona-arrow-down"></span>
											</div>
										<# } else { #>
											<div class="select_arrow">
											<select id="{{ fieldId }}" name="{{ fieldId }}" class="fusion-hide-from-atts fusion-logic-option fusion-select-field<# if ( skipDebounce ) { #> fusion-skip-debounce<# } #><?php echo ( is_rtl() ) ? ' fusion-select-field-rtl' : ''; ?>"<?php echo ( is_rtl() ) ? ' data-dir="rtl"' : ''; ?>>
											<# let groupOpen = false #>
											<# _.each( currentChoice.options, function( choiceName, choiceValue ) { #>
												<#
													choiceName  = 'object' === typeof choiceName ? choiceName[0] : choiceName;
													choiceValue = Number.isInteger( choiceValue ) ? parseInt( choiceValue ) : choiceValue;
												#>
												<# if ( -1 !== choiceValue.indexOf( 'group__' ) ) { #>
													<# if ( groupOpen ) { #>
														</optgroup>
													<# } #>
													<# groupOpen = true #>
													<optgroup label="{{ choiceName }}">
												<# } else { #>
													<option value="{{ choiceValue }}" {{ typeof( choiceValue ) !== 'undefined' && value === choiceValue ?  ' selected="selected"' : '' }} >{{ choiceName }}</option>
												<# } #>
											<# }); #>
											<# if ( groupOpen ) { #>
												</optgroup>
											<# } #>
											</select>
											</div>
										<# }
									} #>
								</div>
						</div>
						<div class="logic-operator">
							<span class="fusion-sortable-operator {{operator}}" tabIndex="-1" aria-label-and="<?php esc_attr_e( 'AND', 'fusion-builder' ); ?>" aria-label-or="<?php esc_attr_e( 'OR', 'fusion-builder' ); ?>"></span>
						</div>
						</div>
					</li>
				<# } ); #>
			</ul>
			<input class="logic-values skip-update" type="hidden" id="{{ param.param_name }}" name="{{ param.param_name }}" value="{{ option_value }}">
		</div>
		<div class="fusion-logic-template" style="display:none;" >
			<div class="fusion-logic-controller-head">
				<div class="logic-edit">
					<a href="#" class="fusion-sortable-edit" tabIndex="-1" aria-label="<?php esc_attr_e( 'Move Row', 'fusion-builder' ); ?>">
						<span class="fusiona-pen"></span>
					</a>
				</div>
				<h4 class="logic-title">{{ typeof( choices[0] ) === 'object' ?  choices[0].title : '' }}</h4>
				<div class="logic-remove">
					<a href="#" class="fusion-sortable-remove" tabIndex="-1" aria-label="<?php esc_attr_e( 'Remove Row', 'fusion-builder' ); ?>">
						<span class="fusiona-trash-o"></span>
					</a>
				</div>
			</div>
			<div class="fusion-logic-controller-content" style="display:block">
			<div class="logic-field">
				<div class="logic-field-wrapper">
					<# if ( 'undefined' !== typeof FusionApp ) { #>
					<div class="fusion-select-wrapper">
						<select id="{{ fieldId }}" name="{{ fieldId }}" class="fusion-hide-from-atts fusion-logic-choices fusion-dont-update">
						<# _.each( choices, function( choice, key ) { #>
							<#
								isPlaceholder = 'placeholder' === choice.id ? 'disabled selected hidden' : '';
							#>
							<option value="{{ choice.id }}" {{isPlaceholder}} {{ typeof( value ) !== 'undefined' && field === choice.id ?  ' selected="selected"' : '' }}>{{ choice.title }}</option>
						<# }); #>
						</select>
						<span class="fusiona-arrow-down"></span>
					</div>
					<# } else { #>
					<div class="select_arrow">
					<select id="{{ fieldId }}" name="{{ fieldId }}" class="fusion-hide-from-atts fusion-logic-choices fusion-select-field fusion-skip-init<# if ( skipDebounce ) { #> fusion-skip-debounce<# } #><?php echo ( is_rtl() ) ? ' fusion-select-field-rtl' : ''; ?>"<?php echo ( is_rtl() ) ? ' data-dir="rtl"' : ''; ?>>
					<# _.each( choices, function( choice, key ) { #>
						<#
							isPlaceholder = 'placeholder' === choice.id ? 'disabled selected hidden' : '';
						#>
						<option value="{{ choice.id }}" {{isPlaceholder}} {{ typeof( value ) !== 'undefined' && field === choice.id ?  ' selected="selected"' : '' }}>{{ choice.title }}</option>
					<# }); #>
					</select>
					</div>
					<# } #>
				</div>
			</div>

			<div class="fusion-logic-controller">
				<div class="logic-comparison-dropdown">
					<select class="logic-comparison-selection fusion-hide-from-atts">
						<# if ( 'object' === typeof choices[0] ) {
							_.each( choices[0]['comparisons'], function( comparisonName, comparisonValue ) { #>
								<#
									isSelected    = 'equal' === comparisonValue ? 'active' : '';
								#>
								<option value="{{comparisonValue}}" {{isSelected}}>{{comparisonName}}</option>
							<# });
						}  #>
					</select>
				</div>

			</div>
			<div class="logic-value">
				<div class="logic-value-field">
					<# if ( 'object' === typeof choices[0] ) {
						if ( 'text' === choices[0]['type'] ) { #>
							<input type="text" value="" disabled placeholder="{{fusionBuilderText.condition_value}}" class="fusion-hide-from-atts fusion-logic-option" />
						<# } else if ( 'select' === choices[0]['type'] ) { #>
							<# if ( 'undefined' !== typeof FusionApp ) { #>
								<div class="fusion-select-wrapper">
									<select id="{{ fieldId }}" name="{{ fieldId }}" class="fusion-dont-update fusion-logic-option fusion-hide-from-atts">
									<# _.each( choices[0]['options'], function( choiceName, choiceValue ) { #>
										<#
											choiceName  = 'object' === typeof choiceName ? choiceName[0] : choiceName;
											choiceValue = Number.isInteger( choiceValue ) ? parseInt( choiceValue ) : choiceValue;
										#>
										<option value="{{ choiceValue }}" {{ typeof( value ) !== 'undefined' && field === choiceValue ?  ' selected="selected"' : '' }} >{{ choiceName }}</option>
									<# }); #>
									</select>
									<span class="fusiona-arrow-down"></span>
								</div>
							<# } else { #>
							<div class="select_arrow"></div>
							<select id="{{ fieldId }}" name="{{ fieldId }}" class="fusion-hide-from-atts fusion-logic-option fusion-select-field<# if ( skipDebounce ) { #> fusion-skip-debounce<# } #><?php echo ( is_rtl() ) ? ' fusion-select-field-rtl' : ''; ?>"<?php echo ( is_rtl() ) ? ' data-dir="rtl"' : ''; ?>>
							<# _.each( choices[0]['options'], function( choiceName, choiceValue ) { #>
								<#
									choiceName  = 'object' === typeof choiceName ? choiceName[0] : choiceName;
									choiceValue = Number.isInteger( choiceValue ) ? parseInt( choiceValue ) : choiceValue;
								#>
								<option value="{{ choiceValue }}" {{ typeof( choiceValue ) !== 'undefined' && field === choiceValue ?  ' selected="selected"' : '' }} >{{ choiceName }}</option>
							<# }); #>
							</select>
							<# }
						}
					} #>
				</div>
			</div>
			<div class="logic-operator">
				<span href="#" class="fusion-sortable-operator and" tabIndex="-1" aria-label-and="<?php esc_attr_e( 'AND', 'fusion-builder' ); ?>" aria-label-or="<?php esc_attr_e( 'OR', 'fusion-builder' ); ?>"></span>
			</div>
		</div>
		</div>
		<div class="fusion-logics-all-choices" style="display:none">{{JSON.stringify( choices )}}</div>
	<# } else { #>
		<div class="no-fields">{{fusionBuilderText.no_logic_field}}</div>
	<# } #>
</div>
