@php
    $text = $article->content_json;
    if (strlen($text) > 0) {
        $objects = json_decode($text);
    } else {
        $objects = [];
    }
    $count = 0;
@endphp
@if ($article->tableOfContent == '1')
    @if (count($objects) > 0)
        <div class="content-of-table pl-sm-4">
            <div class="title-table">
                Table of contents
            </div>
            <div class="content-table">
                @foreach ($objects as $k => $obj)
                    <div class="item-table">
                        @if ($obj->name == 'h2')
                            @php $count++; @endphp
                            <div class="h2-class" data-class="{{ $count }}"><span class="fas fa-angle-right"></span>
                                <a
                                    href="{{ url('/') }}/article/{{ $article->slug }}-{{ $article->id }}#{{ $obj->tag }}">
                                    {{ $obj->value }}
                                </a>
                            </div>
                        @elseif($obj->name == 'h3')
                            <div class="space-h3 count-{{ $count }} hide">
                                <a
                                    href="{{ url('/') }}/article/{{ $article->slug }}-{{ $article->id }}#{{ $obj->tag }}">
                                    {{ $obj->value }}
                                </a>
                            </div>
                        @endif
                    </div>
                @endforeach
            </div>
        </div>
    @endif
@endif
<div class="ads_ngang text-center" style="clear: both; padding-top: 10px; width: 100%;">
    @if (!App\Helpers\Helper::isMobileDev())
        <script type="text/javascript">
            atOptions = {
                'key': '9857892dec2b6de4e93dcc9c9d406a95',
                'format': 'iframe',
                'height': 90,
                'width': 728,
                'params': {}
            };
            document.write('<scr' +
                'ipt type="text/javascript" src="//www.topcreativeformat.com/9857892dec2b6de4e93dcc9c9d406a95/invoke.js"></scr' +
                'ipt>');
        </script>
    @else
        <script type="text/javascript">
            atOptions = {
                'key': 'dfceb917c52920d372f6cd3c67912061',
                'format': 'iframe',
                'height': 50,
                'width': 320,
                'params': {}
            };
            document.write('<scr' +
                'ipt type="text/javascript" src="//www.topcreativeformat.com/dfceb917c52920d372f6cd3c67912061/invoke.js"></scr' +
                'ipt>');
        </script>
    @endif
</div>
<style type="text/css">
    .hide {
        display: none;
    }

    .show {
        display: block;
    }

    .h2-class i {
        margin-right: 10px;
    }

    .space-h3 {
        padding-left: 23px;
        position: relative;
        font-size: 14px;
    }

    .space-h3:before {
        margin-right: 10px;
        content: "\2022";
    }

    .content-of-table a {
        color: #b0b3bc;
    }

    span.fas {
        padding-left: 26px;
        position: relative;
        margin-left: -4px;
        display: unset;
    }

    span.fas::before {
        content: '';
        position: absolute;
        width: 17px;
        height: 17px;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }

    span.fas.fa-angle-right::before {
        background-image: url(/frontend/images/arrow_right_table_content.svg);
    }

    span.fas.fa-angle-down::before,
    span.fa.fa-caret-down::before {
        background-image: url(/frontend/images/angle-down.svg);
    }
</style>
<script>
    $(document).ready(function() {

        if ($('.product-affiliate').length > 0) {
            $.each($('.product-affiliate'), function(index, value) {
                const $a = $(value).find('.product-affiliate-see-more')
                let link = false
                if ($a) {
                    link = $a.attr('href');
                }
                const product_ids = $(value).attr('id');
                $(value).attr('id', `product-affiliate-${index}`)
                $.ajax({
                    data: {
                        "product_ids": product_ids,
                    },
                    url: '/ajax/product-affiliate',
                    success: function(res) {
                        $(value).find('.product-affiliate-content').html(res);
                        console.log($(value).find('.see-other-product').length)
                        if (link) {
                            $(value).find('.see-other-product').attr('href', link).show()
                        }
                    }
                })
            })
        }

        $('.h2-class span').click(function() {
            if ($('.count-' + $(this).parent().attr('data-class')).length > 0) {
                if ($(this).hasClass('fa-angle-right')) {
                    $(this).removeClass('fa-angle-right').addClass('fa-angle-down')
                    $('.count-' + $(this).parent().attr('data-class')).removeClass('hide');
                } else {
                    $(this).removeClass('fa-angle-down').addClass('fa-angle-right')
                    $('.count-' + $(this).parent().attr('data-class')).addClass('hide');
                }
            }
        })

        $('.h2-class a').on('click', function() {
            $('html, body').animate({
                scrollTop: $(this.hash).offset().top - 100
            }, 400);
            return false;
        });

    })
</script>