@extends('layouts.app')

@section('title', 'Home Page')

@section('content')

  <section class="find-the-ride pt-0 section">
    <div class="container">
      <div class="row">
        <div class="col-11 ms-auto me-auto">
          <!-- Wallet Balance Card -->
          <div class="wallet-background">
            <div class="curent-balance-part">
              <div class="curent-balance-price">
                <h5 class="text-white mb-2">{{ __('lang.current_balance') }}</h5>
                <h2 class="text-white mb-0" id="walletBalance"><span class="currency-symbol"></span>0.00</h2>
              </div>
            </div>
            <div class="btn-group d-flex align-items-center">
              <div class="sisf-m-btn me-4">
                <button type="button" class="btn-default top-up" id="topUpBtn">{{ __('lang.top_up') }}</button>
              </div>
              <div class="sisf-m-btn">
                <button type="button" class="btn-default withdraw" id="withdrawBtn">{{ __('lang.withdraw') }}</button>
              </div>
            </div>
          </div>
          
          <!-- Wallet History Tabs -->
          <div class="ride-tabs p-0 mt-4 shadow-none">
            <div class="nav-tabs for-ride-tab border-0 outline-none search-tabs" role="tablist">
              <button type="button" class="for-ride-tab-type active" data-bs-toggle="tab"
                data-bs-target="#transaction" role="tab" aria-selected="true">
                <span class="list-name text-uppercase">{{ __('lang.transaction_history') }}</span>
              </button>
              <button type="button" class="for-ride-tab-type" data-bs-toggle="tab"
                data-bs-target="#withdrawal" role="tab" aria-selected="false">
                <span class="list-name text-uppercase">{{ __('lang.withdrawal_history') }}</span>
              </button>
            </div>
            @if(session('payment_error'))
                <div class="alert alert-danger alert-dismissible fade show">
                    {{ session('payment_error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
                @php session()->forget('payment_error'); @endphp
            @endif
            <!-- Tab Content -->
            <div class="tab-content tab-content-for-ride">
              <!-- Transaction History Tab -->
              <div id="transaction" class="tab-pane active">
                <!-- Date Filter for Transactions -->
                <div class="transaction-filters mb-3">
                  <div class="filter-group" style="flex:1">
                    <label for="transactionDate" class="form-label">{{ __('lang.date') }}</label>
                    <select id="transactionDate" class="form-select filter-select">
                      <option value="all">{{ __('lang.all_time') }}</option>
                      <option value="thisMonth">{{ __('lang.this_month') }}</option>
                      <option value="lastMonth">{{ __('lang.last_month') }}</option>
                      <option value="thisYear">{{ __('lang.this_year') }}</option>
                    </select>
                  </div>
                </div>
                
                <div class="teansaction-history-contents" id="transactionsList">
                  <!-- Transactions will be populated here -->
                  <div class="text-center py-4">
                    <div class="spinner-border" role="status">
                      <span class="visually-hidden">{{ __('lang.loading') }}</span>
                    </div>
                  </div>
                </div>
                
                <!-- Pagination for Transactions -->
                <div class="pagination mt-4" id="transactionsPagination">
                  <button class="pagination-btn" data-page="prev" disabled>
                    <i class="fa-solid fa-chevron-left"></i>
                  </button>
                  <div class="pagination-pages" id="transactionPages">
                    <button class="pagination-page active" data-page="1">1</button>
                  </div>
                  <button class="pagination-btn" data-page="next">
                    <i class="fa-solid fa-chevron-right"></i>
                  </button>
                </div>
              </div>
              
              <!-- Withdrawal History Tab -->
              <div id="withdrawal" class="tab-pane fade">
                <!-- Date Filter for Withdrawals -->
                <div class="transaction-filters mb-3">
                  <div class="filter-group" style="flex:1">
                    <label for="withdrawalDate" class="form-label">{{ __('lang.date') }}</label>
                    <select id="withdrawalDate" class="form-select filter-select">
                      <option value="all">{{ __('lang.all_time') }}</option>
                      <option value="thisMonth">{{ __('lang.this_month') }}</option>
                      <option value="lastMonth">{{ __('lang.last_month') }}</option>
                      <option value="thisYear">{{ __('lang.this_year') }}</option>
                    </select>
                  </div>
                </div>
                
                <div class="teansaction-history-contents" id="withdrawalsList">
                  <!-- Withdrawals will be populated here -->
                  <div class="text-center py-4">
                    <div class="spinner-border" role="status">
                      <span class="visually-hidden">{{ __('lang.loading') }}</span>
                    </div>
                  </div>
                </div>
                
                <!-- Pagination for Withdrawals -->
                <div class="pagination mt-4" id="withdrawalsPagination">
                  <button class="pagination-btn" data-page="prev" disabled>
                    <i class="fa-solid fa-chevron-left"></i>
                  </button>
                  <div class="pagination-pages" id="withdrawalPages">
                    <button class="pagination-page active" data-page="1">1</button>
                  </div>
                  <button class="pagination-btn" data-page="next" disabled>
                    <i class="fa-solid fa-chevron-right"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Top Up Modal -->
  <div class="modal" id="paymentModal">
    <div class="modal-content">
      <div class="modal-header">
        <h3 id="paymentModalTitle">{{ __('lang.top_up_wallet') }}</h3>
        <button class="modal-close-btn">&times;</button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="paymentAmount">{{ __('lang.amount') }}</label>
          <div class="currency-prefix-inner d-flex align-items-center gap-2" style="border: 1px solid var(--color-border);border-radius: 5px;padding: 10px;">
            <span class="currency-prefix currency-prefix-topup">{{ $currencyData->symbol ?? '₹' }}</span>
            <input type="number" id="paymentAmount" class="form-control p-0 border-0" min="1" placeholder="{{ __('lang.enter_amount') }}">
          </div>
        </div>
        <div class="form-group">
          <label>{{ __('lang.payment_method') }}</label>
          <!-- <div class="payment-methods" id="paymentMethods"></div> -->
            <div class="siddhi-card overflow-hidden checkout-payment-options">
                <div class="custom-control custom-radio border-bottom py-2" style="display:none;"
                        id="razorpay_box">
                    <input type="radio" name="payment_method" id="razorpay" value="razorpay"
                            class="custom-control-input" checked>
                    <label class="custom-control-label"
                            for="razorpay">{{trans('lang.razorpay')}}</label>
                    <input type="hidden" id="isEnabled">
                    <input type="hidden" id="isSandboxEnabled">
                    <input type="hidden" id="razorpayKey">
                    <input type="hidden" id="razorpaySecret">
                </div>
                <div class="custom-control custom-radio border-bottom py-2" style="display:none;"
                        id="stripe_box">
                    <input type="radio" name="payment_method" id="stripe" value="stripe"
                            class="custom-control-input">
                    <label class="custom-control-label" for="stripe">{{trans('lang.stripe')}}</label>
                    <input type="hidden" id="isStripeSandboxEnabled">
                    <input type="hidden" id="stripeKey">
                    <input type="hidden" id="stripeSecret">
                </div>
                <div class="custom-control custom-radio border-bottom py-2" style="display:none;"
                        id="paypal_box">
                    <input type="radio" name="payment_method" id="paypal" value="paypal"
                            class="custom-control-input">
                    <label class="custom-control-label" for="paypal">{{trans('lang.pay_pal')}}</label>
                    <input type="hidden" id="ispaypalSandboxEnabled">
                    <input type="hidden" id="paypalKey">
                    <input type="hidden" id="paypalSecret">
                </div>
                <div class="custom-control custom-radio border-bottom py-2" style="display:none;"
                        id="payfast_box">
                    <input type="radio" name="payment_method" id="payfast" value="payfast"
                            class="custom-control-input">
                    <label class="custom-control-label" for="payfast">{{trans('lang.pay_fast')}}</label>
                    <input type="hidden" id="payfast_isEnabled">
                    <input type="hidden" id="payfast_isSandbox">
                    <input type="hidden" id="payfast_merchant_key">
                    <input type="hidden" id="payfast_merchant_id">
                    <input type="hidden" id="payfast_notify_url">
                    <input type="hidden" id="payfast_return_url">
                    <input type="hidden" id="payfast_cancel_url">
                </div>
                <div class="custom-control custom-radio border-bottom py-2" style="display:none;"
                        id="paystack_box">
                    <input type="radio" name="payment_method" id="paystack" value="paystack"
                            class="custom-control-input">
                    <label class="custom-control-label"
                            for="paystack">{{trans('lang.pay_stack')}}</label>
                    <input type="hidden" id="paystack_isEnabled">
                    <input type="hidden" id="paystack_isSandbox">
                    <input type="hidden" id="paystack_public_key">
                    <input type="hidden" id="paystack_secret_key">
                </div>
                <div class="custom-control custom-radio border-bottom py-2" style="display:none;"
                        id="flutterWave_box">
                    <input type="radio" name="payment_method" id="flutterwave" value="flutterwave"
                            class="custom-control-input">
                    <label class="custom-control-label"
                            for="flutterwave">{{trans('lang.flutter_wave')}}</label>
                    <input type="hidden" id="flutterWave_isEnabled">
                    <input type="hidden" id="flutterWave_isSandbox">
                    <input type="hidden" id="flutterWave_encryption_key">
                    <input type="hidden" id="flutterWave_public_key">
                    <input type="hidden" id="flutterWave_secret_key">
                </div>
                <div class="custom-control custom-radio border-bottom py-2" style="display:none;"
                        id="mercadopago_box">
                    <input type="radio" name="payment_method" id="mercadopago" value="mercadopago"
                            class="custom-control-input">
                    <label class="custom-control-label"
                            for="mercadopago">{{trans('lang.mercadopago')}}</label>
                    <input type="hidden" id="mercadopago_isEnabled">
                    <input type="hidden" id="mercadopago_isSandbox">
                    <input type="hidden" id="mercadopago_public_key">
                    <input type="hidden" id="mercadopago_access_token">
                    <input type="hidden" id="title">
                    <input type="hidden" id="quantity">
                    <input type="hidden" id="unit_price">
                </div>
                <div class="custom-control custom-radio border-bottom py-2" style="display:none;" id="xendit_box">    
                    <input type="radio" name="payment_method" id="xendit" value="xendit" class="custom-control-input">
                    <label class="custom-control-label" for="xendit">{{trans('lang.xendit')}}</label>
                    <input type="hidden" id="xendit_enable">
                    <input type="hidden" id="xendit_apiKey">
                    <input type="hidden" id="xendit_image">
                    <input type="hidden" id="xendit_isSandbox">
                </div>
                <div class="custom-control custom-radio border-bottom py-2" style="display:none;" id="midtrans_box">
                        <input type="radio" name="payment_method" id="midtrans" value="midtrans" class="custom-control-input">
                        <label class="custom-control-label" for="midtrans">{{trans('lang.midtrans')}}</label>
                        <input type="hidden" id="midtrans_enable">
                        <input type="hidden" id="midtrans_serverKey">
                        <input type="hidden" id="midtrans_image">
                        <input type="hidden" id="midtrans_isSandbox">
                </div>
                <div class="custom-control custom-radio border-bottom py-2" style="display:none;" id="orangepay_box">
                        <input type="radio" name="payment_method" id="orangepay" value="orangepay" class="custom-control-input">
                        <label class="custom-control-label" for="orangepay">{{trans('lang.orangepay')}}</label>
                        <input type="hidden" id="orangepay_auth">
                        <input type="hidden" id="orangepay_clientId">
                        <input type="hidden" id="orangepay_clientSecret">
                        <input type="hidden" id="orangepay_image">
                        <input type="hidden" id="orangepay_isSandbox">
                        <input type="hidden" id="orangepay_merchantKey">
                        <input type="hidden" id="orangepay_cancelUrl">
                        <input type="hidden" id="orangepay_notifyUrl">
                        <input type="hidden" id="orangepay_returnUrl">
                        <input type="hidden" id="orangepay_enable">
                </div>
                 <div class="custom-control custom-radio border-bottom py-2" style="display:none;" id="phonepe_box">
                    <input type="radio" name="payment_method" id="phonepe" value="phonepe" class="custom-control-input">
                    <label class="custom-control-label" for="phonepe">{{trans('lang.phonepe')}}</label>
                    <input type="hidden" id="phonepe_enable">
                    <input type="hidden" id="phonepe_isSandbox">
                    <input type="hidden" id="phonepe_clientId">
                    <input type="hidden" id="phonepe_clientSecret">
                    <input type="hidden" id="phonepe_merchantId">
                    <input type="hidden" id="phonepe_flowId">
                    <input type="hidden" id="phonepe_saltKey">
                    <input type="hidden" id="phonepe_saltIndex" value="1">
                </div>
                <div class="custom-control custom-radio border-bottom py-2" style="display:none;" id="cashfree_box">
                    <input type="radio" name="payment_method" id="cashfree" value="cashfree" class="custom-control-input">
                    <label class="custom-control-label" for="cashfree">{{trans('lang.Cashfree')}}</label>
                    <input type="hidden" id="cashfree_isSandbox">
                    <input type="hidden" id="cashfree_clientId">
                    <input type="hidden" id="cashfree_clientSecret">
                </div>
                <div class="custom-control custom-radio border-bottom py-2" style="display:none;" id="instamojo_box">
                    <input type="radio" name="payment_method" id="instamojo" value="instamojo"
                        class="custom-control-input">
                    <label class="custom-control-label" for="instamojo">{{trans('lang.Instamojo')}}</label>
                   <input type="hidden" id="instamojo_isEnabled">
                    <input type="hidden" id="instamojo_isSandbox">
                    <input type="hidden" id="instamojo_clientId">
                    <input type="hidden" id="instamojo_clientSecret">   
                </div>
                <div class="custom-control custom-radio border-bottom py-2" style="display:none;" id="paymongo_box">
                    <input type="radio" name="payment_method" id="paymongo" value="paymongo" class="custom-control-input">
                    <label class="custom-control-label" for="paymongo">{{trans('lang.PayMongo')}}</label>
                    <input type="hidden" id="paymongo_enable">
                    <input type="hidden" id="paymongo_isSandbox">
                    <input type="hidden" id="paymongo_secret_key">
                </div>
                <div class="custom-control custom-radio border-bottom py-2" style="display:none;" id="foloosi_box">
                    <input type="radio" name="payment_method" id="foloosi" value="foloosi" class="custom-control-input">
                    <label class="custom-control-label" for="foloosi">{{trans('lang.Foloosi')}}</label>
                    <input type="hidden" id="foloosi_enable">
                    <input type="hidden" id="foloosi_isSandbox">
                    <input type="hidden" id="foloosi_merchantKey">
                </div>
                <div class="custom-control custom-radio border-bottom py-2" style="display:none;" id="mtnmomo_box">
                    <input type="radio" name="payment_method" id="mtnmomo" value="mtnmomo" class="custom-control-input">
                    <label class="custom-control-label" for="mtnmomo">{{trans('lang.MTN_MoMo')}}</label>
                    <input type="hidden" id="mtnmomo_enable">
                    <input type="hidden" id="mtnmomo_isSandbox">
                    <input type="hidden" id="mtnmomo_primaryKey">
                    <input type="hidden" id="mtnmomo_callback">
                </div>
              
            </div>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary modal-close-btn">{{ __('lang.cancel') }}</button>
        <button class="btn btn-primary" id="confirmPaymentWallet" onclick="finalCheckout()">{{ __('lang.proceed_payment') }}</button>
      </div>
    </div>
  </div>

  <!-- Withdraw Modal -->
  <div class="modal" id="withdrawModal">
    <div class="modal-content">
      <div class="modal-header">
        <h3>{{ __('lang.withdrawal_request') }}</h3>
        <button class="modal-close-btn">&times;</button>
      </div>
      <div class="modal-body">
        <div class="form-group">
            <label for="withdrawPaymentAmount">{{ __('lang.amount') }}</label>
            <div class="currency-prefix-inner d-flex align-items-center gap-2" style="border: 1px solid var(--color-border);border-radius: 5px;padding: 10px;">
                <span class="currency-prefix currency-prefix-withdraw">{{ $currencyData->symbol ?? '₹' }}</span>
                <input type="number" id="withdrawPaymentAmount" class="form-control p-0 border-0" min="1" placeholder="{{ __('lang.enter_amount') }}">
            </div>
        </div>
        <div class="form-group mt-2">
          <label for="paymentNote">{{ __('lang.note') }}</label>
          <input type="text" id="paymentNote" class="form-control" placeholder="{{ __('lang.enter_note_optional') }}">
        </div>
        <div class="form-group mt-2">
          <div class="alert alert-warning">
            <i class="fa fa-info-circle" aria-hidden="true"></i>
            {{ __('lang.minimum_withdrawal') }} <b><span class="currency-symbol"></span>1.00</b>
          </div>
        </div>
        <div class="form-group">
          <label>{{ __('lang.payment_method') }}</label>
          <div class="payment-methods" id="withdrawalPaymentMethods"></div>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary modal-close-btn">{{ __('lang.cancel') }}</button>
        <button class="btn btn-primary" id="withdrawalConfirmPayment">{{ __('lang.withdraw') }}</button>
      </div>
    </div>
  </div>

    
@endsection

@section('script')  
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>  
<script>
    const withdrawRef = db.collection('withdraw_method').doc(firebaseUid);
    let availableMethods = {}; 
    var codSettings    = {} ;
    var walletSetting      = {};
    var paypalSetting      = {};
    var payStackSetting    = {};
    var stripeSettings      = {};
    var razorpaySetting    = {};
    var flutterWaveSetting = {};
    // var paytmSettings       = {};
    var Midtrans_setting    = {};
    var OrangePaySetting   = {};
    var MercadoPagoSetting= {};
    var XenditSetting      = {};
    var payFastSetting     = {};
     var PhonePeSetting = {};
     var cashfreeSetting     = {};
     var instamojoSetting     = {};
     var paymongoSetting     = {};
     var foloosiSetting = {};
     var mtnmomoSetting = {};
    var refCurrency = db.collection('currency').where('enable', '==', true);
    var currencyData = '';  
    var decimal_degits = '';
    refCurrency.get().then(async function (snapshots) {
        currencyData = snapshots.docs[0].data();
        currentCurrency = currencyData.symbol;
        currencyAtRight = currencyData.symbolAtRight;
        if (currencyData.decimalDigits) {
            decimal_degits = currencyData.decimalDigits;
        }
        document.querySelector('.currency-prefix-topup').textContent = currentCurrency;
        document.querySelector('.currency-prefix-withdraw').textContent = currentCurrency;
    });
    
    function loadWithdrawalMethods() {
      withdrawRef.get().then(doc => {
          const data = doc.exists ? doc.data() : {};
          availableMethods = data;

          const $container = $('#withdrawalPaymentMethods');
          $container.html('');

          const methods = [
              { key: 'bank', label: 'Bank Transfer', icon: '<i class="fas fa-university"></i>' },
              { key: 'stripe', label: 'Stripe', icon: '<img src="/images/stripe.png" height="20"/>' },
              { key: 'paypal', label: 'PayPal', icon: '<img src="/images/paypal.png" height="20"/>' },
              { key: 'flutterwave', label: 'Flutterwave', icon: '<img src="/images/flutterwave.png" height="20"/>' }
          ];

          let hasAnyMethod = false;

          methods.forEach(method => {
              if (data[method.key]) {
                  hasAnyMethod = true;
                  const id = `method_${method.key}`;
                  $container.append(`
                    <div class="payment-method">
                      <label class="payment-method-option">
                          <input type="radio" name="withdrawMethod" value="${method.key}" id="${id}">
                          <span class="icon">${method.icon}</span>
                          ${method.label}
                      </label>
                      </div>
                  `);
              }
          });

          // If no methods are available
        if (!hasAnyMethod) {
          $container.html(`
              <div class="text-sm text-center text-gray-400 py-2">
                  <i class="fas fa-info-circle text-yellow-500 mr-1"></i>
                  {{ trans('lang.no_withdrawal_method') }}<br>
                  {{ trans('lang.add_withdrawal_method') }}
              </div>
          `);
      }

      });
    }

    $('#withdrawalConfirmPayment').on('click', async function () {
        const amount = parseFloat($('#withdrawPaymentAmount').val());
        const note = $('#paymentNote').val().trim();
        const selectedMethod = $('input[name="withdrawMethod"]:checked').val();
       
        if (isNaN(amount) || amount < 1) {
            showMessage('{{ __('lang.please_enter_amount_at_least_1') }}', 'danger');
            return;
        }

        if (!selectedMethod || !availableMethods[selectedMethod]) {
            showMessage('{{ __('lang.please_select_valid_withdrawal_method') }}', 'danger');
            return;
        }

        try {
            const userSnap = await db.collection('users').doc(firebaseUid).get();
            const userData = userSnap.data();

            if (!userData || isNaN(parseFloat(userData.walletAmount))) {
                showMessage('{{ __('lang.unable_to_fetch_wallet_balance') }}', 'danger');
                return;
            }

            if (amount > parseFloat(userData.walletAmount)) {
                showMessage('{{ __('lang.insufficient_balance_to_withdraw') }}', 'danger');
                return;
            }

            const withdrawalData = {
                id: crypto.randomUUID(),
                userId: firebaseUid,
                amount: amount.toString(), 
                note: note || '',
                withdrawMethod: selectedMethod,
                createdDate: firebase.firestore.Timestamp.now(),
                paymentStatus: 'pending',
                paymentDate: null,
                adminNote: null
            };

            if (!confirm("{{ __('lang.confirm_withdrawal_request') }}")) return;

         
            $('.modal-close-btn').click();
            const currentBalanceStr = userData.walletAmount || "0";          
            const currentBalance    = parseFloat(currentBalanceStr);
            const newBalance = currentBalance - amount;
            const newBalanceStr = newBalance.toFixed(2);

            const userRef = db.collection('users').doc(firebaseUid);

            await userRef.update({
                walletAmount: newBalanceStr,
                updatedAt: firebase.firestore.FieldValue.serverTimestamp()
            });

            await db.collection('withdrawal_history').add(withdrawalData);

            showMessage("{{ __('lang.withdrawal_request_submitted') }}", 'success');
            location.reload();

        } catch (error) {
            console.error("Withdrawal submission failed:", error);
            showMessage("{{ __('lang.error_processing_request') }}", 'danger');
        }
    });

    // Load wallet balance
    async function loadWalletBalance() {
        try {
            const userDoc = await db.collection('users').doc(firebaseUid).get();
            if (userDoc.exists) {
                const userData = userDoc.data();
                const balance = parseFloat(userData.walletAmount || 0).toFixed(2);              
                if (currencyAtRight) {
                    document.getElementById('walletBalance').innerHTML = `${balance} ${currentCurrency}`;
                } else {
                    document.getElementById('walletBalance').innerHTML = `${currentCurrency} ${balance}`;
                }
            }
        } catch (error) {
            console.error("Error loading wallet balance:", error);
        }
    }

    // Load transactions
    async function loadTransactions(dateFilter = 'all') {
        const listEl = document.getElementById('transactionsList');
        listEl.innerHTML = `
            <div class="text-center py-4">
                <div class="spinner-border" role="status"></div>
            </div>`;

        try {
            const snap = await db.collection('wallet_transaction')
                .where('userId', '==', firebaseUid)
                .orderBy('createdDate', 'desc')
                .limit(50)
                .get();

            let html = '';

            if (snap.empty) {
                html = `<div class="text-center py-4">{{trans('lang.no_transactions_found')}}</div>`;
            } else {
                snap.forEach(doc => {
                    const data = doc.data();

                    const amount = parseFloat(data.amount) || 0;
                 
                    const isCredit = data.isCredit === true;
                    const date = data.createdDate?.toDate ? 
                                data.createdDate.toDate().toLocaleString() : '';

                    // Date filter
                    if (!matchesDateRange(data.createdDate, dateFilter)) return;

                    // Icon & color
                    const colorClass = isCredit ? 'success' : 'danger';
                    const sign = isCredit ? '+' : '-';
                    const iconDirection = isCredit ? 'down' : 'up';

                    html += `
                        <div class="history-list d-flex align-items-center">
                            <div class="icon me-4">
                                <span class="${colorClass}">
                                    <i class="fa-solid fa-arrow-${iconDirection}"></i>
                                </span>
                            </div>

                            <div class="content-with-price w-100 d-flex align-items-center justify-content-between">
                                <div class="content">
                                    <p>${data.note || 'Transaction'}</p>
                                    <span>${date}</span><br>
                                    <span>${data.paymentType}</span>
                                    <span class="badge bg-success ms-2">{{trans('lang.success_badge')}}</span>
                                </div>

                                <div class="price ${colorClass}">
                                    ${sign}${currencyAtRight ? 
                                        amount.toFixed(decimal_degits || 2) + ' ' + currentCurrency : 
                                        currentCurrency + ' ' + amount.toFixed(decimal_degits || 2)}
                                </div>
                            </div>
                        </div>
                    `;
                });
            }

            listEl.innerHTML = html;

        } catch (error) {
            console.error("Error loading transactions:", error);
            listEl.innerHTML = `<div class="text-center py-4">Error loading transactions</div>`;
        }
    }
    async function loadWithdrawals(dateFilter = 'all') {
        const listEl = document.getElementById('withdrawalsList');
        listEl.innerHTML = `
            <div class="text-center py-4">
                <div class="spinner-border" role="status">
                    <span class="visually-hidden">{{ __('lang.loading') }}</span>
                </div>
            </div>`;

        try {
            const snap = await db.collection('withdrawal_history')
                .where('userId', '==', firebaseUid)
                .orderBy('createdDate', 'desc')
                .limit(50)
                .get();

            let html = '';

            if (snap.empty) {
                html = `<div class="text-center py-4">{{trans('lang.no_transactions_found')}}</div>`;
            } else {
                snap.forEach(doc => {
                    const data = doc.data();
                    const amount = parseFloat(data.amount) || 0;
                    const date = data.createdDate?.toDate ?
                                data.createdDate.toDate().toLocaleString() : '';

                    const rawStatus = (data.paymentStatus || 'pending').toLowerCase();
                    let badgeClass = 'bg-warning';
                    let displayStatus = 'Pending';

                    if (['completed', 'approved', 'success'].includes(rawStatus)) {
                        badgeClass = 'bg-success';
                        displayStatus = 'Success';
                    } else if (['rejected', 'failed', 'declined'].includes(rawStatus)) {
                        badgeClass = 'bg-danger';
                        displayStatus = 'Rejected';
                    } else if (rawStatus.includes('pending') || rawStatus === 'processing') {
                        badgeClass = 'bg-warning';
                        displayStatus = 'Pending';
                    } else {
                        displayStatus = rawStatus.charAt(0).toUpperCase() + rawStatus.slice(1);
                    }

                    if (!matchesDateRange(data.createdDate, dateFilter)) return;

                    let colorClass = 'warning';
                    if (rawStatus === 'completed') colorClass = 'success';
                    if (rawStatus === 'failed') colorClass = 'danger';

                    html += `
                        <div class="history-list d-flex align-items-center">
                            <div class="icon me-4">
                                <span class="${colorClass}">
                                    <i class="fa-solid fa-money-bill-transfer"></i>
                                </span>
                            </div>
                            <div class="content-with-price w-100 d-flex align-items-center justify-content-between">
                                <div class="content">
                                    <p>Withdrawal${data.withdrawMethod ? ` (${data.withdrawMethod})` : ''}</p>
                                    <span>${date}</span><br>
                                    <span class="badge ${badgeClass} text-uppercase">${displayStatus}</span>
                                </div>
                                <div class="price text-danger">
                                    -${currentCurrency}${amount.toFixed(decimal_degits || 2)}
                                </div>
                            </div>
                        </div>
                    `;
                });
            }

            if (html === '') {
                html = `<div class="text-center py-4">{{trans('lang.no_transactions_found')}}</div>`;
            }

            listEl.innerHTML = html;
        } catch (error) {
            console.error("Error loading withdrawals:", error);
            listEl.innerHTML = `<div class="text-center py-4 text-danger">Error loading data</div>`;
        }
    }

    // Date range filter function
    function matchesDateRange(ts, range) {
        if (!ts || range === 'all') return true;
        const d = ts.toDate ? ts.toDate() : new Date(ts);
        const now = new Date();
        const year = now.getFullYear();
        const month = now.getMonth(); // 0-based
        
        if (range === 'thisMonth') {
            return d.getFullYear() === year && d.getMonth() === month;
        }
        if (range === 'lastMonth') {
            const lastMonth = (month + 11) % 12;
            const lastYear = month === 0 ? year - 1 : year;
            return d.getFullYear() === lastYear && d.getMonth() === lastMonth;
        }
        if (range === 'thisYear') {
            return d.getFullYear() === year;
        }
        return true;
    }

    $(document).ready(async function () {
        await db
        .collection('settings')
        .doc('payment')
        .get()
        .then((doc) => {
            if (!doc.exists) {
                console.error('Payment settings not found');
                return;
            }

            const paymentSettings = doc.data();
            
           codSettings        = paymentSettings.cash;
           walletSetting      = paymentSettings.wallet;
           paypalSetting      = paymentSettings.paypal;
           payStackSetting    = paymentSettings.payStack;
           stripeSettings      = paymentSettings.strip;
           razorpaySetting    = paymentSettings.razorpay;
           flutterWaveSetting = paymentSettings.flutterWave;
           Midtrans_setting    = paymentSettings.midtrans;
           OrangePaySetting   = paymentSettings.orangePay;
           MercadoPagoSetting = paymentSettings.mercadoPago;
           XenditSetting      = paymentSettings.xendit;
           payFastSetting     = paymentSettings.payfast;
            PhonePeSetting = paymentSettings.phonepe;
           cashfreeSetting     = paymentSettings.cashfree;
           instamojoSetting     = paymentSettings.instamojo;
           payMongoSetting = paymentSettings.paymongo;
           foloosiSetting = paymentSettings.foloosi;
            mtnmomoSetting = paymentSettings.mtnmomo;
            
        })
        .catch((error) => {
            console.error('Error fetching payment settings:', error);
        });

        if (razorpaySetting.enable) {
            var isEnabled = razorpaySetting.enable;
            $("#isEnabled").val(isEnabled);
            var isSandboxEnabled = razorpaySetting.isSandbox;
            $("#isSandboxEnabled").val(isSandboxEnabled);
            var razorpayKey = razorpaySetting.razorpayKey;
            $("#razorpayKey").val(razorpayKey);
            var razorpaySecret = razorpaySetting.razorpaySecret;
            $("#razorpaySecret").val(razorpaySecret);
            $("#razorpay_box").show();
        }
        if (paypalSetting.enable) {
            var isEnabled = paypalSetting.enable;
            var isLive = paypalSetting.isSandbox;
            if (isLive) {
                $("#ispaypalSandboxEnabled").val(false);
            } else {
                $("#ispaypalSandboxEnabled").val(true);
            }
            var paypalAppId = paypalSetting.paypalClient;
            $("#paypalKey").val(paypalAppId);
            var paypalSecret = paypalSetting.paypalSecret;
            $("#paypalSecret").val(paypalSecret);
            $("#paypal_box").show();
        }
        if (payFastSetting.enable) {
            var isEnable = payFastSetting.enable;
            $("#payfast_isEnabled").val(isEnable);
            var isSandboxEnabled = payFastSetting.isSandbox;
            $("#payfast_isSandbox").val(isSandboxEnabled);
            var merchant_id = payFastSetting.merchantId;
            $("#payfast_merchant_id").val(merchant_id);
            var merchant_key = payFastSetting.merchantKey;
            $("#payfast_merchant_key").val(merchant_key);
            var return_url = payFastSetting.return_url;
            $("#payfast_return_url").val(return_url);
            var cancel_url = payFastSetting.cancel_url;
            $("#payfast_cancel_url").val(cancel_url);
            var notify_url = payFastSetting.notify_url;
            $("#payfast_notify_url").val(notify_url);
            $("#payfast_box").show();
        }
        if (payStackSetting.enable) {
            var isEnable = payStackSetting.enable;
            $("#paystack_isEnabled").val(isEnable);
            var isSandboxEnabled = payStackSetting.isSandbox;
            $("#paystack_isSandbox").val(isSandboxEnabled);
            var publicKey = payStackSetting.publicKey;
            $("#paystack_public_key").val(publicKey);
            var secretKey = payStackSetting.secretKey;
            $("#paystack_secret_key").val(secretKey);
            $("#paystack_box").show();
        }
        if (flutterWaveSetting.enable) {
            var isEnable = flutterWaveSetting.enable;
            $("#flutterWave_isEnabled").val(isEnable);
            var isSandboxEnabled = flutterWaveSetting.isSandbox;
            $("#flutterWave_isSandbox").val(isSandboxEnabled);
            var encryptionKey = flutterWaveSetting.encryptionKey;
            $("#flutterWave_encryption_key").val(encryptionKey);
            var secretKey = flutterWaveSetting.secretKey;
            $("#flutterWave_secret_key").val(secretKey);
            var publicKey = flutterWaveSetting.publicKey;
            $("#flutterWave_public_key").val(publicKey);
            $("#flutterWave_box").show();
        }
        if (XenditSetting.enable) {
            $("#xendit_enable").val(XenditSetting.enable);
            $("#xendit_apiKey").val(XenditSetting.apiKey);
            $("#xendit_image").val(XenditSetting.image);
            $("#xendit_isSandbox").val(XenditSetting.isSandbox);
            $("#xendit_box").show();
        }
        if (Midtrans_setting.enable) {
            $("#midtrans_enable").val(Midtrans_setting.enable);
            $("#midtrans_serverKey").val(Midtrans_setting.serverKey);
            $("#midtrans_image").val(Midtrans_setting.image);
            $("#midtrans_isSandbox").val(Midtrans_setting.isSandbox);
            $("#midtrans_box").show();
        }
        if (OrangePaySetting.enable) {
            $("#orangepay_enable").val(OrangePaySetting.enable);
            $("#orangepay_auth").val(OrangePaySetting.auth);
            $("#orangepay_image").val(OrangePaySetting.image);
            $("#orangepay_isSandbox").val(OrangePaySetting.isSandbox);
            $("#orangepay_clientId").val(OrangePaySetting.clientId);
            $("#orangepay_clientSecret").val(OrangePaySetting.clientSecret);
            $("#orangepay_merchantKey").val(OrangePaySetting.merchantKey);
            $("#orangepay_notifyUrl").val(OrangePaySetting.notifyUrl);
            $("#orangepay_returnUrl").val(OrangePaySetting.returnUrl);
            $("#orangepay_cancelUrl").val(OrangePaySetting.cancelUrl);
            $("#orangepay_box").show();
        }
        
        if (MercadoPagoSetting.enable) {
            var isEnable = MercadoPagoSetting.enable;
            $("#mercadopago_isEnabled").val(isEnable);
            var isSandboxEnabled = MercadoPagoSetting.isSandbox;
            $("#mercadopago_isSandbox").val(isSandboxEnabled);
            var PublicKey = MercadoPagoSetting.publicKey;
            $("#mercadopago_public_key").val(PublicKey);
            var AccessToken = MercadoPagoSetting.accessToken;
            $("#mercadopago_access_token").val(AccessToken);
            var AccessToken = MercadoPagoSetting.AccessToken;
            $("#mercadopago_box").show();
        }
        if (walletSetting.enable) {
            var isEnabled = walletSetting.enable;
            if (isEnabled) {
                $("#walletenabled").val(true);
            } else {
                $("#walletenabled").val(false);
            }
            $("#wallet_box").show();
        }
        if (stripeSettings.enable) {
            var isEnabled = stripeSettings.enable;
            if (isEnabled) {                
                var isSandboxEnabled = stripeSettings.isSandbox;
                $("#isStripeSandboxEnabled").val(isSandboxEnabled);
                var stripeKey = stripeSettings.clientpublishableKey;
                $("#stripeKey").val(stripeKey);
                var stripeSecret = stripeSettings.stripeSecret;
                $("#stripeSecret").val(stripeSecret);
                $("#stripe_box").show();
            }
        }
       if(cashfreeSetting.enable) {
            $("#cashfree_isSandbox").val(cashfreeSetting.isSandbox);
            $("#cashfree_clientId").val(cashfreeSetting.clientId);
            $("#cashfree_clientSecret").val(cashfreeSetting.clientSecret);
            $("#cashfree_box").show();
        }
         if (PhonePeSetting.enable) {
            $("#phonepe_enable").val(PhonePeSetting.enable);
            $("#phonepe_isSandbox").val(PhonePeSetting.isSandbox);
            $("#phonepe_clientId").val(PhonePeSetting.clientId);
            $("#phonepe_clientSecret").val(PhonePeSetting.clientSecret);
            $("#phonepe_merchantId").val(PhonePeSetting.merchantId);
            $("#phonepe_flowId").val(PhonePeSetting.flowId);
            $("#phonepe_saltKey").val(PhonePeSetting.saltKey || '');
            $("#phonepe_box").show();
        }
        if (instamojoSetting.enable) {
            $("#instamojo_isSandbox").val(instamojoSetting.isSandbox);
            $("#instamojo_clientId").val(instamojoSetting.clientId);
            $("#instamojo_clientSecret").val(instamojoSetting.clientSecret);
            $("#instamojo_isEnabled").val(instamojoSetting.enable);
            $("#instamojo_box").show();
        }
        if (payMongoSetting.enable) {
            $("#paymongo_enable").val(payMongoSetting.enable);
            $("#paymongo_isSandbox").val(payMongoSetting.isSandbox);
            $("#paymongo_secret_key").val(payMongoSetting.secretKey);
            $("#paymongo_box").show();
        }
        if (foloosiSetting.enable) {
            $("#foloosi_enable").val(foloosiSetting.enable);
            $("#foloosi_isSandbox").val(foloosiSetting.isSandbox);
            $("#foloosi_merchantKey").val(foloosiSetting.merchantKey);
            $("#foloosi_box").show();
        }
        if (mtnmomoSetting.enable) {
            $("#mtnmomo_enable").val(mtnmomoSetting.enable);
            $("#mtnmomo_isSandbox").val(mtnmomoSetting.isSandbox);
            $("#mtnmomo_primaryKey").val(mtnmomoSetting.primaryKey);
            $("#mtnmomo_callback").val(mtnmomoSetting.callbackUrl);
            $("#mtnmomo_box").show();
        }


        loadWalletBalance();
        loadWithdrawalMethods();
        loadTransactions();
        loadWithdrawals();
        
        // Check for payment return status
        const urlParams = new URLSearchParams(window.location.search);
        const paymentStatus = urlParams.get('payment');
        const gateway = urlParams.get('gateway');
        const paymentId = urlParams.get('paymentId');
        
        if (paymentStatus && gateway && paymentId) {
            handlePaymentReturn(paymentStatus, gateway, paymentId);
        }
        
        function closePaymentModal() {
            $('#paymentModal').removeClass('show').css('display', 'none');
            $('body').removeClass('modal-open').css('overflow', '');
        }
        $('#topUpBtn').on('click', function () {
            $('#paymentModal').addClass('show').css('display', 'flex');
            $('body').addClass('modal-open').css('overflow', 'hidden');
        });

        // Close button & Cancel button
        $('.modal-close-btn').on('click', function () {
            closePaymentModal();
        });

        // Click outside modal-content
        $('#paymentModal').on('click', function (e) {
            if ($(e.target).is('#paymentModal')) {
                closePaymentModal();
            }
        });


        
        // Date filter change handlers
        $('#transactionDate').on('change', function() {
            loadTransactions($(this).val());
        });
        
        $('#withdrawalDate').on('change', function() {
            loadWithdrawals($(this).val());
        });


        $('button[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
            const target = $(this).data('bs-target');

            if (target === '#transaction') {
                loadTransactions($('#transactionDate').val());
            } else if (target === '#withdrawal') {
                loadWithdrawals($('#withdrawalDate').val());
            }
        });

        // Optional: force load withdrawal if it's already active on page load
        if ($('#withdrawal').hasClass('active')) {
            loadWithdrawals($('#withdrawalDate').val());
        }
    });

    function handlePaymentReturn(status, gateway, paymentId) {
        // Remove query params from URL
        window.history.replaceState({}, document.title, window.location.pathname);
        
        if (status === 'success') {
            // For gateways that redirect back after payment
            const amount = window[`${gateway}PaymentData`]?.amount;
            
            if (window[`${gateway}PaymentResolve`]) {
                window[`${gateway}PaymentResolve`]({
                    reference: paymentId,
                    gateway: gateway,
                    amount: amount,
                    status: 'completed',
                    paymentId: paymentId
                });
            } else {
                // If resolve function not available, update Firebase directly
                updatePaymentStatus(paymentId, 'completed');
            }
        } else if (status === 'failed' || status === 'cancelled') {
            if (window[`${gateway}PaymentReject`]) {
                window[`${gateway}PaymentReject`](new Error('Payment failed or cancelled'));
            } else {
                updatePaymentStatus(paymentId, 'failed');
            }
        }
    }
    
    async function updatePaymentStatus(paymentId, status) {
        try {
            await db.collection('wallet_transaction').doc(paymentId).update({
                status: status,
                updatedAt: firebase.firestore.FieldValue.serverTimestamp()
            });
            
            if (status === 'completed') {
                const paymentDoc = await db.collection('wallet_transaction').doc(paymentId).get();
                const amount = paymentDoc.data().amount;
                
                await db.collection('users').doc('{{ auth()->user()->firebase_uid }}').update({
                    walletAmount: firebase.firestore.FieldValue.increment(amount),
                    updatedAt: firebase.firestore.FieldValue.serverTimestamp()
                });
                
                showMessage('{{ __('lang.payment_successful_wallet_updated') }}', 'success');
            } else {
                showMessage('{{ __('lang.payment_failed_or_cancelled') }}', 'danger');
            }
            
            window.location.href = '/wallet';
        } catch (error) {
            console.error('Error updating payment status:', error);
            showMessage('{{ __('lang.error_updating_payment_status') }}', 'danger');
            window.location.href = '/wallet';
        }
    }

    // If existing JS reads #transactionType, force type = 'all' now
    const getTransactionType = () => 'all';

    async function finalCheckout() {
        payableAmount = $('#paymentAmount').val();
        if (payableAmount == 0 || payableAmount == '' || payableAmount == "0") {
            showMessage('{{ __('lang.please_enter_amount') }}', 'danger');
            return false;
        }
       
            var createdDate = firebase.firestore.FieldValue.serverTimestamp();
            var topupAmount = $('#paymentAmount').val();
            var payment_method = $('input[name="payment_method"]:checked').val();
          
          
            var user_id = '{{ auth()->user()->firebase_uid }}';
          
            var wallet_json = {                    
                'price': topupAmount,
                'message': 'Top Up Wallet',                    
                'userid': user_id,                    
            }
            if (payment_method == "razorpay") {
                var razorpayKey = $("#razorpayKey").val();
                var razorpaySecret = $("#razorpaySecret").val();
               
                $.ajax({
                    type: 'POST',
                    url: "