{{-- Payment methods before the order exists: visible but locked, with the reasons (orderBlockers) --}}
@php
    $regularMethods = collect($paymentMethods)->filter(function($paymentMethod) use ($agent) {
        if ($paymentMethod->payments_is_discount ?? false) {
            return false;
        }
        if (in_array($paymentMethod->payments_slug, ['myfatoorah-apple-pay', 'paymob-apple'])) {
            return ($agent->is('iOS') || $agent->is('iPhone') || $agent->is('iPad') || $agent->is('Mac OS X') || $agent->is('OS X') || $agent->is('Macintosh'));
        }
        return true;
    });
@endphp
<div class="my-3">
    @if(count($orderBlockers) > 0)
        <div class="order-blockers br-5 p-3 mb-3 font-14">
            <div class="fb-600 mb-1"><i class="fas fa-exclamation-circle"></i> {{ __('lang.orderBlockersTitle') }}</div>
            <ul class="mb-0 ps-3 pe-3">
                @foreach($orderBlockers as $blocker)
                    <li>{{ $blocker['message'] }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="font-18 mb-2 {{ $account->accounts_website_theme == 'theme6' ? 'text_4' : 'text_1' }}">{{ count($regularMethods) > 1 ? __('lang.paymentMethod') : __('lang.payment') }}</div>

    <div class="payments-border px-3 payment-locked">
        @foreach ($regularMethods as $paymentMethod)
            @php
                if (str_contains(env('APP_URL'), 'localhost')) {
                    $svgPath = public_path('uploads/payments/' . $paymentMethod->payments_slug . '.svg');
                }else{
                    $svgPath = env('sitmapPath', ''). '/uploads/payments/' . $paymentMethod->payments_slug . '.svg';
                }
                $svgContent = file_exists($svgPath) ? file_get_contents($svgPath) : '';
            @endphp
            <div class="d-flex align-items-center justify-content-between py-2 cursor-pointer {{ !$loop->last ? 'border-bottom' : '' }}"
                onclick="window.showOrderBlocker && window.showOrderBlocker()">
                <div class="d-flex align-items-center gap-2">
                    <span class="{{ $account->accounts_website_theme == 'theme6' ? 'text_1' : 'text_3' }} w-6 h-6">
                        {!! str_replace('<svg', '<svg class="w-full h-full fill-current" fill="currentColor"', $svgContent) !!}
                    </span>
                    <span class="font-18 fb-500 {{ $account->accounts_website_theme == 'theme6' ? 'text_4' : 'text_1' }}">{{ $paymentMethod->payments_name }}</span>
                </div>
                <i class="fas fa-lock text_4"></i>
            </div>
        @endforeach
    </div>

    <button type="button" class="btn btn-block main-btn font-16 w-100 py-2 px-3 border-radius-50 mt-3 payment-locked-btn"
        onclick="window.showOrderBlocker && window.showOrderBlocker()">
        <i class="fas fa-lock"></i> {{ __('lang.completeOrderToPay') }}
    </button>
</div>

@push('css')
<style>
    .order-blockers { background: #fff4e5; color: #8a5300; border: 1px solid #ffd8a8; }
    .payment-locked { opacity: .55; }
    .payment-locked-btn { opacity: .65; }
</style>
@endpush