@php
$footers = App\Models\Footer::first();
$pages = App\Models\Page::whereNotIn('id', [4, 5, 6, 7, 8])->get();
$pagesLinks = App\Models\FooterSection::get();
@endphp

<!-- ===small-device-footer=== -->
<section
    class="xs:hidden w-full fixed bottom-0 left-0 flex items-center justify-center z-10 bg-white"
    style="box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.3);">
    <div
        class="small_container flex items-center justify-between bg-white pt-2.5 pb-3 max-w-[400px] w-full  rounded-t-lg">
        <!-- =left= -->
        <div class="w-1/2 flex items-center gap-[20%]">
            <a href="{{ route('index')}}"
                class="flex flex-col items-center justify-center text-black gap-0 hover:text-red-color duration-300">
                <i class="ri-home-6-line text-2xl"></i>
                <p class="text-[12px] font-semibold -mt-1">{{ translate('Home') }}</p>
            </a>
            <a href="{{ route('contact')}}"
                class="flex flex-col items-center justify-center text-black gap-0 hover:text-red-color duration-300">
                <i class="ri-phone-line text-2xl"></i>
                <p
                    class="text-[12px] font-semibold -mt-1">{{ translate('Contact') }}</p>
            </a>
            {{-- <button
                class="flex flex-col items-center justify-center text-black gap-0 hover:text-red-color duration-300">
                <i class="ri-search-2-line text-2xl"></i>
                <p
                    class="text-[12px] font-semibold -mt-1">Search</p>
            </button> --}}
        </div>
        <!-- =right= -->
        <div
            class="w-1/2 flex items-center gap-[20%] justify-end">
            <a href="{{ auth()->check() ? route('my-match') : route('login') }}"
                class="flex flex-col items-center justify-center text-black gap-0 hover:text-red-color duration-300">
                <i class="ri-account-circle-line text-2xl"></i>
                <p class="text-[12px] font-semibold -mt-1">{{ translate('My Account') }}</p>
            </a>
            <a href="{{ route('blog')}}"
                class="flex flex-col items-center justify-center text-black gap-0 hover:text-red-color duration-300">
                <i class="ri-message-3-line text-2xl"></i>
                <p class="text-[12px] font-semibold -mt-1">{{ translate('Blog') }}</p>
            </a>
        </div>
        <!-- =add-button= -->
        <button
            class="w-[56px] h-[56px] rounded-full bg-blue-color absolute left-1/2 text-white -translate-x-1/2 -top-4 flex items-center justify-center duration-300 hover:bg-red-color"
            style="box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.3);">
            <svg width="20" height="20" viewBox="0 0 20 20"
                fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M19.4922 10C19.4922 10.5477 19.0482 10.9917 18.5005 10.9917L1.50052 10.9917C0.952837 10.9917 0.508854 10.5477 0.508854 10C0.508854 9.45235 0.952837 9.00837 1.50052 9.00837L18.5005 9.00837C19.0482 9.00837 19.4922 9.45235 19.4922 10Z"
                    fill="white" />
                <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M10.0005 0.508301C10.5482 0.508301 10.9922 0.952285 10.9922 1.49997L10.9922 18.5C10.9922 19.0477 10.5482 19.4916 10.0005 19.4916C9.45284 19.4916 9.00885 19.0477 9.00885 18.5L9.00885 1.49997C9.00885 0.952285 9.45284 0.508301 10.0005 0.508301Z"
                    fill="white" />
            </svg>
        </button>
    </div>
</section>

<!-- ====footer-section==== -->
<footer class="bg-black w-full py-[50px] xl:py-[70px]  xs:block">
    <div class="small_container">
        <!-- =all-content= -->
        <div
            class="flex items-start justify-between flex-col gap-5 md:gap-0 md:flex-row">
            <!-- =left= -->
            <div class="w-full md:w-1/2">
                <a href="{{ url('/')}}">
                    <picture><img src="{{ asset('admin/logoImages/' . $footers->logo) }}" alt="logo"
                            class="max-w-[190px]"></picture>
                </a>
                <p
                    class="pt-9 text-base font-normal text-white max-w-[370px] tracking-wide">
                    {{ $footers->description }}
                    </p>
            </div>
            <!-- =right= -->
            <div
                class="flex items-start gap-[15%] md:justify-between w-full md:w-1/2">

                @foreach ($pagesLinks as $pg)
                    <div class="flex flex-col">
                        <h6 class="text-white text-[20px] font-medium leading-[28px] mb-1">
                            {{ $pg->section_name }}
                        </h6>
                        @foreach($pg->pages() as $linkpage)

                            @if ($linkpage->id == 4 || $linkpage->id == 5 || $linkpage->id == 6 || $linkpage->id == 7 || $linkpage->id == 8)
                                <a href="{{ url($linkpage->slug) }}"
                                    class="text-white text-base font-light opacity-80 leading-[30px] duration-300 hover:text-red-color">
                                    {{ $linkpage->title }}
                                </a>
                                @else
                                <a href="{{ url('page/' . $linkpage->slug) }}"
                                class="text-white text-base font-light opacity-80 leading-[30px] duration-300 hover:text-red-color">
                                    {{ $linkpage->title }}
                                </a>
                            @endif
                        @endforeach
                    </div>
                @endforeach


                <!-- =item= -->
                {{-- <div class="flex flex-col">
                    <h6
                        class="text-white text-[20px] font-medium leading-[28px] mb-1">
                        {{ $footers->links }}
                    </h6>
                    <a href="{{ route('index')}}"
                        class="text-white text-base font-light opacity-80 leading-[30px] duration-300 hover:text-red-color">Home</a>
                    <a href="#"
                        class="text-white text-base font-light opacity-80 leading-[30px] duration-300 hover:text-red-color">About
                        Us</a>
                    <a href="{{ route('contact')}}"
                    class="text-white text-base font-light opacity-80 leading-[30px] duration-300 hover:text-red-color">Contact
                    Us</a>
                    <a href="{{ route('how-work')}}"
                        class="text-white text-base font-light opacity-80 leading-[30px] duration-300 hover:text-red-color">How
                        it works</a>
                    <a href="{{ route('blog')}}"
                        class="text-white text-base font-light opacity-80 leading-[30px] duration-300 hover:text-red-color">Blog</a>
                </div> --}}
                <!-- =item= -->
                {{-- <div class="flex flex-col">
                    <h6
                        class="text-white text-[20px] font-medium leading-[28px] mb-1">
                        {{ $footers->search }}
                    </h6>

                    @foreach ($pages as $page)
                    <a href="{{ url('page/' . $page->slug) }}"
                        class="text-white text-base font-light opacity-80 leading-[30px] duration-300 hover:text-red-color">{{$page->title}}</a>
                        @endforeach

                </div> --}}
            </div>
        </div>
        <!-- =copy-text= -->
        <div class="mt-[84px] text-center md:text-start">
            <span
                class="text-base leading-7 font-light text-white opacity-70">
                {{ $footers->content }}
            </span>
        </div>
    </div>
</footer>