@extends('layouts.public')

@section('title', 'Paiement en cours - ' . $event->title)

@section('content')
    <div class="min-h-screen bg-gradient-to-br from-yellow-50 via-white to-orange-50">
        <div class="max-w-2xl mx-auto px-6 py-12">
            <div class="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
                
                <!-- Header -->
                <div class="bg-gradient-to-r from-yellow-400 to-orange-500 px-8 py-6">
                    <h1 class="text-2xl font-bold text-white text-center flex items-center justify-center">
                        <svg class="animate-spin w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                        </svg>
                        Paiement en cours...
                    </h1>
                    <p class="text-yellow-100 text-center mt-2">Veuillez vérifier votre téléphone pour confirmer</p>
                </div>

                <div class="p-8">
                    <!-- Animation de chargement principale -->
                    <div class="text-center mb-8">
                        <div class="mx-auto w-20 h-20 bg-yellow-100 rounded-full flex items-center justify-center mb-4">
                            <svg class="animate-pulse w-10 h-10 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18l9-5-9-5-9 5 9 5z"/>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 12l9-5-9-5-9 5 9 5z"/>
                            </svg>
                        </div>
                        <p class="text-lg text-gray-600">
                            Veuillez vérifier votre téléphone <span class="font-bold text-gray-900">{{ $phone_number }}</span><br>
                            et suivre les instructions pour confirmer votre paiement.
                        </p>
                    </div>

                    <!-- Détails du paiement -->
                    <div class="bg-gray-50 rounded-xl p-6 mb-6">
                        <h3 class="font-medium text-gray-900 mb-4">Détails du paiement</h3>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="text-sm text-gray-500">Montant</label>
                                <p class="text-lg font-bold text-gray-900">{{ number_format($registration->total_amount, 0, ',', ' ') }} FCFA</p>
                            </div>
                            <div>
                                <label class="text-sm text-gray-500">Fournisseur</label>
                                <p class="text-lg font-bold">
                                    @if ($provider === 'tmoney')
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800">
                                            T-Money
                                        </span>
                                    @elseif($provider === 'flooz')
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800">
                                            Flooz
                                        </span>
                                    @endif
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Statut du paiement -->
                    <div id="payment-status" class="mb-6">
                        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                            <div class="flex items-center">
                                <svg class="animate-spin w-5 h-5 text-blue-600 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                                </svg>
                                <span class="text-blue-800 font-medium">En attente de confirmation...</span>
                            </div>
                        </div>
                    </div>

                    <!-- Instructions -->
                    <div class="bg-blue-50 border border-blue-200 rounded-lg p-6 mb-6">
                        <h4 class="font-medium text-blue-900 mb-3 flex items-center">
                            <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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                            Instructions
                        </h4>
                        <ol class="list-decimal list-inside space-y-2 text-sm text-blue-800">
                            <li>Vous devriez recevoir un SMS sur votre téléphone</li>
                            <li>Suivez les instructions dans le SMS pour confirmer</li>
                            <li>Saisissez votre code PIN Mobile Money</li>
                            <li>Confirmez le paiement</li>
                        </ol>
                    </div>

                    <!-- Boutons d'action -->
                    <div class="space-y-3">
                        <button onclick="checkPaymentStatus()" id="check-status-btn"
                            class="w-full flex items-center justify-center px-6 py-3 border border-transparent rounded-lg text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                            </svg>
                            Vérifier le statut
                        </button>
                        
                        <a href="{{ route('registration.payment', $event) }}"
                            class="w-full flex items-center justify-center px-6 py-3 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition-colors">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                            </svg>
                            Essayer un autre mode de paiement
                        </a>
                    </div>

                    <!-- Support -->
                    <div class="mt-8 pt-6 border-t border-gray-200 text-center">
                        <div class="flex items-center justify-center text-sm text-gray-500">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                            </svg>
                            Besoin d'aide ? Contactez-nous au {{ $event->contact_phone ?? '+228 96 05 53 53 / 96 05 53 53' }} ou par email à <a href="mailto:{{ $event->contact_email ?? 'infos@logexit.com' }}" class="text-blue-600 hover:underline">{{ $event->contact_email }}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        let checkInterval;

        document.addEventListener('DOMContentLoaded', function() {
            // Vérifier automatiquement le statut toutes les 10 secondes
            checkInterval = setInterval(checkPaymentStatus, 10000);

            // Arrêter la vérification après 10 minutes
            setTimeout(() => {
                clearInterval(checkInterval);
                showTimeoutMessage();
            }, 600000); // 10 minutes
        });

        function checkPaymentStatus() {
            const statusDiv = document.getElementById('payment-status');
            const checkBtn = document.getElementById('check-status-btn');

            checkBtn.disabled = true;
            checkBtn.innerHTML = `
                <svg class="animate-spin w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                </svg>
                Vérification...
            `;

            fetch('{{ route('registration.payment.check-status') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    },
                    body: JSON.stringify({
                        registration_id: {{ $registration->id }}
                    })
                })
                .then(response => response.json())
                .then(data => {
                    checkBtn.disabled = false;
                    checkBtn.innerHTML = `
                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                        </svg>
                        Vérifier le statut
                    `;

                    if (data.status === 'paid') {
                        clearInterval(checkInterval);
                        statusDiv.innerHTML = `
                            <div class="bg-green-50 border border-green-200 rounded-lg p-4">
                                <div class="flex items-center">
                                    <svg class="w-5 h-5 text-green-600 mr-3" 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>
                                    <span class="text-green-800 font-medium">${data.message}</span>
                                </div>
                            </div>
                        `;

                        // Rediriger vers la page de succès après 2 secondes
                        setTimeout(() => {
                            window.location.href = '{{ route('registration.success', $event) }}';
                        }, 2000);

                    } else if (data.status === 'failed' || data.status === 'cancelled') {
                        clearInterval(checkInterval);
                        statusDiv.innerHTML = `
                            <div class="bg-red-50 border border-red-200 rounded-lg p-4">
                                <div class="flex items-center">
                                    <svg class="w-5 h-5 text-red-600 mr-3" 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>
                                    <span class="text-red-800 font-medium">${data.message}</span>
                                </div>
                            </div>
                        `;

                    } else {
                        statusDiv.innerHTML = `
                            <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                                <div class="flex items-center">
                                    <svg class="animate-spin w-5 h-5 text-blue-600 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                                    </svg>
                                    <span class="text-blue-800 font-medium">${data.message}</span>
                                </div>
                            </div>
                        `;
                    }
                })
                .catch(error => {
                    console.error('Erreur:', error);
                    checkBtn.disabled = false;
                    checkBtn.innerHTML = `
                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                        </svg>
                        Vérifier le statut
                    `;
                });
        }

        function showTimeoutMessage() {
            const statusDiv = document.getElementById('payment-status');
            statusDiv.innerHTML = `
                <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                    <div class="flex items-center">
                        <svg class="w-5 h-5 text-yellow-600 mr-3" 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-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.268 16.5c-.77.833.192 2.5 1.732 2.5z"/>
                        </svg>
                        <span class="text-yellow-800 font-medium">Temps d'attente dépassé. Veuillez vérifier manuellement le statut ou contacter le support.</span>
                    </div>
                </div>
            `;
        }
    </script>
@endsection