<?php
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

?>
<?php
$uid = uniqid('product-tabs-');
$helper = $this->helper('Codazon\ThemeLayoutPro\Helper\Data');
$detailedInfoGroup = $block->getGroupChildNames('detailed_info', 'getChildHtml');
$tabsOrder = $helper->getConfig('pages/product_view/tabs_order');
$removedTabs = $helper->getConfig('pages/product_view/removed_tabs');
$maxDescHeight = $helper->getConfig('pages/product_view/desc_tab_max_height') ? : 0;
if ($removedTabs) {
    $removedTabs =  explode(',', str_replace(' ', '', $removedTabs));
    foreach ($detailedInfoGroup as $key => $name) {
        if (in_array($name, $removedTabs)) {
            unset($detailedInfoGroup[$key]);
        }
    }
}
if ($tabsOrder) {
    $tabsOrder = explode(',', str_replace(' ', '', $tabsOrder));
    foreach ($tabsOrder as $key => $name) {
        if (!in_array($name, $detailedInfoGroup)) {
            unset($tabsOrder[$key]);
        }
    }
    $detailedInfoGroup = array_unique(array_merge($tabsOrder, $detailedInfoGroup));
}
?>

<?php if ($detailedInfoGroup): ?>
    <?php $i = 1 ?>
    <div class="product info detailed cdz-detailed-02">
        <?php $layout = $block->getLayout(); ?>
        <div class="product data items" id="<?= $uid ?>">
            <?php foreach ($detailedInfoGroup as $name):?>
                <?php
                    $html = $layout->renderElement($name);
                    if (!trim($html)) {
                        continue;
                    }
                    $alias = $block->escapeHtmlAttr($layout->getElementAlias($name));
                    $label = $block->getChildData($alias, 'title');
                ?>
                <div class="data item title" data-role="collapsible" id="tab-label-<?= $alias;?>">
                    <a class="data switch" tabindex="-1" data-toggle="trigger" href="#<?= $alias; ?>" id="tab-label-<?= $alias;?>-title">
                        <span class="item-t-no hidden-xs"><?= $i ?></span><?= $label; ?>
                    </a>
                </div>
                <div class="data item content hidden" id="<?= $alias; ?>" data-role="content" aria-labelledby="tab-label-<?= $alias ?>-title">
                    <?php echo $html; ?>
                </div>
            <?php $i++; endforeach;?>
        </div>
    </div>
<?php endif; ?>

<script>
require(['jquery', 'tabs'], function($) {
    var $productTabs = $('#<?= $uid ?>');
    $.mage.tabs({"openedState":"active"}, $productTabs);
    $('.data.item.content.hidden', $productTabs).removeClass('hidden');
    var mageTabs = $productTabs.data('mageTabs');
    $('.data.item.title').last().addClass('last');
    if (mageTabs) {
        if (!$productTabs.data('ui-tabs')) {
            $productTabs.data('ui-tabs', mageTabs);
        }
        $('.data.item.title', $productTabs).each(function(i, el) {
            el.scrollIntoView = function() {};
        });
        var mobiTabs = function() {
            $('.data.item.title').off('beforeOpen');
            mageTabs.options.collapsible = true;
            mageTabs.options.animate = 300;
            mageTabs._callCollapsible();
        };
        mobiTabs();
        <?php /* $productTabs.tabs('deactivate', 0); */ ?>
    }
    <?php if ($maxDescHeight) : ?>var collapseText = function ($wrap, maxHeight, viewMoreText, viewLessText) {
        var $panel = $('<div>').addClass('panel-toggle-wrap'),
        $outer = $('<div>').addClass('content-outer'), $inner = $('<div>').addClass('content-inner'),
        $toolbar = $('<div>').addClass('content-toolbar'),
        $toggle = $('<div>').addClass('content-toggle').html(viewMoreText);
        $wrap.children().appendTo($inner);
        $inner.appendTo($outer);       
        $outer.appendTo($panel).css({maxHeight: maxHeight, overflow: 'hidden'});
        $toolbar.appendTo($panel);
        $toggle.appendTo($toolbar);
        $panel.appendTo($wrap);
        $toggle.on('click', function(e){
            e.preventDefault();
            $panel.toggleClass('content-open').hasClass('content-open') ? $toggle.html(viewLessText) : $toggle.html(viewMoreText);
        });
        function apply() {
            ($wrap.innerHeight() > maxHeight)? $panel.addClass('applied'):$panel.removeClass('applied');
        }
        apply();
        $(window).on('resize', apply);
    }
    var $desc = $('#description');
    if ($desc.length) {
        collapseText($desc, <?= $maxDescHeight ?>, '<span><?= __("More view") ?></span>', '<span><?= __("Less view") ?></span>');
    }<?php endif ?>
});
</script>