@extends('layouts.app')

@section('title', 'MAP Mapping')

@section('content')
<div class="page-head">
    <div>
        <h1 class="page-title">MAP Mapping</h1>
        <p class="page-subtitle">A state-by-state traffic map index for Nigeria. Each row opens a traffic-style map focused on that state.</p>
    </div>
</div>

<div class="card">
    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>State</th>
                    <th>Traffic</th>
                    <th>MAP</th>
                </tr>
            </thead>
            <tbody>
                @foreach($states as $state)
                    <tr class="row-link" onclick="window.location='{{ route('monitor.traffic-map', $state) }}'">
                        <td><strong>{{ $state->name }}</strong></td>
                        <td><span class="badge {{ $state->traffic_level }}">{{ $state->traffic_level }}</span></td>
                        <td><a class="btn small" href="{{ route('monitor.traffic-map', $state) }}" onclick="event.stopPropagation();">View MAP</a></td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection