@extends('layout')
@section('content')
<h2>Latest Sewage Reading</h2>
<p>Flow: {{ $latest->flow_rate ?? 'N/A' }}</p>
<div id="map" style="height:400px;"></div>

<script>
var map = L.map('map').setView([-17.8252, 31.0335], 12);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

@if($latest)
    L.marker([{{ $latest->latitude ?? -17.8252 }}, {{ $latest->longitude ?? 31.0335 }}])
     .addTo(map)
     .bindPopup("Node {{ $latest->node_id }}");
@endif
</script>
@endsection