@extends('layouts.app')
@section('title', __('Pay with ABA PayWay'))
@section('content')
<div class="mx-auto max-w-md rounded-[40px] border border-surface-variant bg-white p-8 text-center shadow-soft">
    <h1 class="text-2xl font-extrabold text-primary">{{ __('Scan to pay') }}</h1>
    <p class="mt-1 text-sm text-on-surface-variant">{{ __('Total') }} <span class="font-bold text-primary">${{ $amount }}</span></p>
    <div id="pw-live">
        <img src="{{ $qr['image'] }}" alt="{{ __('ABA PayWay QR code') }}" class="mx-auto mt-5 w-64 max-w-full rounded-2xl border border-surface-variant">
        <p class="mt-4 text-sm text-on-surface-variant">{{ __('Open ABA Mobile or any KHQR bank app and scan this code.') }}</p>
        @if ($qr['deeplink'] !== '')
            <div class="mt-4 md:hidden"><x-btn :href="$qr['deeplink']">{{ __('Open ABA Mobile') }}</x-btn></div>
        @endif
        <p class="mt-5 text-sm font-semibold text-primary">{{ __('Waiting for your payment…') }}</p>
        <p class="mt-1 text-sm text-on-surface-variant">{{ __('This code expires in') }} <span id="pw-time" class="font-extrabold text-primary">--:--</span></p>
    </div>
    <div id="pw-expired" class="hidden">
        <p class="mt-6 text-lg font-extrabold text-primary">{{ __('This QR code has expired.') }}</p>
        <p class="mt-1 text-sm text-on-surface-variant">{{ __('If you already paid, wait a moment, the order will update by itself.') }}</p>
        <div class="mt-5"><x-btn :href="route('pay.aba', $token)">{{ __('Get a new QR code') }}</x-btn></div>
    </div>
</div>
@push('scripts')
<script>
(function () {
    var url = @json(route('pay.aba.status', $token)), done = @json(route('pay.aba.return', $token));
    var left = {{ (int) $seconds }}, stopped = false, tries = 0;
    var t = document.getElementById('pw-time');
    function show() { t.textContent = Math.floor(left / 60) + ':' + String(left % 60).padStart(2, '0'); }
    function expire() {
        document.getElementById('pw-live').classList.add('hidden');
        document.getElementById('pw-expired').classList.remove('hidden');
    }
    function poll() {
        if (stopped) { return; }
        tries++;
        fetch(url, {headers: {'Accept': 'application/json'}, credentials: 'same-origin'})
            .then(function (r) { return r.json(); })
            .then(function (d) { if (d.paid) { stopped = true; location.href = done; } else { setTimeout(poll, 7000); } })
            .catch(function () { setTimeout(poll, 10000); });
    }
    show();
    var timer = setInterval(function () {
        left--;
        if (left <= 0) { clearInterval(timer); expire(); setTimeout(function () { stopped = true; }, 60000); return; }
        show();
    }, 1000);
    setTimeout(poll, 7000);
})();
</script>
@endpush
@endsection