@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8 text-center">
            <div class="card shadow">
                <div class="card-header bg-dark text-white">
                    <h4 class="mb-0">Pemantauan Tahap Gas Real-Time</h4>
                </div>
                <div class="card-body py-5">
                    <h5 class="text-muted mb-4">Bacaan Sensor Terkini:</h5>
                    
                    <div class="display-1 fw-bold mb-3" id="gasValue">
                        {{ $latestReading ? $latestReading->value : '0' }} <small class="h4 text-muted">PPM</small>
                    </div>

                    @php
                        $val = $latestReading ? $latestReading->value : 0;
                        $color = 'success'; $status = 'NORMAL';
                        if($val > 300) { $color = 'warning'; $status = 'AMARAN'; }
                        if($val > 600) { $color = 'danger'; $status = 'BAHAYA'; }
                    @endphp

                    <div class="alert alert-{{ $color }} d-inline-block px-5 py-2 fw-bold">
                        STATUS: {{ $status }}
                    </div>

                    <p class="mt-4 text-muted small">
                        Dikemaskini pada: {{ $latestReading ? $latestReading->created_at->format('d/m/Y H:i:s') : 'Tiada Data' }}
                    </p>
                </div>
            </div>
            
            <a href="{{ route('home') }}" class="btn btn-link mt-3 text-decoration-none text-muted">
                ← Kembali ke Menu Utama
            </a>
        </div>
    </div>
</div>

<script>
    setTimeout(function(){
       window.location.reload(1);
    }, 1000);
</script>
@endsection