<?php
/**
 * Copyright © 2021 Codazon, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
?>
<?php
$element = $this->getFormElement();
$id = $element->getId();
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$types = $objectManager->get(\Magento\Catalog\Model\Product\Type::class);
$defaultLayoutMapImage = $this->getViewFileUrl('Codazon_ThemeLayoutPro::images/product-page-map-default.jpg');
$themeLayoutMapImage = $this->getViewFileUrl('Codazon_ThemeLayoutPro::images/product-page-map-theme.jpg');
?>
<div class="cdz-container" id="<?= $id ?>_container">
    <div class="cdz-items-list" id="<?= $id ?>_items_list"></div>
    <div>
    <div class="cdz-actions"><button id="<?= $id ?>_add_item" type="button" class="button action-primary"><?= __('Add Item') ?></button></div>
    </div>
    <!--div class="note-block"></div-->
</div>
<script type="text/x-magento-template" id="<?= $id ?>_item_tmpl">
<div class="js-item item">
    <div class="sort-handle" title="<?= __('Move to sort') ?>"></div>
    <div class="item-data row">
        <div class="col col-xs-2">
            <label><?= __('Attribute code') ?></label>
            <input type="text" data-name="code" value="<%- value.code %>">
        </div>
        <div class="col col-xs-2">
            <label><?= __('Frontend title') ?></label>
            <input type="text" data-name="title" value="<%- value.title %>">
        </div>
        <div class="col col-xs-2">
            <label><?= __('Route name') ?></label>
            <input type="text" data-name="route" value="<%- value.route %>">
        </div>
        <div class="col col-xs-2">
            <div class="cdz-opt-drop js-dd"> 
                <div class="cdz-dd-trigger js-dd-trigger"><?= __('Landing page') ?></div>
                <div class="cdz-dd-content">
                    <p><label><?= __('Description') ?><br /><?= __('(The identifier of CMS block)') ?></label>
                    <input type="text" data-name="desc_identifier" value="<%- value.desc_identifier %>"></p>
                    <p><label><?= __('Display search block') ?></label>
                    <select data-name="display_search">
                        <% _.each(yesno, function(option) { %>
                        <option <%- (value.display_search == option.value) ? 'selected' : '' %> value="<%- option.value %>"><%- option.label %></option>
                        <% }); %>
                    </select></p>
                    <p><label><?= __('Display Featured block') ?></label>
                    <select data-name="display_featured">
                        <% _.each(yesno, function(option) { %>
                        <option <%- (value.display_featured == option.value) ? 'selected' : '' %> value="<%- option.value %>"><%- option.label %></option>
                        <% }); %>
                    </select></p>
                    <p><label><?= __('Meta keywords') ?></label>
                    <input type="text" data-name="meta_keywords" value="<%- value.meta_keywords %>"></p>
                    <p><label><?= __('Meta description') ?></label>
                    <input type="text" data-name="meta_description" value="<%- value.meta_description %>"></p>
                    <p><label><?= __('Featured block title') ?></label>
                    <input type="text" data-name="featured_title" value="<%- value.featured_title %>"></p>
                    <p><label><?= __('All options block title') ?></label>
                    <input type="text" data-name="all_title" value="<%- value.all_title %>"></p>
                </div>
            </div>
        </div>
        <div class="col col-xs-1">
            <button type="button" class="js-remove"><?= __('Remove') ?></button>
        </div>
    </div>
</div>
</script>

<script>
require(['jquery', 'mage/template', 'jquery-ui-modules/sortable'], function($, mageTmpl) {
    var max = 20, id = '<?= $id ?>',
    defaultOptions = {
        yesno:<?= json_encode([
            ['label' => __('No'), 'value' => '0'],
            ['label' => __('Yes'), 'value' => '1'],
        ]) ?>
    }, $ddActive;
    var $input = $('#' + id), value = $input.val(), $btnAdd = $('#' + id + '_add_item'), $list = $('#' + id +'_items_list'),
        tmpl = mageTmpl('#' + id + '_item_tmpl');
    $list.on('click', '.js-remove', function() {
        $(this).parents('.js-item').first().fadeOut(300, 'swing', function(){ $(this).remove(); collectData(); });
        $list.sortable('refresh');
        $list.sortable('refreshPositions');
    }).on('click', '.js-dd-trigger', function() {
        $ddActive = $(this).parents('.js-dd').first();
        if ($ddActive.hasClass('js-dd-active')) {
            $ddActive.removeClass('js-dd-active');
            $ddActive = null;
        } else {
            $('.js-dd-active').removeClass('js-dd-active');
            $ddActive.addClass('js-dd-active');
        }
    });
    $('body').on('click', function(e) {
        var $target = $(e.target);
        if ($ddActive && !($target.is($ddActive) || ($ddActive.has($target).length))) {
            $ddActive.removeClass('js-dd-active');
            $ddActive = null;
        }
    });
    $btnAdd.on('click', function(e) {
        e.preventDefault();
        var count = $list.find('.item').length;
        if (count < max) {
            defaultOptions.value = {};
            $(tmpl(defaultOptions)).appendTo($list);
            collectData();
            $list.sortable('refresh');
            $list.sortable('refreshPositions');
        } else {
            alert('<?= __("You can only add maximum 8 items") ?>')
        }
    });
    var collectData = function() {
        var items = [];
        $('.js-item', $list).each(function() {
            var item = {};
            $(this).find('[data-name]').each(function(i, field) {
                var $field = $(this);
                item[$field.data('name')] = $field.val();
            });
            items.push(item);
        });
        $input.val(JSON.stringify(items));
    }
    var prepareHtml = function(data) {
        $.each(data, function(i, item) {
            defaultOptions.value = item;
            $(tmpl(defaultOptions)).appendTo($list);
        });
    }
    $list.on('change', '[data-name]', collectData);
    if (value) { 
        prepareHtml(JSON.parse(value));
    }
    $list.sortable({
        handle: '.sort-handle',
        stop: function() {
            collectData();
        }
    });
    var $inherit = $('#' + id + '_inherit');
    if ($inherit.length) {
        var checkInherit = function() {
            var inherit = $inherit.is(':checked');
            if (inherit) {
                $('#' + id + '_container').addClass('disable');
            } else {
                $('#' + id + '_container').removeClass('disable');
            }
        }
        $inherit.on('change', checkInherit);
        checkInherit();
    }
});
</script>
<style>
#<?= $id ?>{display:none;}
#<?= $id ?>_container{margin-top: 20px;}
#<?= $id ?>_container select, #<?= $id ?>_container input{font-size:10px;}
.cdz-container.disable{opacity: 0.5;position: relative}
.cdz-container.disable:after{position:absolute;left:0;top:0;width:100%;height:100%;content:'';display:block;}
.cdz-items-list{font-size: 11px;}
.cdz-items-list .item {display: flex; align-items: flex-start;}
.cdz-items-list .item .col{padding: 7px; box-sizing: border-box;}
.cdz-items-list .item .col:first-child{padding-left: 0;}
.cdz-items-list .item .col:last-child{padding-right: 0;}
.cdz-items-list .item .sort-handle{width: 34px; height: 34px; margin-top: 20px; line-height: 34px;}
.cdz-items-list .item .sort-handle:before{content:'\E63D'; font-family: 'Admin Icons'; font-size: 17px; color: #ccc; cursor: move;}
.cdz-items-list .item .item-data{width: calc(100% - 40px); box-sizing: border-box; display: flex; align-items: flex-end;}
.cdz-container .preview-img{display: inline-block; width: 40px; vertical-align: middle; margin: 2px 1rem; border: 1px solid #ccc; padding: 4px; background: #fff; line-height: 0;}
.cdz-container .preview-img img {width: 100%; height: auto;}
.cdz-container .note-block {padding: 20px; border: 1px solid #999; border-radius:7px; background: #f9f7f7;margin:10px 0;}
.cdz-container .note-block ol > li > div {margin-left:5px;}
.cdz-container .note-block ol > li::marker {font-weight: bold;}
.text-uppercase {text-transform: uppercase;}
.cdz-container .cdz-border-left {border-left: 2px solid #eee;}
.cdz-container .cdz-dd-content{display: none; position: absolute; left:0; top: calc(100% + 5px);box-shadow: 0px 2px 3px 0px #eee;padding: 20px; background: #fff; border: 1px solid #eee; width: 300px;max-height:320px;overflow:auto;z-index:4;}
.cdz-container .cdz-opt-drop.js-dd-active .cdz-dd-content {display: block;}
.cdz-container .cdz-opt-drop{position:relative;}
.cdz-dd-trigger{position:relative;cursor: pointer;font-weight: bold;font-size: 14px;line-height: 31px;border: 1px solid #ccc;text-align: center;background: #fff5d9;user-select:none;}
.cdz-dd-trigger:after{font-family: 'Admin Icons';font-style: normal;font-size:11px;content:'\e628';margin-left: 5px;position: absolute;right: 7px;top: 0;line-height:31px;text-align: center;}
.cdz-opt-drop.js-dd-active .cdz-dd-trigger:after{content:'\e62b';}
</style>