@include('user.layout.logo-section')
@php

$parent_categories_part1 = \App\Models\ServiceCategory::whereNull('parent_id')->orderBy('priority','desc')->take(5)->get();
$parent_categories_part2 = \App\Models\ServiceCategory::whereNull('parent_id')->orderBy('priority','desc')->skip(5)->take(5)->get();
@endphp

    <!-- Footer -->
    <footer>
        <div class="flex gap-x-[150px] gap-y-10 container flex-col lg:flex-row pb-10">
            <div class="flex flex-col flex-1 gap-2">
                <h3 class="text-[14px] md:text-[16px] font-rokh font-bold text-[#04051C]">در کن یاب متخصص هر کاری رو بیاب!</h3>
                <p class="text-[#777575B2] font-medium text-[14px] md:text-[16px] leading-[32px] text-justify">کن یاب ایـن امـکان را به کـاربران خود می‌دهد تا هـر خـدمتی را که به آن نیاز دارند، از طریق وبسایت و اپلیکیشن به سهولت و در هـر سـاعتی از شبانه‌روز سـفارش دهند. نـیروهــای خــدماتی برای جلب اعتماد شما دارای گـواهی عــدم سـوء پـیشینه، بیمه، احراز هویت، مدارک فنی و سفته نزد کن یاب هستند و از فیلترهای تأیید صلاحیت ما عبور کرده‌اند.</p>
            </div>

            <div class="flex flex-col flex-1 gap-4">
                <div class="flex items-center gap-2">
                    <h3 class="text-[14px] md:text-[16px] font-rokh font-bold text-[#04051C]">دسترسی های سریع</h3>
                    <div class="flex-1 h-[2px] bg-[#00319C14]"></div>
                </div>
                <div class="flex flex-wrap gap-10 lg:flex-nowrap">
                    <div class="flex flex-col gap-4">
                        <a href="{{ route('user.home') }}" class="flex items-center gap-2">
                            <div class="w-[14px] h-[2px] bg-[#F5C181]"></div>
                            <span class="text-[14px] font-semibold text-[#777575AB]">خانه</span>
                        </a>
                        <a href="{{ route('user.all-services') }}" class="flex items-center gap-2">
                            <div class="w-[14px] h-[2px] bg-[#F5C181]"></div>
                            <span class="text-[14px] font-semibold text-[#777575AB]">خدمات</span>
                        </a>
                        <a href="{{ route('user.about') }}" class="flex items-center gap-2">
                            <div class="w-[14px] h-[2px] bg-[#F5C181]"></div>
                            <span class="text-[14px] font-semibold text-[#777575AB]">درباره ما</span>
                        </a>
                        <a href="{{ route('user.contact') }}" class="flex items-center gap-2">
                            <div class="w-[14px] h-[2px] bg-[#F5C181]"></div>
                            <span class="text-[14px] font-semibold text-[#777575AB]">تماس با ما</span>
                        </a>
                        <a href="#" class="flex items-center gap-2">
                            <div class="w-[14px] h-[2px] bg-[#F5C181]"></div>
                            <span class="text-[14px] font-semibold text-[#777575AB]">سوالات متداول</span>
                        </a>
                    </div>

                    <div class="flex flex-col gap-4">
                        @foreach($parent_categories_part1 as $category)
                            <a href="{{ route('user.services',['cityName'=>'tabriz','categorySlug'=>$category->slug]) }}" class="flex items-center gap-2">
                                <div class="w-[14px] h-[2px] bg-[#F5C181]"></div>
                                <span class="text-[14px] font-semibold text-[#777575AB]">{{ $category->title }}</span>
                            </a>
                        @endforeach
                    </div>

                    <div class="flex flex-col gap-4">
                        @foreach($parent_categories_part2 as $category)
                            <a href="{{ route('user.services',['cityName'=>'tabriz','categorySlug'=>$category->slug]) }}" class="flex items-center gap-2">
                                <div class="w-[14px] h-[2px] bg-[#F5C181]"></div>
                                <span class="text-[14px] font-semibold text-[#777575AB]">{{ $category->title }}</span>
                            </a>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="py-5 border-y-[2px] border-[#00319C14] flex items-center justify-between flex-wrap gap-5">
                <div class="flex flex-wrap items-center gap-3">
                    <a href="tel:04151041000" class="p-2 pl-4 rounded-[10px] border-[2px] border-[#19756740] flex items-center gap-4">
                        <div class="flex items-center justify-center w-[43px] h-[43px] rounded-[5px] bg-[#197567]">
                            <img src="{{ asset('user-assets/images/icons/call-white.webp') }}" alt="call">
                        </div>
                        <div class="flex flex-col gap-1">
                            <span class="text-[#777575AB] text-[12px] font-semibold leading">شماره تماس</span>
                            <span class="font-bold font-rokh text-[18px] text-[#000000AB] leading-4">۳۰ - <span class="text-[#777575AB] mr-1">۰۴۱</span>۵۱۰۴۱۰۰۰</span>
                        </div>
                    </a>

                    <div class="p-2 pl-4 rounded-[10px] border-[2px] border-[#F04B4629] flex items-center gap-4">
                        <div class="flex items-center justify-center w-[43px] h-[43px] rounded-[5px] bg-[#F04B46]">
                            <img src="{{ asset('user-assets/images/icons/locaiton-white.webp') }}" alt="location">
                        </div>
                        <div class="flex flex-col gap-1">
                            <span class="text-[#777575AB] text-[12px] font-semibold leading">آدرس</span>
                            <span class="font-bold font-rokh text-[18px] text-[#000000AB] leading-4">آذربایجان شرقی-تبریز</span>
                        </div>
                    </div>

                    <a href="mailto:info@canyab.com" class="p-2 pl-4 rounded-[10px] border-[2px] border-[#F5C18140] flex items-center gap-4">
                        <div class="flex items-center justify-center w-[43px] h-[43px] rounded-[5px] bg-[#F5C181]">
                            <img src="{{ asset('user-assets/images/icons/mail-white.webp') }}" alt="mail">
                        </div>
                        <div class="flex flex-col gap-1">
                            <span class="text-[#777575AB] text-[12px] font-semibold leading">ایمیل</span>
                            <span class="font-bold font-rokh text-[18px] text-[#000000AB] leading-4">info@canyab.com</span>
                        </div>
                    </a>
                </div>

                <div class="flex items-center gap-5">
                    <img src="{{ asset('user-assets/images/footer/01.webp') }}" alt="license" class="h-[70px]">
                    <img src="{{ asset('user-assets/images/footer/02.webp') }}" alt="license" class="h-[70px]">
                    <img src="{{ asset('user-assets/images/footer/03.webp') }}" alt="license" class="h-[70px]">
                </div>
            </div>
        </div>

        <div class="container flex flex-col items-center justify-between py-5 gap-x-10 gap-y-5 md:flex-row">
            <span class="text-[#6C757D] font-medium text-[14px] md:text-[16px] text-center md:text-start">2023 © کلیه حقوق مادی و معنوی این سایت برای پیشرو دیجیتال محفوظ است | طراحی و پشتیبانی :یوتا</span>
            <div class="flex items-center gap-2">
                <a href="#" class="w-[38px] h-[38px] flex items-center justify-center rounded-full bg-[#8B8B8B21]">
                    <img src="{{ asset('user-assets/images/icons/youtube.webp') }}" alt="youtube">
                </a>
                <a href="#" class="w-[38px] h-[38px] flex items-center justify-center rounded-full bg-[#8B8B8B21]">
                    <img src="{{ asset('user-assets/images/icons/aparat.webp') }}" alt="aparat">
                </a>
                <a href="#" class="w-[38px] h-[38px] flex items-center justify-center rounded-full bg-[#8B8B8B21]">
                    <img src="{{ asset('user-assets/images/icons/telegram.webp') }}" alt="telegram">
                </a>
                <a href="#" class="w-[38px] h-[38px] flex items-center justify-center rounded-full bg-[#8B8B8B21]">
                    <img src="{{ asset('user-assets/images/icons/instagram.webp') }}" alt="instagram">
                </a>
                <a href="#" class="w-[38px] h-[38px] flex items-center justify-center rounded-full bg-[#8B8B8B21]">
                    <img src="{{ asset('user-assets/images/icons/whatsapp.webp') }}" alt="whatsapp">
                </a>
                <a href="#" class="w-[38px] h-[38px] flex items-center justify-center rounded-full bg-[#8B8B8B21]">
                    <img src="{{ asset('user-assets/images/icons/mail-gray.webp') }}" alt="mail">
                </a>
            </div>
        </div>
    </footer>