@extends('layouts.public')

@section('title', __('booking.payment_pending_title') . ' — ' . config('app.name'))

@section('content')
<div class="container mx-auto max-w-2xl px-4 py-10 md:py-16">
    <div class="card-sc">
        <h1 class="text-2xl font-extrabold text-ink-900">{{ __('booking.payment_pending_title') }}</h1>
        <p class="mt-2 text-ink-500">
            {{ __('booking.pay_now', ['amount' => number_format((float) $appointment->fee_amount, 2), 'currency' => $appointment->fee_currency]) }}
        </p>

        {{-- HyperPay Copy&Pay widget: the standard copy/paste integration
             — a script tag scoped to this checkoutId, plus a form the
             widget mounts its hosted card/Apple Pay frame into.
             wpwlOptions must be defined before the widget script loads —
             it sets the widget's language (labels, errors, button) to the
             current app locale. --}}
        @php($isRtl = app()->getLocale() === 'ar')
        <script>
            var wpwlOptions = {
                locale: @json(app()->getLocale()),
                style: 'card',
                @if ($brand === 'applepay')
                // Apple Pay sheet settings (HyperPay KSA). mada must be listed
                // and supports3DS/Credit/Debit enabled, or mada-backed Apple
                // Pay cards are refused.
                applePay: {
                    displayName: @json(config('app.name')),
                    total: { label: @json(config('app.name')) },
                    supportedNetworks: ['mada', 'masterCard', 'visa'],
                    merchantCapabilities: ['supports3DS', 'supportsCredit', 'supportsDebit'],
                    countryCode: 'SA',
                    supportedCountries: ['SA'],
                },
                @endif
                @if ($isRtl)
                // Card number / CVV live in HyperPay-hosted iframes, so page
                // CSS can't reach them — digits stay LTR, aligned to the right.
                iframeStyles: {
                    'card-number-placeholder': { 'direction': 'ltr', 'text-align': 'right' },
                    'cvv-placeholder': { 'direction': 'ltr', 'text-align': 'right' },
                },
                onReady: function () {
                    document.querySelectorAll('.wpwl-form').forEach(function (form) {
                        form.setAttribute('dir', 'rtl');
                    });
                },
                @endif
            };
        </script>
        <script src="{{ $widgetUrl }}"></script>

        @if ($isRtl)
            <style>
                .wpwl-form { direction: rtl; text-align: right; }
                .wpwl-label, .wpwl-hint, .wpwl-message { text-align: right; }
                .wpwl-wrapper, .wpwl-label { float: right; }
                .wpwl-control-expiry, .wpwl-control-cardHolder { text-align: right; }
                .wpwl-control-expiry { direction: ltr; }
                .wpwl-button-pay { float: left; }
                .wpwl-brand-card { right: auto; left: 5px; }
            </style>
        @endif

        <form action="{{ $shopperResultUrl }}" class="paymentWidgets mt-6" data-brands="{{ $widgetBrandLabel }}"></form>
    </div>
</div>
@endsection