@extends('layouts.app')

@section('title', 'Monitor')

@section('content')
<div class="page-head">
    <div>
        <h1 class="page-title">Monitor</h1>
        <p class="page-subtitle">State list for monitoring. Click Franchise Zones to split a state map into four default zones. Click Map to open the state traffic map.</p>
    </div>
</div>

<div class="card">
    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>State</th>
                    <th>Franchise Zones</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><br><span class="muted">{{ $state->state_code }}</span></td>
                        <td>
                            <a class="btn small secondary" href="{{ route('monitor.franchise-zones', $state) }}" onclick="event.stopPropagation();">
                                Open Zones {{ $state->franchise_zones_count ? '(' . $state->franchise_zones_count . ')' : '' }}
                            </a>
                        </td>
                        <td>
                            <a class="btn small" href="{{ route('monitor.traffic-map', $state) }}" onclick="event.stopPropagation();">Open Map</a>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection