@extends('layouts.user')

@section('title')
Fund AI Bot
@endsection

@section('content')

@php
$isGrant = $walletSource === 'grant';
$accentColor = $isGrant ? '#10b981' : '#f97316';
$accentDim = $isGrant ? 'rgba(16,185,129,0.09)' : 'rgba(249,115,22,0.09)';
$accentBorder = $isGrant ? 'rgba(16,185,129,0.22)' : 'rgba(249,115,22,0.22)';
$accentGlow = $isGrant ? 'rgba(16,185,129,0.25)' : 'rgba(249,115,22,0.25)';
@endphp

<style>
    :root {
        --accent: {{ $accentColor }};
        --accent-dim: {{ $accentDim }};
        --accent-bdr: {{ $accentBorder }};
        --accent-glow: {{ $accentGlow }};
        --orange: #f97316;
        --orange-dim: rgba(249, 115, 22, 0.09);
        --orange-glow: rgba(249, 115, 22, 0.22);
        --green: #10b981;
        --green-dim: rgba(16, 185, 129, 0.09);
        --red: #ef4444;
        --red-dim: rgba(239, 68, 68, 0.08);
        --amber: #f59e0b;
        --purple: #660066;
        --card-bg: #ffffff;
        --card-border: rgba(0, 0, 0, 0.07);
        --muted: #94a3b8;
        --radius: 16px;
        --radius-sm: 10px;
        --shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
        --shadow-lg: 0 8px 36px rgba(0, 0, 0, 0.13);
        --ease: cubic-bezier(.4, 0, .2, 1);
    }

    .dark {
        --card-bg: #0f172a;
        --card-border: rgba(255, 255, 255, 0.07);
        --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    }

    .sidebar-card {
        background: var(--card-bg);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        border: 1px solid var(--card-border);
        padding: 1.5rem;
    }

    .avatar-ring {
        width: 6rem;
        height: 6rem;
        border-radius: 50%;
        padding: 3px;
        background: linear-gradient(135deg, var(--orange), #660066);
        display: inline-block;
    }

    .avatar-ring img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 3px solid var(--card-bg);
        object-fit: cover;
        display: block;
    }

    /* ── Bot plan header tile ── */
    .bot-tile {
        background: linear-gradient(135deg, var(--purple) 0%, #880088 100%);
        border-radius: var(--radius);
        padding: 1.4rem 1.75rem;
        color: #fff;
        box-shadow: 0 5px 22px rgba(102, 0, 102, 0.3);
        position: relative;
        overflow: hidden;
        margin-bottom: 1.5rem;
    }

    .bot-tile::after {
        content: '';
        position: absolute;
        top: -40px;
        right: -40px;
        width: 130px;
        height: 130px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.07);
        pointer-events: none;
    }

    .bot-tile-label {
        font-size: .7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .07em;
        opacity: .75;
    }

    .bot-tile-name {
        font-size: 1.5rem;
        font-weight: 900;
        letter-spacing: -.03em;
        line-height: 1.1;
        margin: .25rem 0 .5rem;
        position: relative;
        z-index: 1;
    }

    .bot-tile-meta {
        display: flex;
        align-items: center;
        gap: .6rem;
        flex-wrap: wrap;
        font-size: .72rem;
        opacity: .8;
        position: relative;
        z-index: 1;
    }

    .bot-meta-chip {
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        padding: .16rem .55rem;
        border-radius: 99px;
        background: rgba(255, 255, 255, 0.15);
        font-weight: 700;
        font-size: .65rem;
    }

    /* ── Wallet lock notice ── */
    .wallet-lock {
        display: flex;
        align-items: flex-start;
        gap: .75rem;
        padding: .9rem 1.1rem;
        border-radius: var(--radius-sm);
        background: var(--accent-dim);
        border: 1px solid var(--accent-bdr);
        margin-bottom: 1.5rem;
        font-size: .78rem;
        line-height: 1.6;
        font-weight: 500;
    }

    .wallet-lock svg {
        flex-shrink: 0;
        margin-top: 1px;
        color: var(--accent);
    }

    .wallet-lock strong {
        color: var(--accent);
    }

    /* ── Wallet display chip ── */
    .wallet-display {
        display: flex;
        align-items: center;
        gap: .85rem;
        padding: 1rem 1.1rem;
        border-radius: var(--radius-sm);
        border: 2px solid var(--accent-bdr);
        background: var(--accent-dim);
        margin-bottom: 1.25rem;
    }

    .wallet-display-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: var(--card-bg);
        border: 1px solid var(--accent-bdr);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--accent);
        flex-shrink: 0;
    }

    .wallet-display-name {
        font-size: .82rem;
        font-weight: 800;
    }

    .wallet-display-bal {
        font-size: 1.15rem;
        font-weight: 900;
        color: var(--accent);
        line-height: 1;
    }

    .wallet-display-label {
        font-size: .65rem;
        color: var(--muted);
        margin-top: .1rem;
    }

    .locked-badge {
        display: inline-flex;
        align-items: center;
        gap: .25rem;
        padding: .18rem .55rem;
        border-radius: 99px;
        font-size: .62rem;
        font-weight: 800;
        background: rgba(148, 163, 184, .1);
        color: var(--muted);
        border: 1px solid var(--card-border);
        margin-left: .5rem;
    }

    /* ── Fund form card ── */
    .fund-card {
        background: var(--card-bg);
        border-radius: var(--radius);
        border: 1px solid var(--card-border);
        box-shadow: var(--shadow-lg);
        overflow: hidden;
        max-width: 560px;
    }

    .fund-card-header {
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid var(--card-border);
        background: var(--accent-dim);
        display: flex;
        align-items: center;
        gap: .65rem;
    }

    .fund-card-icon {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        background: var(--card-bg);
        border: 1px solid var(--accent-bdr);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--accent);
        flex-shrink: 0;
    }

    .fund-card-title {
        font-size: .92rem;
        font-weight: 800;
    }

    .fund-card-sub {
        font-size: .72rem;
        color: var(--muted);
        margin-top: .1rem;
    }

    .fund-card-body {
        padding: 1.4rem 1.5rem;
    }

    /* ── Range indicator ── */
    .range-bar-wrap {
        margin-bottom: 1.25rem;
    }

    .range-bar-labels {
        display: flex;
        justify-content: space-between;
        font-size: .68rem;
        color: var(--muted);
        margin-bottom: .35rem;
        font-weight: 600;
    }

    .range-bar {
        height: 6px;
        border-radius: 99px;
        background: var(--card-border);
        position: relative;
        overflow: visible;
    }

    .range-bar-fill {
        height: 100%;
        border-radius: 99px;
        background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 70%, white));
        transition: width .3s var(--ease);
        position: absolute;
        top: 0;
        left: 0;
    }

    .range-bar-thumb {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--accent);
        border: 2px solid #fff;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        transition: left .3s var(--ease);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    }

    /* ── Amount input ── */
    .field-label {
        font-size: .78rem;
        font-weight: 700;
        display: block;
        margin-bottom: .4rem;
    }

    .input-wrap {
        position: relative;
        margin-bottom: .5rem;
    }

    .input-icon {
        position: absolute;
        left: .9rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--muted);
        pointer-events: none;
        display: flex;
        align-items: center;
    }

    .amount-input {
        width: 100%;
        height: 52px;
        padding: 0 4.5rem 0 2.6rem;
        border-radius: var(--radius-sm);
        border: 1.5px solid var(--card-border);
        background: var(--card-bg);
        color: inherit;
        font-size: 1.15rem;
        font-weight: 800;
        outline: none;
        transition: border-color .18s, box-shadow .18s;
    }

    .amount-input:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-dim);
    }

    .amount-input::placeholder {
        color: var(--muted);
        font-weight: 400;
        font-size: .9rem;
    }

    .input-currency {
        position: absolute;
        right: .85rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: .7rem;
        font-weight: 800;
        color: var(--accent);
        letter-spacing: .05em;
    }

    .max-btn {
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        padding: .22rem .6rem;
        border-radius: 6px;
        font-size: .68rem;
        font-weight: 800;
        background: var(--accent-dim);
        color: var(--accent);
        border: 1px solid var(--accent-bdr);
        cursor: pointer;
        transition: background .15s;
        margin-left: .5rem;
    }

    .max-btn:hover {
        background: var(--accent);
        color: #fff;
    }

    .hint-row {
        display: flex;
        align-items: center;
        gap: .4rem;
        font-size: .72rem;
        color: var(--muted);
        margin-bottom: .9rem;
    }

    .hint-row.error {
        color: var(--red);
    }

    .hint-row.ok {
        color: var(--green);
    }

    /* insufficient balance state */
    .insufficient-notice {
        padding: 1.25rem;
        border-radius: var(--radius-sm);
        background: var(--red-dim);
        border: 1px solid rgba(239, 68, 68, .22);
        text-align: center;
        font-size: .82rem;
        line-height: 1.6;
    }

    .insufficient-notice strong {
        color: var(--red);
    }

    /* ── Submit button ── */
    .fund-btn {
        width: 100%;
        padding: .78rem;
        border-radius: var(--radius-sm);
        border: none;
        background: var(--accent);
        color: #fff;
        font-size: .9rem;
        font-weight: 800;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        box-shadow: 0 3px 14px var(--accent-glow);
        transition: filter .18s, transform .15s;
        margin-top: 1.1rem;
    }

    .fund-btn:hover:not(:disabled) {
        filter: brightness(1.08);
        transform: translateY(-1px);
    }

    .fund-btn:disabled {
        opacity: .4;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

    .back-link {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        font-size: .8rem;
        font-weight: 700;
        color: var(--muted);
        text-decoration: none;
        margin-bottom: 1.25rem;
        transition: color .15s;
    }

    .back-link:hover {
        color: var(--accent);
    }

    .once-note {
        display: flex;
        align-items: flex-start;
        gap: .55rem;
        padding: .75rem .9rem;
        border-radius: var(--radius-sm);
        background: rgba(245, 158, 11, .07);
        border: 1px solid rgba(245, 158, 11, .25);
        font-size: .75rem;
        line-height: 1.55;
        color: #92400e;
        margin-bottom: 1.1rem;
    }

    .dark .once-note {
        color: #fcd34d;
    }

    .once-note svg {
        flex-shrink: 0;
        margin-top: 1px;
        color: var(--amber);
    }
</style>

<section class="relative lg:pb-24 pb-16 md:mt-[84px] mt-[70px]">
    <div class="relative md:container container-fluid">
        <div class="relative overflow-hidden md:rounded-md shadow dark:shadow-gray-700 h-52 bg-cover bg-center"
            style="background-image:url('{{ asset('images/profile-1.jpg') }}');">
            <div style="position:absolute;inset:0;background:linear-gradient(135deg,rgba(102,0,102,0.5),rgba(249,115,22,0.3));"></div>
        </div>
    </div>

    <div class="container relative mt-16 md:mt-24">
        <div class="md:flex" style="gap:1.5rem;">

            {{-- Sidebar --}}
            <div class="lg:w-1/4 md:w-1/3 md:px-0">
                <div class="relative" style="margin-top:-7rem;">
                    <div class="sidebar-card">
                        <div class="mb-5 text-center">
                            <div class="flex justify-center mb-4">
                                <span class="avatar-ring"><img src="{{ asset('images/avatar-1.png') }}" alt="avatar"></span>
                            </div>
                            <h5 class="text-base font-bold">{{ auth()->user()->username }}</h5>
                            <p class="text-xs mt-1" style="color:var(--muted);">{{ auth()->user()->email }}</p>
                        </div>
                        <x-side-nav />
                    </div>
                </div>
            </div>

            {{-- Main --}}
            <div class="mt-6 lg:w-3/4 md:w-2/3 md:px-0 md:mt-0" style="display:flex;flex-direction:column;gap:1.5rem;">

                <x-alert />

                <a href="{{ route('ai-dashboard') }}" class="back-link">
                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                    </svg>
                    Back to AI Dashboard
                </a>

                {{-- Bot plan tile --}}
                <div class="bot-tile">
                    <div style="position:relative;z-index:1;">
                        <div class="bot-tile-label">AI Bot Plan</div>
                        <div class="bot-tile-name">{{ $investment->plan?->name }}</div>
                        <div class="bot-tile-meta">
                            <span class="bot-meta-chip">
                                <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2" />
                                </svg>
                                Capital: ${{ number_format($minFund, 2) }} – ${{ number_format($maxFund, 2) }}
                            </span>
                            <span class="bot-meta-chip">
                                <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                                Purchased {{ $investment->created_at->format('d M Y') }}
                            </span>
                            <span class="bot-meta-chip" style="background:rgba(255,255,255,0.22);">
                                Funded via {{ $walletLabel }}
                            </span>
                        </div>
                    </div>
                </div>

                {{-- Wallet lock notice --}}
                <div class="wallet-lock">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                    </svg>
                    <span>
                        This bot was purchased using your <strong>{{ $walletLabel }}</strong>.
                        You must fund it from the <strong>same wallet</strong>.
                        Profits from this bot will also return to your <strong>{{ $walletLabel }}</strong>.
                    </span>
                </div>

                {{-- Fund form card --}}
                <div class="fund-card">
                    <div class="fund-card-header">
                        <div class="fund-card-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
                            </svg>
                        </div>
                        <div>
                            <div class="fund-card-title">Fund AI Bot Capital</div>
                            <div class="fund-card-sub">One-time funding · range ${{ number_format($minFund, 2) }} – ${{ number_format($maxFund, 2) }}</div>
                        </div>
                    </div>

                    <div class="fund-card-body">

                        {{-- Wallet balance display (read-only, shows locked source) --}}
                        <div class="wallet-display">
                            <div class="wallet-display-icon">
                                @if($isGrant)
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                                </svg>
                                @else
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
                                </svg>
                                @endif
                            </div>
                            <div style="flex:1;min-width:0;">
                                <div class="wallet-display-name">
                                    {{ $walletLabel }}
                                    <span class="locked-badge">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                                        </svg>
                                        Locked to this bot
                                    </span>
                                </div>
                                <div class="wallet-display-bal">${{ number_format($walletBalance, 2) }}</div>
                                <div class="wallet-display-label">Available balance · USDT</div>
                            </div>
                        </div>

                        @if(!$canFundMin)
                        {{-- Insufficient balance state --}}
                        <div class="insufficient-notice">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="#ef4444" stroke-width="1.5" style="display:block;margin:0 auto .6rem;">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                            </svg>
                            Your <strong>{{ $walletLabel }}</strong> has <strong>${{ number_format($walletBalance, 2) }}</strong>,
                            which is below the minimum capital of <strong>${{ number_format($minFund, 2) }}</strong> needed to fund this bot.
                            @if($isGrant)
                            <br><br>Your grant funds may have been used for trading. Contact support or wait for more grant activity.
                            @else
                            <br><br><a href="{{ route('deposit') }}" style="color:var(--orange);font-weight:700;">Deposit more funds →</a>
                            @endif
                        </div>

                        @else
                        {{-- Form --}}
                        <div class="once-note">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                            </svg>
                            You can only fund this bot once. Choose your amount carefully — it cannot be changed after funding.
                        </div>

                        {{-- Visual capital range bar --}}
                        <div class="range-bar-wrap">
                            <div class="range-bar-labels">
                                <span>Min: ${{ number_format($minFund, 2) }}</span>
                                <span id="inputDisplay" style="font-weight:800;color:var(--accent);">$0.00</span>
                                <span>Max: ${{ number_format($maxFund, 2) }}</span>
                            </div>
                            <div class="range-bar" id="rangeBar">
                                <div class="range-bar-fill" id="rangeFill" style="width:0%;"></div>
                                <div class="range-bar-thumb" id="rangeThumb" style="left:0%;"></div>
                            </div>
                        </div>

                        <form method="post" action="{{ route('ai-fund', $investment->id) }}" id="fundForm">
                            @csrf
                            {{-- Hidden: pass the locked wallet source so the POST controller uses it --}}
                            <input type="hidden" name="wallet_source" value="{{ $walletSource }}">

                            <label class="field-label" for="amount">
                                Capital amount
                                <button type="button" class="max-btn" onclick="setMax()">Max</button>
                            </label>
                            <div class="input-wrap">
                                <span class="input-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2" />
                                    </svg>
                                </span>
                                <input type="number" id="amount" name="amount" required
                                    min="{{ $minFund }}" max="{{ min($maxFund, $walletBalance) }}"
                                    step="0.01"
                                    class="amount-input" placeholder="{{ number_format($minFund, 2) }}"
                                    oninput="updateBar()">
                                <span class="input-currency">USDT</span>
                            </div>

                            <div class="hint-row" id="hintRow">
                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <circle cx="12" cy="12" r="10" />
                                    <path stroke-linecap="round" d="M12 8v4m0 4h.01" />
                                </svg>
                                Enter between ${{ number_format($minFund, 2) }} and ${{ number_format(min($maxFund, $walletBalance), 2) }}
                            </div>

                            <button type="submit" class="fund-btn" id="fundBtn" disabled
                                onclick="return confirm('Fund this bot with $'+parseFloat(document.getElementById(\'amount\').value).toFixed(2)+' from your {{ $walletLabel }}? This cannot be undone.')">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
                                </svg>
                                Fund Bot from {{ $walletLabel }}
                            </button>
                        </form>
                        @endif

                    </div>
                </div>

            </div>
        </div>
    </div>
</section>

<script>
    const MIN_FUND = Number(@json($minFund));
    const MAX_FUND = Number(@json(min($maxFund, $walletBalance)));
    const RANGE_SPAN = Math.max(MAX_FUND - MIN_FUND, 0.01);

    function fmt(n) {
        return '$' + parseFloat(n).toLocaleString('en-US', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });
    }

    function updateBar() {
        const val = parseFloat(document.getElementById('amount').value) || 0;
        const fill = document.getElementById('rangeFill');
        const thumb = document.getElementById('rangeThumb');
        const label = document.getElementById('inputDisplay');
        const hint = document.getElementById('hintRow');
        const btn = document.getElementById('fundBtn');

        label.textContent = fmt(val);

        // Progress along min → max range
        const pct = Math.min(100, Math.max(0, ((val - MIN_FUND) / RANGE_SPAN) * 100));
        fill.style.width = pct + '%';
        thumb.style.left = pct + '%';

        if (val < MIN_FUND && val > 0) {
            hint.className = 'hint-row error';
            hint.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path stroke-linecap="round" d="M12 8v4m0 4h.01"/></svg> Minimum is <strong>${fmt(MIN_FUND)}</strong>`;
            btn.disabled = true;
        } else if (val > MAX_FUND) {
            hint.className = 'hint-row error';
            hint.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path stroke-linecap="round" d="M12 8v4m0 4h.01"/></svg> Maximum available is <strong>${fmt(MAX_FUND)}</strong>`;
            btn.disabled = true;
        } else if (val >= MIN_FUND) {
            hint.className = 'hint-row ok';
            hint.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> ${fmt(val)} will be deducted from your {{ $walletLabel }}.`;
            btn.disabled = false;
        } else {
            hint.className = 'hint-row';
            hint.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path stroke-linecap="round" d="M12 8v4m0 4h.01"/></svg> Enter between ${fmt(MIN_FUND)} and ${fmt(MAX_FUND)}`;
            btn.disabled = true;
        }
    }

    function setMax() {
        document.getElementById('amount').value = MAX_FUND.toFixed(2);
        updateBar();
    }
</script>

@endsection