@extends('layouts.app')

@section('title', 'Peringatan - Hidroponik')
@section('page-title', 'Peringatan')

@section('content')

<div class="section-label">
    <i class="bi bi-exclamation-triangle" style="color:var(--primary)"></i> Daftar Peringatan Sensor
</div>

<div class="card-clean mb-4">
    <div class="card-header">
        <i class="bi bi-bell me-2"></i>Riwayat Peringatan Sensor
    </div>
    <div class="table-responsive">
        <table class="table table-clean mb-0">
            <thead>
                <tr>
                    <th>Sensor</th>
                    <th>Nilai</th>
                    <th>Status</th>
                    <th>Keterangan</th>
                    <th>Waktu</th>
                </tr>
            </thead>
            <tbody>
                @forelse($peringatan as $m)
                @php
                    $status = $m->batasPeringatan->status_ket ?? '';
                    $sensor = $m->jenisSensor->nama_sensor;

                    // Label status badge
                    $statusLabel = $status === 'bahayakurang' ? 'Kurang' : 'Lebih';

                    // Class baris berdasarkan status
                    $rowClass = match($status) {
                        'bahayakurang' => 'row-bahayakurang',
                        'bahayalebih'  => 'row-bahayalebih',
                        default        => ''
                    };
                @endphp
                <tr class="{{ $rowClass }}">
                    <td>
                        <span style="font-weight:600; color:var(--primary);">
                            {{ strtoupper($sensor) }}
                        </span>
                    </td>
                    <td style="font-weight:700; color:#2d3748;">
                        {{ $m->nilai }}
                    </td>
                    <td>
                        <span class="badge-{{ $status }}">
                            {{ $statusLabel }}
                        </span>
                    </td>
                    <td style="color:#718096; font-size:13px;">
                        {{ $m->batasPeringatan->keterangan ?? '-' }}
                    </td>
                    <td style="color:#a0aec0; font-size:12px;">
                        <i class="bi bi-clock me-1"></i>{{ $m->create_at }}
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" class="text-center py-5" style="color:#a0aec0;">
                        <i class="bi bi-check-circle fs-3 d-block mb-2" style="color:#10b981"></i>
                        <span style="font-size:13px;">Tidak ada peringatan saat ini</span>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if($peringatan->hasPages())
    <div class="card-footer px-4 py-3">
        {{ $peringatan->links() }}
    </div>
    @endif
</div>

@endsection