@extends('examples.modern-layout-v2')
@section('title', $city->name)
@section('cities', 'bg-blue-50 text-blue-700')

@section('content')
<div class="space-y-6">
    <!-- Page Header -->
    <div class="mb-8">
        <div class="flex items-center justify-between">
            <div>
                <div class="flex items-center mb-2">
                    <a href="{{route('cities.index')}}" class="text-blue-600 hover:text-blue-700 mr-2">
                        <span class="material-icons">arrow_back</span>
                    </a>
                    <h2 class="text-3xl font-bold text-gray-900">{{$city->name}}</h2>
                    <span class="ml-3 text-sm text-gray-500">({{strtoupper($city->code)}})</span>
                </div>
                <p class="text-gray-600">Detailed statistics and recent activity for {{$city->name}}</p>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
            <div class="flex items-center justify-between mb-2">
                <span class="material-icons text-blue-600 text-3xl">queue</span>
            </div>
            <div class="text-3xl font-bold text-gray-900 mb-1">{{number_format($city->queues_count)}}</div>
            <div class="text-sm text-gray-600">Queues</div>
        </div>
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
            <div class="flex items-center justify-between mb-2">
                <span class="material-icons text-green-600 text-3xl">call</span>
            </div>
            <div class="text-3xl font-bold text-gray-900 mb-1">{{number_format($city->calls_count)}}</div>
            <div class="text-sm text-gray-600">Calls</div>
        </div>
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
            <div class="flex items-center justify-between mb-2">
                <span class="material-icons text-purple-600 text-3xl">message</span>
            </div>
            <div class="text-3xl font-bold text-gray-900 mb-1">{{number_format($city->messages_count)}}</div>
            <div class="text-sm text-gray-600">Messages</div>
        </div>
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
            <div class="flex items-center justify-between mb-2">
                <span class="material-icons text-orange-600 text-3xl">location_on</span>
            </div>
            <div class="text-3xl font-bold text-gray-900 mb-1">{{number_format($city->locations_count)}}</div>
            <div class="text-sm text-gray-600">Locations</div>
        </div>
    </div>

    <!-- Recent Activity -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- Recent Queues -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
            <h3 class="text-lg font-bold text-gray-900 mb-4">Recent Queues</h3>
            <div class="space-y-3">
                @forelse($recentQueues as $queue)
                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                    <div>
                        <div class="font-semibold text-gray-900">{{$queue->letter}}-{{$queue->number}}</div>
                        <div class="text-xs text-gray-500">{{$queue->created_at->diffForHumans()}}</div>
                    </div>
                    <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs">
                        {{$queue->name ?? 'N/A'}}
                    </span>
                </div>
                @empty
                <p class="text-gray-500 text-center py-4">No recent queues</p>
                @endforelse
            </div>
        </div>

        <!-- Recent Calls -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
            <h3 class="text-lg font-bold text-gray-900 mb-4">Recent Calls</h3>
            <div class="space-y-3">
                @forelse($recentCalls as $call)
                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                    <div>
                        <div class="font-semibold text-gray-900">{{$call->token_letter}}-{{$call->token_number}}</div>
                        <div class="text-xs text-gray-500">{{$call->created_at->diffForHumans()}}</div>
                    </div>
                    <span class="px-2 py-1 bg-green-100 text-green-800 rounded text-xs">
                        Called
                    </span>
                </div>
                @empty
                <p class="text-gray-500 text-center py-4">No recent calls</p>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection