@extends('layouts.app')

@section('title', 'Registration Successful')

@section('content')
<section class="py-24">
    <div class="max-w-md mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto 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-4">Registration Successful!</h1>
        
        @if(session('registration_code'))
        <div class="bg-gray-50 rounded-xl p-6 mb-6">
            <p class="text-sm text-gray-500 mb-2">Your Registration Code</p>
            <p class="text-2xl font-bold text-primary-600">{{ session('registration_code') }}</p>
            @if(session('amount'))
            <div class="mt-4 pt-4 border-t">
                <p class="text-sm text-gray-500">Amount Due</p>
                <p class="text-xl font-bold text-gray-900">IDR {{ number_format(session('amount')) }}</p>
            </div>
            @endif
        </div>
        @endif

        <p class="text-gray-600 mb-6">Thank you for registering. A confirmation email has been sent to <strong>{{ session('email') }}</strong>. Please complete your payment to confirm your participation.</p>

        <div class="bg-yellow-50 p-4 rounded-lg mb-6">
            <p class="text-sm text-yellow-800"><strong>Payment Instructions:</strong> Please transfer the registration fee to our bank account and upload the payment proof via the check status page.</p>
        </div>

        <div class="flex flex-col sm:flex-row gap-4">
            <a href="{{ route('registration.check') }}" class="flex-1 py-3 bg-primary-600 text-white font-semibold rounded-lg hover:bg-primary-700 transition">
                Check Status
            </a>
            <a href="{{ route('home') }}" class="flex-1 py-3 border border-gray-300 text-gray-700 font-semibold rounded-lg hover:bg-gray-50 transition">
                Back to Home
            </a>
        </div>
    </div>
</section>
@endsection
