@extends('layouts.app')
@section('contents')
    <style>
        .toc-list{width:100%;position:relative;box-shadow:2px 0 0 0 #0000001a inset}.toc-list.is-collapsible .toc-link{padding-left:2.25rem}.toc-list.is-collapsed{display:block}.toc-link{display:block;color:#495057;padding:.75rem 1rem .75rem 1.5rem;transition:.5s}.toc-link.is-active-link{background-color:#eceff1;font-weight:500;box-shadow:2px 0 0 0 #495057 inset}.docs-toc{--bg-scrollbar-thumb:#ced4da;--bg-scrollbar-track:transparent}


    </style>
        
    <section>
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-12 pt-5">
                <div class=" card mb-4" style="
    position: sticky;
    padding: 0;
    top: 160px;
">
                    <div class="card-body">
                        <span style="        font-size: 1.5rem;" class="card-title">Table of Content</span>
                        <div class="docs-toc scroll">
                            <div class="Toc">
                                <!-- Output Table Of Content-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>


                <div class="col-sm-8 col-xs-12 pt-5 post-body">
                    <h1>{{ $post->post_title }}</h1>
                    <p><i class="fa fa-calendar" aria-hidden="true"></i>&nbsp;{{ $post->created }}</p>
                    <img alt="{{ $post->featured_alt }}" title="{{ $post->featured_alt }}" src="{{ asset("assets/blog-posts/".$post->featured_image) }}" width="100%">
                    <div class="opi-post-detail py-4"><p>{!! $post->post_detail !!}</p></div>
                </div>

            </div>
        </div>
    </section>
@endsection


@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/tocbot/dist/tocbot.min.js"></script>

    <script>var contentElement=document.querySelector(".post-body"),
            headings=contentElement.querySelectorAll("h2, h3, h4, h5, h6, h7"),
            headingMap={};
        Array.prototype.forEach.call(headings, function(element) {
            var id = element.id ? element.id : element.textContent.toLowerCase().replace(/[^a-z -]/gi, "").trim().split(" ").join("-").replace(/--/g, "-");
            headingMap[id] = isNaN(headingMap[id]) ? 0 : ++headingMap[id];
            if (headingMap[id]) {
                element.id = id + "-" + headingMap[id];
            } else {
                element.id = id;
            }
        });
        tocbot.init({
            tocSelector: ".Toc",
            contentSelector: ".post-body",
            headingSelector: "h2, h3, h4, h5, h6, h7",
            hasInnerContainers: true,
            listItemClass: "toc-list-item",
            orderedList: false,
            headingsOffset: 1
        });</script>
@endpush