@extends('components.layout')

@section('title', 'Traffic & Transport | ' . ($settings['site_name'] ?? 'LOCAL PULSE'))

@section('content')
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <h1 class="text-3xl font-bold text-gray-900 mb-8">Traffic & Transport</h1>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <div class="lg:col-span-2 space-y-6">
                <!-- Traffic Incidents -->
                <div class="bg-white border border-gray-200 rounded-lg p-6">
                    <h2 class="text-xl font-bold text-gray-900 mb-4">Current Incidents</h2>
                    <div class="space-y-3">
                        @foreach($trafficIncidents as $incident)
                            <div class="flex items-start gap-3 p-3 bg-gray-50 rounded-lg">
                                <div class="flex-shrink-0 mt-0.5">
                                    @switch($incident['type'])
                                        @case('accident')
                                            <svg class="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4.5c-.774-.833-1.732-.833-2.5 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
                                            @break
                                        @case('congestion')
                                            <svg class="w-5 h-5 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                                            @break
                                        @case('roadwork')
                                            <svg class="w-5 h-5 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                                            @break
                                    @endswitch
                                </div>
                                <div class="flex-1">
                                    <h3 class="text-sm font-semibold text-gray-900">{{ $incident['location'] }}</h3>
                                    <div class="flex items-center gap-3 mt-1 text-xs text-gray-500">
                                        <span class="px-2 py-0.5 bg-gray-200 rounded">{{ $incident['status'] }}</span>
                                        <span>Delay: {{ $incident['delay'] }}</span>
                                        <span>{{ $incident['time'] }}</span>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <!-- Traffic Articles -->
                @if($trafficArticles->isNotEmpty())
                    <div class="bg-white border border-gray-200 rounded-lg p-6">
                        <h2 class="text-xl font-bold text-gray-900 mb-4">Latest Traffic News</h2>
                        <div class="space-y-4">
                            @foreach($trafficArticles as $article)
                                <a href="{{ route('articles.show', $article->slug) }}" class="block group">
                                    <h3 class="text-sm font-semibold text-gray-900 group-hover:text-red-600 transition-colors">{{ $article->title }}</h3>
                                    <p class="text-xs text-gray-500 mt-1">{{ $article->published_at?->format('d M Y') }}</p>
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>

            <aside>
                <!-- Public Transport -->
                <div class="bg-white border border-gray-200 rounded-lg p-6">
                    <h3 class="text-lg font-bold text-gray-900 mb-4">Public Transport</h3>
                    <div class="space-y-3">
                        @foreach($publicTransport as $line)
                            <div class="flex items-center justify-between p-2 bg-gray-50 rounded">
                                <div>
                                    <p class="text-sm font-semibold text-gray-900">{{ $line['line'] }}</p>
                                    <p class="text-xs text-gray-500">{{ $line['delays'] }}</p>
                                </div>
                                <span class="px-2 py-0.5 text-xs font-semibold rounded
                                    @if($line['status'] == 'Good') bg-green-100 text-green-700
                                    @elseif($line['status'] == 'Suspended') bg-red-100 text-red-700
                                    @else bg-yellow-100 text-yellow-700
                                    @endif">
                                    {{ $line['status'] }}
                                </span>
                            </div>
                        @endforeach
                    </div>
                    <p class="text-xs text-gray-400 mt-3">Last updated: {{ now()->format('g:i A') }}</p>
                </div>
            </aside>
        </div>
    </div>
@endsection