{% block body_content %}
	<div class="container-fluid">
		{% block body_content_header %}
			<div class="row">
				<div class="col-4 offset-4"></div>
			</div>
		{% endblock %}

		{% block body_content_main %}
			<div class="row row-cols-1 justify-content-center">
				<div class="col-12">
					<div id="wizard"></div>
				</div>
			</div>
		{% endblock %}

		{% block body_content_footer %}
			<div class="row">
				<div class="col-4 offset-4"></div>
			</div>
		{% endblock %}
	</div>
{% endblock %}

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

    var bRequestCurrentlyRunning = false;

	// bring everything inside this IIFE so that they are aware of each other
	(function ( $ ) {
		$( document ).ready( function () {
			initializeSteps();
			initializeHandlers();
		} );

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

				/* Templates */
				titleTemplate: '<div class="step"><span class="shield-progress-bar"></span><div class="step-number"></div><div class="step-title">#title#</div></div>',
				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 ) {
					if ( currentIndex >= priorIndex ) {
						return;
					}
					// have to use this workaround
					// instead of removing steps and then adding, which does not work with jquery.steps
					// remove effectively does something similar internally so let's just use it directly
					for ( var x = 1; x < 6; x++ ) {
						$( '#wizard-t-' + (currentIndex + x) ).parent( 'li' ).removeClass( 'done' ).addClass( 'disabled' );
					}
				},
				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 );
			addOtherSteps( $oWizard );

			var $oActions = $( 'div.actions', $oWizard );
			$oActions.prependTo( $oWizardContainer );
			$oActions.css( 'display', 'none' );
		}

		function addOtherSteps( $oWizard ) {
			// load all steps for showing progress bar
			var currentStep = {{ data.wizard_first_step|raw }};
			var otherSteps = {{ data.wizard_step_names|raw }};
			otherSteps.forEach( function ( step, index ) {
				if ( step === currentStep.title ) {
					$oWizard.steps( 'add', {{ data.wizard_first_step|raw }} );
					return;
				}
				$oWizard.steps( 'add', { title: step, contentMode: 'async' } );
			} );
		}

		function initializeHandlers() {
			$( document ).on( 'submit', 'form.icwp-wizard-form', submitWizardForm );
			$( document ).on( 'click', 'div.wizard-slide button.ButtonNextSlide', renderNext );
			$( document ).on( 'click', 'div.wizard-slide button.ButtonSlidePrevious', renderPrevious );
		}

		function reRenderCurrent() {
			var $oWizard = $( '#wizard' );
			$oWizard.steps( 'previous' );
			var nCurrent = $oWizard.steps( 'getCurrentIndex' );
			renderNextAuto( true );
		};

		function renderPrevious( event ) {
			var $oWizard = $( '#wizard' );
			$oWizard.steps( 'previous' );
		};

		function renderNext( event ) {
			event.preventDefault();
			renderNextAuto();
		};

		function renderNextAuto( overlay = false ) {
			if ( overlay ) {
				toggleOverlay( 'show' );
			}

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

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

			$.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 ) {
						var removeIndex = $oWizard.steps( 'getCurrentIndex' ) + 1;
						$oWizard.steps( 'remove', removeIndex );
						$oWizard.steps( 'insert', removeIndex, oResponse.data.next_step );
						$oWizard.steps( 'next' );
					}
				}
			).always(
				function () {
					if ( overlay ) {
						toggleOverlay( 'hide' );
					}
				}
			);
		};

		function toggleOverlay( showOrHide ) {
			if ( showOrHide === 'show' ) {
				iCWP_WPSF_BodyOverlay.show();
				$( 'body' ).addClass( 'wait' );
			}
			else {
				iCWP_WPSF_BodyOverlay.hide();
				$( 'body' ).removeClass( 'wait' );
			}
		}

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

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

			sendFormRequest( $oForm );
		}

		function sendFormRequest( $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 );

			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' );
					}

					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 ) {
						reRenderCurrent();
					}
					else if ( oResponse.success ) {
						// renderNextAuto( true );
					}

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

	})( jQuery );

</script>
{% endblock %}