@extends('crm.layouts.master')
@section('title', $lead->fname . ' Portfolio')
@section('page-css')
    <link rel="stylesheet" href="{{ asset('assets/styles/vendor/datatables.min.css') }}">
@endsection
@section('main-content')
<div class="breadcrumb">
    <h3>{{ $lead->fname }} {{ $lead->lname }} — Portfolio</h3>
    <div class="d-flex gap-2">
        <button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#exec_trade_modal">
            <i class="fa fa-exchange-alt"></i> Execute Trade
        </button>
        <button class="btn btn-sm btn-success" data-toggle="modal" data-target="#add_deposit_modal">
            <i class="fa fa-plus"></i> Add Deposit
        </button>
        <a href="{{ route('lead_detail', ['id' => $lead->id]) }}" class="btn btn-sm btn-outline-secondary">← Lead Profile</a>
    </div>
</div>
<div class="separator-breadcrumb border-top"></div>

@if(session('status'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
    {{ session('status') }}
    <button type="button" class="close" data-dismiss="alert">&times;</button>
</div>
@endif

{{-- Equity summary --}}
<div class="row mb-4">
    <div class="col-md-3">
        <div class="card text-center p-3">
            <div class="text-muted small">Total Cash</div>
            <div class="h4 fw-bold">{{ number_format($portfolio['totalCash'], 2) }}</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center p-3">
            <div class="text-muted small">Position Value</div>
            <div class="h4 fw-bold">{{ number_format($portfolio['totalPositionValue'], 2) }}</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center p-3 border-primary">
            <div class="text-muted small">Total Equity</div>
            <div class="h4 fw-bold text-primary">{{ number_format($portfolio['totalEquity'], 2) }}</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center p-3">
            <div class="text-muted small">KYC Status</div>
            @php $ks = $lead->kyc_status; @endphp
            <span class="badge bg-{{ $ks === 'approved' ? 'success' : ($ks === 'rejected' ? 'danger' : 'warning') }} fs-6">
                {{ ucwords(str_replace('_',' ',$ks)) }}
            </span>
        </div>
    </div>
</div>

{{-- Wallets + Main Currency Selector --}}
<div class="row mb-4">
    @foreach($portfolio['wallets'] as $currency => $wallet)
    <div class="col-md-3">
        <div class="card text-center p-3 {{ ($lead->main_currency ?? 'USD') === $currency ? 'border-primary' : '' }}">
            <div class="text-muted small d-flex align-items-center justify-content-center gap-1">
                {{ $currency }}
                @if(($lead->main_currency ?? 'USD') === $currency)
                    <span class="badge bg-primary" style="font-size:.65rem">Main</span>
                @endif
            </div>
            <div class="h5 fw-bold">{{ number_format($wallet->balance, 2) }}</div>
        </div>
    </div>
    @endforeach
</div>

{{-- Set Main Currency --}}
<div class="row mb-4">
    <div class="col-md-6 col-lg-4">
        <div class="card p-3">
            <div class="text-muted small mb-2 fw-semibold">Main Display Currency (Portal)</div>
            <form method="POST" action="{{ route('trading.portfolio.main-currency', $lead->id) }}" class="d-flex gap-2 align-items-center">
                @csrf
                @method('PATCH')
                <select name="main_currency" class="form-control form-control-sm" style="max-width:120px">
                    @foreach(['USD','EUR','CAD','AUD'] as $cur)
                    <option value="{{ $cur }}" {{ ($lead->main_currency ?? 'USD') === $cur ? 'selected' : '' }}>{{ $cur }}</option>
                    @endforeach
                </select>
                <button type="submit" class="btn btn-sm btn-primary">Set</button>
            </form>
            <div class="text-muted" style="font-size:.72rem;margin-top:.35rem">This currency appears as the primary balance in the client's portal dashboard.</div>
        </div>
    </div>
</div>

<div class="row">
    {{-- Positions --}}
    <div class="col-12 mb-4">
        <div class="card text-left">
            <div class="card-body">
                <h5 class="mb-3">Open Positions</h5>
                @if($portfolio['positions']->isEmpty())
                    <p class="text-muted">No open positions.</p>
                @else
                <div class="table-responsive">
                    <table class="table table-bordered table-sm">
                        <thead>
                        <tr>
                            <th>Symbol</th>
                            <th class="text-end">Quantity</th>
                            <th class="text-end">Avg Price</th>
                            <th class="text-end">Latest Price</th>
                            <th class="text-end">Current Value</th>
                            <th class="text-end">Unrealised P&L</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($portfolio['positions'] as $row)
                        @php
                            $symId   = $row['position']->symbol_id;
                            $history = $priceHistories[$symId] ?? collect();
                            $pnlPct  = ($row['position']->avg_price > 0 && $row['latest_price'] > 0)
                                ? (($row['latest_price'] - $row['position']->avg_price) / $row['position']->avg_price) * 100
                                : 0;
                        @endphp
                        <tr style="cursor:pointer" onclick="toggleChart({{ $symId }})">
                            <td>
                                <div class="fw-bold">{{ $row['symbol']->name ?? '—' }}</div>
                                <small class="text-muted">{{ $row['symbol']->tv_symbol ?? '' }}</small>
                                <small class="ms-2 text-primary" style="font-size:.72rem">▼ chart</small>
                            </td>
                            <td class="text-end">{{ rtrim(rtrim(number_format($row['position']->quantity, 8), '0'), '.') }}</td>
                            <td class="text-end">{{ number_format($row['position']->avg_price, 2) }}</td>
                            <td class="text-end">{{ $row['latest_price'] > 0 ? number_format($row['latest_price'], 2) : '—' }}</td>
                            <td class="text-end fw-bold">{{ $row['current_value'] > 0 ? number_format($row['current_value'], 2) : '—' }}</td>
                            <td class="text-end fw-bold {{ $row['unrealised_pnl'] >= 0 ? 'text-success' : 'text-danger' }}">
                                {{ $row['latest_price'] > 0 ? ($row['unrealised_pnl'] >= 0 ? '+' : '') . number_format($row['unrealised_pnl'], 2) : '—' }}
                                @if($row['latest_price'] > 0)
                                <span style="font-size:.78rem;font-weight:400">({{ ($pnlPct >= 0 ? '+' : '') . number_format($pnlPct, 2) }}%)</span>
                                @endif
                            </td>
                        </tr>
                        <tr id="chart_row_{{ $symId }}" style="display:none">
                            <td colspan="6" style="padding:0;background:#131722">
                                @if($history->isEmpty())
                                <div style="padding:1.5rem;text-align:center;color:#6b7280;font-size:.85rem">No price data recorded yet.</div>
                                @else
                                <div style="padding:.5rem .75rem .25rem;color:#9ca3af;font-size:.72rem;text-transform:uppercase;letter-spacing:.3px">
                                    {{ $row['symbol']->name ?? '' }} · Price History
                                    <span style="color:#f59e0b;margin-left:.5rem">— Entry @ {{ number_format($row['position']->avg_price, 2) }}</span>
                                </div>
                                <div id="chart_{{ $symId }}" style="width:100%;height:280px"
                                     data-history='@json($history->map(fn($p) => ["time" => $p->priced_at->timestamp, "value" => (float)$p->price])->values())'
                                     data-avg="{{ (float)$row['position']->avg_price }}"
                                     data-pnl="{{ $pnlPct }}">
                                </div>
                                @endif
                            </td>
                        </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Deposits --}}
    <div class="col-md-6 mb-4">
        <div class="card text-left">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="mb-0">Deposits</h5>
                    <button class="btn btn-sm btn-success" data-toggle="modal" data-target="#add_deposit_modal">
                        <i class="fa fa-plus"></i> Add Deposit
                    </button>
                </div>
                <div class="table-responsive">
                    <table class="display table table-bordered table-sm" id="dep_table" style="width:100%">
                        <thead><tr><th>#</th><th>Amount</th><th>Cur</th><th>Ref</th><th>Status</th><th>Date</th><th>Action</th></tr></thead>
                        <tbody>
                        @foreach($deposits as $dep)
                        <tr>
                            <td>{{ $dep->id }}</td>
                            <td>{{ number_format($dep->amount, 2) }}</td>
                            <td>{{ $dep->currency }}</td>
                            <td><small class="text-muted">{{ $dep->reference ?? '—' }}</small></td>
                            <td><span class="badge bg-{{ $dep->status === 'approved' ? 'success' : ($dep->status === 'rejected' ? 'danger' : 'warning') }}">{{ ucfirst($dep->status) }}</span></td>
                            <td>{{ $dep->created_at->format('Y-m-d') }}</td>
                            <td>
                                @if($dep->status === 'pending')
                                <form method="POST" action="{{ route('trading.deposits.approve', $dep->id) }}" class="d-inline">
                                    @csrf
                                    <button type="submit" class="btn btn-xs btn-success" onclick="return confirm('Approve deposit #{{ $dep->id }}?')" title="Approve">
                                        <i class="fa fa-check"></i>
                                    </button>
                                </form>
                                <form method="POST" action="{{ route('trading.deposits.reject', $dep->id) }}" class="d-inline ms-1">
                                    @csrf
                                    <button type="submit" class="btn btn-xs btn-danger" onclick="return confirm('Reject deposit #{{ $dep->id }}?')" title="Reject">
                                        <i class="fa fa-times"></i>
                                    </button>
                                </form>
                                @else
                                <span class="text-muted">—</span>
                                @endif
                            </td>
                        </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- Trade history --}}
    <div class="col-md-6 mb-4">
        <div class="card text-left">
            <div class="card-body">
                <h5 class="mb-3">Trade History</h5>
                <div class="table-responsive">
                    <table class="display table table-bordered table-sm" id="trade_table" style="width:100%">
                        <thead><tr><th>#</th><th>Symbol</th><th>Side</th><th>Qty</th><th>Price</th><th>Total</th><th>Date</th></tr></thead>
                        <tbody>
                        @foreach($trades as $trade)
                        <tr>
                            <td>{{ $trade->id }}</td>
                            <td>{{ $trade->symbol->name ?? '—' }}</td>
                            <td><span class="badge bg-{{ $trade->side === 'buy' ? 'success' : 'danger' }}">{{ strtoupper($trade->side) }}</span></td>
                            <td>{{ rtrim(rtrim(number_format($trade->quantity, 8),'0'),'.') }}</td>
                            <td>{{ number_format($trade->price, 2) }}</td>
                            <td>{{ number_format($trade->total_cost, 2) }}</td>
                            <td>{{ $trade->traded_at->format('Y-m-d') }}</td>
                        </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{{-- Execute Trade Modal --}}
<div class="modal fade" id="exec_trade_modal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title"><i class="fa fa-exchange-alt me-2"></i>Trade Ticket — {{ $lead->fname }} {{ $lead->lname }}</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ route('trading.trades.store') }}" id="portfolio_trade_form">
                    @csrf
                    <input type="hidden" name="lead_id" value="{{ $lead->id }}">
                    <div class="row">
                        <div class="col-md-6">
                            {{-- Client balances --}}
                            <div class="mb-3">
                                <label class="form-label">Available Balances</label>
                                <div id="pt_balance_display" class="p-2 bg-light rounded" style="font-size:.85rem">Loading…</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label class="form-label">Symbol <span class="text-danger">*</span></label>
                                <select name="symbol_id" id="pt_symbol_id" class="form-control" required>
                                    <option value="">-- Select symbol --</option>
                                    @foreach($symbols as $sym)
                                    <option value="{{ $sym->id }}">{{ $sym->name }} ({{ $sym->tv_symbol }})</option>
                                    @endforeach
                                </select>
                            </div>
                            <div id="pt_symbol_price_info" class="mb-3" style="display:none">
                                <label class="form-label">Latest Price</label>
                                <div id="pt_symbol_price_display" class="p-2 bg-light rounded" style="font-size:.85rem"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group mb-3">
                                <label class="form-label">Side <span class="text-danger">*</span></label>
                                <select name="side" class="form-control" required>
                                    <option value="buy">BUY</option>
                                    <option value="sell">SELL</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group mb-3">
                                <label class="form-label">Currency <span class="text-danger">*</span></label>
                                <select name="currency" class="form-control" required>
                                    <option>USD</option><option>EUR</option><option>CAD</option><option>AUD</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group mb-3">
                                <label class="form-label">Quantity <span class="text-danger">*</span></label>
                                <input type="number" name="quantity" id="pt_qty" class="form-control" step="any" min="0.00000001" required>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group mb-3">
                                <label class="form-label">Price Override <small class="text-muted">(blank = latest)</small></label>
                                <input type="number" name="price" id="pt_price" class="form-control" step="any" min="0" placeholder="auto">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group mb-3">
                                <label class="form-label">Fee</label>
                                <input type="number" name="fee" class="form-control" step="any" min="0" value="0">
                            </div>
                        </div>
                        <div class="col-md-9">
                            <div class="form-group mb-3">
                                <label class="form-label">Note</label>
                                <input type="text" name="note" class="form-control" placeholder="Optional note">
                            </div>
                        </div>
                    </div>
                    <div id="pt_estimated_cost" class="alert alert-info py-2 mb-3" style="display:none;font-size:.88rem"></div>
                    <button type="submit" class="btn btn-primary w-100">Execute Trade</button>
                </form>
            </div>
        </div>
    </div>
</div>

{{-- Add Deposit Modal --}}
<div class="modal fade" id="add_deposit_modal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title"><i class="fa fa-plus me-2"></i>Add Deposit — {{ $lead->fname }} {{ $lead->lname }}</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ route('trading.deposits.store') }}">
                    @csrf
                    <input type="hidden" name="lead_id" value="{{ $lead->id }}">
                    <div class="form-group mb-3">
                        <label class="form-label">Currency <span class="text-danger">*</span></label>
                        <select name="currency" class="form-control" required>
                            <option value="USD">USD</option>
                            <option value="EUR">EUR</option>
                            <option value="CAD">CAD</option>
                            <option value="AUD">AUD</option>
                        </select>
                    </div>
                    <div class="form-group mb-3">
                        <label class="form-label">Amount <span class="text-danger">*</span></label>
                        <input type="number" name="amount" class="form-control" step="0.01" min="0.01" required placeholder="0.00">
                    </div>
                    <div class="form-group mb-3">
                        <label class="form-label">Reference</label>
                        <input type="text" name="reference" class="form-control" maxlength="100" placeholder="Wire ref, transaction ID, etc.">
                    </div>
                    <div class="form-group mb-3">
                        <label class="form-label">Notes</label>
                        <textarea name="notes" class="form-control" rows="2" maxlength="500" placeholder="Optional internal notes"></textarea>
                    </div>
                    <button type="submit" class="btn btn-success w-100">Create Deposit (Pending Approval)</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
@section('page-js')
<script src="{{ asset('assets/js/vendor/datatables.min.js') }}"></script>
<script src="https://unpkg.com/lightweight-charts@4.2.0/dist/lightweight-charts.standalone.production.js"></script>
<script>
const _charts = {};

function toggleChart(symId) {
    const row = document.getElementById('chart_row_' + symId);
    if (!row) return;

    if (row.style.display === 'none') {
        row.style.display = '';
        if (!_charts[symId]) {
            initChart(symId);
        }
    } else {
        row.style.display = 'none';
    }
}

function initChart(symId) {
    const container = document.getElementById('chart_' + symId);
    if (!container) return;

    const chartData = JSON.parse(container.dataset.history || '[]');
    const avgPrice  = parseFloat(container.dataset.avg)  || 0;
    const pnlPct    = parseFloat(container.dataset.pnl)  || 0;
    const positive  = pnlPct >= 0;

    const chart = LightweightCharts.createChart(container, {
        layout: {
            background: { color: '#131722' },
            textColor:  '#9ca3af',
        },
        grid: {
            vertLines: { color: '#1f2937' },
            horzLines: { color: '#1f2937' },
        },
        crosshair:       { mode: LightweightCharts.CrosshairMode.Normal },
        rightPriceScale: { borderColor: '#374151' },
        timeScale:       { borderColor: '#374151', timeVisible: true, secondsVisible: false },
        width:  container.clientWidth,
        height: 280,
    });

    const areaSeries = chart.addAreaSeries({
        lineColor:        positive ? '#10b981' : '#ef4444',
        topColor:         positive ? 'rgba(16,185,129,0.25)' : 'rgba(239,68,68,0.25)',
        bottomColor:      'rgba(0,0,0,0)',
        lineWidth:        2,
        priceLineVisible: false,
    });

    areaSeries.setData(chartData);

    if (avgPrice > 0) {
        areaSeries.createPriceLine({
            price:            avgPrice,
            color:            '#f59e0b',
            lineWidth:        1,
            lineStyle:        LightweightCharts.LineStyle.Dashed,
            axisLabelVisible: true,
            title:            'Entry',
        });
    }

    chart.timeScale().fitContent();
    _charts[symId] = chart;

    window.addEventListener('resize', () => {
        chart.applyOptions({ width: container.clientWidth });
    });
}
</script>
<script>
$(document).ready(function () {
    $('#dep_table').DataTable({ order: [[0,'DESC']], pageLength: 10 });
    $('#trade_table').DataTable({ order: [[0,'DESC']], pageLength: 10 });

    // Load balances when trade modal opens
    $('#exec_trade_modal').on('show.bs.modal', function () {
        $.getJSON('{{ url("trading/trades/client-balances") }}/{{ $lead->id }}', function (data) {
            let html = '';
            $.each(['USD','EUR','CAD','AUD'], function(i, cur) {
                const bal = data[cur] ? parseFloat(data[cur].balance).toFixed(2) : '0.00';
                html += `<span class="me-3"><strong>${cur}:</strong> ${bal}</span>`;
            });
            $('#pt_balance_display').html(html || 'No wallets yet.');
        });
    });

    // Load latest price when symbol changes
    $('#pt_symbol_id').on('change', function () {
        const id = $(this).val();
        if (!id) { $('#pt_symbol_price_info').hide(); return; }
        $.getJSON('{{ url("trading/trades/symbol-price") }}/' + id, function (data) {
            if (data.price) {
                $('#pt_price').attr('placeholder', data.price);
                $('#pt_symbol_price_display').html(`<strong>${parseFloat(data.price).toFixed(8)}</strong> <span class="text-muted">as of ${data.priced_at ?? 'N/A'}</span>`);
            } else {
                $('#pt_symbol_price_display').html('<span class="text-warning">No price set for this symbol.</span>');
            }
            $('#pt_symbol_price_info').show();
            updatePtEstimate();
        });
    });

    // Estimated cost
    function updatePtEstimate() {
        const qty   = parseFloat($('#pt_qty').val()) || 0;
        const price = parseFloat($('#pt_price').val()) || parseFloat($('#pt_price').attr('placeholder')) || 0;
        if (qty && price) {
            $('#pt_estimated_cost').text(`Estimated total: ${(qty * price).toFixed(2)}`).show();
        } else {
            $('#pt_estimated_cost').hide();
        }
    }
    $('#pt_qty, #pt_price').on('input', updatePtEstimate);
});
</script>
@endsection