@extends('user.layout.master')

@section('head-tag')
    <title>نشان شده‌ها</title>
@endsection

@section('content')

    <div class="px-4 mx-auto mt-10">

        <div class="container">
            <x-core.divider mt="mt-10" title="نشان شده‌ها" />
        </div>

        <div class="container flex items-start gap-4">

            @include('user.layout.panel-sidebar')

            <!-- Services List -->
            <div class="w-full lg:w-[75%] flex flex-col gap-4 justify-center items-center">

                @if (count($favorites) > 0)
                    <div class="flex flex-wrap justify-start w-full gap-4">
                        @foreach($favorites ?? [] as $service)
                            @if($service != null)
                                <div class="lg:w-[31%] flex-none md:w-[48%] w-full bg-white min-h-[285px] rounded-[8px] border-2 border-custom-blue/15 flex flex-col gap-2 m-0">
                                    <a href="{{ route('user.service', ['cityName' => 'tabriz','service' => $service->slug?? '', 'user' => $service->businessOwner->code]) }}" class="w-full h-[150px]">
                                        <img src="{{ $service->businessOwner->avatar ? Storage::url($service->businessOwner->avatar) : 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="{{ route('user.service', ['cityName' => 'tabriz','service' => $service->slug?? '', 'user' => $service->businessOwner->code]) }}" class="text-[14px] md:text-[16px] font-bold line-clamp-1 text-[#121212]">
                                            {{ $service->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]">
                                        {{ $service->title }}
                                        </span>
                                            </div>
                                            <div class="flex flex-wrap items-center gap-1">
                                                <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>
                                        </div>
                                        <span class="text-[10px] text-[#7E7E7E]">
                                    متخصص در زمینه
                                    @foreach($service->categories as $category)
                                                <span>{{ $category->title }}@if(!$loop->last),@endif</span>
                                            @endforeach
                                </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>

                            @endif


                        @endforeach

                    </div>

                @else
                    <div class="flex flex-col items-center justify-center w-full gap-4">
                        <svg class="w-12 h-12 text-red-500" viewBox="0 0 24 24"
                             fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                             stroke-linejoin="round" class="feather feather-alert-triangle">
                            <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
                            <line x1="12" y1="9" x2="12" y2="13"></line>
                            <line x1="12" y1="17" x2="12.01" y2="17"></line>
                        </svg>
                        <h5 class="font-semibold text-lg text-[#7E7E7E]">
                            موردی یافت نشد
                        </h5>
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection


@section('script')
@endsection