@php
    $presentHeadings = 0;

    $presentHeadings += $FEATURES_HEADING ? 1 : 0;
    $presentHeadings += $SUPPORT_HEADING ? 1 : 0;
    $presentHeadings += $TRENDING_HEADING ? 1 : 0;

    $aboutUsCol = 9 - ($presentHeadings * 2);
@endphp

<footer class="bg-white pt-5 pb-4 mt-5">
    <div class="container text-md-left">
        <div class="row">

            @if($ABOUT_US)
            <!-- About Us Column -->
            <div class="col-md-{{$aboutUsCol}} col-lg-{{$aboutUsCol}} col-xl-{{$aboutUsCol}} mx-auto mb-4">
                <h5 class="fw-bold">About Us</h5>
                <p class="about-us-footer"> {{__t($ABOUT_US?? null)}} </p>

                <!-- Image Column -->
                <div class="col-lg-12 text-center text-md-start mb-3 mb-md-0 pe-4 mt-1">
                        @if(!isset($FOOTER_IS_AD) || $FOOTER_IS_AD == 0)
                            <img width="450px" height="100px" class="footer-img fluid-img" src="{{ Storage::url($FOOTER_IMAGE)}}" alt="{{__t($APP_TITLE?? false)}} Footer Logo">
                        @else
                            {!! $FOOTER_AD_SCRIPT !!}
                        @endif
                    </div>
            </div>
            @endif

            @if($FEATURES_HEADING)
            <!-- Features Column -->
            <div class="col-6 col-md-2 col-lg-2 col-xl-2 mx-auto mb-4 footer-list">
                <h5 class="fw-bold">{{__t($FEATURES_HEADING)}}</h5>
                {!! preg_replace_callback('/\{(.*?)\}/', function($matches) {
                    return '<i class="bi bi-' . $matches[1] . '"></i>';
                }, __t($FEATURES_CONTENT)) !!}
            </div>
            @endif

            @if($SUPPORT_HEADING)
            <!-- Support Column -->
            <div class="col-6 col-md-2 col-lg-2 col-xl-2 mx-auto mb-4 footer-list">
                <h5 class="fw-bold">{{__t($SUPPORT_HEADING)}}</h5>
                {!! preg_replace_callback('/\{(.*?)\}/', function($matches) {
                    return '<i class="bi bi-' . $matches[1] . '"></i>';
                }, __t($SUPPORT_CONTENT)) !!}
            </div>
            @endif

            @if($TRENDING_HEADING)
            <!-- Trending Column -->
            <div class="col-6 col-md-2 col-lg-2 col-xl-2 mx-auto mb-4 footer-list">
                <h5 class="fw-bold">{{__t($TRENDING_HEADING)}}</h5>
                {!! preg_replace_callback('/\{(.*?)\}/', function($matches) {
                    return '<i class="bi bi-' . $matches[1] . '"></i>';
                }, __t($TRENDING_CONTENT)) !!}
            </div>
            @endif

            @if(isset($SOCIAL_LINKS) && $SOCIAL_LINKS)
            <!-- Follow Us Column -->
            <div class="col-6 col-md-3 col-lg-3 col-xl-3 mx-auto mb-4 footer-list">
                <h5 class="fw-bold">Follow Us</h5>
                <ul class="list-unstyled">
                    @foreach(json_decode(json_decode($SOCIAL_LINKS, true)) as $social_media => $link)
                    <li class="mb-2">
                        <a href="{{$link?? '#'}}" target="_blank">
                            <i class="bi bi-{{strtolower($social_media)}} gradient-icon icon-size-13-rem"></i> {{ucwords($social_media)}}
                        </a>
                    </li>
                    @endforeach
                </ul>
            </div>
            @endif
            
            <!-- START Unified Contact Info and Promotion Section -->
            <div class="col-12 col-md-12 col-lg-12">
                @if( (isset($CONTACT_EMAIL) || isset($CONTACT_PHONE) || isset($CONTACT_ADDRESS)) )
                <!-- Add Horizontal Rule (hr) -->
                <div class="row">
                    <hr class="hr-footer">
                </div>
                <!-- Contact Info Section -->
                <div class="col-12 contact-section">
                    <div class="d-flex flex-column flex-lg-row align-items-center justify-content-between flex-wrap">
                        <!-- Heading -->
                        <div class="d-flex align-items-center mb-3 mb-lg-0 contact-item mx-md-3 px-2">
                            <h5 class="fw-bold mt-4">Contact Us</h5>
                        </div>
                        <div class="d-flex flex-column flex-md-row align-items-center justify-content-center flex-wrap">
                            @if(isset($CONTACT_EMAIL) && $CONTACT_EMAIL)
                            <!-- Email -->
                            <div class="d-flex align-items-center mb-3 mb-md-0 contact-item mx-md-3 px-2">
                                <div class="icon-container p2">
                                    <i class="gradient-icon bi bi-envelope-fill social-icon"></i>
                                </div>
                                <p class="mb-0 ms-2">
                                    <a href="mailto:{{$CONTACT_EMAIL}}" class="no-decoration contact-email">{{$CONTACT_EMAIL?? false}}</a>
                                </p>
                            </div>
                            @endif
            
                            @if(isset($CONTACT_PHONE) && $CONTACT_PHONE)
                            <!-- Phone -->
                            <div class="d-flex align-items-center mb-3 mb-md-0 contact-item mx-md-3 px-2">
                                <div class="icon-container p2">
                                    <i class="gradient-icon bi bi-telephone-fill social-icon"></i>
                                </div>
                                <p class="mb-0 ms-2">
                                    <a href="tel:{{str_replace(' ','',$CONTACT_PHONE)}}" class="no-decoration">{{$CONTACT_PHONE?? false}}</a>
                                </p>
                            </div>
                            @endif
            
                            @if(isset($CONTACT_ADDRESS) && $CONTACT_ADDRESS)
                            <!-- Address -->
                            <div class="d-flex align-items-center mb-3 mb-md-0 contact-item mx-md-3 px-2">
                                <div class="icon-container p-2">
                                    <i class="gradient-icon bi bi-geo-alt-fill social-icon"></i>
                                </div>
                                <p class="mb-0 ms-2">
                                    <a class="no-decoration" target="_blank" href="https://www.google.com/maps/search/?api=1&query={{ urlencode($CONTACT_ADDRESS) }}" target="_blank">
                                        {{__t($CONTACT_ADDRESS?? false)}}
                                    </a>
                                </p>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
                @endif
            </div>
            <!-- END Unified Contact Info and Promotion Section -->

        </div>
        
        <div class="col-12">
            
            @if(isset($DONATION_SECTION_SHOW) && $DONATION_SECTION_SHOW !== 0)
                <div class="row">
                    <hr class="hr-footer">
                </div>
                <!-- Suggestion Section -->
                <div class="row mt-2 mb-2">
                    <!-- Text -->
                    @if(isset($DONATION_SECTION_TEXT) && $DONATION_SECTION_TEXT)
                    <h5 class="mb-2 text-center footer-sugg-text">{{__t($DONATION_SECTION_TEXT)}}</h5>
                    @endif
                    <!-- Button -->
                    @if(isset($DONATION_BTN_TEXT) && !empty($DONATION_BTN_TEXT))
                    <a href="{{$DONATION_BTN_LINK?? '#'}}" class="bs-btn bg-primary-plain donate-btn mx-auto mt-2 text-white">{{__t($DONATION_BTN_TEXT)}}</a>
                    @endif
                </div>
            @endif
            <div class="row">
                <hr class="hr-footer">
            </div>
        </div>
        
        
        
        <!-- Copyright -->
        <div class="col text-center">
            <p class="mt-0 mb-0 copyright-text">{{ __t($COPYRIGHTS?? null) }}</p>
        </div>

        <div id="consent-banner" class="mt-5">
            <span>This website uses cookies (including visited pages to show related tools) for a better experience.
                <a href="/privacy-policy" class="learn-more">Learn more</a>
            </span>
            <button onclick="acceptConsent()">Got it!</button>
        </div>

    </div>
</footer>


<!-- start back-to-top -->
<div id="back-to-top">
    <i class="bi bi-arrow-up" title="Go top"></i>
</div>
<!-- end back-to-top -->

<!-- Template JS Files -->
<script src="{{ asset('assets/js/jquery-3.7.1.min.js') }}"></script>
<script src="{{ asset('assets/js/jquery-ui.js') }}"></script>
<script src="{{ asset('assets/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ asset('assets/js/toastr.min.js') }}"></script>
<script src="{{ asset('assets/js/custom.js')}}"></script>
<script src="{{ asset('assets/js/main.js') }}"></script>
@yield('script')

<!-- Tracking Analytics -->
<script>

    document.getElementById('languageSwitcher').addEventListener('change', function() {
        window.location.href = "/switch-language/" + this.value;
    });

    // Detect when the user closes all tabs
    window.addEventListener('beforeunload', () => {
        if (!navigator.sendBeacon) {
            document.cookie = "laravel_session=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
        }
    });


    // Capture page load time
    const startTime = performance.timing.navigationStart;
    const endTime = performance.timing.loadEventEnd;
    const pageLoadTime = (endTime - startTime) / 1000; // in seconds

    // Send tracking data to the server
    fetch('{{ route("tracking.store", ["item" => $item->id?? 1]) }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            page_load_time: pageLoadTime,
            referrer_url: document.referrer || null
        })
    });

</script>
</body>

</html>