<?php
/**
 * Mageplaza
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Mageplaza.com license that is
 * available through the world-wide-web at this URL:
 * https://www.mageplaza.com/LICENSE.txt
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade this extension to newer
 * version in the future.
 *
 * @category    Mageplaza
 * @package     Mageplaza_Blog
 * @copyright   Copyright (c) Mageplaza (https://www.mageplaza.com/)
 * @license     https://www.mageplaza.com/LICENSE.txt
 */
?>
<?php
/** @var \Mageplaza\Blog\Block\Adminhtml\Category\Edit\Form $block */
$parentId = $block->getParentCategoryId();
$categoryId = $block->getCategoryId();

$blockGrid = $block->getLayout()->getBlock('mageplaza_blog_category_edit_tab_post');
$gridJsObjectName = $blockGrid->getJsObjectName();
?>
<div data-mage-init='{"floatingHeader": {}}' class="page-actions">
    <?= $block->getAdditionalButtonsHtml(); ?>
</div>
<?= $block->getTabsHtml() ?>

<iframe name="iframeSave" style="display:none; width:100%;"
        src="<?= $block->getViewFileUrl('blank.html') ?>"></iframe>
<form id="category_edit_form" name="category-edit-form" action="<?= $block->getSaveUrl() ?>" method="post"
      enctype="multipart/form-data">
    <div class="no-display">
        <input type="hidden" name="isIframe" value="1"/>
        <input name="form_key" type="hidden" value="<?= $block->getFormKey() ?>"/>
        <input type="hidden" name="active_tab_id" id="active_tab_id" value=""/>
        <?php if ($parentId !== 0) : ?>
            <input type="hidden" name="parent" value="<?= $parentId; ?>"/>
        <?php endif; ?>
        <?php if ($categoryId !== 0) : ?>
            <input type="hidden" name="category_id" value="<?= $categoryId; ?>"/>
        <?php endif; ?>
        <input type="hidden" name="selected_products" id="in_category_products" value=""/>
        <script type="text/x-magento-init">
            {
                "*": {
                    "Magento_Catalog/catalog/category/assign-products": {
                        "selectedProducts": <?= $block->getPostsJson(); ?>,
                        "gridJsObjectName": <?= '"' . $gridJsObjectName . '"' ?: '{}'; ?>
                    }
                }
            }
        
        </script>
    </div>
    <div id="category_tab_content"></div>
</form>

<div data-id="information-dialog-category" class="messages" style="display: none;">
    <div class="message message-notice">
        <div><?= __('This operation can take a long time'); ?></div>
    </div>
</div>

<script>
    require(['jquery', 'jquery/ui', "mage/mage", "mage/translate"], function ($) {
        var mageDialog = (function ($) {
            var self = {dialogOpened: false, callback: [], needShow: false};

            self.callback = {ok: [], cancel: []};
            self.createDialog = function () {
                var onEvent = function (type, dialog) {
                    self.callback[type].forEach(function (call) {
                        call();
                    });
                    $(dialog).dialog("close");
                };

                self.dialog = $('[data-id="information-dialog-category"]').dialog({
                    autoOpen: false,
                    modal: true,
                    dialogClass: 'popup-window',
                    resizable: false,
                    width: '75%',
                    title: $.mage.__('Warning message'),
                    buttons: [{
                        text: $.mage.__('Ok'),
                        'class': 'action-primary',
                        click: function () {
                            onEvent('ok', this);
                        }
                    }, {
                        text: $.mage.__('Cancel'),
                        'class': 'action-close',
                        click: function () {
                            onEvent('cancel', this);
                        }
                    }],
                    open: function () {
                        $(this).closest('.ui-dialog').addClass('ui-dialog-active');

                        var topMargin = $(this).closest('.ui-dialog').children('.ui-dialog-titlebar').outerHeight() + 30;
                        $(this).closest('.ui-dialog').css('margin-top', topMargin);

                        self.dialogOpened = true;
                        self.callback.ok.push(function () {
                            self.needShow = false;
                        });
                    },
                    close: function (event, ui) {
                        $(this).dialog('destroy');
                        self.dialogOpened = false;
                        self.callback = {ok: [], cancel: []};
                        delete self.dialog;
                    }
                });
            };

            return {
                needToShow: function () {
                    self.needShow = true && !!$('[data-ui-id="tabs-tab-general-information-fieldset-element-hidden-general-id"]').length;
                    return this;
                },
                isNeedShow: function () {
                    return self.needShow;
                },
                onOk: function (call) {
                    self.callback.ok.push(call);
                    return this;
                },
                onCancel: function (call) {
                    self.callback.cancel.push(call);
                    return this;
                },
                show: function () {
                    if (self.dialog == undefined) {
                        self.createDialog();
                    }
                    if (self.dialogOpened == false) {
                        self.dialog.dialog('open');
                    }
                    return this;
                }
            };
        })(jQuery);
        $(document).on('change', '[data-ui-id="urlkeyrenderer-text-general-url-key"]', function () {
            mageDialog.needToShow();
        });
        $('#category_edit_form')
            .mage('categoryForm', {refreshUrl: '<?= $block->getRefreshPathUrl() ?>'})
            .mage('validation', {
                submitHandler: function (form) {
                    if (mageDialog.isNeedShow()) {
                        mageDialog.onOk(function () {
                            form.submit();
                            displayLoadingMask();
                        }).show();
                    } else {
                        form.submit();
                        displayLoadingMask();
                    }
                }
            });
    });

    <?php if ($block->isAjax() && ($tabsBlock = $block->getLayout()->getBlock('tabs')) && ($_tabsJsObject = $tabsBlock->getJsObjectName())) : ?>
    // Temporary solution, will be replaced after refactoring of manage category functionality
        <?php $tabsBlock = $block->getLayout()->getBlock('tabs'); ?>
    require(["jquery", "mage/backend/tabs"], function ($) {
        var activeAnchor = $('#<?= $tabsBlock->getId() ?>').tabs('activeAnchor');
        if (activeAnchor.length) {
            $('active_tab_id').value = activeAnchor.prop('id');
        }
        $('active_tab_id').tabsJsObject = $('#<?= $tabsBlock->getId() ?>');
    });
    <?php endif; ?>
</script>
