@extends('layouts.fans')

@section('content')
<div class="container mt-5">
    <div class="card shadow-sm">
        <div class="card-body text-center">
            <h2 class="mb-4">MTN MoMo Payment</h2>
            
            <div class="alert alert-info">
                <strong>Amount:</strong> ${{ number_format($amount, 2) }}<br>
                <strong>Phone:</strong> {{ $phone }}
            </div>

            <div id="status" class="mt-4">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <p class="mt-3">Waiting for payment confirmation...</p>
                <small class="text-muted">Please check your phone and approve the payment request</small>
            </div>

            <div id="error-message" class="alert alert-danger mt-3" style="display: none;"></div>
        </div>
    </div>
</div>

<script>
    const externalId = "{{ $externalId }}";
    let pollCount = 0;
    const maxPolls = 60; // Stop after 4 minutes (60 * 4 seconds)

    const poll = setInterval(() => {
        pollCount++;

        // Stop polling after max attempts
        if (pollCount > maxPolls) {
            clearInterval(poll);
            document.getElementById('status').innerHTML = 
                '<p style="color:orange">Payment timeout. Please check your transaction status.</p>' +
                '<a href="{{ route('fans.fancreateticket') }}" class="btn btn-primary mt-3">Back to Tickets</a>';
            return;
        }

        fetch("{{ route('tickets.momo.callback') }}?externalId=" + externalId)
            .then(r => {
                if (!r.ok) throw new Error('Network response was not ok');
                return r.json();
            })
            .then(data => {
                console.log('Poll response:', data); // Debug log

                if (data.status === 'SUCCESS' && data.ticket_created) {
                    clearInterval(poll);
                    document.getElementById('status').innerHTML = 
                        '<div class="alert alert-success">' +
                        '<i class="fas fa-check-circle fa-3x mb-3"></i>' +
                        '<h4>Payment Successful!</h4>' +
                        '<p>Your ticket has been created. Redirecting...</p>' +
                        '</div>';
                    
                    setTimeout(() => {
                        window.location.href = "{{ route('fans.fancreateticket') }}";
                    }, 2000);
                    
                } else if (data.status === 'FAILED') {
                    clearInterval(poll);
                    document.getElementById('status').innerHTML = 
                        '<div class="alert alert-danger">' +
                        '<i class="fas fa-times-circle fa-3x mb-3"></i>' +
                        '<h4>Payment Failed</h4>' +
                        '<p>The payment could not be processed.</p>' +
                        '<a href="{{ route('fans.fancreateticket') }}" class="btn btn-primary mt-3">Try Again</a>' +
                        '</div>';
                }
                // Otherwise keep polling (status is still PENDING)
            })
            .catch(error => {
                console.error('Polling error:', error);
                document.getElementById('error-message').style.display = 'block';
                document.getElementById('error-message').textContent = 
                    'Connection error. Still checking payment status...';
            });
    }, 4000); // Poll every 4 seconds
</script>
@endsection