function renderHapreCollectivityForm(el) {
    $(el).text("Het formulier wordt geladen....");
    
    var renderHapreCollectivityFormCallback = function(target) {
        return function(data) {
            if (data.success) {
                target.collectivityForm({
                    sourceId: "6|" + websiteTitle + " - " + websiteMainDomain,
                    collectivities: data.form.collectivities
                });
            } else {
                target.text("Het formulier kon niet worden geladen");
            }
        };
    };
    
    $.ajax({
        type: 'POST',
        url: 'async/publicCollectivityFormData',
        async: false,
        data: {
            "id": $(el).data('form-id')
        },
        dataType: 'json',
        success: renderHapreCollectivityFormCallback($(el)),
        error:function (xhr, ajaxOptions, thrownError){
            $(el).text("Het formulier kon niet worden geladen");
        } 
    });
}

function renderHapreCollectivityForms() {
    $("div[data-type='hapreCollectivityForms']").each(function() {
        renderHapreCollectivityForm(this);
    });
}

function renderHapreCollectivityFormsEditor(form) {
    var container = $("<div></div>");
    
    container.addClass("hapreCollectivityFormsEditorContainer").attr('data-id', form.id).attr('data-title', form.title);
    
    var h1 = $("<h1></h1>");
    h1.text("Aanmeldformulieren beheren - " + form.title);
    h1.css("margin-bottom", "15px");
    container.append(h1);
    
    var collectivitiesTable = $('<table><thead><tr><td>Verzekeraar</td><td>Collectiviteitsnummer</td></tr></thead><tbody></tbody><tfoot><tr><td class="hcfe-addCollectivity" colspan="2">&nbsp;</td></tr></tfoot></table>');
    
    collectivitiesTable.css('border-collapse', 'collapse').css('width', '100%').css('margin-bottom', '10px');
    
    $("thead td", collectivitiesTable).css('font-weight', 'bold');
    
    $("td", collectivitiesTable).css('padding', '5px 8px').css('border-width', '1px').css('border-color', '#ffffff').css('border-style', 'solid').css('width', '50%');
    
    var addCollectivityButton = $('<button>Collectiviteit toevoegen</button>');
    
    addCollectivityButton.css('margin', '0px');
    
    addCollectivityButton.click(function(e) {
        e.preventDefault();
        e.stopImmediatePropagation();
        
        $.ajax({
            url: "https://api2.hapre.nl/webforms/providers",
            success: function(data, textStatus, jqXHR) {
                if (!data.success) {
                    alert("De lijst met verzekeraars kon niet worden opgehaald");
                } else {
                    var newRow = $('<tr><td><select class="hfce-insuranceProvider"></select></td><td><input class="hfce-collectivityNumber" type="text"></td></tr>');

                    $("td", newRow).css('padding', '5px 8px').css('border-width', '1px').css('border-color', '#ffffff').css('border-style', 'solid');

                    $("select,input", newRow).css('margin', '0').css('width', '100%').css('padding', '6px 4px').css('box-sizing', 'border-box');

                    $("tbody", collectivitiesTable).append(newRow);
                    
                    for (var i in data.results) {
                        var newOption = $('<option></option>');
                        
                        newOption.text(data.results[i].name);
                        newOption.attr('value', data.results[i].id);
                        
                        $("select", newRow).append(newOption);
                    }
                    
                    var sortSelect = function(selElem) {
                        var tmpAry = new Array();
                        for (var i=0;i<selElem.options.length;i++) {
                            tmpAry[i] = new Array();
                            tmpAry[i][0] = selElem.options[i].text;
                            tmpAry[i][1] = selElem.options[i].value;
                        }
                        tmpAry.sort();
                        while (selElem.options.length > 0) {
                            selElem.options[0] = null;
                        }
                        for (var i=0;i<tmpAry.length;i++) {
                            var op = new Option(tmpAry[i][0], tmpAry[i][1]);
                            selElem.options[i] = op;
                        }
                        return;
                    };
                    
                    sortSelect($("select", newRow)[0]);
                }
            }
        })
    });
    
    $("td.hcfe-addCollectivity", collectivitiesTable).html(addCollectivityButton);
    
    container.append(collectivitiesTable);
    
    var saveButton = $("<button></button>").text("Formulier opslaan").css('margin-bottom', '0px').click(function(e) {
        e.preventDefault();
        e.stopImmediatePropagation();
        
        var rows = $("tbody tr", $("div.hapreCollectivityFormsEditorContainer"));
        
        var collectivities = {};
        
        rows.each(function() {
            var insuranceProviderId = $("select option:selected", this).val();
            var collectivityNumber = $("input", this).val();
            
            collectivities[insuranceProviderId] = collectivityNumber;
        });
        
        var data = {
            id: $("div.hapreCollectivityFormsEditorContainer").data('id'),
            title: $("div.hapreCollectivityFormsEditorContainer").data('title'),
            collectivities: collectivities
        };
        
        $.ajax({
            url: 'async/saveCollectivityForm',
            method: 'POST',
            data: data,
            dataType: 'json',
            success: function(data) {
                if (data.success) {
                    $("div#manageCollectivityFormsButton").trigger('click');
                } else {
                    alert("Er is een fout opgetreden tijdens het opslaan van het aanmeldformulier.");
                }
            },
            error:function (xhr, ajaxOptions, thrownError){
                alert("Er is een fout opgetreden tijdens het opslaan van het aanmeldformulier.");
            } 
        });
    });
    
    container.append(saveButton);
    container.append('<div class="clearfix"></div>');
    
    return container;
}

$("document").ready(function() {
    renderHapreCollectivityForms();
});