<div class="container mt-4">
    <div class="row align-items-center wow fadeInUp" data-wow-delay="300ms">
        <div class="col-lg-9">
            <div class="main-title2">
                <h2 class="title">Shops</h2>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="text-end text-lg-end mb-4">
                <a class="ud-btn btn-light-thm bdrs90" href="{{ route('shops.page') }}">See more<i class="fal fa-arrow-right-long"></i></a>
            </div>
        </div>
    </div>

    <div class="row" id="nearby-shops">
        @foreach ($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>
        @endforeach
    </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>