@props(['brand', 'widgetUrl', 'shopperResultUrl', 'widgetBrandLabel'])

{{-- 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>