@extends('layouts.app')
@section('title', 'Transport Dashboard')
@section('content')
<h2 style="font-size:18px;color:#0b4f2c;margin-bottom:16px;">Transport Dashboard</h2>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px;">
    <div class="card" style="margin:0;"><div style="font-size:11px;color:#777;">Routes</div><div style="font-size:22px;font-weight:bold;color:#0b4f2c;">{{ $stats['routes'] }}</div></div>
    <div class="card" style="margin:0;"><div style="font-size:11px;color:#777;">Vehicles</div><div style="font-size:22px;font-weight:bold;">{{ $stats['vehicles'] }}</div></div>
    <div class="card" style="margin:0;"><div style="font-size:11px;color:#777;">Drivers</div><div style="font-size:22px;font-weight:bold;">{{ $stats['drivers'] }}</div></div>
</div>

<div class="card">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;">
        <h3 style="font-size:15px;color:#0b4f2c;">Routes</h3>
        <div style="display:flex;gap:8px;">
            <a href="{{ url('/transport/vehicles') }}" style="background:#f4f6f5;color:#333;text-decoration:none;padding:7px 14px;border-radius:6px;font-size:12.5px;">Vehicles</a>
            <a href="{{ url('/transport/drivers') }}" style="background:#f4f6f5;color:#333;text-decoration:none;padding:7px 14px;border-radius:6px;font-size:12.5px;">Drivers</a>
            <a href="{{ url('/transport/allocate') }}" style="background:#0b4f2c;color:#fff;text-decoration:none;padding:7px 14px;border-radius:6px;font-size:12.5px;">Allocate Student</a>
        </div>
    </div>
    @forelse($routes as $route)
        <div style="border:1px solid #eee;border-radius:8px;padding:12px;margin-bottom:10px;">
            <a href="{{ url('/transport/routes/' . $route->id) }}" style="text-decoration:none;color:#0b4f2c;font-weight:bold;">{{ $route->name }}</a>
            <div style="font-size:12px;color:#666;margin-top:4px;">{{ $route->buses->count() }} vehicle(s) &middot; {{ $route->routeStops->count() }} stop(s)</div>
        </div>
    @empty
        <p style="color:#999;font-size:13px;text-align:center;padding:20px 0;">No routes set up yet.</p>
    @endforelse
</div>
@endsection