@extends('layouts.vpm-mobile-app', ['active' => 'home'])

@section('title', 'Dashboard')

@section('content')
<div class="vpm-user-dashboard">
    <div class="vpm-user-dashboard__grid">
        <div class="vpm-user-dashboard__balance">
            <div class="vpm-balance-card vpm-balance-card--ref">
                <div class="vpm-balance-card__inner">
                    <div class="vpm-balance-card__top">
                        <p class="vpm-balance-card__label vpm-balance-card__label--total">Total balance</p>
                        <h2 class="vpm-balance-card__amount vpm-balance-card__amount--total">{{ $totalBalanceFormatted }}</h2>
                        <p class="vpm-balance-card__label">Available balance</p>
                        <p class="vpm-balance-card__amount vpm-balance-card__amount--available">{{ $balanceFormatted }}</p>
                        @if ($lockedMarginFormatted)
                            <p class="vpm-balance-card__locked">{{ $lockedMarginFormatted }} in open trades</p>
                        @endif
                    </div>
                    <div class="vpm-balance-card__stats">
                        <div class="vpm-balance-card__signal">
                            <div class="vpm-progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{ (int) round($signalStrength) }}">
                                <div class="vpm-progress__track">
                                    <div class="vpm-progress__fill" style="width: {{ min(100, max(0, $signalStrength)) }}%;"></div>
                                </div>
                            </div>
                            <p class="vpm-balance-card__signal-label">SIGNAL STRENGTH</p>
                        </div>
                        <div class="vpm-balance-card__signal">
                            <div class="vpm-progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{ (int) round($tradeTarget) }}">
                                <div class="vpm-progress__track">
                                    <div class="vpm-progress__fill" style="width: {{ min(100, max(0, $tradeTarget)) }}%;"></div>
                                </div>
                            </div>
                            <p class="vpm-balance-card__signal-label">TRADE TARGET</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="vpm-user-dashboard__actions">
            <a href="{{ route('app.fund') }}" class="vpm-user-dashboard__btn">ADD FUNDS</a>
            <a href="{{ route('app.copy-trading') }}" class="vpm-user-dashboard__btn">MY TRADERS ({{ $copyTraderCount }})</a>
        </div>

        <div class="vpm-user-dashboard__right">
            <div class="vpm-trades-panel" data-vpm-trade-tabs>
                <div class="vpm-trades-panel__tabs" role="tablist">
                    <button type="button" role="tab" class="vpm-trades-panel__tab vpm-trades-panel__tab--active" data-vpm-trade-tab="open" aria-selected="true">
                        <span class="material-icons" aria-hidden="true">hourglass_top</span>
                        Open
                    </button>
                    <button type="button" role="tab" class="vpm-trades-panel__tab" data-vpm-trade-tab="closed" aria-selected="false">
                        <span class="material-icons" aria-hidden="true">hourglass_full</span>
                        Closed
                    </button>
                </div>

                <div class="vpm-trades-panel__scroll">
                    <div class="vpm-trades-panel__panel vpm-trades-panel__panel--cards" data-vpm-trade-panel="open">
                        @forelse ($openTrades as $item)
                            @include('partials.vpm.user-trade-card', ['item' => $item])
                        @empty
                            <p class="vpm-trades-panel__empty">NO OPEN TRADES</p>
                        @endforelse
                    </div>

                    <div class="vpm-trades-panel__panel vpm-trades-panel__panel--cards" data-vpm-trade-panel="closed" hidden>
                        @forelse ($closedTrades as $item)
                            @include('partials.vpm.user-trade-card', ['item' => $item])
                        @empty
                            <p class="vpm-trades-panel__empty">NO CLOSED TRADES</p>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>

        <div class="vpm-user-dashboard__widgets">
            @foreach ($tvWidgets as $widget)
                @php($widgetSymbol = explode('/', $widget['pair'])[0])
                <a href="{{ \App\Support\MarketsCatalog::tradingRoomUrl('crypto', $widgetSymbol) }}" class="vpm-tv-widget-link">
                    @include('partials.vpm.tradingview-mini-widget', ['symbol' => $widget['symbol']])
                </a>
            @endforeach
        </div>
    </div>

    @if ($kycBlocksTrading)
        @include('partials.vpm.kyc-alert', ['kycBlocksTrading' => true, 'kycMessage' => $kycMessage])
    @endif
</div>
@endsection