@php
    $grid = $this->activityGrid;
    $activeDays = collect($grid)->where('bytes', '>', 0)->count();
    $gridTotal = collect($grid)->sum('bytes');
    $gridPeak = max(1, collect($grid)->max('bytes'));
@endphp

<div class="row g-3">
    <div class="col-12 col-lg-6">
        {{-- Lifecycle: the story of the account in the order it happened. --}}
        <div class="sub-panel">
            <div class="sub-panel__head">
                <div>
                    <h6><i class="bi bi-clock-history me-1"></i>{{ __('Subscription lifecycle') }}</h6>
                    <p>{{ __('Account events from signup to now') }}</p>
                </div>
            </div>
            <div class="sub-panel__body">
                <ul class="sub-timeline">
                    @if ($stats['first_seen'])
                        <li>
                            <span class="dot"></span>
                            <div>
                                <strong>{{ __('Account created') }}</strong>
                                <span class="d-block text-secondary" style="font-size:0.74rem;">
                                    {{ __('Joined via :router', ['router' => $this->sessions->last()?->router?->router_name ?: __('the portal')]) }}
                                </span>
                            </div>
                            <span class="when">{{ $stats['first_seen']->format('M j, Y, g:i A') }}</span>
                        </li>
                    @endif

                    @php $firstPaid = $this->sessions->where('amount', '>', 0)->last(); @endphp
                    @if ($firstPaid)
                        <li>
                            <span class="dot"></span>
                            <div>
                                <strong>{{ __('First payment') }}</strong>
                                <span class="d-block text-secondary" style="font-size:0.74rem;">
                                    {{ __('Subscription activated') }} · {{ money($firstPaid->amount, 0) }}
                                </span>
                            </div>
                            <span class="when">{{ $firstPaid->created_at->format('M j, Y, g:i A') }}</span>
                        </li>
                    @endif

                    @php $firstConn = $this->connections->last(); @endphp
                    @if ($firstConn?->started_at)
                        <li>
                            <span class="dot"></span>
                            <div>
                                <strong>{{ __('First session') }}</strong>
                                <span class="d-block text-secondary" style="font-size:0.74rem;">
                                    {{ __('Connected to the network') }}
                                </span>
                            </div>
                            <span class="when">{{ $firstConn->started_at->format('M j, Y, g:i A') }}</span>
                        </li>
                    @endif

                    @if ($stats['last_seen'])
                        <li>
                            <span class="dot {{ $stats['is_live'] ? 'is-now' : '' }}"></span>
                            <div>
                                <strong>{{ $stats['is_live'] ? __('Online now') : __('Last session') }}</strong>
                                <span class="d-block text-secondary" style="font-size:0.74rem;">
                                    {{ $stats['is_live']
                                        ? __('Live · :for', ['for' => $stats['live_since']?->diffForHumans(null, true, true)])
                                        : __('Most recent connection') }}
                                </span>
                            </div>
                            <span class="when">{{ $stats['last_seen']->format('M j, Y, g:i A') }}</span>
                        </li>
                    @endif

                    @if (! $stats['first_seen'] && ! $stats['last_seen'])
                        <li><span class="dot"></span><div>{{ __('Nothing recorded yet.') }}</div></li>
                    @endif
                </ul>
            </div>
        </div>

        {{-- A year of activity at a glance. Each square is a day. --}}
        <div class="sub-panel">
            <div class="sub-panel__head">
                <div>
                    <h6><i class="bi bi-calendar3 me-1"></i>{{ __('Activity · last 365 days') }}</h6>
                    <p>{{ __(':days active days · :bytes total transferred', [
                        'days' => $activeDays, 'bytes' => bytes_human($gridTotal),
                    ]) }}</p>
                </div>
                <div class="sub-legend">
                    {{ __('Less') }}
                    @foreach ([0.08, 0.28, 0.55, 1] as $step)
                        <i style="background: rgba(33,208,122,{{ $step }});"></i>
                    @endforeach
                    {{ __('More') }}
                </div>
            </div>
            <div class="sub-panel__body">
                <div class="sub-heat">
                    @foreach ($grid as $day)
                        @php
                            // Square root keeps one heavy day from flattening
                            // the rest of the year into invisibility.
                            $weight = $day['bytes'] > 0
                                ? max(0.12, sqrt($day['bytes'] / $gridPeak))
                                : 0;
                        @endphp
                        <i @if ($weight > 0) style="background: rgba(33,208,122,{{ round($weight, 2) }});" @endif
                            title="{{ $day['date'] }} — {{ bytes_human($day['bytes']) }}"></i>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <div class="col-12 col-lg-6">
        {{-- Everything an operator reads out over the phone. --}}
        <div class="sub-panel">
            <div class="sub-panel__head">
                <div><h6><i class="bi bi-hdd-network me-1"></i>{{ __('Device & network') }}</h6></div>
                @if ($this->devices->first())
                    <span class="sub-mono text-secondary">{{ $this->devices->first()->mac }}</span>
                @endif
            </div>
            <div class="sub-panel__body">
                <dl class="sub-facts">
                    <div>
                        <dt><i class="bi bi-router"></i>{{ __('Router') }}</dt>
                        <dd>{{ $current?->router?->router_name ?: '—' }}</dd>
                    </div>
                    <div>
                        <dt><i class="bi bi-globe"></i>{{ __('IP address') }}</dt>
                        <dd>{{ $live?->ip_address ?: ($this->devices->first()->ip ?? '—') }}</dd>
                    </div>
                    <div>
                        <dt><i class="bi bi-upc"></i>{{ __('MAC') }}</dt>
                        <dd>{{ $this->devices->first()->mac ?? ($current?->mac_address ?: '—') }}</dd>
                    </div>
                    <div>
                        <dt><i class="bi bi-wifi"></i>{{ __('Type') }}</dt>
                        <dd>{{ __('Hotspot') }}</dd>
                    </div>
                    <div>
                        <dt><i class="bi bi-person"></i>{{ __('Username') }}</dt>
                        <dd>{{ $current?->username ?: '—' }}</dd>
                    </div>
                    <div>
                        <dt><i class="bi bi-key"></i>{{ __('Password') }}</dt>
                        <dd x-data="{ show: false }">
                            <span x-show="!show">••••</span>
                            <span x-show="show" x-cloak>{{ $current?->password ?: '—' }}</span>
                            <button type="button" class="btn btn-sm p-0 ms-2 border-0 text-secondary"
                                @click="show = !show" style="font-size:0.75rem;">
                                <i class="bi" :class="show ? 'bi-eye-slash' : 'bi-eye'"></i>
                            </button>
                        </dd>
                    </div>
                </dl>
            </div>
        </div>

        {{-- The last couple of things we said to them. --}}
        <div class="sub-panel">
            <div class="sub-panel__head">
                <div><h6><i class="bi bi-chat-dots me-1"></i>{{ __('Communications') }}</h6></div>
                <button type="button" class="btn btn-sm btn-link p-0" wire:click="setTab('sms')">
                    {{ __('View all') }}
                </button>
            </div>
            <div class="sub-panel__body">
                @forelse ($this->messages->take(2) as $m)
                    <div class="sub-msg">
                        <div class="sub-msg__meta">
                            <span class="{{ $m->status === 'sent' ? 'sub-down' : 'text-danger' }}">
                                <i class="bi bi-{{ $m->status === 'sent' ? 'check2' : 'x' }}"></i>
                                {{ $m->status === 'sent' ? __('Sent') : __('Failed') }}
                            </span>
                            <span>{{ $m->created_at->format('h:i A') }}</span>
                        </div>
                        <p class="sub-msg__body">{{ $m->body }}</p>
                    </div>
                @empty
                    <div class="sub-empty">
                        <i class="bi bi-chat-square"></i>{{ __('Nothing sent yet.') }}
                    </div>
                @endforelse
            </div>
        </div>

        <div class="sub-panel">
            <div class="sub-panel__head">
                <div><h6><i class="bi bi-bookmark me-1"></i>{{ __('Reference') }}</h6></div>
            </div>
            <div class="sub-panel__body">
                <dl class="sub-facts">
                    <div>
                        <dt>{{ __('Account ID') }}</dt>
                        <dd>#{{ $current?->id }}</dd>
                    </div>
                    <div>
                        <dt>{{ __('Phone') }}</dt>
                        <dd>{{ $current?->phone ?: '—' }}</dd>
                    </div>
                    <div>
                        <dt>{{ __('Acquired via') }}</dt>
                        <dd>{{ ucfirst($current?->source ?: 'portal') }}</dd>
                    </div>
                </dl>
            </div>
        </div>
    </div>
</div>