@extends('portal.layouts.master')
@section('title', 'Funds')
@section('page-title', 'Funds')

@section('extra-css')
/* ── Method tabs ── */
.method-tabs {
    display: flex; gap: 0; margin-bottom: 1.25rem;
    border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
}
.method-tab {
    flex: 1; padding: .65rem; text-align: center; cursor: pointer;
    background: var(--bg-card); color: var(--text-secondary);
    font-size: .78rem; font-weight: 600; transition: all .15s;
    border: none; outline: none;
    border-right: 1px solid var(--border);
}
.method-tab:last-child { border-right: none; }
.method-tab:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.method-tab.active { background: var(--accent); color: #fff; }
.method-tab i { display: block; font-size: 1.1rem; margin-bottom: .2rem; }
.method-panel { display: none; }
.method-panel.active { display: block; }

/* ── Disclaimer ── */
.disclaimer-box {
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: 8px; padding: .85rem; margin-top: 1rem;
}
.disclaimer-box p { font-size: .75rem; color: var(--text-secondary); line-height: 1.5; margin-bottom: .4rem; }
.disclaimer-box label { font-size: .78rem; cursor: pointer; display: flex; align-items: flex-start; gap: .5rem; }
.disclaimer-box input[type="checkbox"] {
    margin-top: 3px; accent-color: var(--accent); flex-shrink: 0;
    width: 16px; height: 16px;
}
.debit-notice {
    background: rgba(59,130,246,.08); border: 1px solid rgba(59,130,246,.2);
    border-radius: 6px; padding: .5rem .75rem; margin-bottom: .75rem;
    font-size: .75rem; color: var(--accent);
}
.debit-notice i { margin-right: .3rem; }

/* ── Balance badge ── */
.balance-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: 8px; padding: .5rem .85rem; margin-bottom: 1.25rem;
}
.balance-badge .cur  { font-size: .72rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .05em; }
.balance-badge .val  { font-size: 1.15rem; font-weight: 700; }

/* ── History tabs ── */
.hist-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 0; }
.hist-tab {
    padding: .6rem 1rem; font-size: .78rem; font-weight: 600; cursor: pointer;
    border: none; background: transparent; color: var(--text-secondary);
    border-bottom: 2px solid transparent; transition: all .15s; text-transform: uppercase; letter-spacing: .04em;
}
.hist-tab:hover { color: var(--text-primary); }
.hist-tab.ht-active { color: var(--accent); border-bottom-color: var(--accent); }
.hist-panel { display: none; padding: .75rem 0 0; }
.hist-panel.ht-visible { display: block; }

/* ── Tables ── */
.funds-table { width: 100%; border-collapse: collapse; }
.funds-table th {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-secondary); padding: .45rem .6rem; border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.funds-table td { font-size: .82rem; padding: .5rem .6rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.funds-table tr:last-child td { border-bottom: none; }
.funds-table tr:hover td { background: rgba(59,130,246,.04); }
.status-badge {
    font-size: .65rem; font-weight: 700; padding: .18rem .45rem; border-radius: 4px;
    text-transform: uppercase; letter-spacing: .04em;
}
.sb-approved  { background: rgba(14,203,129,.15); color: var(--green); }
.sb-pending   { background: rgba(245,158,11,.15);  color: #f59e0b; }
.sb-rejected  { background: rgba(246,70,93,.15);   color: var(--red); }
.method-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .7rem; color: var(--text-secondary);
}
@endsection

@section('content')

@if(session('success'))
<div class="alert alert-success d-flex align-items-center gap-2 mb-3" style="font-size:.85rem">
    <i class="fas fa-circle-check"></i> {{ session('success') }}
</div>
@endif

@php
    $currencySymbols = ['USD' => '$', 'EUR' => '€', 'CAD' => 'CA$', 'AUD' => 'A$'];
    $mainSymbol = $currencySymbols[$mainCurrency] ?? '';
@endphp

<div class="row g-3">

    {{-- ═══════════════════════════════════════════
         LEFT: Withdrawal form
    ════════════════════════════════════════════ --}}
    <div class="col-xl-5 col-lg-5">
        <div class="dark-card h-100">
            <div class="card-header">
                <i class="fas fa-money-bill-transfer me-2"></i> Request Withdrawal
            </div>
            <div class="card-body">

                {{-- Current balance --}}
                <div class="balance-badge">
                    <i class="fas fa-wallet" style="color:var(--accent);font-size:.9rem"></i>
                    <div>
                        <div class="cur">Available balance · {{ $mainCurrency }}</div>
                        <div class="val">{{ $mainSymbol }}{{ number_format($mainBalance, 2) }}</div>
                    </div>
                </div>

                @if($errors->any())
                <div class="alert alert-danger py-2 mb-3" style="font-size:.82rem">{{ $errors->first() }}</div>
                @endif

                {{-- Method tabs --}}
                <div class="method-tabs">
                    <button type="button" class="method-tab active" onclick="switchMethod('crypto', this)">
                        <i class="fab fa-bitcoin"></i> Crypto
                    </button>
                    <button type="button" class="method-tab" onclick="switchMethod('bank_transfer', this)">
                        <i class="fas fa-university"></i> Bank
                    </button>
                    <button type="button" class="method-tab" onclick="switchMethod('credit_card', this)">
                        <i class="fas fa-credit-card"></i> Card
                    </button>
                </div>

                <form method="POST" action="{{ route('portal.withdraw.store') }}" id="withdrawForm">
                    @csrf
                    <input type="hidden" name="method" id="methodInput" value="{{ old('method', 'crypto') }}">

                    {{-- Amount (no currency selector — uses main_currency on backend) --}}
                    <div class="mb-3">
                        <label class="form-label" style="font-size:.82rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.03em">
                            Amount <span style="font-weight:400;color:var(--text-muted)">({{ $mainCurrency }})</span>
                        </label>
                        <div style="position:relative">
                            <span style="position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--text-secondary);font-size:.9rem">{{ $mainSymbol }}</span>
                            <input type="number" name="amount" class="form-control" step="0.01" min="0.01"
                                value="{{ old('amount') }}" required placeholder="0.00"
                                style="padding-left:1.85rem">
                        </div>
                        <div style="font-size:.7rem;color:var(--text-muted);margin-top:.25rem">
                            Max: {{ $mainSymbol }}{{ number_format($mainBalance, 2) }}
                        </div>
                    </div>

                    {{-- ═══ Crypto Panel ═══ --}}
                    <div class="method-panel active" id="panel-crypto">
                        <div class="mb-3">
                            <label class="form-label" style="font-size:.82rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.03em">Crypto Asset</label>
                            <select name="crypto_currency" class="form-control">
                                @foreach(['BTC','ETH','USDT (ERC-20)','USDT (TRC-20)','USDC','LTC','XRP','BNB','SOL','ADA','DOGE'] as $cc)
                                <option value="{{ $cc }}" {{ old('crypto_currency') === $cc ? 'selected' : '' }}>{{ $cc }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label" style="font-size:.82rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.03em">Wallet Address</label>
                            <input type="text" name="wallet_address" class="form-control"
                                value="{{ old('wallet_address') }}" placeholder="Enter your wallet address">
                        </div>
                    </div>

                    {{-- ═══ Bank Transfer Panel ═══ --}}
                    <div class="method-panel" id="panel-bank_transfer">
                        <div class="mb-3">
                            <label class="form-label" style="font-size:.82rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.03em">Beneficiary Name</label>
                            <input type="text" name="beneficiary_name" class="form-control"
                                value="{{ old('beneficiary_name') }}" placeholder="Full name as on bank account">
                        </div>
                        <div class="mb-3">
                            <label class="form-label" style="font-size:.82rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.03em">IBAN</label>
                            <input type="text" name="iban" class="form-control"
                                value="{{ old('iban') }}" placeholder="e.g. DE89370400440532013000">
                        </div>
                        <div class="row g-2 mb-3">
                            <div class="col-6">
                                <label class="form-label" style="font-size:.82rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.03em">SWIFT / BIC / BSB Number</label>
                                <input type="text" name="swift" class="form-control"
                                    value="{{ old('swift') }}" placeholder="e.g. COBADEFFXXX or 062-000">
                                <div class="form-text">Enter the routing code used by your bank.</div>
                            </div>
                            <div class="col-6">
                                <label class="form-label" style="font-size:.82rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.03em">Bank Name</label>
                                <input type="text" name="bank_name" class="form-control"
                                    value="{{ old('bank_name') }}" placeholder="e.g. Deutsche Bank">
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label" style="font-size:.82rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.03em">Bank Address</label>
                            <textarea name="bank_address" class="form-control" rows="2"
                                placeholder="Full bank branch address">{{ old('bank_address') }}</textarea>
                        </div>
                    </div>

                    {{-- ═══ Credit / Debit Card Panel ═══ --}}
                    <div class="method-panel" id="panel-credit_card">
                        <div class="debit-notice">
                            <i class="fas fa-info-circle"></i>
                            <strong>Debit cards only.</strong> Withdrawals are processed exclusively to debit cards.
                        </div>
                        <div class="mb-3">
                            <label class="form-label" style="font-size:.82rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.03em">Card Type</label>
                            <select name="card_type" class="form-control">
                                <option value="Visa Debit" {{ old('card_type') === 'Visa Debit' ? 'selected' : '' }}>Visa Debit</option>
                                <option value="Mastercard Debit" {{ old('card_type') === 'Mastercard Debit' ? 'selected' : '' }}>Mastercard Debit</option>
                                <option value="Maestro" {{ old('card_type') === 'Maestro' ? 'selected' : '' }}>Maestro</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label" style="font-size:.82rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.03em">Card Number</label>
                            <input type="text" name="card_number" class="form-control"
                                value="{{ old('card_number') }}" placeholder="**** **** **** ****"
                                maxlength="19">
                        </div>
                    </div>

                    {{-- Disclaimer --}}
                    <div class="disclaimer-box">
                        <p><strong>Withdrawal policy:</strong></p>
                        <p>If your withdrawal amount is lower than or equal to your total deposit amount, funds are returned to the original payment method. Any profit above the deposit total will be transferred via an alternative payment method.</p>
                        <p>Open positions may be affected by a withdrawal. A stop-out may occur if margin falls below minimum levels.</p>
                        <label style="margin-top:.5rem">
                            <input type="checkbox" name="disclaimer_accepted" value="1" {{ old('disclaimer_accepted') ? 'checked' : '' }}>
                            <span>I have read and agree to the above terms</span>
                        </label>
                    </div>

                    <button type="submit" class="btn btn-accent w-100 mt-3" style="padding:.6rem;font-size:.88rem">
                        <i class="fas fa-paper-plane me-1"></i> Submit Withdrawal Request
                    </button>
                </form>

                <p style="font-size:.72rem;color:var(--text-muted);margin-top:.75rem;margin-bottom:0">
                    Requests are reviewed by your account manager. Funds are released upon approval.
                </p>
            </div>
        </div>
    </div>

    {{-- ═══════════════════════════════════════════
         RIGHT: Transaction history (tabbed)
    ════════════════════════════════════════════ --}}
    <div class="col-xl-7 col-lg-7">
        <div class="dark-card h-100">
            <div class="card-header">
                <i class="fas fa-clock-rotate-left me-2"></i> Transaction History
            </div>
            <div class="card-body p-0">

                {{-- Tabs --}}
                <div class="hist-tabs px-3 pt-2">
                    <button class="hist-tab ht-active" onclick="switchHistTab('deposits', this)">
                        <i class="fas fa-arrow-down me-1"></i> Deposits
                        <span style="font-size:.65rem;background:rgba(14,203,129,.15);color:var(--green);border-radius:10px;padding:.05rem .4rem;margin-left:.3rem">{{ $deposits->count() }}</span>
                    </button>
                    <button class="hist-tab" onclick="switchHistTab('withdrawals', this)">
                        <i class="fas fa-arrow-up me-1"></i> Withdrawals
                        <span style="font-size:.65rem;background:rgba(246,70,93,.12);color:var(--red);border-radius:10px;padding:.05rem .4rem;margin-left:.3rem">{{ $withdrawals->count() }}</span>
                    </button>
                    <button class="hist-tab" onclick="switchHistTab('trades', this)">
                        <i class="fas fa-exchange-alt me-1"></i> Trades
                        <span style="font-size:.65rem;background:rgba(59,130,246,.12);color:var(--accent);border-radius:10px;padding:.05rem .4rem;margin-left:.3rem">{{ $trades->count() }}</span>
                    </button>
                </div>

                {{-- Deposits panel --}}
                <div class="hist-panel ht-visible px-3 pb-3" id="hist-deposits">
                    @if($deposits->isEmpty())
                        <p style="color:var(--text-muted);font-size:.85rem;padding:.75rem 0;margin:0">No deposits on record.</p>
                    @else
                    <div class="table-responsive">
                        <table class="funds-table">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Amount</th>
                                    <th>Status</th>
                                    <th>Reference</th>
                                    <th>Date</th>
                                </tr>
                            </thead>
                            <tbody>
                            @foreach($deposits as $dep)
                            <tr>
                                <td style="color:var(--text-muted)">{{ $dep->id }}</td>
                                <td class="fw-semibold">
                                    {{ $dep->currency === 'USD' ? '$' : ($dep->currency === 'EUR' ? '€' : '') }}{{ number_format($dep->amount, 2) }}
                                    <span style="font-size:.7rem;color:var(--text-muted)">{{ $dep->currency }}</span>
                                    @if($dep->credited_usd_amount !== null && $dep->currency !== 'USD')
                                        <div style="font-size:.68rem;color:var(--text-muted)">USD {{ number_format($dep->credited_usd_amount, 2) }} credited</div>
                                    @endif
                                </td>
                                <td>
                                    <span class="status-badge sb-{{ $dep->status }}">{{ ucfirst($dep->status) }}</span>
                                </td>
                                <td style="color:var(--text-muted);font-size:.78rem">{{ $dep->reference ?? '—' }}</td>
                                <td style="color:var(--text-muted);font-size:.78rem;white-space:nowrap">{{ $dep->created_at->format('d M Y H:i') }}</td>
                            </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                    @endif
                </div>

                {{-- Withdrawals panel --}}
                <div class="hist-panel px-3 pb-3" id="hist-withdrawals">
                    @if($withdrawals->isEmpty())
                        <p style="color:var(--text-muted);font-size:.85rem;padding:.75rem 0;margin:0">No withdrawal requests yet.</p>
                    @else
                    <div class="table-responsive">
                        <table class="funds-table">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Method</th>
                                    <th>Amount</th>
                                    <th>Status</th>
                                    <th>Date</th>
                                </tr>
                            </thead>
                            <tbody>
                            @foreach($withdrawals as $w)
                            <tr>
                                <td style="color:var(--text-muted)">{{ $w->id }}</td>
                                <td>
                                    <span class="method-chip">
                                        @if($w->method === 'crypto')
                                            <i class="fab fa-bitcoin"></i> Crypto
                                        @elseif($w->method === 'bank_transfer')
                                            <i class="fas fa-university"></i> Bank
                                        @elseif($w->method === 'credit_card')
                                            <i class="fas fa-credit-card"></i> Card
                                        @else
                                            {{ ucfirst($w->method ?? 'N/A') }}
                                        @endif
                                    </span>
                                </td>
                                <td class="fw-semibold">
                                    {{ $w->currency === 'USD' ? '$' : ($w->currency === 'EUR' ? '€' : '') }}{{ number_format($w->amount, 2) }}
                                    <span style="font-size:.7rem;color:var(--text-muted)">{{ $w->currency }}</span>
                                </td>
                                <td>
                                    <span class="status-badge sb-{{ $w->status }}">{{ ucfirst($w->status) }}</span>
                                </td>
                                <td style="color:var(--text-muted);font-size:.78rem;white-space:nowrap">{{ $w->created_at->format('d M Y H:i') }}</td>
                            </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                    @endif
                </div>

                {{-- Trades panel --}}
                <div class="hist-panel px-3 pb-3" id="hist-trades">
                    @if($trades->isEmpty())
                        <p style="color:var(--text-muted);font-size:.85rem;padding:.75rem 0;margin:0">No trades on record.</p>
                    @else
                    <div class="table-responsive">
                        <table class="funds-table">
                            <thead>
                                <tr>
                                    <th>Symbol</th>
                                    <th>Side</th>
                                    <th class="text-end">Qty</th>
                                    <th class="text-end">Price</th>
                                    <th class="text-end">Total</th>
                                    <th>Date</th>
                                </tr>
                            </thead>
                            <tbody>
                            @foreach($trades as $trade)
                            <tr>
                                <td>
                                    @if($trade->symbol)
                                    <a href="{{ route('portal.position', $trade->symbol_id) }}" class="text-decoration-none" style="color:var(--text-primary)">
                                        <div class="fw-semibold" style="font-size:.82rem">{{ $trade->symbol->name }}</div>
                                        <div style="font-size:.7rem;color:var(--text-muted)">{{ $trade->symbol->tv_symbol }}</div>
                                    </a>
                                    @else
                                    <span style="color:var(--text-muted)">—</span>
                                    @endif
                                </td>
                                <td>
                                    <span class="status-badge" style="{{ $trade->side === 'buy' ? 'background:rgba(14,203,129,.15);color:var(--green)' : 'background:rgba(246,70,93,.15);color:var(--red)' }}">
                                        {{ strtoupper($trade->side) }}
                                    </span>
                                </td>
                                <td class="text-end" style="font-variant-numeric:tabular-nums">{{ rtrim(rtrim(number_format($trade->quantity, 8), '0'), '.') }}</td>
                                <td class="text-end" style="font-variant-numeric:tabular-nums">{{ number_format($trade->price, 2) }}</td>
                                <td class="text-end fw-semibold" style="font-variant-numeric:tabular-nums">{{ number_format($trade->total_cost, 2) }}</td>
                                <td style="color:var(--text-muted);font-size:.78rem;white-space:nowrap">{{ $trade->traded_at->format('d M Y H:i') }}</td>
                            </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                    @endif
                </div>

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

</div>
@endsection

@section('page-js')
<script>
/* ── Withdrawal method switching ── */
function switchMethod(method, btn) {
    document.getElementById('methodInput').value = method;
    document.querySelectorAll('.method-tab').forEach(function(t) { t.classList.remove('active'); });
    btn.classList.add('active');
    document.querySelectorAll('.method-panel').forEach(function(p) { p.classList.remove('active'); });
    var panel = document.getElementById('panel-' + method);
    if (panel) panel.classList.add('active');
    toggleRequired(method);
}

function toggleRequired(method) {
    var cryptoFields = ['wallet_address', 'crypto_currency'];
    var bankFields   = ['beneficiary_name', 'iban', 'swift', 'bank_name', 'bank_address'];
    var cardFields   = ['card_number', 'card_type'];
    var allFields    = cryptoFields.concat(bankFields, cardFields);
    allFields.forEach(function(name) {
        var el = document.querySelector('[name="' + name + '"]');
        if (el) el.removeAttribute('required');
    });
    var activeFields = method === 'crypto' ? cryptoFields :
                       method === 'bank_transfer' ? bankFields : cardFields;
    activeFields.forEach(function(name) {
        var el = document.querySelector('[name="' + name + '"]');
        if (el) el.setAttribute('required', 'required');
    });
}

/* ── History tab switching ── */
function switchHistTab(tab, btn) {
    document.querySelectorAll('.hist-tab').forEach(function(t) { t.classList.remove('ht-active'); });
    document.querySelectorAll('.hist-panel').forEach(function(p) { p.classList.remove('ht-visible'); });
    btn.classList.add('ht-active');
    var panel = document.getElementById('hist-' + tab);
    if (panel) panel.classList.add('ht-visible');
}

/* ── Card number formatting ── */
var cardInput = document.querySelector('[name="card_number"]');
if (cardInput) {
    cardInput.addEventListener('input', function(e) {
        var val = e.target.value.replace(/\D/g, '').substring(0, 16);
        e.target.value = val.replace(/(\d{4})/g, '$1 ').trim();
    });
}

document.addEventListener('DOMContentLoaded', function() {
    var method = document.getElementById('methodInput').value || 'crypto';
    toggleRequired(method);

    @if(old('method'))
    var oldMethod = '{{ old('method') }}';
    document.querySelectorAll('.method-tab').forEach(function(t, i) {
        if (['crypto', 'bank_transfer', 'credit_card'][i] === oldMethod) {
            switchMethod(oldMethod, t);
        }
    });
    @endif
});
</script>
@endsection