@extends('layouts.vpm-dashboard', ['active' => 'traders', 'area' => 'admin'])

@section('title', 'Trader Info')

@section('content')
<div class="vpm-page vpm-trader-info-page">
    <x-vpm.page-intro
        title="Trader Info"
        description="View detailed information about this trader, including their statistics and other relevant data."
    />

    <article class="vpm-trader-info-card">
        <div class="vpm-trader-info-card__body">
            <div class="vpm-trader-info-card__avatar-wrap">
                @if ($trader->photoUrl())
                    <img
                        src="{{ $trader->photoUrl() }}"
                        alt="{{ $trader->name }}"
                        class="vpm-trader-info-card__avatar"
                        width="160"
                        height="160"
                    >
                @else
                    <div class="vpm-trader-info-card__avatar vpm-trader-info-card__avatar--fallback" aria-hidden="true">
                        {{ $trader->initials() }}
                    </div>
                @endif
            </div>

            <h3 class="vpm-trader-info-card__name">{{ $trader->name }}</h3>

            <dl class="vpm-trader-info-stats">
                <div class="vpm-trader-info-stats__row vpm-trader-info-stats__row--accent">
                    <dt class="vpm-trader-info-stats__label">Date:</dt>
                    <dd class="vpm-trader-info-stats__value">{{ $trader->started_at->format('D, d M Y H:i:s') }} GMT</dd>
                </div>
                <div class="vpm-trader-info-stats__row">
                    <dt class="vpm-trader-info-stats__label">Trades:</dt>
                    <dd class="vpm-trader-info-stats__value">{{ number_format($trader->trades) }}</dd>
                </div>
                <div class="vpm-trader-info-stats__row vpm-trader-info-stats__row--accent">
                    <dt class="vpm-trader-info-stats__label">Total Wins:</dt>
                    <dd class="vpm-trader-info-stats__value">{{ number_format($trader->total_wins) }}</dd>
                </div>
                <div class="vpm-trader-info-stats__row">
                    <dt class="vpm-trader-info-stats__label">Total Losses:</dt>
                    <dd class="vpm-trader-info-stats__value">{{ number_format($trader->total_losses) }}</dd>
                </div>
                <div class="vpm-trader-info-stats__row vpm-trader-info-stats__row--accent">
                    <dt class="vpm-trader-info-stats__label">Win Percent:</dt>
                    <dd class="vpm-trader-info-stats__value">{{ $trader->formattedWinPercent() }}</dd>
                </div>
                <div class="vpm-trader-info-stats__row">
                    <dt class="vpm-trader-info-stats__label">Profit Share:</dt>
                    <dd class="vpm-trader-info-stats__value">{{ $trader->formattedProfitShare() }}</dd>
                </div>
                <div class="vpm-trader-info-stats__row vpm-trader-info-stats__row--accent">
                    <dt class="vpm-trader-info-stats__label">Followers:</dt>
                    <dd class="vpm-trader-info-stats__value">{{ number_format($trader->followers) }}</dd>
                </div>
            </dl>
        </div>
    </article>

    <div class="vpm-trader-info-actions">
        @if ($trader->pending_requests_count > 0)
            <x-vpm.button variant="primary" class="vpm-trader-info-actions__btn" type="button" data-vpm-dialog-open="manage-pending-requests-dialog">
                Manage pending requests
            </x-vpm.button>
        @else
            <x-vpm.button variant="primary" class="vpm-trader-info-actions__btn" type="button" disabled>
                Manage pending requests
            </x-vpm.button>
        @endif

        <x-vpm.button variant="primary" class="vpm-trader-info-actions__btn" type="button" data-vpm-dialog-open="update-trader-dialog">
            Update trader
        </x-vpm.button>

        <x-vpm.button variant="primary" class="vpm-trader-info-actions__btn" type="button" data-vpm-dialog-open="delete-trader-dialog">
            Delete trader
        </x-vpm.button>
    </div>
</div>

<x-vpm.admin-trader-update-dialog :trader="$trader" />
<x-vpm.admin-manage-pending-requests-dialog :trader="$trader" :pending-requests="$pendingRequests" />

<dialog id="delete-trader-dialog" class="vpm-dialog" aria-labelledby="delete-trader-dialog-title">
    <form method="POST" action="{{ route('admin.copy-traders.destroy', $trader) }}" class="vpm-dialog__panel">
        @csrf
        @method('DELETE')
        <header class="vpm-dialog__header">
            <h2 id="delete-trader-dialog-title" class="vpm-dialog__title">Delete trader</h2>
            <button type="button" class="vpm-dialog__close" data-vpm-dialog-close aria-label="Close">×</button>
        </header>
        <div class="vpm-dialog__body">
            <p>Delete {{ $trader->name }}? Existing copy requests will also be removed.</p>
        </div>
        <footer class="vpm-dialog__footer">
            <x-vpm.button type="button" variant="ghost" data-vpm-dialog-close>Cancel</x-vpm.button>
            <x-vpm.button type="submit" variant="primary">Delete trader</x-vpm.button>
        </footer>
    </form>
</dialog>

@if ($errors->has('request_ids') || $errors->has('request_ids.*'))
    @push('scripts')
        <script>
            document.body.setAttribute('data-scroll-locked', '1');
            document.getElementById('manage-pending-requests-dialog')?.showModal();
        </script>
    @endpush
@elseif ($errors->any())
    @push('scripts')
        <script>
            document.body.setAttribute('data-scroll-locked', '1');
            document.getElementById('update-trader-dialog')?.showModal();
        </script>
    @endpush
@endif
@endsection