@extends('layouts.app')

@section('title', 'Tous les services - TaPrestation')

@section('content')
<div class="pb-24 sm:pb-12">
    <style>
        .services-grid{
            display:grid;
            grid-template-columns:1fr;
            gap:0.9rem;
            padding:0.35rem 0;
        }
        @media (min-width: 640px){
            .services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
        }
        .service-card-media{height:180px}
        .service-card-content{padding:8px 12px 10px}
        .service-card-title{font-size:14px;color:#333;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        @media (min-width: 1024px){
            .services-grid{
                grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
                gap:1.25rem !important;
            }
            .service-card{
                width:100%;
                border-radius:16px !important;
                border:1px solid #e5e7eb !important;
                overflow:hidden !important;
                box-shadow:0 4px 14px rgba(15,23,42,0.08);
                transition:transform .2s ease, box-shadow .2s ease;
            }
            .service-card:hover{
                transform:translateY(-2px);
                box-shadow:0 14px 30px rgba(15,23,42,0.14);
            }
            .service-card-media{height:220px}
            .service-card-content{padding:14px 14px 16px}
            .service-card-price{font-size:20px !important}
            .service-card-title{font-size:15px}
        }
    </style>
    {{-- Bannière d'en-tête --}}
    <div class="text-white" style="background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #4338ca 100%);">
        <div class="max-w-7xl mx-auto px-4 py-6 sm:py-10 text-center">
            <div class="inline-flex items-center justify-center w-12 h-12 sm:w-14 sm:h-14 rounded-xl sm:rounded-2xl mb-3" style="background: rgba(255,255,255,0.2);">
                <i class="fas fa-briefcase text-xl sm:text-2xl text-white"></i>
            </div>
            <h1 class="text-2xl sm:text-4xl font-extrabold tracking-tight mb-1 sm:mb-2">Services Professionnels</h1>
            <p class="text-sm sm:text-lg max-w-2xl mx-auto" style="color: #bfdbfe;">Trouvez l'expert idéal pour votre projet.</p>
        </div>
    </div>
    
    {{-- Filtres compacts --}}
    <div class="max-w-7xl mx-auto px-3 sm:px-4 mb-4 sm:mb-6 -mt-4 sm:-mt-6">
        @include('components.filters.compact-filters', [
            'pageType' => 'services',
            'themeColor' => 'blue',
            'formAction' => route('services.index'),
            'categories' => $categories->whereNull('parent_id')
        ])
    </div>
    
    {{-- Résultats --}}
    <div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6 xl:px-8">
        @if($services->count() > 0)
            <div class="services-grid">
                @foreach($services as $service)
                    @php
                        $photoCount = $service->images?->count() ?? 0;
                        $firstPhoto = $photoCount > 0 ? $service->images->first()->image_path : null;
                        $prestataire = $service->prestataire;
                        $prestataireName = $prestataire?->user?->name
                            ?? $prestataire?->company_name
                            ?? $prestataire?->first_name
                            ?? 'Prestataire';
                        $canContact = auth()->check()
                            && auth()->user()->role === 'client'
                            && $prestataire
                            && auth()->user()->id !== $prestataire->user_id;
                        $showBooking = function_exists('feature_enabled') && feature_enabled('booking_payment_enabled');

                        $city = $service->city ?: ($prestataire?->city ?: null);
                        $ratingAvg = $prestataire?->rating_average;
                        $ratingCount = $prestataire?->total_reviews;
                    @endphp

                    <div class="service-card block bg-white"
                         role="link"
                         tabindex="0"
                         data-href="{{ route('services.show', $service) }}"
                         onclick="window.location.href=this.dataset.href"
                         onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();window.location.href=this.dataset.href}"
                         style="cursor:pointer">

                        {{-- Image --}}
                        <div class="service-card-media relative w-full overflow-hidden bg-gray-100">
                            @if($firstPhoto)
                                <x-media-image :path="$firstPhoto" :alt="$service->title" style="width:100%;height:100%;object-fit:cover;display:block" />
                            @else
                                <div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#f3f4f6">
                                    <i class="fas fa-image" style="font-size:24px;color:#ccc"></i>
                                </div>
                            @endif

                            @if($photoCount > 1)
                                <div style="position:absolute;bottom:6px;left:0;right:0;display:flex;justify-content:center;gap:3px">
                                    @for($i = 0; $i < min($photoCount, 8); $i++)
                                        @if($i === 0)
                                            <span style="width:5px;height:5px;border-radius:50%;background:#fff"></span>
                                        @else
                                            <span style="width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,0.5)"></span>
                                        @endif
                                    @endfor
                                </div>
                            @endif
                        </div>

                        {{-- Infos --}}
                        <div class="service-card-content">
                            <div style="display:flex;justify-content:space-between;align-items:baseline">
                                @if($service->price)
                                    <div class="service-card-price" style="font-size:17px;font-weight:800;color:#1a1a1a">{{ number_format($service->price, 0, ',', ' ') }} €</div>
                                @else
                                    <div style="font-size:14px;font-weight:800;color:#1a1a1a">Sur devis</div>
                                @endif
                                <div style="font-size:12px;color:#aaa;white-space:nowrap">{{ $service->created_at->diffForHumans(null, true, true) }}</div>
                            </div>
                            <div class="service-card-title">{{ $service->title }}</div>
                            <div style="font-size:13px;color:#666;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ $prestataireName }}</div>

                            <div style="display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px">
                                <div style="display:flex;gap:12px;min-width:0;font-size:12px;color:#999;flex-wrap:wrap">
                                    @if($city)
                                        <span>Ville: {{ Str::limit($city, 18) }}</span>
                                    @endif

                                    @if(is_numeric($ratingAvg) && (float)$ratingAvg > 0)
                                        <span>Note: {{ number_format((float)$ratingAvg, 1, '.', '') }}@if(is_numeric($ratingCount) && (int)$ratingCount > 0) ({{ (int)$ratingCount }})@endif</span>
                                    @endif

                                    @if(isset($service->distance_km) && $service->distance_km !== null)
                                        <span>Distance: {{ $service->distance_km }} km</span>
                                    @endif
                                </div>

                                <div style="flex-shrink:0;display:flex;gap:6px">
                                    @auth
                                        @if($canContact)
                                            <a href="{{ route('client.messaging.start', $prestataire) }}"
                                               onclick="event.stopPropagation();"
                                               class="inline-flex items-center justify-center"
                                               style="background:#1d4ed8;color:#fff;font-weight:700;font-size:14px;padding:9px 14px;border-radius:9999px;line-height:1">
                                                Contacter
                                            </a>
                                            @if($showBooking && \Illuminate\Support\Facades\Route::has('bookings.create'))
                                                <a href="{{ route('bookings.create', $service) }}"
                                                   onclick="event.stopPropagation();"
                                                   class="inline-flex items-center justify-center"
                                                   style="background:#e0e7ff;color:#1d4ed8;font-weight:700;font-size:14px;padding:9px 14px;border-radius:9999px;line-height:1">
                                                    {{ ($service->reservable ?? true) ? 'Réserver' : 'Demander' }}
                                                </a>
                                            @endif
                                        @endif
                                    @else
                                        <a href="{{ route('login') }}"
                                           onclick="event.stopPropagation();"
                                           class="inline-flex items-center justify-center"
                                           style="background:#1d4ed8;color:#fff;font-weight:700;font-size:14px;padding:9px 14px;border-radius:9999px;line-height:1">
                                            Contacter
                                        </a>
                                    @endauth
                                </div>
                            </div>
                        </div>

                        <div style="height:6px;background:#f5f5f5" class="sm:hidden"></div>
                    </div>
                @endforeach
            </div>
        @else
            {{-- État vide --}}
            <div class="bg-white rounded-xl shadow-md p-12 text-center border border-blue-100">
                <div class="w-24 h-24 mx-auto mb-6 bg-blue-100 rounded-full flex items-center justify-center">
                    <i class="fas fa-search text-3xl text-blue-600"></i>
                </div>
                <h3 class="text-xl font-bold text-blue-900 mb-3">Aucun service trouvé</h3>
                <p class="text-blue-700 mb-6">Essayez de modifier vos filtres ou explorez tous nos services.</p>
                <a href="{{ route('services.index') }}" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition shadow-lg">
                    Réinitialiser les filtres
                </a>
            </div>
        @endif
        
        {{-- Pagination --}}
        @if($services->hasPages())
            <div class="mt-12 flex justify-center">
                {{ $services->appends(request()->query())->links() }}
            </div>
        @endif
    </div>
</div>
@endsection