@extends('donations.layout')

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

@section('content')
    <div class="intro">
        <span class="eyebrow">Checkout cancelled</span>
        <h1>No donation was completed</h1>
        <p>You left {{ ucfirst($donation->payment_provider) }} checkout before completing your donation. No successful payment has been confirmed.</p>
    </div>

    @php($hasPaymentReference = $donation->payment_provider === 'paystack' ? filled($donation->paystack_reference) : filled($donation->stripe_checkout_session_id))
    @php($statusParameters = $donation->payment_provider === 'paystack' ? ['reference' => $donation->paystack_reference] : ['session_id' => $donation->stripe_checkout_session_id])
    <section class="card status-card" id="cancelledStatus" data-status-url="{{ $hasPaymentReference ? route('donations.status', $statusParameters) : '' }}" data-failed-url="{{ route('donations.failed', ['donation' => $donation->public_id]) }}" data-success-url="{{ $hasPaymentReference ? route('donations.success', $statusParameters) : '' }}">
        <div class="status-icon cancelled" aria-hidden="true">×</div>
        <h2>Thank you for considering a donation, {{ $donation->donor_name }}.</h2>
        <dl class="details">
            <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>Status</dt><dd>{{ ucfirst($donation->status) }}</dd></div>
        </dl>
        <div class="actions">
            <a class="button" href="{{ route('donations.create') }}">Return to donation form</a>
            <a class="inline-link" href="{{ url('/') }}">Return to DFHA home</a>
        </div>
    </section>

    @if ($hasPaymentReference)
        <script>
            (function () {
                var panel = document.getElementById('cancelledStatus');
                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 === 'failed') {
                                window.location.assign(panel.dataset.failedUrl);
                            } else if (data.status === 'paid' || data.status === 'refunded') {
                                window.location.assign(panel.dataset.successUrl);
                            } else if (data.status !== 'cancelled' || attempts >= 12) {
                                window.clearInterval(timer);
                            }
                        })
                        .catch(function () {
                            window.clearInterval(timer);
                        });
                }, 3000);
            })();
        </script>
    @endif
@endsection