@extends('layouts.app')
@section('title', 'Alert rules')

@section('content')
    <div class="page-head">
        <div><h1>Alert rules</h1><p>Thresholds evaluated on every monitoring sweep.</p></div>
        <div class="page-actions">
            <a href="{{ route('alerts.index') }}" class="btn secondary">&larr; Back to alerts</a>
            <button type="button" class="btn" data-modal="rule-modal">+ New rule</button>
        </div>
    </div>

    <div class="card">
        <div class="card-head"><h3>Configured rules</h3></div>
        <div class="card-body tight">
            <div class="table-wrap">
                <table class="data">
                    <thead>
                    <tr>
                        <th>Rule</th><th>Type</th><th>Condition</th><th>Severity</th>
                        <th class="num">Threshold</th><th class="num">Duration</th><th>Enabled</th><th></th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse ($rules as $rule)
                        <tr>
                            <td><strong>{{ $rule->name }}</strong>
                                <div class="tiny muted">{{ \Illuminate\Support\Str::limit($rule->description, 80) }}</div></td>
                            <td><span class="badge info">{{ title_case_words($rule->type) }}</span></td>
                            <td class="small mono">{{ $rule->condition }}</td>
                            <td><span class="badge {{ $rule->severity === 'critical' ? 'danger' : ($rule->severity === 'warning' ? 'warning' : 'muted') }}">{{ $rule->severity }}</span></td>
                            <td class="num">{{ $rule->threshold }} {{ $rule->unit }}</td>
                            <td class="num">{{ $rule->duration_minutes }} min</td>
                            <td>
                                <form method="POST" action="{{ route('alert-rules.toggle', $rule) }}">
                                    @csrf @method('PUT')
                                    <input type="hidden" name="is_enabled" value="{{ $rule->is_enabled ? 0 : 1 }}">
                                    <button type="submit" class="btn xs {{ $rule->is_enabled ? 'success' : 'ghost' }}">
                                        {{ $rule->is_enabled ? 'On' : 'Off' }}
                                    </button>
                                </form>
                            </td>
                            <td class="right">
                                <form method="POST" action="{{ route('alert-rules.destroy', $rule) }}"
                                      data-confirm="Delete the rule {{ $rule->name }}?">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="btn xs danger">Delete</button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="8">
                            @include('components.empty-state', ['icon' => '&#9881;', 'title' => 'No alert rules configured',
                                'message' => 'Define thresholds for latency, utilisation, CPU and optical power.',
                                'action' => '<button type="button" class="btn sm" data-modal="rule-modal">+ New rule</button>'])
                        </td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal-backdrop" id="rule-modal">
        <div class="modal">
            <form method="POST" action="{{ route('alert-rules.store') }}">
                @csrf
                <div class="modal-head"><h3>New alert rule</h3>
                    <button type="button" class="modal-close" data-modal-close>&times;</button></div>
                <div class="modal-body">
                    <div class="form-grid cols-1">
                        <div class="field"><label>Name <span class="req">*</span></label>
                            <input type="text" name="name" required placeholder="High latency on core"></div>
                        <div class="field"><label>Type <span class="req">*</span></label>
                            <select name="type" required>
                                @foreach (['high_latency','high_utilization','high_cpu','high_memory','device_down','interface_down','optical_power','onu_offline'] as $t)
                                    <option value="{{ $t }}">{{ title_case_words($t) }}</option>
                                @endforeach
                            </select></div>
                        <div class="field"><label>Condition <span class="req">*</span></label>
                            <select name="condition" required>
                                <option value="gt">Greater than</option>
                                <option value="gte">Greater or equal</option>
                                <option value="lt">Less than</option>
                                <option value="lte">Less or equal</option>
                            </select></div>
                        <div class="form-grid">
                            <div class="field"><label>Threshold <span class="req">*</span></label>
                                <input type="number" name="threshold" step="any" required></div>
                            <div class="field"><label>Unit</label>
                                <select name="unit">
                                    @foreach (['ms','%','Mbps','dBm','count'] as $u)
                                        <option value="{{ $u }}">{{ $u }}</option>
                                    @endforeach
                                </select></div>
                        </div>
                        <div class="field"><label>Duration (minutes) <span class="req">*</span></label>
                            <input type="number" name="duration_minutes" min="1" required value="5"></div>
                        <div class="field"><label>Severity <span class="req">*</span></label>
                            <select name="severity" required>
                                @foreach (['critical','warning','info'] as $s)
                                    <option value="{{ $s }}">{{ title_case_words($s) }}</option>
                                @endforeach
                            </select></div>
                        <div class="field"><label>Message</label>
                            <input type="text" name="message" placeholder="Shown on the raised alert"></div>
                    </div>
                </div>
                <div class="modal-foot">
                    <button type="button" class="btn secondary" data-modal-close>Cancel</button>
                    <button type="submit" class="btn">Create rule</button>
                </div>
            </form>
        </div>
    </div>
@endsection