@php
    $secret = $this->secret;
    $package = $this->package;
    $live = $this->live;
    $stats = $this->stats;
    $billing = $this->billing;
    $dueDate = $billing?->auto_disable_date ? \Carbon\Carbon::parse($billing->auto_disable_date) : null;

    $label = $customer->customer_name ?: ($secret?->username ?: $customer->customer_unique_id);
    $initials = strtoupper(mb_substr(preg_replace('/[^A-Za-z0-9]/', '', $label) ?: '?', 0, 2));
    $hue = crc32($customer->customer_unique_id) % 360;

    $counts = [
        'bills' => $this->bills->count(),
        'sms' => $this->smsLog->count(),
        'tickets' => $this->tickets->count(),
        'notes' => $this->notes->count(),
    ];
@endphp

<div class="sub">
    {{-- ── Header ─────────────────────────────────────────────────── --}}
    <div class="sub-top">
        <div>
            <div class="subs-crumb">
                <a href="{{ route('subscribers.index') }}" wire:navigate
                    class="text-reset text-decoration-none">{{ __('Subscribers') }}</a>
                <span>—</span> #{{ $customer->id }}
            </div>

            <div class="sub-identity">
                <span class="sub-avatar" style="background: hsl({{ $hue }} 62% 46%);">{{ $initials }}</span>
                <div>
                    <div class="sub-badges">
                        <span class="sub-badge">&#64;{{ $secret?->username ?: __('no login') }}</span>

                        {{-- Three states, not two. A router we cannot reach is
                             not the same as a customer who is offline, and
                             saying "offline" would send an operator chasing a
                             subscriber whose line is probably fine. --}}
                        @if ($live === null)
                            <span class="sub-badge" style="color:#8b949e;">
                                <i class="bi bi-question-circle"></i>{{ __('Router unreachable') }}
                            </span>
                        @elseif ($live['online'])
                            <span class="sub-badge sub-badge--live">
                                <i class="bi bi-broadcast"></i>{{ __('Online') }}
                                @if ($live['uptime']) · {{ $live['uptime'] }} @endif
                            </span>
                        @else
                            <span class="sub-badge" style="color:#8b949e;">{{ __('Offline') }}</span>
                        @endif

                        @if ($customer->status !== 'active')
                            <span class="sub-badge" style="color:#f5a524;">{{ __('Suspended') }}</span>
                        @endif

                        @if ($secret?->router_name)
                            <span class="sub-badge">{{ $secret->router_name }}</span>
                        @endif

                        <span class="sub-badge"><i class="bi bi-ethernet"></i>{{ __('PPPoE') }}</span>

                        @if ($package)
                            <span class="sub-badge">
                                <i class="bi bi-box2"></i>{{ $package->package }}
                                @if ($package->mikrotik_rate_limit)
                                    <em style="font-style:normal;opacity:.7">{{ $package->mikrotik_rate_limit }}</em>
                                @endif
                            </span>
                        @endif
                    </div>

                    <div class="sub-meta">
                        @if ($customer->mobile)
                            <span><i class="bi bi-telephone"></i>{{ $customer->mobile }}</span>
                        @endif
                        @if ($customer->email)
                            <span><i class="bi bi-envelope"></i>{{ $customer->email }}</span>
                        @endif
                        <span><i class="bi bi-hash"></i>{{ $customer->customer_unique_id }}</span>
                        <span>
                            <i class="bi bi-calendar3"></i>{{ __('Member since') }}
                            {{ optional($customer->created_at)->format('M j, Y') }}
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <div class="subs-head__actions">
            <button type="button" class="subs-btn" wire:click="$toggle('showSms')"
                @disabled(! $customer->mobile)>
                <i class="bi bi-chat-dots"></i>{{ __('SMS') }}
            </button>

            <button type="button" class="subs-btn" wire:click="openEdit">
                <i class="bi bi-pencil"></i>{{ __('Edit') }}
            </button>

            {{-- A fixed line has no session to extend; what it has is the day an
                 unpaid subscriber gets cut off. That is the equivalent control,
                 so it carries the equivalent name. --}}
            <button type="button" class="subs-btn subs-btn--primary" wire:click="$set('showDue', true)"
                @disabled(! $billing)>
                <i class="bi bi-calendar-event"></i>{{ __('Change cut-off') }}
            </button>

            <button type="button" class="subs-btn" wire:click="disconnect"
                wire:confirm="{{ __('Drop their current session? They can reconnect straight away.') }}">
                <i class="bi bi-plug"></i>{{ __('Disconnect') }}
            </button>

            <button type="button" class="subs-btn {{ $customer->status === 'active' ? '' : 'subs-btn--primary' }}"
                wire:click="toggleStatus"
                wire:confirm="{{ $customer->status === 'active'
                    ? __('Suspend this line? They will not be able to connect.')
                    : __('Enable this line?') }}">
                <i class="bi bi-power"></i>{{ $customer->status === 'active' ? __('Suspend') : __('Enable') }}
            </button>
        </div>
    </div>

    @if ($flash)
        <div class="plans-flash {{ $flashOk ? '' : 'is-bad' }}">
            <i class="bi {{ $flashOk ? 'bi-check-circle' : 'bi-exclamation-triangle' }}"></i>
            <span>{{ $flash }}</span>
            <button type="button" wire:click="$set('flash','')" aria-label="{{ __('Dismiss') }}">&times;</button>
        </div>
    @endif

    {{-- ── Summary ────────────────────────────────────────────────── --}}
    <div class="sub-cards">
        <div class="sub-card">
            <span class="sub-card__label">{{ __('Monthly') }}</span>
            <span class="sub-card__value">{{ __('Ksh') }} {{ number_format((float) ($package->price ?? 0)) }}</span>
            <span class="sub-card__sub">{{ $package?->package ?: __('no package') }}</span>
        </div>
        <div class="sub-card">
            <span class="sub-card__label">{{ __('Billed') }}</span>
            <span class="sub-card__value">{{ __('Ksh') }} {{ number_format($stats['billed']) }}</span>
            <span class="sub-card__sub">{{ trans_choice('{0}no bills yet|{1}:count bill|[2,*]:count bills', $stats['bills'], ['count' => $stats['bills']]) }}</span>
        </div>
        <div class="sub-card">
            <span class="sub-card__label">{{ __('Cut-off') }}</span>
            <span class="sub-card__value" @style(['color:#e5484d' => $dueDate && $dueDate->isPast()])>
                {{ $dueDate ? $dueDate->format('j M Y') : '—' }}
            </span>
            <span class="sub-card__sub">
                @if (! $billing)
                    {{ __('no billing record') }}
                @elseif (! $billing->auto_disable)
                    {{ __('auto cut-off is off') }}
                @elseif ($dueDate && $dueDate->isPast())
                    {{ __('overdue') }}
                @elseif ($dueDate)
                    {{ __('in :days days', ['days' => (int) now()->diffInDays($dueDate)]) }}
                @endif
            </span>
        </div>
        <div class="sub-card">
            <span class="sub-card__label">{{ __('Outstanding') }}</span>
            <span class="sub-card__value" @style(['color:#e5484d' => $stats['due'] > 0])>
                {{ __('Ksh') }} {{ number_format($stats['due']) }}
            </span>
            <span class="sub-card__sub">{{ $stats['due'] > 0 ? __('owed now') : __('nothing owed') }}</span>
        </div>
    </div>

    @unless ($billing)
        {{-- Loud, because it is silent everywhere else: the monthly job selects
             on the billing row, so this subscriber is never billed, never
             reminded, and never cut off. --}}
        <div class="plans-flash is-bad">
            <i class="bi bi-exclamation-triangle"></i>
            <span>{{ __('No billing record — this subscriber will never be billed, reminded or cut off.') }}</span>
        </div>
    @endunless

    {{-- ── Tabs ───────────────────────────────────────────────────── --}}
    <div class="sub-tabs">
        @foreach ([
            'overview' => [__('Overview'), null],
            'connection' => [__('Connection'), null],
            'bills' => [__('Bills'), $counts['bills']],
            'sms' => [__('SMS'), $counts['sms']],
            'tickets' => [__('Tickets'), $counts['tickets']],
            'notes' => [__('Notes'), $counts['notes']],
        ] as $key => [$name, $count])
            <button type="button" class="sub-tab {{ $tab === $key ? 'is-active' : '' }}"
                wire:click="$set('tab','{{ $key }}')">
                {{ $name }}
                @if ($count !== null)<span>{{ $count }}</span>@endif
            </button>
        @endforeach
    </div>

    <div class="sub-panel">
        {{-- ---------- Overview ---------- --}}
        @if ($tab === 'overview')
            <div class="sub-facts">
                <div><dt>{{ __('Name') }}</dt><dd>{{ $customer->customer_name ?: '—' }}</dd></div>
                <div><dt>{{ __('Account number') }}</dt><dd>{{ $customer->customer_unique_id }}</dd></div>
                <div><dt>{{ __('Phone') }}</dt><dd>{{ $customer->mobile ?: '—' }}</dd></div>
                <div><dt>{{ __('Email') }}</dt><dd>{{ $customer->email ?: '—' }}</dd></div>
                <div><dt>{{ __('Address') }}</dt><dd>{{ $customer->address ?: '—' }}</dd></div>
                <div><dt>{{ __('Status') }}</dt><dd>{{ ucfirst($customer->status) }}</dd></div>
                <div><dt>{{ __('Connected since') }}</dt>
                    <dd>{{ optional($customer->connection_date)->format('j M Y') ?: '—' }}</dd></div>
                <div><dt>{{ __('Package') }}</dt><dd>{{ $package?->package ?: '—' }}</dd></div>
                <div><dt>{{ __('Speed') }}</dt><dd>{{ $package?->mikrotik_rate_limit ?: '—' }}</dd></div>
            </div>

        {{-- ---------- Connection ---------- --}}
        @elseif ($tab === 'connection')
            @if (! $secret)
                {{-- Says what is wrong and what it costs, because a customer
                     with no secret cannot connect at all however healthy the
                     rest of the record looks. --}}
                <p class="sub-empty">
                    {{ __('This subscriber has no PPPoE login on file, so they cannot connect. Edit them to create one.') }}
                </p>
            @else
                <div class="sub-facts">
                    <div><dt>{{ __('Username') }}</dt><dd>{{ $secret->username }}</dd></div>
                    <div><dt>{{ __('Password') }}</dt><dd>{{ $secret->password ?: '—' }}</dd></div>
                    <div><dt>{{ __('Service') }}</dt><dd>{{ $secret->service ?: '—' }}</dd></div>
                    <div><dt>{{ __('Profile') }}</dt><dd>{{ $secret->profile ?: '—' }}</dd></div>
                    <div><dt>{{ __('Router') }}</dt><dd>{{ $secret->router_name ?: '—' }}</dd></div>
                    <div><dt>{{ __('Assigned IP') }}</dt><dd>{{ $live['address'] ?? ($secret->ppp_remote_ip ?: '—') }}</dd></div>
                    <div><dt>{{ __('Session uptime') }}</dt><dd>{{ $live['uptime'] ?? '—' }}</dd></div>
                    <div><dt>{{ __('Caller ID') }}</dt>
                        <dd>{{ $live['caller'] ?? ($secret->last_caller_id ?: '—') }}</dd></div>
                    <div><dt>{{ __('Last logged out') }}</dt>
                        <dd>{{ optional($secret->last_logged_out)->diffForHumans() ?: '—' }}</dd></div>
                    <div><dt>{{ __('Last disconnect reason') }}</dt>
                        <dd>{{ $secret->last_disconnect_reason ?: '—' }}</dd></div>
                </div>

                @if ($live === null)
                    <p class="sub-empty" style="margin-top:1rem">
                        {{ __('The router could not be reached, so the live figures above may be out of date.') }}
                    </p>
                @endif
            @endif

        {{-- ---------- Bills ---------- --}}
        @elseif ($tab === 'bills')
            <div class="d-flex justify-content-between align-items-center mb-3">
                <span class="sub-card__sub">
                    @if ($billing)
                        {{ __('Monthly') }} {{ __('Ksh') }} {{ number_format((float) $billing->monthly_rent) }}
                        &middot; {{ __('owing') }} {{ __('Ksh') }} {{ number_format((float) $billing->due_amount) }}
                    @endif
                </span>
                <button type="button" class="subs-btn subs-btn--primary"
                    wire:click="$set('showPayment', true)" @disabled(! $billing)>
                    <i class="bi bi-cash-coin"></i>{{ __('Record payment') }}
                </button>
            </div>

            @if ($this->bills->isEmpty())
                <p class="sub-empty">{{ __('No bills have been raised for this subscriber yet. The first one is created at the end of the month.') }}</p>
            @else
                <div style="overflow-x:auto;">
                    <table class="sub-table" style="min-width:560px;">
                        <thead>
                            <tr>
                                <th>{{ __('Raised') }}</th>
                                <th>{{ __('Paid on') }}</th>
                                <th class="text-end">{{ __('Total') }}</th>
                                <th class="text-end">{{ __('Paid') }}</th>
                                <th class="text-end">{{ __('Due') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($this->bills as $bill)
                                <tr>
                                    <td>{{ optional($bill->created_at)->format('M j, Y') ?: '—' }}</td>
                                    <td>{{ optional($bill->paid_date)->format('M j, Y') ?: __('unpaid') }}</td>
                                    <td class="text-end fw-semibold">{{ number_format((float) $bill->total_amount) }}</td>
                                    <td class="text-end">{{ number_format((float) $bill->paid_amount) }}</td>
                                    <td class="text-end" @style(['color:#e5484d' => (float) $bill->due_amount > 0])>
                                        {{ number_format((float) $bill->due_amount) }}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif

        {{-- ---------- SMS ---------- --}}
        @elseif ($tab === 'sms')
            @if ($this->smsLog->isEmpty())
                <p class="sub-empty">{{ __('No messages sent to this subscriber yet.') }}</p>
            @else
                <div style="overflow-x:auto;">
                    <table class="sub-table" style="min-width:560px;">
                        <thead>
                            <tr>
                                <th>{{ __('Sent') }}</th>
                                <th>{{ __('Message') }}</th>
                                <th>{{ __('Kind') }}</th>
                                <th>{{ __('Status') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($this->smsLog as $sms)
                                <tr>
                                    <td>{{ $sms->created_at?->format('M j, Y, H:i') }}</td>
                                    <td>{{ Str::limit($sms->body, 80) }}</td>
                                    <td>{{ $sms->kind }}</td>
                                    <td @style(['color:#e5484d' => $sms->status !== 'sent'])>{{ $sms->status }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif

        {{-- ---------- Tickets ---------- --}}
        @elseif ($tab === 'tickets')
            @if ($this->tickets->isEmpty())
                <p class="sub-empty">{{ __('No support tickets from this subscriber.') }}</p>
            @else
                <div style="overflow-x:auto;">
                    <table class="sub-table" style="min-width:560px;">
                        <thead>
                            <tr>
                                <th>{{ __('Raised') }}</th>
                                <th>{{ __('Ref') }}</th>
                                <th>{{ __('Subject') }}</th>
                                <th>{{ __('Priority') }}</th>
                                <th>{{ __('Status') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($this->tickets as $ticket)
                                <tr>
                                    <td>{{ $ticket->created_at?->format('M j, Y') }}</td>
                                    <td>#{{ $ticket->ticket_no }}</td>
                                    <td class="fw-semibold">{{ $ticket->subject }}</td>
                                    <td>{{ ucfirst((string) $ticket->priority) }}</td>
                                    <td>{{ ucfirst((string) $ticket->status) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif

        {{-- ---------- Notes ---------- --}}
        @elseif ($tab === 'notes')
            @if ($this->notes->isEmpty())
                <p class="sub-empty">{{ __('Nothing noted about this subscriber.') }}</p>
            @else
                <div style="overflow-x:auto;">
                    <table class="sub-table" style="min-width:480px;">
                        <thead>
                            <tr>
                                <th>{{ __('When') }}</th>
                                <th>{{ __('Note') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($this->notes as $note)
                                <tr>
                                    <td>{{ $note->created_at?->format('M j, Y, H:i') }}</td>
                                    <td>{{ $note->body }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        @endif
    </div>

    {{-- ── Edit ───────────────────────────────────────────────────── --}}
    @if ($showEdit)
        <div class="plans-scrim" wire:click.self="$set('showEdit', false)">
            <div class="plans-dialog" style="max-width:32rem">
                <h6>{{ __('Edit :name', ['name' => $label]) }}</h6>
                <div class="pform-grid" style="margin-top:.9rem">
                    <div class="pform-field">
                        <label class="pform-label">{{ __('Name') }}</label>
                        <input type="text" class="form-control form-control-sm" wire:model="editName">
                        <x-input-error for="editName" />
                    </div>
                    <div class="pform-field">
                        <label class="pform-label">{{ __('Phone') }}</label>
                        <input type="text" class="form-control form-control-sm" wire:model="editPhone">
                        <x-input-error for="editPhone" />
                    </div>
                    <div class="pform-field">
                        <label class="pform-label">{{ __('Email') }}</label>
                        <input type="email" class="form-control form-control-sm" wire:model="editEmail">
                        <x-input-error for="editEmail" />
                    </div>
                    <div class="pform-field">
                        <label class="pform-label">{{ __('PPPoE password') }}</label>
                        <input type="text" class="form-control form-control-sm" wire:model="editPassword">
                        <x-input-error for="editPassword" />
                    </div>
                    <div class="pform-field pform-field--full">
                        <label class="pform-label">{{ __('Address') }}</label>
                        <input type="text" class="form-control form-control-sm" wire:model="editAddress">
                        <x-input-error for="editAddress" />
                    </div>
                    <div class="pform-field pform-field--full">
                        <label class="pform-label">{{ __('Plan') }}</label>
                        <select class="form-select form-select-sm" wire:model="editPackageId">
                            @foreach ($this->pppoePackages as $p)
                                <option value="{{ $p->id }}">
                                    {{ $p->package }} · {{ __('Ksh') }} {{ number_format((float) $p->price) }}
                                    · {{ $p->mikrotik_rate_limit }}
                                </option>
                            @endforeach
                        </select>
                        <span class="pform-hint">
                            {{ __('Changing the plan updates the speed on the router and the monthly charge.') }}
                        </span>
                    </div>
                </div>
                <div class="plans-dialog__foot">
                    <button type="button" class="btn btn-sm btn-secondary"
                        wire:click="$set('showEdit', false)">{{ __('Cancel') }}</button>
                    <button type="button" class="btn btn-sm btn-primary" wire:click="saveEdit"
                        wire:loading.attr="disabled" wire:target="saveEdit">{{ __('Save') }}</button>
                </div>
            </div>
        </div>
    @endif

    {{-- ── Change cut-off ─────────────────────────────────────────── --}}
    @if ($showDue)
        <div class="plans-scrim" wire:click.self="$set('showDue', false)">
            <div class="plans-dialog">
                <h6>{{ __('Change cut-off date') }}</h6>
                <p>{{ __('After this date an unpaid line is disabled by the nightly sweep.') }}</p>
                <input type="date" class="form-control form-control-sm" style="margin-top:.75rem"
                    wire:model="newDueDate">
                <x-input-error for="newDueDate" />
                <div class="plans-dialog__foot">
                    <button type="button" class="btn btn-sm btn-secondary"
                        wire:click="$set('showDue', false)">{{ __('Cancel') }}</button>
                    <button type="button" class="btn btn-sm btn-primary" wire:click="saveDueDate">{{ __('Save') }}</button>
                </div>
            </div>
        </div>
    @endif

    {{-- ── Record payment ─────────────────────────────────────────── --}}
    @if ($showPayment)
        <div class="plans-scrim" wire:click.self="$set('showPayment', false)">
            <div class="plans-dialog">
                <h6>{{ __('Record a payment') }}</h6>
                <p>
                    {{ __('For cash, or an M-Pesa message you matched by hand.') }}
                    @if ($billing)
                        {{ __('Currently owing') }}
                        <b>{{ __('Ksh') }} {{ number_format((float) $billing->due_amount) }}</b>.
                    @endif
                </p>
                <div class="input-group input-group-sm" style="margin-top:.75rem">
                    <span class="input-group-text">{{ __('Ksh') }}</span>
                    <input type="number" min="1" class="form-control" wire:model="paymentAmount"
                        placeholder="{{ (int) ($billing->due_amount ?? 0) }}">
                </div>
                <x-input-error for="paymentAmount" />
                <div class="plans-dialog__foot">
                    <button type="button" class="btn btn-sm btn-secondary"
                        wire:click="$set('showPayment', false)">{{ __('Cancel') }}</button>
                    <button type="button" class="btn btn-sm btn-primary" wire:click="recordPayment">{{ __('Record') }}</button>
                </div>
            </div>
        </div>
    @endif

    {{-- ── SMS composer ───────────────────────────────────────────── --}}
    @if ($showSms)
        <div class="plans-scrim" wire:click.self="$set('showSms', false)">
            <div class="plans-dialog">
                <h6>{{ __('Message :name', ['name' => $label]) }}</h6>
                <p style="margin-bottom:.75rem">{{ $customer->mobile }}</p>
                <textarea class="form-control form-control-sm" rows="4" wire:model="smsBody"
                    placeholder="{{ __('Type your message…') }}"></textarea>
                <div class="plans-dialog__foot">
                    <button type="button" class="btn btn-sm btn-secondary"
                        wire:click="$set('showSms', false)">{{ __('Cancel') }}</button>
                    <button type="button" class="btn btn-sm btn-primary" wire:click="sendSms"
                        wire:loading.attr="disabled" wire:target="sendSms">{{ __('Send') }}</button>
                </div>
            </div>
        </div>
    @endif
</div>