@extends('layouts.app2')

@section('title', 'ROOT ERP | الاشتراك')

@section('content')

    <style>
       

        .pending-message {
            max-width: 500px;
            margin: 100px auto;
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
            padding: 40px 30px;
            animation: fadeIn 0.8s ease-in-out;
        }

        .pending-message h3 {
            color: #222;
            font-size: 1.6rem;
            margin-bottom: 15px;
        }

        #status-text {
            color: #555;
            font-size: 1.1rem;
            animation: pulse 1.5s infinite;
        }

        @keyframes pulse {
            0% {
                opacity: 1;
            }

            50% {
                opacity: 0.5;
            }

            100% {
                opacity: 1;
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .spinner {
            border: 4px solid #eee;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            margin: 20px auto;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .retry {
            margin-top: 20px;
            color: #888;
            font-size: 0.95rem;
        }
    </style>
    <div class="pending-message">
        <h3>{{ $message }}</h3>
        <div class="spinner"></div>
        <p id="status-text">@lang('lang_v1.verifying_payment')</p>
        <div class="retry">@lang('lang_v1.do_not_close_page')</div>
    </div>
    <script>
        const requestId = "{{ request('requestId') }}";
        const paymentFailedMsg = @json(__(key: 'lang_v1.payment_failed'));

        function checkStatus() {
            fetch(`/subscription/status/${requestId}`).then(res => res.json()).then(data => {
                if (data.status === 'active') {
                    window.location.href = '/subscription/register?token=' + data.token;
                } else if (data.status === 'failed') {
                    document.getElementById('status-text').innerText = paymentFailedMsg;
                    document.querySelector('.spinner').style.display = 'none';
                } else {
                    setTimeout(checkStatus, 3000);
                }
            }).catch(() => setTimeout(checkStatus, 3000));
        }
        checkStatus();
    </script>

@endsection