@extends('layouts.app')

@section('content')
<section class="lg:container mx-4 mt-24 lg:mt-36">
    <!-- Notification Box -->
    <div class="text-center p-8">
        <h1 class="text-2xl font-bold mb-4">Beralih Ke Halaman Pembayaran</h1>
        <p class="mb-6">Mohon ditunggu, anda akan diarahkan ke halaman pembayaran.</p>
        <div class="w-full bg-gray-200 rounded-full h-2.5 mb-6">
            <div class="bg-blue-600 h-2.5 rounded-full animate-pulse"></div>
        </div>
        <a href="{{ $paymentUrl }}" target="_blank" id="manualRedirect"
            class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
            Klik disini jika halaman tidak otomatis beralih
        </a>
    </div>
</section>
@endsection

@section('javascript')
<script>
    let redirectTimer = setTimeout(function() {
        window.location.href = "{{ $paymentUrl }}";
    }, 5000);

    document.getElementById('manualRedirect').addEventListener('click', function(e) {
        clearTimeout(redirectTimer);
        
        console.log('Redirect otomatis dibatalkan, menggunakan redirect manual');

    });
</script>
@endsection