@extends('layouts.admin')
                            @php
                            use App\Helpers\Helper;
                            @endphp
@section('breadcrumb')
<div class="main-breadcrumb d-flex flex-wrap align-items-center my-4 position-relative gap-3">
    <h2 class="breadcrumb-title mb-0 flex-grow-1 fs-16">{{ tr($title) }}</h2>
    <div class="flex-shrink-0">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb justify-content-end mb-0">
                <li><i class="ri-home-4-line fs-16 me-2 lh-sm text-primary"></i></li>
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('admin.users.index') }}">{{ tr('users') }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ tr($title) }}</li>
            </ol>
        </nav>
    </div>
</div>
@endsection

@section('content')
<div class="row justify-content-center">
    <div class="col-xl-8 col-lg-10">

        @if(session('flash_error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="ri-error-warning-line me-2"></i>{{ session('flash_error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif
        @if(session('flash_success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="ri-checkbox-circle-line me-2"></i>{{ session('flash_success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        <div class="card">
            <div class="card-header d-flex align-items-center gap-2">
                <i class="ri-exchange-dollar-line fs-20 text-primary"></i>
                <div>
                    <h5 class="mb-0">{{ tr('wallet_transfer') }}</h5>
                    <small class="text-muted">{{ $user->first_name }} {{ $user->last_name }}</small>
                </div>
            </div>

            <div class="card-body">
                <form id="walletTransferForm" action="{{ route('admin.users.wallet_transfer_convert', $user->unique_id) }}" method="POST">
                    @csrf

                    <div class="mb-4">
                        <label class="form-label fw-semibold" for="virtual_account_id">
                            <i class="ri-bank-line me-1 text-primary"></i>From — Virtual Account
                        </label>

                        @if($virtualAccounts->isEmpty())
                            <div class="alert alert-warning py-2 mb-0">
                                <i class="ri-information-line me-1"></i>No virtual accounts found for this user.
                            </div>
                        @else
                            <select name="virtual_account_id" id="virtual_account_id" class="form-select @error('virtual_account_id') is-invalid @enderror" required>
                                <option value="" data-balance="">— Select a Virtual Account —</option>
                                @foreach($virtualAccounts as $va)
                                    <option
                                        value="{{ $va->id }}"
                                        data-balance="{{ (float) ($va->balance ?? 0) }}"
                                        {{ old('virtual_account_id') == $va->id ? 'selected' : '' }}
                                    >
                                        {{ $va->account_holder_name ?? 'N/A' }}
                                        —
                                        {{ $va->account_bank_name ?? '' }}
                                        ({{ $va->account_number ?? 'N/A' }})
                                        @if(isset($va->balance))
                                            — Balance: {{ number_format($va->balance, 2) }}
                                        @endif
                                    </option>
                                @endforeach
                            </select>
                            @error('virtual_account_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        @endif
                    </div>

                    <div class="mb-4">
                        <label class="form-label fw-semibold" for="amount">
                            <i class="ri-money-dollar-circle-line me-1 text-primary"></i>Amount to Convert
                        </label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="ri-coins-line"></i></span>
                            <input
                                type="text"
                                name="amount"
                                id="amount"
                                class="form-control @error('amount') is-invalid @enderror"
                                placeholder="0.00"
                                value="{{ old('amount') }}"
                                autocomplete="off"
                                required
                            >
                            @error('amount')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div id="amount_error" class="text-danger small mt-1" style="display:none;"></div>
                    </div>

                    <div class="mb-4">
                        <label class="form-label fw-semibold" for="wallet_id">
                            <i class="ri-wallet-3-line me-1 text-success"></i>To — Wallet
                        </label>

                        @php
                            $activeWallets = $wallets->filter(fn($row) => !is_null($row['wallet']));
                        @endphp

                        @if($activeWallets->isEmpty())
                            <div class="alert alert-warning py-2 mb-0">
                                <i class="ri-information-line me-1"></i>No wallets found for this user.
                            </div>
                        @else
                            <select name="wallet_id" id="wallet_id" class="form-select @error('wallet_id') is-invalid @enderror" required>
                                <option value="">— Select a Wallet —</option>
                                @foreach($activeWallets as $row)
                                    @php $wallet = $row['wallet']; @endphp
                                    <option value="{{ $wallet->id }}" {{ old('wallet_id') == $wallet->id ? 'selected' : '' }}>
                                        {{ $wallet->currency }}
                                        @if($row['country_name'] ?? null)
                                            ({{ $row['country_name'] }})
                                        @endif
                                        — Balance: {{ number_format(Helper::getWalletBalance($wallet, $user), 4) }}
                                    </option>
                                @endforeach
                            </select>
                            @error('wallet_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        @endif
                    </div>

                    <div class="mb-4">
                        <label class="form-label fw-semibold" for="fx_rate">
                            <i class="ri-line-chart-line me-1 text-warning"></i>FX Rate
                        </label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="ri-percent-line"></i></span>
                            <input
                                type="number"
                                name="fx_rate"
                                id="fx_rate"
                                class="form-control @error('fx_rate') is-invalid @enderror"
                                step="0.000001"
                                min="0.000001"
                                value="{{ old('fx_rate') }}"
                                required
                            >
                            @error('fx_rate')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="d-flex justify-content-end gap-2 mt-4 pt-3 border-top">
                        <a href="{{ url()->previous() }}" class="btn btn-outline-secondary">
                            <i class="ri-arrow-left-line me-1"></i>Cancel
                        </a>
                        <button type="submit"
                            class="btn btn-primary"
                            @if($virtualAccounts->isEmpty() || $activeWallets->isEmpty()) disabled @endif
                        >
                            <i class="ri-refresh-line me-1"></i>Convert
                        </button>
                    </div>

                </form>
            </div>
        </div>

        <div class="row g-3 mt-1">
            <div class="col-md-6">
                <div class="card border-0 bg-primary bg-opacity-10">
                    <div class="card-body py-3">
                        <h6 class="text-primary mb-2"><i class="ri-bank-line me-1"></i>Virtual Accounts</h6>
                        @forelse($virtualAccounts as $va)
                            <div class="d-flex justify-content-between align-items-center py-1 border-bottom border-primary border-opacity-25">
                                <div>
                                    <span class="fw-semibold">{{ $va->account_holder_name ?? 'N/A' }}</span>
                                    <br>
                                    <small class="text-muted">{{ $va->account_bank_name }} · {{ $va->account_number }}</small>
                                </div>
                                @if(isset($va->balance))
                                    <span class="badge bg-primary">{{ number_format($va->balance, 2) }}</span>
                                @endif
                            </div>
                        @empty
                            <p class="text-muted mb-0 small">No virtual accounts.</p>
                        @endforelse
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card border-0 bg-success bg-opacity-10">
                    <div class="card-body py-3">
                        <h6 class="text-success mb-2"><i class="ri-wallet-3-line me-1"></i>Wallets</h6>
                        @forelse($wallets->filter(fn($r) => !is_null($r['wallet'])) as $row)
                            @php $wallet = $row['wallet']; @endphp
                            <div class="d-flex justify-content-between align-items-center py-1 border-bottom border-success border-opacity-25">
                                <div>
                                    <span class="fw-semibold">{{ $wallet->currency }}</span>
                                    <small class="text-muted ms-1">{{ $row['country_name'] ?? '' }}</small>
                                </div>
                                <span class="badge bg-success">{{ number_format(Helper::getWalletBalance($wallet, $user), 2) }}</span>
                            </div>
                        @empty
                            <p class="text-muted mb-0 small">No wallets.</p>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection
<script>
document.addEventListener('DOMContentLoaded', function () {

    const vaSelect = document.getElementById('virtual_account_id');
    const amountInput = document.getElementById('amount');
    const amountError = document.getElementById('amount_error');

    if (!vaSelect || !amountInput) {
        console.log('Elements missing');
        return;
    }

    let previousValidValue = '';

    function getSelectedBalance() {

        const option = vaSelect.options[vaSelect.selectedIndex];

        if (!option) {
            return 0;
        }

        return parseFloat(option.dataset.balance || 0);
    }

    function showError(message) {
        amountInput.classList.add('is-invalid');
        amountError.innerText = message;
        amountError.style.display = 'block';
    }

    function hideError() {
        amountInput.classList.remove('is-invalid');
        amountError.innerText = '';
        amountError.style.display = 'none';
    }

    amountInput.addEventListener('input', function (e) {

        let value = amountInput.value;

        value = value.replace(/[^0-9.]/g, '');

        const decimalCount = (value.match(/\./g) || []).length;

        if (decimalCount > 1) {
            value = previousValidValue;
        }

        const balance = getSelectedBalance();

        const numericValue = parseFloat(value);

        console.log({
            value,
            numericValue,
            balance
        });

        if (!isNaN(numericValue) && numericValue > balance) {

            amountInput.value = previousValidValue;

            showError(
                'Amount cannot exceed balance of ' + balance
            );

            return;
        }

        amountInput.value = value;

        previousValidValue = value;

        hideError();
    });

    vaSelect.addEventListener('change', function () {

        amountInput.value = '';
        previousValidValue = '';

        hideError();
    });

    const form = document.getElementById('walletTransferForm');

    form.addEventListener('submit', function (e) {

        const balance = getSelectedBalance();

        const amount = parseFloat(amountInput.value);

        if (isNaN(amount) || amount <= 0) {

            e.preventDefault();

            showError('Please enter valid amount');

            return;
        }

        if (amount > balance) {

            e.preventDefault();

            showError(
                'Amount cannot exceed balance of ' + balance
            );

            amountInput.focus();

            return false;
        }

    });

});
</script>