@extends('layouts.trading')

@section('content')
<div class="grid gap-6 lg:grid-cols-2">
    <div class="trade-card">
        <h2 class="mb-4 text-xl font-bold text-white">Agent Signals</h2>
        <div class="space-y-3 max-h-96 overflow-y-auto">
            @forelse ($data['agent_signals'] as $signal)
                <div class="rounded-xl border border-trade-border bg-trade-panel p-4 text-sm">
                    <div class="mb-1 flex justify-between text-slate-400">
                        <span class="uppercase">{{ $signal->signal_type }}</span>
                        <span>{{ $signal->created_at->format('H:i:s') }}</span>
                    </div>
                    <div class="text-white">{{ $signal->reason }}</div>
                    <div class="mt-1 text-xs text-slate-500">Regime: {{ $signal->regime }} | Confidence: {{ $signal->confidence }}%</div>
                </div>
            @empty
                <p class="text-slate-500">No signals yet. Start the bot to begin scanning.</p>
            @endforelse
        </div>
    </div>

    <div class="trade-card">
        <h2 class="mb-4 text-xl font-bold text-white">Trade Journal</h2>
        <div class="space-y-3 max-h-96 overflow-y-auto">
            @forelse ($data['trade_journal'] as $trade)
                <div class="rounded-xl border border-trade-border bg-trade-panel p-4 text-sm">
                    <div class="flex justify-between">
                        <span class="text-white">Entry ₹{{ number_format($trade->entry_price ?? 0, 2) }} → Exit ₹{{ number_format($trade->exit_price ?? 0, 2) }}</span>
                        <span class="{{ ($trade->pnl ?? 0) >= 0 ? 'pnl-positive' : 'pnl-negative' }} font-semibold">
                            {{ ($trade->pnl ?? 0) >= 0 ? '+' : '' }}₹{{ number_format($trade->pnl ?? 0, 2) }}
                        </span>
                    </div>
                    <div class="mt-1 text-xs text-slate-500">{{ $trade->exited_at?->format('d M Y H:i') }}</div>
                </div>
            @empty
                <p class="text-slate-500">Closed trades will appear here.</p>
            @endforelse
        </div>
    </div>
</div>
@endsection