jQuery(document).ready(function () {

    var contactFormError = false;

    function validateEmail2(email) {
      var emailReg = /[^@\s]+@[^@\s]+\.[^@\s]+/;
      return emailReg.test(email);
    }

    // Blur attribute handling
    $('.contact-form input[name="budget"], .contact-form input[name="city"], .contact-form input[name="first-name"], .contact-form input[name="email"], .contact-form input[name="mobnum"], .contact-form textarea[name="description"]').blur(function () {
      $(this).attr('data-blurred', true);
    });

    // Service.
    $('.contact-form select[name="service"]').change(function(){
      var service = $(this).val();
      if (service && service.length > 0) {
        $(this).parent().find('.contact-form-select-field').removeClass('not-selected');
        $(this).parent().parent().find('.contact-form-error-text').hide().text('');
      }
    });

    // Organization size.
    $('.contact-form select[name="organization-size"]').change(function(){
      var organizationSize = $(this).val();
      if (organizationSize && organizationSize.length > 0) {
        $(this).parent().find('.contact-form-select-field').removeClass('not-selected');
        $(this).parent().parent().find('.contact-form-error-text').hide().text('');
      }
    });

    // City
    $('.contact-form input[name="city"]').blur(function(){
      var city = $(this).val();
      if (city.length > 100) {
        $(this).parent().find('.contact-form-error-text').show().text('City name exceeds the 100 character limit');
      } else {
        $(this).parent().find('.contact-form-error-text').hide().text('');
      }
    });
    $('.contact-form input[name="city"]').keyup(function(){
      if (!$(this).attr('data-blurred')) {
        return false
      }
      var city = $(this).val();
      if (city.length > 100) {
        $(this).parent().find('.contact-form-error-text').show().text('City name exceeds the 100 character limit');
      } else {
        $(this).parent().find('.contact-form-error-text').hide().text('');
      }
    });

    // Full name
    $('.contact-form input[name="first-name"]').blur(function(){
      var fullName = $(this).val();
      if (fullName.length < 1) {
        $(this).parent().find('.contact-form-error-text').show().text('Please fill in this field');
      } else if (fullName.length > 100) {
        $(this).parent().find('.contact-form-error-text').show().text('Full name exceeds the 100 character limit');
      } else {
        $(this).parent().find('.contact-form-error-text').hide().text('');
      }
    });
    $('.contact-form input[name="first-name"]').keyup(function(){
      if (!$(this).attr('data-blurred')) {
        return false
      }
      var fullName = $(this).val();
      if (fullName.length < 1) {
        $(this).parent().find('.contact-form-error-text').show().text('Please fill in this field');
      } else if (fullName.length > 100) {
        $(this).parent().find('.contact-form-error-text').show().text('Full name exceeds the 100 character limit');
      } else {
        $(this).parent().find('.contact-form-error-text').hide().text('');
      }
    });

    // Email
    $('.contact-form input[name="email"]').blur(function(){
      var email = $(this).val();
      if (email.length < 1) {
        $(this).parent().find('.contact-form-error-text').show().text('Please fill in this field');
      } else if (email.length > 100) {
        $(this).parent().find('.contact-form-error-text').show().text('Email exceeds the 100 character limit');
      } else if (!validateEmail2(email)) {
        $(this).parent().find('.contact-form-error-text').show().text('Invalid email');
      } else {
        $(this).parent().find('.contact-form-error-text').hide().text('');
      }
    });
    $('.contact-form input[name="email"]').keyup(function(){
      if (!$(this).attr('data-blurred')) {
        return false
      }
      var email = $(this).val();
      if (email.length < 1) {
        $(this).parent().find('.contact-form-error-text').show().text('Please fill in this field');
      } else if (email.length > 100) {
        $(this).parent().find('.contact-form-error-text').show().text('Email exceeds the 100 character limit');
      } else if (!validateEmail2(email)) {
        $(this).parent().find('.contact-form-error-text').show().text('Invalid email');
      } else {
        $(this).parent().find('.contact-form-error-text').hide().text('');
      }
    });

    // Phone number
    $('.contact-form input[name="mobnum"]').blur(function(){
      var phone = $(this).val();
      if (phone.length < 1) {
        $(this).parent().parent().find('.contact-form-error-text').show().text('Please fill in this field');
      } else if (phone.length > 100) {
        $(this).parent().parent().find('.contact-form-error-text').show().text('Phone number exceeds the 100 character limit');
      } else {
        $(this).parent().parent().find('.contact-form-error-text').hide().text('');
      }
    });
    $('.contact-form input[name="mobnum"]').keyup(function(){
      if (!$(this).attr('data-blurred')) {
        return false
      }
      var phone = $(this).val();
      if (phone.length < 1) {
        $(this).parent().parent().find('.contact-form-error-text').show().text('Please fill in this field');
      } else if (phone.length > 100) {
        $(this).parent().parent().find('.contact-form-error-text').show().text('Phone number exceeds the 100 character limit');
      } else {
        $(this).parent().parent().find('.contact-form-error-text').hide().text('');
      }
    });

    // Description
    $('.contact-form textarea[name="description"]').blur(function(){
      var description = $(this).val();
      if (description.length < 1) {
        $(this).parent().find('.contact-form-error-text').show().text('Please fill in this field');
      } else if (description.length > 5000) {
        $(this).parent().find('.contact-form-error-text').show().text('Description exceeds the 5000 character limit');
      } else {
        $(this).parent().find('.contact-form-error-text').hide().text('');
      }
    });
    $('.contact-form textarea[name="description"]').keyup(function(){
      if (!$(this).attr('data-blurred')) {
        return false
      }
      var description = $(this).val();
      if (description.length < 1) {
        $(this).parent().find('.contact-form-error-text').show().text('Please fill in this field');
      } else if (description.length > 5000) {
        $(this).parent().find('.contact-form-error-text').show().text('Description exceeds the 5000 character limit');
      } else {
        $(this).parent().find('.contact-form-error-text').hide().text('');
      }
    });

    $("#wf-form-Contact-Form").submit(function(e) {
      
      e.preventDefault();
      contactFormError = false;

      // Hidden phone input for HubSpot tracking.
      $('#wf-form-Contact-Form').find('input[name="phone"]').val($('#wf-form-Contact-Form').find('input[name="mobnum-full"]').val()).attr('value', $('#wf-form-Contact-Form').find('input[name="mobnum-full"]').val());

      // Google reCAPTHCA
      var reCAPTCHAToken = '';
      grecaptcha.ready(function () {
        grecaptcha.execute('6LdCbcMZAAAAAKXkD4ax_gncd7aWhEllrc8LdvSZ', { action: 'contactform' }).then(function (token) {                     
          reCAPTCHAToken = token;
          
          $('.contact-form-error-text').hide();
          var contactFormAPIEndpoint = 'https://jhavtechstudio.wpenginepowered.com/wp-json/contact-form-7/v1/contact-forms/162/feedback';
          
          // Service validation.
          var serviceSelect = $('.contact-form select[name="service"]');
          var service = serviceSelect.val();
          if (!service || service.length < 1) {
            serviceSelect.parent().parent().find('.contact-form-error-text').show().text('Select a service');
            contactFormError = true;
          }

          // Organization size validation.
          var organizationSizeSelect = $('.contact-form select[name="organization-size"]');
          var organizationSize = organizationSizeSelect.val();
          if (!organizationSize || organizationSize.length < 1) {
            organizationSizeSelect.parent().parent().find('.contact-form-error-text').show().text('Select organization size');
            contactFormError = true;
          }

          // City validation.
          var cityInput = $('.contact-form input[name="city"]');
          var city = cityInput.val();
          if (city.length > 100) {
            cityInput.parent().find('.contact-form-error-text').show().text('City name exceeds the 100 character limit');
            contactFormError = true;
          }

          // Full name validation.
          var fullNameInput = $('.contact-form input[name="first-name"]');
          var fullName = fullNameInput.val();
          if (fullName.length < 1) {
            fullNameInput.parent().find('.contact-form-error-text').show().text('Please fill in this field');
            contactFormError = true;
          } else if (fullName.length > 100) {
            fullNameInput.parent().find('.contact-form-error-text').show().text('Full name exceeds the 100 character limit');
            contactFormError = true;
          }

          // Email validation.
          var emailInput = $('.contact-form input[name="email"]');
          var email = emailInput.val();
          if (email.length < 1) {
            emailInput.parent().find('.contact-form-error-text').show().text('Please fill in this field');
            contactFormError = true;
          } else if (email.length > 100) {
            emailInput.parent().find('.contact-form-error-text').show().text('Email exceeds the 100 character limit');
            contactFormError = true;
          } else if (!validateEmail2(email)) {
            emailInput.parent().find('.contact-form-error-text').show().text('Invalid email');
            contactFormError = true;
          }

          // Phone number validation.
          var phoneInput = $('.contact-form input[name="mobnum"]');
          var phone = phoneInput.val();
          if (phone.length < 1) {
            phoneInput.parent().parent().find('.contact-form-error-text').show().text('Please fill in this field');
            contactFormError = true;
          } else if (phone.length > 100) {
            phoneInput.parent().parent().find('.contact-form-error-text').show().text('Phone number exceeds the 100 character limit');
            contactFormError = true;
          }

          // Description validation.
          var descriptionInput = $('.contact-form textarea[name="description"]');
          var description = descriptionInput.val();
          if (description.length < 1) {
            descriptionInput.parent().find('.contact-form-error-text').show().text('Please fill in this field');
            contactFormError = true;
          } else if (description.length > 5000) {
            descriptionInput.parent().find('.contact-form-error-text').show().text('Description exceeds the 5000 character limit');
            contactFormError = true;
          }

          // Return false if any validation fails.
          if (contactFormError) {
            return false;
          }

          // Loading state.
          $('.contact-form-submit-button').attr('value', 'Submitting...').attr('disabled', true);

          // Prepare the payload.
          var contactFormData = {
            '_wpcf7_recaptcha_response': reCAPTCHAToken,
            '_wpcf7_unit_tag': $('#wf-form-Consultation-Form').find('input[name="_wpcf7_unit_tag"]').val(),
            'your-service': $('.contact-form select[name="service"]').val(),
            'your-organization-size': $('.contact-form select[name="organization-size"]').val(),
            'your-budget': $('.contact-form input[name="budget"]').val(),
            'your-city': $('.contact-form input[name="city"]').val(),
            'your-name': $('.contact-form input[name="first-name"]').val(),
            'your-email': $('.contact-form input[name="email"]').val(),
            'your-sms': $('.contact-form input[name="mobnum-full"]').val(),
            'your-description': $('.contact-form textarea[name="description"]').val()
          };

          var formData = new FormData();
          for (var key in contactFormData) {
            formData.append(key, contactFormData[key]);
          }

          // Submit the form.
          $.ajax({
            url: contactFormAPIEndpoint,
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(resp) {
              var response = resp;
              // Success.
              if (response.status === 'mail_sent') {
                $('.contact-form-submit-button').attr('value', 'Submit').removeAttr('disabled');
                $('.contact-form-error-text').hide();
                $('.contact-form-container').hide();
                $('.contact-form-success-container').show();
                $('html, body').animate({
                  scrollTop: $(".contact-form-section").offset().top
                }, 400);
                document.getElementById("wf-form-Contact-Form").reset();
              }
              // Invalid email.
              else if (response.status === 'validation_failed' && response.invalid_fields && response.invalid_fields.length > 0 && response.invalid_fields[0].field == 'your-email') {
                $('.contact-form-submit-button').attr('value', 'Submit').removeAttr('disabled');
                $('contact-email-error-text').show().text('Please use a different email');
              }
              // Other error.
              else {
                $('.contact-form-submit-button').attr('value', 'Submit').removeAttr('disabled');
                $('.contact-form-error-text').hide();
                alert('Error: ' + response.status + '\nMessage: ' + response.message);
              }
            },
            error: function (jqXHR, textStatus, errorThrown) {
              $('.contact-form-submit-button').attr('value', 'Submit').removeAttr('disabled');
              $('.contact-form-error-text').hide();
              alert('Something went wrong. Please try again later.');
              console.log(jqXHR);
            }
          });

        });
      });

    });

  });