{% extends 'wizard/pages/base.twig' %}

{% block head_stylesheets %}
	{{ parent() }}
	<link rel="stylesheet" href="{{ hrefs.css_steps }}" />
	<link rel="stylesheet" href="{{ hrefs.css_wizard }}" />
	<link rel="stylesheet" href="{{ hrefs.css_fancybox }}" />
{% endblock %}

{% block head_scripts %}
	{{ parent() }}
	<script type="text/javascript" src="{{ hrefs.js_steps }}"></script>
	<script type="text/javascript" src="{{ hrefs.js_wizard }}"></script>
	<script type="text/javascript" src="{{ hrefs.js_fancybox }}"></script>
{% endblock %}

{% block body_content_main %}
	<div class="row">
		<div class="col-12 col-xl-8 offset-xl-2">
			<div id="wizard"></div>
		</div>
	</div>
{% endblock %}

{% block body_footer_scripts %}
	<script type="text/javascript">

		jQuery( document ).ready( function ( $ ) {

			var settings = {
				/* Appearance */
				headerTag: "h1",
				bodyTag: "div",
				contentContainerTag: "div",
				actionContainerTag: "div",
				stepsContainerTag: "div",
				cssClass: "wizard",
				stepsOrientation: $.fn.steps.stepsOrientation.vertical,

				/* Templates */
				titleTemplate: '<span class="number">#index#.</span> #title#',
				loadingTemplate: '<span class="spinner"></span> #text#',

				/* Behaviour */
				autoFocus: false,
				enableAllSteps: false,
				enableKeyNavigation: true,
				enablePagination: true,
				suppressPaginationOnFocus: true,
				enableContentCache: true,
				enableCancelButton: false,
				enableFinishButton: false,
				preloadContent: false,
				showFinishButtonAlways: false,
				forceMoveForward: false,
				saveState: false,
				startIndex: 0,

				/* Transition Effects */
				transitionEffect: $.fn.steps.transitionEffect.slide,
				transitionEffectSpeed: 100,

				/* Events */
				onStepChanging: function ( event, currentIndex, newIndex ) {
					return true;
				},
				onStepChanged: function ( event, currentIndex, priorIndex ) {

					// We delete the next steps as they're dynamically generated.
					if ( currentIndex < priorIndex ) {
						while ( priorIndex > currentIndex ) {
							jQuery( this ).steps( "remove", priorIndex-- );
						}
					}
				},
				onCanceled: function ( event ) {
				},
				onFinishing: function ( event, currentIndex ) {
					return true;
				},
				onFinished: function ( event, currentIndex ) {
				},

				/* Labels */
				labels: {
					cancel: "Cancel",
					current: "current step:",
					pagination: "Pagination",
					finish: "Finish",
					next: "Next",
					previous: "Previous",
					loading: "Loading ..."
				}
			};

			// Initialize wizard
			var $oWizardContainer = $( "#wizard" );
			var $oWizard = $oWizardContainer.steps( settings );
			$oWizard.steps( 'add', {{ data.wizard_first_step|raw }} );
			var $oActions = $( 'div.actions', $oWizard );
			$oActions.prependTo( $oWizardContainer );
			$oActions.css( 'display', 'none' );
		} );
	</script>


	<script>
var iCWP_WPSF_Wizard_FormHandler = new function () {

	var bRequestCurrentlyRunning = false;

	var aWizardSteps = {{ data.wizard_steps|raw }};
	var sWizardSlug = '{{ data.wizard_slug }}';

	var submitWizardForm = function ( event ) {
		event.preventDefault();

		var $oThis = jQuery( event.currentTarget );
		var $oForm = $oThis.closest( 'form' );

		sendFormRequest( $oForm );
	};

	var sendFormRequest = function ( $oForm ) {
		if ( bRequestCurrentlyRunning ) {
			return false;
		}
		bRequestCurrentlyRunning = true;

		jQuery( '<input />' ).attr( 'type', 'hidden' ).attr( 'name', 'action' )
							 .attr( 'value', "{{ ajax.content.action }}" )
							 .appendTo( $oForm );
		jQuery( '<input />' ).attr( 'type', 'hidden' ).attr( 'name', 'exec' )
							 .attr( 'value', "{{ ajax.content.exec }}" )
							 .appendTo( $oForm );
		jQuery( '<input />' ).attr( 'type', 'hidden' ).attr( 'name', 'exec_nonce' )
							 .attr( 'value', "{{ ajax.content.exec_nonce }}" )
							 .appendTo( $oForm );
		jQuery( '<input />' ).attr( 'type', 'hidden' ).attr( 'name', 'mod_slug' )
							 .attr( 'value', "{{ ajax.content.mod_slug }}" )
							 .appendTo( $oForm );

		if ( jQuery( 'p.wizard-response', $oForm ).length === 0 ) {
			$oForm.append( '<p class="wizard-response alert"></p>' )
		}

		var $oResponseField = jQuery( 'p.wizard-response', $oForm );
		$oResponseField.removeClass( 'alert-danger alert-success' )
					   .html( '...' );

		var $oSubmitButton = jQuery( 'button[type=submit]', $oForm );
		$oSubmitButton.prop( 'disabled', true );

		jQuery.post( '{{ ajax.content.ajaxurl }}', $oForm.serialize(),
			function ( oResponse ) {

				if ( typeof oResponse === "undefined" || typeof oResponse.data === "undefined" ) {
					alert( 'There was a critical failure in the request. Cannot proceed. Example causes are HTTPS misconfiguration or PHP error warnings output.' );
					return;
				}

				if ( oResponse.success ) {
					$oResponseField.removeClass( 'alert-danger' )
								   .addClass( 'alert-success' );
				}
				else {
					$oResponseField.removeClass( 'alert-success' )
								   .addClass( 'alert-danger' );
					$oSubmitButton.prop( 'disabled', false );
				}

				var bRerender = false;
				var sMessage = 'Unknown Error';
				if ( undefined !== oResponse.data ) {

					if ( undefined !== oResponse.data.rerender && oResponse.data.rerender === true ) {
						bRerender = true;
					}
					sMessage = oResponse.data.message;
				}
				$oResponseField.html( sMessage );

				if ( bRerender ) {
					iCWP_WPSF_Wizard_FormHandler.reRenderCurrent();
				}

				jQuery( $oForm ).trigger( 'icwpWizardFormSubmit', oResponse );
			}
		).always(
			function () {
				bRequestCurrentlyRunning = false;
			}
		);
	};

	var renderNext = function ( event ) {
		event.preventDefault();
		// jQuery( event.currentTarget ).prop( 'disabled', true );
		renderNextAuto();
	};

	var renderPrevious = function ( event ) {
		event.preventDefault();
		// jQuery( event.currentTarget ).prop( 'disabled', true );
		renderPreviousAuto();
	};

	var renderPreviousAuto = function () {
		var $oWizard = jQuery( '#wizard' );
		$oWizard.steps( 'previous' );
		// $oWizard.steps( 'remove', $oWizard.steps( 'getCurrentIndex' )+1 );
	};

	var renderNextAuto = function () {

		var $oWizard = jQuery( '#wizard' );
		var reqData = {{ ajax.steps_as_json|raw }};
		reqData.current_index = $oWizard.steps( 'getCurrentIndex' );
		reqData.wizard_steps = aWizardSteps;
		reqData.wizard_slug = sWizardSlug;

		jQuery.post( '{{ ajax.steps.ajaxurl }}', reqData,
			function ( oResponse ) {
				if ( typeof oResponse === "undefined" || typeof oResponse.data === "undefined" ) {
					alert( 'There was a critical failure in the request. Cannot proceed. Example causes are HTTPS misconfiguration or PHP error warnings output.' );
					return;
				}

				if ( undefined !== oResponse.data.next_step ) {
					$oWizard.steps( 'add', oResponse.data.next_step );
					$oWizard.steps( 'next' );
				}
			}
		).always(
			function () {
			}
		);
	};

	this.reRenderCurrent = function () {
		var $oWizard = jQuery( '#wizard' );
		$oWizard.steps( 'previous' );
		var nCurrent = $oWizard.steps( 'getCurrentIndex' );
		$oWizard.steps( 'remove', nCurrent + 1 );
		renderNextAuto();
	};

	var setHandlers = function () {
		jQuery( document ).on( 'submit', 'form.icwp-wizard-form', submitWizardForm );
		jQuery( document ).on( 'click', 'div.wizard-slide button.ButtonNextSlide', renderNext );
		jQuery( document ).on( 'click', 'div.wizard-slide button.ButtonPreviousSlide', renderPrevious );
	};

	this.initialise = function () {
		jQuery( document ).ready( setHandlers );
	};
}();
iCWP_WPSF_BodyOverlay.initialise();
iCWP_WPSF_Wizard_FormHandler.initialise();

jQuery( document ).ajaxStart( function () {
	iCWP_WPSF_BodyOverlay.show();
	jQuery( 'body' ).addClass( 'wait' );
} );
jQuery( document ).ajaxComplete( function () {
	iCWP_WPSF_BodyOverlay.hide();
	jQuery( 'body' ).removeClass( 'wait' );
} );


</script>
{% endblock %}