@extends('layouts.app')

@section('title', 'Mes Demandes')

@section('content')
@php
    $serviceCount = ($serviceBookings ?? collect())->count();
    $equipmentCount = ($equipmentRentalRequests ?? collect())->count();
    $urgentSaleCount = ($urgentSales ?? collect())->count();
    $currentSort = request('sort', 'desc');
    $queryWithoutPage = request()->except('page');
    $selectedServiceForFilter = ($services ?? collect())->firstWhere('id', (int) request('service_id'));

    $resolveStorageUrl = function ($path) {
        if (!$path) {
            return null;
        }

        if (\Illuminate\Support\Str::startsWith($path, ['http://', 'https://'])) {
            return $path;
        }

        if (\Illuminate\Support\Str::startsWith($path, '/storage/')) {
            return asset(ltrim($path, '/'));
        }

        if (\Illuminate\Support\Str::startsWith($path, 'storage/')) {
            return asset($path);
        }

        return asset('storage/' . ltrim($path, '/'));
    };

    $resolveClientAvatar = function ($type, $record, $clientUser = null) use ($resolveStorageUrl) {
        $user = $clientUser;

        if (!$user && in_array($type, ['service', 'equipment'], true)) {
            $user = $record->client->user ?? null;
        }

        if (!$user) {
            return null;
        }

        if (!empty($user->profile_photo_url)) {
            return $user->profile_photo_url;
        }

        if (!empty($user->client->photo)) {
            return $resolveStorageUrl($user->client->photo);
        }

        if (!empty($user->avatar)) {
            return $resolveStorageUrl($user->avatar);
        }

        return null;
    };

    $formatDuration = function ($minutes) {
        if (!$minutes) {
            return null;
        }

        $hours = intdiv((int) $minutes, 60);
        $remainingMinutes = ((int) $minutes) % 60;

        if ($hours > 0 && $remainingMinutes > 0) {
            return $hours . 'h' . str_pad((string) $remainingMinutes, 2, '0', STR_PAD_LEFT);
        }

        if ($hours > 0) {
            return $hours . 'h';
        }

        return $remainingMinutes . ' min';
    };

    $formatMoney = function ($amount, $decimals = 0) {
        if ($amount === null || $amount === '') {
            return null;
        }

        return number_format((float) $amount, $decimals, ',', ' ') . '€';
    };

    $normalizedRequests = collect();

    foreach (($serviceBookings ?? collect()) as $booking) {
        $clientUser = ($booking->client && $booking->client->user) ? $booking->client->user : null;
        $isMultiSlot = (bool) ($booking->is_multi_slot ?? false);

        $normalizedRequests->push((object) [
            'id' => $booking->id ?? null,
            'type' => 'service',
            'title' => ($booking->service ? ($booking->service->title ?? $booking->service->name) : 'Service') ?? 'Service',
            'client_name' => $clientUser->name ?? 'Client inconnu',
            'client_avatar' => $resolveClientAvatar('service', $booking, $clientUser),
            'client_rating' => $clientUser->client_rating ?? null,
            'client_reviews_count' => $clientUser->client_reviews_count ?? 0,
            'status' => $booking->status ?? 'unknown',
            'created_at' => $booking->created_at ?? now(),
            'image' => ($booking->service && $booking->service->images && $booking->service->images->count() > 0)
                ? $resolveStorageUrl($booking->service->images->first()->image_path)
                : null,
            'category' => ($booking->service && $booking->service->category && $booking->service->category->first())
                ? $booking->service->category->first()->name
                : null,
            'price' => $isMultiSlot ? ($booking->total_session_price ?? 0) : ($booking->service->price ?? null),
            'price_type' => $booking->service ? ($booking->service->price_type ?? null) : null,
            'route_show' => $booking->id ? route('prestataire.bookings.show', $booking->id) : '#',
            'is_multi_slot' => $isMultiSlot,
            'total_slots' => $isMultiSlot ? ($booking->total_slots ?? 1) : 1,
            'session_duration' => $isMultiSlot ? ($booking->session_duration ?? 0) : null,
        ]);
    }

    foreach (($equipmentRentalRequests ?? collect()) as $request) {
        $clientUser = ($request->client && $request->client->user) ? $request->client->user : null;
        $equipmentImage = null;

        if ($request->equipment && $request->equipment->main_photo) {
            $equipmentImage = $resolveStorageUrl($request->equipment->main_photo);
        } elseif ($request->equipment && $request->equipment->photos && count($request->equipment->photos) > 0) {
            $equipmentImage = $resolveStorageUrl($request->equipment->photos[0]);
        }

        $normalizedRequests->push((object) [
            'id' => $request->id ?? null,
            'type' => 'equipment',
            'title' => ($request->equipment ? ($request->equipment->name ?? 'Materiel') : 'Materiel') ?? 'Materiel',
            'client_name' => $clientUser->name ?? 'Client inconnu',
            'client_avatar' => $resolveClientAvatar('equipment', $request, $clientUser),
            'client_rating' => $clientUser->client_rating ?? null,
            'client_reviews_count' => $clientUser->client_reviews_count ?? 0,
            'status' => $request->status ?? 'unknown',
            'created_at' => $request->created_at ?? now(),
            'image' => $equipmentImage,
            'category' => ($request->equipment && $request->equipment->category)
                ? $request->equipment->category->name
                : (($request->equipment && $request->equipment->subcategory) ? $request->equipment->subcategory->name : null),
            'start_date' => $request->start_date ?? null,
            'end_date' => $request->end_date ?? null,
            'route_show' => $request->id ? route('prestataire.equipment-rental-requests.show', $request->id) : '#',
        ]);
    }

    foreach (($urgentSales ?? collect()) as $sale) {
        $latestContact = $sale->contacts ? $sale->contacts->first() : null;
        $clientUser = ($latestContact && $latestContact->user) ? $latestContact->user : null;
        $saleImage = ($sale->photos && count($sale->photos) > 0) ? $resolveStorageUrl($sale->photos[0]) : null;

        $normalizedRequests->push((object) [
            'id' => $sale->id ?? null,
            'type' => 'urgent_sale',
            'title' => $sale->title ?? 'Annonce urgente',
            'client_name' => $clientUser->name ?? 'Contact a confirmer',
            'client_avatar' => $resolveClientAvatar('urgent_sale', $sale, $clientUser),
            'client_rating' => $clientUser->client_rating ?? null,
            'client_reviews_count' => $clientUser->client_reviews_count ?? 0,
            'status' => $sale->status ?? 'unknown',
            'created_at' => $sale->created_at ?? now(),
            'image' => $saleImage,
            'category' => $sale->category ? ($sale->category->name ?? null) : null,
            'price' => $sale->price ?? null,
            'price_min' => $sale->price_min ?? null,
            'price_max' => $sale->price_max ?? null,
            'route_show' => $sale->id ? route('prestataire.urgent-sales.contacts', $sale->id) : '#',
        ]);
    }

    $normalizedRequests = $currentSort === 'asc'
        ? $normalizedRequests->sortBy('created_at')->values()
        : $normalizedRequests->sortByDesc('created_at')->values();

    $totalVisibleCount = $normalizedRequests->count();
    $pendingVisibleCount = $normalizedRequests->where('status', 'pending')->count();

    $typeMeta = [
        'service' => [
            'label' => 'Service',
            'icon' => 'fa-concierge-bell',
            'card' => 'border-blue-100 hover:border-blue-200 hover:bg-blue-50/40',
            'surface' => 'bg-blue-50',
            'surface_icon' => 'text-blue-600',
            'badge' => 'bg-blue-100 text-blue-700',
            'muted' => 'text-blue-700',
            'button' => 'bg-blue-600 hover:bg-blue-700',
        ],
        'equipment' => [
            'label' => 'Materiel',
            'icon' => 'fa-tools',
            'card' => 'border-emerald-100 hover:border-emerald-200 hover:bg-emerald-50/40',
            'surface' => 'bg-emerald-50',
            'surface_icon' => 'text-emerald-600',
            'badge' => 'bg-emerald-100 text-emerald-700',
            'muted' => 'text-emerald-700',
            'button' => 'bg-emerald-600 hover:bg-emerald-700',
        ],
        'urgent_sale' => [
            'label' => 'Annonce',
            'icon' => 'fa-bolt',
            'card' => 'border-orange-100 hover:border-orange-200 hover:bg-orange-50/40',
            'surface' => 'bg-orange-50',
            'surface_icon' => 'text-orange-600',
            'badge' => 'bg-orange-100 text-orange-700',
            'muted' => 'text-orange-700',
            'button' => 'bg-orange-600 hover:bg-orange-700',
        ],
    ];

    $statusMeta = [
        'pending' => ['label' => 'En attente', 'class' => 'bg-amber-100 text-amber-800'],
        'accepted' => ['label' => 'Acceptee', 'class' => 'bg-emerald-100 text-emerald-800'],
        'confirmed' => ['label' => 'Confirmee', 'class' => 'bg-emerald-100 text-emerald-800'],
        'in_preparation' => ['label' => 'En preparation', 'class' => 'bg-sky-100 text-sky-800'],
        'active' => ['label' => 'Active', 'class' => 'bg-sky-100 text-sky-800'],
        'rejected' => ['label' => 'Refusee', 'class' => 'bg-red-100 text-red-800'],
        'refused' => ['label' => 'Refusee', 'class' => 'bg-red-100 text-red-800'],
        'cancelled' => ['label' => 'Annulee', 'class' => 'bg-slate-200 text-slate-700'],
    ];

    $activeFilters = collect();

    if (($type ?? 'all') !== 'all') {
        $activeFilters->push('Type: ' . match ($type) {
            'service' => 'Services',
            'equipment' => 'Materiel',
            'urgent_sale' => 'Annonces',
            default => 'Tout',
        });
    }

    if (request('status')) {
        $activeFilters->push('Statut: ' . ($statusMeta[request('status')]['label'] ?? ucfirst(str_replace('_', ' ', request('status')))));
    }

    if (request('date_range')) {
        $activeFilters->push('Periode: ' . match (request('date_range')) {
            'today' => 'Aujourd hui',
            'week' => 'Cette semaine',
            'month' => 'Ce mois',
            default => request('date_range'),
        });
    }

    if ($selectedServiceForFilter) {
        $activeFilters->push('Service: ' . ($selectedServiceForFilter->title ?? $selectedServiceForFilter->name ?? 'Service'));
    }
@endphp

<div class="min-h-screen bg-[radial-gradient(circle_at_top,_rgba(59,130,246,0.12),_transparent_35%),linear-gradient(180deg,_#eff6ff_0%,_#f8fafc_28%,_#f8fafc_100%)]">
    <div class="container mx-auto px-3 sm:px-4 py-4 sm:py-6 lg:py-8">
        <div class="mb-4">
            <x-pwa-back-button :href="route('prestataire.dashboard')" class="bg-white/90 border-blue-100 text-blue-800 hover:bg-white" />
        </div>

        <section class="mb-4 rounded-[24px] border border-slate-200/80 bg-white/95 p-3.5 shadow-[0_18px_40px_rgba(15,23,42,0.05)] backdrop-blur sm:rounded-[28px] sm:p-5">
            <div class="flex flex-col gap-4">
                <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
                    <div>
                        <div class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Navigation rapide</div>
                        <div class="mt-1 text-sm text-slate-700">Basculez entre les types et appliquez les filtres serveur pour garder une liste propre.</div>
                    </div>
                    <a href="{{ route('prestataire.bookings.index') }}" class="inline-flex w-full items-center justify-center rounded-full border border-slate-200 px-3 py-2 text-xs font-semibold text-slate-700 transition hover:border-slate-300 hover:bg-slate-50 sm:w-auto">
                        <i class="fas fa-rotate-left mr-2"></i>Reinitialiser
                    </a>
                </div>

                <div class="grid grid-cols-2 gap-2 sm:flex sm:flex-wrap">
                    <a href="{{ route('prestataire.bookings.index', array_merge($queryWithoutPage, ['type' => 'all'])) }}" class="inline-flex items-center justify-between rounded-2xl px-3 py-2 text-sm font-semibold transition sm:justify-center {{ ($type ?? 'all') === 'all' ? 'bg-slate-900 text-white shadow-lg shadow-slate-900/10' : 'border border-slate-200 bg-white text-slate-800 hover:border-slate-300 hover:bg-slate-50' }}">
                        <i class="fas fa-layer-group mr-2 text-xs"></i>Tout
                        <span class="ml-2 rounded-full px-2 py-0.5 text-[11px] font-bold {{ ($type ?? 'all') === 'all' ? 'bg-white/20 text-white' : 'bg-slate-100 text-slate-700' }}">{{ $totalVisibleCount }}</span>
                    </a>
                    <a href="{{ route('prestataire.bookings.index', array_merge($queryWithoutPage, ['type' => 'service'])) }}" class="inline-flex items-center justify-between rounded-2xl px-3 py-2 text-sm font-semibold transition sm:justify-center {{ ($type ?? 'all') === 'service' ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/15' : 'border border-blue-200 bg-white text-blue-800 hover:bg-blue-50' }}">
                        <i class="fas fa-concierge-bell mr-2 text-xs"></i>Services
                        <span class="ml-2 rounded-full px-2 py-0.5 text-[11px] font-bold {{ ($type ?? 'all') === 'service' ? 'bg-white/20 text-white' : 'bg-blue-100 text-blue-700' }}">{{ $serviceCount }}</span>
                    </a>
                    <a href="{{ route('prestataire.bookings.index', array_merge($queryWithoutPage, ['type' => 'equipment'])) }}" class="inline-flex items-center justify-between rounded-2xl px-3 py-2 text-sm font-semibold transition sm:justify-center {{ ($type ?? 'all') === 'equipment' ? 'bg-emerald-600 text-white shadow-lg shadow-emerald-600/15' : 'border border-emerald-200 bg-white text-emerald-800 hover:bg-emerald-50' }}">
                        <i class="fas fa-tools mr-2 text-xs"></i>Materiel
                        <span class="ml-2 rounded-full px-2 py-0.5 text-[11px] font-bold {{ ($type ?? 'all') === 'equipment' ? 'bg-white/20 text-white' : 'bg-emerald-100 text-emerald-700' }}">{{ $equipmentCount }}</span>
                    </a>
                    <a href="{{ route('prestataire.bookings.index', array_merge($queryWithoutPage, ['type' => 'urgent_sale'])) }}" class="inline-flex items-center justify-between rounded-2xl px-3 py-2 text-sm font-semibold transition sm:justify-center {{ ($type ?? 'all') === 'urgent_sale' ? 'bg-orange-600 text-white shadow-lg shadow-orange-600/15' : 'border border-orange-200 bg-white text-orange-800 hover:bg-orange-50' }}">
                        <i class="fas fa-bolt mr-2 text-xs"></i>Annonces
                        <span class="ml-2 rounded-full px-2 py-0.5 text-[11px] font-bold {{ ($type ?? 'all') === 'urgent_sale' ? 'bg-white/20 text-white' : 'bg-orange-100 text-orange-700' }}">{{ $urgentSaleCount }}</span>
                    </a>
                </div>

                <form method="GET" action="{{ route('prestataire.bookings.index') }}" class="space-y-3">
                    <input type="hidden" name="type" value="{{ $type ?? 'all' }}">

                    <div class="grid grid-cols-2 gap-2 sm:gap-3 xl:grid-cols-5">
                        <div>
                            <label for="status" class="mb-1.5 block text-xs font-semibold uppercase tracking-[0.12em] text-slate-600">Statut</label>
                            <select id="status" name="status" class="w-full rounded-2xl border border-slate-200 bg-white px-3.5 py-2.5 text-sm text-slate-700 shadow-sm focus:border-blue-300 focus:outline-none focus:ring-4 focus:ring-blue-100 sm:px-4 sm:py-3">
                                <option value="" {{ !request('status') ? 'selected' : '' }}>Tous les statuts</option>
                                <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>En attente</option>
                                <option value="accepted" {{ request('status') === 'accepted' ? 'selected' : '' }}>Acceptee</option>
                                <option value="confirmed" {{ request('status') === 'confirmed' ? 'selected' : '' }}>Confirmee</option>
                                <option value="in_preparation" {{ request('status') === 'in_preparation' ? 'selected' : '' }}>En preparation</option>
                                <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Active</option>
                                <option value="rejected" {{ request('status') === 'rejected' ? 'selected' : '' }}>Refusee</option>
                                <option value="cancelled" {{ request('status') === 'cancelled' ? 'selected' : '' }}>Annulee</option>
                            </select>
                        </div>

                        <div>
                            <label for="date_range" class="mb-1.5 block text-xs font-semibold uppercase tracking-[0.12em] text-slate-600">Periode</label>
                            <select id="date_range" name="date_range" class="w-full rounded-2xl border border-slate-200 bg-white px-3.5 py-2.5 text-sm text-slate-700 shadow-sm focus:border-blue-300 focus:outline-none focus:ring-4 focus:ring-blue-100 sm:px-4 sm:py-3">
                                <option value="" {{ !request('date_range') ? 'selected' : '' }}>Toute la periode</option>
                                <option value="today" {{ request('date_range') === 'today' ? 'selected' : '' }}>Aujourd hui</option>
                                <option value="week" {{ request('date_range') === 'week' ? 'selected' : '' }}>Cette semaine</option>
                                <option value="month" {{ request('date_range') === 'month' ? 'selected' : '' }}>Ce mois</option>
                            </select>
                        </div>

                        <div class="col-span-2 xl:col-span-1">
                            <label for="service_id" class="mb-1.5 block text-xs font-semibold uppercase tracking-[0.12em] text-slate-600">Service</label>
                            <select id="service_id" name="service_id" class="w-full rounded-2xl border border-slate-200 bg-white px-3.5 py-2.5 text-sm text-slate-700 shadow-sm focus:border-blue-300 focus:outline-none focus:ring-4 focus:ring-blue-100 sm:px-4 sm:py-3">
                                <option value="">Tous mes services</option>
                                @foreach(($services ?? collect()) as $service)
                                    <option value="{{ $service->id }}" {{ (string) request('service_id') === (string) $service->id ? 'selected' : '' }}>
                                        {{ $service->title ?? $service->name ?? 'Service' }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div>
                            <label for="sort" class="mb-1.5 block text-xs font-semibold uppercase tracking-[0.12em] text-slate-600">Tri</label>
                            <select id="sort" name="sort" class="w-full rounded-2xl border border-slate-200 bg-white px-3.5 py-2.5 text-sm text-slate-700 shadow-sm focus:border-blue-300 focus:outline-none focus:ring-4 focus:ring-blue-100 sm:px-4 sm:py-3">
                                <option value="desc" {{ $currentSort !== 'asc' ? 'selected' : '' }}>Plus recent d abord</option>
                                <option value="asc" {{ $currentSort === 'asc' ? 'selected' : '' }}>Plus ancien d abord</option>
                            </select>
                        </div>

                        <div class="flex items-end">
                            <button type="submit" class="inline-flex w-full items-center justify-center rounded-2xl bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-200 sm:py-3">
                                <i class="fas fa-sliders mr-2"></i>Appliquer
                            </button>
                        </div>
                    </div>
                </form>

                @if($activeFilters->isNotEmpty())
                    <div class="flex flex-wrap gap-2">
                        @foreach($activeFilters as $filterLabel)
                            <span class="inline-flex items-center rounded-full bg-slate-200 px-3 py-1 text-xs font-semibold text-slate-800">{{ $filterLabel }}</span>
                        @endforeach
                    </div>
                @endif
            </div>
        </section>

        @if($normalizedRequests->isNotEmpty())
            <section class="rounded-[24px] border border-slate-200/80 bg-white/95 p-3 shadow-[0_18px_40px_rgba(15,23,42,0.05)] backdrop-blur sm:rounded-[28px] sm:p-5">
                <div class="flex flex-col gap-2 border-b border-slate-100 pb-4 sm:flex-row sm:items-end sm:justify-between">
                    <div>
                        <div class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Flux de demandes</div>
                        <h2 class="mt-1 text-xl font-black tracking-tight text-slate-900 sm:text-2xl">Liste compacte et actionnable</h2>
                    </div>
                    <div class="text-sm font-medium text-slate-700">
                        {{ $totalVisibleCount }} resultat(s)
                    </div>
                </div>

                <div class="mt-4 space-y-3">
                    @foreach($normalizedRequests as $item)
                        @php
                            $meta = $typeMeta[$item->type] ?? $typeMeta['service'];
                            $status = $statusMeta[$item->status] ?? [
                                'label' => ucfirst(str_replace('_', ' ', $item->status ?? 'Inconnu')),
                                'class' => 'bg-slate-100 text-slate-700',
                            ];

                            $clientInitial = \Illuminate\Support\Str::upper(\Illuminate\Support\Str::substr($item->client_name ?? '?', 0, 1));
                            $createdLabel = $item->created_at ? $item->created_at->format('d/m/Y \a H:i') : 'Date inconnue';
                            $createdRelative = $item->created_at ? $item->created_at->diffForHumans() : null;

                            $summaryLabel = null;
                            $detailPills = collect();

                            if ($item->category) {
                                $detailPills->push([
                                    'icon' => 'fa-tag',
                                    'label' => $item->category,
                                ]);
                            }

                            if ($item->type === 'service') {
                                if ($item->is_multi_slot) {
                                    $detailPills->push([
                                        'icon' => 'fa-calendar-alt',
                                        'label' => $item->total_slots . ' creneau(x)',
                                    ]);
                                }

                                if ($item->session_duration) {
                                    $detailPills->push([
                                        'icon' => 'fa-hourglass-half',
                                        'label' => $formatDuration($item->session_duration),
                                    ]);
                                }

                                if ($item->price !== null) {
                                    $priceSuffix = match ($item->price_type) {
                                        'per_hour' => '/h',
                                        'per_day' => '/jour',
                                        default => '',
                                    };

                                    $summaryLabel = ($item->is_multi_slot ? 'Total ' : '') . $formatMoney($item->price, $item->is_multi_slot ? 2 : 0) . $priceSuffix;
                                }
                            } elseif ($item->type === 'equipment') {
                                if ($item->start_date && $item->end_date) {
                                    $summaryLabel = \Carbon\Carbon::parse($item->start_date)->format('d/m') . ' -> ' . \Carbon\Carbon::parse($item->end_date)->format('d/m/Y');
                                    $detailPills->push([
                                        'icon' => 'fa-calendar-alt',
                                        'label' => \Carbon\Carbon::parse($item->start_date)->format('d/m/Y'),
                                    ]);
                                    $detailPills->push([
                                        'icon' => 'fa-flag-checkered',
                                        'label' => \Carbon\Carbon::parse($item->end_date)->format('d/m/Y'),
                                    ]);
                                }
                            } elseif ($item->type === 'urgent_sale') {
                                if ($item->price_min && $item->price_max) {
                                    $summaryLabel = $formatMoney($item->price_min) . ' - ' . $formatMoney($item->price_max);
                                } elseif ($item->price) {
                                    $summaryLabel = $formatMoney($item->price);
                                }
                            }
                        @endphp

                        <a href="{{ $item->route_show }}" class="group block rounded-[20px] border bg-white p-2.5 shadow-sm transition duration-200 hover:-translate-y-0.5 hover:shadow-[0_20px_40px_rgba(15,23,42,0.08)] sm:rounded-[24px] sm:p-4 {{ $meta['card'] }}">
                            <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
                                <div class="flex min-w-0 flex-1 gap-2.5 sm:gap-4">
                                    <div class="relative h-20 w-20 shrink-0 overflow-hidden rounded-xl {{ $meta['surface'] }} sm:h-28 sm:w-28 sm:rounded-2xl">
                                        @if($item->image)
                                            <img src="{{ $item->image }}" alt="{{ $item->title }}" class="h-full w-full object-cover transition duration-300 group-hover:scale-105">
                                        @else
                                            <div class="flex h-full w-full items-center justify-center">
                                                <i class="fas {{ $meta['icon'] }} text-2xl {{ $meta['surface_icon'] }} sm:text-3xl"></i>
                                            </div>
                                        @endif
                                        <div class="absolute left-1.5 top-1.5 inline-flex items-center rounded-full px-2 py-0.5 text-[9px] font-bold uppercase tracking-[0.16em] sm:left-2 sm:top-2 sm:px-2 sm:py-1 sm:text-[10px] {{ $meta['badge'] }}">
                                            {{ $meta['label'] }}
                                        </div>
                                    </div>

                                    <div class="min-w-0 flex-1">
                                        <div class="flex flex-wrap items-center gap-2">
                                            <span class="inline-flex items-center rounded-full px-2.5 py-1 text-[11px] font-semibold {{ $status['class'] }}">
                                                {{ $status['label'] }}
                                            </span>
                                            @if($createdRelative)
                                                <span class="text-xs font-medium text-slate-500">{{ $createdRelative }}</span>
                                            @endif
                                        </div>

                                        <h3 class="mt-1.5 line-clamp-2 text-[15px] font-black leading-5 tracking-tight text-slate-950 sm:mt-2 sm:text-lg">
                                            {{ $item->title }}
                                        </h3>

                                        <div class="mt-2.5 grid gap-2 text-sm text-slate-700 sm:mt-3 lg:grid-cols-2">
                                            <div class="flex min-w-0 items-center gap-2">
                                                <div class="flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-full {{ $meta['surface'] }} sm:h-9 sm:w-9">
                                                    @if($item->client_avatar)
                                                        <img src="{{ $item->client_avatar }}" alt="{{ $item->client_name }}" class="h-full w-full object-cover">
                                                    @else
                                                        <span class="text-sm font-bold {{ $meta['muted'] }}">{{ $clientInitial }}</span>
                                                    @endif
                                                </div>
                                                <div class="min-w-0">
                                                    <div class="truncate text-sm font-bold text-slate-900">{{ $item->client_name }}</div>
                                                    <div class="truncate text-xs text-slate-600">
                                                        @if($item->client_rating)
                                                            <i class="fas fa-star mr-1 text-amber-400"></i>{{ number_format($item->client_rating, 1) }}/5
                                                            <span class="text-slate-500">({{ $item->client_reviews_count ?? 0 }} avis)</span>
                                                        @elseif(($item->client_reviews_count ?? 0) === 0)
                                                            Nouveau client
                                                        @else
                                                            Client
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="flex min-w-0 items-center gap-2 text-xs text-slate-600 sm:text-sm">
                                                <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-slate-100 text-slate-600 sm:h-9 sm:w-9">
                                                    <i class="fas fa-clock"></i>
                                                </div>
                                                <div class="min-w-0">
                                                    <div class="font-semibold text-slate-800">Recue le {{ $createdLabel }}</div>
                                                    <div class="truncate text-xs text-slate-500">Suivi en temps reel</div>
                                                </div>
                                            </div>
                                        </div>

                                        @if($detailPills->isNotEmpty())
                                            <div class="mt-2.5 flex flex-wrap gap-1.5 sm:mt-3 sm:gap-2">
                                                @foreach($detailPills as $pill)
                                                    <span class="inline-flex items-center rounded-full bg-slate-200/80 px-2.5 py-1 text-xs font-semibold text-slate-700 sm:px-3">
                                                        <i class="fas {{ $pill['icon'] }} mr-2 text-[11px]"></i>{{ $pill['label'] }}
                                                    </span>
                                                @endforeach
                                            </div>
                                        @endif
                                    </div>
                                </div>

                                <div class="flex w-full shrink-0 items-center justify-between gap-2 rounded-xl border border-slate-200 bg-slate-100 p-2.5 lg:w-[230px] lg:flex-col lg:items-stretch lg:gap-3 lg:rounded-2xl lg:bg-slate-50/90 lg:p-3">
                                    <div class="min-w-0 flex-1">
                                        <div class="hidden text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500 lg:block">Resume</div>
                                        <div class="line-clamp-2 text-[13px] font-semibold leading-5 text-slate-900 sm:text-sm lg:line-clamp-none">
                                            {{ $summaryLabel ?: 'Ouvrir la demande pour plus de details' }}
                                        </div>
                                    </div>

                                    <div class="flex shrink-0 items-center gap-3 lg:w-full lg:justify-between">
                                        <div class="hidden text-xs text-slate-600 lg:block">
                                            {{ $meta['label'] }}
                                        </div>
                                        <span class="inline-flex items-center justify-center rounded-lg px-3 py-2 text-sm font-semibold text-white transition lg:rounded-xl {{ $meta['button'] }}">
                                            Voir
                                            <i class="fas fa-arrow-right ml-2 text-xs transition group-hover:translate-x-0.5"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>
            </section>
        @else
            <section class="rounded-[28px] border border-dashed border-slate-300 bg-white/90 p-8 text-center shadow-[0_18px_40px_rgba(15,23,42,0.05)] backdrop-blur">
                <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-blue-50 text-blue-600">
                    <i class="fas fa-inbox text-2xl"></i>
                </div>
                <h2 class="mt-4 text-2xl font-black tracking-tight text-slate-900">Aucune demande a afficher</h2>
                <p class="mx-auto mt-2 max-w-2xl text-sm text-slate-500 sm:text-base">
                    Votre tableau est vide pour les filtres actuels. Ajustez la periode, le statut ou vos services pour retrouver des demandes.
                </p>
                <div class="mt-5 flex flex-col items-center justify-center gap-3 sm:flex-row">
                    <a href="{{ route('prestataire.bookings.index') }}" class="inline-flex items-center justify-center rounded-2xl bg-blue-600 px-4 py-3 text-sm font-semibold text-white transition hover:bg-blue-700">
                        Voir toutes les demandes
                    </a>
                    <a href="{{ route('prestataire.services.index') }}" class="inline-flex items-center justify-center rounded-2xl border border-slate-200 px-4 py-3 text-sm font-semibold text-slate-700 transition hover:border-slate-300 hover:bg-slate-50">
                        Gerer mes services
                    </a>
                </div>
            </section>
        @endif
    </div>
</div>
@endsection