jQuery(document).ready(function () {
  var projectInterestPopupForm = $('.project-interest-popup-form');
  var projectInterestPopupSubmitted = false;

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

  // Open project interest popup and tracking.
  $('.open-project-interest-popup').click(function(){
    var selectedProject = $(this).attr('data-project');
    projectInterestPopupForm.attr('data-project', selectedProject);
    projectInterestPopupForm.find('input[name="description"]').val('User clicked on '+selectedProject+'. User wants to know more about it.').attr('value', 'User clicked on '+selectedProject+'. User wants to know more about it.');
    $('body').css('overflow-y', 'hidden');
    if ($('.service-our-work-carousel-container')){
      $('.service-our-work-carousel-container').trigger('stop.owl.autoplay');
    }
    if (projectInterestPopupSubmitted) {
      $(".project-interest-already-submitted-popup").css("display", "flex").css('opacity', 1).hide(0).fadeIn(300);
      return;
    }
    $(".project-interest-popup").css("display", "flex").css('opacity', 1).hide(0).fadeIn(300);
  });

  // Reset body overflow and start carousel autoplay.
  $('.project-interest-popup-close-link, .project-interest-popup-submitted-close, .project-interest-already-submitted-popup-close-link').click(function(){
    $('body').css('overflow-y', 'auto');
    if ($('.service-our-work-carousel-container')){
      $('.service-our-work-carousel-container').trigger('play.owl.autoplay');
    }
  })

  // Blur attribute handling.
  $('.project-interest-popup-form input[name="first-name"], .project-interest-popup-form input[name="email"]').blur(function () {
    $(this).attr('data-blurred', true);
  });

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

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

  // Handle form submission.
  projectInterestPopupForm.submit(function(e) {
    e.preventDefault();

    var sourceURL = window.location.href;
    var selectedProject = projectInterestPopupForm.attr('data-project');
    var formValidationError = false;

    // Google reCAPTCHA.
    var reCAPTCHAToken = '';
    grecaptcha.ready(function () {
      grecaptcha.execute('6LdCbcMZAAAAAKXkD4ax_gncd7aWhEllrc8LdvSZ', { action: 'contactform' }).then(function (token) {                     
        reCAPTCHAToken = token;
        
        $('.project-interest-popup-form-field-error-text').hide();
        var projectInterestPopupFormId = '5003';
        if (projectInterestPopupForm.attr('data-formid') && projectInterestPopupForm.attr('data-formid').length > 0) {
          projectInterestPopupFormId = projectInterestPopupForm.attr('data-formid');
        }
        var projectInterestPopupFormAPIEndpoint = 'https://jhavtechstudio.wpenginepowered.com/wp-json/contact-form-7/v1/contact-forms/'+projectInterestPopupFormId+'/feedback';

        // Full name validation.
        var fullNameInput = projectInterestPopupForm.find('input[name="first-name"]');
        var fullName = fullNameInput.val();          
        if (fullName.length > 100) {
          fullNameInput.parent().find('.project-interest-popup-form-field-error-text').show().text('Full name exceeds the 100 character limit');
          formValidationError = true;
        }

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

        // Return if form validation fails.
        if (formValidationError) {
          return false;
        }

        // Loading state.
        projectInterestPopupForm.find('.project-interest-popup-form-loader').show();
        projectInterestPopupForm.find('.project-interest-popup-form-submit-label').hide();
        projectInterestPopupForm.find('.project-interest-popup-form-submit').attr('disabled', true);
        projectInterestPopupForm.find('.project-interest-popup-form-field-row input').attr('disabled', true);

        // Prepare the payload.
        var projectInterestPopupFormData = {
          '_wpcf7_recaptcha_response': reCAPTCHAToken,
          '_wpcf7_unit_tag': $('#wf-form-Consultation-Form').find('input[name="_wpcf7_unit_tag"]').val(),
          'your-name': projectInterestPopupForm.find('input[name="first-name"]').val(),
          'your-email': projectInterestPopupForm.find('input[name="email"]').val(),
          'your-project': selectedProject,
          'your-source-url': sourceURL,
        };

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

        // Submit the form.
        $.ajax({
          url: projectInterestPopupFormAPIEndpoint,
          type: 'POST',
          data: formData,
          processData: false,
          contentType: false,
          success: function(resp) {
            var response = resp;
            // Success.
            if (response.status === 'mail_sent') {
              projectInterestPopupSubmitted = true;
              projectInterestPopupForm.find('.project-interest-popup-form-loader').hide();
              projectInterestPopupForm.find('.project-interest-popup-form-submit-label').show();
              projectInterestPopupForm.find('.project-interest-popup-form-submit').removeAttr('disabled');
              projectInterestPopupForm.find('.project-interest-popup-form-field-row input').removeAttr('disabled');
              projectInterestPopupForm.find('.project-interest-popup-form-field-error-text').hide();
              $('.project-interest-popup').hide();
              $('.project-interest-submitted-popup').css('display', 'flex').css('opacity', 1);
              document.getElementById("wf-form-Project-Interest-Popup-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') {
              projectInterestPopupForm.find('.project-interest-popup-form-loader').hide();
              projectInterestPopupForm.find('.project-interest-popup-form-submit-label').show();
              projectInterestPopupForm.find('.project-interest-popup-form-submit').removeAttr('disabled');
              projectInterestPopupForm.find('.project-interest-popup-form-field-row input').removeAttr('disabled');
              projectInterestPopupForm.find('.project-interest-popup-form-field-error-text').hide();
              projectInterestPopupForm.find('input[name="email"]').parent().find('.project-interest-popup-form-field-error-text').show().text('Please use a different email');
            }
            // Other error.
            else {
              projectInterestPopupForm.find('.project-interest-popup-form-loader').hide();
              projectInterestPopupForm.find('.project-interest-popup-form-submit-label').show();
              projectInterestPopupForm.find('.project-interest-popup-form-submit').removeAttr('disabled');
              projectInterestPopupForm.find('.project-interest-popup-form-field-row input').removeAttr('disabled');
              projectInterestPopupForm.find('.project-interest-popup-form-field-error-text').hide();
              alert('Error: ' + response.status + '\nMessage: ' + response.message);
            }
          },
          error: function (jqXHR, textStatus, errorThrown) {
            projectInterestPopupForm.find('.project-interest-popup-form-loader').hide();
            projectInterestPopupForm.find('.project-interest-popup-form-submit-label').show();
            projectInterestPopupForm.find('.project-interest-popup-form-submit').removeAttr('disabled');
            projectInterestPopupForm.find('.project-interest-popup-form-field-row input').removeAttr('disabled');
            projectInterestPopupForm.find('.project-interest-popup-form-field-error-text').hide();
            alert('Something went wrong. Please try again later.');
            console.log(jqXHR);
          }
        });
      });
    });
  });
});