@extends('layouts.trading')

@section('content')
<div class="grid gap-6 xl:grid-cols-2">
    {{-- Portfolio Card --}}
    <div class="trade-card">
        <div class="mb-4 flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-slate-400">
            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            Portfolio
        </div>

        <div class="mb-6">
            <div class="text-sm text-slate-400">Total Equity</div>
            <div class="text-4xl font-bold text-white">₹{{ number_format($data['total_equity'], 2) }}</div>
            <div class="mt-1 text-sm text-slate-500">{{ $data['broker_label'] }} Available: ₹{{ number_format($data['available_balance'], 2) }}
                @if ($data['last_synced_at'])
                    <span class="text-slate-600">· synced {{ $data['last_synced_at']->diffForHumans() }}</span>
                @endif
            </div>
        </div>

        <div class="mb-6 grid grid-cols-2 gap-4">
            <div class="rounded-xl bg-trade-panel p-4">
                <div class="text-xs uppercase text-slate-500">Unrealized P&L</div>
                <div class="{{ $data['unrealized_pnl'] >= 0 ? 'pnl-positive' : 'pnl-negative' }} text-xl font-bold">
                    {{ $data['unrealized_pnl'] >= 0 ? '+' : '' }}₹{{ number_format($data['unrealized_pnl'], 2) }}
                </div>
                <div class="text-xs text-slate-500">Open positions</div>
            </div>
            <div class="rounded-xl bg-trade-panel p-4">
                <div class="text-xs uppercase text-slate-500">Today Realized P&L</div>
                <div class="{{ $data['realized_pnl'] >= 0 ? 'pnl-positive' : 'pnl-negative' }} text-xl font-bold">
                    {{ $data['realized_pnl'] >= 0 ? '+' : '' }}₹{{ number_format($data['realized_pnl'], 2) }}
                </div>
                <div class="text-xs text-slate-500">Closed today</div>
            </div>
        </div>

        <div class="flex items-center justify-between border-t border-trade-border pt-4">
            <div>
                <div class="text-sm text-slate-400">Open Positions</div>
                <div class="text-2xl font-bold text-white">{{ $data['open_positions_count'] }}</div>
            </div>
            <form method="POST" action="{{ route('bot.toggle') }}">
                @csrf
                <div class="flex items-center gap-3">
                    <span class="text-sm text-slate-400">Auto Trade</span>
                    <button type="submit" class="relative inline-flex h-7 w-12 items-center rounded-full transition {{ $data['bot_settings']->bot_enabled ? 'bg-emerald-500' : 'bg-slate-600' }}">
                        <span class="inline-block h-5 w-5 transform rounded-full bg-white transition {{ $data['bot_settings']->bot_enabled ? 'translate-x-6' : 'translate-x-1' }}"></span>
                    </button>
                    <span class="text-sm font-semibold {{ $data['bot_settings']->bot_enabled ? 'text-emerald-400' : 'text-slate-500' }}">
                        {{ $data['bot_settings']->bot_enabled ? 'ON' : 'OFF' }}
                    </span>
                </div>
            </form>
        </div>
    </div>

    {{-- Live Market Card --}}
    <div class="trade-card">
        <div class="mb-4 flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-slate-400">
            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
            Live Market
        </div>

        @if ($data['nifty'] || $data['vix'])
            @foreach (array_filter(['nifty' => $data['nifty'], 'vix' => $data['vix']]) as $key => $index)
                <div class="{{ $key === 'vix' ? 'mt-6 border-t border-trade-border pt-6' : '' }}">
                    <div class="flex items-start justify-between">
                        <div>
                            <div class="text-lg font-semibold text-white">{{ $index['name'] }}</div>
                            <div class="text-3xl font-bold text-white">{{ number_format($index['ltp'], 2) }}</div>
                        </div>
                        <div class="text-right {{ $index['change'] >= 0 ? 'pnl-positive' : 'pnl-negative' }}">
                            <div class="font-semibold">{{ $index['change'] >= 0 ? '+' : '' }}{{ number_format($index['change'], 2) }}</div>
                            <div class="text-sm">({{ $index['change_pct'] >= 0 ? '+' : '' }}{{ number_format($index['change_pct'], 2) }}%)</div>
                        </div>
                    </div>
                    <div class="mt-3 grid grid-cols-4 gap-2 text-xs text-slate-500">
                        <div>O <span class="text-slate-300">{{ number_format($index['open'], 2) }}</span></div>
                        <div>H <span class="text-slate-300">{{ number_format($index['high'], 2) }}</span></div>
                        <div>L <span class="text-slate-300">{{ number_format($index['low'], 2) }}</span></div>
                        <div>C <span class="text-slate-300">{{ number_format($index['close'], 2) }}</span></div>
                    </div>
                </div>
            @endforeach
        @else
            <p class="text-sm text-amber-300">Connect admin FlatTrade credentials and run sync to load live NIFTY / VIX quotes.</p>
        @endif
    </div>
</div>

{{-- Bot Controls --}}
<div class="trade-card mt-6">
    <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
        <div>
            <div class="text-lg font-semibold text-white">Auto Trade Engine</div>
            <p class="text-sm text-slate-400">Bot will enter/exit automatically during market hours.</p>
            <p class="mt-1 text-xs text-slate-500">Status: <span class="font-semibold text-trade-accent">{{ strtoupper($data['bot_settings']->bot_status) }}</span></p>
        </div>
        <div class="flex gap-3">
            <form method="POST" action="{{ route('bot.start') }}">
                @csrf
                <button type="submit" class="trade-btn-primary">
                    <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20"><path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z"/></svg>
                    Start
                </button>
            </form>
            <form method="POST" action="{{ route('bot.stop') }}">
                @csrf
                <button type="submit" class="trade-btn-danger">
                    <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V8a1 1 0 00-1-1H8z" clip-rule="evenodd"/></svg>
                    Stop
                </button>
            </form>
        </div>
    </div>
</div>

{{-- Quick nav tabs --}}
<div class="mt-6 flex flex-wrap gap-2">
    <a href="{{ route('holdings') }}" class="trade-btn-ghost">Holdings</a>
    <a href="{{ route('pnl') }}" class="trade-btn-ghost">P&L report</a>
    <a href="{{ route('watchlist') }}" class="trade-btn-ghost">Watchlist</a>
    <a href="{{ route('agent') }}" class="trade-btn-ghost">Full agent log</a>
</div>

{{-- Scan Watch --}}
@include('trading.partials.scan-watch', ['instruments' => $data['scan_instruments']])
@endsection