@extends('layouts.app')
@section('title', 'Fibre plant')

@section('content')
    <div class="page-head">
        <div><h1>Fibre plant</h1><p>{{ $pons->total() }} PON port(s) matching your filters.</p></div>
        <div class="page-actions">
            <a href="{{ route('fibre.onus') }}" class="btn secondary">All ONTs</a>
            <a href="{{ route('fibre.create') }}" class="btn">+ Add PON port</a>
        </div>
    </div>

    @php $utilisation = $totals['ports'] > 0 ? round($totals['used'] / $totals['ports'] * 100, 1) : 0; @endphp
    <div class="grid grid-4 mb-2">
        @include('components.kpi', ['label' => 'Splitter ports', 'value' => number_format($totals['ports']), 'variant' => 'info'])
        @include('components.kpi', ['label' => 'Ports in use', 'value' => number_format($totals['used']).' ('.$utilisation.'%)'])
        @include('components.kpi', ['label' => 'ONTs on plant', 'value' => number_format($totals['onus'])])
        @include('components.kpi', ['label' => 'Ports ≥90% full', 'value' => (string) $totals['saturated'],
            'variant' => $totals['saturated'] ? 'bad' : 'good'])
    </div>

    <form class="filters" method="GET">
        <div class="field" style="flex:2 1 240px;">
            <label>Search</label>
            <input type="search" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Port, splitter, cabinet…">
        </div>
        <div class="field">
            <label>OLT</label>
            <select name="olt_device_id" data-auto-submit>
                <option value="">All</option>
                @foreach ($olts as $olt)
                    <option value="{{ $olt->id }}" @selected(($filters['olt_device_id'] ?? '') == $olt->id)>{{ $olt->name }}</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 ($pons->isEmpty())
                @include('components.empty-state', [
                    'icon' => '&#128268;',
                    'title' => 'No PON ports recorded',
                    'message' => 'Register the splitter ports on your OLTs to track utilisation and the ONTs hanging off them.',
                ])
            @else
                <table class="data">
                    <thead>
                    <tr>
                        <th>OLT</th><th>PON port</th><th>Splitter</th><th>Cabinet</th>
                        <th class="num">Split</th><th>Utilisation</th>
                        <th class="num">ONTs</th><th class="num">Distance</th><th>Status</th><th></th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach ($pons as $pon)
                        @php
                            $pct = $pon->ports_total > 0 ? round($pon->ports_used / $pon->ports_total * 100, 1) : 0;
                            $bar = $pct >= 100 ? 'bad' : ($pct >= 90 ? 'warn' : 'good');
                        @endphp
                        <tr>
                            <td class="small">{{ $pon->olt?->name ?: '—' }}</td>
                            <td class="mono"><a href="{{ route('fibre.show', $pon) }}">{{ $pon->pon_port }}</a></td>
                            <td class="small">{{ $pon->splitter ?: '—' }}</td>
                            <td class="small">{{ $pon->cabinet ?: '—' }}</td>
                            <td class="num">1:{{ $pon->split_ratio }}</td>
                            <td style="min-width:140px;">
                                <div class="tiny"><strong>{{ $pon->ports_used }}</strong> / {{ $pon->ports_total }} ({{ $pct }}%)</div>
                                <div style="height:6px;border-radius:3px;background:rgba(0,0,0,.08);overflow:hidden;margin-top:2px;">
                                    <div style="width:{{ min($pct, 100) }}%;height:100%;background:var(--{{ $bar }}, #64748b);"></div>
                                </div>
                            </td>
                            <td class="num">{{ $pon->onus->count() }}</td>
                            <td class="num">{{ $pon->distance_km ? $pon->distance_km.' km' : '—' }}</td>
                            <td><span class="badge {{ status_color($pon->status === 'active' ? 'up' : $pon->status) }}">
                                <span class="dot"></span>{{ title_case_words($pon->status) }}</span></td>
                            <td class="right nowrap">
                                <a href="{{ route('fibre.show', $pon) }}" class="btn xs secondary">Open</a>
                                <a href="{{ route('fibre.edit', $pon) }}" class="btn xs secondary">Edit</a>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            @endif
        </div>
        @if ($pons->hasPages())<div class="card-foot">{{ $pons->links('partials.pagination') }}</div>@endif
    </div>
@endsection