@extends('layouts.user')

@section('title')
Withdraw to Bank
@endsection

@section('content')

<link rel="stylesheet" href="{{ asset('pilot/dashboard.css') }}?v=6">
<link rel="stylesheet" href="{{ asset('pilot/listing.css') }}?v=15">

@php
    /** @var string $wdState */
    $wdCountryName = $wdCountry ? $wdCountry->name : null;
    $wdCurrency    = $wdCountry ? $wdCountry->currency_code : null;

    // Copy per gate state. Every non-active state explains itself and
    // offers the one thing that would move the user forward, rather
    // than dead-ending on a message.
    switch ($wdState) {
        case 'kyc_required':
            $wdTitle  = 'Identity verification required';
            $wdSub    = 'Complete verification to enable bank withdrawals.';
            $wdAction = ['label' => 'Complete verification', 'href' => route('profile')];
            break;
        case 'no_deposit':
            $wdTitle  = 'No qualifying deposit';
            $wdSub    = 'Bank withdrawals are available to accounts that have previously funded by bank transfer through Remvo.';
            $wdAction = ['label' => 'Fund by bank transfer', 'href' => route('deposit')];
            break;
        case 'picker':
            $wdTitle  = 'Select your country';
            $wdSub    = 'Choose the country where your bank account is held.';
            $wdAction = ['label' => 'Select country', 'href' => route('deposit')];
            break;
        case 'coming_soon':
            $wdTitle  = 'Not available in ' . $wdCountryName;
            $wdSub    = 'Bank withdrawals are not yet supported for ' . $wdCountryName . ' accounts.';
            $wdAction = ['label' => 'Withdraw USDT', 'href' => route('index.withdraw')];
            break;
        case 'paused':
            $wdTitle  = 'Temporarily suspended';
            $wdSub    = 'Bank withdrawals to ' . $wdCountryName . ' accounts are suspended. USDT withdrawals are unaffected.';
            $wdAction = ['label' => 'Withdraw USDT', 'href' => route('index.withdraw')];
            break;
        case 'active':
            $wdTitle = $wdSub = $wdAction = null;
            break;
        default: // disabled
            $wdTitle  = 'Currently unavailable';
            $wdSub    = 'Bank withdrawals are not being offered at this time.';
            $wdAction = ['label' => 'Withdraw USDT', 'href' => route('index.withdraw')];
            break;
    }
@endphp

<style>
    /* ── Bank withdrawal ──
       Layout and tokens come from pilot/dashboard.css and
       pilot/listing.css. Only what is specific to this page lives here. */

    .bw-bal {
        background: linear-gradient(135deg, var(--orange) 0%, #c2440a 100%);
        border-radius: var(--radius);
        padding: 1.5rem 1.75rem;
        color: #fff;
        box-shadow: 0 6px 28px var(--orange-glow);
        position: relative;
        overflow: hidden;
    }
    .bw-bal::after {
        content: '';
        position: absolute; top: -40px; right: -40px;
        width: 140px; height: 140px; border-radius: 50%;
        background: rgba(255,255,255,0.07);
        pointer-events: none;
    }
    .bw-bal__label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; opacity: .75; }
    .bw-bal__amt   { font-size: 2.1rem; font-weight: 900; letter-spacing: -.03em; line-height: 1.1; margin: .35rem 0 .5rem; }
    .bw-bal__amt span { font-size: 1rem; font-weight: 600; opacity: .7; }
    .bw-bal__sub   { font-size: .72rem; opacity: .75; }

    .bw-card {
        background: var(--card-bg);
        border-radius: var(--radius);
        border: 1px solid var(--card-border);
        box-shadow: var(--shadow-soft);
        overflow: hidden;
    }
    .bw-card__head {
        padding: 1.1rem 1.5rem;
        border-bottom: 1px solid var(--card-border);
        display: flex; align-items: center; justify-content: space-between;
        gap: .5rem; flex-wrap: wrap;
    }
    .bw-card__title { font-size: .9rem; font-weight: 800; }
    .bw-card__meta  { font-size: .72rem; color: var(--text-muted); }
    .bw-card__body  { padding: 1.5rem; }

    .bw-gate { text-align: center; padding: 2.5rem 1.5rem; }
    .bw-gate h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: .5rem; }
    .bw-gate p  { font-size: .85rem; color: var(--text-muted); margin-bottom: 1.25rem; line-height: 1.55; }

    .bw-btn {
        display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
        background: var(--orange); color: #fff; border: none;
        border-radius: var(--radius-sm); padding: .75rem 1.4rem;
        font-size: .82rem; font-weight: 700; cursor: pointer;
        transition: filter var(--transition);
    }
    .bw-btn:hover:not(:disabled) { filter: brightness(1.08); color: #fff; }
    .bw-btn:disabled { opacity: .45; cursor: not-allowed; }
    .bw-btn--ghost {
        background: transparent; color: var(--text-muted);
        border: 1.5px solid var(--card-border);
        padding: .6rem 1rem; font-size: .78rem;
    }

    .bw-steps { display: flex; gap: .4rem; padding: 0 1.5rem 1.1rem; }
    .bw-step  { flex: 1; height: 3px; border-radius: 2px; background: var(--card-border); }
    .bw-step.is-done { background: var(--orange); }

    .bw-fld { margin-bottom: 1.1rem; }
    .bw-fld label { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: .4rem; }
    .bw-fld input, .bw-fld select {
        width: 100%; border: 1.5px solid var(--card-border);
        border-radius: var(--radius-sm); padding: .7rem .85rem;
        font-size: .9rem; font-weight: 600; background: transparent; color: inherit;
    }
    .bw-fld input:focus, .bw-fld select:focus { outline: none; border-color: var(--orange); }
    .bw-fld .bw-hint { font-size: .72rem; color: var(--text-muted); margin-top: .35rem; }

    .bw-verdict { border-radius: var(--radius-sm); padding: .85rem 1rem; font-size: .8rem; line-height: 1.5; margin-bottom: 1.1rem; display: none; }
    .bw-verdict.pass   { background: rgba(16,185,129,.09); border: 1px solid rgba(16,185,129,.3); }
    .bw-verdict.review { background: rgba(245,158,11,.10); border: 1px solid rgba(245,158,11,.3); }
    .bw-verdict.fail   { background: rgba(239,68,68,.08);  border: 1px solid rgba(239,68,68,.3); }
    .bw-verdict strong { display: block; font-weight: 800; margin-bottom: .2rem; }

    .bw-notice { border-radius: var(--radius-sm); padding: .85rem 1rem; font-size: .8rem; line-height: 1.5; background: rgba(245,158,11,.10); border: 1px solid rgba(245,158,11,.3); margin-bottom: 1.1rem; }

    .bw-open { border: 1.5px solid #f59e0b; border-radius: var(--radius-sm); padding: 1.1rem; margin-bottom: 1.25rem; background: rgba(245,158,11,.10); }
    .bw-open__amt  { font-size: 1.5rem; font-weight: 900; letter-spacing: -.02em; }
    .bw-open__meta { font-size: .75rem; color: var(--text-muted); margin-top: .3rem; line-height: 1.5; }

    .bw-hist { width: 100%; font-size: .8rem; border-collapse: collapse; }
    .bw-hist th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); padding: .5rem .4rem; border-bottom: 1px solid var(--card-border); }
    .bw-hist td { padding: .65rem .4rem; border-bottom: 1px solid var(--card-border); }
    .bw-pill { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: .2rem .45rem; border-radius: 4px; }
    .bw-pill--paid { background: rgba(16,185,129,.09); color: #10b981; }
    .bw-pill--wait { background: rgba(245,158,11,.10); color: #f59e0b; }
    .bw-pill--dead { background: rgba(239,68,68,.08);  color: #ef4444; }

    .bw-empty { text-align: center; padding: 2rem 1rem; color: var(--text-muted); font-size: .82rem; }
</style>

<section class="relative lg:pb-24 pb-16 md:mt-[84px] mt-[70px]">

    {{-- Slim banner, same partial and modifier as the pilot inner pages --}}
    <div class="relative w-full px-4 md:px-8">
        <div class="profile-banner profile-banner--slim">
            @include('partials.pilot.banner')
        </div>
    </div>

    <div class="relative w-full px-4 md:px-8 mt-3 md:mt-4">
        <div class="md:flex" style="gap: 1.5rem;">

            {{-- Sidebar, shared partial; -4rem to sit against the slim banner --}}
            <div class="lg:w-1/4 md:w-1/3 md:px-0">
                <div class="relative" style="margin-top: -4rem;">
                    @include('partials.pilot.sidebar')
                </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.25rem;">

                <div class="pilots-page-head">
                    <div>
                        <a class="pilots-page-head__back" href="{{ route('index.withdraw') }}">
                            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
                            Withdraw Balance
                        </a>
                        <h1 class="pilots-page-head__title">Bank withdrawal</h1>
                        <p class="pilots-page-head__sub">Transfer your balance to a bank account held in your name.</p>
                    </div>
                </div>

                <div class="bw-bal">
                    <div class="bw-bal__label">Available to withdraw</div>
                    <div class="bw-bal__amt">${{ number_format($wdBalance['available'], 2) }} <span>USDT</span></div>
                    <div class="bw-bal__sub">
                        @if($wdBalance['in_flight'] > 0)
                            ${{ number_format($wdBalance['in_flight'], 2) }} pending in an existing request
                        @else
                            Excludes funds committed to active pilots
                        @endif
                    </div>
                </div>

                @if($wdState !== 'active')

                    <div class="bw-card">
                        <div class="bw-gate">
                            <h3>{{ $wdTitle }}</h3>
                            <p>{{ $wdSub }}</p>
                            @if($wdAction)
                                <a href="{{ $wdAction['href'] }}" class="bw-btn">{{ $wdAction['label'] }}</a>
                            @endif
                        </div>
                    </div>

                @elseif($wdOpen)

                    {{-- One open request at a time. Two payouts in flight to
                         the same account is hard to reconcile if either fails. --}}
                    <div class="bw-card">
                        <div class="bw-card__head"><div class="bw-card__title">Request in progress</div></div>
                        <div class="bw-card__body">
                            <div class="bw-open">
                                <div class="bw-open__amt">${{ number_format($wdOpen->amount_usd, 2) }}</div>
                                <div class="bw-open__meta">
                                    {{ $wdOpen->bank_name }} · {{ $wdOpen->account_number }}<br>
                                    @if($wdOpen->status === 'pending_approval')
                                        Pending approval.
                                    @elseif($wdOpen->status === 'approved')
                                        Approved. Transfer in progress.
                                    @else
                                        Transfer submitted. Funds typically arrive within one hour.
                                    @endif
                                </div>
                            </div>
                            @if($wdOpen->status === 'pending_approval')
                                <button class="bw-btn bw-btn--ghost" id="wdCancel" data-id="{{ $wdOpen->id }}">Cancel request</button>
                            @endif
                        </div>
                    </div>

                @else

                    <div class="bw-card">
                        <div class="bw-card__head">
                            <div class="bw-card__title">Destination account</div>
                            <span class="bw-card__meta">{{ $wdCountryName }} · {{ $wdCurrency }}</span>
                        </div>

                        <div class="bw-steps">
                            <div class="bw-step is-done"></div>
                            <div class="bw-step" id="wdStep2"></div>
                            <div class="bw-step" id="wdStep3"></div>
                        </div>

                        <div class="bw-card__body"
                             id="wdFlow"
                             data-banks-url="{{ route('remvo.wd.banks') }}"
                             data-verify-url="{{ route('remvo.wd.verify') }}"
                             data-quote-url="{{ route('remvo.wd.quote') }}"
                             data-submit-url="{{ route('remvo.wd.submit') }}"
                             data-min="{{ $wdLimits['min_usd'] }}"
                             data-max="{{ $wdLimits['ceiling_usd'] }}"
                             data-currency="{{ $wdCurrency }}">

                            <div class="bw-fld">
                                <label for="wdBank">Bank</label>
                                <select id="wdBank"><option value="">Loading banks…</option></select>
                            </div>

                            <div class="bw-fld">
                                <label for="wdAccount">Account number</label>
                                <input type="text" id="wdAccount" inputmode="numeric" autocomplete="off" placeholder="10 digits">
                                <div class="bw-hint">Account must be held in the name {{ trim(auth()->user()->first_name . ' ' . auth()->user()->last_name) }}.</div>
                            </div>

                            <div class="bw-verdict" id="wdVerdict"></div>

                            <div class="bw-fld" id="wdAmountFld" style="display:none;">
                                <label for="wdAmount">Amount</label>
                                <input type="number" id="wdAmount" step="0.01" min="{{ $wdLimits['min_usd'] }}" max="{{ $wdLimits['ceiling_usd'] }}">
                                <div class="bw-hint" id="wdNet">
                                    Minimum ${{ number_format($wdLimits['min_usd'], 2) }}, maximum ${{ number_format($wdLimits['ceiling_usd'], 2) }}.
                                </div>
                            </div>

                            <div class="bw-notice" id="wdNotice" style="display:none;"></div>

                            <button class="bw-btn" id="wdSubmit" style="width:100%;" disabled>Submit request</button>
                        </div>
                    </div>

                @endif

                <div class="bw-card">
                    <div class="bw-card__head"><div class="bw-card__title">Recent requests</div></div>
                    <div class="bw-card__body">
                        @if($wdHistory->isEmpty())
                            <div class="bw-empty">No bank withdrawals yet.</div>
                        @else
                            <table class="bw-hist">
                                <thead><tr><th>Amount</th><th>Account</th><th>Status</th><th>Date</th></tr></thead>
                                <tbody>
                                @foreach($wdHistory as $w)
                                    <tr>
                                        <td style="font-weight:800;">${{ number_format($w->amount_usd, 2) }}</td>
                                        <td style="color:var(--text-muted);">{{ $w->bank_name }}<br>{{ $w->account_number }}</td>
                                        <td>
                                            @if($w->status === 'paid')
                                                <span class="bw-pill bw-pill--paid">Paid</span>
                                            @elseif(in_array($w->status, ['failed','declined','cancelled']))
                                                <span class="bw-pill bw-pill--dead">{{ ucfirst($w->status) }}</span>
                                            @else
                                                <span class="bw-pill bw-pill--wait">{{ str_replace('_', ' ', $w->status) }}</span>
                                            @endif
                                        </td>
                                        <td style="color:var(--text-muted);">{{ $w->created_at ? $w->created_at->format('d M Y') : '' }}</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        @endif
                    </div>
                </div>

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

@if($wdState === 'active' && !$wdOpen)
    <script src="{{ asset('js/remvo-withdraw.js') }}?v=3"></script>
@endif

@if($wdOpen)
<script>
(function () {
    var btn = document.getElementById('wdCancel');
    if (!btn) return;
    btn.addEventListener('click', function () {
        if (!confirm('Cancel this withdrawal request? The amount will be returned to your balance.')) return;
        btn.disabled = true;
        fetch('{{ route('remvo.wd.cancel') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({ id: btn.getAttribute('data-id') })
        })
        .then(function (r) { return r.json(); })
        .then(function (j) {
            if (j && j.ok) { window.location.reload(); return; }
            alert((j && j.error && j.error.message) || 'Unable to cancel this request.');
            btn.disabled = false;
        })
        .catch(function () {
            alert('Unable to cancel this request.');
            btn.disabled = false;
        });
    });
})();
</script>
@endif

@endsection