<div id="svm-canvas"></div>
<script type="text/javascript">
    const id = 0;
    const uuid = "XXXX-YYYY-ZZZZ";
    const dealer_name = "Autobedrijf Amsterdam";
    const dealer_location = "Amsterdam";
    const svm_create_id = "XXXX";
    const dark_mode = false;
    (function() {
        let h = document.getElementsByTagName('head')[0];
        let s = document.createElement('script');
        s.type = 'text/javascript';
        s.src = "https://www.voorraadmodule.nl/js/svm.js?t="+Date.now();
        s.onload = function(){
            svm.saveUrlGetData({
                key: 'svm_canvas_width',
                value:document.getElementById('svm-canvas').clientWidth
            });
            let vm = svm.create(
                svm_create_id,
                'https://www.voorraadmodule.nl/',
                false,
                {
                    'carousel': false,
                    'carouselOptions': {
                        'direction': false,
                        'amount': false
                    },
                    'quick_search': false
                },
                'default'
            );
            vm.init();
            setTimeout(() => {
                load_and_render_iframe();
            }, 500);
        };
        h.appendChild(s);
    })();
    setInterval(() => {
        let canvas = jQuery('#svm-canvas #svm-loading-container:visible');
        if (typeof canvas[0] != 'undefined') {
            setTimeout(() => {
                load_and_render_iframe()
            }, 500);
        }
    }, 100);

    function load_and_render_iframe() {
        console.warn('load_and_render_iframe');

        remove_previous_lease_blocks_if_any_exists();
        let canvas = document.getElementById('svm-canvas');
        let values = get_values(canvas);
        insert_iframe(canvas, values.price);
        remove_dlm_header_text_if_any_exists();

        set_rendered_iframe_url(values);
    }
    function remove_previous_lease_blocks_if_any_exists() {
        try {
            for (let i = 0; i < 5; i++) {
                document.getElementById('svm-block-lease-block').remove();
            }
        } catch (e) {
        }
    }

    function get_values(canvas) {
        let main_specs_block_children = get_main_specs_block_children();

        return {
            "price": get_price(canvas),
            "brand": get_brand(main_specs_block_children),
            "model": get_model(main_specs_block_children),
            "license_plate": get_license_plate(),
            "btw_marge": get_btw_marge(),
            "build_year": get_build_year(),
            "fuel": get_fuel(),
            "mileage": get_mileage(),
        };
    }

    function get_main_specs_block_children() {
        return document.getElementsByClassName('mainSpecsBlock')[0].children;
    }

    function get_price(canvas) {
        let price = canvas.getElementsByClassName('price_with_currency')[0];
        return price.innerHTML.replaceAll(/\D/g, '');
    }

    function get_brand(mainSpecsBlockChildren) {
        return mainSpecsBlockChildren[0].innerHTML;
    }

    function get_model(mainSpecsBlockChildren) {
        return mainSpecsBlockChildren[1].innerHTML;
    }

    function get_license_plate() {
        let childElem = document.getElementsByClassName('license_nl')[0];
        return childElem.innerHTML;
    }

    function get_btw_marge() {
        let get_child = document.getElementsByClassName('vat_applicable')[0];
        let innerHTML = get_child.getElementsByClassName('value')[0].innerHTML;
        return innerHTML === 'Ja' ? 'B' : 'M';
    }

    function get_build_year() {
        let childElem = document.getElementsByClassName('build_year')[0];
        let valueElem = childElem.getElementsByClassName('value')[0];
        return valueElem.innerHTML;
    }

    function get_fuel() {
        let childElem = document.getElementsByClassName('fuel')[0];
        let valueElem = childElem.getElementsByClassName('value')[0];
        return valueElem.innerHTML;
    }

    function get_mileage() {
        let childElem = document.getElementsByClassName('mileage')[0];
        let valueElem = childElem.getElementsByClassName('value')[0];
        let value = valueElem.innerHTML;
        value = value.replaceAll(/\D/g, '');
        return value;
    }

    function insert_iframe(canvas, price) {
        let iframe_html = atob('PGRpdiBjbGFzcz0ic3ZtLWJsb2NrICIgaWQ9InN2bS1ibG9jay1'
            + 'sZWFzZS1ibG9jayI+PGgzIGlkPSJkbG0taGVhZGVyIj48L2gzPjxzZWN0aW9uIG'
            + 'lkPSJzdm0tYmxvY2stbGVhc2UiIGNsYXNzPSJzdm0tY2xlYXJmaXgiPjxkaXYgY'
            + '2xhc3M9ImxlYXNlQmxvY2sgc3ZtLWNsZWFyZml4IiBzdHlsZT0iIj48ZGl2IGlk'
            + 'PSJocmVtYXJrcyIgc3R5bGU9Im1heC1oZWlnaHQ6MTAwJSI+PGlmcmFtZSBpZD0'
            + 'iZGVsZWFzZW1ha2VsYWFyLWlmcmFtZSIgc3JjPSJodHRwczovL2FkYnBsdXMubm'
            + 'wvZGFzaGJvYXJkL2FwaS9pZnJhbWUucGhwIiBzdHlsZT0iaGVpZ2h0OiAzMTBwe'
            + 'Dsgd2lkdGg6IDEwMCU7IGJvcmRlcjogbm9uZSI+PC9pZnJhbWU+PC9kaXY+PC9k'
            + 'aXY+PC9zZWN0aW9uPjwvZGl2Pg==');
        let remarks = document.getElementById('svm-block-remarks-block');
        console.warn("Loaded", window.performance.now(), canvas, price, remarks);
        remarks.insertAdjacentHTML("beforebegin", iframe_html);
    }

    function remove_dlm_header_text_if_any_exists() {
        document.getElementById('dlm-header').innerHTML = "";
    }

    function set_rendered_iframe_url(values) {
        let rendered_iframe = document.getElementById('deleasemakelaar-iframe');
        rendered_iframe.src += "?id=" + id + "&uuid=" + uuid
            + "&url=" + window.location.href
            + "&price=" + values.price
            + "&lease_request[license_plate]=" + values.license_plate
            + "&lease_request[brand]=" + values.brand
            + "&lease_request[year]=" + values.build_year
            + "&lease_request[fuel]=" + values.fuel
            + "&lease_request[km]=" + values.mileage
            + "&lease_request[model]=" + values.model
            + "&lease_request[btw_marge]=" + values.btw_marge
            + "&lease_request[dealer_name]=" + dealer_name
            + "&lease_request[dealer_location]=" + dealer_location
            + (dark_mode ? '&dark' : '');
    }
</script>