$(document).ready(function() {
    function loadAttributes() {
        $.ajax({
            url: $("#siteUrl").val(),
            method: 'post',
            dataType: 'json',
            data: {
                categoryId: $('#categoryId').val()
            }
        })
            .done(function(res) {
                $("#detailsList").html('');
                $(res).each(function() {
                    var html='<div class="form-group">' +
                        '<input type="hidden" name="detailIds[]" value="'+this.id+'">' +
                        '<label for="">'+this.name+'</label>' +
                        '<input type="text" name="details[]" class="form-control" placeholder="'+this.name+'" required>' +
                        '</div>';
                    $("#detailsList").append(html);
                })
            })
    }
    loadAttributes();
    $('#categoryId').on('change', function(e) {
        loadAttributes();
    });
    $('#plus').on('click', function(e) {
        e.preventDefault();
        var html='<div class="form-group">' +
            '<label for="">Image</label>' +
            '<div class="row">' +
            '<div class="col-10 col-md-11">' +
            '<input type="file" name="images[]" class="form-control">' +
            '</div>' +
            '<div class="col-2 col-md-1 text-right">' +
            '<button type="button" class="btn btn-outline-danger delete">X</button>' +
            '</div>' +
            '</div>' +
            '</div>';
        $("#imagesList").append(html);
        $(".delete").on('click', function() {
            $(this).parent().parent().parent().remove();
        });
    });
});