@php
$text = $article->content_json;
if (strlen($text) > 0) {
    $objects = json_decode($text);
} else {
    $objects = [];
}
$count = 0;
@endphp
@if (count($objects) > 0)
    <div class="content-of-table pl-sm-4">
        <div class="title-table">
            <i class="fas fa-align-justify"></i> 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 }}"><i class="fas fa-angle-right"></i>
                            <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
<style type="text/css">
    .hide {
        display: none;
    }

    .show {
        display: block;
    }

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

    .space-h3 {
        padding-left: 30px;
        font-size: 14px;
    }

    .space-h3:before {
        margin-right: 10px;
        content: "\2022";
    }
</style>
<script>
    $(document).ready(function() {
        $('.h2-class i').click(function() {
            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>