@extends('frontend.layouts.main')
@section('title', $seo['title'] ?? '')
@section('keywords', $seo['keywords'] ?? '')
@section('description', $seo['description'] ?? '')
@section('abstract', $seo['abstract'] ?? '')
@section('image', $seo['image'] ?? '')
@section('idMain', 'page-post-detail')
@section('css')
    <link rel="stylesheet" href="{{ asset('frontend/css/news-list.css') }}?v={{ time() }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('frontend/css/news-detail.css') }}?v={{ time() }}">
    <link rel="stylesheet" href="{{ asset('frontend/css/style.css') }}?v={{ time() }}">
@endsection
@section('code_schema')
    @include('frontend.components.schema.schema-post',['data'=>$data])
@endsection
@section('canonical')
    <link rel="canonical" href="{{ $data->slug_full }}" />
@endsection
@section('content')
@include('frontend.components.breadcrumbs', ['caetgory' => $category, 'parents' => $category->parentsRecursiveLimit(3)])
    <section class="detail-page">
        <div class="ctnr">
            <div class="row">
                <div class="clm" style="--w-lg:9; --w-md:12; --w-xs:12">
                    <div class="box_news_detail">
                        @isset($title)<h1>{{$title}}</h1>@endisset
                        <div class="date-view">
                            <div class="item date">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-name="Layer 1" preserveAspectRatio="xMidYMid meet" version="1.0" viewBox="245.6 73.4 377.6 413.4" zoomAndPan="magnify" style="fill: #FFF;" original_string_length="2260" width="17.46236837877843px" height="19.094040970831287px"><g id=""><path d="M622.78,201a7.67,7.67,0,0,0-.21-1.74c-.13-14.35-.33-26-.61-33.4-1.08-28-16.64-43.19-29.5-51a79.68,79.68,0,0,0-21.4-9V81.27a7.5,7.5,0,1,0-15,0v23.22H509.15v-20a7.5,7.5,0,0,0-15,0v20H450v-20a7.5,7.5,0,0,0-15,0v20H389v-20a7.5,7.5,0,0,0-15,0v20H327.08V81.27a7.5,7.5,0,1,0-15,0V105c-29.7,2.81-45.91,16.23-54.46,27.69a62.61,62.61,0,0,0-12,29v38.67c0,.18,0,.35,0,.53s0,.36,0,.53l0,228.38.07.53a73.66,73.66,0,0,0,10.69,27c8.14,12.53,23.89,27.73,52.67,29,8.15.35,20.5.5,35.48.5,75.47,0,217.59-3.75,224.76-3.94h.44l.43-.06c16.25-2.35,48-15.42,51.78-48.06L622,434c0-1.83,1.26-153.17.63-231.4A7.27,7.27,0,0,0,622.78,201Zm-310.7-80.85v24a7.5,7.5,0,0,0,15,0V119.49H374V144.1a7.5,7.5,0,1,0,15,0V119.49h46V141.8a7.5,7.5,0,0,0,15,0V119.49h44.16V144.1a7.5,7.5,0,1,0,15,0V119.49h46.91v27.36a7.5,7.5,0,1,0,15,0V121.36c12.39,3.91,34.76,15.09,35.91,45,.24,6.27.42,15.6.54,27.06H260.59v-30.6C261.07,159,266.66,125.09,312.08,120.11ZM607,433.45c-3.49,27.64-34.58,33.82-38.6,34.5-11.41.3-211.16,5.48-258.7,3.43-40.59-1.75-48.26-37.92-49.08-42.64V208.46H607.64C608.15,285.74,607,424.66,607,433.45Z" style="fill: inherit;"></path></g><g id=""><path d="M327.68,292.39h49.85V241.16H327.68Zm15-36.23h19.85v21.23H342.68Z" style="fill: inherit;"></path></g><g id=""><path d="M408.39,291.58h50.42V241.16H408.39Zm15-35.42h20.42v20.42H423.39Z" style="fill: inherit;"></path></g><g id=""><path d="M538.27,241.16H489.56v50.31h48.71Zm-15,35.31H504.56V256.16h18.71Z" style="fill: inherit;"></path></g><g id=""><path d="M489.56,362.21H539.3V312.47H489.56Zm15-34.74H524.3v19.74H504.56Z" style="fill: inherit;"></path></g><g id=""><path d="M489.56,433.06h49.05V384H489.56Zm15-34.05h19.05v19.05H504.56Z" style="fill: inherit;"></path></g><g id=""><path d="M408.39,434.21H457.9V384.7H408.39Zm15-34.51H442.9v19.51H423.39Z" style="fill: inherit;"></path></g><g id=""><path d="M408.39,362.21h49.74V312.47H408.39Zm15-34.74h19.74v19.74H423.39Z" style="fill: inherit;"></path></g><g id=""><path d="M328.82,362.21h47.79V312.47H328.82Zm15-34.74h17.79v19.74H343.82Z" style="fill: inherit;"></path></g><g id=""><path d="M328.82,431.8h47.79V384H328.82Zm15-32.79h17.79V416.8H343.82Z" style="fill: inherit;"></path></g></svg>
                               {{$data->created_at->format('d-m-Y')}}
                            </div>
                            <div class="item view">
                                <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="12" cy="12" r="4" fill="#FFF"></circle> <path d="M21 12C21 12 20 4 12 4C4 4 3 12 3 12" stroke="#FFF" stroke-width="2"></path> </g></svg>
                                {{$data->view}} lượt xem
                            </div>
                        </div>

                        @if(isset($data->description) && $data->description != null)
                            <div class="news_note">
                                {{$data->description}}
                            </div>
                        @endif
                        <div class="tomtatnd" id="myTabContent">
                            <div class="header-tomtat">
                                <div class="header-left-tomtat">
                                    <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                                            <path d="M16 132h416c8.8 0 16-7.2 16-16V76c0-8.8-7.2-16-16-16H16C7.2 60 0 67.2 0 76v40c0 8.8 7.2 16 16 16zm0 160h416c8.8 0 16-7.2 16-16v-40c0-8.8-7.2-16-16-16H16c-8.8 0-16 7.2-16 16v40c0 8.8 7.2 16 16 16zm0 160h416c8.8 0 16-7.2 16-16v-40c0-8.8-7.2-16-16-16H16c-8.8 0-16 7.2-16 16v40c0 8.8 7.2 16 16 16z">
                                            </path>
                                        </svg></span>
                                    <p>Nội dung chính</p>
                                </div>
                                <div class="header-right-tomtat" onclick="toggleContent()">
                                    <p><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
                                            <path d="M285.5 273L91.1 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.7-22.7c-9.4-9.4-9.4-24.5 0-33.9L188.5 256 34.5 101.3c-9.3-9.4-9.3-24.5 0-33.9l22.7-22.7c9.4-9.4 24.6-9.4 33.9 0L285.5 239c9.4 9.4 9.4 24.6 0 33.9z">
                                            </path>
                                        </svg></p>
                                </div>
                            </div>
                            <div class="table-content">
                                <ol id="toc-list"></ol>
                            </div>
                        </div>
                        <div class="noi-dung">
                            <div class="content-tour-detail">
                                {!!$data->content!!}
                            </div>
                        </div>
                       
                    </div>
                </div>
                <div class="clm" style="--w-lg:3; --w-md:12; --w-xs:12">
                    @include('frontend.components.posts.sidebar-news')
                </div>
            </div> 
        </div>
    </section>

    @if(count($dataRelate) > 0 )
        <div class="post-related-wrap">
            <div class="ctnr">
                <h2 class="title-related">
                    Tin tức khác
                </h2>
                
                <div class="post-related-slider">
                    @foreach($dataRelate as $item)
                        @include('frontend.components.posts.item1', ['data' => $item])
                        {{-- 
                            <div class="item-news item-news-hot">
                                <a href="{{$item->slug}}" title="{{$item->name}}" class="wrap-img img-100">
                                    <img src="{{asset($item->avatar_path)}}" alt="{{$item->name}}">
                                </a>
                                <div class="content">
                                    <h3>
                                        <a href="{{$item->slug}}" title="{{$item->name}}" class="title">
                                            {{$item->name}}
                                        </a>
                                    </h3>
                                    <div class="cate-time">
                                        <div class="time-post">{{$item->created_at->format('d-m-Y')}}</div>
                                        <a href="{{$item->slug}}" title="{{$item->name}}"
                                            class="name-cate">{{$item->category->name}}</a>
                                    </div>
                                    <div class="des">
                                        {{$item->description}}
                                    </div>
                                </div>
                            </div>
                        --}}
                    @endforeach
                </div>	
            </div>
        </div>
    @endif

@endsection

@section('js')
    <script>
        function toggleContent() {
            var wrapSizeChange = document.getElementById('myTabContent');
            wrapSizeChange.classList.toggle('active-scroll');
        }
    </script>
    
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const content = document.querySelector(".content-tour-detail");
            const tocList = document.getElementById("toc-list");
            const tocContainer = document.querySelector(".tomtatnd"); // Khối mục lục

            if (!content || !tocList || !tocContainer) return;

            const headings = content.querySelectorAll("h2, h3, h4");

            if (headings.length === 0) {
                tocContainer.style.display = "none"; // Ẩn nếu khĂ´ng cĂ³ mục lục
                return;
            } else {
                tocContainer.style.display = "block"; // Hiển thị nếu cĂ³ mục lục
            }

            let levelCounters = {
                H2: 0,
                H3: 0,
                H4: 0
            };

            headings.forEach((heading, index) => {
                let id = heading.id;
                if (!id) {
                    id = `section-${index + 1}`;
                    heading.id = id;
                }

                if (heading.tagName === "H2") {
                    levelCounters.H2++;
                    levelCounters.H3 = 0;
                    levelCounters.H4 = 0;
                } else if (heading.tagName === "H3") {
                    levelCounters.H3++;
                    levelCounters.H4 = 0;
                } else if (heading.tagName === "H4") {
                    levelCounters.H4++;
                }

                let sectionNumber = `${levelCounters.H2}.`;
                if (heading.tagName === "H3") {
                    sectionNumber = `${levelCounters.H2}.${levelCounters.H3}.`;
                } else if (heading.tagName === "H4") {
                    sectionNumber = `${levelCounters.H2}.${levelCounters.H3}.${levelCounters.H4}.`;
                }

                const listItem = document.createElement("li");
                const link = document.createElement("a");

                link.href = `#${id}`;
                link.textContent = `${sectionNumber} ${heading.textContent}`;
                link.classList.add("scrollLink");

                if (heading.tagName === "H3") {
                    link.classList.add("toc-h3");
                    listItem.style.marginLeft = "10px";
                    listItem.style.fontWeight = "400";
                    listItem.style.fontSize = "15px";
                } else if (heading.tagName === "H4") {
                    link.classList.add("toc-h4");
                    listItem.style.marginLeft = "20px";
                }

                listItem.appendChild(link);
                tocList.appendChild(listItem);
            });

            // Cuộn mượt khi click
            let headerHeight = $('.header-menu').outerHeight()
            $(document).on('click', '.scrollLink', function(e){
                e.preventDefault();
                var speed = 400,
                    href = $(this).prop("href"),
                    hrefPageUrl = href.split("#")[0],
                    currentUrl = location.href,
                    currentUrl = currentUrl.split("#")[0];

                if (hrefPageUrl == currentUrl) {
                    href = href.split("#");
                    href = href.pop();
                    href = "#" + href;

                    var target = $(href == "#" || href == "" ? "html" : href),
                    position = target.offset().top - headerHeight - 100;
                    $("body,html").stop().animate({ scrollTop: position }, 500);
                    return false;
                }
            })
        });

        $('.post-related-slider').slick({
            dots: false,
            arrows: false,
            slidesToShow: 4,
            slidesToScroll: 1,
            autoplay: true,
            prevArrow: '<button type="button" class="slick-prev"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg></button>',
            nextArrow: '<button type="button" class="slick-next"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg></button>',
            responsive: [
                {
                    breakpoint: 992,
                    settings: {
                        slidesToShow: 3,
                    }
                },
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 2,
                    }
                },
                {
                    breakpoint: 576,
                    settings: {
                        slidesToShow: 1,
                    }
                }
            ]
        });
    </script>
@endsection