<div id="accordion">
<!--tabai sugeneruojami automatiskai su JS-->
</div>

<script>
  //--------------------- Automatinis akordeonas ---------------------------
// Pasirinkus kategorija sugeneruojamas akordeonas su katalogais
$('[name=btnCatId]').click(function (e) {
    e.preventDefault();
    var id = $(this).attr("data-groupid");
    loadMaterialCatalogs(id);
});
function loadMaterialCatalogs($groupId) {
    $('#accordion').empty();
    $.getJSON('/profile/materials/catalogs?groupId=' + $groupId, function (result) {
        $.each(result, function (i, field) {
            var accCard = $("<div class='card'/>"),
                    accCardHeader = $("<div class='card-header'/>"),
                    accCardHeaderH5 = $("<h5 class='mb-0'/>"),
                    checkboxas = '<input type="checkbox" name="catCheckbox" id="' + i + '"/>',
                    accCardHeaderA = $("<a class='btn btn-link' name='textureCategoryTitle' data-toggle='collapse' data-target='#collapse-" + i + "' aria-expanded='true'/>"),
                    accCardHeaderInput = $("<input type='text' name='textureCategoryTitleEdit' value='" + result[i].title_en + "' data-catalogid='catalog_id'/>"),
                    accCollapse = $("<div id='collapse-" + i + "' class='collapse' data-parent='#accordion'/>"),
                    accCollapseBody = $("<div class='card-body'/>"),
                    accCollapseEditIcons = $("<div class='editIcons'/>"),
                    btnEdit = "<a href='#' class='btn btn-sm btn-primary' name='btnEdit' title='Redaguoti'><i class='fa fa-edit'></i></a>",
                    btnArchive = "<a href='/profile/materials/archive?id=" + result[i].id + "' class='btn btn-sm btn-danger' name='btnArchive' title='Į šiukšlinę'><i class='fa fa-trash'></i></a>",
//            Teksturu katalogas
                    ul = $("<ul class='texture-catalog'/>"),
                    textureNew = '<li title="Pridėti" name="textureNew"><a href="/profile/materials/add" title="Nauja tekstūra"><i class="fa fa-plus fa-2x"></i></a></li>',
                    //save icons
                    btnSave = '<a href="/profile/materials/save???" class="btn btn-sm btn-success" name="btnSave">Išsaugoti</a>',
                    btnCancel = '<a href="#" class="btn btn-sm btn-outline-dark" name="btnCancel">Atšaukti</a>';

            $('#accordion').append(accCard);
            $(accCard).append(accCardHeader);
            $(accCardHeader).append(accCardHeaderH5).append(checkboxas);
            $(accCardHeaderH5).append(accCardHeaderA);
            $(accCardHeaderA).append(result[i].title_en);
            $(accCardHeaderH5).append(accCardHeaderInput);
            //Accordeono kolapsas
            $(accCard).append(accCollapse); // turi buti foreach texture catalog
            $(accCollapse).append(accCollapseBody);
            if (i === 0) {
                $(accCollapse.addClass('show'));
            }
            $(accCollapseBody).append(accCollapseEditIcons);
            $(accCollapseEditIcons).append(btnEdit);
            $(accCollapseEditIcons).append(btnArchive);

            // Uzkraunam visas rastas teksturas i kataloga paga jo id
            $.getJSON('/profile/materials/materials?catalogId=' + result[i].id, function (result) {
                //Teksturu katalogas
                $(accCollapseBody).append('<h5 class="pl">Iš viso: ' + result.length + '</h5><div class="cb"></div>');
                $(accCollapseBody).append(ul);
                $.each(result, function (j, field) {
                    $(ul).append(
                            '<li>' +
                            '<div class="texture"></div>' + //texture image
                            '<input type="text" name="textureName" value="' + result[j].name + '" data-textureid="' + result[j].id + '" title="' + result[j].name + '" disabled="true"/>' +
                            '<div class="input-group akcija">' + //akcijos wrapper
                            '<div class="input-group-append">' + //input-group-append
                            '<input type="number" min="0" max="100" value="0" class="form-control" placeholder="0" name="textureDiscount" title="Nuolaida" disabled="true"/>' +
                            '<span class="input-group-text">%</span>' + //akcijos procentai
                            '</div>' + //end input-group-append
                            '</div>' + //end akcijos wrapper
                            '<a href="/profile/materials/edit?id=' + result[j].id + '" title="Redaguoti" name="btnEditTexture" class="iconEdit"><i class="fa fa-edit"></i></a>' + //btnEditTexture
                            '<a href="/profile/materials/archivetexture?id=' + result[j].id + '" title="Į šiukšlinę" name="btnDelTexture" class="iconTrash"><i class="fa fa-trash text-danger"></i></a>' + //btnDeleteTexture
                            '</li>'
                            );
                });
                $(ul).append(textureNew);
                $(accCollapseBody).append('<div class="cb"></div>' + '<div class="saveIcons">' + btnSave + btnCancel + '</div>'); // Mygtukai save ir cancel

            });
        });
    });
}

//-------------------- Texture catalog edit button click --------------------
function enableEditTextures($accTab, enable) {
    var c = $accTab.parents('.card');
    if (enable) {
        $('[name=textureCategoryTitle]').addClass('disabled'); // disable other tabs
        $(c.find('[name=textureCategoryTitle]')).removeClass('disabled'); // keep this tab enabled
        c.find('[name=textureCategoryTitle]').hide(); // hide catalog title
        c.find('[name=textureCategoryTitleEdit]').show(); // show catalog title input
        c.find('[name=btnDelTexture]').show(); // show trashbin icons
        c.find('[name=btnEditTexture]').hide(); // hide edit icons
        c.find('[name=textureName]').prop('disabled', false); // enable all textureName inputs
        c.find('[name=textureDiscount]').prop('disabled', false); // enable all textureDiscount inputs
        $('[name=catCheckbox]').prop('disabled', true); // disable catalog checkboxes
        c.find('[name=textureNew]').hide(); // hide new texture button
        c.find('[name=textureCopy]').hide(); // hide copy texture button
        c.find('.saveIcons').show(); // show save and cancel buttons
        $accTab.hide(); //hide edit button
    } else {
        $('[name=textureCategoryTitle]').removeClass('disabled'); // enable other tabs
        c.find('[name=textureCategoryTitle]').show(); // show catalog title
        c.find('[name=textureCategoryTitleEdit]').hide(); // hide catalog title input
        c.find('[name=btnDelTexture]').hide(); // hide trashbin icons
        c.find('[name=btnEditTexture]').show(); // show edit icons
        c.find('[name=textureName]').prop('disabled', true); // disable all textureName inputs
        c.find('[name=textureDiscount]').prop('disabled', true); // disable all textureDiscount inputs
        $('[name=catCheckbox]').prop('disabled', false); // enable catalog checkboxes
        c.find('[name=textureNew]').show(); // show new texture button
        c.find('[name=textureCopy]').show(); // show copy texture button
        c.find('.saveIcons').hide(); // hide save and cancel buttons
        c.find('[name=btnEdit]').show(); //show edit button
    }
}
// Teksturu valdymas, mygtuku actionai
$(document).on('click', "[name=btnEdit]", function (e) {
    e.preventDefault();
    enableEditTextures($(this), true);
});
$(document).on('click', "[name=btnCancel]", function (e) {
    e.preventDefault();
    enableEditTextures($(this), false);
});
//--------------------- end Automatinis akordeonas ---------------------------
</script>