@php
$companyNav = [
    [
        'label' => 'Home',
        'path' => route('home'),
    ],
    [
        'label' => 'About Us',
        'path' => url('about-us'),
    ],
    [
        'label' => 'Websites',
        'path' => url('websites'),
    ],
    [
        'label' => 'Blog',
        'path' => url('blog'),
    ],
    [
        'label' => 'Contact Us',
        'path' => url('contact'),
    ],
];

$socialData = [
    [
        'name' => 'Facebook',
        'image' => config('icons.facebook'),
        'url' => $siteInfo->facebook,
        'title' => 'Facebook',
    ],
    [
        'name' => 'Google',
        'image' => config('icons.google'),
        'url' => $siteInfo->google_plus,
        'title' => 'Google',
    ],
    [
        'name' => 'Linkedin',
        'image' => config('icons.linkedin'),
        'url' => $siteInfo->linkedin,
        'title' => 'LinkedIn',
    ],
    [
        'name' => 'Twitter',
        'image' => config('icons.twitter'),
        'url' => $siteInfo->twitter,
        'title' => 'Twitter',
    ],
    [
        'name' => 'Youtube',
        'image' => config('icons.youtube'),
        'url' => $siteInfo->youtube,
        'title' => 'Youtube',
    ],
    [
        'name' => 'Instagram',
        'image' => config('icons.instagram'),
        'url' => $siteInfo->instagram,
        'title' => 'Instagram',
    ],
];

@endphp


<footer class="bg-[#141820] text-[#a6a8ab] footer">
    <div class="sectionGap">
        <div class="container">
            <div class="grid grid-cols-2 lg:grid-cols-12 items-start gap-y-8">
                {{-- Logo and About Section --}}
                <div class="col-span-2 lg:col-span-3 grid gap-6 items-start pr-8">
                    <a href="{{route('home')}}">
                        <img src="{{asset($siteInfo->footer_logo)}}" alt="Logo" class="h-8">
                    </a>
                    <p class="text-xl font-bold [&_span]:text-secondary text-white">
                        {!! $siteInfo->about_us !!}</p>

                    <div class="flex flex-col items-start gap-2.5">
                        <h4>We accepts</h4>
                        <img src="{{ asset('images/we-accpect.png') }}" draggable="false" class="h-5 sm:h-7 w-auto"
                            alt="paypal.png">
                    </div>
                </div>

                {{-- Services Menu --}}
                <div class="lg:col-span-3 grid gap-6 items-start">
                    <h4 class="footerNavTitle">
                        Services
                    </h4>
                    <ul class="space-y-2 list-disc ml-4">
                        @if(!empty($headerServiceList))
                        @foreach ($headerServiceList as $service)
                        <li>
                            <a href="{{ url('service', $service->page_url) }}" class="footerNavLink">
                                <span>{{ $service->serviceCategory->name }}</span>
                            </a>
                        </li>
                        @endforeach
                        @endif
                    </ul>
                </div>

                {{-- Need Help Menu --}}
                <div class="col-span-2 lg:col-span-3 grid gap-6 items-start">
                    <h4 class="footerNavTitle">
                        Need Help?
                    </h4>
                    <ul class="space-y-4">
                        <li class="flex flex-col">
                            <span class="text-sm tracking-widest uppercase">
                                Call Us Directly
                            </span>
                            <a href="tel:{{ $siteInfo->mobile }}" class="text-white">
                                {{ $siteInfo->mobile }}
                            </a>
                        </li>

                        <li class="flex flex-col">
                            <span class="text-sm tracking-widest uppercase">
                                Need Support?
                            </span>
                            <a href="mailto:{{ $siteInfo->email }}" class="text-white">
                                {{ $siteInfo->email }}
                            </a>
                        </li>

                        <li class="flex flex-col">
                            <span class="text-sm tracking-widest uppercase">
                                Visit Us
                            </span>
                            <div class="text-white my-1">
                                <strong class="font-bold">BD Address:</strong> {{ (!empty($siteInfo->location) ? $siteInfo->location : 'N/A') }}
                            </div>
                            <div class="text-white">
                                <strong class="font-bold">UK Address:</strong> {{ (!empty($siteInfo->us_location) ? $siteInfo->us_location : 'N/A') }}
                            </div>
                        </li>
                    </ul>
                </div>

                {{-- Newsletter Section with Social Buttons --}}
                <div class="col-span-2 lg:col-span-3 grid gap-6 items-start">
                    <h4 class="footerNavTitle">
                        Newsletter
                    </h4>
                    <div class="flex flex-col gap-4">
                        <p class="text-sm text-[#a6a8ab]">
                            Stay up-to-date with our latest news and offers.
                        </p>
                        <form id="newsletter-footer" class="flex flex-col gap-2">
                            @csrf
                            <input type="email" name="email" required
                                class="email text-gray-800 outline-none border-none text-sm placeholder-gray-500 rounded-lg w-full p-2.5 focus:ring-0"
                                placeholder="Your Email Address" />

                            <button aria-label="Subscribe to newsletter" type="submit"
                                class="flex items-center justify-center w-full bg-blue-600 text-white group hover:bg-blue-700 rounded-lg p-2.5 font-medium">
                                Subscribe
                            </button>
                        </form>
                    </div>
                    
                    {{-- Social Buttons are now here --}}
                    <div>
                        <h5 class="text-sm uppercase tracking-widest text-[#a6a8ab] font-bold mb-2">Connect with us</h5>
                        <div class="flex items-center gap-3">
                            @foreach ($socialData as $row)
                                @if (!empty($row['url']))
                                <a href="{{ $row['url'] }}" target="_blank" title="{{ $row['title'] }}"
                                    class="duration-300 hover:text-white hover:scale-[1.2]">
                                    {!! $row['image'] !!}
                                </a>
                                @endif
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="border-t border-gray-700 border-dashed py-6 relative">
        <div class="container">
            <div
                class="flex items-center text-sm sm:text-base gap-y-2.5 font-normal flex-col lg:flex-row lg:justify-between">
                <p class="text-center lg:text-left">
                    {{$siteInfo->copyright ? $siteInfo->copyright : 'All right reserved by' . $siteInfo->site_name}}
                </p>
                <div class="flex items-center flex-wrap justify-center gap-x-3 gap-y-1.5">
                    <a href="{{ url('privacy-policy') }}" class="hover:text-white duration-300">Privacy Policy</a>
                    <span class="size-1 rounded-full bg-[#a6a8ab] shrink-0"></span>
                    <a href="{{ url('terms-of-service') }}" class="hover:text-white duration-300">Terms & Conditions</a>
                    <span class="size-1 rounded-full bg-[#a6a8ab] shrink-0"></span>
                    <a href="{{ url('refund-policy') }}" class="hover:text-white duration-300">Refund Policy</a>
                    <span class="size-1 rounded-full bg-[#a6a8ab] shrink-0"></span>
                    <a href="{{ url('dmca') }}" class="hover:text-white duration-300">DMCA</a>
                </div>
            </div>
        </div>
    </div>
</footer>

<div id="newsletter-popup" style="display:none;" class="fixed inset-0 bg-gray-900 bg-opacity-75 flex items-center justify-center p-4 z-50">
    <div class="bg-white rounded-lg p-6 shadow-xl max-w-sm w-full text-center">
        <h3 class="text-xl font-bold text-gray-800 mb-4">Thank you for subscribing!</h3>
        <p class="text-gray-600 mb-6">You have successfully subscribed to our newsletter.</p>
        <button id="close-popup" class="bg-blue-600 text-white font-medium py-2 px-4 rounded-lg hover:bg-blue-700">Close</button>
    </div>
</div>

<script>
    document.getElementById('newsletter-footer').addEventListener('submit', function(event) {
        event.preventDefault(); // Prevents the default form submission

        var form = this;
        var formData = new FormData(form);

        // You will need to replace '/your-subscribe-route' with the actual route that handles your newsletter subscriptions.
        fetch('/your-subscribe-route', {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest', // Important for Laravel's CSRF protection
            }
        })
        .then(response => response.json())
        .then(data => {
            // Assuming your backend returns a success message
            if (data.success) {
                document.getElementById('newsletter-popup').style.display = 'flex';
                form.reset(); // Clear the form input
            } else {
                // Handle any error messages from the server here
                alert('An error occurred. Please try again.');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred. Please try again.');
        });
    });

    document.getElementById('close-popup').addEventListener('click', function() {
        document.getElementById('newsletter-popup').style.display = 'none';
    });
</script>