@php use Illuminate\Support\Str; @endphp

<section class="tab-panel active" id="panel-services">
    <div class="panel-header">
        <h2><i class="fas fa-concierge-bell"></i> Nos Services</h2>
        <p>Découvrez nos prestations professionnelles</p>
    </div>

    <div class="panel-toolbar" data-filter-group="services">
        <div class="panel-toolbar-main">
            <div>
                <div class="panel-results" id="results-services">
                    {{ $allServices->count() }} service{{ $allServices->count() > 1 ? 's' : '' }}
                </div>
                <div class="panel-results-note">Recherche instantanée sur les prestations de ce profil.</div>
            </div>

            <button type="button" class="panel-filter-toggle" data-filter-toggle="services">
                <i class="fas fa-sliders-h"></i> Filtres
            </button>
        </div>

        <div class="panel-filters" id="filters-services">
            <div class="panel-filter-grid">
                <label class="filter-field">
                    <span>Recherche</span>
                    <input type="search" data-filter-input="services-search" placeholder="Titre ou mot-clé">
                </label>

                <label class="filter-field">
                    <span>Catégorie</span>
                    <select data-filter-input="services-category">
                        <option value="">Toutes</option>
                        @foreach($serviceCategories as $categoryName)
                            <option value="{{ Str::slug($categoryName) }}">{{ $categoryName }}</option>
                        @endforeach
                    </select>
                </label>

                <label class="filter-field">
                    <span>Tarif</span>
                    <select data-filter-input="services-pricing">
                        <option value="">Tous</option>
                        <option value="priced">Avec prix</option>
                        <option value="quote">Sur devis</option>
                    </select>
                </label>

                <label class="filter-field">
                    <span>Prix max (€)</span>
                    <input type="number" min="0" step="1" data-filter-input="services-max-price" placeholder="Ex: 150">
                </label>
            </div>

            <div class="panel-filter-actions">
                <button type="button" class="panel-filter-reset" data-filter-reset="services">Réinitialiser</button>
            </div>
        </div>
    </div>

    <div class="services-grid">
        @foreach($allServices as $service)
            @php
                $serviceCategoryNames = $service->categories?->pluck('name')->filter()->values() ?? collect();
                $serviceCategorySlugs = $serviceCategoryNames->map(fn ($name) => Str::slug($name))->implode(' ');
                $serviceSearch = mb_strtolower(trim($service->title . ' ' . strip_tags($service->description ?? '') . ' ' . $serviceCategoryNames->implode(' ')));
            @endphp

            <article
                class="service-card filterable-card"
                data-filter-group="services"
                data-search="{{ $serviceSearch }}"
                data-category="{{ $serviceCategorySlugs }}"
                data-price="{{ $service->price !== null ? (float) $service->price : '' }}"
                data-price-mode="{{ $service->price !== null ? 'priced' : 'quote' }}"
            >
                <a href="{{ route('services.show', $service) }}" class="service-image">
                    @if($service->images && $service->images->count() > 0)
                        <img src="{{ asset('storage/' . $service->images->first()->image_path) }}" alt="{{ $service->title }}" loading="lazy">
                    @else
                        <div class="service-no-image">
                            <i class="fas fa-concierge-bell"></i>
                        </div>
                    @endif

                    @if($service->images && $service->images->count() > 1)
                        <span class="image-count">
                            <i class="fas fa-images"></i> {{ $service->images->count() }}
                        </span>
                    @endif
                </a>

                <div class="service-body">
                    <h3><a href="{{ route('services.show', $service) }}">{{ $service->title }}</a></h3>
                    <p class="service-desc">{{ Str::limit($service->description, 80) }}</p>

                    @if($serviceCategoryNames->isNotEmpty() || $service->delivery_time)
                        <div class="item-meta-row">
                            @foreach($serviceCategoryNames->take(2) as $categoryName)
                                <span class="item-chip">{{ $categoryName }}</span>
                            @endforeach

                            @if($service->delivery_time)
                                <span class="item-chip muted">{{ $service->delivery_time }}</span>
                            @endif
                        </div>
                    @endif

                    <div class="service-footer">
                        <div class="service-price">
                            @if($service->price)
                                <span class="price-value">{{ number_format($service->price, 0, ',', ' ') }} €</span>
                            @else
                                <span class="price-quote">Sur devis</span>
                            @endif
                        </div>

                        <a href="{{ route('services.show', $service) }}" class="btn-service">
                            Réserver <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </article>
        @endforeach
    </div>

    <div class="panel-filter-empty" id="empty-services" hidden>
        <i class="fas fa-search"></i>
        <p>Aucun service ne correspond à ces filtres.</p>
    </div>
</section>