-# INITIALIZE VARIABLES

- if defined? webcast
  - localvar_form_id = parameter_form_id
  - localvar_form_type = "webcasts"
  - if webcast.youtube_url.nil?
    - localvar_webcast_has_youtube = false
    - if webcast.cta_title_register
      - localvar_cta_title = webcast.cta_title_register
    - else
      - localvar_cta_title = "Register for the webcast"
    - if webcast.success_message_register
      - localvar_success_message = webcast.success_message_register
    - elsif webcast.success_message
      - localvar_success_message = webcast.success_message
    - else
      - localvar_success_message = "Thank you for registering. You will receive an email with additional webcast details."
  - else
    - localvar_webcast_has_youtube = true
    - if webcast.cta_title_watch
      - localvar_cta_title = webcast.cta_title_watch
    - else
      - localvar_cta_title = "Watch the webcast"
    - if webcast.success_message_watch
      - localvar_success_message = webcast.success_message_watch
    - elsif webcast.success_message
      - localvar_success_message = webcast.success_message
    - else
      - localvar_success_message = "Thank you for registering. The on-demand webcast will appear on the left."
- else
  - if defined? form_id
    - localvar_form_id = form_id
  - else
    - localvar_form_id = current_page.data.form_id
  - if defined? data_form_instance
    - localvar_data_form_instance = data_form_instance
  - else
    - localvar_data_form_instance = nil
  - if defined? form_type
    - localvar_form_type = form_type
  - else
    - localvar_form_type = current_page.data.form_type
  - if defined? cta_title
    - localvar_cta_title = cta_title
  - else
    - localvar_cta_title = current_page.data.cta_title
  - if defined? cta_date
    - localvar_cta_date = cta_date
  - else
    - localvar_cta_date = current_page.data.cta_date
  - if defined? cta_subtitle
    - localvar_cta_subtitle = cta_subtitle
  - else
    - localvar_cta_subtitle = current_page.data.cta_subtitle
  - if defined? success_message
    - localvar_success_message = success_message
  - else
    - localvar_success_message = current_page.data.success_message
  - if defined? destination_url
    - localvar_destination_url = destination_url
  - else
    - localvar_destination_url = current_page.data.destination_url
  - if defined? link_text
    - localvar_link_text = link_text
  - else
    - localvar_link_text = current_page.data.link_text


.form-to-resource-content
  .form-to-resource-content-section
    .form-container
      %h3.f2r-cta-title.margin-top0 #{localvar_cta_title}
      - if localvar_cta_date
        %h4.f2r-cta-date #{localvar_cta_date}
      - if localvar_cta_subtitle
        %p.f2r-cta-subtitle #{localvar_cta_subtitle}
      .form
        %form{"data-formId": "#{localvar_form_id}", "data-formInstance": "#{localvar_data_form_instance}", class: "mktoForm"}
        - if defined? dont_load_form_js
          :javascript
            // because you only want to initialize the js after the last form is loaded
        - else
          %script{src: "//page.gitlab.com/js/forms2/js/forms2.min.js"}
          -# alternately //page.gitlab.com but that has been causing trouble lately.
          -# note in the base js files there is a function destyleMktoForm which is important.
          %script{"type": "text/javascript", "data-cookieconsent": "ignore"}
            :plain
              var gatedFormAfterSuccessDo = function()
              {
                $('.mktoForm').hide();
                if($('.f2r-cta-subtitle').length){
                  $('.f2r-cta-subtitle').hide();
                };
                if($('.form-to-resource-content .cbnc-message').length){
                  $('.form-to-resource-content .cbnc-message').hide();
                };
                $('.confirmform').attr('style', 'visibility: visible');
                $('.confirmform').attr('style', 'height: initial');
                if ($('.webcast-video-container').length)
                {
                  $('.webcast-video-container').css('display', 'block');
                };
                $('html, body').animate({scrollTop: parseInt($('#confirmform').offset().top-100)}, 500);
                if(typeof callbackMktoFormOnSuccess !== "undefined")
                {
                  callbackMktoFormOnSuccess();
                };
              };
          :javascript
            var consoleLogsEnable = new Boolean(false);
            // adapted from https://codepen.io/figureone/pen/ayKadR?editors=0010
            var mktoFormConfig = {
              podId : "//page.gitlab.com",
              munchkinId : "194-VVC-221",
              formIds : [#{localvar_form_id || 'null'}]
            };
            var emailHarvest = function() 
            {
              var destinationUrls = document.querySelectorAll('.destination-url');
              var emailInputs = document.querySelectorAll('.mktoEmailField');
              for(loopcount=0;loopcount<emailInputs.length;loopcount++)
              {
                // depending on which part of the loop is active, destinationUrls.count may be 
                // longer than emailInputs.count, hence this order of operations.
                if(consoleLogsEnable == true)
                {
                  console.log(loopcount);
                };

                var emailInput = emailInputs[loopcount];
                const emailInputId = emailInput.id;
                if(consoleLogsEnable == true)
                {
                  console.log('emailInput '+ emailInput);
                  console.log('emailInputId '+ emailInputId);
                };

                var destinationUrl = destinationUrls[loopcount];
                const oldDestinationUrl = destinationUrl.getAttribute('href');
                if(consoleLogsEnable == true)
                {
                  console.log('destinationUrl '+ destinationUrl);
                  console.log('oldDestinationUrl '+ oldDestinationUrl);
                };

                document.getElementById(emailInputId).addEventListener('change', function()
                {
                  var emailValue = document.getElementById(emailInputId).value;
                  if(consoleLogsEnable == true)
                  {
                    console.log(emailValue);
                  };
                  if(oldDestinationUrl !== undefined)
                  {
                    var newDestinationUrl = oldDestinationUrl.replace('lb_email=', 'lb_email='+emailValue);
                    destinationUrl.setAttribute('href', newDestinationUrl);
                  };
                });
              };
            };
            function mktoFormChain(config) 
            {
              /* util */
              var arrayFrom = Function.prototype.call.bind(Array.prototype.slice);
              /* const */
              var MKTOFORM_ID_ATTRNAME = "data-formId";
              /* fix inter-form label bug! */
              MktoForms2.whenRendered(function(form) 
              {
                var formEl = form.getFormElem()[0],
                  rando = "_" + new Date().getTime() + Math.random();
                arrayFrom(formEl.querySelectorAll("label[for]")).forEach(function(labelEl) 
                {
                  var forEl = formEl.querySelector('[id="' + labelEl.htmlFor + '"]');
                  if (forEl) 
                  {
                    labelEl.htmlFor = forEl.id = forEl.id + rando;
                  }
                });
                // Note: harvest needs to go inside of whenRendered
                emailHarvest();
                if(typeof(Demandbase) === "object")
                {
                  Demandbase.utils.loadFormModule();
                };
              });
              /* chain, ensuring only one #mktoForm_nnn exists at a time */
              arrayFrom(config.formIds).forEach(function(formId) 
              {
                var loadForm = MktoForms2.loadForm.bind(MktoForms2,config.podId,config.munchkinId,formId),
                  formEls = arrayFrom(document.querySelectorAll("[" + MKTOFORM_ID_ATTRNAME + '="' + formId + '"]'));
                (function loadFormCb(formEls) 
                {
                  var formEl = formEls.shift();
                  formEl.id = "mktoForm_" + formId;
                  loadForm(function(form) 
                  {
                    formEl.id = "";
                    if (formEls.length) 
                    {
                      loadFormCb(formEls);
                    }
                    //
                    var classnamesFromForValues;
                    var mktoFormLabels = document.getElementsByTagName('LABEL');
                    for ( var count = 0; count < mktoFormLabels.length; count++ ) 
                    {
                      if (mktoFormLabels[count].htmlFor != '') 
                      {
                        var labelValue = mktoFormLabels[count].htmlFor.toLowerCase();
                        mktoFormLabels[count].closest('.mktoFormRow').classList.add(labelValue);
                      };
                    };
                    //
                    form.onSuccess(function()
                    {
                      dataLayer.push({event: '#{localvar_form_type}', mktoFormId: form.getId()});
                      if(consoleLogsEnable == true)
                      {
                        console.log(form.getId());
                      };
                      $(form).hide();
                      gatedFormAfterSuccessDo();
                      return false;
                    });
                  });
                })(formEls);
              });
            }
            mktoFormChain(mktoFormConfig);

        -# Note : some sales forms, like public-sector, have extra code for ga cid. This might need to be added later with extended reuse of this component.
        .confirmform#confirmform{style: "visibility:hidden;height:0;overflow:hidden;"}
          .centered-form-info
            - if localvar_destination_url
              %h3.f2r-destination-url
                %a#destination-url.destination-url{href: "#{localvar_destination_url}", target: "_blank"} #{localvar_link_text}
            %p.f2r-success-message #{localvar_success_message}