@extends('examples.modern-layout-v2')
@section('title', __('messages.menu.data_overview'))
@section('data-overview', '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.data_overview')}}</h2>
                <p class="text-gray-600">Overview of all synced data across cities</p>
            </div>
        </div>
    </div>

    <!-- Filter by City -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
        <form method="GET" action="{{route('data.overview')}}" class="flex items-center gap-4">
            <label class="font-semibold text-gray-700">Filter by City:</label>
            <select name="city_id" onchange="this.form.submit()" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                <option value="">All Cities</option>
                @foreach($cities as $city)
                <option value="{{$city->id}}" @if($selectedCityId == $city->id) selected @endif>{{$city->name}}</option>
                @endforeach
            </select>
        </form>
    </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($stats['total_queues'])}}</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($stats['total_calls'])}}</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($stats['total_messages'])}}</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($stats['total_locations'])}}</div>
            <div class="text-sm text-gray-600">Total Locations</div>
        </div>
    </div>

    <!-- Data by City -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
        <h3 class="text-xl font-bold text-gray-900 mb-4">Data Breakdown 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>
                    </tr>
                </thead>
                <tbody>
                    @forelse($dataByCity as $cityData)
                    <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">{{$cityData->name}}</span>
                                <span class="ml-2 text-xs text-gray-500">({{strtoupper($cityData->code)}})</span>
                            </div>
                        </td>
                        <td class="text-right py-3 px-4 text-gray-700">{{number_format($cityData->queues_count)}}</td>
                        <td class="text-right py-3 px-4 text-gray-700">{{number_format($cityData->calls_count)}}</td>
                        <td class="text-right py-3 px-4 text-gray-700">{{number_format($cityData->messages_count)}}</td>
                        <td class="text-right py-3 px-4 text-gray-700">{{number_format($cityData->locations_count)}}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="text-center py-8 text-gray-500">No data available</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Recent Activity -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <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-2 max-h-96 overflow-y-auto">
                @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->city->name ?? 'Unknown'}} • {{$queue->created_at->diffForHumans()}}
                        </div>
                    </div>
                </div>
                @empty
                <p class="text-gray-500 text-center py-4">No recent queues</p>
                @endforelse
            </div>
        </div>
        <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-2 max-h-96 overflow-y-auto">
                @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->city->name ?? 'Unknown'}} • {{$call->created_at->diffForHumans()}}
                        </div>
                    </div>
                </div>
                @empty
                <p class="text-gray-500 text-center py-4">No recent calls</p>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection