<x-app-layout>
    <div class="portal-container service-page-wrap">
        @php
            $money = function ($amount, $currency) {
                $currency = strtoupper((string) $currency);
                $value = number_format((float) $amount, 2);
                return $currency === 'USD' ? '$'.$value.' USD' : 'PKR '.$value;
            };
        @endphp

        <div class="service-topbar">
            <a class="service-back-link" href="{{ route('client.add-funds') }}">← Back to Add Funds</a>
        </div>

        <section class="service-hero-card">
            <div class="service-hero-main">
                <span class="service-eyebrow">Secure Credit Deposit</span>
                <h1>Redirecting to PayFast</h1>
                <p>Deposit #{{ $deposit->id }}</p>
            </div>
            <div class="service-hero-status">
                <span class="status-pill unpaid">{{ strtoupper($payment['mode'] ?? 'sandbox') }}</span>
                <strong>{{ $money($payment['payfast_amount'], $payment['payfast_currency']) }}</strong>
                <small>Account credit: {{ $money($payment['credit_amount'], $payment['credit_currency']) }}</small>
                @if (($payment['credit_currency'] ?? '') !== ($payment['payfast_currency'] ?? ''))
                    <small>1 {{ $payment['credit_currency'] }} = {{ number_format((float) ($payment['conversion_rate'] ?? 0), 5) }} PKR</small>
                @endif
            </div>
        </section>

        <section class="service-panel">
            <div class="service-panel-head">
                <div>
                    <span class="service-eyebrow">Next Step</span>
                    <h2>Opening payment page</h2>
                </div>
                <p>Do not refresh while the signed payment form is being submitted.</p>
            </div>

            <form id="payfastCreditForm" method="POST" action="{{ $payment['action'] }}">
                @foreach (($payment['fields'] ?? []) as $name => $value)
                    <input type="hidden" name="{{ $name }}" value="{{ $value }}">
                @endforeach
                <button class="primary-btn" type="submit">Continue to PayFast</button>
            </form>

            <p class="service-muted" style="margin-top:14px;">If the page does not open automatically, click the button above.</p>
        </section>
    </div>

    <script>
        window.setTimeout(function () {
            var form = document.getElementById('payfastCreditForm');
            if (form) form.submit();
        }, 700);
    </script>
</x-app-layout>
