@php
    $availableMethods = collect($paymentMethods)->filter(function($paymentMethod) use ($agent) {
        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 x-data="paymentManager()">
    <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="kaisei-opti-bold font-20 {{ $account->accounts_website_theme == 'theme6' ? 'text_4' : 'text_1' }}">{{ count($availableMethods) > 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-16 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($availableMethods) > 1)
            <div class="font-16 text_4">
                {{$account->accounts_multi_payments != '1' ? __('lang.paymentsDesc') : __('lang.multiPaymentsDesc') }}
            </div>
        @endif
    </div>

    @foreach ($availableMethods as $paymentMethod)
            @php
                $isActive = 'is_active' ;
                if($paymentMethod->payments_slug == 'points'){
                    if((isset($customer_points_value) && $customer_points_value < $cart->carts_final_cost )|| $cart->coupons_code ){
                        $isActive = 'not_active' ;
                    }
                }
                if($paymentMethod->payments_slug == 'wallet'){
                    if(isset($customers_wallet) && $customers_wallet < $cart->carts_final_cost ){
                        $isActive = 'not_active' ;
                    }
                }
                if($paymentMethod->payments_slug == 'store_credit'){
                    if((isset($customers_store_credit) && $customers_store_credit < $cart->carts_final_cost )|| $cart->coupons_code ){
                        $isActive = 'not_active' ;
                    }
                }
            @endphp
            <div class="border-1 mb-3 cursor-pointer card-with-border {{ $isActive }} px-3 br-5 "
                data-id="{{ $paymentMethod->payments_id }}">
                <div class="card-body ">
                    <div class="d-flex flex-wrap align-items-center justify-content-between ">

                        <div @click="selectPayment({{ $paymentMethod->payments_id }})" class="flex-grow-1">
                            <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>
                            {{-- @include('cart.components.payment-method-image',['payment_slug'=>$paymentMethod->payments_slug]) --}}
                            @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>
                        <div>
                            @if(isset($order->orders_payments))
                                @foreach($order->orders_payments as $key => $order_payment)
                                    @if($order_payment->orders_payments_slug == $paymentMethod->payments_slug )
                                        @if($order_payment->orders_payments_status != 'pending' || in_array($order_payment->orders_payments_slug , ['cash','bank_transfer']))
                                            <button type="button" class="text_5 d-inline font-16 cursor-pointer border-0 bg-transparent p-0" @click="refund('0',{{ $order_payment->orders_payments_id }})">
                                                <span
                                                    class="{{ $account->accounts_website_theme == 'theme6' ? 'text_1' : 'text_8' }}">@include('components.currency',['price'=>format_price($order_payment->orders_payments_amount,$account->accounts_number_decimal_digits)])</span>
                                                <i class="polaris-max-icon-trash {{ $account->accounts_website_theme == 'theme6' ? 'text_3' : 'text_4' }}"></i>
                                            </button>
                                        @endif
                                    @endif
                                @endforeach
                            @endif
                        </div>

                    </div>
                    <div x-show="selectedPayment == '{{$paymentMethod->payments_id }}'">
                        <hr>
                        <div>
                            @if($paymentMethod->payments_slug  == 'points')
                                <div class="mb-2">{{ __('lang.YourPointsBalance')}} :  @include('components.currency',['price'=>$customer_points_value]) </div>
                            @elseif($paymentMethod->payments_slug  == 'wallet')
                                <div class="mb-2">{{ __('lang.YourWalletBalance')}} :  @include('components.currency',['price'=>$customers_wallet]) </div>
                            @elseif($paymentMethod->payments_slug  == 'store_credit')
                                <div class="mb-2">{{ __('lang.YourStoreCreditBalance')}} :  @include('components.currency',['price'=>$customers_store_credit]) </div>
                            @endif
                        </div>
                        @if(!in_array($paymentMethod->payments_slug , ['points','wallet','store_credit']) || ( $paymentMethod->payments_slug  == 'points' && $customer_points_value > 0) || ($paymentMethod->payments_slug  == 'wallet' && $customers_wallet > 0) || ($paymentMethod->payments_slug  == 'store_credit' && $customers_store_credit > 0))
                        
                        @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}}">
                            <div class="flex-grow-1 form-floating">
                                <input placeholder="{{$account->accounts_multi_payments == '1' ? __('lang.enterAmountYouWantPay') : __('lang.totalAmount') }}"
                                    aria-label="{{$account->accounts_multi_payments == '1' ? __('lang.enterAmountYouWantPay') : __('lang.totalAmount') }}" aria-describedby="basic-wallet"
                                    type="text" class="rounded-0 rounded-start form-control"
                                    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) }}" {{ $account->accounts_multi_payments != '1' ? 'disabled' : ''}}>

                                <label class="{{ $account->accounts_website_theme == 'theme6' ? 'text_7' : 'text_5' }}">{{ $account->accounts_multi_payments == '1' ? __('lang.enterAmountYouWantPay') : __('lang.totalAmount') }}</label>

                            </div>
                            <span class="input-group-text input-currency {{ $account->accounts_multi_payments != '1' ? 'disabled' : '' }}">@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>
                        @endif


                    </div>
                </div>
            </div>
            @endforeach
</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') {
                imgPreview.classList.add('d-none');
                pdfPreview.classList.remove('d-none');
                pdfPreview.classList.add('d-flex');
                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');
                    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(count($availableMethods) == 1) '{{ $availableMethods->first()->payments_id }}' @else false @endif,
                loading: false,
                processingPayment: null,
                showMultiPayment: '{{ $account->accounts_multi_payments }}',
                defaultPaymentAmount: '{{ $order->orders_final_cost }}',
                selectPayment(payment_id){
                    if(this.selectedPayment == payment_id){
                        this.selectedPayment = false;
                    }else{
                        this.selectedPayment = payment_id;
                    }
                },
                pay(payment_id , payment_slug = ''){
                     
                    this.processingPayment = payment_id;
                    let paymentAmount = document.querySelector('#payments_amount_'+payment_id).value;
                    paymentAmount = this.showMultiPayment == '1' ? paymentAmount : this.defaultPaymentAmount;

                    // let addressesId = document.querySelector('#customer_addresses_id').value;
                    // alert(addressesId);
                    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                    // if(!addressesId){
                    //     showErrorToastify("{{ __('lang.selectAddressToCanCompleteOrder') }}");
                    //     this.loading = false;
                    // }else{
                        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 => {
                            // Check if the response is actually JSON before parsing
                            const contentType = res.headers.get('content-type');
                            if (contentType && contentType.indexOf('application/json') !== -1) {
                                return res.json();
                            } else {
                                // Handle cases where the backend might still redirect or return non-JSON
                                // For example, if 'is_json' wasn't handled properly on the backend
                                console.error('Expected JSON response, but received:', res.status, res.statusText);
                                return res.text().then(text => { // Get the response body as text for debugging
                                    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;
                                }
                                // If the backend sent a redirect_route for internal routing
                                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]);
                                        }
                                    }

                                    // اجمع الرسائل في سطر واحد مفصول بـ \n أو <br> حسب نوع التوست
                                    const fullErrorMessage = errorMessages.join('\n');
                                    showErrorToastify(fullErrorMessage);
                                } else {
                                    showErrorToastify(data.message || 'Payment failed.');
                                }
                                this.loading = false;
                                this.processingPayment = null;
                            }
                        }).catch(error => { // Add a catch block for network errors
                            console.error('Error:', error);
                            showErrorToastify('An error occurred during the payment process.');
                            this.loading = false;
                            this.processingPayment = null;
                        }) .finally(() => {
                            // this.loading = false; // Stop loading after request finishes
                        });
                    // }
                },
                refund(refundAll,payments_id = null){
                    this.loading = true;
                    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

                    fetch('{{ route('refundPayments') }}', {
                        method: 'POST',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json',
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': csrfToken
                        },
                        body: JSON.stringify({
                            orders_id: this.orders_id,
                            refund_all: refundAll,
                            orders_payments_id: payments_id
                        })
                    })
                    .then(res => {
                        // Check if the response is actually JSON before parsing
                        const contentType = res.headers.get('content-type');
                        if (contentType && contentType.indexOf('application/json') !== -1) {
                            return res.json();
                        } else {
                            // Handle cases where the backend might still redirect or return non-JSON
                            // For example, if 'is_json' wasn't handled properly on the backend
                            console.error('Expected JSON response, but received:', res.status, res.statusText);
                            return res.text().then(text => { // Get the response body as text for debugging
                                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") }}');
                            //  console.log(data)
                            window.location.reload();
                        } else {
                            showErrorToastify(data.message || '{{ __("lang.refundFailed") }}');
                            if (data.errors) {
                                console.error('Validation Errors:', data.errors);
                            }
                            this.loading = false;
                        }
                    }).catch(error => { // Add a catch block for network errors
                        console.error('Error:', error);
                        showErrorToastify('An error occurred during the Refund process.');
                        this.loading = false;
                    }) .finally(() => {
                        // this.loading = false; // Stop loading after request finishes
                    });
                }
            }
        }

</script>
@endpush