@extends('layouts.public')

@section('title', 'Inscription confirmée - ' . $event->title)

@section('content')
    <div class="min-h-screen bg-gradient-to-br from-green-50 via-white to-blue-50">
        <div class="max-w-4xl mx-auto px-6 py-12">
            <div class="text-center mb-8">
                <!-- Icône de succès -->
                <div class="mx-auto w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mb-6">
                    <svg class="w-10 h-10 text-green-600" 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>

                <h1 class="text-3xl font-bold text-gray-900 mb-2">Inscription confirmée !</h1>
                <p class="text-lg text-gray-600">Votre inscription à {{ $event->title }} a été enregistrée avec succès.</p>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                
                <!-- Détails de l'inscription -->
                <div class="bg-white rounded-2xl shadow-xl border border-gray-100 p-8">
                    <h2 class="text-xl font-bold text-gray-900 mb-6 flex items-center">
                        <svg class="w-6 h-6 mr-3 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                        </svg>
                        Détails de votre inscription
                    </h2>

                    <div class="space-y-4">
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="text-sm font-medium text-gray-500">Code de réservation</label>
                                <p class="text-lg font-mono font-bold text-blue-600">{{ $registration->ticket_code }}</p>
                            </div>
                            <div>
                                <label class="text-sm font-medium text-gray-500">Statut</label>
                                <p class="text-lg">
                                    @if($registration->status === 'confirmed')
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
                                            <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="M5 13l4 4L19 7"/>
                                            </svg>
                                            Confirmé
                                        </span>
                                    @else
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800">
                                            <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                            </svg>
                                            En attente
                                        </span>
                                    @endif
                                </p>
                            </div>
                        </div>

                        <div class="border-t border-gray-200 pt-4">
                            <h3 class="font-medium text-gray-900 mb-3">Informations du participant</h3>
                            <div class="grid grid-cols-1 gap-3 text-sm">
                                <div class="flex justify-between">
                                    <span class="text-gray-600">Nom complet:</span>
                                    <span class="font-medium">{{ $registration->full_name }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-600">Email:</span>
                                    <span class="font-medium">{{ $registration->email }}</span>
                                </div>
                                @if($registration->phone)
                                    <div class="flex justify-between">
                                        <span class="text-gray-600">Téléphone:</span>
                                        <span class="font-medium">{{ $registration->phone }}</span>
                                    </div>
                                @endif
                                @if($registration->company)
                                    <div class="flex justify-between">
                                        <span class="text-gray-600">Entreprise:</span>
                                        <span class="font-medium">{{ $registration->company }}</span>
                                    </div>
                                @endif
                            </div>
                        </div>

                        <div class="border-t border-gray-200 pt-4">
                            <h3 class="font-medium text-gray-900 mb-3">Détails du billet</h3>
                            <div class="grid grid-cols-1 gap-3 text-sm">
                                <div class="flex justify-between">
                                    <span class="text-gray-600">Type de billet:</span>
                                    <span class="font-medium">{{ $registration->ticketType->name }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-600">Quantité:</span>
                                    <span class="font-medium">{{ $registration->quantity }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-600">Prix unitaire:</span>
                                    <span class="font-medium">
                                        @if($registration->ticketType->price > 0)
                                            {{ number_format($registration->ticketType->price, 0, ',', ' ') }} FCFA
                                        @else
                                            Gratuit
                                        @endif
                                    </span>
                                </div>
                                <div class="flex justify-between font-bold text-lg pt-2 border-t border-gray-200">
                                    <span class="text-gray-900">Total payé:</span>
                                    <span class="text-blue-600">
                                        @if($registration->total_amount > 0)
                                            {{ number_format($registration->total_amount, 0, ',', ' ') }} FCFA
                                        @else
                                            Gratuit
                                        @endif
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Informations sur l'événement -->
                <div class="bg-white rounded-2xl shadow-xl border border-gray-100 p-8">
                    <h2 class="text-xl font-bold text-gray-900 mb-6 flex items-center">
                        <svg class="w-6 h-6 mr-3 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                        </svg>
                        Détails de l'événement
                    </h2>

                    <div class="space-y-4">
                        <div>
                            <h3 class="font-medium text-gray-900">{{ $event->title }}</h3>
                            @if($event->subtitle)
                                <p class="text-gray-600">{{ $event->subtitle }}</p>
                            @endif
                        </div>

                        <div class="space-y-3">
                            <div class="flex items-center space-x-3">
                                <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
                                    <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                    </svg>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-600">Date de début</p>
                                    <p class="font-medium">{{ $event->start_date->format('d/m/Y à H:i') }}</p>
                                </div>
                            </div>

                            @if($event->end_date && $event->end_date->ne($event->start_date))
                                <div class="flex items-center space-x-3">
                                    <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center">
                                        <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                        </svg>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-600">Date de fin</p>
                                        <p class="font-medium">{{ $event->end_date->format('d/m/Y à H:i') }}</p>
                                    </div>
                                </div>
                            @endif

                            @if($event->location)
                                <div class="flex items-center space-x-3">
                                    <div class="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center">
                                        <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                                        </svg>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-600">Lieu</p>
                                        <p class="font-medium">{{ $event->location }}</p>
                                        @if($event->address)
                                            <p class="text-sm text-gray-500">{{ $event->address }}</p>
                                        @endif
                                    </div>
                                </div>
                            @endif
                        </div>

                        @if($event->contact_email || $event->contact_phone)
                            <div class="border-t border-gray-200 pt-4">
                                <h4 class="font-medium text-gray-900 mb-3">Contact organisateur</h4>
                                <div class="space-y-2 text-sm">
                                    @if($event->contact_email)
                                        <div class="flex items-center space-x-2">
                                            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.945a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                                            </svg>
                                            <a href="mailto:{{ $event->contact_email }}" class="text-blue-600 hover:text-blue-800">{{ $event->contact_email }}</a>
                                        </div>
                                    @endif
                                    @if($event->contact_phone)
                                        <div class="flex items-center space-x-2">
                                            <svg class="w-4 h-4 text-gray-400" 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>
                                            <a href="tel:{{ $event->contact_phone }}" class="text-blue-600 hover:text-blue-800">{{ $event->contact_phone }}</a>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Prochaines étapes -->
            <div class="mt-8 bg-blue-50 border border-blue-200 rounded-2xl p-6">
                <h3 class="text-lg font-bold text-blue-900 mb-4 flex items-center">
                    <svg class="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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    Prochaines étapes
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-blue-800">
                    <div class="flex items-start space-x-3">
                        <div class="w-6 h-6 bg-blue-200 rounded-full flex items-center justify-center mt-0.5">
                            <span class="text-xs font-bold">1</span>
                        </div>
                        <div>
                            <p class="font-medium">Confirmation par email</p>
                            <p>Vous recevrez un email de confirmation avec tous les détails de votre inscription.</p>
                        </div>
                    </div>
                    <div class="flex items-start space-x-3">
                        <div class="w-6 h-6 bg-blue-200 rounded-full flex items-center justify-center mt-0.5">
                            <span class="text-xs font-bold">2</span>
                        </div>
                        <div>
                            <p class="font-medium">Conservez votre code</p>
                            <p>Notez votre code de réservation <strong>{{ $registration->ticket_code }}</strong> pour le jour de l'événement.</p>
                        </div>
                    </div>
                    <div class="flex items-start space-x-3">
                        <div class="w-6 h-6 bg-blue-200 rounded-full flex items-center justify-center mt-0.5">
                            <span class="text-xs font-bold">3</span>
                        </div>
                        <div>
                            <p class="font-medium">Jour de l'événement</p>
                            <p>Présentez-vous avec votre code de réservation et une pièce d'identité.</p>
                        </div>
                    </div>
                    <div class="flex items-start space-x-3">
                        <div class="w-6 h-6 bg-blue-200 rounded-full flex items-center justify-center mt-0.5">
                            <span class="text-xs font-bold">4</span>
                        </div>
                        <div>
                            <p class="font-medium">Rappels</p>
                            <p>Nous vous enverrons des rappels par email avant l'événement.</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Actions -->
            <div class="mt-8 flex flex-col sm:flex-row sm:items-center sm:justify-center space-y-4 sm:space-y-0 sm:space-x-4">
                <a href="{{ route('event.show', $event->slug) }}"
                    class="inline-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 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 l'événement
                </a>
                <a href="{{ route('home') }}"
                    class="inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-lg text-sm font-medium text-white bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 transition-all duration-200">
                    <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 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
                    </svg>
                    Retour à l'accueil
                </a>
            </div>
        </div>
    </div>
@endsection