@extends('layouts.user')

@section('title')
ICTP Withdrawal
@endsection

@section('content')

<style>
    :root {
        --orange: #f97316;
        --orange-dim: rgba(249, 115, 22, 0.10);
        --orange-glow: rgba(249, 115, 22, 0.22);
        --sky: #0ea5e9;
        --sky-dim: rgba(14, 165, 233, 0.09);
        --sky-border: rgba(14, 165, 233, 0.22);
        --sky-glow: rgba(14, 165, 233, 0.25);
        --green: #10b981;
        --red: #ef4444;
        --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);
        --shadow-lg: 0 8px 36px rgba(0, 0, 0, 0.55);
    }

    /* ── Page wrapper ── */
    .ictp-page {
        min-height: 100vh;
        padding: 6rem 0 4rem;
        background: linear-gradient(160deg, #f0f9ff 0%, #fff7ed 60%, #fdf4ff 100%);
    }

    .dark .ictp-page {
        background: linear-gradient(160deg, #020f1a 0%, #1a0d00 60%, #110018 100%);
    }

    /* ── Back link ── */
    .back-link {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--sky);
        text-decoration: none;
        transition: gap 0.18s var(--ease);
        margin-bottom: 1.5rem;
    }

    .back-link:hover {
        gap: 0.65rem;
        color: var(--sky);
    }

    /* ── Balance overview strip ── */
    .balance-strip {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .balance-tile {
        background: var(--card-bg);
        border-radius: var(--radius-sm);
        border: 1px solid var(--card-border);
        padding: 1rem 1.1rem;
        box-shadow: var(--shadow);
        position: relative;
        overflow: hidden;
    }

    .balance-tile::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 3px;
        height: 100%;
        background: var(--tile-accent, var(--sky));
    }

    .tile-label {
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--muted);
        margin-bottom: 0.35rem;
    }

    .tile-value {
        font-size: 1.2rem;
        font-weight: 800;
        line-height: 1.1;
    }

    .tile-sub {
        font-size: 0.68rem;
        color: var(--muted);
        margin-top: 0.2rem;
    }

    .tile-total {
        --tile-accent: var(--sky);
    }

    .tile-locked {
        --tile-accent: #f59e0b;
    }

    .tile-avail {
        --tile-accent: var(--green);
    }

    .tile-main {
        --tile-accent: var(--orange);
    }

    @keyframes tradePulse {

        0%,
        100% {
            opacity: 1;
            transform: scale(1);
        }

        50% {
            opacity: 0.5;
            transform: scale(0.85);
        }
    }

    .live-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--sky);
        display: inline-block;
        animation: tradePulse 1.6s ease-in-out infinite;
        vertical-align: middle;
    }

    /* ── Main card ── */
    .withdraw-card {
        background: var(--card-bg);
        border-radius: var(--radius);
        border: 1px solid var(--card-border);
        box-shadow: var(--shadow-lg);
        overflow: hidden;
        max-width: 600px;
        margin: 0 auto;
    }

    .card-header {
        padding: 1.5rem 1.75rem 1.25rem;
        border-bottom: 1px solid var(--card-border);
        background: linear-gradient(135deg, var(--sky-dim) 0%, rgba(6, 182, 212, 0.04) 100%);
    }

    .card-header-title {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        font-size: 1.1rem;
        font-weight: 800;
        letter-spacing: -0.01em;
    }

    .ictp-icon-wrap {
        width: 36px;
        height: 36px;
        border-radius: 9px;
        background: var(--sky-dim);
        border: 1px solid var(--sky-border);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--sky);
        flex-shrink: 0;
    }

    .card-header-sub {
        font-size: 0.75rem;
        color: var(--muted);
        margin-top: 0.3rem;
    }

    .card-body {
        padding: 1.5rem 1.75rem;
    }

    /* ── Locked principal notice ── */
    .locked-notice {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.9rem 1.1rem;
        border-radius: var(--radius-sm);
        background: rgba(245, 158, 11, 0.07);
        border: 1px solid rgba(245, 158, 11, 0.22);
        margin-bottom: 1.25rem;
    }

    .locked-notice-icon {
        flex-shrink: 0;
        margin-top: 1px;
        color: #f59e0b;
    }

    .locked-notice-text {
        font-size: 0.78rem;
        line-height: 1.55;
        color: #92400e;
    }

    .dark .locked-notice-text {
        color: #fcd34d;
    }

    /* ── Split breakdown ── */
    .split-row {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        border-radius: var(--radius-sm);
        border: 1px solid var(--card-border);
        margin-bottom: 0.5rem;
        font-size: 0.82rem;
        transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
    }

    .split-row.you-row {
        border-color: rgba(16, 185, 129, 0.25);
        background: rgba(16, 185, 129, 0.05);
    }

    .split-row.co-row {
        border-color: rgba(249, 115, 22, 0.2);
        background: rgba(249, 115, 22, 0.04);
    }

    .split-icon {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .split-icon-you {
        background: rgba(16, 185, 129, 0.12);
        color: var(--green);
    }

    .split-icon-co {
        background: var(--orange-dim);
        color: var(--orange);
    }

    .split-label {
        flex: 1;
        font-weight: 600;
    }

    .split-pct {
        font-size: 0.7rem;
        color: var(--muted);
    }

    .split-amount {
        font-size: 0.95rem;
        font-weight: 800;
    }

    .split-amount-you {
        color: var(--green);
    }

    .split-amount-co {
        color: var(--orange);
    }

    /* ── Form ── */
    .field-label {
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        display: block;
        margin-bottom: 0.4rem;
    }

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

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

    .amount-input {
        width: 100%;
        height: 48px;
        padding: 0 4rem 0 2.6rem;
        border-radius: var(--radius-sm);
        border: 1.5px solid var(--card-border);
        background: var(--card-bg);
        color: inherit;
        font-size: 1rem;
        font-weight: 700;
        outline: none;
        transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
    }

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

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

    .input-currency {
        position: absolute;
        right: 0.85rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.7rem;
        font-weight: 800;
        color: var(--sky);
        letter-spacing: 0.05em;
    }

    .max-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.25rem 0.65rem;
        border-radius: 6px;
        font-size: 0.68rem;
        font-weight: 800;
        background: var(--sky-dim);
        color: var(--sky);
        border: 1px solid var(--sky-border);
        cursor: pointer;
        transition: background 0.15s var(--ease);
        margin-left: 0.5rem;
    }

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

    /* ── Live split preview ── */
    .live-preview {
        border-radius: var(--radius-sm);
        border: 1.5px solid var(--sky-border);
        background: var(--sky-dim);
        padding: 1rem 1.1rem;
        margin-bottom: 1.25rem;
        transition: opacity 0.2s;
    }

    .live-preview.hidden {
        opacity: 0;
        pointer-events: none;
    }

    .preview-title {
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--sky);
        margin-bottom: 0.65rem;
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .preview-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.8rem;
        padding: 0.3rem 0;
        border-bottom: 1px solid var(--sky-border);
    }

    .preview-row:last-child {
        border-bottom: none;
    }

    .preview-key {
        color: var(--muted);
        font-weight: 600;
    }

    .preview-val {
        font-weight: 800;
    }

    .preview-val-green {
        color: var(--green);
    }

    .preview-val-orange {
        color: var(--orange);
    }

    /* ── Validation hint ── */
    .hint-row {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.72rem;
        color: var(--muted);
        margin-bottom: 1.25rem;
    }

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

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

    /* ── Submit button ── */
    .submit-btn {
        width: 100%;
        padding: 0.78rem;
        border-radius: var(--radius-sm);
        border: none;
        background: var(--sky);
        color: #fff;
        font-size: 0.92rem;
        font-weight: 800;
        letter-spacing: 0.01em;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        transition: background 0.18s var(--ease), transform 0.15s, box-shadow 0.18s;
        box-shadow: 0 3px 14px var(--sky-glow);
    }

    .submit-btn:hover:not(:disabled) {
        background: #0284c7;
        transform: translateY(-1px);
        box-shadow: 0 5px 20px var(--sky-glow);
    }

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

    /* ── Ineligible state ── */
    .ineligible-card {
        background: var(--card-bg);
        border-radius: var(--radius);
        border: 1px solid var(--card-border);
        box-shadow: var(--shadow-lg);
        max-width: 600px;
        margin: 0 auto;
        padding: 3rem 2rem;
        text-align: center;
    }

    .ineligible-icon {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: rgba(245, 158, 11, 0.1);
        border: 1px solid rgba(245, 158, 11, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        color: #f59e0b;
    }

    .progress-bar-wrap {
        margin: 1.25rem 0 0.35rem;
        height: 8px;
        background: var(--card-border);
        border-radius: 99px;
        overflow: hidden;
    }

    .progress-bar-fill {
        height: 100%;
        border-radius: 99px;
        background: linear-gradient(90deg, var(--sky), #06b6d4);
        transition: width 0.6s var(--ease);
    }

    .progress-labels {
        display: flex;
        justify-content: space-between;
        font-size: 0.68rem;
        color: var(--muted);
        margin-top: 0.35rem;
    }

    .sh {
        font-size: 0.85rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        gap: 0.45rem;
        letter-spacing: -0.01em;
        margin-bottom: 0.85rem;
    }

    .sh::before {
        content: '';
        width: 3px;
        height: 0.9rem;
        border-radius: 2px;
        background: var(--sky);
        flex-shrink: 0;
    }
</style>

@php
$ictpBalance = auth()->user()->ictp_balance ?? 0;
$lockedAmount = 50; // principal always locked
$withdrawable = max(0, $ictpBalance - $lockedAmount); // profit above $50
$canWithdraw = $withdrawable >= 50;
$userShare = round($withdrawable * 0.60, 2);
$companyShare = round($withdrawable * 0.40, 2);
$progressPct = min(100, ($ictpBalance / ($lockedAmount * 2)) * 100); // reaches 100% at $100
@endphp

<div class="ictp-page">
    <div class="container">

        <a href="{{ route('home') }}" class="back-link">
            <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="M10 19l-7-7m0 0l7-7m-7 7h18" />
            </svg>
            Back to My Account
        </a>

        <x-alert />

        {{-- ── Balance strip ── --}}
        <div class="balance-strip">
            <div class="balance-tile tile-total">
                <div class="tile-label">ICTP Total</div>
                <div class="tile-value" style="color:var(--sky);">${{ number_format($ictpBalance, 2) }}</div>
                <div class="tile-sub"><span class="live-dot"></span> Inhouse Capital</div>
            </div>
            <div class="balance-tile tile-locked">
                <div class="tile-label">Locked Principal</div>
                <div class="tile-value" style="color:#f59e0b;">${{ number_format(auth()->user()->ictp_balance > 0 ? $lockedAmount : 0, 2) }}</div>
                <div class="tile-sub">Always retained</div>
            </div>
            <div class="balance-tile tile-avail">
                <div class="tile-label">Withdrawable</div>
                <div class="tile-value" style="color:var(--green);">${{ number_format($withdrawable, 2) }}</div>
                <div class="tile-sub">Above principal</div>
            </div>
            <div class="balance-tile tile-main">
                <div class="tile-label">Main Wallet</div>
                <div class="tile-value" style="color:var(--orange);">${{ number_format(auth()->user()->balance, 2) }}</div>
                <div class="tile-sub">Receives 60%</div>
            </div>
        </div>

        @if($canWithdraw)
        {{-- ── Withdrawal form card ── --}}
        <div class="withdraw-card">

            <div class="card-header">
                <div class="card-header-title">
                    <div class="ictp-icon-wrap">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                            <line x1="6" y1="3" x2="6" y2="6" stroke-linecap="round" />
                            <rect x="4" y="6" width="4" height="7" rx="1" />
                            <line x1="6" y1="13" x2="6" y2="21" stroke-linecap="round" />
                            <line x1="14" y1="2" x2="14" y2="5" stroke-linecap="round" />
                            <rect x="12" y="5" width="4" height="9" rx="1" />
                            <line x1="14" y1="14" x2="14" y2="21" stroke-linecap="round" />
                        </svg>
                    </div>
                    ICTP → Main Wallet Transfer
                </div>
                <div class="card-header-sub">Transfer your ICTP profits to your main wallet.</div>
            </div>

            <div class="card-body">

                {{-- Locked principal notice --}}
                <div class="locked-notice">
                    <span class="locked-notice-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">
                            <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>
                    <div class="locked-notice-text">
                        Your <strong>$50.00 principal</strong> is permanently locked in the ICTP program and cannot be withdrawn. Only profits above $50.00 are transferable. Of the amount you withdraw, <strong>60% goes to your Main Wallet</strong> and <strong>40% is a program fee</strong>.
                    </div>
                </div>

                {{-- 60/40 split overview --}}
                <p class="sh">How Your Transfer Splits</p>
                <div style="margin-bottom:1.25rem;">
                    <div class="split-row you-row">
                        <div class="split-icon split-icon-you">
                            <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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                            </svg>
                        </div>
                        <div class="split-label">You receive <span class="split-pct">(60%)</span></div>
                        <div class="split-amount split-amount-you" id="staticYou">${{ number_format($userShare, 2) }}</div>
                    </div>
                    <div class="split-row co-row">
                        <div class="split-icon split-icon-co">
                            <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="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                            </svg>
                        </div>
                        <div class="split-label">Program fee <span class="split-pct">(40%)</span></div>
                        <div class="split-amount split-amount-co" id="staticCo">${{ number_format($companyShare, 2) }}</div>
                    </div>
                </div>

                {{-- Amount form --}}
                <form action="{{ route('ictp_to_balance') }}" method="POST" id="ictpForm">
                    @csrf

                    <label class="field-label" for="ictpAmount">
                        Amount to withdraw
                        <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 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </span>
                        <input type="number" id="ictpAmount" name="amount"
                            step="0.01" min="0.01" max="{{ $withdrawable }}"
                            class="amount-input" placeholder="0.00"
                            oninput="updatePreview()" required>
                        <span class="input-currency">USDT</span>
                    </div>

                    {{-- Validation hint --}}
                    <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>
                        Max withdrawable: <strong>${{ number_format($withdrawable, 2) }}</strong>
                    </div>

                    {{-- Live preview ── --}}
                    <div class="live-preview hidden" id="livePreview">
                        <div class="preview-title">
                            <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
                            </svg>
                            Transfer Breakdown
                        </div>
                        <div class="preview-row">
                            <span class="preview-key">You requested</span>
                            <span class="preview-val" id="pvRequested">$0.00</span>
                        </div>
                        <div class="preview-row">
                            <span class="preview-key">You receive (60%)</span>
                            <span class="preview-val preview-val-green" id="pvYou">$0.00</span>
                        </div>
                        <div class="preview-row">
                            <span class="preview-key">Program fee (40%)</span>
                            <span class="preview-val preview-val-orange" id="pvCo">$0.00</span>
                        </div>
                        <div class="preview-row" style="padding-top:0.5rem;margin-top:0.15rem;border-top:1.5px solid var(--sky-border);">
                            <span class="preview-key" style="font-weight:800;color:inherit;">ICTP remaining after transfer</span>
                            <span class="preview-val" style="color:var(--sky);" id="pvRemaining">$0.00</span>
                        </div>
                    </div>

                    <button type="submit" class="submit-btn" id="submitBtn" disabled
                        onclick="return confirm('You are about to transfer ICTP profits to your Main Wallet.\n\n60% will be credited to you, 40% is a program fee.\n\nYour $50 principal remains locked.\n\nProceed?');">
                        <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 7l5 5m0 0l-5 5m5-5H6" />
                        </svg>
                        Transfer to Main Wallet
                    </button>
                </form>

            </div>
        </div>

        @else
        {{-- ── Ineligible state ── --}}
        <div class="ineligible-card">
            <div class="ineligible-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.6">
                    <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>
            </div>
            <h3 class="text-lg font-bold" style="margin-bottom:0.4rem;">No Profits Available Yet</h3>
            <p class="text-sm" style="color:var(--muted);max-width:380px;margin:0 auto;">
                Your ICTP balance is <strong style="color:var(--sky);">${{ number_format($ictpBalance, 2) }}</strong>.
                The $50.00 principal is permanently locked. You need an ICTP balance
                <strong>above $99.99</strong> to make a withdrawal.
            </p>

            {{-- Progress bar toward $100 (first withdrawal threshold) --}}
            <div style="max-width:360px;margin:1.5rem auto 0;">
                <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.35rem;">
                    <span style="font-size:0.72rem;font-weight:700;color:var(--muted);">Progress to withdrawal</span>
                    <span style="font-size:0.72rem;font-weight:800;color:var(--sky);">${{ number_format($ictpBalance, 2) }} / $100.00</span>
                </div>
                <div class="progress-bar-wrap">
                    <div class="progress-bar-fill" style="width:{{ $progressPct }}%;"></div>
                </div>
                <div class="progress-labels">
                    <span>$50 locked</span>
                    <span>$100 target</span>
                </div>
            </div>

            <div style="margin-top:1.75rem;display:flex;align-items:center;justify-content:center;gap:0.85rem;flex-wrap:wrap;">
                <a href="{{ route('home') }}" style="display:inline-flex;align-items:center;gap:0.4rem;padding:0.55rem 1.2rem;border-radius:var(--radius-sm);border:1.5px solid var(--card-border);font-size:0.82rem;font-weight:700;text-decoration:none;transition:border-color 0.18s,color 0.18s;"
                    onmouseover="this.style.borderColor='var(--sky)';this.style.color='var(--sky)'"
                    onmouseout="this.style.borderColor='var(--card-border)';this.style.color=''">
                    Back to Account
                </a>
                <a href="{{ route('bid-markets') }}" style="display:inline-flex;align-items:center;gap:0.4rem;padding:0.55rem 1.2rem;border-radius:var(--radius-sm);background:var(--sky);color:#fff;font-size:0.82rem;font-weight:700;text-decoration:none;box-shadow:0 2px 12px var(--sky-glow);transition:background 0.18s,transform 0.15s;"
                    onmouseover="this.style.background='#0284c7';this.style.transform='translateY(-1px)'"
                    onmouseout="this.style.background='var(--sky)';this.style.transform=''">
                    <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="M13 7l5 5m0 0l-5 5m5-5H6" />
                    </svg>
                    Go to Bid Market
                </a>
            </div>
        </div>
        @endif

    </div>
</div>

<script>
    const MAX_AMOUNT = parseFloat('{{ $withdrawable }}');
    const ICTP_BALANCE = parseFloat('{{ $ictpBalance }}');
    const LOCKED = parseFloat('{{ $lockedAmount }}');

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

    function updatePreview() {
        const input = document.getElementById('ictpAmount');
        const preview = document.getElementById('livePreview');
        const hint = document.getElementById('hintRow');
        const btn = document.getElementById('submitBtn');
        const val = parseFloat(input.value) || 0;

        if (val <= 0) {
            preview.classList.add('hidden');
            btn.disabled = true;
            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> Max withdrawable: <strong>${fmt(MAX_AMOUNT)}</strong>`;
            return;
        }

        if (val > MAX_AMOUNT) {
            preview.classList.add('hidden');
            btn.disabled = true;
            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"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Amount exceeds withdrawable balance of <strong>${fmt(MAX_AMOUNT)}</strong>`;
            return;
        }

        const youGet = val * 0.60;
        const coGet = val * 0.40;
        const remaining = ICTP_BALANCE - val;

        document.getElementById('pvRequested').textContent = fmt(val);
        document.getElementById('pvYou').textContent = fmt(youGet);
        document.getElementById('pvCo').textContent = fmt(coGet);
        document.getElementById('pvRemaining').textContent = fmt(remaining);

        // Update static split rows too
        document.getElementById('staticYou').textContent = fmt(youGet);
        document.getElementById('staticCo').textContent = fmt(coGet);

        preview.classList.remove('hidden');
        btn.disabled = false;
        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> You will receive <strong>${fmt(youGet)}</strong> in your Main Wallet.`;
    }

    function setMax() {
        document.getElementById('ictpAmount').value = +MAX_AMOUNT.toFixed(2);
        updatePreview();
    }
</script>

@endsection