@extends('crm.layouts.master')
@section('title', 'Prediction Market Trades')
@section('page-css')
    <link rel="stylesheet" href="{{ asset('assets/styles/vendor/datatables.min.css') }}">
    <style>
        .pm-badge-yes  { background: rgba(74,222,128,.15); color: #4ade80;  padding: .18rem .55rem; border-radius: 4px; font-size: .72rem; font-weight: 700; display:inline-block; }
        .pm-badge-no   { background: rgba(248,113,113,.15); color: #f87171; padding: .18rem .55rem; border-radius: 4px; font-size: .72rem; font-weight: 700; display:inline-block; }
        .pm-badge-buy  { background: rgba(74,222,128,.15); color: #4ade80;  padding: .18rem .6rem;  border-radius: 4px; font-size: .72rem; font-weight: 700; display:inline-block; }
        .pm-badge-sell { background: rgba(248,113,113,.15); color: #f87171; padding: .18rem .6rem;  border-radius: 4px; font-size: .72rem; font-weight: 700; display:inline-block; }
        .pm-badge-open { background: rgba(74,222,128,.12); color: #4ade80;  padding: .18rem .55rem; border-radius: 4px; font-size: .72rem; font-weight: 700; display:inline-block; }
        td.market-col  { max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    </style>
@endsection

@section('main-content')
<div class="breadcrumb d-flex align-items-center justify-content-between w-100">
    <h3>Prediction Market Trades</h3>
</div>
<div class="separator-breadcrumb border-top"></div>

@if($leadId)
<div class="alert alert-info d-flex align-items-center justify-content-between py-2">
    <span>Showing records for client #{{ $leadId }}</span>
    <a href="{{ route('trading.predictions') }}" class="btn btn-sm btn-outline-secondary">Clear filter</a>
</div>
@endif

<ul class="nav nav-tabs mb-3" id="predTabs" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="tab-history" data-toggle="tab" href="#pane-history" role="tab">
            <i class="fas fa-list me-1"></i> Trade History
            <span class="badge badge-secondary ms-1">{{ $trades->count() }}</span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="tab-positions" data-toggle="tab" href="#pane-positions" role="tab">
            <i class="fas fa-briefcase me-1"></i> Open Positions
            <span class="badge badge-secondary ms-1">{{ $positions->count() }}</span>
        </a>
    </li>
</ul>

<div class="tab-content">

    {{-- ══ TRADE HISTORY TAB ══ --}}
    <div class="tab-pane fade show active" id="pane-history" role="tabpanel">
        <div class="card text-left">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="display table table-bordered" id="trades_table" style="width:100%">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Client</th>
                                <th>Market</th>
                                <th>Outcome</th>
                                <th>Side</th>
                                <th class="text-end">Shares</th>
                                <th class="text-end">Price</th>
                                <th class="text-end">Total</th>
                                <th>CCY</th>
                                <th>Date</th>
                            </tr>
                        </thead>
                        <tbody>
                        @foreach($trades as $i => $t)
                        <tr>
                            <td>{{ $i + 1 }}</td>
                            <td>
                                @if($t->lead)
                                <a href="{{ route('trading.portfolio', $t->lead_id) }}">
                                    {{ $t->lead->fname }} {{ $t->lead->lname }}
                                </a>
                                @else
                                <span class="text-muted">–</span>
                                @endif
                            </td>
                            <td class="market-col" title="{{ $t->question }}">{{ $t->question }}</td>
                            <td><span class="pm-badge-{{ strtolower($t->outcome) }}">{{ $t->outcome }}</span></td>
                            <td><span class="pm-badge-{{ $t->side }}">{{ strtoupper($t->side) }}</span></td>
                            <td class="text-end">{{ rtrim(rtrim(number_format($t->shares, 4), '0'), '.') }}</td>
                            <td class="text-end">{{ number_format($t->price * 100, 1) }}¢</td>
                            <td class="text-end fw-semibold">{{ number_format($t->total_cost, 2) }}</td>
                            <td>{{ $t->currency }}</td>
                            <td style="white-space:nowrap">{{ $t->traded_at->format('d M Y H:i') }}</td>
                        </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- ══ OPEN POSITIONS TAB ══ --}}
    <div class="tab-pane fade" id="pane-positions" role="tabpanel">
        <div class="card text-left">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="display table table-bordered" id="positions_table" style="width:100%">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Client</th>
                                <th>Market</th>
                                <th>Outcome</th>
                                <th class="text-end">Shares</th>
                                <th class="text-end">Avg Price</th>
                                <th class="text-end">Cost Basis</th>
                                <th>CCY</th>
                                <th>Status</th>
                                <th>Opened</th>
                            </tr>
                        </thead>
                        <tbody>
                        @foreach($positions as $i => $p)
                        <tr>
                            <td>{{ $i + 1 }}</td>
                            <td>
                                @if($p->lead)
                                <a href="{{ route('trading.portfolio', $p->lead_id) }}">
                                    {{ $p->lead->fname }} {{ $p->lead->lname }}
                                </a>
                                @else
                                <span class="text-muted">–</span>
                                @endif
                            </td>
                            <td class="market-col" title="{{ $p->question }}">{{ $p->question }}</td>
                            <td><span class="pm-badge-{{ strtolower($p->outcome) }}">{{ $p->outcome }}</span></td>
                            <td class="text-end fw-semibold">{{ rtrim(rtrim(number_format($p->shares, 4), '0'), '.') }}</td>
                            <td class="text-end">{{ number_format($p->avg_price * 100, 1) }}¢</td>
                            <td class="text-end">{{ number_format($p->shares * $p->avg_price, 2) }}</td>
                            <td>{{ $p->currency }}</td>
                            <td><span class="pm-badge-open">{{ ucfirst($p->status) }}</span></td>
                            <td style="white-space:nowrap">{{ $p->created_at->format('d M Y') }}</td>
                        </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection

@section('page-js')
    <script src="{{ asset('assets/js/vendor/datatables.min.js') }}"></script>
    <script>
        $(document).ready(function () {
            $('#trades_table').DataTable({
                order: [[9, 'desc']],
                pageLength: 25,
                columnDefs: [{ orderable: false, targets: [2] }]
            });
            $('#positions_table').DataTable({
                order: [[9, 'desc']],
                pageLength: 25,
                columnDefs: [{ orderable: false, targets: [2] }]
            });
        });
    </script>
@endsection