function FormSubscription(id, stepForm, option) {
    this.id = id;
    this.stepForm = stepForm;
    this.option = option;

    this.onClickPlace = this.onClickPlace.bind(this);
    this.onClickDate = this.onClickDate.bind(this);
    this.onClickAddParticipant = this.onClickAddParticipant.bind(this);
    this.onClickDeleteParticipant = this.onClickDeleteParticipant.bind(this);
    this.onClickAddOrderCoupon = this.onClickAddOrderCoupon.bind(this);
    this.onCheckOrderCoupon = this.onCheckOrderCoupon.bind(this);
    this.onClickSubmit = this.onClickSubmit.bind(this);

    this.setInputDataName();
    this.setInputHidden();
    this.setBlockSelectedPlaceDate("init");
    this.setBlockPlace("block-place");
    this.setBlockDate("block-date");
    this.setBlockPlace("block-place-top", "form-next-course");
    this.setBlockDate("block-date-top", false);
    this.setBlockParticipant();
    this.setBlockCompany();
    this.setBlockOrderCoupon();
    this.refreshPrice();
    this.setStep(stepForm);

    document.getElementById('btn-submit').addEventListener('click', this.onClickSubmit);
}

FormSubscription.prototype.setStep = function () {
    var defaultDateId = document.getElementById('hidden-date-default-id');
    defaultDateId = defaultDateId.innerText.trim().length ? defaultDateId.innerText.trim() : null;
    if (defaultDateId) {
        var form = document.getElementById(this.id);
        form.elements["date-id"].value = defaultDateId;

        var imgStep1Url = "https://assets-global.website-files.com/61a606eea4df865dc8bf24a4/61fd2fdfe9dd74d2d1d8f13c_Group%20582.svg";
        var imgStep2Url = "https://assets-global.website-files.com/61a606eea4df865dc8bf24a4/61fd52c35938f3309c80356d_Group%20582%201.svg";
        var imgStep2Elt = document.querySelector(".div-choice-02 .div-block-progress img");
        var imgStep3Elt = document.querySelector(".div-choice-03 .div-block-progress img");
        imgStep2Elt.src = imgStep1Url;
        imgStep3Elt.src = imgStep2Url;

        var btnNextStep2 = document.querySelector(".div-choice-02 .btn-subscription:not(.btn-back)");
        btnNextStep2.innerText = this.option.btn.step3AsStep2;

        this.stepForm.hideChoice(1);
        this.stepForm.showChoice(2);

        var btnBlock = document.querySelectorAll(".sign-up-form-btn-container");
        btnBlock[1].className = btnBlock[1].className.replace(" with-back-btn", "");
        this.stepForm.toggleStepButton(2, "prev", "hide");
    }
}

FormSubscription.prototype.setInputDataName = function () {
    for (var i = 0; i < this.stepForm.formInputs.length; i++) {
        if (this.stepForm.formInputs[i].name.indexOf("participant-") > -1) {
            var inputId = this.stepForm.formInputs[i].name.replace(/(\D+)/g, "");
            var inputName = this.stepForm.formInputs[i].name.replace(/(\d+)/g, "X");
            this.stepForm.formInputs[i].dataset.name = inputName.replace("X", inputId);
            // this.stepForm.formInputs[i].dataset.name = this.option.fieldName[inputName].replace("X", inputId);
        } else {
            this.stepForm.formInputs[i].dataset.name = this.stepForm.formInputs[i].name;
            // this.stepForm.formInputs[i].dataset.name = this.option.fieldName[this.stepForm.formInputs[i].name];
        }
    }
    return true;
}

FormSubscription.prototype.setInputHidden = function () {
    var hidden = document.querySelectorAll(".hidden-input");
    for (var i = 0; i < hidden.length; i++) {
        hidden[i].style.display = "none";
    }
}

FormSubscription.prototype.setBlockSelectedPlaceDate = function (action) {
    var selectedPlaceBlock = document.querySelector(this.option.wrapper + " .input-selected-place");
    var selectedDateBlock = document.querySelector(this.option.wrapper + " .input-selected-date");
    if (!selectedPlaceBlock || !selectedDateBlock) {
        return false;
    }

    switch (action) {
        case "init":
            this.setBlockSelectedPlaceDate("hide");
            var prevBtn = document.querySelectorAll(this.option.prevBtn);
            var nextBtn = document.querySelectorAll(this.option.nextBtn);
            var obj = this;
            for (var i = 0; i < prevBtn.length; i++) {
                prevBtn[i].addEventListener("click", function (evt) {
                    if (evt.target.dataset.step == "2") {
                        obj.setBlockSelectedPlaceDate("hide");
                    }
                });
            }
            for (var i = 0; i < nextBtn.length; i++) {
                nextBtn[i].addEventListener("click", function (evt) {
                    obj.setBlockSelectedPlaceDate("display");
                });
            }
            break;
        case "update":
            displayValue(".input-selected-place", "input[type=\"radio\"]:checked + .location-radio-btn-label", this.option.wrapper);
            displayValue(".input-selected-date", ".block-selected input[type=\"radio\"]", this.option.wrapper);

        function displayValue (block, input, wrapper) {
            var selectedDataValues = document.querySelectorAll(wrapper + " " + block + " .value");
            var selectedDataInput = document.querySelector(wrapper + " " + input);
            selectedDataInput = (selectedDataInput.tagName == "INPUT") ?
                selectedDataInput.value.split(" - ") :
                selectedDataInput.innerText.split(" - ");
            for(const selectedDataValue of selectedDataValues) {
                selectedDataValue.innerHTML = selectedDataInput[0];
            }
        }
            break;
        case "display":
            toggleBlock(".input-selected-place", this.option.wrapper);
            toggleBlock(".input-selected-date", this.option.wrapper);

        function toggleBlock (block, wrapper) {
            var selectedDataBlock = document.querySelector(wrapper + " " + block);
            var selectedDataValue = document.querySelector(wrapper + " " + block + " .value");
            if (selectedDataValue.innerText.trim().length && (selectedDataValue.innerText != "undefined")) {
                selectedDataBlock.style.display = "flex";
            } else {
                selectedDataBlock.style.display = "none";
            }
        }
            break;
        case "hide":
            selectedPlaceBlock.style.display = "none";
            selectedDateBlock.style.display = "none";
            break;
        default:
            break;
    }

    return true;
}

FormSubscription.prototype.setBlockPlace = function (containerId, formId) {
    formId = formId || this.id;

    // Frontcore IDs management
    var inputs = document.querySelectorAll("#" + containerId + " input[type=\"radio\"]");
    var ids = document.querySelectorAll("#" + containerId + " .hidden-place-id");
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].id = "input-place-" + (i + 1);
        inputs[i].value = ids[i].innerText.trim();
    }

    // Arrow management
    var prevItem = document.querySelectorAll("#" + formId + " .prevloc");
    var nextItem = document.querySelectorAll("#" + formId + " .nextloc");
    for (var i = 0; i < prevItem.length; i++) {
        if (inputs.length >= this.option.placeMinForScroll) {
            prevItem[i].style.display = "flex";
            nextItem[i].style.display = "flex";
        } else {
            prevItem[i].style.display = "none";
            nextItem[i].style.display = "none";
        }
    }

    // Place click management
    var form = document.getElementById(formId);
    var dates = document.querySelectorAll("#" + containerId + " input[type=\"radio\"]");
    if (dates.length) {
        for (var i = 0; i < form.place.length; i++) {
            form.place[i].addEventListener('click', this.onClickPlace);
        }

        return true;
    }

    return false;
}

FormSubscription.prototype.setBlockDate = function (containerId, containerHasInput) {
    function setBlockDateElement (elt, ids, places, title, onClickDate) {
        elt.dataset.id = ids[i].innerText.trim();
        elt.dataset.place = places[i].innerText.trim();
        if (!containerHasInput) {
            elt.dataset.scroll = "1";
        }
        elt.style.cursor = "pointer";
        elt.title = title;
        elt.addEventListener('click', onClickDate);
    }

    containerHasInput = (containerHasInput == undefined) ? true : false;

    var blocks = document.querySelectorAll("#" + containerId + " .block-date");
    var inputs = document.querySelectorAll("#" + containerId + " input[type=\"radio\"]");
    var ids = document.querySelectorAll("#" + containerId + " .hidden-date-id");
    var places = document.querySelectorAll("#" + containerId + " .hidden-date-place");
    var dateDisplayed = document.querySelectorAll("#" + containerId + " label span");
    var placesDisplayed = document.querySelectorAll("#" + containerId + " .input-date-place");

    for (var i = 0; i < blocks.length; i++) {
        blocks[i].dataset.id = ids[i].innerText.trim();
        blocks[i].dataset.place = places[i].innerText.trim();
        if (!containerHasInput) {
            blocks[i].dataset.scroll = "1";
        }

        if (containerHasInput) {
            inputs[i].id = "input-place-" + (i + 1);
            inputs[i].dataset.id = ids[i].innerText.trim();
            inputs[i].dataset.place = places[i].innerText.trim();
            // inputs[i].value = ids[i].innerText.trim() + "|" + places[i].innerText.trim();
            inputs[i].value = dateDisplayed[i].innerText.trim() + " - " + placesDisplayed[i].innerText.trim();
        }

        var formContainer = this;
        this.exploreElement(blocks[i], function (elt) {
            setBlockDateElement(elt, ids, places, formContainer.option.btn.book, formContainer.onClickDate);
        }, function (elt) {
            setBlockDateElement(elt, ids, places, formContainer.option.btn.book, formContainer.onClickDate);
        });
    }

    return true;
}

FormSubscription.prototype.setBlockParticipant = function () {
    this.setParticipantButton(true);
    return true;
}

FormSubscription.prototype.setBlockCompany = function () {
    function selectorSetLabel() {
        var compSelect = document.createElement("DIV");
        compSelect.id = "input-company-select";
        var compText = document.createElement("P");
        compText.className = "input-company-select-label";
        compText.innerText = companySelect;
        compSelect.appendChild(compText);
        return compSelect;
    }

    function selectorReset() {
        var compBlock = document.querySelector("#block-company div");
        var compSelect = document.getElementById("input-company-select");
        if (compSelect) {
            compBlock.removeChild(compSelect);
            compBlock.appendChild(selectorSetLabel());
        }
    }

    function initCompanySelect() {
        var compBlock = document.querySelector("#block-company div");
        var compInput = document.getElementById("input-company-name");
        compInput.addEventListener("keyup", function () {
            if (compInput.value.length) {
                searchBrreg(compInput.value);
            } else {
                selectorReset();
            }
        });

        compBlock.appendChild(selectorSetLabel());
    }

    function onSelectCompanyName(evt) {
        document.getElementById("input-company-name").value = evt.target.dataset.name;
        document.getElementById("input-company-number").value = evt.target.dataset.vatnumber;
        selectorReset();
    }

    function refreshInput(data) {
        var selector = document.getElementById("input-company-select");

        selector.innerHTML = "";
        selector.className = selector.className.replace(/ opened/g, "");
        for (var i = 0; (i < 5) && (i < data["_embedded"]["enheter"].length); i++) {
            var vatNumber = data["_embedded"]["enheter"][i]["organisasjonsnummer"];
            var name = data["_embedded"]["enheter"][i]["navn"];

            if (i == 0) {
                selector.className += " opened";
            }

            var compName = document.createElement("p");
            compName.addEventListener("click", onSelectCompanyName);
            compName.dataset.name = name;
            compName.dataset.vatnumber = vatNumber;
            compName.className = "input-company-select-item";
            compName.innerText = name + " (" + vatNumber + ")";
            selector.appendChild(compName);
        }
    }

    function searchBrreg(input) {
        fetch("https://data.brreg.no/enhetsregisteret/api/enheter?navn=" + input, { method: "GET" })
            .then(function (response) {
                return response.json()
            })
            .then(function (jsonResponse) {
                refreshInput(jsonResponse);
                return true;
            })
            .catch(function (error) {
                return false;
            })
    }

    if (this.option.company.orgNumberSearch) {
        var companySelect = this.option.msg.companySelect;
        initCompanySelect();
    }

    return true;
}

FormSubscription.prototype.setBlockOrderCoupon = function () {
    var btn = document.getElementById("btn-order-coupon");
    btn.addEventListener('click', this.onClickAddOrderCoupon);

    var btn = document.getElementById("btn-order-coupon-check");
    btn.addEventListener('click', this.onCheckOrderCoupon);

    var input = document.getElementById("input-order-coupon-code");
    input.removeEventListener('keypress', this.stepForm.onNextStep);
    input.addEventListener('keypress', this.onCheckOrderCoupon);

    this.toggleBlock("block-order-coupon-code");
    return true;
}

FormSubscription.prototype.onClickPlace = function (evt) {
    // Activate relevant dates
    activateDate(this.id, "block-date", true, evt.target, this);
    activateDate("form-next-course", "block-date-top", this.option.checkDateValidity, evt.target, this);

    activatePlace("block-place", evt.target);
    activatePlace("block-place-top", evt.target);

    // Activate the same place which belong to another form
    function activatePlace(dateContainerId, selectedPlace) {
        var inputs = document.querySelectorAll("#" + dateContainerId + " input[type=\"radio\"]");
        for (var i = 0; i < inputs.length; i++) {
            if (inputs[i].value == selectedPlace.value) {
                inputs[i].checked = true;
            }
        }
    }

    // Activate dates which belong to a form
    function activateDate(formId, dateContainerId, checkDateValidity, selectedPlace, obj) {
        var form = document.getElementById(formId);
        var blocks = document.querySelectorAll("#" + dateContainerId + " .block-date");
        var displayNextBtn = false;
        for (var i = 0; i < blocks.length; i++) {
            if (form.date) {
                form.date[i].checked = false;
            }

            if (checkDateValidity) {
                if (blocks[i].dataset.place == selectedPlace.value) {
                    blocks[i].style.display = "block";
                    displayNextBtn = true;
                } else {
                    blocks[i].style.display = "none";
                }
            }
        }
    }
}

FormSubscription.prototype.onClickDate = function (evt) {
    activateDate(this.id);
    activateDate("form-next-course");
    this.setBlockSelectedPlaceDate("update");
    if (evt.target.dataset.scroll == "1") {
        this.scrollToForm();
    }

    function activateDate (formId) {
        var dateBlockForm = document.querySelectorAll("#block-date .block-date");
        var dateBlockPageTop = document.querySelectorAll("#block-date-top .block-date");

        for (var i = 0; i < dateBlockForm.length; i++) {
            updateDateBlock(dateBlockForm[i], evt.target.dataset.id);
            updateDateBlock(dateBlockPageTop[i], evt.target.dataset.id);
        }

        var form = document.getElementById(formId);
        if (form) {
            if (form.elements["place"].length) {
                for (var i = 0; i < form.elements["place"].length; i++) {
                    toggleRadioPlace(form.elements["place"][i], evt.target.dataset.place);
                }
            } else {
                toggleRadioPlace(form.elements["place"], evt.target.dataset.place);
            }

            if (form.elements["date-id"]) {
                form.elements["date-id"].value = evt.target.dataset.id;
            }
        }
    }

    function updateDateBlock(block, eltId) {
        if (block) {
            block.className = block.className.replace(/\s+block\-selected/g, "");
            toggleRadioDate(block, false);

            if (block.dataset.id == eltId) {
                toggleRadioDate(block, true);
                block.className += " block-selected";
            }
        }
    }

    function getChildren (elt, search) {
        for (var i = 0; i < elt.children.length; i++) {
            if (elt.children[i].tagName == search) {
                return elt.children[i];
            }
        }

        return false;
    }

    function toggleRadioPlace (elt, value) {
        if (elt.value == value) {
            elt.checked = true;
        }
    }

    function toggleRadioDate (block, checked) {
        var child = getChildren(block, "DIV");
        if (child) {
            var child = getChildren(child, "LABEL");
            if (child) {
                child = getChildren(child, "INPUT");
                if (child) {
                    child.checked = checked;
                }
            }
        }
    }
}

FormSubscription.prototype.onClickAddParticipant = function (evt) {
    this.loadParticipant();

    var wrapper = document.getElementById("block-participant-list");
    var blocks = document.querySelectorAll("#block-participant-list .block-participant");
    var id = blocks.length + 1;
    var content = blocks[0].outerHTML;

    content = this.setParticipantInputHtml(1, id, content);
    // wrapper.appendChild(block);
    wrapper.innerHTML += content;

    this.displayParticipant();
    this.setParticipantButton();
    this.refreshPrice();

    this.stepForm.setFormInput("#wf-form-subscription .w-input,#wf-form-subscription input[type=\"radio\"],#wf-form-subscription input[type=\"checkbox\"]");
    // this.setBlockParticipant();
}

FormSubscription.prototype.onClickDeleteParticipant = function (evt) {
    this.loadParticipant();
    var block = document.getElementById("block-participant-" + evt.target.dataset.id);
    block.remove();
    this.participants.splice(parseInt(evt.target.dataset.id) - 1, 1);

    var participantCount = this.participantCount();
    var blocks = document.querySelectorAll("#block-participant-list .block-participant");
    for (var i = 1; i < participantCount; i++) {
        var oldBlockId = blocks[i].id.replace("block-participant-", "");
        blocks[i].id = "block-participant-" + (i + 1);
        blocks[i].innerHTML = this.setParticipantInputHtml(oldBlockId, (i + 1), blocks[i].innerHTML);
    }

    this.displayParticipant();
    this.setParticipantButton();
    this.refreshPrice();

    this.stepForm.setFormInput("#wf-form-subscription .w-input,#wf-form-subscription input[type=\"radio\"],#wf-form-subscription input[type=\"checkbox\"]");
}

FormSubscription.prototype.onClickSubmit = function (evt) {
    var form = document.getElementById(this.id);

    var participants = [];
    var participantCount = this.participantCount();
    for (var i = 1; i <= participantCount; i++) {
        participants.push({
            "firstname": form.elements["participant-firstname-" + i].value,
            "lastname": form.elements["participant-lastname-" + i].value,
            "email": form.elements["participant-email-" + i].value,
            "phone": form.elements["participant-phone-" + i].value,
            "position": form.elements["participant-title-" + i].value,
            /* "custom_properties" : {
                "source" : form.elements["source"].value,
                "comment": form.elements["message"].value
            } */
        });
    }

    form.elements["course-participant-list"].value = JSON.stringify(participants);
    form.elements["course-participant-count"].value = participantCount;

    /* var data = {
        "coursedate_id": form.elements["date-id"].value,
        "payment_method": "invoice",
        "participants": participants,
        "company": form.elements["company-name"].value,
        "company_number": form.elements["company-number"].value,
        "invoice_address_1": form.elements["company-address"].value,
        "invoice_zipcode": form.elements["company-postcode"].value,
        "invoice_city": form.elements["company-city"].value,
        "invoice_email": form.elements["invoice-email"].value,
        "invoice_reference": form.elements["invoice-number"].value
    }

    if (form.elements["gln-number"] && form.elements["gln-number"].value && form.elements["gln-number"].value.trim().length) {
        data["gln_number"] = form.elements["gln-number"].value.trim();
    }

    var couponCode = form.elements["order-coupon-code"].value.trim();
    var couponType = form.elements["order-coupon-source"].value.trim();
    if (couponCode.length && couponType.length) {
        couponType += "_code";
        data[couponType] = couponCode;
    }

    form.elements["data"].value = JSON.stringify(data); */
    return true;
}

FormSubscription.prototype.onClickAddOrderCoupon = function (evt) {
    var visible = this.toggleBlock("block-order-coupon-code");
    if (!visible) {
        var form = document.getElementById(this.id);
        form.elements["order-coupon-code"].value = "";
        form.elements["order-coupon-source"].value = "";
        this.refreshPrice();
    }
}

FormSubscription.prototype.onCheckOrderCoupon = function (evt) {
    this.refreshPrice();
    var form = document.getElementById(this.id);
    form.elements["order-coupon-source"].value = "";
    var codeInput = document.getElementById("input-order-coupon-code");
    if (!codeInput.value.trim().length) {
        return false;
    }

    var evtClick = (evt.type !== 'keypress');
    var evtEnter = ((evt.type === 'keypress') && (evt.key === 'Enter'));
    if (evtClick || evtEnter) {
        function setMsgBlock(text, className, display) {
            display = (display == undefined) ? true : display;
            var couponBlock = document.querySelector("#block-order-coupon-code");
            var msgBlock = document.querySelector("#block-order-coupon-code p");
            if (msgBlock) {
                msgBlock.style.display = display ? "block" : "none";
                msgBlock.className = className;
                msgBlock.innerText = text;
            } else {
                msgBlock = document.createElement("P");
                msgBlock.className = className;
                msgBlock.innerText = text;
                msgBlock.style.display = display ? "block" : "none";
                couponBlock.appendChild(msgBlock);
            }
        }

        setMsgBlock("Loading...", "infomsg");

        var api = new Api("confex-api", "https://europe-west1-confex-data-sync-352208.cloudfunctions.net", this.option.debug);
        var request = api.send('/dataread-discount/', {
            "project": form.elements["project"].value,
            "code": form.elements["order-coupon-code"].value,
            "id": form.elements["date-id"].value,
        }, 'GET', null, null);
        /* request = api.send('/confex-webflowDiscountCheck', {
            "project": form.elements["project"].value,
            "code": form.elements["order-coupon-code"].value,
            "id": parseFloat(form.elements["date-id"].value),
        }, 'POST'); */
        request.then((data) => {
            if (data.error) {
                setMsgBlock(data.error.msg, "errormsg");
                this.refreshPrice();
                return false;
            }

            setMsgBlock(this.option.msg.goodCode, "confirmsg");
            this.refreshPrice(data.data);
            form.elements["order-coupon-source"].value = data.data.source;
            return true;
        }).catch((error) => {
            console.error("onCheckOrderCoupon", "error", error);
            this.refreshPrice();
            return false;
        });
    }

    return false;
}

FormSubscription.prototype.toggleNextBtn = function (step, display) {
    var nextBtn = document.querySelector(this.option.nextBtn.map(function (elt) {
        return elt + "[data-step=\"" + step + "\"]";
    }));

    if (display) {
        delete nextBtn.style.display;
        // nextBtn.style.display = "inline-block";
    } else {
        nextBtn.style.display = "none";
    }
}

FormSubscription.prototype.toggleBlock = function (id, display) {
    var msg = document.getElementById(id);
    if (display == undefined) {
        display = (msg.style.display == "none");
    }

    if (display) {
        msg.style.display = "block";
        return true;
    }

    msg.style.display = "none";
    return false;
}

FormSubscription.prototype.participantCount = function () {
    var form = document.getElementById(this.id);

    var participantInputs = 0;
    for (var i = 0; i < form.elements.length; i++) {
        if (form.elements[i].name.indexOf("participant-email-") > -1) {
            participantInputs++;
        }
    }

    return participantInputs;
}

FormSubscription.prototype.setParticipantInputHtml = function (oldId, newId, content) {
    function titleTag(id, title, blockHead) {
        var html = "<" + blockHead.tag + " id=\"" + blockHead.id + "\" class=\"" + blockHead.class + "\">" + title + " " + id + "</" + blockHead.tag + ">";
        return html;
    }

    function titleTag2(id, title, deleteParticipant, blockHead) {
        var html = "<" + blockHead.tag + " id=\"" + blockHead.id + "\" class=\"" + blockHead.class + "\" style=\"display: flex;\"><span style=\"display: block; padding: 9px 15px 9px 0;\">" + title + " " + id + "</span>" + deleteTag(id, deleteParticipant) + "</" + blockHead.tag + ">";
        return html;
    }

    function deleteTag(id, deleteParticipant) {
        var html = "<div class=\"add-a-person btn-delete-participant\" data-id=\"" + id + "\" style=\"display: flex;\"><img data-id=\"" + id + "\" alt=\"\" class=\"image-72\" style=\"max-width: 30px;\" loading=\"lazy\" src=\"https://uploads-ssl.webflow.com/61a606eea4df865dc8bf24a4/6213546eba069e747dc85887_remove%20deltaker.svg\"><a class=\"button-8 w-button\" href=\"#\" id=\"btn-delete-participant-" + id + "\" type=\"button\" data-id=\"" + id + "\" style=\"display: block; padding: 9px 15px; color: #000; font-size: 16px; font-weight: 600;\">" + deleteParticipant + "</a></div>";
        return html;
    }

    content = content.replace(/\n+/g, "").replace(/\s+/g, " ").replace(/> /g, ">");
    if (parseInt(oldId) == 1) {
        content = content.replace(
            titleTag(oldId, this.option.participantTitle, this.option.participant.blockHead),
            titleTag2(newId, this.option.participantTitle, this.option.btn.deleteParticipant, this.option.participant.blockHead)
        );
    } else {
        content = content.replace(
            titleTag2(oldId, this.option.participantTitle, this.option.btn.deleteParticipant, this.option.participant.blockHead),
            titleTag2(newId, this.option.participantTitle, this.option.btn.deleteParticipant, this.option.participant.blockHead)
        );
    }

    content = content.replace(" " + oldId + "</", " " + newId + "</");
    content = content.replace("id=\"block-participant-" + oldId + "\"", "id=\"block-participant-" + newId + "\"");
    content = content.replace("id=\"btn-delete-participant-" + oldId + "\"", "id=\"btn-delete-participant-" + newId + "\"");
    content = this.replaceAll(content, "data\-id=\"" + oldId + "\"", "data-id=\"" + newId + "\"");

    var fields = ["participant-firstname-", "participant-lastname-", "participant-title-", "participant-email-", "participant-phone-"];
    for (var i = 0; i < fields.length; i++) {
        content = this.replaceAll(content, "data\-name=\"([a-z|A-Z|\\-|\\s]+)(\\d+)([a-z|A-Z|\\-|\\s]+)\"", "data-name=\"$1" + newId + "$3\"");
        content = this.replaceAll(content, fields[i] + oldId + "\"", fields[i] + newId + "\"");
    }

    return content
}

FormSubscription.prototype.setParticipantButton = function (addAddClickEvent) {
    var participantCount = this.participantCount();
    var blocks = document.querySelectorAll(".add-a-person");
    var formContainer = this;
    for (var i = 0; i < blocks.length; i++) {
        this.exploreElement(blocks[i], function (elt) {
            elt.style.cursor = "pointer";
            if (i < blocks.length - 1) {
                elt.dataset.test = "delete";
                elt.addEventListener('click', formContainer.onClickDeleteParticipant);
            } else {
                elt.dataset.test = "add";
                if (participantCount >= formContainer.option.participantMax) {
                    elt.style.display = "none";
                } else {
                    elt.style.display = "flex";
                }

                if (addAddClickEvent) {
                    elt.addEventListener('click', formContainer.onClickAddParticipant);
                }
            }
        }, function (elt) {
            if (i < blocks.length - 1) {
                elt.dataset.test = "delete";
            } else {
                elt.dataset.test = "add";
            }
        });
    }
}

FormSubscription.prototype.loadParticipant = function () {
    this.participants = [];

    var participantCount = this.participantCount();
    for (var i = 0; i < participantCount; i++) {
        var firstname = document.getElementById("input-participant-firstname-" + (i + 1));
        var lastname = document.getElementById("input-participant-lastname-" + (i + 1));
        var title = document.getElementById("input-participant-title-" + (i + 1));
        var email = document.getElementById("input-participant-email-" + (i + 1));
        var phone = document.getElementById("input-participant-phone-" + (i + 1));
        this.participants.push({
            firstname: firstname.value,
            lastname: lastname.value,
            title: title.value,
            email: email.value,
            phone: phone.value
        });
    }
}

FormSubscription.prototype.displayParticipant = function () {
    for (var i = 0; i < this.participants.length; i++) {
        var firstname = document.getElementById("input-participant-firstname-" + (i + 1));
        var lastname = document.getElementById("input-participant-lastname-" + (i + 1));
        var title = document.getElementById("input-participant-title-" + (i + 1));
        var email = document.getElementById("input-participant-email-" + (i + 1));
        var phone = document.getElementById("input-participant-phone-" + (i + 1));

        firstname.value = this.participants[i].firstname;
        lastname.value = this.participants[i].lastname;
        title.value = this.participants[i].title;
        email.value = this.participants[i].email;
        phone.value = this.participants[i].phone;
    }
}

FormSubscription.prototype.refreshPrice = function (discount) {
    this.loadPrice(discount);
    this.displayPrice();
}

FormSubscription.prototype.loadPrice = function (discount) {
    this.price = {
        person: 0.00,
        coupon: 0.00,
        total: 0.00
    };

    this.priceHtmlToFloat("person");
    // this.priceHtmlToFloat("coupon");
    // this.priceHtmlToFloat("total");

    var participantCount = this.participantCount();

    if (discount) {
        discount.value = parseFloat(discount.value);
        if (discount.type == "percent") {
            this.price.coupon = (discount.value / 100.00) * this.price.person * participantCount;
        } else if (discount.type == "value") {
            this.price.coupon = discount.value;
        }
    }

    this.price.total = this.price.person * participantCount - this.price.coupon;
}

FormSubscription.prototype.displayPrice = function () {
    this.priceFloatToHtml("person");
    this.priceFloatToHtml("coupon");
    this.priceFloatToHtml("total");
}

FormSubscription.prototype.priceHtmlToFloat = function (field) {
    var html = document.querySelector("#block-price-" + field + " .price-value");
    if (html) {
        this.price[field] = this.priceStringToFloat(html.innerText.trim());
    }
}

FormSubscription.prototype.priceFloatToHtml = function (field) {
    var html = document.querySelector("#block-price-" + field + " .price-value");
    if (html) {
        html.innerHTML = this.priceFloatToString(this.price[field]);
    }
}

FormSubscription.prototype.priceStringToFloat = function (data) {
    return parseFloat(data.replace(/\s+/g, ""));
}

FormSubscription.prototype.priceFloatToString = function (value, precision, lang, curr) {
    precision = precision || 2;
    var valueB = new Intl.NumberFormat(lang || 'fr-FR', Object.assign({
        minimumFractionDigits: precision,
        maximumFractionDigits: precision
    }, curr ? {
        style: 'currency',
        currency: curr
    } : {})).format(value);

    return valueB;
}

FormSubscription.prototype.exploreElement = function(elt, callbackElt, callbackChild) {
    callbackElt(elt);
    for (var i = 0; i < elt.children.length; i++) {
        if (elt.children[i].children.length) {
            this.exploreElement(elt.children[i], callbackElt, callbackChild);
        } else {
            callbackChild(elt.children[i]);
        }
    }
}

FormSubscription.prototype.replaceAll = function(subject, search, replace) {
    var re = new RegExp(search, "g");
    return subject.replace(re, replace);
}

FormSubscription.prototype.scrollToForm = function () {
    var formAnchor = document.querySelector("a[href=\"#register\"]");
    // console.log("formAnchor", formAnchor);
    formAnchor.click();
    /* var posRegSection = Math.abs(document.getElementById("regsection").offsetTop);
    var posRegister = Math.abs(document.getElementById("register").offsetTop);
    posRegister = (posRegister < 200) ? (posRegSection - posRegister) : posRegister;
    var posDiff = Math.abs(posRegSection - posRegister);
    console.log("regsection", posRegSection);
    console.log("register", posRegister);
    console.log("posDiff", posDiff);
    console.log("scroll to", posRegSection - posDiff);
    window.scroll(0, posRegSection - posDiff); */
}