//var formContainer = document.getElementById('formContainer');
//var form_submission_formId = parseInt(formContainer.getAttribute('form_id'));

var form_submission_formId = document.currentScript.getAttribute('formId');
if(!form_submission_formId)
{
    console.log('No formId set. Probably using the old code. Falling back');
    var formContainer = document.getElementById('formContainer');
    form_submission_formId = formContainer.getAttribute('form_id');
    formContainer.setAttribute('formId', form_submission_formId);
}
else
{
    var formContainer = document.createElement('div');
}
//newEl.setAttribute('style', 'background-color: red;');

formContainer.innerHTML = 'Het formulier wordt geladen...';
formContainer.setAttribute('formId', form_submission_formId);
document.currentScript.parentNode.insertBefore(formContainer, document.currentScript);

var src = document.currentScript.src;
var srcSplit = src.split('.com/api/');
if(srcSplit.length == 2)
{
    var apibase = srcSplit[0] + '.com/api/';
}
else
{
    var apibase = 'https://trainingsplanner.com/api/';
}
//console.log('apibase: ', apibase);
        
        
        var form;
    function form_submission_loadForm(container) {
        var formId = container.getAttribute('formId');
        container.style.textAlign = 'left';
// Makes a request to the server to get the form
var xhr = new XMLHttpRequest();
xhr.open('POST', apibase + 'forms/display_form.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
    // Insert the form HTML into the container
    container.innerHTML = this.responseText;
    form = document.getElementById('form_submission_'+formId+'_form');

    form.addEventListener('submit', function(event) {
        //event.preventDefault();  // prevent the form from submitting normally
        form_submission_submitForm(event);
    });
};
xhr.send('formId=' + encodeURIComponent(formId));
}


form_submission_loadForm(formContainer);

/*
function form_submission_submitForm(event) {
event.preventDefault();  // Prevent the form from submitting normally
var form = event.target;  // Access the form that was submitted
var formId = form_submission_formId;  // Extract the form id from the form
var components = form.querySelectorAll('.form_field');  // Get all the components of the form
var componentsData = [];  // Prepare an array to store the components data

// Loop through each component and extract its data
for (var i = 0; i < components.length; i++) {
    componentsData.push(form_submission_extractComponentData(components[i]));
}


form_submission_sendFormToServer(formId, componentsData);
}*/
function form_submission_extractComponentData(component) {
var title = component.getAttribute('name');  // Extract the title from the name attribute
var type = component.getAttribute('type');  // Extract the type from the type attribute
var component_type = component.getAttribute('component_type');

type = component_type;

if(type == 'html') { return null; }

var value = null;
if (type === 'checkbox' || type == 'radio') {
    if(component.checked)
    {
        value = component.value;
    }
} 
else if(type == 'name')
{
    console.log(component.querySelector(".firstname"));
    value = JSON.stringify({"firstname": component.querySelector(".firstname").value.trim(), "middlename": component.querySelector(".middlename").value.trim(), "lastname": component.querySelector(".lastname").value.trim()});
}
else {
    value = component.value;  // Extract the value from the value attribute
}

return {
    title: title,
    type: type,
    value: value
};
}

function form_submission_submitForm(event) {
event.preventDefault();  // Prevent the form from submitting normally

var form = event.target;  // Access the form that was submitted
var formId = form.parentNode.getAttribute('formId');  // Extract the form id from the form
var components = form.querySelectorAll('.form_field');  // Get all the components of the form
var componentsData = {};  // Prepare an object to store the components data

// Loop through each component and extract its data
for (var i = 0; i < components.length; i++) {
    var componentData = form_submission_extractComponentData(components[i]);
    if(!componentData) { /*for example, type is html */ continue; }
    // If the component of type checkbox already exists, add the value to the existing values
    if (componentData.type === 'checkbox' && !componentsData[componentData.title]) {
        componentsData[componentData.title] = JSON.parse(JSON.stringify(componentData));
        componentsData[componentData.title].value = [];
    }
    else if (componentData.type === 'radio' && !componentsData[componentData.title])
    {
        componentsData[componentData.title] = JSON.parse(JSON.stringify(componentData));
        componentsData[componentData.title].value = null;
    }
    if(componentData.type === 'checkbox')
    {
        if(componentData.value)
        {
            componentsData[componentData.title].value.push(componentData.value);
        }
    } 
    else if(componentData.type === 'radio')
    {
        if(componentData.value)
        {
            componentsData[componentData.title].value = componentData.value;
        }
    } 
    else {
        // If the component of type checkbox does not exist, initialize the value as an array
        componentsData[componentData.title] = componentData;
    }
    componentsData[componentData.title].required = (components[i].required || components[i].getAttribute('is_required'));
}

for (var i in componentsData) {
    if(componentsData[i].required)
    {
        if(componentsData[i].type == 'name')
        {
            var parsed = JSON.parse(componentsData[i].value);
            if(!parsed.firstname)
            {
                alert('Vul aub een voornaam in.');
                return;
            }
            if(!parsed.lastname)
            {
                alert('Vul aub een achternaam in.');
            }
        }
        else if(componentsData[i].type == 'checkbox' && componentsData[i].value.length == 0)
        {
            alert('Vind tenminste één van de opties bij "'+htmlEntities(componentsData[i].title)+'" in.');
            return;
        }
        else if(componentsData[i].type == 'dropdown' && !componentsData[i].value)
        {
            alert('Kies één van de opties bij "'+htmlEntities(componentsData[i].title)+'".');
            return;
        }
        else if(componentsData[i].type == 'textarea' && !componentsData[i].value)
        {
            alert('Het veld bij "'+htmlEntities(componentsData[i].title)+'" mag niet leeg gelaten worden.');
            return;
        }
    }
    delete componentsData[i].required;
}

// Convert the components data object to an array
componentsData = Object.values(componentsData);

form_submission_sendFormToServer(formId, componentsData);
}

function htmlEntities(str) {
return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}


function form_submission_sendFormToServer(formId, componentsData) {

    var loadingEl = document.getElementById('form_submission_'+formId+'_loading');
    var successEl = document.getElementById('form_submission_'+formId+'_success');
    var formEl = document.getElementById('form_submission_'+formId+'_form');
    loadingEl.style.display = '';
    formEl.style.display = 'none';
var xhr = new XMLHttpRequest();
xhr.open('POST', apibase + 'forms/submit_form.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
    var response = JSON.parse(this.responseText);
    if (response.success) {
        console.log("Form was submitted successfully");
        alert('Bedankt! Je inschrijving is verstuurd. Je hoort binnenkort van ons!');
        loadingEl.style.display = 'none';
        successEl.style.display = '';
    } else {
        console.log("Form could not be submitted: " + response.error);
        formEl.style.display = '';
        loadingEl.style.display = 'none';
        alert('Het formulier kon niet verstuurd worden: ' + response.error);
    }
};
xhr.send('formId=' + formId + '&componentsData=' + encodeURIComponent(JSON.stringify(componentsData)));
}