document.addEventListener("DOMContentLoaded", function(event) {
 let startTime = getTimestamp();
 let visitId = 1720338 || null;
 let form = document.querySelector("form");
 let pixel = document.querySelector("#pixel_crm_confirmation");

 /* Stop script execution if missing visitId */
 if(!visitId) {
 console.error("ABTest not loaded, missing visitId !");
 return;
 }
 
 console.log("ABTest loaded visitId : ", visitId);

 /* Get current Unix timestamp in seconds */
 function getTimestamp() {
 return Math.floor(Date.now() / 1000);
 }

 /* Send XMLHttpRequest async */
 function sendRequest(method = "POST", URL = "/", data = {}) {
 let xhr = new XMLHttpRequest();
 xhr.open(method, URL, true);
 xhr.setRequestHeader("Content-type", "application/json; charset=UTF-8");

 /* Request response callback */
 xhr.addEventListener("loadend", function(event) {
 if(xhr.status == 200) {
 console.log(xhr.responseText);
 }
 else {
 console.error(xhr.statusText);
 }
 });

 /* Request timeout callback */
 xhr.addEventListener("timeout", function(event) {
 console.error(xhr.statusText);
 });

 /* Request error callback */
 xhr.addEventListener("error", function(event) {
 console.error(xhr.statusText);
 });

 xhr.send(JSON.stringify(data));
 }

 
 function recordGoal(visitId,data = "") {
 sendRequest("POST", "https://je-renove.net/api/", {
 "method": "setgoal",
 "id": visitId,
 "data": data
 });
 }

 function recordFormSteps(visitId, FormSteps) {
 sendRequest("POST", "https://je-renove.net/api/", {
 "method": "setformsteps",
 "formsteps": FormSteps,
 "id": visitId
 });
 }

 /* Find first visible section inside form */
 function findVisibleSection() {
 let sections = form.querySelectorAll("section");
 for(let i = 0; i < sections.length; i++) {
 let section = sections[i];
 let style = window.getComputedStyle(section);
 if(section.offsetWidth && section.offsetHeight && style.display !== "none") {
 return section;
 }
 }

 return null;
 }

 /* Observe mutation CRM pixel */
 let observerPixel = new MutationObserver(function(mutations, me) {
 for(let i = 0; i < mutations.length; i++) {
 let mutation = mutations[i];
 if(mutation.attributeName == "src" && mutation.target.src.length) {
 recordGoal(visitId,mutation.target.src);
 return me.disconnect();
 }
 }
 });

 /* Start observe mutation CRM pixel */
 observerPixel.observe(pixel, {
 attributes: true,
 attributeFilter: ["src"]
 });

 /* List of fields filled in form */
 let formFields = [];

 /* Check already exist form fields */
 function checkAlreadyExist(name) {
 for(let i = 0; i < formFields.length; i++) {
 if(formFields[i]["fieldName"] == name) {
 return true;
 }
 }

 return false;
 }

 /* Handle form fields change value */
 function handleFormFieldChange(inputField) {
 let name = inputField.name;
 let value = inputField.value;
 if(name && name.trim().length && value && value.trim().length && !checkAlreadyExist(name)) {
 let section = findVisibleSection();
 let sectionId = (section)? section.id: "";
 // console.log(`Le champ de formulaire ${name} a été modifié avec la valeur ${value} !`);
 formFields.push({
 "fieldName": name,
 "sectionId": sectionId,
 "delay": getTimestamp() - startTime
 });

 recordFormSteps(visitId, formFields);
 }
 }

 /* Listen all change events inside form */
 let inputFields = form.querySelectorAll("input, textarea, select");
 for(let i = 0; i < inputFields.length; i++) {
 inputFields[i].addEventListener("change", function(event) {
 handleFormFieldChange(event.target);
 });
 }

 /* Observe mutation inside form */
 let observerForm = new MutationObserver(function(mutations) {
 for(let i = 0; i < mutations.length; i++) {
 let mutation = mutations[i];
 for(let w = 0; w < mutation.addedNodes.length; w++) {
 let addedNode = mutation.addedNodes[w];
 if(["INPUT", "TEXTAREA", "SELECT"].indexOf(addedNode.tagName) !== -1
 /* && ["campaignid"].indexOf(addedNode.name) === -1 */) {
 handleFormFieldChange(addedNode);
 }
 }
 }
 });

 /* Start observe mutation inside form */
 observerForm.observe(form, {
 childList: true,
 subtree: true
 });
});