<x-head />

@persist('header')
<x-header />
<x-mobile_nav />
@endpersist

<div wire:offline>

    <section class="our-error">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-xl-6 wow fadeInRight" data-wow-delay="300ms">
                    <div class="animate_content text-center text-xl-start">
                        <div class="animate_thumb">
                            <img class="w-100" src="{{ asset('images/icon/error-page-img.svg') }}" alt="error-page-img">
                        </div>
                    </div>
                </div>
                <div class="col-xl-5 offset-xl-1 wow fadeInLeft" data-wow-delay="300ms">
                    <div class="error_page_content text-center text-xl-start">
                        <div class="erro_code">Offline<span class="text-thm"></span></div>
                        <div class="h2 error_title">Oops! It looks like you have no internet connection.</div>
                        <p class="text fz15 mb20">The page you're looking for isn't available offline.</p>
                        <a href="#" class="ud-btn btn-thm">Try again<i class="fal fa-arrow-right-long"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

</div>

@yield('main')

@persist('footer')

<section class="footer-style1 at-home10 pt25 pb-0">

    <div class="container">
        <div class="row bb-white-light pb10 mb60">
            <div class="col-md-7">
                <div class="d-block text-center text-md-start justify-content-center justify-content-md-start d-md-flex align-items-center mb-3 mb-md-0">
                    <a class="fz17 fw500 text-white mr15-md mr30" href="{{ route('terms.condition')}}">Terms </a>
                    <a class="fz17 fw500 text-white mr15-md mr30" href="{{ route('privacy.policy')}}">Policy </a>
                    <a class="fz17 fw500 text-white" href="{{ route('contact') }}">Contact Us</a>
                </div>
            </div>
            <div class="col-md-5">
                <div class="social-widget text-center text-md-end">
                    <div class="social-style1">
                        <a class="text-white me-2 fw500 fz17" href="#">Follow us</a>
                        <a target="_blank" href="{{ env('APP_FACEBOOK') }}"><i class="fab fa-facebook-f list-inline-item"></i></a>
                        <a target="_blank" href="{{ env('APP_TWITTER') }}"><i class="fab fa-twitter list-inline-item"></i></a>
                        <a target="_blank" href="{{ env('APP_INSTAGRAM') }}"><i class="fab fa-instagram list-inline-item"></i></a>
                        <a target="_blank" href="{{ env('APP_LINKEDIN') }}"><i class="fab fa-linkedin-in list-inline-item"></i></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6 col-lg-3">
                <div class="link-style1 mb-4 mb-sm-5">
                    <h5 class="text-white mb15">About Us</h5>
                    <div class="link-list">
                        <a hidden href="#">Careers</a>
                        <a hidden href="#">Partnerships</a>
                        <a href="{{ route('contact') }}">Contact us</a>
                        <a href="{{route('privacy.policy')}}">Privacy Policy</a>
                        <a href="{{route('terms.condition')}}">Terms of Service</a>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-lg-3">
                <div class="link-style1 mb-4 mb-sm-5">
                    <h5 class="text-white mb15">Categories</h5>
                    @livewire('web.cat-footer')
                </div>
            </div>
            <div class="col-sm-6 col-lg-3">
                <div class="link-style1 mb-4 mb-sm-5">
                    <h5 class="text-white mb15">Support</h5>
                    <ul class="ps-0">
                        <li><a href="#">Help & Support</a></li>
                        <li><a href="#">Trust & Safety</a></li>
                        <li><a href="#">Selling on FixGini</a></li>
                        <li><a href="#">Buying on FixGini</a></li>
                        <li><a href="{{ route('delete.account.form') }}">Delete your account</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-sm-6 col-lg-3">
                <div class="footer-widget">
                    <div class="app-widget mb-4 mb-sm-5">
                        <h5 class="title text-white mb20">Apps</h5>
                        <div class="row mb-4 mb-lg-5">
                            <div class="col-lg-12">
                                <a class="app-list d-flex align-items-center mb10" href="#">
                                    <i class="fab fa-apple fz17 mr15"></i>
                                    <h6 class="app-title fz15 fw400 mb-0">iOS App</h6>
                                </a>
                                <a class="app-list d-flex align-items-center" href="#">
                                    <i class="fab fa-google-play fz15 mr15"></i>
                                    <h6 class="app-title fz15 fw400 mb-0">Android App</h6>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container white-bdrt1 py-4">
        <div class="row align-items-center">
            <div class="col-md-6">
                <div class="text-center text-lg-start">
                    <p class="copyright-text mb-2 mb-md-0 text-white-light ff-heading">© {{ env('APP_NAME') }}. {{ date("Y") }}. All rights reserved.</p>
                </div>
            </div>
            <div class="col-md-6">
                <div class="footer_bottom_right_btns text-center text-lg-end">
                    <a href="{{ route('contact') }}" class="copyright-text mb-2 mb-md-0 text-white-light ff-heading"><b>Contact Us</b></a>
                </div>
            </div>
        </div>
    </div> 
    
</section>

@endpersist

<script>
    navigator.geolocation.getCurrentPosition(function(position) {
        console.log(position.coords.latitude, position.coords.longitude);
    });    
</script>

<x-html />