<div class="title-question-form" id="js-question-survey-1"></div>
<div class="questions-survey" id="js-answers-survey-1"></div>
<div class="title-question-form" id="js-question-survey-2"></div>
<div class="questions-survey" id="js-answers-survey-2"></div>

<script>
// MARKETING SURVEY
$(document).ready( () => {
  displaySurvey();
  selectAnswer(selectSecondAnswer);
})
// INITIALIZATION
var marketing_survey = <%= raw @marketing_survey %>;
var channels = {};
var step = {};
function displaySurvey () {
  document.querySelector('#js-question-survey-1').append(marketing_survey.question);
  marketing_survey.answers.forEach(function(element) {
    $('#js-answers-survey-1').append(`<div class="answer-marketing-survey">${element.value}</div>`);
    }
  )
}
function selectAnswer (callback) {
  $('#js-answers-survey-1 .answer-marketing-survey').click(function () {
    // Changes on css of div
    $('#js-answers-survey-1 .answer-marketing-survey').attr('id','');
    $(this).attr('id','selected-answer-marketing-survey');
    // Check if the value selected matches with a value in JSON and ajax call with corresponding channels.
    marketing_survey.answers.forEach( (element) => {
      if (element.value === this.innerHTML) {
        channels = { channel1: element.channel1, channel2: element.channel2, channel3: element.channel3 }
        sendMarketingSurvey();
        step = element;
        // Append next question if question
        $('#js-question-survey-2').html("")
        $('#js-answers-survey-2').html("");
        if (element.followUp != undefined) {
          $('#js-question-survey-2').append(element.followUp.question);
          element.followUp.answers.forEach(function (element) {
            $('#js-answers-survey-2').append(`<div class="answer-marketing-survey">${element.value}</div>`);
          })
          callback();
        }
      }
    })
  })
}
function selectSecondAnswer () {
  $('#js-answers-survey-2 .answer-marketing-survey').click(function () {
    // Changes on css of div
    $('#js-answers-survey-2 .answer-marketing-survey').attr('id','');
    $(this).attr('id','selected-answer-marketing-survey');
    step.followUp.answers.forEach( (element) => {
      if (element.value === this.innerHTML) {
        channels = { channel1: element.channel1, channel2: element.channel2, channel3: element.channel3 }
      }
    })
    sendMarketingSurvey();
  })
}
// HELPERS
function sendMarketingSurvey () {
  $.ajax({
    method: "POST",
    url: `/vendre/${"<%= @estimation.hashid %>"}/update_channels`,
    data: channels
  })
}
</script>