@extends('layouts.user')

@section('title')
Withdraw from AI Bot
@endsection

@section('content')

@php
$walletSource = $investment->wallet_source ?? 'main';
$isGrant = $walletSource === 'grant';
$walletLabel = $isGrant ? 'Grant Funds' : 'Main Wallet';
$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)';
@endphp

<style>
    :root {
        --accent: {{ $accentColor}};
        --accent-dim: {{ $accentDim }};
        --accent-bdr: {{ $accentBorder }};
        --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);
        --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 balance 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-value {
        font-size: 2rem;
        font-weight: 900;
        letter-spacing: -.03em;
        line-height: 1.1;
        margin: .3rem 0;
    }

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

    .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;
    }

    /* destination notice */
    .dest-notice {
        display: flex;
        align-items: flex-start;
        gap: .7rem;
        padding: .9rem 1rem;
        border-radius: var(--radius-sm);
        background: var(--accent-dim);
        border: 1px solid var(--accent-bdr);
        font-size: .78rem;
        line-height: 1.55;
        font-weight: 600;
        margin-bottom: 1.25rem;
    }

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

    /* withdraw form 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: 90%;
        margin: 0 auto;
    }

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

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

    .card-header-title {
        font-size: 1rem;
        font-weight: 800;
    }

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

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

    .field-label {
        font-size: .78rem;
        font-weight: 700;
        display: block;
        margin-bottom: .4rem;
    }

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

    .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: 48px;
        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: 1rem;
        font-weight: 700;
        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: .68rem;
        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: 1.1rem;
    }

    .hint-row.error {
        color: #ef4444;
    }

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

    .live-preview {
        border-radius: var(--radius-sm);
        border: 1.5px solid var(--accent-bdr);
        background: var(--accent-dim);
        padding: 1rem 1.1rem;
        margin-bottom: 1.25rem;
        transition: opacity .2s;
    }

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

    .preview-title {
        font-size: .68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--accent);
        margin-bottom: .6rem;
        display: flex;
        align-items: center;
        gap: .4rem;
    }

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

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

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

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

    .submit-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-dim);
        transition: filter .18s, transform .15s;
    }

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

    .submit-btn:disabled {
        opacity: .4;
        cursor: not-allowed;
        transform: 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);
    }
</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;">

            <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>

            <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 balance tile --}}
                <div class="bot-tile">
                    <div style="position:relative;z-index:1;">
                        <div class="bot-tile-label">{{ $investment->plan?->name }} Balance</div>
                        <div class="bot-tile-value">
                            ${{ number_format($investment->balance, 2) }}
                            <span style="font-size:.95rem;font-weight:600;opacity:.7;">USDT</span>
                        </div>
                        <div class="bot-tile-meta">
                            <span class="bot-meta-chip">{{ $investment->plan?->name }}</span>
                            <span class="bot-meta-chip" style="background:rgba(255,255,255,{{ $isGrant ? '0.25' : '0.1' }});">
                                Funded via {{ $walletLabel }}
                            </span>
                        </div>
                    </div>
                </div>

                {{-- Destination notice --}}
                <div class="dest-notice">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        @if($isGrant)
                        <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" />
                        @else
                        <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" />
                        @endif
                    </svg>
                    <span>
                        This bot was funded with your <strong>{{ $walletLabel }}</strong>.
                        Withdrawn funds will be credited back to your <strong>{{ $walletLabel }}</strong>.
                        @if($isGrant) Note: only grant profit (above your approved capital) can be moved from Grant Funds to Main Wallet separately. @endif
                    </span>
                </div>

                {{-- Withdraw form --}}
                <div class="withdraw-card">
                    <div class="card-header">
                        <div class="card-header-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                            </svg>
                        </div>
                        <div>
                            <div class="card-header-title">Withdraw to {{ $walletLabel }}</div>
                            <div class="card-header-sub">Maximum available: ${{ number_format($investment->balance, 2) }}</div>
                        </div>
                    </div>

                    <div class="card-body">
                        <form action="{{ route('ai-withdraw', $investment->id) }}" method="post" id="withdrawForm">
                            @csrf

                            <label class="field-label" for="withdrawAmount">
                                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 2" />
                                    </svg>
                                </span>
                                <input type="number" id="withdrawAmount" name="amount"
                                    step="0.01" min="0.01" max="{{ $investment->balance }}"
                                    class="amount-input" placeholder="0.00"
                                    oninput="updatePreview()" required>
                                <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>
                                Max: <strong>${{ number_format($investment->balance, 2) }}</strong>
                            </div>

                            <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>
                                    Withdrawal Summary
                                </div>
                                <div class="preview-row">
                                    <span class="preview-key">You withdraw</span>
                                    <span class="preview-val" id="pvAmount">$0.00</span>
                                </div>
                                <div class="preview-row">
                                    <span class="preview-key">Credited to</span>
                                    <span class="preview-val" style="color:var(--accent);">{{ $walletLabel }}</span>
                                </div>
                                <div class="preview-row">
                                    <span class="preview-key">Bot balance remaining</span>
                                    <span class="preview-val" id="pvRemaining">$0.00</span>
                                </div>
                            </div>

                            <button type="submit" class="submit-btn" id="submitBtn" disabled
                                onclick="return confirm('Withdraw $'+document.getElementById('withdrawAmount').value+' to your {{ $walletLabel }}?')">
                                <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>
                                Withdraw to {{ $walletLabel }}
                            </button>
                        </form>
                    </div>
                </div>

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

<script>
    const MAX_BALANCE = parseFloat('{{ $investment->balance }}');

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

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

        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: <strong>${fmt(MAX_BALANCE)}</strong>`;
            return;
        }
        if (val > MAX_BALANCE) {
            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"><circle cx="12" cy="12" r="10"/><path stroke-linecap="round" d="M12 8v4m0 4h.01"/></svg> Exceeds bot balance of <strong>${fmt(MAX_BALANCE)}</strong>`;
            return;
        }

        document.getElementById('pvAmount').textContent = fmt(val);
        document.getElementById('pvRemaining').textContent = fmt(MAX_BALANCE - val);
        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> ${fmt(val)} will be credited to your {{ $walletLabel }}.`;
    }

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

@endsection