@section('title', __('Order Payment'))
<div>
    @if ($selectedModel->payment_method == null)
        {{-- Select payment methods --}}
        @if ($selectedModel->payment_status != 'request' && optional(optional($selectedModel->vendor)->vendor_type)->slug == 'pharmacy')
            <div class="text-center w-11/12 p-4 mx-auto mt-20 border rounded shadow md:w-6/12 lg:w-4/12 md:grid-cols-2">
                <p class="font-bold text-2xl">{{ __('Order Payment') }}</p>
                <p class="text-sm">
                    {{ __('You can not complete order payment until vendor request for payment. Please wait and check back later or contact vendor to request for payment') }}
                </p>
            </div>
        @else
            <div>
                <div wire:loading.remove
                    class="w-11/12 p-4 mx-auto mt-20 border rounded shadow md:w-6/12 lg:w-4/12 md:grid-cols-2">
                    <div class="flex my-4">
                        <div class="items-center">
                            <img src="{{ $selectedModel->user->photo }}" class="w-18 h-18 rounded-full md:w-24 md:h-24" />
                            <p>{{ $selectedModel->user->name }}</p>
                        </div>
                        <div class="ml-auto text-right">
                            <p class="text-2xl font-bold">{{ currencyFormat($selectedModel->payable_total) }}</p>
                            <p>{{ __('Order Payment') }}</p>
                            <div class="py-2">
                                <livewire:select.language-selector />
                            </div>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                        @foreach ($paymentMethods as $paymentMethod)
                            <button wire:click='setPaymentMethod({{ $paymentMethod->id }})'>
                                <div class="flex items-center p-1 border rounded shadow">
                                    <img src="{{ $paymentMethod->photo }}" class="w-2/12 md:w-3/12" />
                                    <p class="mx-2">{{ $paymentMethod->name }}</p>
                                </div>
                            </button>
                        @endforeach
                    </div>
                </div>
                <p class="w-full p-4 text-sm text-center text-gray-500">{{ __('Do not close this window') }}</p>
            </div>
        @endif
    @else
        @if ($selectedModel->payment_method->slug != 'offline')
            @if (\Illuminate\Support\Str::startsWith($selectedModel->payment_method->slug, 'asaas'))
                {{-- Asaas: everything rendered IN-APP, no external redirect --}}
                <div class="w-11/12 mx-auto border rounded shadow md:w-6/12 lg:w-4/12" style="margin-top:.5rem;padding:.9rem" wire:init="initPayment">
                    @if ($asaasError)
                        <p class="mb-3 text-sm text-center text-red-600">{{ $asaasError }}</p>
                    @endif
                    @if ($needsCpf)
                        <p class="text-lg font-medium text-center">{{ __('CPF') }}</p>
                        <p class="mb-2 text-sm text-center text-gray-500">{{ __('Enter your CPF to continue with the payment') }}</p>
                        <input type="text" wire:model.defer="cpf" maxlength="14" placeholder="000.000.000-00" class="w-full px-3 py-2 mb-2 border rounded" />
                        @error('cpf')
                            <p class="mb-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                        <button wire:click="initPayment" wire:loading.attr="disabled" class="w-full px-4 py-2 text-white rounded " style="background-color:#1a4531">{{ __('Continue') }}</button>
                    @elseif ($asaasMode === 'pix')
                        <div wire:ignore>
                            <div style="text-align:center">
                                <p style="font-size:1.02rem;font-weight:700;margin:0">{{ __('Pay with PIX') }} · <span style="color:#1a4531">{{ currencyFormat($selectedModel->payable_total) }}</span></p>
                                <p style="font-size:.78rem;color:#6b7280;margin:.15rem 0 .45rem">{{ __('This code expires in') }} <span id="pixCountdown" style="font-weight:700;color:#1a4531">--:--</span></p>
                                <div id="pixLive">
                                    @if ($pixImage)
                                        <div style="display:inline-block;padding:8px;border:1px solid #e5e7eb;border-radius:10px;background:#fff">
                                            <img src="data:image/png;base64,{{ $pixImage }}" alt="PIX QR" style="width:174px;height:174px;display:block" />
                                        </div>
                                    @endif
                                    @if ($pixCode)
                                        <div style="display:flex;gap:.4rem;align-items:stretch;margin-top:.55rem">
                                            <div style="flex:1;min-width:0;padding:.55rem .6rem;font-size:.72rem;border:1px solid #e5e7eb;border-radius:8px;background:#f9fafb;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ $pixCode }}</div>
                                            <button type="button"
                                                onclick="(function(b){var t=@js($pixCode);function d(){b.innerText=@js(__('Copied!'));setTimeout(function(){b.innerText=@js(__('Copy code'));},2000);}if(navigator.clipboard&&navigator.clipboard.writeText){navigator.clipboard.writeText(t).then(d).catch(d);}else{var a=document.createElement('textarea');a.value=t;document.body.appendChild(a);a.select();try{document.execCommand('copy');}catch(e){}document.body.removeChild(a);d();}})(this)"
                                                style="padding:.55rem .85rem;color:#fff;border-radius:8px;background:#1a4531;font-weight:600;border:none;white-space:nowrap;font-size:.78rem">{{ __('Copy code') }}</button>
                                        </div>
                                    @endif
                                    @if ($pixSandboxNote)
                                        <p style="font-size:.64rem;color:#b45309;margin-top:.3rem">{{ __('Sandbox: demonstration QR (the production key renders the order QR with the split).') }}</p>
                                    @endif
                                    <div style="text-align:left;margin-top:.55rem;background:#f9fafb;border-radius:10px;padding:.5rem .75rem">
                                        <p style="font-weight:600;font-size:.76rem;margin:0 0 .2rem">{{ __('How to pay') }}</p>
                                        <ol style="font-size:.7rem;color:#374151;padding-left:1.05rem;line-height:1.45;list-style:decimal;list-style-position:outside;margin:0">
                                            <li>{{ __('Open your bank app and choose PIX') }}</li>
                                            <li>{{ __('Choose pay with QR Code or PIX copy and paste') }}</li>
                                            <li>{{ __('Scan the code above or paste the copied code') }}</li>
                                            <li>{{ __('Confirm the amount and finish the payment') }}</li>
                                        </ol>
                                    </div>
                                </div>
                                <div id="pixExpired" style="display:none;margin-top:.6rem">
                                    <p style="font-size:.85rem;color:#b91c1c;font-weight:600">{{ __('This PIX code expired.') }}</p>
                                    <button type="button" onclick="window.pixRegen&&window.pixRegen()" style="width:100%;padding:.6rem 1rem;margin-top:.4rem;color:#fff;border-radius:8px;background:#1a4531;font-weight:600;border:none">{{ __('Generate new code') }}</button>
                                </div>
                            </div>
                        </div>
                        <button id="pixRegenTrigger" wire:click="initPayment" style="display:none" aria-hidden="true"></button>
                        <div wire:poll.5s="checkAsaasPayment" style="margin-top:.5rem;display:flex;align-items:center;justify-content:center;gap:.45rem;color:#6b7280;font-size:.76rem">
                            <span style="width:12px;height:12px;border:2px solid #d1d5db;border-top-color:#1a4531;border-radius:50%;display:inline-block;animation:pixspin 1s linear infinite"></span>
                            {{ __('Waiting for payment confirmation...') }}
                        </div>
                        <style>@keyframes pixspin{to{transform:rotate(360deg)}}</style>
                        <script>
                            (function(){
                                var mins = {{ (int) setting('asaas.pixExpireMinutes', 5) }};
                                var target = Date.now() + mins*60*1000;
                                window.pixRegen = function(){
                                    var lv=document.getElementById('pixLive'), ex=document.getElementById('pixExpired');
                                    if(ex) ex.style.display='none';
                                    if(lv) lv.style.display='block';
                                    target = Date.now() + mins*60*1000;
                                    var tr=document.getElementById('pixRegenTrigger'); if(tr) tr.click();
                                };
                                function tick(){
                                    var el=document.getElementById('pixCountdown'); if(!el) return;
                                    var ms=target-Date.now();
                                    if(ms<=0){
                                        el.innerText='00:00';
                                        var lv=document.getElementById('pixLive'), ex=document.getElementById('pixExpired');
                                        if(lv) lv.style.display='none';
                                        if(ex) ex.style.display='block';
                                        return;
                                    }
                                    var s=Math.floor(ms/1000), m=Math.floor(s/60); s=s%60;
                                    el.innerText=(m<10?'0':'')+m+':'+(s<10?'0':'')+s;
                                }
                                tick(); if(window.__pixTimer)clearInterval(window.__pixTimer); window.__pixTimer=setInterval(tick,1000);
                            })();
                        </script>
@elseif ($asaasMode === 'card')
                        <div style="text-align:center">
                            <p style="font-size:1.02rem;font-weight:700;margin:0 0 .55rem">{{ __('Pay with card') }} · <span style="color:#1a4531">{{ currencyFormat($selectedModel->payable_total) }}</span></p>
                        </div>
                        <label style="font-size:.78rem;color:#6b7280">{{ __('Cardholder name') }}</label>
                        <input type="text" wire:model.defer="cardHolder" id="ccName" autocomplete="cc-name" autocapitalize="characters" spellcheck="false"
                            placeholder="{{ __('Name as printed on the card') }}"
                            style="width:100%;padding:.6rem .75rem;margin:.15rem 0 .5rem;border:1px solid #e5e7eb;border-radius:8px;text-transform:uppercase"
                            oninput="this.value=this.value.toUpperCase()" />
                        @error('cardHolder')<p style="font-size:.72rem;color:#dc2626;margin-bottom:.3rem">{{ $message }}</p>@enderror
                        <label style="font-size:.78rem;color:#6b7280">{{ __('Card number') }}</label>
                        <input type="tel" wire:model.defer="cardNumber" id="ccNum" inputmode="numeric" autocomplete="cc-number" maxlength="23"
                            placeholder="0000 0000 0000 0000"
                            style="width:100%;padding:.6rem .75rem;margin:.15rem 0 .5rem;border:1px solid #e5e7eb;border-radius:8px;letter-spacing:.5px"
                            oninput="var d=this.value.replace(/\D/g,'').slice(0,19);this.value=d.replace(/(.{4})/g,'$1 ').trim();if(d.length===16){document.getElementById('ccMonth').focus();}" />
                        @error('cardNumber')<p style="font-size:.72rem;color:#dc2626;margin-bottom:.3rem">{{ $message }}</p>@enderror
                        <div style="display:flex;gap:.5rem">
                            <div style="flex:1">
                                <label style="font-size:.78rem;color:#6b7280">{{ __('Month') }}</label>
                                <input type="tel" wire:model.defer="cardExpMonth" id="ccMonth" inputmode="numeric" autocomplete="cc-exp-month" placeholder="MM" maxlength="2"
                                    style="width:100%;padding:.6rem .5rem;margin-top:.15rem;border:1px solid #e5e7eb;border-radius:8px;text-align:center"
                                    oninput="var d=this.value.replace(/\D/g,'');if(d.length===1&&parseInt(d,10)>1){d='0'+d;}if(parseInt(d,10)>12){d='12';}this.value=d;if(d.length===2){document.getElementById('ccYear').focus();}" />
                            </div>
                            <div style="flex:1">
                                <label style="font-size:.78rem;color:#6b7280">{{ __('Year') }}</label>
                                <input type="tel" wire:model.defer="cardExpYear" id="ccYear" inputmode="numeric" autocomplete="cc-exp-year" placeholder="AAAA" maxlength="4"
                                    style="width:100%;padding:.6rem .5rem;margin-top:.15rem;border:1px solid #e5e7eb;border-radius:8px;text-align:center"
                                    oninput="var d=this.value.replace(/\D/g,'');this.value=d;if(d.length===4){document.getElementById('ccCvv').focus();}"
                                    onblur="var d=this.value.replace(/\D/g,'');if(d.length===2){this.value='20'+d;this.dispatchEvent(new Event('input'));}" />
                            </div>
                            <div style="flex:1">
                                <label style="font-size:.78rem;color:#6b7280">CVV</label>
                                <input type="tel" wire:model.defer="cardCvv" id="ccCvv" inputmode="numeric" autocomplete="cc-csc" placeholder="123" maxlength="4"
                                    style="width:100%;padding:.6rem .5rem;margin-top:.15rem;border:1px solid #e5e7eb;border-radius:8px;text-align:center"
                                    oninput="this.value=this.value.replace(/\D/g,'')" />
                            </div>
                        </div>
                        <button wire:click="payWithAsaasCard" wire:loading.attr="disabled"
                            style="width:100%;padding:.7rem 1rem;margin-top:.9rem;color:#fff;border-radius:8px;background:#1a4531;font-weight:600;border:none">{{ __('Pay') }} {{ currencyFormat($selectedModel->payable_total) }}</button>
                        <div wire:loading.flex wire:target="payWithAsaasCard" style="margin-top:.6rem;align-items:center;justify-content:center;gap:.5rem;color:#6b7280;font-size:.85rem">
                            <span style="width:14px;height:14px;border:2px solid #d1d5db;border-top-color:#1a4531;border-radius:50%;display:inline-block;animation:pixspin 1s linear infinite"></span>
                            {{ __('Please wait while we process your payment') }}
                        </div>
                        <p style="margin-top:.7rem;font-size:.72rem;color:#9ca3af;text-align:center">🔒 {{ __('Your payment is processed securely') }}</p>
                        <style>@keyframes pixspin{to{transform:rotate(360deg)}}</style>
                    @else
                        <p class="text-sm text-center text-gray-500">{{ __('Please wait while we process your payment') }}</p>
                    @endif
                </div>
            @else
                <div class="" wire:init="initPayment">
                    <div class="w-11/12 p-12 mx-auto mt-20 border rounded shadow md:w-6/12 lg:w-4/12">
                        <x-heroicon-o-clock class="w-12 h-12 mx-auto text-gray-400 md:h-24 md:w-24" />
                        <p class="text-xl font-medium text-center">{{ __('Order Payment') }}</p>
                        <p class="text-sm text-center">
                            {{ __('Please wait while we process your payment') }}</p>
                        @if ($selectedModel->payment_method->slug == 'paypal')
                            <div id="paypal-button-container" class="py-12"></div>
                        @endif
                    </div>

                    {{-- close --}}
                    <p class="w-full p-4 text-sm text-center text-gray-500">
                        {{ __('Do not close this window') }}</p>
                </div>
            @endif
        @else
            @include('livewire.payment.offline.order')
        @endif
        {{-- paytm --}}
        @include('livewire.payment.gateways.paytm')
        {{-- payU --}}
        @include('livewire.payment.gateways.payu')

        @push('scripts')
            @if ($selectedModel->payment_method->slug == 'stripe')
                <script src="https://js.stripe.com/v3/"></script>
            @elseif($selectedModel->payment_method->slug == 'razorpay')
                <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
                {{-- @elseif($selectedModel->payment_method->slug == 'flutterwave')
                <script src="https://checkout.flutterwave.com/v3.js"></script>
            @elseif($selectedModel->payment_method->slug == 'paystack')
                <script src="https://js.paystack.co/v1/inline.js"></script>
            @elseif($selectedModel->payment_method->slug == 'billplz')
                <script src="https://js.paystack.co/v1/inline.js"></script> --}}
            @elseif($selectedModel->payment_method->slug == 'paypal')
                <script
                    src="https://www.paypal.com/sdk/js?client-id={{ $selectedModel->payment_method->public_key }}&currency={{ setting('currencyCode', 'USD') }}&intent=capture">
                </script>
                {{-- //custom payment --}}
            @endif

            <script src="{{ asset('js/payment.js') }}"></script>
        @endpush

    @endif
</div>