function resetForm(e) {

    e.find('form').each(function () {
        $(this)[0].reset();
    });

    e.find('input').each(function () {
        $(this).removeClass('wrong');
        $(this).parent().children('input').removeClass('wrong');
    });

    e.find('select').each(function () {
        $(this).removeClass('wrong');
        $(this).parent().children('input').removeClass('wrong');
    });

    e.find('textarea').each(function () {
        $(this).removeClass('wrong');
        $(this).parent().children('input').removeClass('wrong');
    });

    e.find('.titre').children().each(function () {
        if ($(this).attr('id') != 'titre1') {
            $(this).remove();
            console.log($(this))
        }
    });

    e.find('.titre-item').children().each(function () {
        if ($(this).attr('id') != 'item1') {
            $(this).remove();
            console.log($(this))
        }
    });

}


function addItem(e) {

    var parent = $(e).parent().parent().children('.titre-item');

    var item = parent.find('#item1').clone();
    item.attr('id', 'item' + (parent.children().length + 1));
    item.find('.item_comp').remove();
    item.find('.item-form').append(itemToAdd());
    item.find('#label').val('');
    item.find('#valeur').val('');
    item.appendTo(parent);

    // initialize select
    item.find('select').material_select('destroy');

    // initialize select
    item.find('select').material_select();

}

function addTitre(e) {

    var parent = $(e).parent().parent().children('.titre');

    var item = parent.find('#titre1').clone();
    item.attr('id', 'titre' + (parent.children().length + 1));
    item.find('#ponderation').val('');
    item.find('.titre-item').children().each(function () {
        if ($(this).attr('id') != 'item1') {
            $(this).remove();
        } else {
            $(this).find('#label').val('');
            $(this).find('#valeur').val('');
        }
    });
    //item.find('.item-form').reset();
    item.appendTo(parent);

    return item;

}

function notEmptyInputs(e) {
    var valid = true;

    e.find('input').not('#id_TitreGItem, #file-name, #file').each(function () {
        if ($(this).closest('.container').length != 0) {
            if ($(this).val() == null || $(this).val().length == 0) {
                valid = false;
                $(this).addClass('wrong');
                console.log($(this));
            } else {
                $(this).removeClass('wrong');
            }
        }
    });


    e.find('textarea').each(function () {
        if ($(this).closest('.container').length != 0) {
            if ($(this).val() == null || $(this).val().length == 0) {
                valid = false;
                $(this).addClass('wrong');
                console.log($(this).attr('id'));
            } else {
                $(this).removeClass('wrong');
            }
        }
    });

    e.find('select').each(function () {
        if ($(this).closest('.container').length != 0) {
            if ($(this).val() == null || $(this).val().length == 0) {
                valid = false;
                $(this).addClass('wrong');
                $(this).parent().children('input').addClass('wrong');
                console.log($(this).attr('id'));
            } else {
                $(this).removeClass('wrong');
                $(this).parent().children('input').removeClass('wrong');
            }
        }
    });


    return valid;

}

function banqueAddSuccess(resp) {
    hide(progress);

    addBanqueCard.find('.titre-form').each(function () {
        var titre = $(this);
        titre.ajaxSubmit(function (resultat) {
            titre.parent().find('.item-form').each(function () {
                $(this).find('#id_TitreGItem').val(resultat['id_TitreGItem']);
                $(this).ajaxSubmit({url: '/banque/' + resp['id_Banque'] + '/item/add'});
            });
        });
    });

    addBanqueCard.find('.file-form').each(function () {
        var file = $(this);
        file.ajaxSubmit();
    });

    hide(header_title);
    hide(failed);
    show(passed);
}

function banqueEditSuccess(resp) {
    hide(progress);

    editBanqueCard.find('.titre-form').each(function () {
        var titre = $(this);
        titre.ajaxSubmit(function (resultat) {
            titre.parent().find('.item-form').each(function () {
                $(this).ajaxSubmit();
            });
        });
    });

    editBanqueCard.find('.file-form').each(function () {
        var file = $(this);
        file.ajaxSubmit();
    });

    hide(header_title);
    hide(failed);
    show(passed);
}

function banqueAddFail(resp) {
    hide(progress);

    hide(header_title);
    show(failed);
    hide(passed);
}

function show(item) {
    item.removeClass('hide');
    item.addClass('show');
}

function hide(item) {
    item.removeClass('show');
    item.addClass('hide');
}

$(function () {
    var nano = $('.nano');
    var addBanqueBtn = $('#addBanqueBtn');
    addBanqueCard = $('#addBanqueCard');
    editBanqueCard = $('#editBanqueCard');
    var filterGhost = $('.filter-ghost');
    var add_itemBtn = $('.add-item');
    var titreItem = $('.titre-item');
    var items = $('.items');
    var add_titreBtn = $('.add-titre');
    var banqueItem = $('.banque-item');
    header_title = $('.header-title');
    failed = $('.failed');
    passed = $('.passed');
    progress = $('.progress');

    // show insert popup when button click
    addBanqueBtn.on('click', function (event) {

        show(addBanqueCard);
        // display ghost shaddow
        filterGhost.removeClass('close');
        filterGhost.addClass('open');

        // initialize nano scroller
        nano.nanoScroller();

    });

    // show edit popup
    banqueItem.on('click', function (event) {

        var banqueId = $(this).next().val();

        console.log(banqueId);

        $.ajax({
            url: '/banque/' + parseInt(banqueId),
            success: function (data) {
                // filling forms

                editBanqueCard.find('.banque-form').attr('action', '/banque/' + banqueId + '/edit');

                editBanqueCard.find('#id_Contexte').val(data['id_Contexte']);

                editBanqueCard.find('#id_Contexte').material_select();

                editBanqueCard.find('#id_Systeme').val(data['id_Systeme']);

                editBanqueCard.find('#id_Systeme').material_select();

                editBanqueCard.find('#id_Domaine').val(data['id_Domaine']);

                editBanqueCard.find('#id_Domaine').material_select();

                editBanqueCard.find('#id_Critere').val(data['id_Critere']);

                editBanqueCard.find('#id_Critere').material_select();

                editBanqueCard.find('#label').first().val(data['label']);

                editBanqueCard.find('#situation_Clinique').val(data['situation_Clinique']);

                editBanqueCard.find('#situation_Clinique').trigger('autoresize');

                editBanqueCard.find('#instruction_Etudiant').val(data['instruction_Etudiant']);

                editBanqueCard.find('#instruction_Etudiant').trigger('autoresize');

                var titre1 = editBanqueCard.find('#titre1');

                if (data['items'].length > 0) {

                    titre1.find('#nom').val(data['items'][0]['nom']);

                    titre1.find('#ponderation').val(data['items'][0]['ponderation']);

                    titre1.find('#item1').find('#label').val(data['items'][0]['label']);

                    titre1.find('#item1').find('#valeur').val(data['items'][0]['valeur']);

                    titre1.find('#item1').find('#id_Competence').val(data['items'][0]['id_Competence']);

                    titre1.find('#item1').find('#id_Competence').material_select();

                    titre1.find('#item1').find('.item-form').attr('action', '/banque/' + data['id_Banque'] + '/item/' + data['items'][0]['id_Item'] + '/edit');

                    titre1.find('.titre-form').attr('action', '/titre/' + data['items'][0]['id_TitreGItem'] + '/edit');


                    for (var i = 1; i < data['items'].length; i++) {
                        var item = itemToAdd();

                        item.find('#label').val(data['items'][i]['label']);

                        item.find('#valeur').val(data['items'][i]['valeur']);

                        item.find('#id_Competence').val(data['items'][i]['id_Competence']);

                        item.find('#id_Competence').material_select();

                        item.find('.item-form').attr('action', '/banque/' + data['id_Banque'] + '/item/' + data['items'][i]['id_Item'] + '/edit');


                        if (data['items'][i - 1]['id_TitreGItem'] == data['items'][i]['id_TitreGItem']) {

                            item.appendTo(titre1);

                        } else {

                            titre1 = addTitre(editBanqueCard.find('.add-titre'));

                            item.appendTo(titre1);

                        }

                    }
                }

                show(editBanqueCard);
                // display ghost shaddow
                filterGhost.removeClass('close');
                filterGhost.addClass('open');

                // initialize nano scroller
                nano.nanoScroller();

            },
            dataType: 'json'
        });

    });

    // hide popup when click out
    filterGhost.on('click', function (event) {

        hide(addBanqueCard);
        hide(editBanqueCard);
        // display ghost shaddow
        filterGhost.removeClass('open');
        filterGhost.addClass('close');

        hide(failed);
        hide(passed);
        show(header_title);

        resetForm(addBanqueCard);
    });

    // initialize select
    $('select').material_select();

    // submit banque
    $('.banque-submit-add').on('click', function (event) {

        // verify inputs not empty
        if (notEmptyInputs(addBanqueCard)) {
            show(progress);
            addBanqueCard.find('.banque-form').ajaxSubmit({
                dataType: 'json',
                success: banqueAddSuccess,
                error: banqueAddFail
            });

            //$('.titre-form').ajaxSubmit();

        }
    });

    $('.banque-reset-add').on('click', function (event) {
        resetForm(addBanqueCard);
    });

    // edit banque
    $('.banque-submit-edit').on('click', function (event) {

        // verify inputs not empty
        if (!notEmptyInputs(editBanqueCard)) {
            show(progress);
            editBanqueCard.find('.banque-form').ajaxSubmit({
                dataType: 'json',
                success: banqueEditSuccess,
                error: banqueAddFail
            });

        }
    });

    $('.banque-reset-edit').on('click', function (event) {
        resetForm(editBanqueCard);
    });

});

function itemToAdd() {

    var item_copetence = "<div class='input-field col m1'><select id='id_Competence' name='id_Competence'>";

    for (var i = 0; i < competences.length; i++) {
        var select_opt = "<option value="
            + competences[i].id_Competence +
            ">"
            + competences[i].prefix +
            "</option> ";
        item_copetence += select_opt;
    }

    item_copetence += "</select></div>"

    return item_copetence;

}
