@extends('layouts.app')
@section('title', $service->service_number)

@section('content')
    <div class="page-head">
        <div>
            <h1>{{ $service->service_number }}</h1>
            <p>
                <a href="{{ route('customers.show', $service->customer) }}">{{ $service->customer->display_name }}</a>
                &middot; <span class="badge {{ status_color($service->status) }}"><span class="dot"></span>{{ $service->status }}</span>
                &middot; {{ $service->plan?->name }}
                @if ($service->is_online)
                    &middot; <span class="badge success"><span class="dot"></span>online</span>
                @endif
            </p>
        </div>
        <div class="page-actions">
            @if ($service->status === 'pending' || $service->status === 'provisioning')
                <button type="button" class="btn success" data-modal="activate-modal">Activate service</button>
            @endif
            @if ($service->status === 'active' || $service->status === 'grace')
                <button type="button" class="btn warning" data-modal="suspend-modal">Suspend</button>
            @endif
            @if ($service->status === 'suspended')
                <form method="POST" action="{{ route('services.reconnect', $service) }}">
                    @csrf
                    <button type="submit" class="btn success">Reconnect</button>
                </form>
            @endif
            @if ($service->is_online)
                <form method="POST" action="{{ route('services.disconnect', $service) }}"
                      data-confirm="Send a RADIUS Disconnect-Request and drop the live session?">
                    @csrf
                    <button type="submit" class="btn danger">Force offline</button>
                </form>
            @endif
            <button type="button" class="btn" data-modal="plan-modal">Change plan</button>
        </div>
    </div>

    <div class="grid grid-6 mb-2">
        @include('components.kpi', ['label' => 'Monthly charge', 'value' => money($service->effective_price, $service->customer->currency),
            'variant' => 'good', 'href' => '#billing'])
        @include('components.kpi', ['label' => 'Outstanding', 'value' => money($service->outstanding, $service->customer->currency),
            'variant' => $service->outstanding > 0 ? 'bad' : 'good', 'href' => '#billing'])
        @include('components.kpi', ['label' => 'Next billing', 'value' => $service->next_billing_date?->format('d M Y') ?? '—', 'href' => '#billing'])
        @include('components.kpi', ['label' => 'Session uptime', 'value' => $service->currentSession?->duration_label ?? '—',
            'variant' => $service->is_online ? 'good' : '', 'href' => '#sessions'])
        @include('components.kpi', ['label' => 'Data this period', 'value' => human_bytes($usage['total_bytes']),
            'variant' => 'info', 'href' => '#usage'])
        @include('components.kpi', ['label' => 'Quota used', 'value' => $service->quota_used_percent !== null ? percent($service->quota_used_percent) : 'Unlimited',
            'variant' => ($service->quota_used_percent ?? 0) > 90 ? 'warn' : 'info', 'href' => '#usage'])
    </div>

    @if ($service->provisioning_status !== 'active' && $service->status !== 'cancelled')
        <div class="alert info">
            <span>&#9432;</span>
            <div class="grow">
                <strong>Provisioning state: {{ title_case_words($service->provisioning_status) }}.</strong>
                The RADIUS record is {{ $service->radius_synced ? 'pushed' : 'not yet pushed' }}.
                Activate the service once the technician has signed off the installation.
            </div>
            <button type="button" class="btn sm" data-modal="activate-modal">Activate</button>
        </div>
    @endif

    <div class="tabs" id="svc-tabs">
        <a href="#overview" class="active" data-tab>Overview</a>
        <a href="#sessions" data-tab>Sessions</a>
        <a href="#usage" data-tab>Usage</a>
        <a href="#billing" data-tab>Billing ({{ $invoices->count() }})</a>
        <a href="#radius" data-tab>AAA / RADIUS</a>
        <a href="#history" data-tab>History</a>
    </div>

    {{-- ============ OVERVIEW ============ --}}
    <div id="overview" class="tab-pane">
        <div class="grid grid-2">
            <div class="card">
                <div class="card-head"><h3>Connection details</h3>
                    <span class="sub">{{ title_case_words($service->service_type) }}</span></div>
                <div class="card-body">
                    <dl class="dl">
                        <dt>Plan</dt><dd>{{ $service->plan?->name }}</dd>
                        <dt>Speed profile</dt><dd>{{ $service->speedProfile?->name ?? 'Inherited from plan' }}</dd>
                        <dt>Download / upload</dt>
                        <dd>{{ $service->download_kbps ? round($service->download_kbps/1024).' / '.round($service->upload_kbps/1024).' Mbps' : '—' }}</dd>
                        <dt>Monthly quota</dt>
                        <dd>{{ $service->monthly_quota_gb ? $service->monthly_quota_gb.' GB' : 'Unlimited' }}</dd>
                        <dt>Static IP</dt><dd class="mono">{{ $service->static_ip ?: 'Dynamic' }}</dd>
                        <dt>IP pool</dt><dd>{{ $service->ipPool?->name ?: '—' }}</dd>
                        <dt>MAC address</dt><dd class="mono">{{ $service->mac_address ?: '—' }}</dd>
                        <dt>NAS / BNG</dt><dd class="mono">{{ $service->nas_ip ?: 'Auto-detect' }}</dd>
                        <dt>Priority</dt><dd>{{ $service->speedProfile?->priority ?? 8 }} (1 = highest)</dd>
                    </dl>
                </div>
            </div>

            <div class="card">
                <div class="card-head"><h3>Installation</h3>
                    @if ($service->onu)
                        <span class="badge {{ status_color($service->onu->status) }}">ONU {{ $service->onu->optical_health }}</span>
                    @endif
                </div>
                <div class="card-body">
                    <dl class="dl">
                        <dt>Address</dt><dd>{{ $service->installation_address }}</dd>
                        <dt>City / region</dt><dd>{{ trim(($service->city ?? '').' '.($service->region ?? '')) ?: '—' }}</dd>
                        <dt>Coordinates</dt>
                        <dd class="mono">{{ $service->latitude && $service->longitude ? $service->latitude.', '.$service->longitude : '—' }}</dd>
                        <dt>OLT</dt><dd>{{ $service->olt_name ?: ($service->onu?->pon?->olt?->name ?? '—') }}</dd>
                        <dt>PON port</dt><dd class="mono">{{ $service->pon_port ?: ($service->onu?->pon?->pon_port ?? '—') }}</dd>
                        <dt>Splitter</dt><dd class="mono">{{ $service->splitter ?: '—' }}</dd>
                        <dt>CPE model</dt><dd>{{ $service->cpe_model ?: '—' }}</dd>
                        <dt>CPE serial</dt><dd class="mono">{{ $service->cpe_serial ?: '—' }}</dd>
                        <dt>CPE MAC</dt><dd class="mono">{{ $service->cpe_mac ?: '—' }}</dd>
                        @if ($service->onu)
                            <dt>Rx / Tx power</dt>
                            <dd class="mono">{{ $service->onu->rx_power_dbm }} / {{ $service->onu->tx_power_dbm }} dBm</dd>
                            <dt>Distance</dt><dd>{{ $service->onu->distance_km }} km</dd>
                        @endif
                    </dl>
                </div>
            </div>
        </div>

        <div class="grid grid-2">
            <div class="card">
                <div class="card-head"><h3>Billing calendar</h3></div>
                <div class="card-body">
                    <dl class="dl">
                        <dt>Billing period</dt><dd>{{ title_case_words($service->billing_period) }}</dd>
                        <dt>Billing cycle</dt><dd>{{ title_case_words($service->billing_cycle) }}</dd>
                        <dt>List price</dt><dd>{{ money($service->price, $service->customer->currency) }}</dd>
                        @if ($service->discount_amount > 0)
                            <dt>Discount</dt><dd>&minus;{{ money($service->discount_amount, $service->customer->currency) }}
                                @if ($service->discount_ends_on)<span class="tiny muted">until {{ $service->discount_ends_on->format('d M Y') }}</span>@endif
                            </dd>
                        @endif
                        <dt>Effective price</dt><dd class="strong">{{ money($service->effective_price, $service->customer->currency) }}</dd>
                        <dt>Add-ons</dt><dd>{{ money($service->addons_total, $service->customer->currency) }}/month</dd>
                        <dt>Start date</dt><dd>{{ $service->start_date->format('d M Y') }}</dd>
                        <dt>Next billing</dt><dd>{{ $service->next_billing_date?->format('d M Y') ?: 'Not scheduled' }}</dd>
                        <dt>Payment due</dt><dd>{{ $service->next_due_date?->format('d M Y') ?: '—' }}</dd>
                        <dt>Auto renew</dt><dd>{{ $service->auto_renew ? 'Enabled' : 'Disabled' }}</dd>
                        <dt>Contract</dt>
                        <dd>{{ $service->contract_months ? $service->contract_months.' months — '.title_case_words($service->contract_status) : 'No contract' }}
                            @if ($service->contract_ends_on)<div class="tiny muted">Ends {{ $service->contract_ends_on->format('d M Y') }}</div>@endif
                        </dd>
                        <dt>SLA tier</dt><dd>{{ title_case_words($service->sla_tier) }}</dd>
                    </dl>
                </div>
            </div>

            <div class="card">
                <div class="card-head"><h3>Quick actions</h3></div>
                <div class="card-body">
                    <div class="stat-list mb-2">
                        <div class="row"><span>Service number</span>
                            <span class="mono"><a href="#" data-copy="{{ $service->service_number }}">{{ $service->service_number }}</a></span></div>
                        <div class="row"><span>RADIUS username</span>
                            <span class="mono"><a href="#" data-copy="{{ $service->username }}">{{ $service->username }}</a></span></div>
                        <div class="row"><span>AAA sync</span>
                            <span class="badge {{ $service->radius_synced ? 'success' : 'warning' }}">
                                {{ $service->radius_synced ? 'synced '.($service->radius_synced_at?->diffForHumans() ?? '') : 'not synced' }}
                            </span></div>
                    </div>

                    <div class="btn-group mb-2">
                        <form method="POST" action="{{ route('services.resync-radius', $service) }}">
                            @csrf
                            <button type="submit" class="btn secondary sm">Push AAA to FreeRADIUS</button>
                        </form>
                        <button type="button" class="btn secondary sm" data-modal="password-modal">Reset password</button>
                        <button type="button" class="btn secondary sm" data-modal="speed-modal">Change speed (CoA)</button>
                        <button type="button" class="btn secondary sm" data-modal="invoice-modal">Raise invoice</button>
                    </div>

                    <hr style="border:none;border-top:1px solid var(--ink-200);margin:.75rem 0;">

                    <div class="small muted mb-1"><strong>Active add-ons</strong></div>
                    @forelse ($service->addons as $addon)
                        <div class="flex-between small mb-1">
                            <span>{{ $addon->addon?->name }}</span>
                            <span class="strong">{{ money($addon->price, $service->customer->currency) }}</span>
                        </div>
                    @empty
                        <p class="small muted">No add-ons attached.</p>
                    @endforelse
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-head"><h3>Internal notes</h3></div>
            <div class="card-body">
                <form method="POST" action="{{ route('services.notes', $service) }}" class="mb-2">
                    @csrf
                    <div class="flex gap-1">
                        <input type="text" name="note" class="grow" placeholder="Add a note to the service timeline…" required>
                        <button type="submit" class="btn secondary">Add note</button>
                    </div>
                </form>
                @if ($notes->isNotEmpty())
                    <div class="timeline">
                        @foreach ($notes as $note)
                            <div class="timeline-item {{ $note->type === 'system' ? 'ok' : '' }}">
                                <div class="t-head">{{ $note->user?->name ?? 'System' }}
                                    <span class="badge muted">{{ $note->type }}</span></div>
                                <div class="t-meta">{{ $note->created_at->format('d M Y H:i') }}</div>
                                <div class="t-body">{{ $note->note }}</div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <p class="small muted mb-0">No notes recorded yet.</p>
                @endif
            </div>
        </div>
    </div>

    {{-- ============ SESSIONS ============ --}}
    <div id="sessions" class="tab-pane">
        <div class="card">
            <div class="card-head">
                <h3>RADIUS sessions</h3>
                <form method="POST" action="{{ route('radius.sync-accounting') }}">
                    @csrf
                    <button type="submit" class="btn secondary sm">Sync accounting now</button>
                </form>
            </div>
            <div class="card-body tight">
                <div class="table-wrap">
                    <table class="data">
                        <thead>
                        <tr><th>Started</th><th>Stopped</th><th>Duration</th><th>IP</th><th>NAS</th>
                            <th class="num">Down</th><th class="num">Up</th><th class="num">Total</th><th>Terminated</th></tr>
                        </thead>
                        <tbody>
                        @forelse ($sessions as $session)
                            <tr>
                                <td class="small nowrap">
                                    @if ($session->is_online)<span class="pulse"></span>@endif
                                    {{ $session->started_at?->format('d M H:i') ?: '—' }}
                                </td>
                                <td class="small nowrap">{{ $session->stopped_at?->format('d M H:i') ?: '—' }}</td>
                                <td class="small">{{ $session->duration_label }}</td>
                                <td class="mono tiny">{{ $session->framed_ip ?: '—' }}</td>
                                <td class="mono tiny">{{ $session->nas_ip }}</td>
                                <td class="num">{{ human_bytes($session->input_octets) }}</td>
                                <td class="num">{{ human_bytes($session->output_octets) }}</td>
                                <td class="num strong">{{ human_bytes($session->total_octets) }}</td>
                                <td class="tiny">{{ $session->terminate_cause ?: '—' }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="9">
                                @include('components.empty-state', ['icon' => '&#9201;', 'title' => 'No sessions recorded',
                                    'message' => 'Sessions appear once the NAS sends RADIUS accounting (radacct).'])
                            </td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            @if ($sessions->hasPages())<div class="card-foot">{{ $sessions->links('partials.pagination') }}</div>@endif
        </div>

        <div class="card">
            <div class="card-head"><h3>Authentication log</h3>
                <span class="sub">From FreeRADIUS radpostauth</span></div>
            <div class="card-body tight">
                <div class="table-wrap">
                    <table class="data">
                        <thead><tr><th>When</th><th>Result</th><th>NAS</th><th>Assigned IP</th></tr></thead>
                        <tbody>
                        @forelse ($authLogs as $log)
                            <tr>
                                <td class="small nowrap">{{ $log->created_at->format('d M Y H:i:s') }}</td>
                                <td><span class="badge {{ $log->reply === 'Access-Accept' ? 'success' : 'danger' }}">{{ $log->reply }}</span></td>
                                <td class="mono tiny">{{ $log->nas_ip ?: '—' }}</td>
                                <td class="mono tiny">{{ $log->framed_ip ?: '—' }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="4">@include('components.empty-state', ['icon' => '&#128274;', 'title' => 'No authentication attempts logged'])</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- ============ USAGE ============ --}}
    <div id="usage" class="tab-pane">
        <div class="grid grid-4 mb-2">
            @include('components.kpi', ['label' => 'Total this period', 'value' => human_bytes($usage['total_bytes']), 'variant' => 'info', 'href' => '#'])
            @include('components.kpi', ['label' => 'Download', 'value' => human_bytes($usage['input_bytes']), 'href' => '#'])
            @include('components.kpi', ['label' => 'Upload', 'value' => human_bytes($usage['output_bytes']), 'href' => '#'])
            @include('components.kpi', ['label' => 'Online time', 'value' => $usage['online_hours'].' h',
                'delta' => $usage['sessions'].' sessions', 'href' => '#'])
        </div>

        <div class="card">
            <div class="card-head"><h3>Daily consumption — last 30 days</h3></div>
            <div class="card-body">
                @include('components.chart', [
                    'series' => collect($usageSeries)->map(fn ($p) => [
                        'label' => \Carbon\Carbon::parse($p['date'])->format('d M'),
                        'value' => $p['bytes'],
                    ])->all(),
                    'type' => 'bar', 'format' => 'bytes', 'height' => 210,
                ])
            </div>
        </div>
    </div>

    {{-- ============ BILLING ============ --}}
    <div id="billing" class="tab-pane">
        <div class="card">
            <div class="card-head">
                <h3>Invoices for this service</h3>
                <button type="button" class="btn sm" data-modal="invoice-modal">+ Raise invoice</button>
            </div>
            <div class="card-body tight">
                <div class="table-wrap">
                    <table class="data">
                        <thead>
                        <tr><th>Invoice</th><th>Period</th><th>Issued</th><th>Due</th>
                            <th class="num">Total</th><th class="num">Balance</th><th>Status</th><th></th></tr>
                        </thead>
                        <tbody>
                        @forelse ($invoices as $invoice)
                            <tr>
                                <td class="mono"><a href="{{ route('invoices.show', $invoice) }}">{{ $invoice->invoice_number }}</a></td>
                                <td class="small nowrap">
                                    {{ $invoice->period_start?->format('d M') ?? '—' }} – {{ $invoice->period_end?->format('d M Y') ?? '—' }}
                                </td>
                                <td class="small nowrap">{{ $invoice->issue_date->format('d M Y') }}</td>
                                <td class="small nowrap">{{ $invoice->due_date->format('d M Y') }}</td>
                                <td class="num">{{ money($invoice->total, $invoice->currency) }}</td>
                                <td class="num strong">{{ money($invoice->balance, $invoice->currency) }}</td>
                                <td><span class="badge {{ status_color($invoice->status) }}">{{ $invoice->status }}</span></td>
                                <td class="right nowrap">
                                    <a href="{{ route('invoices.print', $invoice) }}" target="_blank" class="btn xs secondary">View</a>
                                    @if ($invoice->balance > 0)
                                        <a href="{{ route('payments.create', ['customer' => $service->customer_id]) }}" class="btn xs">Collect</a>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="8">@include('components.empty-state', ['icon' => '&#128196;', 'title' => 'No invoices yet'])</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- ============ AAA / RADIUS ============ --}}
    <div id="radius" class="tab-pane">
        <div class="grid grid-2">
            <div class="card">
                <div class="card-head"><h3>AAA record</h3>
                    <form method="POST" action="{{ route('services.resync-radius', $service) }}">
                        @csrf
                        <button type="submit" class="btn secondary sm">Re-push</button>
                    </form>
                </div>
                <div class="card-body">
                    @if ($service->radiusUser)
                        <dl class="dl">
                            <dt>Username</dt><dd class="mono">{{ $service->radiusUser->username }}</dd>
                            <dt>Auth type</dt><dd class="mono">{{ $service->radiusUser->auth_type }}</dd>
                            <dt>Realm</dt><dd class="mono">{{ $service->radiusUser->realm ?: '—' }}</dd>
                            <dt>Group</dt><dd class="mono">{{ $service->radiusUser->groupname ?: '—' }}</dd>
                            <dt>Framed pool</dt><dd class="mono">{{ $service->radiusUser->framed_pool ?: '—' }}</dd>
                            <dt>Static IP</dt><dd class="mono">{{ $service->radiusUser->static_ip ?: '—' }}</dd>
                            <dt>Status</dt><dd><span class="badge {{ status_color($service->radiusUser->status) }}">{{ $service->radiusUser->status }}</span></dd>
                            <dt>Last sync</dt>
                            <dd><span class="badge {{ $service->radiusUser->last_sync_status === 'synced' ? 'success' : 'danger' }}">
                                {{ $service->radiusUser->last_sync_status }}</span>
                                <span class="tiny muted">{{ $service->radiusUser->last_synced_at?->diffForHumans() }}</span></dd>
                            @if ($service->radiusUser->last_sync_error)
                                <dt>Error</dt><dd class="small" style="color:var(--danger);">{{ $service->radiusUser->last_sync_error }}</dd>
                            @endif
                        </dl>
                    @else
                        @include('components.empty-state', ['icon' => '&#128274;', 'title' => 'No AAA record',
                            'message' => 'Push the record to FreeRADIUS to allow authentication.',
                            'action' => '<form method="POST" action="'.route('services.resync-radius', $service).'">'.csrf_field().'<button class="btn sm">Push to RADIUS</button></form>'])
                    @endif
                </div>
            </div>

            <div class="card">
                <div class="card-head"><h3>CoA / Disconnect history</h3>
                    <a href="{{ route('radius.disconnects') }}" class="btn ghost sm">All &rarr;</a></div>
                <div class="card-body tight">
                    <div class="table-wrap">
                        <table class="data">
                            <thead><tr><th>When</th><th>Type</th><th>Purpose</th><th>NAS</th><th>Result</th></tr></thead>
                            <tbody>
                            @forelse ($coaHistory as $req)
                                <tr>
                                    <td class="small nowrap">{{ $req->created_at->format('d M H:i') }}</td>
                                    <td><span class="badge info">{{ $req->type }}</span></td>
                                    <td class="small">{{ title_case_words($req->purpose) }}</td>
                                    <td class="mono tiny">{{ $req->nas_ip }}</td>
                                    <td><span class="badge {{ $req->status === 'ack' ? 'success' : ($req->status === 'nak' ? 'warning' : 'danger') }}">{{ $req->status }}</span>
                                        @if ($req->response_detail)
                                            <div class="tiny muted">{{ \Illuminate\Support\Str::limit($req->response_detail, 60) }}</div>
                                        @endif</td>
                                </tr>
                            @empty
                                <tr><td colspan="5">
                                    @include('components.empty-state', ['icon' => '&#9889;', 'title' => 'No CoA or DM requests sent'])
                                </td></tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ============ HISTORY ============ --}}
    <div id="history" class="tab-pane">
        <div class="grid grid-2">
            <div class="card">
                <div class="card-head"><h3>Status transitions</h3></div>
                <div class="card-body">
                    @if ($history->isNotEmpty())
                        <div class="timeline">
                            @foreach ($history as $entry)
                                <div class="timeline-item {{ status_color($entry->to_status) === 'success' ? 'ok' : (status_color($entry->to_status) === 'danger' ? 'bad' : '') }}">
                                    <div class="t-head">
                                        {{ title_case_words($entry->from_status ?? 'new') }} &rarr;
                                        <strong>{{ title_case_words($entry->to_status) }}</strong>
                                    </div>
                                    <div class="t-meta">
                                        {{ $entry->created_at->format('d M Y H:i') }}
                                        @if ($entry->user) &middot; {{ $entry->user->name }} @endif
                                    </div>
                                    @if ($entry->reason)<div class="t-body">{{ $entry->reason }}</div>@endif
                                </div>
                            @endforeach
                        </div>
                    @else
                        <p class="small muted mb-0">No transitions recorded.</p>
                    @endif
                </div>
            </div>

            <div class="card">
                <div class="card-head"><h3>Plan &amp; service changes</h3></div>
                <div class="card-body tight">
                    <div class="table-wrap">
                        <table class="data">
                            <thead><tr><th>When</th><th>Type</th><th>Change</th><th class="num">Prorated</th><th>Status</th></tr></thead>
                            <tbody>
                            @forelse ($changes as $change)
                                <tr>
                                    <td class="small nowrap">{{ $change->created_at->format('d M Y') }}</td>
                                    <td><span class="badge info">{{ title_case_words($change->change_type) }}</span></td>
                                    <td class="small">{{ $change->old_values['plan'] ?? '—' }} &rarr; {{ $change->new_values['plan'] ?? '—' }}</td>
                                    <td class="num">{{ (float) $change->prorated_amount > 0 ? money($change->prorated_amount) : '—' }}</td>
                                    <td><span class="badge {{ status_color($change->status === 'completed' ? 'active' : $change->status) }}">{{ $change->status }}</span></td>
                                </tr>
                            @empty
                                <tr><td colspan="5">@include('components.empty-state', ['icon' => '&#8645;', 'title' => 'No changes made'])</td></tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-head"><h3 class="muted" style="color:var(--danger);">Cancellation</h3></div>
            <div class="card-body">
                @if (in_array($service->status, ['cancelled', 'terminated']))
                    <div class="alert danger">
                        <span>&#9888;</span>
                        <div class="grow">
                            <strong>{{ title_case_words($service->status) }}</strong>
                            on {{ $service->cancelled_at?->format('d M Y H:i') }}.
                            Reason: {{ $service->cancellationReason?->reason ?: 'Not specified' }}.
                            @if ($service->cancellation_notes)<div class="small mt-1">{{ $service->cancellation_notes }}</div>@endif
                        </div>
                    </div>
                @else
                    <form method="POST" action="{{ route('services.cancel', $service) }}"
                          data-confirm="Record a cancellation for this service?">
                        @csrf
                        <div class="form-grid">
                            <div class="field">
                                <label>Reason <span class="req">*</span></label>
                                <select name="cancellation_reason_id" required>
                                    <option value="">Select a reason…</option>
                                    @foreach ($reasons as $reason)
                                        <option value="{{ $reason->id }}">{{ $reason->reason }} ({{ title_case_words($reason->category) }})</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="field">
                                <label>&nbsp;</label>
                                <label class="check">
                                    <input type="checkbox" name="immediate" value="1">
                                    Terminate immediately (otherwise runs to period end)
                                </label>
                            </div>
                            <div class="field full">
                                <label>Retention notes</label>
                                <textarea name="notes" rows="2" placeholder="What did we learn from this cancellation?"></textarea>
                            </div>
                        </div>
                        <div class="mt-2 right">
                            <button type="submit" class="btn danger">Cancel service</button>
                        </div>
                    </form>
                @endif
            </div>
        </div>
    </div>

    {{-- ============ MODALS ============ --}}
    <div class="modal-backdrop" id="activate-modal">
        <div class="modal">
            <form method="POST" action="{{ route('services.activate', $service) }}">
                @csrf
                <div class="modal-head"><h3>Activate service</h3>
                    <button type="button" class="modal-close" data-modal-close>&times;</button></div>
                <div class="modal-body">
                    <p class="small muted">Record the installation details and start the billing calendar.</p>
                    <div class="form-grid cols-1">
                        <div class="field"><label>OLT name</label><input type="text" name="olt_name" value="{{ $service->olt_name }}"></div>
                        <div class="field"><label>PON port</label><input type="text" name="pon_port" class="mono" value="{{ $service->pon_port }}"></div>
                        <div class="field"><label>Splitter</label><input type="text" name="splitter" class="mono" value="{{ $service->splitter }}"></div>
                        <div class="field"><label>CPE model</label><input type="text" name="cpe_model" value="{{ $service->cpe_model }}"></div>
                        <div class="field"><label>CPE serial</label><input type="text" name="cpe_serial" class="mono" value="{{ $service->cpe_serial }}"></div>
                        <div class="field"><label>CPE MAC</label><input type="text" name="cpe_mac" class="mono" value="{{ $service->cpe_mac }}"></div>
                    </div>
                </div>
                <div class="modal-foot">
                    <button type="button" class="btn secondary" data-modal-close>Cancel</button>
                    <button type="submit" class="btn success">Activate now</button>
                </div>
            </form>
        </div>
    </div>

    <div class="modal-backdrop" id="suspend-modal">
        <div class="modal">
            <form method="POST" action="{{ route('services.suspend', $service) }}">
                @csrf
                <div class="modal-head"><h3>Suspend service</h3>
                    <button type="button" class="modal-close" data-modal-close>&times;</button></div>
                <div class="modal-body">
                    <div class="field mb-1">
                        <label>Reason <span class="req">*</span></label>
                        <input type="text" name="reason" required value="Suspended for non-payment">
                    </div>
                    <label class="check"><input type="checkbox" name="disconnect" value="1" checked>
                        Send RADIUS Disconnect-Request to drop the live session</label>
                </div>
                <div class="modal-foot">
                    <button type="button" class="btn secondary" data-modal-close>Cancel</button>
                    <button type="submit" class="btn warning">Suspend service</button>
                </div>
            </form>
        </div>
    </div>

    <div class="modal-backdrop" id="plan-modal">
        <div class="modal">
            <form method="POST" action="{{ route('services.change-plan', $service) }}">
                @csrf
                <div class="modal-head"><h3>Change plan</h3>
                    <button type="button" class="modal-close" data-modal-close>&times;</button></div>
                <div class="modal-body">
                    <p class="small muted">Current plan: <strong>{{ $service->plan?->name }}</strong>
                        at {{ money($service->price, $service->customer->currency) }}.</p>
                    <div class="field mb-1">
                        <label>New plan <span class="req">*</span></label>
                        <select name="plan_id" required>
                            <option value="">Select a plan…</option>
                            @foreach ($plans as $plan)
                                <option value="{{ $plan->id }}" @disabled($plan->id === $service->plan_id)>
                                    {{ $plan->name }} — {{ money($plan->price) }} ({{ $plan->speed_label }})
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <label class="check">
                        <input type="checkbox" name="prorate" value="1" checked>
                        Prorate the unused days of the current period
                    </label>
                    <p class="small muted mt-1">The live session is re-shaped immediately via RADIUS CoA.</p>
                </div>
                <div class="modal-foot">
                    <button type="button" class="btn secondary" data-modal-close>Cancel</button>
                    <button type="submit" class="btn">Apply change</button>
                </div>
            </form>
        </div>
    </div>

    <div class="modal-backdrop" id="password-modal">
        <div class="modal">
            <form method="POST" action="{{ route('services.reset-password', $service) }}">
                @csrf
                <div class="modal-head"><h3>Reset RADIUS password</h3>
                    <button type="button" class="modal-close" data-modal-close>&times;</button></div>
                <div class="modal-body">
                    <div class="field mb-1">
                        <label>New password <span class="req">*</span></label>
                        <div class="flex gap-1">
                            <input type="password" name="password" id="reset-pw" class="grow mono" required minlength="6">
                            <button type="button" class="btn secondary sm" data-generate-password="#reset-pw">Generate</button>
                        </div>
                    </div>
                    <div class="field">
                        <label>Confirm password <span class="req">*</span></label>
                        <input type="password" name="password_confirmation" required minlength="6">
                    </div>
                    <p class="small muted mt-1">Any active session is disconnected so the new credential takes effect.</p>
                </div>
                <div class="modal-foot">
                    <button type="button" class="btn secondary" data-modal-close>Cancel</button>
                    <button type="submit" class="btn">Reset password</button>
                </div>
            </form>
        </div>
    </div>

    <div class="modal-backdrop" id="speed-modal">
        <div class="modal">
            <form method="POST" action="{{ route('services.change-speed', $service) }}">
                @csrf
                <div class="modal-head"><h3>Change live speed (CoA)</h3>
                    <button type="button" class="modal-close" data-modal-close>&times;</button></div>
                <div class="modal-body">
                    <p class="small muted">Sends a Change-of-Authorization to the NAS. The subscriber stays connected.</p>
                    <div class="form-grid">
                        <div class="field">
                            <label>Download (kbps) <span class="req">*</span></label>
                            <input type="number" name="download_kbps" min="64" required value="{{ $service->download_kbps ?? 10240 }}">
                        </div>
                        <div class="field">
                            <label>Upload (kbps) <span class="req">*</span></label>
                            <input type="number" name="upload_kbps" min="64" required value="{{ $service->upload_kbps ?? 5120 }}">
                        </div>
                    </div>
                </div>
                <div class="modal-foot">
                    <button type="button" class="btn secondary" data-modal-close>Cancel</button>
                    <button type="submit" class="btn">Apply speed</button>
                </div>
            </form>
        </div>
    </div>

    <div class="modal-backdrop" id="invoice-modal">
        <div class="modal">
            <form method="POST" action="{{ route('services.invoice', $service) }}">
                @csrf
                <div class="modal-head"><h3>Raise an invoice</h3>
                    <button type="button" class="modal-close" data-modal-close>&times;</button></div>
                <div class="modal-body">
                    <div class="field mb-1">
                        <label>Description <span class="req">*</span></label>
                        <input type="text" name="description" required placeholder="e.g. Router replacement, relocation fee">
                    </div>
                    <div class="form-grid">
                        <div class="field">
                            <label>Amount <span class="req">*</span></label>
                            <input type="number" name="amount" step="0.01" min="0.01" required>
                        </div>
                        <div class="field">
                            <label>&nbsp;</label>
                            <label class="check"><input type="checkbox" name="taxable" value="1" checked> Apply tax</label>
                        </div>
                    </div>
                </div>
                <div class="modal-foot">
                    <button type="button" class="btn secondary" data-modal-close>Cancel</button>
                    <button type="submit" class="btn">Create invoice</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
<script>
(function () {
    var tabs = document.querySelectorAll('#svc-tabs a[data-tab]');
    var panes = document.querySelectorAll('.tab-pane');

    function activate(hash) {
        tabs.forEach(function (t) { t.classList.toggle('active', t.getAttribute('href') === hash); });
        panes.forEach(function (p) { p.style.display = ('#' + p.id) === hash ? '' : 'none'; });
    }

    tabs.forEach(function (t) {
        t.addEventListener('click', function (e) {
            e.preventDefault();
            history.replaceState(null, '', t.getAttribute('href'));
            activate(t.getAttribute('href'));
        });
    });

    activate(location.hash && document.querySelector(location.hash + '.tab-pane') ? location.hash : '#overview');
})();
</script>
@endpush