@section('seo')
    @include('layouts._front_includes._seo', ['seo' => $page->seo])
@endsection

@extends('layouts.frontend_master')


@section('content')
    {{-- @dd($page) --}}

    <div class="d-flex justify-content-center align-items-center py-5">
        <p class="text-center text-dark fs-1 fw-medium font-family-Onest col-xxl-6 m-0 px-3 py-2">
            {{ $page->title }}</p>
    </div>

    <section class="container my-5">
        <div class="row justify-content-center">
            @php
                $hasTitles = collect($term_description ?? [])->contains(function ($item) {
                    return !empty($item['title']);
                });
            @endphp

            @if (!empty($term_description) && $hasTitles)
                <div class="col-lg-3 mb-4">
                    <div class="rounded-3 p-3 sticky-top" style="top: 80px; background-color: #f8f9fa; z-index: 1;">
                        <h3 class="text-dark fw-semibold mb-3" style="font-family: 'Onest', sans-serif;">Table of Content
                        </h3>
                        <div class="d-flex flex-column gap-2">
                            @foreach ($term_description as $key => $item)
                                @if (!empty($item['title']))
                                    <a href="#{{ $item['id'] }}"
                                        class="text-decoration-none nav-item {{ $key == 0 ? 'active' : '' }}">
                                        <div class="rounded-3 p-3 nav-item-content">
                                            <p class="fw-semibold mb-0" style="font-family: 'Onest', sans-serif;">
                                                {{ $item['title'] }}
                                            </p>
                                        </div>
                                    </a>
                                @endif
                            @endforeach

                        </div>
                    </div>
                </div>
            @endif

            <!-- Content (Right Column) -->
            <div class="col-lg-8">

                <!-- Introduction  Section -->
                @foreach ($term_description as $item)
                    <div id="{{ $item['id'] }}" class=" pt-4">
                        <h3 class="text-dark fw-medium mb-3" style="font-family: 'Onest', sans-serif;">
                            {!! $item['title'] !!} </h3>
                        <p class="text-secondary" style="font-family: 'Onest', sans-serif;">
                            {!! $item['content'] !!}
                        </p>
                    </div>
                @endforeach




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

@push('frontend_js')
    <script>
        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();

                // Remove active class from all nav items
                document.querySelectorAll('.nav-item').forEach(navItem => {
                    navItem.classList.remove('active');
                });

                // Add active class to clicked item
                this.classList.add('active');

                // Smooth scroll to target section
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
    const offset = 90; // adjust based on your sticky header height
    const elementPosition = targetElement.getBoundingClientRect().top + window.scrollY;
    const offsetPosition = elementPosition - offset;

    window.scrollTo({
        top: offsetPosition,
        behavior: "smooth"
    });
}

            });
        });

        // Update active nav item based on scroll position
        window.addEventListener('scroll', function() {
            // Get all sections that have corresponding nav items
            const navItems = document.querySelectorAll('.nav-item');
            const sections = [];

            // Collect all sections based on nav item hrefs
            navItems.forEach(item => {
                const href = item.getAttribute('href');
                if (href && href.startsWith('#')) {
                    const section = document.querySelector(href);
                    if (section) {
                        sections.push(section);
                    }
                }
            });

            let currentSection = '';

            // Find the current section in viewport
            sections.forEach(section => {
                const sectionTop = section.offsetTop;
                const sectionHeight = section.clientHeight;
                // Adjust the offset to account for sticky header (80px + some buffer)
                if (window.scrollY >= (sectionTop - 150)) {
                    currentSection = section.getAttribute('id');
                }
            });

            // Update active states
            navItems.forEach(item => {
                item.classList.remove('active');
                const href = item.getAttribute('href');
                if (href === `#${currentSection}`) {
                    item.classList.add('active');
                }
            });
        });

        // Set initial active state on page load
        document.addEventListener('DOMContentLoaded', function() {
            const firstNavItem = document.querySelector('.nav-item');
            if (firstNavItem) {
                firstNavItem.classList.add('active');
            }
        });
    </script>
@endpush