@if(isset($boutique_listes) && count($boutique_listes) > 0)
    @foreach($boutique_listes as $boutique)
        @php
            $data = $processedBoutiques[$boutique->slug] ?? null;
            $metier = $data ? $data['metier'] : '';
            $metas = $boutique->meta;
            $logo = $metas && $metas->logo_boutique ? $metas->logo_boutique : asset('images/logo_mini.jpg');
            $backgroundImage = '';

            if(isset($boutique->publicites) && $boutique->publicites != null) {
                foreach($boutique->publicites as $pub) {
                    if(isset($pub->image)) {
                        $backgroundImage = "background-image: url('{$pub->image}');";
                        break;
                    }
                }
            }

            $date_echelonner = null;
            if($boutique->paiement_echelonner) {
                $date_echelonner = \Carbon\Carbon::parse($boutique->paiement_echelonner->expired_at);
            }

            $date_mib = null;
            if($boutique->mibSubscribe) {
                $date_mib = \Carbon\Carbon::parse($boutique->mibSubscribe->expired_at);
            }
        @endphp

        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 list_boutique mb-4"
             data-name="{{ str_replace('_', ' ', $boutique->nom_boutique) }}"
             data-metier="{{ $metier }}">

            <div class="boutique-card">
                <!-- Card Header with Background -->
                <div class="boutique-card-header" style="{{ $backgroundImage }}">
                    <div class="header-overlay">
                        <!-- Logo -->
                        <div class="boutique-logo-wrapper">
                            <img class="boutique-logo lazy"
                                 data-src="{{ $logo }}"
                                 alt="{{ $boutique->nom_boutique }}"
                                 loading="lazy">
                        </div>

                        <!-- Boutique Name -->
                        <h3 class="boutique-name" title="{{ strtoupper(str_replace('_', ' ', $boutique->nom_boutique)) }}">
                            {{ \Illuminate\Support\Str::limit(strtoupper(str_replace('_', ' ', $boutique->nom_boutique)), 19) }}
                        </h3>
                    </div>

                    <!-- Favorite Button -->
                    <button class="favorite-btn favorite_boutique"
                            data-url="{{ route('wishlist.boutique') }}"
                            data-name="{{ $boutique->nom_boutique }}"
                            data-boutique_slug="{{ $boutique->slug }}"
                            aria-label="Add to favorites">
                        <i class="fas fa-heart {{ $data && $data['is_favorite'] ? 'active' : '' }}"></i>
                    </button>
                </div>

                <!-- Metier Badge -->
                <div class="metier-badge">
                    {{ $metier }}
                </div>

                <!-- Card Body -->
                <div class="boutique-card-body">
                    <!-- Description -->
                    <p class="boutique-description">
                        {{ \Illuminate\Support\Str::limit($boutique->description, 50) }}
                        <a href="#" class="description read-more" data-description="{{ $boutique->description }}">
                            Lire plus
                        </a>
                    </p>

                    <!-- Visitors Count -->
                    <div class="visitors-count">
                        <i class="fa fa-users"></i>
                        <span>{{ $data ? $data['visit_count'] : 0 }}</span>
                        <small>visiteurs</small>
                    </div>

                    <!-- Badges -->
                    @if((isset($date_echelonner) && !$date_echelonner->isPast()) || (isset($date_mib) && !$date_mib->isPast()))
                        <div class="boutique-badges">
                            @if(isset($date_echelonner) && !$date_echelonner->isPast())
                                <span class="badge badge-premium">
                                    <i class="fas fa-calendar-check"></i> Paiement échelonné
                                </span>
                            @endif

                            @if(isset($date_mib) && !$date_mib->isPast())
                                <span class="badge badge-premium">
                                    <i class="fas fa-shopping-cart"></i> Panier MIB
                                </span>
                            @endif
                        </div>
                    @endif
                </div>

                <!-- Card Footer -->
                <div class="boutique-card-footer">
                    <!-- Social Share Buttons -->
                    <div class="social-share">
                        <a href="https://api.whatsapp.com/send?text=Tous%20ce%20que%20vous%20rechercher%20dans%20le%20secteur%20{{ $metier }}%20dans%20notre%20boutique%20en%20ligne%20sur%20le%20lien%20{{ url('/') }}%2F{{ str_replace(' ', '_', $boutique->nom_boutique) }}"
                           target="_blank"
                           class="social-btn whatsapp-btn"
                           aria-label="Share on WhatsApp">
                            <i class="fab fa-whatsapp"></i>
                        </a>

                        <a href="https://www.facebook.com/sharer/sharer.php?u={{ url('/') }}%2F{{ str_replace(' ', '_', $boutique->nom_boutique) }}"
                           target="_blank"
                           class="social-btn facebook-btn"
                           aria-label="Share on Facebook">
                            <i class="fab fa-facebook"></i>
                        </a>

                        <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ url('/') }}%2F{{ str_replace(' ', '_', $boutique->nom_boutique) }}"
                           target="_blank"
                           class="social-btn linkedin-btn"
                           aria-label="Share on LinkedIn">
                            <i class="fab fa-linkedin"></i>
                        </a>

                        <a href="#"
                           class="social-btn share-btn share_btn"
                           data-title="{{ $boutique->nom_boutique }}"
                           data-test="{{ \Illuminate\Support\Str::limit($boutique->description, 150) }}"
                           data-url="{{ url('/') . '/' . $boutique->nom_boutique }}"
                           aria-label="Share">
                            <i class="fas fa-share-alt"></i>
                        </a>
                    </div>

                    <!-- Visit Button -->
                    @if($boutique->installer != false)
                        <a href="#"
                           class="visit-btn visite"
                           data-url="{{ route('boutique.index', $boutique->nom_boutique) }}"
                           data-slug="{{ $boutique->slug }}">
                            Visiter
                            <i class="fas fa-arrow-right"></i>
                        </a>
                    @endif
                </div>
            </div>
        </div>
    @endforeach

@else
    <div class="col-xs-12 col-lg-12 empty-state">
        <div class="empty-state-content">
            <i class="fas fa-store-slash"></i>
            <h3>Aucune boutique disponible</h3>
            <p>Il n'y a pas de boutiques disponibles pour le moment.</p>
        </div>
    </div>
@endif