<div>
    <section class="breadcumb-section pt-10">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcumb-style1">
                        <div class="breadcumb-list">
                            <a href="{{ route('welcome') }}">Home</a>
                            <a href="{{ route('shops.page') }}">Shops</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Breadcumb Sections -->
    <section class="breadcumb-section pt-4">
        <div class="cta-service-v2 cta-banner mx-auto maxw1700 pt120 pb120 bdrs16 position-relative overflow-hidden d-flex align-items-center mx20-lg px30-lg">
            <img class="left-top-img wow zoomIn" src="{{asset('images/vector-img/left-top.png')}}" alt="">
            <img class="right-bottom-img wow zoomIn" src="{{asset('images/vector-img/right-bottom.png')}}" alt="">
            <img class="service-v1-vector bounce-y d-none d-lg-block" src="{{asset('images/vector-img/vector-service-v1.png')}}" alt="">
            <div class="container pt-8 pb-8">
                <div class="row wow fadeInUp">
                    <div class="col-xl-5">
                        <div class="position-relative">
                            <h2>Available Expert Shops</h2>
                            <p class="text mb30">Connect with skilled professionals across various fields, ready to meet your needs and bring your ideas to life.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <div class="row px-4 py-2" id="nearby-shops">
        @forelse ($shops as $shop)
        <div class="col-sm-6 col-md-4 col-lg-4 col-xl-2 text-center">
            <a href="{{route('show.shop.services', $shop['slug'])}}">
                <div class="shop-card p-3 mb-4 border" style="border-radius: 22px; height:275px;">
                    <span class="position-relative mr10">
                        <img style="border: 2px solid #4CAF50; width: 118px; height: 118px; border-radius: 50%; object-fit: cover;" src="{{ $shop['profile_photo_url'] }}" alt="{{ $shop['name'] }}">
                    </span>
                    <div class="details pt-1">
                        <h4 class="title mb-1 fw-bold pt-1">{{ $shop['name'] ?? '' }}</h4>
                        <span class="text-thm mb-0 pt-0">{{ $shop['category']['name'] ?? '' }}</span>
                    </div>
                </div>
            </a>
        </div>
        @empty
        <div class="text-center text-lg-center mb-4">
            <a class="ud-btn btn-light-thm bdrs90" href="{{route('category.page')}}">No services found. Please check back</a>
        </div>
        @endforelse
    </div>


    <style>
        @media (max-width: 575.98px) {
            #nearby-shops .col-sm-6 {
                width: 50%;
            }
        }

        .circle-container {
            width: 90px;
            /* Adjust as needed */
            height: 90px;
            /* Same as width for a perfect circle */
            border-radius: 50%;
            /* Makes it a circle */
            overflow: hidden;
            /* Ensures contents are clipped to the circle */
            background-color: #f1f1f1;
            /* Optional background color */
        }
    </style>
</div>