@extends('layout.app')

@section('title', 'Monitoring')

@section('content')
<x-material-page-header 
    title="Monitoring Alerts" 
    :breadcrumbs="[
        ['name' => 'Monitoring']
    ]"
/>

<div class="container-fluid py-4">
    <div class="card my-4">
        <div class="card-header pb-0 pt-3">
            <div class="row align-items-center">
                <div class="col">
                    <h6 class="mb-0">Alert Monitoring</h6>
                </div>
                <div class="col-auto">
                    <form method="GET" class="d-flex gap-2">
                        <div class="input-group input-group-outline">
                            <select name="severity" class="form-control form-control-sm" onchange="this.form.submit()">
                                <option value="">Semua Severity</option>
                                <option value="critical" {{ request('severity')==='critical'?'selected':'' }}>Critical</option>
                                <option value="warning" {{ request('severity')==='warning'?'selected':'' }}>Warning</option>
                                <option value="info" {{ request('severity')==='info'?'selected':'' }}>Info</option>
                            </select>
                        </div>
                        <div class="input-group input-group-outline">
                            <select name="state" class="form-control form-control-sm" onchange="this.form.submit()">
                                <option value="">Semua State</option>
                                <option value="1" {{ request('state')==='1'?'selected':'' }}>Active</option>
                                <option value="0" {{ request('state')==='0'?'selected':'' }}>Recovered</option>
                            </select>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="card-body pt-0">
        <div class="table-responsive">
            <table class="table align-items-center mb-0">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Device</th>
                        <th>Severity</th>
                        <th>Message</th>
                        <th>State</th>
                        <th>Started</th>
                        <th>Ended</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($alerts as $alert)
                        <tr>
                            <td>{{ $alert->id }}</td>
                            <td>{{ $alert->hostname }}</td>
                            <td>
                                <span class="badge badge-sm bg-gradient-{{ $alert->severity === 'critical' ? 'danger' : ($alert->severity === 'warning' ? 'warning' : 'info') }}">
                                    {{ ucfirst($alert->severity) }}
                                </span>
                            </td>
                            <td>{{ Str::limit($alert->message, 50) }}</td>
                            <td>
                                <span class="badge badge-sm bg-gradient-{{ $alert->state ? 'danger' : 'success' }}">
                                    {{ $alert->state ? 'Active' : 'Recovered' }}
                                </span>
                            </td>
                            <td>{{ $alert->started_at?->format('Y-m-d H:i') ?? '-' }}</td>
                            <td>{{ $alert->ended_at?->format('Y-m-d H:i') ?? '-' }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="text-center text-muted">Belum ada alert</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{ $alerts->links() }}
    </div>
</div>
@endsection