//This logic will still be changed since there are changes from marketing
console.log("form-step");
//overide parent label color
$('[data-toggle-req]').next('label').css({"color":"#01010f", "font-weight":"400"})
$('[data-toggle-req]').find('label:first-child').css({"color":"#01010f", "font-weight":"700"})
var captchaVerified = false;
/*var captchaVerified = false;
function captchaCallback(){
captchaVerified = true;
$( '[data-form-label-evp]' ).find( '#captcha-container' ).removeClass( 'is-invalid' ); //FOR DYNAMIC FORMS
$( '#form-prodserv-evp' ).find( '#captcha-container' ).removeClass( 'is-invalid' ); //FOR LEGACY FORMS
$( '[data-form-label-evp]' ).find( '.captcha' ).removeClass( 'is-invalid' ); //FOR DYNAMIC FORMS
$( '#form-prodserv-evp' ).find( '.captcha' ).removeClass( 'is-invalid' ); //FOR LEGACY FORMS
$( '#form-prodserv-evp' ).find('.captcha-error').hide();
console.log('CAPTCHA SUCCESS');
}
}*/
var $nextBtn = $(".step-next"),
$prevBtn = $(".step-prev"),
$fieldSets = $("fieldset.form-wizard"),
$animationNext = "slideInRight",
$animationPrev = "slideInLeft",
$error = "shake",
$overlay = $(".overlay-evp"),
$form = $("#form-prodserv-evp");
var nextIndex = 0,
newNextValue = 0;
var $numberofSlides = $fieldSets.length ;
$numberofSlides--; //lenght starts from 1. we just have to minus it to 1 so it match the index[0]
//submit form
$('#form-prodserv-evp').on("submit", function(ev) {
ev.preventDefault();
$form.foundation('validateForm');
var formHasCaptcha = $form.find('#captcha-container').length;
var formHasCaptcha = $form.find('.captcha').length;
if(formHasCaptcha < 1){
captchaVerified = true; //force captcha verified for forms that dont actually use captcha
}
if( !$form.find( '.is-invalid-input' ).length && captchaVerified == true ){
var formLabel = $form.attr("data-form-label-evp");
gtmEvent( 'Form_Ajax_Success', formLabel); //GA Log
ajaxSubmitLegacy( $form );
$('.nextPrev').hide();
}else{
if( captchaVerified == false ){
$form.find( '#captcha-container' ).addClass( 'is-invalid' );
$form.find('.captcha-error').show();
$form.find( '.captcha' ).addClass( 'is-invalid' );
/*$form.find('.captcha-error').show();*/
}
}
$fieldSets.parents("form").removeClass('expand');
$overlay.hide().removeClass('expand')
$(".idc-main-header").css({"position": "fixed", "z-index": "9"});
$("body").removeAttr( 'style' );
$('.idc-main-content').css("margin-top", "130px");
} );
function setAnim(x) {
$fieldSets.each(function(){
if ( $(this).hasClass("current") ) {
$(this).removeClass().addClass(x + ' animated faster').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
$(this).removeClass().addClass("form-wizard current");
});
}
});
};
//set data was used to radio buttons
var $radioBtns = $('input:radio[name="budget"], input:radio[name="core"], input:radio[name="wraparound"]');
$radioBtns.each(function(){
$(this).attr('data-was-used','0');
$(this).change(function(){
$(this).closest('fieldset').find('input').attr('data-was-used','0');
if ( $(this).is(':checked') ) {
$(this).attr('data-was-used','1');
}
});
});
function displaySummary(){
$('table.summary').empty();
var $activeInputs = $("input, textarea");
var a = 0, b=0, c=0;
var totalInputs = $('.firstFieldset').find('input[data-was-used="1"]').length;
$activeInputs.each(function(){
if( $(this).closest('fieldset').hasClass('firstFieldset') && $(this).attr('data-was-used')=='1' ){
//console.log(totalInputs);
a++;
if (a == 1) {
var $label = $(this).closest('fieldset').find('legend').text();
$('table.summary').append("
" + $label + " | |
");
//console.log(a);
}
if ( a < totalInputs){
var comma = ', ';
}
if (a == totalInputs){
var comma = '';
}
$('table.summary tr.specialCase td.values').append("" + $(this).val() + comma + "");
}
else if( $(this).closest('fieldset').hasClass('budgetField') && $(this).attr('data-was-used')=='1' ){
var $label = $(this).closest('fieldset').find('legend').text();
$('table.summary').append("" + $label + " | |
");
//console.log(a);
$('table.summary tr.specialCase td.values').append("" + $(this).val() + "");
}
else if( $(this).closest('fieldset').hasClass('step2') && $(this).attr('data-was-used')=='1' ){
//console.log(totalInputs);
b++;
if (b == 1) {
var $label = $(this).closest('fieldset.step2').find('legend').text();
$('table.summary').append("" + $label + " | |
");
//console.log(a);
}
$('table.summary tr.trStep2 td.valuesStep2 ul').append("" + $(this).val() + "");
}
else if( $(this).closest('fieldset').hasClass('step3') && $(this).attr('data-was-used')=='1' ){
//console.log(totalInputs);
c++;
if (c == 1) {
var $label = $(this).closest('fieldset.step3').find('legend').text();
$('table.summary').append("" + $label + " | |
");
//console.log(a);
}
$('table.summary tr.trStep3 td.valuesStep3 ul').append("" + $(this).val() + "");
}
else if( !$(this).closest('fieldset').hasClass('firstFieldset') && $(this).attr('data-was-used')=='1' ){
if( $(this).closest('.field-box').length > 0 ){
var $label = $(this).next("label").text();
}else if ( $(this).closest('.toggle-box').length > 0 ){
var $label = $(this).closest('fieldset').find('label:first-child').text();
}
$('table.summary').append("" + $label+ " | " + $(this).val() + " |
");
//console.log($label + ": " + $(this).val() + ", ");
}
})
}
//HEADING LABEL STEP # of #
var totalSlide = $fieldSets.length
function stepLabel(){
$fieldSets.each(function(){
if ( $($fieldSets).hasClass("current") ){
var formIndex = $(this).index() +1;
$(this).find('h5').text("Step " + formIndex + " of " + totalSlide).css({"border-bottom":"1px solid #e2e2e2", "padding-bottom":"10px"});
//console.log("Step " + formIndex + " of " + totalSlide);
//alert("hey");
}
});
}
stepLabel();
function slideNext(){
//console.log("next slide");
nextIndex++;
newNextValue = nextIndex;
//let's remove the validation first upon sliding next
$('input.is-invalid-input, textarea.is-invalid-input').removeClass('is-invalid-input');
$fieldSets.each(function(){
if ( $(this).hasClass("current") ) {
$(this).removeClass("current");
}
if( $(this).index() == newNextValue && $(this).index() <= $numberofSlides ) {
$(this).addClass("current");
setAnim($animationNext);
}
if( $(this).index() == newNextValue && $(this).index() == 1 ) {
console.log("you're at the 2nd step");
$prevBtn.css({"pointer-events": "auto", "opacity": "1"})
}
/*if( $(this).index() >= 1 ) {
var slideNumber = newNextValue;
slideNumber ++;
$(this).find('h3').text("Step " + slideNumber + " of " + totalSlide)
}*/
if( $(this).index() == newNextValue && $(this).index() == $numberofSlides ) {
console.log("you're at the last step");
$nextBtn.fadeOut();
displaySummary();
//load captcha
var captchaContainer;
/*var captchaContainer;
var loadCaptcha = function() {
captchaContainer = grecaptcha.render('captcha-container', {
'sitekey' : '6Lez8wgUAAAAAI_hxk4hCsRq3u13kOWRZUiRB5aS',
'callback' : function() {
captchaVerified = true;
$( '[data-form-label-evp]' ).find( '#captcha-container' ).removeClass( 'is-invalid' ); //FOR DYNAMIC FORMS
$( '#form-prodserv-evp' ).find( '#captcha-container' ).removeClass( 'is-invalid' ); //FOR LEGACY FORMS
$( '#form-prodserv-evp' ).find('.captcha-error').hide();
$( '[data-form-label-evp]' ).find( '.captcha' ).removeClass( 'is-invalid' ); //FOR DYNAMIC FORMS
$( '#form-prodserv-evp' ).find( '.captcha' ).removeClass( 'is-invalid' ); //FOR LEGACY FORMS
/!*$( '#form-prodserv-evp' ).find('.captcha-error').hide();*!/
console.log('CAPTCHA SUCCESS');
}
});
};
loadCaptcha();
loadCaptcha();*/
}
});
/* console.log("Name: " + $('input[name=firstName]').val());*/
stepLabel();
}
function slidePrev(){
$fieldSets.each(function(){
if ( $(this).hasClass("current") && $(this).index() > 0 ) {
nextIndex = $(this).index();
nextIndex--;
newNextValue = nextIndex;
$(this).removeClass("current");
$fieldSets.each(function(){
if ( $(this).index() == newNextValue ) {
$(this).addClass("current");
setAnim($animationPrev);
}
if( $(this).index() == newNextValue && $(this).index() < 1 ){
$prevBtn.css({"pointer-events": "none", "opacity":"0.25"})
}
});
}
});
stepLabel();
}
$nextBtn.on( "click", function( ev ){
ev.preventDefault();
//RECODE
for (var i = 1; i < $numberofSlides; i++) {
$fieldSets.each(function(){
if( ($(this).index() <= i) && ($(this).hasClass("current"))) {
/* slideNext();*/
$form.foundation('validateForm');
if ( !$(this).find('.is-invalid-input').length ) {
slideNext();
}
else{
//do nothing
}
}
});
}
} );
$prevBtn.on( "click", function( ev ){
ev.preventDefault();
slidePrev();
$nextBtn.fadeIn();
} );
//DETERMINE THE BUDGET
var $budget = $('input[name=budget].budget'),
$mvp = $('li[data-name="tracker"], input[data-name="tracker"]');
$budget.click(function() {
var $checkedBudget = $(this).closest('.budgetField').find('.budget').index(this);
//alert($checkedBudget);
if ( $checkedBudget > 0 ){
//alert("mvp");
$mvp.hide().prop('checked', false).attr('data-was-used','0').parent(".toggle-box").hide();
}else{
$mvp.show().parent(".toggle-box").show();
}
});
//SPECIFIC FUNCTIONS INTEDED FOR PHASE 1
var $product = $('input[name=product]');
count = 0;
$product.each(function(){
$(this).attr('data-was-used','0');
$(this).click(function() {
$(this).attr('data-was-used', $(this).attr('data-was-used') == '0' ? '1' : '0')
if( $(this).attr('data-was-used') == '1' ){
count++;
}else{
count--;
}
if (count == 3){
console.log("limit 3 is reached");
$('input[name=product]:not([data-was-used=1])').attr("disabled", true).css("pointer-events", "none").closest('.toggle-box').css('opacity', '0.5');
//lessen opacity of disabled inputs
}else{
$product.attr("disabled", false).css("pointer-events", "auto").closest('.toggle-box').css('opacity', '1');
}
});
});
//step 2
var $checkbox = $('input:checkbox[name="step2"], input:checkbox[name="step3"]');
$checkbox.each(function(){
$(this).attr('data-was-used','0');
$(this).click(function() {
$(this).attr('data-was-used', $(this).attr('data-was-used') == '0' ? '1' : '0')
});
});
var $formElements = $(".step2, .step3").find("input");
function triggerInput(){
$formElements.each(function(){
var $elementName = $(this).attr('name'),
$elementName2 = $(this).data('name');
if(($itemName == $elementName) || $itemName == $elementName2 ){
//console.log('match!');
$(this).trigger('click');
}
})
}
$(".step-2-wrap").find("a").each(function(){
$(this).click(function(){
if ( $(this).parents($fieldSets).is('.current') ){
//lets prevent other buttons from previous slide gets affected
//$(this).parents(".form-wizard.current").children().find(".step-2-wrap a").removeClass('active');
//$(this).parents(".form-wizard.current").children().find('.step-2-wrap a span').text('SELECT').removeClass('active');
//$(this).parents(".form-wizard.current").children().find(".step-2-wrap a").find('svg').hide();
$itemName = $(this).attr('data-name');
triggerInput();
var text = $(this).find('span').text();
$(this).toggleClass('active').find('span').text( text == 'SELECT' ? 'SELECTED' : 'SELECT').toggleClass('active');
$(this).find('svg').toggle();
}
})
})