$(document).ready(function () {
    /* Adat beolvasása és megjelenítés */
    readToTable();
    /* Mentés gombal adat felvitel */
    $('body').on('click', '#save', function () {
        var firstNameInput = $('#firstName');
        var lastNameInput = $('#lastName');
        var hiba = $('#hiba');

        if (firstNameInput.val() == "" || lastNameInput.val() == "") {
            hiba.html("A mezők nem lettek kitöltve.");
            hiba.show();
        } else if (firstNameInput.val().length < 3 || lastNameInput.val().length < 3) {
            hiba.html("Legalább 3 karakter megadása kötelező.");
            hiba.show();
        } else {
            hiba.hide();
            var stored = JSON.parse(localStorage.getItem('names'));
            if (stored === null) {
                stored = {
                    items: [
                        {
                            id: 1,
                            firstName: firstNameInput.val(),
                            lastName: lastNameInput.val()
                    }
                ]
                };
            } else {
                stored.items.push({
                    id: stored.items[stored.items.length - 1].id + 1,
                    firstName: firstNameInput.val(),
                    lastName: lastNameInput.val()
                });
            }
            localStorage.setItem('names', JSON.stringify(stored));

            readToTable();
        }
    });
    /* Minden törlés gombal adat ürítés */
    var body = $('body');

    body.on('click', '#clearAll', function () {
        localStorage.clear();
        readToTable();
    });

    //Darabonként való törlés
    body.on('click', '.singleDeleteButton', function () {
        var deleteitem = $(this).attr('data-id');
        var stored = JSON.parse(localStorage.getItem('names'));
        var i = 0;
        $.each(stored.items, function () {
            if (parseInt(this.id) === parseInt(deleteitem)) {
                stored.items.splice(i, 1);
            }
            i++;
        });

        if (stored.items.length > 0) {
            localStorage.setItem('names', JSON.stringify(stored));
        } else {
            localStorage.clear();
        }
        $(this).closest('tr').remove();
    });

    //Darabonként szerkesztés
    body.on('click', '.singleEditButton', function () {
        var edited = $(this).attr('data-id');
        var stored = JSON.parse(localStorage.getItem('names'));
        $.each(stored.items, function () {
            if (parseInt(this.id) === parseInt(edited)) {
                $('#firstName').val(this.firstName);
                $('#lastName').val(this.lastName);
                var saveButton = $('#save');
                saveButton.attr('data-id', this.id).text('Szerkesztés mentése');
                $('#cancelEdit').remove();
                saveButton.parent().append('<button id="cancelEdit" class="btn btn-warning">' +
                    'Visszavonás' + '</button>');

            }
        });
    });

    body.on('click', '#cancelEdit', function () {
        $('#save').text('Mentés').removeAttr('data-id');
        $('#firstName').val(" ");
        $('#lastName').val(" ");
        $(this).remove();
    });
});

/* megjelenítést küldő funkció */
function readToTable() {
    var stored = JSON.parse(localStorage.getItem('names'));
    var table = $('#dataTable > tbody');
    table.empty();
    if (stored == null) {
        table.append('<tr><td colspan="3"' +
            'Jelenleg nincs elérhető elem' +
            '</td></tr>'
        );
    } else {
        $.each(stored.items, function () {
            table.append('<tr>' +
                '<td>' +
                this.id +
                '</td>' +
                '<td>' +
                this.firstName +
                '</td>' +
                '<td>' +
                this.lastName +
                '</td>' +
                '<td>' +
                '<button class="btn btn-danger singleDeleteButton" data-id="' + this.id + '">' +
                '-' + '</button>' +
                '</td>' +
                '<td>' +
                '<button class="btn btn-info singleEditButton" data-id="' + this.id + '">' +
                '+' + '</button>' +
                '</td>' +
                '</tr>'
            );
        });
    }
}