@extends('examples.modern-layout-v2')
@section('title', __('messages.menu.sync_status'))
@section('sync_status', '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.sync_status')}}</h2>
                <p class="text-gray-600">Monitor synchronization status and data statistics by city</p>
            </div>
        </div>
    </div>

    <!-- Overall Statistics -->
    <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($totalQueues)}}</div>
            <div class="text-sm text-gray-600">Total 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($totalCalls)}}</div>
            <div class="text-sm text-gray-600">Total 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($totalMessages)}}</div>
            <div class="text-sm text-gray-600">Total 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($totalLocations)}}</div>
            <div class="text-sm text-gray-600">Total Locations</div>
        </div>
    </div>

    <!-- Cities Statistics -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
        <h3 class="text-xl font-bold text-gray-900 mb-4">Statistics by City</h3>
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="border-b border-gray-200">
                        <th class="text-left py-3 px-4 font-semibold text-gray-700">City</th>
                        <th class="text-right py-3 px-4 font-semibold text-gray-700">Queues</th>
                        <th class="text-right py-3 px-4 font-semibold text-gray-700">Calls</th>
                        <th class="text-right py-3 px-4 font-semibold text-gray-700">Messages</th>
                        <th class="text-right py-3 px-4 font-semibold text-gray-700">Locations</th>
                        <th class="text-right py-3 px-4 font-semibold text-gray-700">Last Sync</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($cities as $city)
                    <tr class="border-b border-gray-100 hover:bg-gray-50">
                        <td class="py-3 px-4">
                            <div class="flex items-center">
                                <span class="material-icons text-gray-400 mr-2">location_city</span>
                                <span class="font-semibold text-gray-900">{{$city->name}}</span>
                                <span class="ml-2 text-xs text-gray-500">({{strtoupper($city->code)}})</span>
                            </div>
                        </td>
                        <td class="text-right py-3 px-4 text-gray-700">{{number_format($city->queues_count)}}</td>
                        <td class="text-right py-3 px-4 text-gray-700">{{number_format($city->calls_count)}}</td>
                        <td class="text-right py-3 px-4 text-gray-700">{{number_format($city->messages_count)}}</td>
                        <td class="text-right py-3 px-4 text-gray-700">{{number_format($city->locations_count)}}</td>
                        <td class="text-right py-3 px-4 text-gray-600 text-sm">
                            @if(isset($lastSyncByCity[$city->id]) && $lastSyncByCity[$city->id])
                                {{$lastSyncByCity[$city->id]->diffForHumans()}}
                            @else
                                <span class="text-gray-400">Never</span>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="text-center py-8 text-gray-500">No cities found</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection