<?php
/**
 * Webkul Software.
 *
 * @category  Webkul
 * @package   Webkul_Marketplace
 * @author    Webkul
 * @copyright Copyright (c) Webkul Software Private Limited (https://webkul.com)
 * @license   https://store.webkul.com/license.html
 */
?>
<div class="admin__fieldset-wrapper opened">
    <div class="admin__fieldset-wrapper-content">
        <fieldset class="admin__fieldset">
            <div class="field">
                <label class="label"><?= $block->escapeHtml(__('Product Category')) ?>:</label>
                <div class="wk-field wk-category">
                    <div class="wk-for-validation">
                        <div id="wk-category-label"><?= $block->escapeHtml(__("CATEGORIES")); ?></div>
                        <?php
                            $allowedCategory = $block->getSellerAllowedCategory();
                            $category_model = $block->getCategory();
                            $categories = $block->getCategoriesList();
                            $count = 0;
                        foreach ($categories as $category) {
                            $selected = in_array($category['entity_id'], $allowedCategory) ? 'checked' :'';
                            if ($block->hasChildren($category['entity_id'])) { ?>
                                       <div class="wk-cat-container wk-left-margin-5px">
                                           <span class="wk-plus">
                                           </span><span class="wk-foldersign"></span>
                                           <span class="wk-elements wk-cat-name"><?= $block->escapeHtml($category->getName()) ?></span>
                                           <input data-form-part="customer_form" class="wk-elements" type="checkbox" name="seller_category_ids[<?= $block->escapeHtml($category['entity_id']) ?>]" value='<?= $block->escapeHtml($category['entity_id']) ?>' <?= $block->escapeHtml($selected) ?> />
                                       </div>
                                        <?php
                            } else { ?>
                                    <div class="wk-cat-container">
                                        </span><span class="wk-foldersign"></span>
                                        <span class="wk-elements wk-cat-name"><?= $block->escapeHtml($category->getName()) ?></span>
                                        <input data-form-part="customer_form" class="wk-elements" type="checkbox" name="seller_category_ids[<?= $block->escapeHtml($category['entity_id']) ?>]" value='<?= $block->escapeHtml($category['entity_id']) ?>' <?= $block->escapeHtml($selected) ?> />
                                    </div>
                                        <?php
                            }
                            $count++;
                        } ?>
                    </div>
                </div>
            </div>
        </fieldset>
    </div>
</div>
<script>
    require([
        "jquery",
        "mage/mage",
        "prototype"

    ], function($){
        var allowedCategory = $.parseJSON('<?= /* @noEscape */ json_encode($allowedCategory)?>');
        $("#container").delegate('.wk-plus ,.wk-plusend,.wk-minus, .wk-minusend ',"click",function(){
            var thisthis=$(this);
            if (thisthis.hasClass("wk-plus") || thisthis.hasClass("wk-plusend")) {
                if (thisthis.hasClass("wk-plus")) {
                    thisthis.removeClass('wk-plus').addClass('wk-plus_click');
                }
                if (thisthis.hasClass("wk-plusend")) {
                    thisthis.removeClass('wk-plusend').addClass('wk-plusend_click');
                }
                thisthis.prepend("<span class='wk-node-loader'></span>");
                callCategoryTreeAjaxFunction(thisthis);
            }
            if (thisthis.hasClass("wk-minus") || thisthis.hasClass("wk-minusend")) {
                callRemoveCategoryNodeFunction(thisthis);
            }       
        });
        function callCategoryTreeAjaxFunction(thisthis) {
            var self = this;
            var i, len, name, id;
            $.ajax({
                url     :   "<?= $block->escapeUrl($block->getUrl('marketplace/seller/categorytreeajax/'))?>",
                type    :   "POST",
                data    :   {
                    parentCategoryId:thisthis.siblings("input").val()
                },
                dataType:   "html",
                success :   function(content){
                    var newdata=  $.parseJSON(content);
                    len = newdata.length;
                    var pxl= parseInt(thisthis.parent(".wk-cat-container").css("margin-left").replace("px",""))+20;
                    thisthis.find(".wk-node-loader").remove();
                    if (thisthis.attr("class") == "wk-plus") {
                        thisthis.attr("class","wk-minus");
                    }
                    if (thisthis.attr("class") == "wk-plusend") {
                        thisthis.attr("class","wk-minusend");
                    }
                    if (thisthis.attr("class") == "wk-plus_click") {
                        thisthis.attr("class","wk-minus");
                    }
                    if (thisthis.attr("class") == "wk-plusend_click") {
                        thisthis.attr("class","wk-minusend");
                    }
                    for (i=0;i<len; i++) {
                        id=newdata[i].id;
                        name=newdata[i].name;
                        var checked = $.inArray(id,allowedCategory) != -1? 'checked' : '';
                        if (newdata[i].counting === 0) {
                            thisthis.parent(".wk-cat-container").after('<div class="wk-removable wk-cat-container" style="display:none;margin-left:'+pxl+'px;"><span  class="wk-no"></span><span class="wk-foldersign"></span><span class="wk-elements wk-cat-name">'+ name +'</span><input data-form-part="customer_form" class="wk-elements" type="checkbox" name="seller_category_ids['+id+']" value='+ id +' '+checked+'></div>');
                        } else {
                            thisthis.parent(".wk-cat-container").after('<div class="wk-removable wk-cat-container" style="display:none;margin-left:'+pxl+'px;"><span  class="wk-plusend"></span><span class="wk-foldersign"></span><span class="wk-elements wk-cat-name">'+ name +'</span><input data-form-part="customer_form" class="wk-elements" type="checkbox" name="seller_category_ids['+id+']" value='+ id +' '+checked+'></div>');
                        }
                    }
                    thisthis.parent(".wk-cat-container").nextAll().slideDown(300);
                },
                error: function (response) {
                    alert({
                        content: self.options.ajaxErrorMessage
                    });
                }
            });
        }

        function callRemoveCategoryNodeFunction(thisthis) {
            if (thisthis.attr("class") == "wk-minus") {
                thisthis.attr("class","wk-plus");
            }
            if (thisthis.attr("class") == "wk-minusend") {
                thisthis.attr("class","wk-plusend");
            }
            var thiscategory = thisthis.parent(".wk-cat-container");
            var marg= parseInt(thiscategory.css("margin-left").replace("px",""));
            while (thiscategory.next().hasClass("wk-removable")) {
                if (parseInt(thiscategory.next().css("margin-left").replace("px",""))>marg) {
                    thiscategory.next().slideUp("slow",function() {
                        $(this).remove();
                    });
                }
                thiscategory = thiscategory.next();
                if (typeof thiscategory.next().css("margin-left")!= "undefined") {
                    if (marg == thiscategory.next().css("margin-left").replace("px","")) {
                        break;
                    }
                }
            }
        }
    });
</script>
