@extends('user.layout.master')

@section('head-tag')
<title>کن یاب</title>
@endsection

@section('content')

    <!-- Main -->
    <main>

        <x-core.search-box/>

        {{  $slot  }}
        <!-- Slider section one -->
        @foreach ($service_categories as $sc)
            <section id="sliderOne" class="container flex flex-col gap-10 py-20">
                <div class="flex flex-wrap items-center justify-between gap-x-10 gap-y-5">
                    <h2 class="font-rokh font-bold text-[25px] md:text-[35px]">
                        {{ $sc->title }}
                    </h2>
                    <div class="flex flex-wrap items-center justify-center gap-2 md:flex-nowrap md:justify-between">
                        <div class="slider-one-swiper-next !flex active bg-custom-blue rounded-full w-[47px] h-[47px] min-w-[47px] min-h-[47px] items-center justify-center cursor-pointer text-custom-blue">
                            <img src="{{ asset('user-assets/images/icons/left-arrow-blue.webp') }}" alt="arrow" class="hidden rotate-180 blue-arrow">
                            <img src="{{ asset('user-assets/images/icons/right-arrow-white.webp') }}" alt="arrow" class="white-arrow">
                        </div>
                        <div class="slider-one-swiper-prev !flex bg-custom-blue rounded-full w-[47px] h-[47px] min-w-[47px] min-h-[47px] items-center justify-center cursor-pointer">
                            <img src="{{ asset('user-assets/images/icons/left-arrow-blue.webp') }}" alt="arrow" class="hidden blue-arrow">
                            <img src="{{ asset('user-assets/images/icons/right-arrow-white.webp') }}" alt="arrow" class="rotate-180 white-arrow">
                        </div>
                        <a href="#" class="bg-custom-softBlue rounded-full h-[47px] px-8 flex items-center justify-center text-custom-blue font-semibold text-[14px] text-center hover:bg-custom-blue hover:text-white transition-colors duration-150">
                            مشاهده همه
                        </a>
                    </div>
                </div>
                <div class="w-full">
                    <div class="swiper sliderOneSwiper">
                        <div class="swiper-wrapper">
                            <!-- Post -->
                            @foreach ($sc->services as $s)
                                <div class="swiper-slide">
                                    <div class="bg-white min-h-[285px] rounded-[8px] overflow-hidden border-2 border-custom-blue/15 flex flex-col gap-2">
                                        <a href="#" class="w-full h-[150px]">
                                            <img src="{{ $s->gallery ? Storage::url(((array) $s->gallery)[0]) : image('svg/files/blank-image.svg') }}" alt="poster" class="w-full h-full bg-center bg-cover">
                                        </a>
                                        <div class="flex flex-col gap-3 px-5">
                                            <a href="#" class="text-[14px] md:text-[16px] font-bold line-clamp-1 text-[#121212]">
                                                {{ $s->title }}
                                            </a>
                                            <div class="flex items-center justify-between gap-5">
                                                <div class="flex items-center gap-2">
                                                    <img src="{{ asset('user-assets/images/icons/user-blue.webp') }}" alt="user" class="">
                                                    <span class="text-custom-blue text-[12px]">
                                                    {{ $s->business->admin->name }}
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="flex flex-wrap items-center gap-1">
                                                <span class="text-[10px] text-[#7E7E7EB2]">(90% رضایت مشتری)</span>
                                                <div class="flex items-center gap-1">
                                                    <span class="text-[12px] text-[#7E7E7E]">4.8</span>
                                                    <img src="{{ asset('user-assets/images/icons/post-star.webp') }}" alt="star">
                                                </div>
                                            </div>
                                            <span class="text-[10px] text-[#7E7E7E]">
                                                متخصص در زمینه
                                                <span>
                                                    {{ $s->category->title }}
                                                </span>
                                            </span>

                                            <div class="mt-3 py-3 border-t border-[#E4E5EB] w-full flex justify-end">
                                                <a href="#" class="text-custom-blue font-semibold text-[14px] flex items-center gap-2">
                                                    <span>مشاهده پروفایل</span>
                                                    <img src="{{ asset('user-assets/images/icons/post-arrow-blue.webp') }}" alt="arrow">
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach

                        </div>
                    </div>
                </div>
            </section>

            <div class="container">
                <hr>
            </div>
        @endforeach

        <!-- Logo -->
        <section class="w-full relative flex items-center justify-center py-[100px] overflow-hidden">
            <img src="{{ asset('user-assets/images/common/bg-gradient.webp') }}" alt="background" class="absolute bottom-1/2 min-w-[1522px] max-w-[1522px]">
            <img src="{{ asset('user-assets/images/common/fullLogo.webp') }}" alt="logo">
        </section>

    </main>
@endsection


{{-- @section('script')

@endsection --}}