[{isys_group name="tom.popup.category-folders.move-item"}]
<div id="category-folders-popup_reorder-item">
    <div class="popup-header-ng">
        <h1>[{isys type="lang" ident="LC__CATEGORY_FOLDERS__POPUP__SELECT_FOLDER__TITLE"}]</h1>
        <button type="button" class="btn btn-secondary popup-closer ml-auto" title="[{isys type="lang" ident="LC__POPUP__CLOSE"}]" data-tooltip="1">
            <img class="fr mouse-pointer" alt="" src="[{$dir_images}]axialis/user-interface/window-control-close.svg" />
        </button>
    </div>

    <div class="popup-content p20">
        <p>[{isys type="lang" ident="LC__CATEGORY_FOLDERS__POPUP__SELECT_FOLDER__DESCRIPTION"}]</p>

        <div class="mb15 display-flex align-items-center mt10 mb15">
            <button type="button" class="btn btn-secondary" data-function="toggle-all" data-action="expand">
                <img src="[{$dir_images}]axialis/user-interface/angle-right-small.svg" alt="" /><span>[{isys type="lang" ident="LC__CATEGORY_FOLDERS__EXPAND_ALL"}]</span>
            </button>

            <div class="category-folders-search-container hide">
                <input type="text" class="input input-small" placeholder="[{isys type="lang" ident="LC__UNIVERSAL__SEARCH"}]" />
                <img src="[{$dir_images}]axialis/basic/zoom.svg" alt="" />
            </div>
        </div>

        <div class="category-folders-config">
            <!-- Will be filled by JS -->
        </div>
    </div>

    <div class="popup-footer">
        <button type="button" class="btn save-button">
            <img src="[{$dir_images}]axialis/basic/symbol-ok.svg" alt="" /><span>[{isys type="lang" ident="LC__UNIVERSAL__BUTTON_SAVE"}]</span>
        </button>
        <button type="button" class="btn popup-closer">
            <img src="[{$dir_images}]axialis/basic/symbol-cancel.svg" alt="" /><span>[{isys type="lang" ident="LC__UNIVERSAL__BUTTON_CANCEL"}]</span>
        </button>
    </div>
</div>

<script type="text/javascript">
    (function () {
        "use strict";

        // #category-tree is the "main" tree and will be used for callbacks.
        const $categoryTree = $('category-tree');

        const $popup = $('category-folders-popup_reorder-item');
        const $saveButton = $popup.down('.save-button');
        const $treeContainer = $popup.down('.category-folders-config');
        const $toggleAllButton = $popup.down('[data-function="toggle-all"]');
        const $searchCategoryField = $popup.down('.category-folders-search-container');

        idoit.Translate.set('LC__CATEGORY_FOLDERS__PLACE_N_HERE', '[{isys type="lang" ident="LC__CATEGORY_FOLDERS__PLACE_N_HERE"}]');

        idoit.Require
            .addModule('pro.category-folders-dnd-tree', '[{$proWwwDir}]assets/js/category-folders/dnd-tree.js')
            .require('pro.category-folders-dnd-tree', function () {
                const tree = new CategoryFoldersDnDTree($treeContainer, {
                    $toggleAll: $toggleAllButton,
                    $searchCategoryField: $searchCategoryField,
                    $scrollContainer: $popup.down('.popup-content')
                });

                new Ajax.Request('[{$loadConfigUrl}]', {
                    method:     'get',
                    onComplete:  function (xhr) {
                        if (!is_json_response(xhr, true)) {
                            return;
                        }

                        const json = xhr.responseJSON;

                        if (!json.success) {
                            idoit.Notify.error(json.message, { sticky: true });
                            return;
                        }

                        tree.setData(json.data.categories);
                        tree.render();
                        tree.prepareDraggables();
                    }
                });

                $popup.on('click', '.popup-closer', function () {
                    popup_close();
                });

                $saveButton.on('click', function () {
                    const structureData = tree.getData();

                    new Ajax.Request('[{$saveConfigUrl}]', {
                        method:     'post',
                        parameters: {
                            folders:    JSON.stringify(structureData.folders),
                            categories: JSON.stringify(structureData.categories)
                        },
                        onComplete:  function (xhr) {
                            if (!is_json_response(xhr, true)) {
                                return;
                            }

                            const json = xhr.responseJSON;

                            if (!json.success) {
                                idoit.Notify.error(json.message, { sticky: true });
                                return;
                            }

                            $categoryTree.fire('reload:structure');
                            popup_close();
                        }
                    });
                });
            });
    })();
</script>
[{/isys_group}]
