@php
    $footerContent = getContent('footer.content', true);
    $socialIcons = getContent('social_icon.element', orderById: true);
    $policyPages = getContent('policy_pages.element', false, orderById: true);
    $contactElement = getContent('contact_us.element', false, null, true);
@endphp
<footer class="footer">
    <div class="container custom--container">
        <div class="footer-main py-60">
            <div class="footer-sidebar">
                <a class="footer-logo" href="{{ route('home') }}">
                    <img src="{{ siteLogo() }}" alt="">
                </a>
                <p class="footer-desc">
                    {{ __($footerContent?->data_values?->description ?? '') }}
                </p>
                <div class="footer-item">
                    <h6 class="footer-item__title">@lang('Newsletter')</h6>
                    <form class="footer-subscribe" method="POST">
                        @csrf
                        <div class="input-group input--group">
                            <input class="form-control form--control" name="email" type="text" placeholder="@lang('Enter Email Address')">
                            <button class="btn btn--icon btn--base" type="submit">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                     stroke-linejoin="round" class="lucide lucide-send-icon lucide-send">
                                    <path
                                          d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z" />
                                    <path d="m21.854 2.147-10.94 10.939" />
                                </svg>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="footer-content">
                <div class="row gy-4 ">
                    <div class="col-xsm-4 col-sm-4 col-md-2">
                        <div class="footer-item">
                            <h6 class="footer-item__title">@lang('Site Links')</h6>
                            <ul class="footer-menu">
                                <li class="footer-menu__item">
                                    <a class="footer-menu__link" href="{{ route('home') }}">
                                        @lang('Home')
                                    </a>
                                </li>
                                <li class="footer-menu__item">
                                    <a class="footer-menu__link" href="{{ route('pricing') }}">
                                        @lang('Pricing')
                                    </a>
                                </li>
                                <li class="footer-menu__item">
                                    <a class="footer-menu__link" href="{{ route('blog') }}">
                                        @lang('Blogs')
                                    </a>
                                </li>
                                <li class="footer-menu__item">
                                    <a class="footer-menu__link" href="{{ route('contact') }}">
                                        @lang('Contact')
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-xsm-4 col-sm-4 col-md-3">
                        <div class="footer-item w-xsm-fit-content mx-auto">
                            <h6 class="footer-item__title">@lang('Useful Links')</h6>
                            <ul class="footer-menu">
                                <li class="footer-menu__item">
                                    <a class="footer-menu__link" href="{{ route('home') }}#gen-form">
                                        @lang('Builder')
                                    </a>
                                </li>
                                <li class="footer-menu__item">
                                    <a class="footer-menu__link" href="{{ route('home') }}#gen-form">
                                        @lang('Start Generating')
                                    </a>
                                </li>
                                <li class="footer-menu__item">
                                    <a class="footer-menu__link" href="{{ route('user.login') }}">
                                        @lang('Sign in')
                                    </a>
                                </li>
                                <li class="footer-menu__item">
                                    <a class="footer-menu__link" href="{{ route('user.register') }}">
                                        @lang('Sign up')
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-xsm-4 col-sm-4 col-md-3">
                        <div class="footer-item">
                            <h6 class="footer-item__title">@lang('Policy Links')</h6>
                            <ul class="footer-menu">
                                @foreach ($policyPages as $policy)
                                    <li class="footer-menu__item">
                                        <a class="footer-menu__link" href="{{ route('policy.pages', $policy->slug) }}">{{ __($policy->data_values?->title ?? '') }}</a>
                                    </li>
                                @endforeach
                                <li class="footer-menu__item">
                                    <a class="footer-menu__link" href="{{ route('cookie.policy') }}">@lang('Cookie Policy')</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="footer-item mb-4">
                            <h6 class="footer-item__title">@lang('Contact Us')</h6>
                            <ul class="footer-contact-menu">
                                @foreach ($contactElement as $contact)
                                    <li class="footer-contact-menu__item">
                                        @php
                                            echo $contact?->data_values?->icon ?? '';
                                        @endphp
                                        <p class="text">{{ __($contact?->data_values?->contact_info) }}</p>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="footer-item">
                            <h6 class="footer-item__title">@lang('Follow US')</h6>
                            <ul class="social-list">
                                @foreach ($socialIcons as $social)
                                    <li class="social-list__item">
                                        <a href="{{ $social?->data_values?->url ?? '' }}" class="social-list__link" target="_blank">
                                            @php
                                                echo $social?->data_values?->social_icon ?? '';
                                            @endphp
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <p class="footer-copyright">
                @lang('Copyright') &copy; <a href="{{ route('home') }}" class="text--gradient">{{ __(gs('site_name')) }}</a> {{ date('Y') }} @lang('All Right Reserved.')
            </p>
        </div>
    </div>
</footer>

@push('script')
    <script>
        (function($) {
            "use strict";
            $('.footer-subscribe').on('submit', function(e) {
                e.preventDefault();
                var data = $('.footer-subscribe').serialize();
                $.ajax({
                    type: "POST",
                    url: "{{ route('subscribe') }}",
                    data: data,
                    success: function(response) {
                        if (response.status == 'success') {
                            notify('success', response.message);
                            $('#email').val('');
                        } else {
                            notify('error', response.message);
                        }
                    }
                });
            });
        })(jQuery);
    </script>
@endpush
