@extends('layouts.app')
@section('title', 'ONTs')

@section('content')
    <div class="page-head">
        <div><h1>ONTs</h1><p>{{ $onus->total() }} optical network terminal(s) on the plant.</p></div>
        <div class="page-actions">
            <a href="{{ route('fibre.index') }}" class="btn secondary">PON ports</a>
        </div>
    </div>

    <div class="grid grid-4 mb-2">
        @include('components.kpi', ['label' => 'ONTs', 'value' => number_format($totals['count']), 'variant' => 'info'])
        @include('components.kpi', ['label' => 'Active', 'value' => number_format($totals['active']), 'variant' => 'good'])
        @include('components.kpi', ['label' => 'Degraded optical', 'value' => number_format($totals['degraded']),
            'variant' => $totals['degraded'] ? 'warn' : 'good',
            'href' => route('fibre.onus', ['health' => 'degraded'])])
        @include('components.kpi', ['label' => 'No optical signal', 'value' => number_format($totals['noSignal']),
            'variant' => $totals['noSignal'] ? 'bad' : 'good'])
    </div>

    <form class="filters" method="GET">
        <div class="field" style="flex:2 1 220px;">
            <label>Search</label>
            <input type="search" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Serial, MAC, service number…">
        </div>
        <div class="field">
            <label>PON port</label>
            <select name="pon_id" data-auto-submit>
                <option value="">All</option>
                @foreach ($pons as $p)
                    <option value="{{ $p->id }}" @selected(($filters['pon_id'] ?? '') == $p->id)>
                        {{ $p->olt?->name }} {{ $p->pon_port }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="field">
            <label>Optical health</label>
            <select name="health" data-auto-submit>
                <option value="">All</option>
                @foreach ($health as $h)
                    <option value="{{ $h }}" @selected(($filters['health'] ?? '') === $h)>{{ title_case_words($h) }}</option>
                @endforeach
            </select>
        </div>
        <div class="field">
            <label>Status</label>
            <select name="status" data-auto-submit>
                <option value="">All</option>
                @foreach ($statuses as $s)
                    <option value="{{ $s }}" @selected(($filters['status'] ?? '') === $s)>{{ title_case_words($s) }}</option>
                @endforeach
            </select>
        </div>
        <div class="field"><label>&nbsp;</label><button class="btn secondary" type="submit">Filter</button></div>
    </form>

    <div class="card">
        <div class="card-body" style="padding:0;">
            @if ($onus->isEmpty())
                @include('components.empty-state', [
                    'icon' => '&#128225;',
                    'title' => 'No ONTs found',
                    'message' => 'No optical terminal matches those filters.',
                ])
            @else
                <table class="data">
                    <thead>
                    <tr>
                        <th>Serial</th><th>PON port</th><th>Service</th>
                        <th class="num">Rx</th><th>Optical</th><th>Last seen</th>
                        <th>Status</th><th style="width:30%;">Update</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach ($onus as $onu)
                        <tr>
                            <td class="mono small">{{ $onu->serial_number }}
                                <div class="tiny muted">{{ $onu->vendor }} {{ $onu->model }}</div></td>
                            <td class="small mono">
                                @if ($onu->pon)
                                    <a href="{{ route('fibre.show', $onu->pon) }}">{{ $onu->pon->pon_port }}</a>
                                    <div class="tiny muted">{{ $onu->pon->olt?->name }}</div>
                                @else — @endif
                            </td>
                            <td class="small">
                                @if ($onu->service)
                                    <a class="mono" href="{{ route('services.show', $onu->service) }}">{{ $onu->service->service_number }}</a>
                                    <div class="tiny muted">{{ $onu->service->customer?->display_name }}</div>
                                @else <span class="muted">unbound</span> @endif
                            </td>
                            <td class="num">{{ $onu->rx_power_dbm !== null ? $onu->rx_power_dbm : '—' }}</td>
                            <td><span class="badge {{ in_array($onu->optical_health, ['excellent','good'], true) ? 'success'
                                    : ($onu->optical_health === 'degraded' ? 'warning'
                                    : ($onu->optical_health === 'critical' ? 'danger' : 'muted')) }}">
                                    {{ title_case_words($onu->optical_health) }}</span></td>
                            <td class="small nowrap">{{ $onu->last_seen_at?->diffForHumans() ?: 'never' }}</td>
                            <td><span class="badge {{ status_color($onu->status === 'active' ? 'up' : $onu->status) }}">
                                <span class="dot"></span>{{ title_case_words($onu->status) }}</span></td>
                            <td>
                                <form method="POST" action="{{ route('fibre.onus.update', $onu) }}" class="inline-form">
                                    @csrf @method('PUT')
                                    <select name="status">
                                        @foreach ($statuses as $s)
                                            <option value="{{ $s }}" @selected($onu->status === $s)>{{ title_case_words($s) }}</option>
                                        @endforeach
                                    </select>
                                    <input type="number" step="0.01" name="rx_power_dbm"
                                           value="{{ $onu->rx_power_dbm }}" placeholder="Rx dBm" style="width:92px;">
                                    <button class="btn xs" type="submit">Save</button>
                                    @if (! $onu->service_id)
                                        <button class="btn xs danger" type="submit"
                                                form="delete-onu-{{ $onu->id }}"
                                                data-confirm="Remove ONT {{ $onu->serial_number }}?">Del</button>
                                    @endif
                                </form>
                                @if (! $onu->service_id)
                                    <form id="delete-onu-{{ $onu->id }}" method="POST"
                                          action="{{ route('fibre.onus.destroy', $onu) }}">
                                        @csrf @method('DELETE')
                                    </form>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            @endif
        </div>
        @if ($onus->hasPages())<div class="card-foot">{{ $onus->links('partials.pagination') }}</div>@endif
    </div>
@endsection