@php
    $socials = App\Models\Social::first();
@endphp
<footer class="footer-wrapper footer-layout3">
    <div class="shape-mockup jump-reverse d-none d-xxxl-block" data-right="0" data-top="0"><img
            src="assets/img/shape/f-s-3-1.png" alt=""></div>
    <div class="shape-mockup jump d-none d-xxxl-block" data-left="0" data-top="-2%"><img src="assets/img/shape/f-s-3-2.png"
            alt=""></div>
    <div class="widget-area">
        <div class="container">
            <div class="row justify-content-between">
                <div class="col-lg-12 text-center  align-items-center justify-content-center pb-50">
                    <img src="{{ asset('frontend/assets/img/jandjfooter.png') }}" alt="logo" style="width:500px;">
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="widget widget_nav_menu  footer-widget">
                        <h3 class="widget_title">USEFUL LINKS</h3>
                        <div class="menu-all-pages-container footer-menu">
                            <ul class="menu">
                                <li><a href="{{route('about')}}">About Us</a></li>
                                <li><a href="{{route('blogs')}}">Blogs</a></li>
                                <li><a href="{{ route('register') }}">Register</a></li>
                                <li><a href="{{ route('login') }}">Login</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="widget widget_nav_menu  footer-widget">
                        <h3 class="widget_title">SUPPORT</h3>
                        <div class="menu-all-pages-container footer-menu">
                            <ul class="menu">
                                <li><a href="{{ route('cookie_policy') }}">Cookie Policy</a></li>
                                <li><a href="{{ route('disclaimer') }}">Disclaimer</a></li>
                                <li><a href="{{ route('privacy_policy') }}">Privacy Policy</a></li>
                                <li><a href="{{ route('return_policy') }}">Return & Refund Policy</a></li>
                                <li><a href="{{ route('terms') }}">Terms & Conditions</a></li>
                                <li><a href="{{ route('shipping_policy') }}">Shipping Policy</a></li>
                                <li><a href="{{ route('cancellation_policy') }}">Cancellation Policy</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="widget footer-widget">
                        <h3 class="widget_title">Get In Touch</h3>
                        <div>
                            <p class="footer-info6"><i class="fal fa-location"></i>
                                <span>{{ $socials->address ?? 'N/A' }}</span>
                            </p>
                            <p class="footer-info6"><i class="fas fa-mobile-alt"></i>
                                <span>
                                    <a href="tel:{{ $socials->phone ?? '' }}">+91 {{ $socials->phone ?? 'N/A' }}</a>
                                </span>
                            </p>
                            <p class="footer-info6"><i class="fas fa-envelope"></i>
                                <span>
                                    <a href="mailto:{{ $socials->email ?? '' }}">
                                        {{ $socials->email ?? 'N/A' }}
                                    </a>
                                </span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="widget footer-widget">
                        <div class="widget-about">
                            <h3 class="widget_title">Subscribe To Our Newsletter</h3>
                            <form action="{{ route('newsletter-store') }}" method="POST" class="email-input email-input_1">
                                @csrf
                                <input class="form-control" type="email" name="email"
                                    placeholder="enter email address ....." required>
                                <button type="submit">
                                    <svg width="30" height="24" viewBox="0 0 30 24" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                            d="M7.5 0C3.35787 0 0 3.35787 0 7.5V16.5C0 20.6421 3.35787 24 7.5 24H22.5C26.6421 24 30 20.6421 30 16.5V7.5C30 3.35787 26.6421 0 22.5 0H7.5ZM8.4371 6.32869C7.79021 5.81118 6.84627 5.91606 6.32876 6.56295C5.81124 7.20986 5.91612 8.15379 6.56301 8.67131L10.3148 11.6727C13.0541 13.864 16.9461 13.864 19.6852 11.6727L23.437 8.67131C24.084 8.15379 24.1888 7.20986 23.6713 6.56295C23.1538 5.91606 22.2099 5.81118 21.563 6.32869L17.8111 9.33015C16.1677 10.6449 13.8324 10.6449 12.189 9.33015L8.4371 6.32869Z"
                                            fill="white" />
                                    </svg>
                                </button>
                            </form>
                            <h3 class="widget_title pt-50">Follow Us</h3>
                            <div class="col-lg-auto">
                                <div class="vs-social">
                                    <a href="{{ $socials && $socials->facebook ? $socials->facebook : '#' }}"><i class="fab fa-facebook-f"></i></a>
                                    <a href="{{ $socials && $socials->instagram ? $socials->instagram : '#' }}"><i class="fab fa-instagram"></i></a>
                                    <a href="{{ $socials && $socials->linkedin ? $socials->linkedin : '#' }}"><i class="fab fa-linkedin-in"></i></a>
                                    <a href="{{ $socials && $socials->youtube ? $socials->youtube : '#' }}"><i class="fab fa-youtube"></i></a>
                                 </div>
                                    <br>
                                    {{-- @php
                                        // Query the unique visits count from the Visit model
                                        $visitorCount = \App\Models\Visit::count();
                                    @endphp
                                    <span
                                        style="display: inline-block; background-color: yellow; color: red; padding: 6px 20px; border-radius: 999px; font-weight: bold;">
                                        The Visitors : {{ $visitorCount }}
                                    </span> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="copyright-wrap">
                <div class="row  gy-3 justify-content-between align-items-center text-center">
                    <div class="col-lg-auto">
                        <p class="copyright-text text-black">
                            Copyright © {{ date('Y') }} Lansford All Rights Reserved | Website Design & Developed by SIRI Group
                        </p>
                    </div>
                </div>
            </div>
        </div>
</footer>
<a href="#" class="scrollToTop scroll-btn"><i class="far fa-arrow-up"></i></a>
<!--********************************
         Code End  Here
         ******************************** -->
<!--==============================
         All Js File
         ============================== -->
<!-- Jquery -->
<script>
    (function() {
        // Config
        const AUTOPLAY_DELAY = 5000; // ms
        const TRANSITION_DURATION = 900; // ms

        function isPluginSliderPresent() {
            // Common plugin classes — change if your site uses something else
            return !!document.querySelector('.vs-hero-carousel, .swiper-container, .owl-carousel, .rev_slider');
        }

        function setupArrows(prevSel, nextSel) {
            const prev = document.querySelector(prevSel);
            const next = document.querySelector(nextSel);
            // fallback click actions to plugin nav buttons if present
            if (prev) {
                prev.addEventListener('click', () => {
                    const done = tryPluginPrev();
                    if (!done) simpleSlidePrev();
                });
            }
            if (next) {
                next.addEventListener('click', () => {
                    const done = tryPluginNext();
                    if (!done) simpleSlideNext();
                });
            }
        }

        function tryPluginPrev() {
            const internal = document.querySelector(
                '.ls-nav-prev, .swiper-button-prev, .owl-prev, .rev_prev, .slick-prev');
            if (internal) {
                internal.click();
                return true;
            }
            try { // try API: swiper instance or global revapi
                const sw = document.querySelector('.swiper-container, .swiper')?.swiper;
                if (sw) {
                    sw.slidePrev();
                    return true;
                }
                if (window.revapi && typeof window.revapi.revprev === 'function') {
                    window.revapi.revprev();
                    return true;
                }
            } catch (e) {}
            return false;
        }

        function tryPluginNext() {
            const internal = document.querySelector(
                '.ls-nav-next, .swiper-button-next, .owl-next, .rev_next, .slick-next');
            if (internal) {
                internal.click();
                return true;
            }
            try {
                const sw = document.querySelector('.swiper-container, .swiper')?.swiper;
                if (sw) {
                    sw.slideNext();
                    return true;
                }
                if (window.revapi && typeof window.revapi.revnext === 'function') {
                    window.revapi.revnext();
                    return true;
                }
            } catch (e) {}
            return false;
        }

        // ---- Simple fallback slider implementation (vanilla) ----
        let fallback = {
            elCarousel: null,
            slides: [],
            current: 0,
            timer: null,
            playing: true,
            init(carouselSelector) {
                const wrap = document.querySelector('.newslider-wrapper');
                const carousel = document.querySelector(carouselSelector);
                if (!carousel || !wrap) return false;
                this.elCarousel = carousel;
                this.slides = Array.from(carousel.children);
                // apply inline styles for smooth transition
                carousel.style.transition = `transform ${TRANSITION_DURATION}ms ease`;
                carousel.style.willChange = 'transform';
                // set width style for slides if not present
                this.slides.forEach(s => s.style.minWidth = '100%');
                this.goTo(0);
                this.startAutoplay();
                // pause on hover
                wrap.addEventListener('mouseenter', () => {
                    this.pause();
                });
                wrap.addEventListener('mouseleave', () => {
                    this.play();
                });
                return true;
            },
            goTo(index) {
                if (!this.elCarousel) return;
                const count = this.slides.length;
                this.current = ((index % count) + count) % count;
                const x = -(this.current * 100);
                this.elCarousel.style.transform = `translateX(${x}%)`;
            },
            next() {
                this.goTo(this.current + 1);
            },
            prev() {
                this.goTo(this.current - 1);
            },
            startAutoplay() {
                this.stopAutoplay();
                this.timer = setInterval(() => {
                    this.next();
                }, AUTOPLAY_DELAY);
                this.playing = true;
            },
            stopAutoplay() {
                if (this.timer) {
                    clearInterval(this.timer);
                    this.timer = null;
                }
                this.playing = false;
            },
            pause() {
                this.stopAutoplay();
            },
            play() {
                if (!this.playing) this.startAutoplay();
            }
        };

        // helpers to call fallback prev/next from outside
        function simpleSlidePrev() {
            if (fallback.elCarousel) fallback.prev();
        }

        function simpleSlideNext() {
            if (fallback.elCarousel) fallback.next();
        }

        // On DOM ready:
        document.addEventListener('DOMContentLoaded', function() {
            // If original plugin slider exists, favor that. But still wire arrows.
            if (isPluginSliderPresent()) {
                // 1) Set data attributes on original slider(s) if present (best-effort)
                const s = document.querySelector('.vs-hero-carousel');
                if (s) {
                    s.setAttribute('data-autoplay', 'true');
                    s.setAttribute('data-autoplaydelay', String(AUTOPLAY_DELAY));
                    s.setAttribute('data-transitionduration', String(TRANSITION_DURATION));
                }
                // Attach arrows (newslider-prev/newslider-next) to call plugin internal navs
                setupArrows('.newslider-prev', '.newslider-next');
                // Also ensure nav elements are on top
                document.querySelectorAll('.newslider-prev, .newslider-next').forEach(a => {
                    a.style.zIndex = '99999';
                    a.style.pointerEvents = 'auto';
                });
                return;
            }

            // If no plugin slider present and newslider-carousel exists -> init fallback
            const exists = document.querySelector('.newslider-carousel');
            if (exists) {
                // Prepare wrapper and carousel to be flexible (fallback expects .newslider-wrapper and .newslider-carousel)
                // If the markup uses different names adjust accordingly.
                fallback.init('.newslider-carousel');

                // Attach newslider-nav buttons
                const prev = document.querySelector('.newslider-prev');
                const next = document.querySelector('.newslider-next');
                if (prev) prev.addEventListener('click', () => {
                    fallback.prev();
                    fallback.pause();
                    setTimeout(() => fallback.play(), AUTOPLAY_DELAY);
                });
                if (next) next.addEventListener('click', () => {
                    fallback.next();
                    fallback.pause();
                    setTimeout(() => fallback.play(), AUTOPLAY_DELAY);
                });

                // Ensure nav visible & clickable
                document.querySelectorAll('.newslider-prev, .newslider-next').forEach(a => {
                    a.style.zIndex = '99999';
                    a.style.pointerEvents = 'auto';
                });

                return;
            }

            // If neither plugin nor newslider-carousel found, try wiring arrows to any available navs
            setupArrows('.newslider-prev', '.newslider-next');
        });

        // Expose for debugging if needed
        window.__newsliderFallback = fallback;
    })();
</script>
<script src="{{ asset('frontend/assets/js/vendor/jquery-3.6.0.min.js') }}"></script>
<!-- Slick Slider -->
<script src="{{ asset('frontend/assets/js/slick.min.js') }}"></script>
<!-- <script src="{{ asset('frontend/assets/js/app.min.js') }}"></script> -->
<!-- Layerslider -->
<script src="{{ asset('frontend/assets/js/layerslider.utils.js') }}"></script>
<script src="{{ asset('frontend/assets/js/layerslider.transitions.js') }}"></script>
<script src="{{ asset('frontend/assets/js/layerslider.kreaturamedia.jquery.js') }}"></script>
<!-- jquery ui -->
<script src="{{ asset('frontend/assets/js/jquery-ui.min.js') }}"></script>
<!-- Bootstrap -->
<script src="{{ asset('frontend/assets/js/bootstrap.min.js') }}"></script>
<!-- Magnific Popup -->
<script src="{{ asset('frontend/assets/js/jquery.magnific-popup.min.js') }}"></script>
<!-- Isotope Filter -->
<script src="{{ asset('frontend/assets/js/imagesloaded.pkgd.min.js') }}"></script>
<script src="{{ asset('frontend/assets/js/isotope.pkgd.min.js') }}"></script>
<!-- Main Js File -->
<script src="{{ asset('frontend/assets/js/main.js') }}"></script>