<script>
    var lfm = function(id_name, type, options) {
        let button = document.getElementById(id_name);
        button.addEventListener('click', function () {
            var route_prefix = (options && options.prefix) ? options.prefix : '/laravel-filemanager';
            var target_preview = document.getElementById(button.getAttribute('data-preview'));

            window.open(route_prefix + '?type=' + type || 'file', 'FileManager', 'width=900,height=600');
            window.SetUrl = function (items) {
                var file_path = items.map(function (item) {
                    return item.url;
                }).join(',');

                // set or change the preview image src
                items.forEach(function (item) {
                    target_preview.innerHTML = `<img src="${item.thumb_url}" class="img-fluid">`;
                });

                // trigger change event
                target_preview.dispatchEvent(new Event('change'));

                Livewire.emit('imageChanged', file_path);
            };
        });
    };
    lfm('lfm', 'image');
</script>