211 lines
9.5 KiB
PHP
211 lines
9.5 KiB
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>Service Details</li>
|
||
</ul>
|
||
</div>
|
||
<h2>{{ $page->title }}</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="{{ $page->title }}"
|
||
style="width: 100%; height:100%; object-fit:cover; object-position:top;">
|
||
</div>
|
||
<br>
|
||
<div>{!! $page->description !!}</div>
|
||
</div>
|
||
|
||
@foreach ($page->children as $child)
|
||
<div>{!! $child->description !!}</div>
|
||
@endforeach
|
||
|
||
|
||
@if ($serviceFAQs && $serviceFAQs->faqs->count() > 0)
|
||
<div class="service-text-box faq">
|
||
<h2 class="heading">Frequently Asked Questions</h2>
|
||
<div class="accordion" id="accordionFAQ">
|
||
@foreach ($serviceFAQs->faqs as $index => $faq)
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header" id="headingFAQ{{ $index }}">
|
||
<button class="accordion-button {{ $index > 0 ? 'collapsed' : '' }}"
|
||
type="button" data-bs-toggle="collapse"
|
||
data-bs-target="#collapseFAQ{{ $index }}"
|
||
aria-expanded="{{ $index === 0 ? 'true' : 'false' }}"
|
||
aria-controls="collapseFAQ{{ $index }}">
|
||
<p class="numbering">{{ $loop->iteration }}</p>
|
||
{{ $faq->title }}
|
||
</button>
|
||
</h2>
|
||
<div id="collapseFAQ{{ $index }}"
|
||
class="accordion-collapse collapse {{ $index === 0 ? 'show' : '' }}"
|
||
aria-labelledby="headingFAQ{{ $index }}"
|
||
data-bs-parent="#accordionFAQ">
|
||
<div class="accordion-body">
|
||
{!! $faq->description !!}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
|
||
{{-- Sidebar --}}
|
||
<div class="col-xl-4 col-lg-5">
|
||
<div class="sticky-wrapper">
|
||
<div id="stickySidebar" class="sidebar">
|
||
{{-- Categories --}}
|
||
<div class="sidebar__single sidebar__category">
|
||
<div class="sidebar__title-box">
|
||
<h3 class="sidebar__title">Categories</h3>
|
||
</div>
|
||
<ul class="sidebar__category-list list-unstyled">
|
||
@foreach ($allServices as $service)
|
||
<li>
|
||
<a href="{{ route('service.single', $service->slug) }}">
|
||
{{ $service->title }} <span class="icon-right-arrow-1"></span>
|
||
</a>
|
||
</li>
|
||
@endforeach
|
||
</ul>
|
||
</div>
|
||
|
||
{{-- Facebook Page --}}
|
||
<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="323"
|
||
data-height="430"
|
||
data-small-header="false"
|
||
data-adapt-container-width="true"
|
||
data-hide-cover="false"
|
||
data-show-facepile="false">
|
||
</div>
|
||
</div>
|
||
|
||
{{-- Support Box --}}
|
||
<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');
|
||
const wrapper = sidebar.parentElement;
|
||
const footer = document.querySelector('footer'); // adjust selector if needed
|
||
const topOffset = 20; // px gap from top when fixed
|
||
|
||
if (!sidebar || !wrapper || !footer) return;
|
||
|
||
// capture wrapper’s initial top and width
|
||
let wrapperTop = wrapper.getBoundingClientRect().top + window.scrollY;
|
||
let wrapperWidth = wrapper.offsetWidth;
|
||
|
||
function refreshMeasurements() {
|
||
wrapperTop = wrapper.getBoundingClientRect().top + window.scrollY;
|
||
wrapperWidth = wrapper.offsetWidth;
|
||
}
|
||
window.addEventListener('resize', refreshMeasurements);
|
||
|
||
function onScroll() {
|
||
const scrollY = window.scrollY;
|
||
const footerTop = footer.getBoundingClientRect().top + window.scrollY;
|
||
const sidebarH = sidebar.offsetHeight;
|
||
|
||
// If we've scrolled past the wrapper and haven't hit the footer yet
|
||
if (scrollY + topOffset >= wrapperTop && scrollY + topOffset + sidebarH < footerTop) {
|
||
sidebar.classList.add('is-fixed');
|
||
sidebar.classList.remove('is-bottom');
|
||
sidebar.style.width = wrapperWidth + 'px';
|
||
}
|
||
// If we’d overlap the footer, “pin” it at the bottom of the wrapper
|
||
else if (scrollY + topOffset + sidebarH >= footerTop) {
|
||
sidebar.classList.remove('is-fixed');
|
||
sidebar.classList.add('is-bottom');
|
||
sidebar.style.width = wrapperWidth + 'px';
|
||
}
|
||
// Otherwise return to normal flow
|
||
else {
|
||
sidebar.classList.remove('is-fixed', 'is-bottom');
|
||
sidebar.style.width = '100%';
|
||
}
|
||
}
|
||
|
||
window.addEventListener('scroll', onScroll);
|
||
// initialize on load
|
||
refreshMeasurements();
|
||
onScroll();
|
||
});
|
||
</script>
|