<x-app-layout>
    <x-slot name="header">
        <div>
            <p class="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-400">Student Trade Review</p>
            <h2 class="mt-1 text-2xl font-bold text-slate-950 dark:text-white">{{ $trade->symbol }} - {{ $student->name }}</h2>
        </div>
    </x-slot>

    <div class="grid gap-6 xl:grid-cols-3">
        <section class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900 xl:col-span-2">
            <dl class="grid gap-5 sm:grid-cols-2">
                <div><dt class="text-sm text-slate-500 dark:text-slate-400">Type</dt><dd class="font-bold capitalize text-slate-950 dark:text-white">{{ $trade->type }}</dd></div>
                <div><dt class="text-sm text-slate-500 dark:text-slate-400">Status</dt><dd class="font-bold capitalize text-slate-950 dark:text-white">{{ $trade->status }}</dd></div>
                <div><dt class="text-sm text-slate-500 dark:text-slate-400">Entry</dt><dd class="font-bold text-slate-950 dark:text-white">{{ $trade->entry_price }}</dd></div>
                <div><dt class="text-sm text-slate-500 dark:text-slate-400">Exit</dt><dd class="font-bold text-slate-950 dark:text-white">{{ $trade->exit_price ?? 'N/A' }}</dd></div>
                <div><dt class="text-sm text-slate-500 dark:text-slate-400">Emotion</dt><dd class="font-bold text-slate-950 dark:text-white">{{ $trade->emotion ?? 'N/A' }}</dd></div>
                <div><dt class="text-sm text-slate-500 dark:text-slate-400">Session</dt><dd class="font-bold text-slate-950 dark:text-white">{{ $trade->trading_session ?? 'N/A' }}</dd></div>
                <div><dt class="text-sm text-slate-500 dark:text-slate-400">Review Status</dt><dd class="font-bold capitalize text-slate-950 dark:text-white">{{ str_replace('_', ' ', $trade->review_status) }}</dd></div>
                <div><dt class="text-sm text-slate-500 dark:text-slate-400">P/L</dt><dd class="font-bold {{ (float) $trade->profit_loss >= 0 ? 'text-blue-600 dark:text-blue-400' : 'text-red-500 dark:text-red-400' }}">{{ number_format((float) $trade->profit_loss, 2) }}</dd></div>
            </dl>
            <div class="mt-6 border-t border-blue-100 pt-6 dark:border-blue-900/50">
                <h3 class="text-sm font-bold uppercase tracking-wide text-blue-700 dark:text-blue-300">Student Notes</h3>
                <p class="mt-2 whitespace-pre-line text-sm leading-6 text-slate-600 dark:text-slate-300">{{ $trade->notes ?: 'No notes.' }}</p>
            </div>
            <div class="mt-6 border-t border-blue-100 pt-6 dark:border-blue-900/50">
                <h3 class="text-sm font-bold uppercase tracking-wide text-blue-700 dark:text-blue-300">Psychology Note</h3>
                <p class="mt-2 whitespace-pre-line text-sm leading-6 text-slate-600 dark:text-slate-300">{{ $trade->psychology_note ?: 'No psychology note.' }}</p>
            </div>
        </section>

        <aside class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
            <h3 class="text-lg font-bold text-slate-950 dark:text-white">Mentor Comments</h3>
            <div class="mt-4 space-y-3">
                @forelse ($trade->comments as $comment)
                    <div class="rounded-lg bg-blue-50 p-4 dark:bg-blue-950/30">
                        <p class="text-sm text-slate-700 dark:text-slate-200">{{ $comment->comment }}</p>
                        <p class="mt-2 text-xs font-bold text-slate-500 dark:text-slate-400">{{ $comment->created_at->format('M d, Y H:i') }}</p>
                    </div>
                @empty
                    <p class="text-sm text-slate-500 dark:text-slate-400">No comments yet.</p>
                @endforelse
            </div>
            <form method="POST" action="{{ route('mentor.students.trades.comments.store', [$student, $trade]) }}" class="mt-5">
                @csrf
                <label for="comment" class="text-sm font-bold text-slate-700 dark:text-slate-200">Add Comment</label>
                <textarea id="comment" name="comment" rows="5" class="mt-1 block w-full rounded-lg border-blue-100 bg-white px-3 py-2 text-sm text-slate-900 focus:border-blue-500 focus:ring-blue-500 dark:border-blue-900 dark:bg-slate-950 dark:text-white" required></textarea>
                <button class="mt-3 w-full rounded-lg bg-blue-600 px-4 py-2 text-sm font-bold text-white hover:bg-blue-700">Save Comment</button>
            </form>
        </aside>
    </div>
</x-app-layout>
