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

@section('title', 'Trading')

@section('content')
<div class="vpm-page vpm-admin-trading-page">
    <x-vpm.page-intro
        title="Trading"
        description="View, manage, and oversee client trades, including opening new trades, adding profits or losses to existing ones, and closing trades within the admin panel."
    />

    <x-vpm.button
        variant="primary"
        type="button"
        class="vpm-admin-trading-page__open-btn"
        data-vpm-dialog-open="open-trade-dialog"
    >
        Open a trade
    </x-vpm.button>

    @if ($trades->isEmpty())
        <p class="vpm-admin-trading-page__empty">No open trades yet.</p>
    @else
        <ul class="vpm-admin-trading-list">
            @foreach ($trades as $trade)
                <li class="vpm-admin-trading-list__item">
                    <article class="vpm-admin-trade-card">
                        <div class="vpm-admin-trade-card__body">
                            <div class="vpm-admin-trade-card__summary">
                                <time datetime="{{ $trade->executed_at->toIso8601String() }}" class="vpm-admin-trade-card__date">
                                    <span class="vpm-admin-trade-card__date-month">{{ $trade->executed_at->format('M') }}</span>
                                    <span class="vpm-admin-trade-card__date-day">{{ $trade->executed_at->format('d') }}</span>
                                </time>

                                <img
                                    src="{{ $trade->logoUrl() }}"
                                    alt="{{ $trade->displaySymbol() }}"
                                    class="vpm-admin-trade-card__logo"
                                    width="48"
                                    height="48"
                                    loading="lazy"
                                >

                                <div class="vpm-admin-trade-card__details">
                                    <div class="vpm-admin-trade-card__meta">
                                        <p class="vpm-admin-trade-card__line">{{ $trade->adminSummaryLine() }}</p>
                                        <p class="vpm-admin-trade-card__party">{{ $trade->displayPartyName() }}</p>
                                    </div>
                                    <p class="vpm-admin-trade-card__pnl {{ $trade->adminPnlClass() }}">
                                        {{ $trade->formattedDollarPnl() }}
                                    </p>
                                </div>
                            </div>

                            <div class="vpm-admin-trade-card__actions">
                                <x-vpm.button
                                    variant="primary"
                                    type="button"
                                    class="vpm-admin-trade-card__action"
                                    data-vpm-dialog-open="update-trade-dialog-{{ $trade->id }}"
                                >
                                    Update trade
                                </x-vpm.button>
                                <x-vpm.button
                                    variant="primary"
                                    type="button"
                                    class="vpm-admin-trade-card__action"
                                    data-vpm-dialog-open="close-trade-dialog-{{ $trade->id }}"
                                >
                                    Close trade
                                </x-vpm.button>
                            </div>
                        </div>
                    </article>
                </li>
            @endforeach
        </ul>
    @endif
</div>

<x-vpm.admin-open-trade-dialog
    :clients="$clients"
    :copy-traders="$copyTraders"
    :asset-catalog="$assetCatalog"
    :selected-user-id="$selectedUserId"
/>

@foreach ($trades as $trade)
    <x-vpm.admin-update-trade-dialog :trade="$trade" />
    <x-vpm.admin-close-trade-dialog :trade="$trade" />
@endforeach

@if (old('_trade') === 'open' && $errors->any())
    @push('scripts')
        <script>document.body.dataset.vpmReopenDialog = 'open-trade-dialog';</script>
    @endpush
@elseif (old('_trade'))
    @push('scripts')
        <script>
            document.body.setAttribute('data-scroll-locked', '1');
            document.getElementById('update-trade-dialog-{{ old('_trade') }}')?.showModal();
        </script>
    @endpush
@elseif (old('_trade_close'))
    @push('scripts')
        <script>
            document.body.setAttribute('data-scroll-locked', '1');
            document.getElementById('close-trade-dialog-{{ old('_trade_close') }}')?.showModal();
        </script>
    @endpush
@elseif ($selectedUserId)
    @push('scripts')
        <script>document.body.dataset.vpmReopenDialog = 'open-trade-dialog';</script>
    @endpush
@endif
@endsection