@extends('layouts.app')

@section('content')
@php
    // Normaliser les valeurs pour éviter les erreurs
    $escrowType = $escrow->escrowable_type ?? '';
    $isUrgentSale = str_contains($escrowType, 'UrgentSale');
    $isBooking = str_contains($escrowType, 'Booking');
    $isEquipment = str_contains($escrowType, 'Equipment');
    $totalAmount = (float) ($escrow->total_amount ?? $escrow->amount ?? 0);
    $depositAmount = (float) ($escrow->deposit_amount ?? 0);
    $escrowMetaTop = [];
    try {
        $escrowMetaTop = !empty($escrow->metadata) ? (json_decode((string) $escrow->metadata, true) ?: []) : [];
    } catch (\Throwable $e) {
        $escrowMetaTop = [];
    }
    if ($depositAmount <= 0) {
        $depositAmount = (float) ($escrowMetaTop['deposit_amount'] ?? ($escrowMetaTop['security_deposit'] ?? 0));
    }
    if ($depositAmount <= 0 && isset($relatedItem) && is_object($relatedItem) && property_exists($relatedItem, 'security_deposit')) {
        $depositAmount = (float) ($relatedItem->security_deposit ?? 0);
    }
    
    // Sécuriser $urgentSaleProduct
    $urgentSaleProduct = $urgentSaleProduct ?? null;

    $formatDateTime = function ($value) {
        try {
            return $value ? \Carbon\Carbon::parse($value)->format('d/m/Y à H:i') : '—';
        } catch (\Throwable $e) {
            return '—';
        }
    };

    $formatDate = function ($value) {
        try {
            return $value ? \Carbon\Carbon::parse($value)->format('d/m/Y') : '—';
        } catch (\Throwable $e) {
            return '—';
        }
    };

    $diffForHumans = function ($value) {
        try {
            return $value ? \Carbon\Carbon::parse($value)->diffForHumans() : '—';
        } catch (\Throwable $e) {
            return '—';
        }
    };
@endphp
<div class="client-dashboard" x-data="{ 
    showRatingModal: false, 
    showDisputeModal: false,
    rating: 5,
    setRating(value) { this.rating = value; }
}">
    {{-- Hero Section --}}
    <section class="dashboard-hero py-8">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">Transaction #{{ $escrow->id }}</h1>
                    <p class="mt-1 text-gray-500">Détails de votre paiement sécurisé</p>
                </div>
                <a href="{{ route('client.escrow.index') }}" class="btn-secondary">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
                    </svg>
                    Retour
                </a>
            </div>
        </div>
    </section>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-12">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            {{-- Colonne principale --}}
            <div class="lg:col-span-2 space-y-6">
                {{-- Statut --}}
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <div class="flex items-center justify-between mb-6">
                        <h2 class="text-lg font-semibold text-gray-900">Statut de la transaction</h2>
                        <span class="inline-flex px-4 py-2 rounded-full text-sm font-medium
                            @if($escrow->status === 'pending') bg-yellow-100 text-yellow-800
                            @elseif($escrow->status === 'partial') bg-purple-100 text-purple-800
                            @elseif($escrow->status === 'released') bg-green-100 text-green-800
                            @elseif($escrow->status === 'refunded') bg-blue-100 text-blue-800
                            @elseif($escrow->status === 'partially_refunded') bg-indigo-100 text-indigo-800
                            @elseif($escrow->status === 'disputed') bg-red-100 text-red-800
                            @elseif($escrow->status === 'dispute_review') bg-orange-100 text-orange-800
                            @elseif($escrow->status === 'cancelled') bg-gray-100 text-gray-800
                            @endif">
                            @switch($escrow->status)
                                @case('pending')
                                    🔒 Argent bloqué - En attente de confirmation
                                    @break
                                @case('partial')
                                    🟣 Paiement partiel libéré
                                    @break
                                @case('released')
                                    ✅ Paiement libéré au prestataire
                                    @break
                                @case('refunded')
                                    💰 Remboursement effectué
                                    @break
                                @case('partially_refunded')
                                    💸 Remboursement partiel effectué
                                    @break
                                @case('disputed')
                                    ⚠️ Litige en cours
                                    @break
                                @case('dispute_review')
                                    📁 Dossier litige enregistré
                                    @break
                                @case('cancelled')
                                    ❌ Transaction annulée
                                    @break
                            @endswitch
                        </span>
                    </div>

                    {{-- Timeline --}}
                    <div class="relative">
                        <div class="absolute left-4 top-0 h-full w-0.5 bg-gray-200"></div>
                        
                        <div class="space-y-6">
                            {{-- Création --}}
                            <div class="relative flex items-start">
                                <div class="flex items-center justify-center w-8 h-8 rounded-full bg-green-500 text-white z-10">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                    </svg>
                                </div>
                                <div class="ml-4">
                                    <p class="font-medium text-gray-900">Paiement reçu et bloqué</p>
                                    <p class="text-sm text-gray-500">{{ $formatDateTime($escrow->created_at ?? null) }}</p>
                                </div>
                            </div>

                            {{-- Confirmation client --}}
                            <div class="relative flex items-start">
                                <div class="flex items-center justify-center w-8 h-8 rounded-full z-10
                                    @if($escrow->client_confirmed_at) bg-green-500 text-white
                                    @elseif($escrow->status === 'pending') bg-yellow-500 text-white
                                    @else bg-gray-300 text-gray-500
                                    @endif">
                                    @if($escrow->client_confirmed_at)
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                        </svg>
                                    @elseif($escrow->status === 'pending')
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                        </svg>
                                    @else
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                                        </svg>
                                    @endif
                                </div>
                                <div class="ml-4">
                                    @if($escrow->client_confirmed_at)
                                        <p class="font-medium text-gray-900">Vous avez confirmé</p>
                                        <p class="text-sm text-gray-500">{{ $formatDateTime($escrow->client_confirmed_at ?? null) }}</p>
                                    @elseif($escrow->status === 'pending')
                                        <p class="font-medium text-yellow-600">En attente de votre confirmation</p>
                                        @if($escrow->auto_release_at)
                                            <p class="text-sm text-gray-500">Libération automatique {{ $diffForHumans($escrow->auto_release_at ?? null) }}</p>
                                        @endif
                                    @else
                                        <p class="font-medium text-gray-500">Confirmation client</p>
                                    @endif
                                </div>
                            </div>

                            {{-- Libération --}}
                            <div class="relative flex items-start">
                                <div class="flex items-center justify-center w-8 h-8 rounded-full z-10
                                    @if($escrow->released_at) bg-green-500 text-white
                                    @else bg-gray-300 text-gray-500
                                    @endif">
                                    @if($escrow->released_at)
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                        </svg>
                                    @else
                                        <span class="text-xs">3</span>
                                    @endif
                                </div>
                                <div class="ml-4">
                                    @if($escrow->released_at)
                                        <p class="font-medium text-gray-900">Paiement libéré</p>
                                        <p class="text-sm text-gray-500">{{ $formatDateTime($escrow->released_at ?? null) }}</p>
                                    @else
                                        <p class="font-medium text-gray-500">Libération du paiement</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Détails de l'élément --}}
                @if($relatedItem)
                    <div class="bg-white rounded-xl shadow-sm p-6">
                        <h2 class="text-lg font-semibold text-gray-900 mb-4">Détails</h2>
                        
                        <div class="space-y-3">
                            @if($isBooking)
                                <div class="flex justify-between py-2 border-b border-gray-100">
                                    <span class="text-gray-500">Type</span>
                                    <span class="font-medium">Réservation de service</span>
                                </div>
                                <div class="flex justify-between py-2 border-b border-gray-100">
                                    <span class="text-gray-500">Date prévue</span>
                                    <span class="font-medium">{{ $formatDate($relatedItem->start_date ?? ($relatedItem->booking_date ?? null)) }}</span>
                                </div>
                            @elseif($isEquipment)
                                <div class="flex justify-between py-2 border-b border-gray-100">
                                    <span class="text-gray-500">Type</span>
                                    <span class="font-medium">Location d'équipement</span>
                                </div>
                                <div class="flex justify-between py-2 border-b border-gray-100">
                                    <span class="text-gray-500">Période</span>
                                    <span class="font-medium">
                                        {{ $formatDate($relatedItem->start_date ?? null) }} - 
                                        {{ $formatDate($relatedItem->end_date ?? null) }}
                                    </span>
                                </div>
                            @elseif($isUrgentSale)
                                <div class="flex justify-between py-2 border-b border-gray-100">
                                    <span class="text-gray-500">Type</span>
                                    <span class="font-medium">Vente urgente</span>
                                </div>
                                @if(isset($urgentSaleProduct) && $urgentSaleProduct)
                                    <div class="flex justify-between py-2 border-b border-gray-100">
                                        <span class="text-gray-500">Produit</span>
                                        <span class="font-medium">{{ $urgentSaleProduct->title ?? '—' }}</span>
                                    </div>
                                @endif
                                <div class="flex justify-between py-2 border-b border-gray-100">
                                    <span class="text-gray-500">Quantité</span>
                                    <span class="font-medium">{{ $relatedItem->quantity ?? 1 }}</span>
                                </div>
                                <div class="flex justify-between py-2 border-b border-gray-100">
                                    <span class="text-gray-500">Prix unitaire</span>
                                    <span class="font-medium">{{ number_format((float) ($relatedItem->unit_price ?? 0), 2, ',', ' ') }} €</span>
                                </div>
                                <div class="flex justify-between py-2 border-b border-gray-100">
                                    <span class="text-gray-500">Montant total</span>
                                    <span class="font-medium text-green-600">{{ number_format((float) ($relatedItem->total_amount ?? 0), 2, ',', ' ') }} €</span>
                                </div>
                                <div class="flex justify-between py-2 border-b border-gray-100">
                                    <span class="text-gray-500">Statut achat</span>
                                    <span class="inline-flex px-2 py-1 rounded-full text-xs font-medium
                                        @if(($relatedItem->status ?? '') === 'paid') bg-green-100 text-green-800
                                        @elseif(($relatedItem->status ?? '') === 'pending') bg-yellow-100 text-yellow-800
                                        @else bg-gray-100 text-gray-800
                                        @endif">
                                        @switch($relatedItem->status ?? '')
                                            @case('paid') Payé @break
                                            @case('pending') En attente @break
                                            @case('refunded') Remboursé @break
                                            @case('cancelled') Annulé @break
                                            @default {{ ucfirst($relatedItem->status ?? '—') }}
                                        @endswitch
                                    </span>
                                </div>
                                <div class="flex justify-between py-2">
                                    <span class="text-gray-500">Date d'achat</span>
                                    <span class="font-medium">{{ $formatDateTime($relatedItem->created_at ?? null) }}</span>
                                </div>
                            @endif
                        </div>
                    </div>
                @endif

                {{-- Vendeur / Prestataire --}}
                @php $prestataire = $prestataire ?? null; @endphp
                @if($prestataire)
                    @php
                        $prestatairePhoto = $prestataire->profile_image ?? $prestataire->photo ?? null;
                        $prestataireName = $prestataire->company_name ?? $prestataire->user_name ?? 'Vendeur';
                        $prestataireRating = $prestataire->rating_average ?? null;
                        $prestataireReviews = $prestataire->total_reviews ?? 0;
                    @endphp
                    <div class="bg-white rounded-xl shadow-sm p-6">
                        <h2 class="text-lg font-semibold text-gray-900 mb-4">
                            <svg class="w-5 h-5 inline mr-2 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                            </svg>
                            Vendeur
                        </h2>
                        
                        <div class="flex items-center space-x-4">
                            {{-- Photo de profil --}}
                            <div class="flex-shrink-0">
                                @if($prestatairePhoto)
                                    <img src="{{ asset('storage/' . $prestatairePhoto) }}" 
                                         alt="{{ $prestataireName }}"
                                         class="w-16 h-16 rounded-full object-cover border-2 border-gray-200">
                                @else
                                    <div class="w-16 h-16 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-white font-bold text-xl">
                                        {{ strtoupper(substr($prestataireName, 0, 1)) }}
                                    </div>
                                @endif
                            </div>
                            
                            {{-- Infos vendeur --}}
                            <div class="flex-1 min-w-0">
                                <p class="text-lg font-semibold text-gray-900 truncate">
                                    {{ $prestataireName }}
                                </p>
                                @if($prestataireRating)
                                    <div class="flex items-center mt-1">
                                        <div class="flex items-center">
                                            @for($i = 1; $i <= 5; $i++)
                                                <svg class="w-4 h-4 {{ $i <= round($prestataireRating) ? 'text-yellow-400' : 'text-gray-300' }}" fill="currentColor" viewBox="0 0 20 20">
                                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                                                </svg>
                                            @endfor
                                        </div>
                                        <span class="ml-2 text-sm text-gray-500">
                                            {{ number_format($prestataireRating, 1) }}
                                            @if($prestataireReviews > 0)
                                                ({{ $prestataireReviews }} avis)
                                            @endif
                                        </span>
                                    </div>
                                @endif
                            </div>
                            
                            {{-- Actions --}}
                            <div class="flex items-center space-x-2">
                                {{-- Bouton Message --}}
                                @if($prestataire->user_id)
                                    <a href="{{ route('messaging.show', ['user' => $prestataire->user_id]) }}" 
                                       class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 transition-colors"
                                       title="Envoyer un message">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                                        </svg>
                                    </a>
                                @endif
                                
                                {{-- Bouton Voir profil --}}
                                @if($prestataire->id)
                                    <a href="{{ route('prestataires.show', ['prestataire' => $prestataire->id]) }}" 
                                       class="inline-flex items-center justify-center px-4 py-2 rounded-lg bg-indigo-100 text-indigo-600 hover:bg-indigo-200 transition-colors text-sm font-medium">
                                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                                        </svg>
                                        Voir profil
                                    </a>
                                @endif
                            </div>
                        </div>
                    </div>
                @endif

                {{-- Suivi livraison --}}
                @if($shipment)
                    <div class="bg-white rounded-xl shadow-sm p-6">
                        <h2 class="text-lg font-semibold text-gray-900 mb-4">
                            <svg class="w-5 h-5 inline mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0"/>
                            </svg>
                            Suivi de livraison
                        </h2>
                        
                        <div class="space-y-3">
                            <div class="flex justify-between py-2 border-b border-gray-100">
                                <span class="text-gray-500">Transporteur</span>
                                <span class="font-medium">{{ ucfirst(str_replace('_', ' ', (string) ($shipment->carrier ?? ''))) }}</span>
                            </div>
                            <div class="flex justify-between py-2 border-b border-gray-100">
                                <span class="text-gray-500">N° de suivi</span>
                                <span class="font-medium font-mono">{{ $shipment->tracking_number }}</span>
                            </div>
                            <div class="flex justify-between py-2 border-b border-gray-100">
                                <span class="text-gray-500">Statut</span>
                                <span class="inline-flex px-2 py-1 rounded-full text-xs font-medium
                                    @if($shipment->status === 'delivered') bg-green-100 text-green-800
                                    @elseif($shipment->status === 'in_transit') bg-blue-100 text-blue-800
                                    @else bg-gray-100 text-gray-800
                                    @endif">
                                    @switch($shipment->status)
                                        @case('pending') En préparation @break
                                        @case('shipped') Expédié @break
                                        @case('in_transit') En transit @break
                                        @case('out_for_delivery') En cours de livraison @break
                                        @case('delivered') Livré @break
                                        @case('returned') Retourné @break
                                    @endswitch
                                </span>
                            </div>
                            
                            @if($shipment->tracking_url)
                                <a href="{{ $shipment->tracking_url }}" target="_blank" 
                                   class="inline-flex items-center text-blue-600 hover:text-blue-800 mt-2">
                                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
                                    </svg>
                                    Suivre sur le site du transporteur
                                </a>
                            @endif
                        </div>
                    </div>
                @endif

                {{-- Dossier litige (si existant) --}}
                @if(!empty($dispute))
                    <div class="bg-white rounded-xl shadow-sm p-6">
                        <h2 class="text-lg font-semibold text-gray-900 mb-4">Dossier litige</h2>
                        <div class="space-y-3">
                            <div class="flex justify-between py-2 border-b border-gray-100">
                                <span class="text-gray-500">Motif</span>
                                <span class="font-medium">{{ ucfirst(str_replace('_', ' ', $dispute->reason ?? '')) }}</span>
                            </div>
                            <div class="py-2 border-b border-gray-100">
                                <p class="text-gray-500 text-sm mb-1">Description</p>
                                <p class="text-gray-900">{{ $dispute->description }}</p>
                            </div>
                            @php
                                $evidence = [];
                                try { $evidence = $dispute->evidence ? json_decode($dispute->evidence, true) : []; } catch (\Exception $e) { $evidence = []; }
                            @endphp
                            @if(!empty($evidence))
                                <div class="py-2">
                                    <p class="text-gray-500 text-sm mb-2">Photos / preuves</p>
                                    <div class="flex flex-wrap gap-2">
                                        @foreach($evidence as $path)
                                            <a class="text-blue-600 hover:text-blue-800 underline text-sm" href="{{ asset('storage/' . $path) }}" target="_blank">Voir</a>
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                            <p class="text-xs text-gray-500">La plateforme enregistre le dossier (photos/infos). Elle ne prend parti de personne.</p>
                        </div>
                    </div>
                @endif
            </div>

            {{-- Colonne latérale --}}
            <div class="space-y-6">
                {{-- Résumé financier --}}
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <h2 class="text-lg font-semibold text-gray-900 mb-4">Résumé financier</h2>
                    
                    <div class="space-y-3">
                        <div class="flex justify-between py-2">
                            <span class="text-gray-500">Montant bloqué</span>
                            <span class="font-bold text-xl">{{ number_format($totalAmount, 2) }} €</span>
                        </div>
                        
                        @if($depositAmount > 0)
                            <div class="flex justify-between py-2 border-t border-gray-100">
                                <span class="text-gray-500">Caution</span>
                                <span class="font-medium">{{ number_format($depositAmount, 2) }} €</span>
                            </div>

                            @if(str_contains((string) ($escrow->escrowable_type ?? ''), 'EquipmentRental'))
                                @php
                                    $escrowMeta = [];
                                    try {
                                        $escrowMeta = !empty($escrow->metadata) ? (json_decode((string) $escrow->metadata, true) ?: []) : [];
                                    } catch (\Throwable $e) {
                                        $escrowMeta = [];
                                    }

                                    $depositStatus = strtolower((string) (($relatedItem->deposit_status ?? null) ?: ($escrowMeta['deposit_status'] ?? 'pending')));
                                    $depositRetained = (float) (($relatedItem->deposit_retained ?? null) ?? ($escrowMeta['deposit_retained'] ?? 0));
                                    $depositReason = trim((string) (($relatedItem->deposit_retention_reason ?? null) ?: ($escrowMeta['deposit_retention_reason'] ?? '')));
                                    $depositReturned = max(0, $depositAmount - $depositRetained);
                                    if (isset($escrowMeta['deposit_returned'])) {
                                        $depositReturned = max(0, (float) $escrowMeta['deposit_returned']);
                                    }

                                    $depositProcessedAt = null;
                                    $processedCandidate = ($relatedItem->equipment_returned_at ?? null) ?: ($escrowMeta['deposit_processed_at'] ?? null);
                                    if (!empty($processedCandidate)) {
                                        try {
                                            $depositProcessedAt = \Illuminate\Support\Carbon::parse($processedCandidate)->format('d/m/Y à H:i');
                                        } catch (\Throwable $e) {
                                            $depositProcessedAt = null;
                                        }
                                    }

                                    $isReturned = $depositStatus === 'returned' || ($depositRetained <= 0 && !empty($depositProcessedAt));
                                    $isRetained = $depositStatus === 'retained' || ($depositRetained >= $depositAmount && $depositAmount > 0);
                                    $isPartial = $depositStatus === 'partial' || (!$isReturned && !$isRetained && $depositRetained > 0);
                                @endphp

                                <div class="mt-2 rounded-lg p-3 border {{ $isReturned ? 'bg-emerald-50 border-emerald-200' : ($isPartial ? 'bg-amber-50 border-amber-200' : ($isRetained ? 'bg-red-50 border-red-200' : 'bg-gray-50 border-gray-200')) }}">
                                    <p class="text-xs font-medium mb-1 {{ $isReturned ? 'text-emerald-700' : ($isPartial ? 'text-amber-700' : ($isRetained ? 'text-red-700' : 'text-gray-700')) }}">
                                        Suivi remboursement caution
                                    </p>
                                    @if($isReturned)
                                        <p class="text-sm font-semibold text-emerald-800">Remboursée: {{ number_format($depositReturned, 2) }} €</p>
                                    @elseif($isPartial)
                                        <p class="text-sm font-semibold text-amber-800">
                                            Remboursée: {{ number_format($depositReturned, 2) }} € • Retenue: {{ number_format($depositRetained, 2) }} €
                                        </p>
                                    @elseif($isRetained)
                                        <p class="text-sm font-semibold text-red-800">Retenue intégrale: {{ number_format($depositRetained, 2) }} €</p>
                                    @else
                                        <p class="text-sm font-semibold text-gray-800">En attente de traitement après retour</p>
                                    @endif
                                    @if($depositReason !== '')
                                        <p class="text-xs mt-1 {{ $isRetained || $isPartial ? 'text-red-700' : 'text-gray-600' }}">{{ $depositReason }}</p>
                                    @endif
                                    @if($depositProcessedAt)
                                        <p class="text-xs mt-1 text-gray-600">Traitée le {{ $depositProcessedAt }}</p>
                                    @endif
                                </div>
                            @endif
                        @endif

                        <div class="flex justify-between py-2 border-t border-gray-100">
                            <span class="text-gray-500">Total</span>
                            <span class="font-bold text-green-600">{{ number_format($totalAmount + $depositAmount, 2) }} €</span>
                        </div>
                    </div>

                    @if($escrow->status === 'pending')
                        <div class="mt-6 p-4 bg-blue-50 rounded-lg">
                            <p class="text-sm text-blue-700">
                                <svg class="w-5 h-5 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                                @if($isUrgentSale && $shipment && $shipment->status !== 'delivered')
                                    Votre argent est en sécurité. Pour une vente urgente expédiée, la libération intervient après livraison + confirmation (ou automatiquement après le délai configuré suite à la livraison).
                                @else
                                    Votre argent est en sécurité. Il ne sera libéré qu'après votre confirmation ou automatiquement après 48h.
                                @endif
                            </p>
                        </div>
                    @endif
                </div>

                {{-- Actions --}}
                @if(in_array($escrow->status, ['pending','partial']))
                    @php
                        $clientAlreadyConfirmed = !empty($escrow->client_confirmed_at);
                    @endphp
                    <div class="bg-white rounded-xl shadow-sm p-6">
                        <h2 class="text-lg font-semibold text-gray-900 mb-4">Actions</h2>
                        
                        <div class="space-y-3">
                            @if($isUrgentSale && $shipment && $shipment->status === 'delivered')
                                @if(!$clientAlreadyConfirmed)
                                    <form action="{{ route('client.escrow.confirm-urgent-sale', $escrow->id) }}" method="POST"
                                          onsubmit="return confirm('Confirmez-vous que le produit est conforme ? Le solde restant sera libéré.')">
                                        @csrf
                                        <button type="submit" class="w-full flex items-center justify-center px-4 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
                                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                            </svg>
                                            Produit conforme - Libérer le solde
                                        </button>
                                    </form>
                                @endif

                                <form action="{{ route('client.escrow.non-conformity', $escrow->id) }}" method="POST" enctype="multipart/form-data"
                                      onsubmit="return confirm('Signaler une non-conformité ? Un litige sera ouvert et les fonds resteront bloqués pendant le traitement.')">
                                    @csrf
                                    <div class="p-3 border border-red-200 rounded-lg bg-red-50">
                                        <p class="text-sm font-medium text-red-800 mb-2">Produit non conforme</p>
                                        <p class="text-xs text-red-700 mb-2">
                                            Le litige est ouvert immédiatement. En l'absence d'accord, un partage automatique peut s'appliquer après le délai défini.
                                        </p>
                                        <textarea name="description" rows="3" required minlength="20" maxlength="2000"
                                                  class="mt-1 block w-full border-gray-300 rounded-md shadow-sm" placeholder="Décrivez le problème (au moins 20 caractères)..."></textarea>
                                        <input type="file" name="evidence[]" required multiple accept="image/*" class="mt-2 block w-full text-sm">
                                        <button type="submit" class="mt-3 w-full flex items-center justify-center px-4 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors">
                                            Signaler et ouvrir un litige
                                        </button>
                                    </div>
                                </form>
                            @else
                                @if($isUrgentSale)
                                    @if(!$shipment)
                                        @if(!$clientAlreadyConfirmed)
                                            <form action="{{ route('client.escrow.confirm-urgent-sale', $escrow->id) }}" method="POST" 
                                                  onsubmit="return confirm('Confirmez-vous que le produit est conforme ? Le paiement sera libéré.')">
                                                @csrf
                                                <button type="submit" class="w-full flex items-center justify-center px-4 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
                                                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                                    </svg>
                                                    Produit conforme - Libérer le paiement
                                                </button>
                                            </form>
                                        @endif
                                    @endif
                                @else
                                    @if(!$clientAlreadyConfirmed)
                                        <form action="{{ route('client.escrow.confirm', $escrow->id) }}" method="POST" 
                                              onsubmit="return confirm('Confirmez-vous que tout est OK ? Le paiement sera libéré.')">
                                            @csrf
                                            <button type="submit" class="w-full flex items-center justify-center px-4 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
                                                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                                </svg>
                                                Tout est OK - Libérer le paiement
                                            </button>
                                        </form>
                                    @endif
                                @endif

                                <button @click="showDisputeModal = true" 
                                        class="w-full flex items-center justify-center px-4 py-3 border border-red-300 text-red-700 rounded-lg hover:bg-red-50 transition-colors">
                                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                                    </svg>
                                    Signaler un problème
                                </button>
                            @endif

                            @if($clientAlreadyConfirmed)
                                <div class="p-3 rounded-lg bg-emerald-50 border border-emerald-200 text-emerald-700 text-sm">
                                    ✅ Votre confirmation est bien enregistrée.
                                </div>
                            @endif
                        </div>
                    </div>
                @endif

                {{-- Notation --}}
                @if($canRate)
                    <div class="bg-white rounded-xl shadow-sm p-6">
                        <h2 class="text-lg font-semibold text-gray-900 mb-4">Notez cette expérience</h2>
                        
                        <button @click="showRatingModal = true" 
                                class="w-full flex items-center justify-center px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/>
                            </svg>
                            Noter le prestataire
                        </button>
                    </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Modal Litige --}}
    <div x-show="showDisputeModal" x-cloak 
         class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div x-show="showDisputeModal" @click="showDisputeModal = false" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
            <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>
            <div x-show="showDisputeModal" class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
                <form action="{{ route('client.escrow.dispute', $escrow->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
                        <svg class="h-6 w-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                        </svg>
                    </div>
                        <div class="mt-3 text-center sm:mt-5">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">Signaler un problème</h3>
                            <p class="mt-1 text-sm text-gray-500">Votre dossier (description + preuves) est enregistré et visible par les parties. La plateforme ne prend parti de personne.</p>
                        </div>
                    <div class="mt-5 space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Type de problème</label>
                            <select name="reason" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
                                <option value="">Sélectionnez...</option>
                                <option value="non_conformity">Non conforme</option>
                                   <option value="service_not_provided">Service non réalisé</option>
                                <option value="not_received">Non reçu</option>
                                <option value="damaged">Endommagé</option>
                                <option value="other">Autre</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Description</label>
                            <textarea name="description" rows="4" required minlength="20" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm"></textarea>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Photos (optionnel)</label>
                            <input type="file" name="evidence[]" multiple accept="image/*" class="mt-1 block w-full text-sm">
                        </div>
                    </div>
                    <div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3">
                        <button type="submit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-white hover:bg-red-700 sm:col-start-2">Envoyer</button>
                        <button type="button" @click="showDisputeModal = false" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 px-4 py-2 bg-white text-gray-700 hover:bg-gray-50 sm:mt-0 sm:col-start-1">Annuler</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Modal Notation --}}
    <div x-show="showRatingModal" x-cloak 
         class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div x-show="showRatingModal" @click="showRatingModal = false" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
            <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>
            <div x-show="showRatingModal" class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
                <form action="{{ route('client.escrow.rate', $escrow->id) }}" method="POST">
                    @csrf
                    <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-yellow-100">
                        <svg class="h-6 w-6 text-yellow-600" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                        </svg>
                    </div>
                    <div class="mt-3 text-center sm:mt-5">
                        <h3 class="text-lg leading-6 font-medium text-gray-900">Noter le prestataire</h3>
                    </div>
                    <div class="mt-5 space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 text-center mb-3">Votre note</label>
                            <div class="flex justify-center space-x-2">
                                <template x-for="i in 5" :key="i">
                                    <button type="button" @click="setRating(i)" class="focus:outline-none">
                                        <svg class="w-10 h-10 transition-colors" 
                                             :class="i <= rating ? 'text-yellow-400' : 'text-gray-300'"
                                             fill="currentColor" viewBox="0 0 20 20">
                                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                                        </svg>
                                    </button>
                                </template>
                            </div>
                            <input type="hidden" name="rating" x-bind:value="rating">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Commentaire (optionnel)</label>
                            <textarea name="comment" rows="3" maxlength="500" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm"></textarea>
                        </div>
                        <div>
                            <label class="flex items-center">
                                <input type="checkbox" name="would_recommend" value="1" checked class="rounded border-gray-300 text-blue-600">
                                <span class="ml-2 text-sm text-gray-700">Je recommande ce prestataire</span>
                            </label>
                        </div>
                    </div>
                    <div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3">
                        <button type="submit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-white hover:bg-blue-700 sm:col-start-2">Envoyer</button>
                        <button type="button" @click="showRatingModal = false" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 px-4 py-2 bg-white text-gray-700 hover:bg-gray-50 sm:mt-0 sm:col-start-1">Annuler</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection