@extends('examples.modern-layout-v2')
@section('title', __('messages.menu.cities'))
@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>
                <h2 class="text-3xl font-bold text-gray-900 mb-2">{{__('messages.menu.cities')}}</h2>
                <p class="text-gray-600">Manage cities and view statistics for each city</p>
            </div>
        </div>
    </div>

    <!-- Cities Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @forelse($cities as $city)
        <a href="{{route('cities.show', $city->id)}}" class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow duration-200 block">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center">
                    <span class="material-icons text-blue-600 text-3xl mr-3">location_city</span>
                    <div>
                        <h3 class="text-xl font-bold text-gray-900">{{$city->name}}</h3>
                        <p class="text-sm text-gray-500">{{strtoupper($city->code)}}</p>
                    </div>
                </div>
                @if($city->status)
                <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-xs font-semibold">Active</span>
                @else
                <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-xs font-semibold">Inactive</span>
                @endif
            </div>
            <div class="grid grid-cols-2 gap-4 mt-4">
                <div>
                    <div class="text-2xl font-bold text-gray-900">{{number_format($city->queues_count)}}</div>
                    <div class="text-xs text-gray-600">Queues</div>
                </div>
                <div>
                    <div class="text-2xl font-bold text-gray-900">{{number_format($city->calls_count)}}</div>
                    <div class="text-xs text-gray-600">Calls</div>
                </div>
                <div>
                    <div class="text-2xl font-bold text-gray-900">{{number_format($city->messages_count)}}</div>
                    <div class="text-xs text-gray-600">Messages</div>
                </div>
                <div>
                    <div class="text-2xl font-bold text-gray-900">{{number_format($city->locations_count)}}</div>
                    <div class="text-xs text-gray-600">Locations</div>
                </div>
            </div>
        </a>
        @empty
        <div class="col-span-full bg-white rounded-2xl shadow-sm border border-gray-100 p-12 text-center">
            <span class="material-icons text-gray-400 text-6xl mb-4 block">location_city</span>
            <p class="text-gray-600 text-lg">No cities found</p>
            <p class="text-gray-500 text-sm mt-2">Cities will appear here once local servers start syncing data</p>
        </div>
        @endforelse
    </div>
</div>
@endsection