@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>
    <div x-show="loading" x-cloak
        style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.7); z-index: 9999;"
        :class="loading ? 'd-flex align-items-center justify-content-center' : 'hidden' ">
        <div class="loader-icon " ></div>
    </div>

    <div class="my-4">
        <div class="d-flex align-items-center justify-content-between">
            <div class="font-18 {{ $account->accounts_website_theme == 'theme6' ? 'text_4' : 'text_1' }}">{{ count($regularMethods) > 1 ? __('lang.paymentMethod') : __('lang.payment')}}</div>
            @if($account->accounts_multi_payments == '1')
                                @foreach($order->orders_payments as $key => $order_payment)
                    @if($order_payment->orders_payments_status != 'pending' || in_array($order_payment->orders_payments_slug,['cash','bank_transfer']) )
                                                @break
                    @endif
                @endforeach
                @if($hasPayments)
                    <button type="button" class="{{ $account->accounts_website_theme == 'theme6' ? 'text_7' : 'text_5' }} font-14 cursor-pointer border-0 bg-transparent p-0" @click="refund('1','')">
                        <i class="polaris-max-icon-trash"></i>
                        {{__('lang.deleteAllPayments')}}
                    </button>
                @endif
            @endif
        </div>
        @if(count($regularMethods) > 1)
            <div class="font-12 text_4">
                {{$account->accounts_multi_payments != '1' ? __('lang.paymentsDesc') : __('lang.multiPaymentsDesc') }}
            </div>
        @endif
    </div>

    @if($account->accounts_multi_payments == '1')
        @foreach ($regularMethods as $paymentMethod)
            @php
                $activePayment = null;
                if (isset($order->orders_payments)) {
                    foreach ($order->orders_payments as $op) {
                        if ($op->orders_payments_slug == $paymentMethod->payments_slug
                            && ($op->orders_payments_status != 'pending' || in_array($op->orders_payments_slug, ['cash','bank_transfer']))) {
                            $activePayment = $op;
                            break;
                        }
                    }
                }
                $balanceValue = null;
                if ($paymentMethod->payments_slug == 'points') $balanceValue = $customer_points_value ?? null;
                elseif ($paymentMethod->payments_slug == 'wallet') $balanceValue = $customers_wallet ?? null;
                elseif ($paymentMethod->payments_slug == 'store_credit') $balanceValue = $customers_store_credit ?? null;
            @endphp
            <div class="border-1 mb-3 cursor-pointer card-with-border is_active br-5 "
                data-id="{{ $paymentMethod->payments_id }}">
                <div class="card-body py-2 cart-border-radius">
                    <div class="d-flex flex-wrap align-items-center justify-content-between " @click="selectPayment({{ $paymentMethod->payments_id }})">

                        <div class="d-flex align-items-center gap-2">
                            @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
                            <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="card-title d-inline {{ $account->accounts_website_theme == 'theme6' ? 'text_4' : 'text_1' }} font-18 fb-500">{{ $paymentMethod->payments_name }}</span>
                        </div>
                        <span class=" transition-transform duration-300" :class="{ 'rotate-180': selectedPayment=='{{ $paymentMethod->payments_id }}' }" >
                            <i class="polaris-max-icon-arrow-down-bold {{ $account->accounts_website_theme == 'theme6' ? 'text_4' : 'text_1' }}"></i>
                        </span>

                    </div>
                    <div x-show="selectedPayment == '{{$paymentMethod->payments_id }}'">
                        <hr>
                        @if($balanceValue !== null)
                            <div class="font-14 text_4 mb-2">
                                @if($paymentMethod->payments_slug == 'points'){{ __('lang.YourPointsBalance') }}
                                @elseif($paymentMethod->payments_slug == 'wallet'){{ __('lang.YourWalletBalance') }}
                                @elseif($paymentMethod->payments_slug == 'store_credit'){{ __('lang.YourStoreCreditBalance') }}
                                @endif
                                : @include('components.currency',['price'=>$balanceValue])
                            </div>
                        @endif
                        @if($paymentMethod->payments_slug == 'bank_transfer')
                            <div class="mb-3 bank-transfer-upload-container">
                                <label class="form-label font-16 fb-600 mb-2 {{ $account->accounts_website_theme == 'theme6' ? 'text_4' : 'text_1' }}">
                                    {{ __('lang.bank_receipt') }} <span class="text-danger">*</span>
                                    <small class="d-block">
                                        {{ __('lang.order_bank_transfer_note', ['accountName' => isset($setting) ?  $setting->accounts_name : $account->accounts_name]) }}
                                    </small>
                                </label>
                                <div class="border-2 border-dashed br-5 p-4 text-center cursor-pointer position-relative d-flex flex-column align-items-center justify-content-center"
                                     style="border: 2px dashed #ccc; background: #fbfbfb; border-radius: 8px;"
                                     onclick="document.getElementById('bank_transfer_image_{{$paymentMethod->payments_id}}').click()">

                                    <div id="upload_prompt_{{$paymentMethod->payments_id}}" class="d-flex flex-column align-items-center justify-content-center">
                                        <span class="mb-2">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" class="bi bi-cloud-upload text-muted" viewBox="0 0 16 16">
                                              <path fill-rule="evenodd" d="M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.562 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.914-3.517.313-1.245 1.465-2.26 2.668-2.26.47 0 .916.155 1.26.44l.014.01-.015.012-.023.018-.01.008-.44.44a.5.5 0 0 1-.707-.708l.5-.5z"/>
                                              <path fill-rule="evenodd" d="M7.646 5.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2z"/>
                                            </svg>
                                        </span>
                                        <p class="mb-1 font-14 text-muted">{{ __('lang.dragDropReceipt') }}</p>
                                        <p class="mb-0 font-12 text-muted-light" style="font-size: 11px;">{{ __('lang.supportedFormats') }}</p>
                                    </div>

                                    <div id="upload_preview_container_{{$paymentMethod->payments_id}}" class="d-none w-100 flex-column align-items-center justify-content-center">
                                        <img id="upload_preview_{{$paymentMethod->payments_id}}" src="#" alt="Preview" class="img-fluid rounded mb-2 shadow-sm" style="max-height: 180px; object-fit: contain;">
                                        <div id="upload_pdf_preview_{{$paymentMethod->payments_id}}" class="d-none flex-column align-items-center justify-content-center mb-2">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-file-earmark-pdf text-danger" viewBox="0 0 16 16">
                                                <path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z"/>
                                                <path d="M4.603 14.087a.81.81 0 0 1-.438-.42c-.047-.183-.15-.95-.15-1.95 0-1.127.15-2.223.425-2.924.316-.807.728-1.503 1.258-2.007a1.644 1.644 0 0 1 .425-.337.89.89 0 0 1 .865-.084c.316.15.534.45.562.783.028.337-.15.703-.384 1.058-.234.357-.562.722-.975 1.087-.197.172-.44.337-.719.492-.122.378-.244.757-.347 1.137-.094.34-.188.68-.262 1.013.253.11.516.203.788.278.478.13 1.003.2 1.572.2.337 0 .684-.015.993-.05.156-.017.306-.044.45-.084a.89.89 0 0 1 .478.084c.2.103.344.291.384.516.037.22.003.456-.11.643a.855.855 0 0 1-.365.347c-.206.103-.478.113-.77.062a7.174 7.174 0 0 1-1.397-.478c-.684-.337-1.312-.769-1.875-1.259a11.233 11.233 0 0 1-2.428-.485c-.347-.122-.684-.244-1.012-.347l-.147-.044c-.44.5-.89 1.003-1.294 1.347a1.597 1.597 0 0 1-.684.347z"/>
                                            </svg>
                                            <span id="upload_pdf_name_{{$paymentMethod->payments_id}}" class="text-muted font-14 mt-1" style="word-break: break-all;"></span>
                                        </div>
                                        <button type="button" class="btn btn-sm btn-outline-danger"
                                                onclick="event.stopPropagation(); removeReceipt('{{$paymentMethod->payments_id}}')">
                                            <i class="polaris-max-icon-trash"></i> {{ __('lang.delete') ?? 'حذف' }}
                                        </button>
                                    </div>

                                    <input type="file"
                                           id="bank_transfer_image_{{$paymentMethod->payments_id}}"
                                           name="bank_transfer_image"
                                           accept="image/*,application/pdf"
                                           class="d-none"
                                           onchange="previewReceipt(this, '{{$paymentMethod->payments_id}}')">
                                </div>
                            </div>
                        @endif

                        <div class="input-group payment-input {{$dir}}">
                            <input placeholder="{{ __('lang.enterAmountYouWantPay') }}"
                                aria-label="{{ __('lang.enterAmountYouWantPay') }}" aria-describedby="basic-wallet"
                                type="text" class="rounded-0 rounded-start form-control flex-grow-1"
                                name="payments_amount_{{$paymentMethod->payments_id}}"
                                id="payments_amount_{{$paymentMethod->payments_id}}"
                                value="{{format_price($order->orders_final_cost - $order->total_orders_payments_amount,$account->accounts_number_decimal_digits) }}">
                            <span class="input-group-text input-currency">@include('components.currency',['price'=>''])</span>
                            <button type="button" class="input-group-text btn btn-primary px-3 border-radius-right-5  main-btn"
                                :class="{ 'disabled': processingPayment == '{{$paymentMethod->payments_id }}' }"
                                @click="processingPayment ? null : pay('{{$paymentMethod->payments_id }}','{{ $paymentMethod->payments_slug }}')">
                                <template x-if="processingPayment == '{{$paymentMethod->payments_id }}'">
                                     <img src="{{ asset('images/loading1.gif') }}" width="25" class="loadingIMG" alt="loading">
                                </template>
                                <template x-if="processingPayment != '{{$paymentMethod->payments_id }}'">
                                     <span>{{  $paymentMethod->payments_slug == 'cash' ? __('lang.confirm') : __('lang.pay')}}</span>
                                </template>
                            </button>
                        </div>
                        @if($activePayment)
                            <div class="font-14 text-success mt-2 d-flex align-items-center justify-content-between">
                                <span>
                                    <i class="fas fa-check-circle"></i>
                                    {{ __('lang.yourPaymentWasSuccessful', ['value'=> format_price($activePayment->orders_payments_amount,$account->accounts_number_decimal_digits)]) }}
                                </span>
                                <button type="button" class="border-0 bg-transparent p-0 text_5 font-14" @click="refund('0', {{ $activePayment->orders_payments_id }})">
                                    {{ __('lang.delete') }}
                                </button>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        @endforeach
    @else
        <div class="payments-border px-3">
        @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' : '' }}"
                @click="selectPayment('{{ $paymentMethod->payments_id }}')">
                <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>
                <div class="form-group custom-radio-btn payment-method-radio {{$dir}} cursor-pointer">
                    <div class="radio">
                        <label class="font-16">
                            <input type="radio" name="single-payment-method-radio" :checked="selectedPayment == '{{ $paymentMethod->payments_id }}'" @click.stop="selectPayment('{{ $paymentMethod->payments_id }}')">
                            <span class="checkmark cursor-pointer"></span>
                        </label>
                    </div>
                </div>
            </div>
            @if($paymentMethod->payments_slug == 'bank_transfer')
                <div x-show="selectedPayment == '{{ $paymentMethod->payments_id }}'" class="mb-3 bank-transfer-upload-container">
                    <label class="form-label font-16 fb-600 mb-2 {{ $account->accounts_website_theme == 'theme6' ? 'text_4' : 'text_1' }}">
                        {{ __('lang.bank_receipt') }} <span class="text-danger">*</span>
                        <small class="d-block">
                            {{ __('lang.order_bank_transfer_note', ['accountName' => isset($setting) ?  $setting->accounts_name : $account->accounts_name]) }}
                        </small>
                    </label>
                    <div class="border-2 border-dashed br-5 p-4 text-center cursor-pointer position-relative d-flex flex-column align-items-center justify-content-center"
                         style="border: 2px dashed #ccc; background: #fbfbfb; border-radius: 8px;"
                         onclick="document.getElementById('bank_transfer_image_{{$paymentMethod->payments_id}}').click()">
                        <div id="upload_prompt_{{$paymentMethod->payments_id}}" class="d-flex flex-column align-items-center justify-content-center">
                            <p class="mb-1 font-14 text-muted">{{ __('lang.dragDropReceipt') }}</p>
                            <p class="mb-0 font-12 text-muted-light" style="font-size: 11px;">{{ __('lang.supportedFormats') }}</p>
                        </div>
                        <div id="upload_preview_container_{{$paymentMethod->payments_id}}" class="d-none w-100 flex-column align-items-center justify-content-center">
                            <img id="upload_preview_{{$paymentMethod->payments_id}}" src="#" alt="Preview" class="img-fluid rounded mb-2 shadow-sm" style="max-height: 180px; object-fit: contain;">
                            <button type="button" class="btn btn-sm btn-outline-danger"
                                    onclick="event.stopPropagation(); removeReceipt('{{$paymentMethod->payments_id}}')">
                                <i class="polaris-max-icon-trash"></i> {{ __('lang.delete') }}
                            </button>
                        </div>
                        <input type="file"
                               id="bank_transfer_image_{{$paymentMethod->payments_id}}"
                               name="bank_transfer_image"
                               accept="image/*,application/pdf"
                               class="d-none"
                               onchange="previewReceipt(this, '{{$paymentMethod->payments_id}}')">
                    </div>
                </div>
            @endif
        @endforeach
        </div>
        <div class="payment-progress">
            <div class="card-body p-md-0">
                <button type="button" class="btn btn-block main-btn font-16 w-100 py-2 px-3 border-radius-50 mt-3"
                    :class="{ 'disabled': !selectedPayment || processingPayment }"
                    @click="selectedPayment && !processingPayment ? pay(selectedPayment, paymentSlugById[selectedPayment]) : null">
                    <template x-if="processingPayment">
                        <img src="{{ asset('images/loading1.gif') }}" width="25" class="loadingIMG" alt="loading">
                    </template>
                    {{-- Label on the reading-start side, amount (with currency) on the
                        reading-end side -- previously one x-text string mixed both
                        together with no visual separation and no currency symbol. The
                        remaining amount is fixed regardless of which method is
                        selected, so only the label needs to be reactive. --}}
                    <template x-if="!processingPayment">
                        <span class="d-flex align-items-center justify-content-between w-100">
                            <span x-text="selectedPayment ? ('{{ __('lang.payWith') }} ' + (paymentNamesById[selectedPayment] || '')) : '{{ __('lang.selectPaymentMethod') }}'"></span>
                            <span x-show="selectedPayment">
                                @include('components.currency', ['price'=> format_price($order->orders_final_cost - $order->total_orders_payments_amount, $account->accounts_number_decimal_digits)])
                            </span>
                        </span>
                    </template>
                </button>
            </div>
        </div>
    @endif
</div>
@push('css')
    <style>
        .loader-icon {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #333;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 0.8s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
@endpush
@push('js')
<script>
    function previewReceipt(input, paymentId) {
        if (input.files && input.files[0]) {
            var file = input.files[0];
            var imgPreview = document.getElementById('upload_preview_' + paymentId);
            var pdfPreview = document.getElementById('upload_pdf_preview_' + paymentId);
            var pdfName = document.getElementById('upload_pdf_name_' + paymentId);

            if (file.type === 'application/pdf') {
                if(imgPreview) imgPreview.classList.add('d-none');
                if(pdfPreview){
                    pdfPreview.classList.remove('d-none');
                    pdfPreview.classList.add('d-flex');
                }
                if(pdfName) pdfName.textContent = file.name;

                document.getElementById('upload_prompt_' + paymentId).classList.add('d-none');
                document.getElementById('upload_preview_container_' + paymentId).classList.remove('d-none');
                document.getElementById('upload_preview_container_' + paymentId).classList.add('d-flex');
            } else if (file.type.startsWith('image/')) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    imgPreview.src = e.target.result;
                    imgPreview.classList.remove('d-none');
                    if(pdfPreview){
                        pdfPreview.classList.add('d-none');
                        pdfPreview.classList.remove('d-flex');
                    }

                    document.getElementById('upload_prompt_' + paymentId).classList.add('d-none');
                    document.getElementById('upload_preview_container_' + paymentId).classList.remove('d-none');
                    document.getElementById('upload_preview_container_' + paymentId).classList.add('d-flex');
                }
                reader.readAsDataURL(file);
            } else {
                removeReceipt(paymentId);
                showErrorToastify("{{ __('lang.supportedFormats') }}");
            }
        } else {
            removeReceipt(paymentId);
        }
    }

    function removeReceipt(paymentId) {
        var fileInput = document.getElementById('bank_transfer_image_' + paymentId);
        if (fileInput) {
            fileInput.value = '';
        }
        var imgPreview = document.getElementById('upload_preview_' + paymentId);
        var pdfPreview = document.getElementById('upload_pdf_preview_' + paymentId);
        if (imgPreview) imgPreview.src = '#';
        if (pdfPreview) {
            pdfPreview.classList.add('d-none');
            pdfPreview.classList.remove('d-flex');
        }
        document.getElementById('upload_prompt_' + paymentId).classList.remove('d-none');
        document.getElementById('upload_preview_container_' + paymentId).classList.remove('d-flex');
        document.getElementById('upload_preview_container_' + paymentId).classList.add('d-none');
    }

    var currencySymbol = "{{ ($account->accounts_country_code == '+966' || $account->accounts_timezone == 'Asia/Riyadh')
        ? ($settings_currency ?: __('lang.SAR'))
        : ($settings_currency ?: __('lang.SAR')) }}";
        if(currencySymbol == 'SAR'){
            currencySymbol = "{{ __('lang.SAR') }}"
        }

    function paymentManager(){

            return {
                orders_id:'{{$order ? $order->orders_id : ''}}',
                selectedPayment : @if($regularMethods->count() == 1) '{{ $regularMethods->first()->payments_id }}' @else false @endif,
                loading: false,
                processingPayment: null,
                showMultiPayment: '{{ $account->accounts_multi_payments }}',
                defaultPaymentAmount: '{{ $order ? $order->orders_final_cost - $order->total_orders_payments_amount : 0 }}',
                paymentNamesById: @json($regularMethods->pluck('payments_name','payments_id')),
                paymentSlugById: @json($regularMethods->pluck('payments_slug','payments_id')),
                selectPayment(payment_id){
                    if(this.selectedPayment == payment_id){
                        this.selectedPayment = false;
                    }else{
                        this.selectedPayment = payment_id;
                    }
                },
                toggleReward(event, payment_id, payment_slug, activePaymentId){
                    if(event.target.checked){
                        this.pay(payment_id, payment_slug);
                    }else if(activePaymentId){
                        this.refund('0', activePaymentId);
                    }
                },
                // If the cart's delivery selection changed since this order was
                // (re)created, silently re-syncs the order (postOrder) before any
                // payment is charged, so we're never paying against stale/mismatched
                // order data. Updates orders_id/defaultPaymentAmount from the fresh
                // order in case they changed. Resolves false (and surfaces the
                // backend's message -- e.g. a still-missing required field) only
                // when that sync itself fails; the caller must not proceed then.
                ensureOrderFresh(){
                    if(!window.CartHelpers.cartDirty){
                        return Promise.resolve(true);
                    }
                    var self = this;
                    cartSetLoading(true);
                    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                    return fetch('{{ route('confirmOrder') }}', {
                        method: 'POST',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': csrfToken
                        }
                    }).then(res => res.json()).then(data => {
                        if(data && data.status == 200 && data.order){
                            self.orders_id = String(data.order.orders_id);
                            self.defaultPaymentAmount = data.order.orders_final_cost - data.order.total_orders_payments_amount;
                            window.CartHelpers.cartDirty = false;
                            return true;
                        }
                        showErrorToastify((data && data.message) ? data.message : "{{ __('lang.somethingWentWrong') }}");
                        return false;
                    }).catch(function(){
                        showErrorToastify("{{ __('lang.somethingWentWrong') }}");
                        return false;
                    }).finally(function(){
                        cartSetLoading(false);
                    });
                },
                async pay(payment_id , payment_slug = ''){
                    this.processingPayment = payment_id;
                    const orderIsFresh = await this.ensureOrderFresh();
                    if(!orderIsFresh){
                        this.processingPayment = null;
                        return;
                    }

                    let amountInput = document.querySelector('#payments_amount_'+payment_id);
                    let paymentAmount = amountInput ? amountInput.value : this.defaultPaymentAmount;
                    paymentAmount = this.showMultiPayment == '1' ? paymentAmount : this.defaultPaymentAmount;

                    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                        let headers = {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': csrfToken
                        };

                        let bodyData;

                        if (payment_slug === 'bank_transfer') {
                            let formData = new FormData();
                            formData.append('orders_id', this.orders_id);
                            formData.append('payments_id', payment_id);
                            formData.append('payments_amount', paymentAmount);

                            let fileInput = document.querySelector('#bank_transfer_image_' + payment_id);
                            if (fileInput && fileInput.files.length > 0) {
                                formData.append('bank_transfer_image', fileInput.files[0]);
                            }

                            bodyData = formData;
                        } else {
                            headers['Content-Type'] = 'application/json';
                            bodyData = JSON.stringify({
                                orders_id: this.orders_id,
                                payments_id: payment_id,
                                payments_amount: paymentAmount
                            });
                        }

                        fetch('{{ route('paymentOrder') }}', {
                            method: 'POST',
                            headers: headers,
                            body: bodyData
                        })
                        .then(res => {
                            const contentType = res.headers.get('content-type');
                            if (contentType && contentType.indexOf('application/json') !== -1) {
                                return res.json();
                            } else {
                                console.error('Expected JSON response, but received:', res.status, res.statusText);
                                return res.text().then(text => {
                                    console.error('Response body:', text);
                                    showErrorToastify('Unexpected response from server.');
                                    this.processingPayment = null;
                                    throw new Error('Non-JSON response received');
                                });
                            }
                        })
                        .then(data => {
                            if (data.status == 200) {
                                if(payment_slug == 'cash'){
                                    message =  "{{ __('lang.amountWillBeCollected1') }}" + paymentAmount + ' ' + currencySymbol + "{{ __('lang.amountWillBeCollected2') }}";
                                    showSuccessToastify(message);
                                }else{
                                    showSuccessToastify(data.message);
                                }

                                if( typeof trackAddPayment === 'function'){
                                    trackAddPayment(payment_slug,paymentAmount,@json($order)) ;
                                }
                                if (data.payment_url) {
                                    window.location.href = data.payment_url;
                                }
                                else if (data.redirect_route) {
                                    window.location.href = data.redirect_route;
                                }else{
                                    window.location.reload();
                                }

                            } else {
                               if (data.errors) {

                                    let errorMessages = [];

                                    for (const key in data.errors) {
                                        if (Array.isArray(data.errors[key])) {
                                            errorMessages.push(...data.errors[key]);
                                        } else {
                                            errorMessages.push(data.errors[key]);
                                        }
                                    }

                                    const fullErrorMessage = errorMessages.join('\n');
                                    showErrorToastify(fullErrorMessage);
                                } else {
                                    showErrorToastify(data.message || 'Payment failed.');
                                }
                                this.loading = false;
                                this.processingPayment = null;
                            }
                        }).catch(error => {
                            console.error('Error:', error);
                            showErrorToastify('An error occurred during the payment process.');
                            this.loading = false;
                            this.processingPayment = null;
                        });
                },
                refund(refundAll, payments_id = null){
                    this.loading = true;
                    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

                    let body = {
                        orders_id: this.orders_id,
                        refund_all: refundAll
                    };
                    if (refundAll == '2') {
                        body.orders_payments_ids = payments_id;
                    } else {
                        body.orders_payments_id = payments_id;
                    }

                    fetch('{{ route('refundPayments') }}', {
                        method: 'POST',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json',
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': csrfToken
                        },
                        body: JSON.stringify(body)
                    })
                    .then(res => {
                        const contentType = res.headers.get('content-type');
                        if (contentType && contentType.indexOf('application/json') !== -1) {
                            return res.json();
                        } else {
                            console.error('Expected JSON response, but received:', res.status, res.statusText);
                            return res.text().then(text => {
                                console.error('Response body:', text);
                                showErrorToastify('Unexpected response from server.');
                                throw new Error('Non-JSON response received');
                            });
                        }
                    })
                    .then(data => {
                        if (data.status == 200) {
                            showSuccessToastify(data.message || '{{ __("lang.refundSuccessfully") }}');
                            window.location.reload();
                        } else {
                            showErrorToastify(data.message || '{{ __("lang.refundFailed") }}');
                            if (data.errors) {
                                console.error('Validation Errors:', data.errors);
                            }
                            this.loading = false;
                        }
                    }).catch(error => {
                        console.error('Error:', error);
                        showErrorToastify('An error occurred during the Refund process.');
                        this.loading = false;
                    });
                }
            }
        }

</script>
@endpush