@extends('donations.layout')

@section('title', 'Donation Status')

@section('content')
    <div class="intro">
        <span class="eyebrow">Donation update</span>
        <h1>Your donation</h1>
    </div>

    <section class="card status-card" id="donationStatus" data-status-url="{{ route('donations.status', $donation->payment_provider === 'paystack' ? ['reference' => $donation->paystack_reference] : ['session_id' => $donation->stripe_checkout_session_id]) }}" data-initial-status="{{ $donation->status }}">
        @if ($donation->status === 'paid')
            <div class="status-icon" aria-hidden="true">✓</div>
            <h2>Thank you, {{ $donation->donor_name }}!</h2>
            <p>Thank you. Your donation has been received and confirmed by Paystack. A receipt will be sent to your email address.</p>
        @elseif ($donation->status === 'refunded')
            <div class="status-icon cancelled" aria-hidden="true">↩</div>
            <h2>This donation was refunded</h2>
            <p>Your donation has been refunded. Contact DFHA if you have questions.</p>
        @elseif ($donation->status === 'failed')
            <div class="status-icon failed" aria-hidden="true">!</div>
            <h2>Payment not completed</h2>
            <p>Paystack was unable to confirm this donation. You can try again securely.</p>
        @elseif ($donation->status === 'cancelled' || $donation->status === 'expired')
            <div class="status-icon cancelled" aria-hidden="true">×</div>
            <h2>No donation was completed</h2>
            <p>This checkout was cancelled or expired. You can return to the donation form if you would like to try again.</p>
        @else
            <div class="status-icon pending" aria-hidden="true">…</div>
            <h2>Confirming your donation</h2>
            <p id="pendingMessage">We’re verifying your payment with Paystack. This page will update automatically; please don’t submit another payment.</p>
        @endif

        <dl class="details">
            <div><dt>Donor</dt><dd>{{ $donation->donor_name }}</dd></div>
            <div><dt>Donation amount</dt><dd>{{ $donation->formattedAmount() }} {{ strtoupper($donation->currency) }}</dd></div>
            <div><dt>Reference</dt><dd>{{ $donation->public_id }}</dd></div>
            <div><dt>Transaction status</dt><dd id="statusValue">{{ ucfirst($donation->status) }}</dd></div>
            @if ($donation->paid_at)
                <div><dt>Payment date</dt><dd>{{ $donation->paid_at->format('M j, Y g:i A') }} UTC</dd></div>
            @endif
        </dl>

        <div class="actions">
            @if ($donation->status === 'failed')
                <a class="button" href="{{ route('donations.failed', ['donation' => $donation->public_id]) }}">View payment options</a>
            @elseif ($donation->status !== 'paid')
                <a class="button" href="{{ route('donations.create') }}">Return to donation form</a>
            @endif
            <a class="inline-link" href="{{ url('/') }}">Return to DFHA home</a>
        </div>
    </section>

    @if ($donation->status === 'pending' || $donation->status === 'processing')
        <script>
            (function () {
                var panel = document.getElementById('donationStatus');
                var attempts = 0;
                var timer = window.setInterval(function () {
                    attempts += 1;
                    fetch(panel.dataset.statusUrl, {headers: {'Accept': 'application/json'}})
                        .then(function (response) {
                            if (!response.ok) {
                                throw new Error('Unable to refresh donation status.');
                            }
                            return response.json();
                        })
                        .then(function (data) {
                            if (data.status !== panel.dataset.initialStatus) {
                                window.location.reload();
                            } else if (attempts >= 12) {
                                window.clearInterval(timer);
                                document.getElementById('pendingMessage').textContent = 'Payment confirmation is taking longer than expected. You can safely refresh this page later; please do not submit another payment.';
                            }
                        })
                        .catch(function () {
                            window.clearInterval(timer);
                            document.getElementById('pendingMessage').textContent = 'We could not refresh the payment status right now. You can safely refresh this page later.';
                        });
                }, 3000);
            })();
        </script>
    @endif
@endsection