@php
    /*
     * Normalize the checkout currency through the central currency helper.
     */
    $checkoutCurrency = currency_code(
        $checkout->currency_code
            ?? $paymentSettings->default_currency
            ?? null
    );

    $checkoutTotal = (float) (
        $checkout->grand_total ?? 0
    );

    $formattedCheckoutTotal = money(
        $checkoutTotal,
        $checkoutCurrency
    );

    $formattedWalletBalance = money(
        (float) ($walletBalance ?? 0),
        $checkoutCurrency
    );

    /*
     * Normalize legacy bank-transfer account formats.
     */
    $rawBankAccounts = $paymentSettings->bank_transfer_accounts
        ?? [];

    if (is_string($rawBankAccounts)) {
        $decodedBankAccounts = json_decode(
            $rawBankAccounts,
            true
        );

        $rawBankAccounts = is_array($decodedBankAccounts)
            ? $decodedBankAccounts
            : [];
    }

    $bankAccounts = collect($rawBankAccounts)
        ->filter(
            static function ($account): bool {
                return is_array($account)
                    && (
                        filled($account['bank_name'] ?? null)
                        || filled($account['account_name'] ?? null)
                        || filled($account['account_number'] ?? null)
                    );
            }
        )
        ->values();

    /*
     * Normalize available payment methods into a collection.
     */
    $paymentMethods = collect(
        $availablePaymentMethods ?? []
    );

    /*
     * Restore the previously selected method after a validation error.
     * If none was selected, choose the first usable payment method.
     */
    $selectedPaymentMethod = old('payment_method');

    if (
        blank($selectedPaymentMethod)
        || ! $paymentMethods->has($selectedPaymentMethod)
    ) {
        $selectedPaymentMethod = $paymentMethods
            ->keys()
            ->first(
                static function ($key) use (
                    $walletCanCoverCheckout
                ): bool {
                    return $key !== 'wallet'
                        || (bool) $walletCanCoverCheckout;
                }
            );
    }
@endphp

<form method="POST" id="paymentForm">
    @csrf

    {{--
        JavaScript assigns the appropriate names and values before
        submitting to the selected payment controller.
    --}}
    <input
        type="hidden"
        id="paymentDispatchName"
        value=""
    >

    <input
        type="hidden"
        id="paymentDispatchValue"
        value=""
    >

    <div class="card border-0 shadow-sm mb-4">
        <div class="card-header bg-white border-0 py-3">
            <h6 class="fw-700 mb-0">
                <i class="fas fa-wallet text-primary me-2"></i>
                {{ __('Payment Method') }}
            </h6>
        </div>

        <div class="card-body">
            @if($paymentMethods->isEmpty())
                <div class="alert alert-warning mb-0">
                    <i class="fas fa-exclamation-triangle me-2"></i>

                    {{
                        __(
                            'No payment method is currently available for this checkout.'
                        )
                    }}
                </div>
            @else
                @error('payment_method')
                    <div class="alert alert-danger py-2">
                        <i class="fas fa-exclamation-circle me-1"></i>
                        {{ $message }}
                    </div>
                @enderror

                @error('method')
                    <div class="alert alert-danger py-2">
                        <i class="fas fa-exclamation-circle me-1"></i>
                        {{ $message }}
                    </div>
                @enderror

                @error('provider')
                    <div class="alert alert-danger py-2">
                        <i class="fas fa-exclamation-circle me-1"></i>
                        {{ $message }}
                    </div>
                @enderror

                <div class="row g-3">
                    @foreach($paymentMethods as $key => $label)
                        @php
                            $key = (string) $key;

                            $isWallet = $key === 'wallet';

                            $isBankTransfer =
                                $key === 'bank_transfer';

                            $isCod =
                                $key === 'cash_on_delivery';

                            $isGateway = ! $isWallet
                                && ! $isBankTransfer
                                && ! $isCod;

                            $walletUnavailable = $isWallet
                                && ! (bool) $walletCanCoverCheckout;

                            $isSelected =
                                $selectedPaymentMethod === $key
                                && ! $walletUnavailable;

                            $providerIcon = match ($key) {
                                'wallet' => 'fas fa-wallet',
                                'bank_transfer' => 'fas fa-university',
                                'cash_on_delivery' =>
                                    'fas fa-money-bill-wave',
                                'paypal' => 'fab fa-paypal',
                                'paystack' => 'fas fa-credit-card',
                                'flutterwave' =>
                                    'fas fa-credit-card',
                                default => 'fas fa-credit-card',
                            };
                        @endphp

                        <div class="col-md-6">
                            <label
                                class="card border payment-option h-100
                                       {{ $isSelected
                                            ? 'border-primary bg-primary bg-opacity-5'
                                            : '' }}
                                       {{ $walletUnavailable
                                            ? 'payment-option-disabled'
                                            : '' }}"
                                for="payment_method_{{ $key }}"
                                data-payment-option="{{ $key }}"
                            >
                                <input
                                    type="radio"
                                    id="payment_method_{{ $key }}"
                                    name="payment_method"
                                    value="{{ $key }}"
                                    class="form-check-input d-none payment-radio"
                                    @checked($isSelected)
                                    @disabled($walletUnavailable)
                                    required
                                >

                                <div class="card-body">
                                    <div
                                        class="d-flex align-items-start gap-3"
                                    >
                                        <div
                                            class="payment-icon rounded-circle
                                                   bg-primary bg-opacity-10
                                                   d-flex align-items-center
                                                   justify-content-center
                                                   flex-shrink-0"
                                        >
                                            <i
                                                class="{{ $providerIcon }}
                                                       text-primary fa-lg"
                                            ></i>
                                        </div>

                                        <div class="flex-grow-1 min-width-0">
                                            <div
                                                class="d-flex
                                                       justify-content-between
                                                       align-items-start gap-2"
                                            >
                                                <div class="fw-700">
                                                    {{ $label }}
                                                </div>

                                                <i
                                                    class="fas fa-check-circle
                                                           text-primary
                                                           payment-selected-icon
                                                           {{ $isSelected
                                                                ? ''
                                                                : 'd-none' }}"
                                                ></i>
                                            </div>

                                            @if($isWallet)
                                                <small class="text-muted">
                                                    {{
                                                        __('Available balance:')
                                                    }}

                                                    <span class="fw-600">
                                                        {{
                                                            $formattedWalletBalance
                                                        }}
                                                    </span>
                                                </small>

                                                @if($walletUnavailable)
                                                    <div
                                                        class="small
                                                               text-danger mt-1"
                                                    >
                                                        <i
                                                            class="fas
                                                                   fa-exclamation-circle
                                                                   me-1"
                                                        ></i>

                                                        {{
                                                            __(
                                                                'Your wallet balance cannot cover this checkout.'
                                                            )
                                                        }}
                                                    </div>

                                                    <div
                                                        class="small
                                                               text-muted mt-1"
                                                    >
                                                        {{
                                                            __(
                                                                'Required amount: :amount',
                                                                [
                                                                    'amount' =>
                                                                        $formattedCheckoutTotal,
                                                                ]
                                                            )
                                                        }}
                                                    </div>
                                                @else
                                                    <div
                                                        class="small
                                                               text-success mt-1"
                                                    >
                                                        <i
                                                            class="fas
                                                                   fa-check-circle
                                                                   me-1"
                                                        ></i>

                                                        {{
                                                            __(
                                                                'Your wallet balance can cover this payment.'
                                                            )
                                                        }}
                                                    </div>
                                                @endif
                                            @elseif($isBankTransfer)
                                                <small class="text-muted">
                                                    {{
                                                        __(
                                                            'Create your order, transfer the payment, and upload your receipt.'
                                                        )
                                                    }}
                                                </small>

                                                @if($bankAccounts->isEmpty())
                                                    <div
                                                        class="small
                                                               text-warning mt-1"
                                                    >
                                                        <i
                                                            class="fas
                                                                   fa-exclamation-triangle
                                                                   me-1"
                                                        ></i>

                                                        {{
                                                            __(
                                                                'Bank account instructions will be provided after your order is created.'
                                                            )
                                                        }}
                                                    </div>
                                                @endif
                                            @elseif($isCod)
                                                <small class="text-muted">
                                                    {{
                                                        __(
                                                            'Pay cash when your order is delivered.'
                                                        )
                                                    }}
                                                </small>
                                            @elseif($isGateway)
                                                <small class="text-muted">
                                                    {{
                                                        __(
                                                            'Secure online payment through :provider.',
                                                            [
                                                                'provider' =>
                                                                    $label,
                                                            ]
                                                        )
                                                    }}
                                                </small>

                                                @if($key === 'paypal')
                                                    <div
                                                        class="small
                                                               text-muted mt-1"
                                                    >
                                                        <i
                                                            class="fas
                                                                   fa-exchange-alt
                                                                   me-1"
                                                        ></i>

                                                        {{
                                                            __(
                                                                'PayPal may convert the checkout amount to a supported payment currency.'
                                                            )
                                                        }}
                                                    </div>
                                                @endif
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </label>
                        </div>

                        @if(
                            $isBankTransfer
                            && $bankAccounts->isNotEmpty()
                        )
                            <div
                                class="col-12 bank-account-panel"
                                id="bankAccountPanel"
                                @if(!$isSelected) hidden @endif
                            >
                                <div class="alert alert-info mb-0">
                                    <div
                                        class="d-flex
                                               align-items-start gap-2 mb-3"
                                    >
                                        <i
                                            class="fas fa-info-circle mt-1"
                                        ></i>

                                        <div>
                                            <strong>
                                                {{
                                                    __(
                                                        'Bank transfer instructions'
                                                    )
                                                }}
                                            </strong>

                                            <div class="small">
                                                {{
                                                    __(
                                                        'Use one of the accounts below. Your order number will be provided before you upload your receipt.'
                                                    )
                                                }}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row g-3">
                                        @foreach(
                                            $bankAccounts as $accountIndex =>
                                                $account
                                        )
                                            @php
                                                $bankName = data_get(
                                                    $account,
                                                    'bank_name'
                                                );

                                                $accountName = data_get(
                                                    $account,
                                                    'account_name'
                                                );

                                                $accountNumber = data_get(
                                                    $account,
                                                    'account_number'
                                                );

                                                $bankCode = data_get(
                                                    $account,
                                                    'bank_code'
                                                );

                                                $instructions = data_get(
                                                    $account,
                                                    'instructions'
                                                );
                                            @endphp

                                            <div class="col-md-6">
                                                <div
                                                    class="bg-white border
                                                           rounded p-3 h-100"
                                                >
                                                    <div class="fw-700 mb-2">
                                                        <i
                                                            class="fas
                                                                   fa-university
                                                                   text-primary
                                                                   me-1"
                                                        ></i>

                                                        {{
                                                            filled($bankName)
                                                                ? $bankName
                                                                : __(
                                                                    'Bank account :number',
                                                                    [
                                                                        'number' =>
                                                                            $accountIndex
                                                                            + 1,
                                                                    ]
                                                                )
                                                        }}
                                                    </div>

                                                    <dl class="row small mb-0">
                                                        <dt
                                                            class="col-5
                                                                   text-muted"
                                                        >
                                                            {{
                                                                __(
                                                                    'Account name'
                                                                )
                                                            }}
                                                        </dt>

                                                        <dd
                                                            class="col-7
                                                                   text-end
                                                                   fw-600"
                                                        >
                                                            {{
                                                                filled(
                                                                    $accountName
                                                                )
                                                                    ? $accountName
                                                                    : '—'
                                                            }}
                                                        </dd>

                                                        <dt
                                                            class="col-5
                                                                   text-muted"
                                                        >
                                                            {{
                                                                __(
                                                                    'Account number'
                                                                )
                                                            }}
                                                        </dt>

                                                        <dd
                                                            class="col-7
                                                                   text-end
                                                                   fw-700"
                                                        >
                                                            <span
                                                                class="text-break"
                                                            >
                                                                {{
                                                                    filled(
                                                                        $accountNumber
                                                                    )
                                                                        ? $accountNumber
                                                                        : '—'
                                                                }}
                                                            </span>
                                                        </dd>

                                                        @if(filled($bankCode))
                                                            <dt
                                                                class="col-5
                                                                       text-muted"
                                                            >
                                                                {{
                                                                    __(
                                                                        'Bank code'
                                                                    )
                                                                }}
                                                            </dt>

                                                            <dd
                                                                class="col-7
                                                                       text-end
                                                                       fw-600"
                                                            >
                                                                {{ $bankCode }}
                                                            </dd>
                                                        @endif

                                                        <dt
                                                            class="col-5
                                                                   text-muted
                                                                   mb-0"
                                                        >
                                                            {{
                                                                __(
                                                                    'Amount'
                                                                )
                                                            }}
                                                        </dt>

                                                        <dd
                                                            class="col-7
                                                                   text-end
                                                                   fw-700
                                                                   text-primary
                                                                   mb-0"
                                                        >
                                                            {{
                                                                $formattedCheckoutTotal
                                                            }}
                                                        </dd>
                                                    </dl>

                                                    @if(filled($instructions))
                                                        <div
                                                            class="border-top
                                                                   mt-3 pt-3
                                                                   small
                                                                   text-muted"
                                                        >
                                                            <div
                                                                class="fw-600
                                                                       text-dark
                                                                       mb-1"
                                                            >
                                                                {{
                                                                    __(
                                                                        'Instructions'
                                                                    )
                                                                }}
                                                            </div>

                                                            <div
                                                                class="bank-instructions"
                                                            >
                                                                {{
                                                                    $instructions
                                                                }}
                                                            </div>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @endif
                    @endforeach
                </div>
            @endif
        </div>
    </div>

    @if($paymentMethods->isNotEmpty())
        <div class="d-grid">
            <button
                type="submit"
                class="btn btn-primary btn-lg"
                id="payNowBtn"
                @disabled(blank($selectedPaymentMethod))
            >
                <i class="fas fa-lock me-1"></i>

                {{
                    __('Pay :amount', [
                        'amount' => $formattedCheckoutTotal,
                    ])
                }}
            </button>
        </div>
    @endif
</form>

@push('styles')
    <style>
        .fw-600 {
            font-weight: 600;
        }

        .fw-700 {
            font-weight: 700;
        }

        .min-width-0 {
            min-width: 0;
        }

        .payment-option {
            cursor: pointer;
            transition:
                border-color 0.15s ease,
                background-color 0.15s ease,
                box-shadow 0.15s ease,
                transform 0.15s ease;
        }

        .payment-option:not(.payment-option-disabled):hover {
            transform: translateY(-2px);
            box-shadow: 0 0.25rem 0.75rem
                rgba(0, 0, 0, 0.08);
        }

        .payment-option-disabled {
            cursor: not-allowed;
            opacity: 0.65;
            background-color: var(--bs-light);
        }

        .payment-icon {
            width: 48px;
            height: 48px;
        }

        .bank-instructions {
            white-space: pre-line;
        }
    </style>
@endpush

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const form =
                document.getElementById('paymentForm');

            const payButton =
                document.getElementById('payNowBtn');

            const dispatchName =
                document.getElementById('paymentDispatchName');

            const dispatchValue =
                document.getElementById('paymentDispatchValue');

            const bankAccountPanel =
                document.getElementById('bankAccountPanel');

            if (!form || !dispatchName || !dispatchValue) {
                return;
            }

            const routes = {
                wallet: @json(
                    route(
                        'account.wallet.payments.store',
                        ['checkout' => $checkout]
                    )
                ),

                offline: @json(
                    route(
                        'payments.offline',
                        ['checkout' => $checkout]
                    )
                ),

                gateway: @json(
                    route(
                        'payments.initialize',
                        ['checkout' => $checkout]
                    )
                ),
            };

            function selectedRadio() {
                return form.querySelector(
                    'input[name="payment_method"]:checked'
                );
            }

            function resetOptionStyles() {
                form.querySelectorAll(
                    '.payment-option'
                ).forEach(function (option) {
                    option.classList.remove(
                        'border-primary',
                        'bg-primary',
                        'bg-opacity-5'
                    );

                    const selectedIcon =
                        option.querySelector(
                            '.payment-selected-icon'
                        );

                    selectedIcon?.classList.add('d-none');
                });
            }

            function updatePaymentButton(method) {
                if (!payButton) {
                    return;
                }

                const formattedTotal =
                    @json($formattedCheckoutTotal);

                const labels = {
                    wallet: @json(
                        __('Pay :amount from Wallet', [
                            'amount' =>
                                $formattedCheckoutTotal,
                        ])
                    ),

                    bank_transfer: @json(
                        __('Continue with Bank Transfer')
                    ),

                    cash_on_delivery: @json(
                        __('Place Cash on Delivery Order')
                    ),

                    default: @json(
                        __('Pay :amount', [
                            'amount' =>
                                $formattedCheckoutTotal,
                        ])
                    ),
                };

                const label =
                    labels[method] || labels.default;

                payButton.innerHTML =
                    '<i class="fas fa-lock me-1"></i>'
                    + label;

                payButton.setAttribute(
                    'aria-label',
                    label + ' - ' + formattedTotal
                );
            }

            function updateSelectedOption() {
                resetOptionStyles();

                const selected = selectedRadio();
                const method = selected?.value || '';

                if (selected) {
                    const option =
                        selected.closest('.payment-option');

                    option?.classList.add(
                        'border-primary',
                        'bg-primary',
                        'bg-opacity-5'
                    );

                    option
                        ?.querySelector(
                            '.payment-selected-icon'
                        )
                        ?.classList.remove('d-none');
                }

                if (bankAccountPanel) {
                    bankAccountPanel.hidden =
                        method !== 'bank_transfer';
                }

                updatePaymentButton(method);
            }

            form.querySelectorAll(
                '.payment-radio'
            ).forEach(function (radio) {
                radio.addEventListener(
                    'change',
                    updateSelectedOption
                );
            });

            updateSelectedOption();

            form.addEventListener(
                'submit',
                function (event) {
                    event.preventDefault();

                    const selected = selectedRadio();

                    if (!selected) {
                        window.alert(
                            @json(
                                __(
                                    'Please select a payment method.'
                                )
                            )
                        );

                        return;
                    }

                    const method = selected.value;

                    dispatchName.removeAttribute('name');
                    dispatchName.value = '';

                    dispatchValue.removeAttribute('name');
                    dispatchValue.value = '';

                    /*
                     * Offline methods use the OfflinePaymentController.
                     */
                    if (
                        method === 'bank_transfer'
                        || method === 'cash_on_delivery'
                    ) {
                        form.action = routes.offline;

                        dispatchValue.name = 'method';
                        dispatchValue.value = method;
                    } else if (method === 'wallet') {
                        form.action = routes.wallet;
                    } else {
                        form.action = routes.gateway;

                        dispatchValue.name = 'provider';
                        dispatchValue.value = method;
                    }

                    /*
                     * Remove the display-only payment_method field before
                     * sending the request to the selected controller.
                     */
                    form.querySelectorAll(
                        '.payment-radio'
                    ).forEach(function (radio) {
                        radio.disabled = true;
                    });

                    if (payButton) {
                        payButton.disabled = true;

                        payButton.innerHTML =
                            '<i class="fas fa-spinner '
                            + 'fa-spin me-1"></i>'
                            + @json(__('Processing...'));
                    }

                    form.submit();
                }
            );
        });
    </script>
@endpush