@extends('layouts.app')

@section('content')
<div class="client-dashboard" x-data="{ showDisputeModal: false, selectedEscrow: null }">
    {{-- 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">Mes Paiements Sécurisés</h1>
                    <p class="mt-1 text-gray-500">Suivez vos transactions protégées par notre système escrow</p>
                </div>
                <a href="{{ route('client.dashboard') }}" 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 au tableau de bord
                </a>
            </div>
        </div>
    </section>

    {{-- Statistiques --}}
    <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-8">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-yellow-400">
                <div class="flex items-center">
                    <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
                        <svg class="w-6 h-6" 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>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm text-gray-500">En attente</p>
                        <p class="text-2xl font-bold text-gray-900">{{ $escrows->where('status', 'pending')->count() }}</p>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-green-400">
                <div class="flex items-center">
                    <div class="p-3 rounded-full bg-green-100 text-green-600">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm text-gray-500">Terminées</p>
                        <p class="text-2xl font-bold text-gray-900">{{ $escrows->where('status', 'released')->count() }}</p>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-red-400">
                <div class="flex items-center">
                    <div class="p-3 rounded-full bg-red-100 text-red-600">
                        <svg class="w-6 h-6" 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="ml-4">
                        <p class="text-sm text-gray-500">Litiges</p>
                        <p class="text-2xl font-bold text-gray-900">{{ $escrows->whereIn('status', ['disputed', 'dispute_review'])->count() }}</p>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-blue-400">
                <div class="flex items-center">
                    <div class="p-3 rounded-full bg-blue-100 text-blue-600">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm text-gray-500">Total bloqué</p>
                        <p class="text-2xl font-bold text-gray-900">{{ number_format($escrows->where('status', 'pending')->sum('total_amount'), 2) }} €</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Liste des transactions --}}
    <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
                <h2 class="text-lg font-semibold text-gray-900">Vos transactions sécurisées</h2>
            </div>

            @if($escrows->isEmpty())
                <div class="p-12 text-center">
                    <svg class="w-16 h-16 mx-auto text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                    </svg>
                    <p class="mt-4 text-gray-500">Aucune transaction sécurisée pour le moment</p>
                    <p class="mt-2 text-sm text-gray-400">Vos prochains achats avec paiement sécurisé apparaîtront ici</p>
                </div>
            @else
                <div class="divide-y divide-gray-200">
                    @foreach($escrows as $escrow)
                        <div class="p-6 hover:bg-gray-50 transition-colors">
                            <div class="flex items-start justify-between">
                                <div class="flex items-start space-x-4">
                                    {{-- Icône selon le type --}}
                                    <div class="p-3 rounded-lg 
                                        @if(str_contains($escrow->escrowable_type ?? '', 'Booking')) bg-blue-100 text-blue-600
                                        @elseif(str_contains($escrow->escrowable_type ?? '', 'Equipment')) bg-purple-100 text-purple-600
                                        @elseif(str_contains($escrow->escrowable_type ?? '', 'UrgentSale')) bg-orange-100 text-orange-600
                                        @elseif(str_contains($escrow->escrowable_type ?? '', 'FoodOrder')) bg-amber-100 text-amber-600
                                        @else bg-gray-100 text-gray-600
                                        @endif">
                                        @if(str_contains($escrow->escrowable_type ?? '', 'Booking'))
                                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                                            </svg>
                                        @elseif(str_contains($escrow->escrowable_type ?? '', 'Equipment'))
                                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
                                            </svg>
                                        @elseif(str_contains($escrow->escrowable_type ?? '', 'UrgentSale'))
                                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                                            </svg>
                                        @elseif(str_contains($escrow->escrowable_type ?? '', 'FoodOrder'))
                                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
                                            </svg>
                                        @else
                                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                                            </svg>
                                        @endif
                                    </div>
                                    
                                    <div>
                                        <h3 class="font-medium text-gray-900">
                                            @if(str_contains($escrow->escrowable_type ?? '', 'Booking'))
                                                Réservation de service
                                            @elseif(str_contains($escrow->escrowable_type ?? '', 'Equipment'))
                                                Location d'équipement
                                            @elseif(str_contains($escrow->escrowable_type ?? '', 'UrgentSale'))
                                                Vente urgente
                                            @elseif(str_contains($escrow->escrowable_type ?? '', 'FoodOrder'))
                                                🍽️ Commande alimentaire
                                            @else
                                                Transaction
                                            @endif
                                            <span class="text-gray-400">#{{ $escrow->id }}</span>
                                        </h3>
                                        <p class="text-sm text-gray-500 mt-1">
                                            Créé le {{ \Carbon\Carbon::parse($escrow->created_at)->format('d/m/Y à H:i') }}
                                        </p>
                                        @if($escrow->auto_release_at && $escrow->status === 'pending')
                                            <p class="text-sm text-amber-600 mt-1">
                                                <svg class="w-4 h-4 inline mr-1" 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>
                                                Libération auto : {{ \Carbon\Carbon::parse($escrow->auto_release_at)->diffForHumans() }}
                                            </p>
                                        @endif
                                    </div>
                                </div>

                                <div class="text-right">
                                    {{-- Montant --}}
                                    <p class="text-xl font-bold text-gray-900">{{ number_format($escrow->total_amount, 2) }} €</p>
                                    @if($escrow->deposit_amount > 0)
                                        <p class="text-sm text-gray-500">+ {{ number_format($escrow->deposit_amount, 2) }} € caution</p>
                                    @endif
                                    
                                    {{-- Badge statut --}}
                                    <span class="mt-2 inline-flex px-3 py-1 rounded-full text-xs font-medium
                                        @if($escrow->status === 'pending') bg-yellow-100 text-yellow-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')
                                                🔒 En attente
                                                @break
                                            @case('released')
                                                ✅ Libéré
                                                @break
                                            @case('refunded')
                                                💰 Remboursé
                                                @break
                                            @case('partially_refunded')
                                                💸 Remboursement partiel
                                                @break
                                            @case('disputed')
                                                ⚠️ Litige ouvert
                                                @break
                                            @case('dispute_review')
                                                📁 Dossier litige enregistré
                                                @break
                                            @case('cancelled')
                                                ❌ Annulé
                                                @break
                                        @endswitch
                                    </span>
                                </div>
                            </div>

                            {{-- Actions --}}
                            @if($escrow->status === 'pending' && empty($escrow->client_confirmed_at))
                                @php
                                    $isUrgentSale = str_contains($escrow->escrowable_type ?? '', 'UrgentSale');
                                    $confirmRoute = $isUrgentSale 
                                        ? route('client.escrow.confirm-urgent-sale', $escrow->id) 
                                        : route('client.escrow.confirm', $escrow->id);
                                @endphp
                                <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-end space-x-3">
                                    <form action="{{ $confirmRoute }}" method="POST" 
                                          onsubmit="return confirm('Êtes-vous satisfait de la prestation ? Le paiement sera envoyé au prestataire.')">
                                        @csrf
                                        <button type="submit" class="inline-flex items-center px-4 py-2 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>
                                            Confirmer & Libérer
                                        </button>
                                    </form>
                                    
                                    <a href="{{ route('client.escrow.show', $escrow->id) }}" class="inline-flex items-center px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">
                                        Voir détails
                                    </a>
                                    
                                    <button @click="showDisputeModal = true; selectedEscrow = {{ $escrow->id }}" 
                                            class="inline-flex items-center px-4 py-2 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>
                                </div>
                            @elseif($escrow->status === 'released')
                                <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-end space-x-3">
                                    <a href="{{ route('client.escrow.show', $escrow->id) }}" class="inline-flex items-center px-4 py-2 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
                                    </a>
                                </div>
                            @else
                                <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-end">
                                    <a href="{{ route('client.escrow.show', $escrow->id) }}" class="inline-flex items-center px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">
                                        Voir détails
                                    </a>
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>

                {{-- Pagination --}}
                <div class="px-6 py-4 border-t border-gray-200">
                    {{ $escrows->links() }}
                </div>
            @endif
        </div>
    </section>

    {{-- 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" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
                 @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" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                 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="'/client/escrow/' + selectedEscrow + '/dispute'" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div>
                        <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" id="modal-title">
                                Signaler un problème
                            </h3>
                            <p class="mt-2 text-sm text-gray-500">
                                Décrivez le problème rencontré. Votre dossier (description + preuves) est enregistré et visible par les parties.
                            </p>
                        </div>
                    </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 pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
                                <option value="">Sélectionnez...</option>
                                <option value="non_conformity">Produit/service 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 problème</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700">Description détaillée</label>
                            <textarea name="description" rows="4" required minlength="20" maxlength="2000"
                                      class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                                      placeholder="Décrivez le problème avec le plus de détails possible..."></textarea>
                            <p class="mt-1 text-xs text-gray-500">Minimum 20 caractères</p>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700">Photos/preuves (optionnel)</label>
                            <input type="file" name="evidence[]" multiple accept="image/*" 
                                   class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                            <p class="mt-1 text-xs text-gray-500">Max 5 images de 5 Mo chacune</p>
                        </div>
                    </div>

                    <div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
                        <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-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:col-start-2 sm:text-sm">
                            Envoyer la réclamation
                        </button>
                        <button type="button" @click="showDisputeModal = false" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:col-start-1 sm:text-sm">
                            Annuler
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection