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

@section('content')
    <div class="page-head">
        <div><h1>Alerts</h1><p>{{ $alerts->total() }} alert(s) in this view.</p></div>
        <div class="page-actions">
            <a href="{{ route('alert-rules.index') }}" class="btn secondary">Alert rules</a>
            <form method="POST" action="{{ route('noc.sweep') }}">@csrf
                <button type="submit" class="btn">Run monitoring sweep</button>
            </form>
        </div>
    </div>

    <div class="grid grid-6 mb-2">
        @include('components.kpi', ['label' => 'Active', 'value' => $counts['active'], 'variant' => $counts['active'] > 0 ? 'warn' : 'good',
            'href' => route('alerts.index', ['status' => 'active'])])
        @include('components.kpi', ['label' => 'Acknowledged', 'value' => $counts['acknowledged'], 'variant' => 'info',
            'href' => route('alerts.index', ['status' => 'acknowledged'])])
        @include('components.kpi', ['label' => 'Critical', 'value' => $counts['critical'], 'variant' => 'bad',
            'href' => route('alerts.index', ['severity' => 'critical'])])
        @include('components.kpi', ['label' => 'Warning', 'value' => $counts['warning'], 'variant' => 'warn',
            'href' => route('alerts.index', ['severity' => 'warning'])])
        @include('components.kpi', ['label' => 'Info', 'value' => $counts['info'], 'href' => route('alerts.index', ['severity' => 'info'])])
        @include('components.kpi', ['label' => 'Resolved today', 'value' => $counts['resolved_today'], 'variant' => 'good', 'href' => '#'])
    </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="Title, device, description…">
        </div>
        <div class="field">
            <label>Status</label>
            <select name="status" data-auto-submit>
                <option value="">All</option>
                @foreach (['active','acknowledged','resolved'] as $s)
                    <option value="{{ $s }}" @selected(($filters['status'] ?? '') === $s)>{{ title_case_words($s) }}</option>
                @endforeach
            </select>
        </div>
        <div class="field">
            <label>Severity</label>
            <select name="severity" data-auto-submit>
                <option value="">All</option>
                @foreach (['critical','warning','info'] as $s)
                    <option value="{{ $s }}" @selected(($filters['severity'] ?? '') === $s)>{{ title_case_words($s) }}</option>
                @endforeach
            </select>
        </div>
        <div class="field">
            <label>Type</label>
            <select name="type" data-auto-submit>
                <option value="">All</option>
                @foreach (['device_down','device_degraded','high_latency','interface_down','high_utilization','high_cpu','high_memory','onu_offline','optical_power','service_outage','sla_breach','power_failure'] as $t)
                    <option value="{{ $t }}" @selected(($filters['type'] ?? '') === $t)>{{ title_case_words($t) }}</option>
                @endforeach
            </select>
        </div>
        <div class="field" style="flex:0 0 auto;"><label>&nbsp;</label><button type="submit" class="btn secondary">Filter</button></div>
    </form>

    <div class="card">
        <div class="card-body tight">
            <div class="table-wrap">
                <table class="data">
                    <thead>
                    <tr>
                        <th>Alert</th><th>Device / site</th><th>Type</th><th>Severity</th>
                        <th class="num">Count</th><th>First seen</th><th>Last seen</th><th>Status</th><th></th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse ($alerts as $alert)
                        <tr>
                            <td>
                                <strong>{{ $alert->title }}</strong>
                                <div class="tiny muted">{{ \Illuminate\Support\Str::limit($alert->description, 90) }}</div>
                            </td>
                            <td class="small">
                                @if ($alert->device)
                                    <a href="{{ route('devices.show', $alert->device) }}">{{ $alert->device->name }}</a>
                                @elseif ($alert->site)
                                    <a href="{{ route('sites.show', $alert->site) }}">{{ $alert->site->name }}</a>
                                @else
                                    <span class="muted">Network-wide</span>
                                @endif
                            </td>
                            <td><span class="badge muted">{{ title_case_words($alert->type) }}</span></td>
                            <td><span class="badge {{ $alert->severity === 'critical' ? 'danger' : ($alert->severity === 'warning' ? 'warning' : 'muted') }}">
                                <span class="dot"></span>{{ $alert->severity }}</span></td>
                            <td class="num">{{ $alert->occurrences }}</td>
                            <td class="small nowrap">{{ $alert->first_triggered_at?->format('d M H:i') ?? $alert->created_at->format('d M H:i') }}</td>
                            <td class="small nowrap">{{ $alert->last_triggered_at?->format('d M H:i') ?? '—' }}</td>
                            <td><span class="badge {{ status_color($alert->status) }}">{{ $alert->status }}</span></td>
                            <td class="right nowrap">
                                @if ($alert->status === 'active')
                                    <form method="POST" action="{{ route('alerts.acknowledge', $alert) }}">@csrf
                                        <button type="submit" class="btn xs secondary">Ack</button>
                                    </form>
                                @endif
                                @if ($alert->status !== 'resolved')
                                    <form method="POST" action="{{ route('alerts.resolve', $alert) }}">@csrf
                                        <button type="submit" class="btn xs success">Resolve</button>
                                    </form>
                                @endif
                                @if (! $alert->ticket_id)
                                    <form method="POST" action="{{ route('alerts.ticket', $alert) }}">@csrf
                                        <button type="submit" class="btn xs ghost">Raise ticket</button>
                                    </form>
                                @else
                                    <span class="badge success tiny">ticketed</span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="9">
                            @include('components.empty-state', ['icon' => '&#10003;', 'title' => 'No alerts in this view',
                                'message' => 'Run a monitoring sweep to refresh the estate state.'])
                        </td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        @if ($alerts->hasPages())<div class="card-foot">{{ $alerts->links('partials.pagination') }}</div>@endif
    </div>
@endsection