rohini-web/resources/views/client/rohini/pages/blog-single-template.blade.php

<style>
    /* Sticky Sidebar States */

    @media(min-width:992px){
#stickySidebar {
    position: static;
    width: 420px !important;
    transition: all 0.3s ease;
}

#stickySidebar.is-fixed {
    position: fixed;
    top: 11px; /* distance from top */
    width: 350px;
    z-index: 10;
}

#stickySidebar.is-bottom {
    position: absolute;
    top: auto;
    bottom: 20px;
    width: 100%;
}

    }


</style>
@extends('client.rohini.layouts.app')
@section('content')
    <!--Page Header Start-->
    <section class="page-header">
        <div class="page-header__bg" style="background-image: url('{{ $page->banner }}');"> </div>
        <div class="container">
            <div class="page-header__inner">
                <div class="thm-breadcrumb__box">
                    <ul class="thm-breadcrumb list-unstyled">
                        <li><a href="{{ route('home') }}">Home</a></li>
                        <li><span>-</span></li>
                        <li>Post details</li>
                    </ul>
                </div>
                <h2>Post details</h2>
            </div>
        </div>
    </section>
    <!--Page Header End-->

    <!--Blog Details Start-->
    <section class="blog-details">
        <div class="container">
            <div class="row">
                <div class="col-xl-8 col-lg-7">
                    <div class="blog-details__left">
                        <div class="blog-details__content-one">
                            <div class="blog-details__content-one-img"> <img src="{{ $page->image }}" alt="">
                                <div class="blog-one__date">
                                    <p>{{ getFormatted(date: $page->date, format: 'd') }}
                                        <br> <span>{{ getFormatted(date: $page->date, format: 'M') }}</span>
                                    </p>
                                </div>
                            </div>
                            <div class="blog-details__content-one-details">
                                <ul class="blog-details__meta list-unstyled">
                                    <li> <a href="#"><span class="icon-user-icon"></span>{{ $page->author }}</a> </li>
                                </ul>
                                <h3 class="blog-details__title ">{{ $page->title }}</h3>
                                {!! $page->description !!}
                            </div>
                        </div>
                        <div class="blog-details__content-three">
                            <div class="blog-details__content-three-img-boxes">
                                @if ($page->images)
                                    <div class="row">
                                        <div class="col-xl-6">
                                            <div class="blog-details__content-three-img"> <img src="{{ $page->images[0] }}"
                                                    alt=""> </div>
                                        </div>
                                        <div class="col-xl-6">
                                            <div class="blog-details__content-three-img"> <img src="{{ $page->images[1] }}"
                                                    alt=""> </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-5">
                    <div class="sticky-wrapper">
                        <div id="stickySidebar" class="sidebar">
                            <div class="sidebar__single sidebar__post">
                                <div class="sidebar__title-box">
                                    <h3 class="sidebar__title">Recent Post</h3>
                                </div>
                                <ul class="sidebar__post-list list-unstyled">
                                    @foreach ($recentBlogs as $post)
                                        <li>
                                            <div class="sidebar__post-image"> <img src="{{ $post->image }}" alt="">
                                            </div>
                                            <div class="sidebar__post-content">
                                                <p class="sidebar__post-date"><span
                                                        class="icon-calendar"></span>{{ getFormatted(date: $post->date, format: 'd M, Y') }}
                                                </p>
                                                <h3 class="sidebar__post-title"><a
                                                        href={{ route('blog.single', $post->slug) }}>{{ $post->title }}</a>
                                                </h3>
                                            </div>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                            <div class="sidebar__single sidebar__gallery">
                                <div class="sidebar__title-box">
                                    <h3 class="sidebar__title">Social Media</h3>
                                </div>
                                {{-- <div class="fb-page" data-href="{{ setting('facebook') }}" data-tabs="timeline"
                                    data-width="" data-height="400" data-small-header="true"
                                    data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false">
                                    <blockquote cite="{{ setting('facebook') }}" class="fb-xfbml-parse-ignore"><a
                                            href="{{ setting('facebook') }}">Rohini International Education Services</a>
                                    </blockquote>
                                </div> --}}
                                <div class="fb-page"
                            data-href="{{ setting('facebook') }}"
                            data-tabs="timeline"
                            data-width="323"
                            data-height="430"
                            data-small-header="false"
                            data-adapt-container-width="true"
                            data-hide-cover="false"
                            data-show-facepile="false">
                        </div>
                            </div>
                            <div class="sidebar__single sidebar__support">
                                <div class="sidebar__support-bg"
                                    style="background-image: url('{{ asset('rohini/assets/images/backgrounds/sidebar-support-bg.jpg') }}');">
                                </div>
                                <div class="sidebar__support-icon"> <span class="icon-icon-call"></span> </div>
                                <h3 class="sidebar__support-title">Get quality <br>
                                    consultancy <br>
                                    services</h3>
                                <div class="sidebar__support-btn-box"> <a href="{{ route('page.load', 'contact') }}"
                                        class="sidebar__support-btn thm-btn"><span class="icon-right-arrow"></span> Direct
                                        Contact</a> </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--Blog Details End-->
       @include('client.rohini.pages.partials.newsletter')
@endsection

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const sidebar = document.getElementById('stickySidebar');
        if (!sidebar) return;

        const wrapper = sidebar.parentElement;
        const footer = document.querySelector('footer'); // Update if you use a different footer selector
        const topOffset = 20;

        let wrapperTop = wrapper.getBoundingClientRect().top + window.scrollY;
        let wrapperWidth = wrapper.offsetWidth;

        function refreshMeasurements() {
            wrapperTop = wrapper.getBoundingClientRect().top + window.scrollY;
            wrapperWidth = wrapper.offsetWidth;
        }

        function onScroll() {
            const scrollY = window.scrollY;
            const footerTop = footer.getBoundingClientRect().top + window.scrollY;
            const sidebarHeight = sidebar.offsetHeight;

            if (scrollY + topOffset >= wrapperTop && scrollY + topOffset + sidebarHeight < footerTop) {
                sidebar.classList.add('is-fixed');
                sidebar.classList.remove('is-bottom');
                sidebar.style.width = wrapperWidth + 'px';
            } else if (scrollY + topOffset + sidebarHeight >= footerTop) {
                sidebar.classList.remove('is-fixed');
                sidebar.classList.add('is-bottom');
                sidebar.style.width = wrapperWidth + 'px';
            } else {
                sidebar.classList.remove('is-fixed', 'is-bottom');
                sidebar.style.width = '100%';
            }
        }

        window.addEventListener('scroll', onScroll);
        window.addEventListener('resize', refreshMeasurements);

        refreshMeasurements();
        onScroll();
    });
</script>