@extends('layouts.frontend_master')

@section('content')

    <section class="container-fluid">
        <div class="container py-5">
            <div class="banner-container  position-relative rounded-4 d-flex align-items-center justify-content-center">
                <!-- Image loaded in HTML -->
                <img src="{{ $blog->cover_image->getPath() }}" alt="Travel Adventure" class="banner-image">


            </div>
        </div>
    </section>

    <section class="container my-5">
        <div class="row mb-4">
            <div class="col-12">
                <h1
  class="text-center fw-semibold"
  style="font-family: 'Onest', sans-serif; font-size: 2.5rem;"
>
  @php
    $words = explode(' ', trim($blog->title));
    $lastWord = array_pop($words);
  @endphp

  <span class="text-dark">
    {{ implode(' ', $words) }}
  </span>
  <span class="text-warning">
    {{ $lastWord }}
  </span>
</h1>

            </div>
            <div class="col-12 d-flex justify-content-center">
                <div class="d-flex align-items-center me-4">
                    <img src="{{ $blog->authorRelation->feature_image->getPath() }}" alt="Author" class="rounded-5 me-2"
                        width="32" height="32">
                    <p class="text-secondary mb-0" style="font-family: 'Geist', sans-serif;">
                        {{ $blog->authorRelation->name }}
                    </p>
                </div>
                <div class="d-flex align-items-center">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
                        class="me-2">
                        <path
                            d="M8 2V5M16 2V5M3.5 9.09H20.5M21 8.5V17C21 20 19.5 22 16 22H8C4.5 22 3 20 3 17V8.5C3 5.5 4.5 3.5 8 3.5H16C19.5 3.5 21 5.5 21 8.5Z"
                            stroke="#6C757D" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"
                            stroke-linejoin="round" />
                        <path
                            d="M15.6947 13.7H15.7037M15.6947 16.7H15.7037M11.9955 13.7H12.0045M11.9955 16.7H12.0045M8.29431 13.7H8.30329M8.29431 16.7H8.30329"
                            stroke="#6C757D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                    <p class="text-secondary mb-0" style="font-family: 'Geist', sans-serif;">
                        {{ \Carbon\Carbon::parse($blog->publish_date)->format('F d, Y') }}
                    </p>

                </div>
            </div>
        </div>

        @php
            $hasTitles = collect($blog_description ?? [])->contains(function ($item) {
                return !empty($item['title']);
            });
        @endphp
        <div class="row justify-content-center">
            <!-- Table of Contents (Left Column) -->
            <div class="col-lg-3 mb-4">

                @if (!empty($blog_description) && $hasTitles)
                    <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 ($blog_description as $item)
                                @if (!empty($item['title']))
                                    <a href="#{{ $item['id'] }}" class="text-decoration-none nav-item active">
                                        <div class="rounded-3 p-3 nav-item-content" style="transition: all 0.3s ease;">
                                            <p class="fw-semibold mb-0" style="font-family: 'Onest', sans-serif;">
                                                {{ $item['title'] }}
                                            </p>
                                        </div>
                                    </a>
                                @endif
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>

            <!-- Content (Right Column) -->
            <div class="col-lg-8">
                @foreach ($blog_description as $item)
                    <div id="{{ $item['id'] }}" class="mb-5 pt-4 section-anchor" style="scroll-margin-top: 100px;">
                        <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


                <!-- Author Box -->
                <div class="rounded-5 p-4 d-flex align-items-start justify-content-between"
                    style="background-color: #EBF0FF;">
                    <div class="me-3"
                        style="width: 50px; height: 50px; flex-shrink: 0; overflow: hidden; border-radius: 50%;">
                        <img src="{{ $blog->authorRelation->feature_image->getPath() }}"
                            alt="{{ $blog->authorRelation->name }}" class="w-100 h-100 object-fit-cover">
                    </div>
                    <div class="flex-grow-1">
                        <h4 class="text-dark fw-semibold mb-1" style="font-family: 'Onest', sans-serif;">
                            {{ $blog->authorRelation->name }}
                        </h4>
                        <p class="mb-2">
                            <span class="text-dark fw-medium"
                                style="font-family: 'Onest', sans-serif;">{{ $blog->authorRelation->post }} </span>
                            <span class="text-warning fw-medium"
                                style="font-family: 'Onest', sans-serif;">{{ '@' . $site_setting->site_title }}</span>
                        </p>
                        @if($team_page)
                            <a href="{{ route('page', $team_page->slug) }}" class="text-decoration-none d-block">
                                <div class="text-secondary mb-0 line-clamp-3"
                                    style="font-family: 'Onest', sans-serif; cursor: pointer;">
                                    {!! $blog->authorRelation->description !!}
                                </div>
                            </a>
                        @endif

                    </div>
                    <div class="ms-3">
                        <p class="text-black fw-medium mb-2" style="font-family: 'Onest', sans-serif;text-wrap: nowrap;">
                            Share this:
                        </p>
                        <div class="d-flex gap-2">
                            <!-- Social icons would go here -->
                            <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(url()->current()) }}"
                                target="_blank" class="text-secondary">
                                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="25" height="25"
                                    viewBox="0 0 48 48">
                                    <linearGradient id="Ld6sqrtcxMyckEl6xeDdMa_uLWV5A9vXIPu_gr1" x1="9.993" x2="40.615"
                                        y1="9.993" y2="40.615" gradientUnits="userSpaceOnUse">
                                        <stop offset="0" stop-color="#2aa4f4"></stop>
                                        <stop offset="1" stop-color="#007ad9"></stop>
                                    </linearGradient>
                                    <path fill="url(#Ld6sqrtcxMyckEl6xeDdMa_uLWV5A9vXIPu_gr1)"
                                        d="M24,4C12.954,4,4,12.954,4,24s8.954,20,20,20s20-8.954,20-20S35.046,4,24,4z">
                                    </path>
                                    <path fill="#fff"
                                        d="M26.707,29.301h5.176l0.813-5.258h-5.989v-2.874c0-2.184,0.714-4.121,2.757-4.121h3.283V12.46 c-0.577-0.078-1.797-0.248-4.102-0.248c-4.814,0-7.636,2.542-7.636,8.334v3.498H16.06v5.258h4.948v14.452 C21.988,43.9,22.981,44,24,44c0.921,0,1.82-0.084,2.707-0.204V29.301z">
                                    </path>
                                </svg>
                            </a>
                            <a href="{{ $blog->authorRelation->insta_link }}" class="text-secondary">
                                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="25" height="25"
                                    viewBox="0 0 48 48">
                                    <radialGradient id="yOrnnhliCrdS2gy~4tD8ma_Xy10Jcu1L2Su_gr1" cx="19.38" cy="42.035"
                                        r="44.899" gradientUnits="userSpaceOnUse">
                                        <stop offset="0" stop-color="#fd5"></stop>
                                        <stop offset=".328" stop-color="#ff543f"></stop>
                                        <stop offset=".348" stop-color="#fc5245"></stop>
                                        <stop offset=".504" stop-color="#e64771"></stop>
                                        <stop offset=".643" stop-color="#d53e91"></stop>
                                        <stop offset=".761" stop-color="#cc39a4"></stop>
                                        <stop offset=".841" stop-color="#c837ab"></stop>
                                    </radialGradient>
                                    <path fill="url(#yOrnnhliCrdS2gy~4tD8ma_Xy10Jcu1L2Su_gr1)"
                                        d="M34.017,41.99l-20,0.019c-4.4,0.004-8.003-3.592-8.008-7.992l-0.019-20	c-0.004-4.4,3.592-8.003,7.992-8.008l20-0.019c4.4-0.004,8.003,3.592,8.008,7.992l0.019,20	C42.014,38.383,38.417,41.986,34.017,41.99z">
                                    </path>
                                    <radialGradient id="yOrnnhliCrdS2gy~4tD8mb_Xy10Jcu1L2Su_gr2" cx="11.786" cy="5.54"
                                        r="29.813" gradientTransform="matrix(1 0 0 .6663 0 1.849)"
                                        gradientUnits="userSpaceOnUse">
                                        <stop offset="0" stop-color="#4168c9"></stop>
                                        <stop offset=".999" stop-color="#4168c9" stop-opacity="0"></stop>
                                    </radialGradient>
                                    <path fill="url(#yOrnnhliCrdS2gy~4tD8mb_Xy10Jcu1L2Su_gr2)"
                                        d="M34.017,41.99l-20,0.019c-4.4,0.004-8.003-3.592-8.008-7.992l-0.019-20	c-0.004-4.4,3.592-8.003,7.992-8.008l20-0.019c4.4-0.004,8.003,3.592,8.008,7.992l0.019,20	C42.014,38.383,38.417,41.986,34.017,41.99z">
                                    </path>
                                    <path fill="#fff"
                                        d="M24,31c-3.859,0-7-3.14-7-7s3.141-7,7-7s7,3.14,7,7S27.859,31,24,31z M24,19c-2.757,0-5,2.243-5,5	s2.243,5,5,5s5-2.243,5-5S26.757,19,24,19z">
                                    </path>
                                    <circle cx="31.5" cy="16.5" r="1.5" fill="#fff"></circle>
                                    <path fill="#fff"
                                        d="M30,37H18c-3.859,0-7-3.14-7-7V18c0-3.86,3.141-7,7-7h12c3.859,0,7,3.14,7,7v12	C37,33.86,33.859,37,30,37z M18,13c-2.757,0-5,2.243-5,5v12c0,2.757,2.243,5,5,5h12c2.757,0,5-2.243,5-5V18c0-2.757-2.243-5-5-5H18z">
                                    </path>
                                </svg>
                            </a>
                            <a href="https://twitter.com/intent/tweet?url={{ urlencode(url()->current()) }}&text={{ urlencode($blog->title) }}"
                                class="text-secondary">
                                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="25" height="25"
                                    viewBox="0 0 48 48">
                                    <path fill="#212121" fill-rule="evenodd"
                                        d="M38,42H10c-2.209,0-4-1.791-4-4V10c0-2.209,1.791-4,4-4h28	c2.209,0,4,1.791,4,4v28C42,40.209,40.209,42,38,42z"
                                        clip-rule="evenodd"></path>
                                    <path fill="#fff"
                                        d="M34.257,34h-6.437L13.829,14h6.437L34.257,34z M28.587,32.304h2.563L19.499,15.696h-2.563 L28.587,32.304z">
                                    </path>
                                    <polygon fill="#fff" points="15.866,34 23.069,25.656 22.127,24.407 13.823,34">
                                    </polygon>
                                    <polygon fill="#fff" points="24.45,21.721 25.355,23.01 33.136,14 31.136,14">
                                    </polygon>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </section>


    <script type='text/javascript'
        src='https://platform-api.sharethis.com/js/sharethis.js#property=67739a67c1886b001ae16d68&product=sop'
        async='async'></script>
@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) {
                    targetElement.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        // 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