@extends('examples.modern-layout-v2')
@section('title', __('messages.menu.sync'))
@section('sync', 'bg-blue-50 text-blue-700')

@section('content')
@php
    // $isApiServer, $isSuperAdmin, $cities, $citySyncDetails are passed from controller.
@endphp

<div class="mb-8">
    <div class="flex items-center justify-between">
        <div class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
            <h2 class="text-3xl font-bold text-gray-900 mb-2">{{ __('messages.menu.sync') }}</h2>
            <p class="text-gray-600">{{ __('messages.sync.health_subtitle') }}</p>
        </div>
    </div>
</div>

@if(session('success'))
    <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 5000)" 
         class="mb-6 bg-green-50 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') border-r-4 @else border-l-4 @endif border-green-500 rounded-xl p-5 shadow-lg">
        <div class="flex items-center justify-between @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
            <div class="flex items-start @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                <div class="flex-shrink-0">
                    <span class="material-icons text-green-600 text-2xl">check_circle</span>
                </div>
                <div class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') mr-4 @else ml-4 @endif flex-1">
                    <p class="text-green-800 font-semibold text-lg">{{ session('success') }}</p>
                </div>
            </div>
            <button @click="show = false" class="text-green-600 hover:text-green-800 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') mr-auto ml-0 @endif">
                <span class="material-icons">close</span>
            </button>
        </div>
    </div>
    <script>
        window.scrollTo({ top: 0, behavior: 'smooth' });
    </script>
@endif

@if(session('error'))
    <div class="mb-6 bg-red-50 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') border-r-4 @else border-l-4 @endif border-red-500 rounded-xl p-5 shadow-sm">
        <div class="flex items-start @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
            <div class="flex-shrink-0">
                <span class="material-icons text-red-600 text-2xl">error_outline</span>
            </div>
            <div class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') mr-4 @else ml-4 @endif flex-1">
                <p class="text-red-800 font-medium">{{ session('error') }}</p>
            </div>
        </div>
    </div>
@endif

<div class="space-y-6">
    @if($isApiServer && $isSuperAdmin)
        <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6">
            <div class="flex items-center justify-between mb-4">
                <div>
                    <h3 class="text-lg font-semibold text-gray-900">{{ __('messages.sync.add_city_title') }}</h3>
                    <p class="text-sm text-gray-500">{{ __('messages.sync.add_city_hint') }}</p>
                </div>
                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                    <span class="material-icons text-blue-600 text-2xl">add_location_alt</span>
                </div>
            </div>

            <form method="post" action="{{ route('sync.cities.store') }}" class="grid grid-cols-1 md:grid-cols-3 gap-4">
                @csrf
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('messages.sync.city_code') }}</label>
                    <input name="code" value="{{ old('code') }}" class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="erb" required>
                    @error('code') <p class="mt-2 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('messages.sync.city_name') }}</label>
                    <input name="name" value="{{ old('name') }}" class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Erbil" required>
                    @error('name') <p class="mt-2 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
                <div class="flex items-end">
                    <button type="submit" class="w-full inline-flex items-center justify-center px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-500 text-white font-semibold rounded-xl hover:from-blue-700 hover:to-blue-600 transition-all duration-300 shadow-lg hover:shadow-xl">
                        <span class="material-icons mr-2">add</span>
                        <span>{{ __('messages.sync.add_city_button') }}</span>
                    </button>
                </div>
            </form>
        </div>

        <!-- Available cities management -->
        <div class="bg-white border border-gray-200 rounded-2xl shadow-sm overflow-hidden">
            <div class="p-6 bg-gradient-to-r from-slate-50 to-white border-b border-gray-200">
                <div class="flex items-start justify-between">
                    <div>
                        <h3 class="text-lg font-semibold text-gray-900">{{ __('messages.sync.manage_cities_title') }}</h3>
                        <p class="text-sm text-gray-500 mt-1">{{ __('messages.sync.manage_cities_hint') }}</p>
                    </div>
                    <div class="w-12 h-12 bg-white rounded-xl flex items-center justify-center border border-gray-200 shadow-sm">
                        <span class="material-icons text-gray-700 text-2xl">location_city</span>
                    </div>
                </div>
            </div>

            <!-- Desktop table -->
            <div class="hidden md:block" x-data="{ openCity: @if(session('success') && session('saved_city_code')) '{{ strtoupper(session('saved_city_code')) }}' @else null @endif }" x-init="@if(session('success') && session('saved_city_code')) setTimeout(() => { openCity = '{{ strtoupper(session('saved_city_code')) }}'; }, 100); @endif">
                <div class="overflow-x-auto">
                    <table class="min-w-full text-sm">
                        <thead class="sticky top-0 bg-white">
                            <tr class="text-left text-xs font-semibold uppercase tracking-wider text-gray-500">
                                <th class="py-3 px-6">{{ __('messages.sync.city_code') }}</th>
                                <th class="py-3 px-6">{{ __('messages.sync.city_name') }}</th>
                                <th class="py-3 px-6">{{ __('messages.sync.status') }}</th>
                                <th class="py-3 px-6">SSH Host</th>
                                <th class="py-3 px-6">{{ __('messages.sync.actions') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100">
                            @forelse($cities as $city)
                                @php
                                    $cityHasData = ($city->queues_count ?? 0) > 0
                                        || ($city->calls_count ?? 0) > 0
                                        || ($city->messages_count ?? 0) > 0
                                        || ($city->locations_count ?? 0) > 0;
                                @endphp
                                <tr class="hover:bg-slate-50/70">
                                    <td class="py-4 px-6">
                                        <div class="inline-flex items-center">
                                            <span class="font-mono text-gray-900">{{ strtoupper($city->code) }}</span>
                                        </div>
                                    </td>
                                    <td class="py-4 px-6">
                                        <form method="post" action="{{ route('sync.cities.update', $city) }}" class="flex items-center gap-3">
                                            @csrf
                                            @method('PATCH')
                                            <input name="name" value="{{ $city->name }}" class="w-full max-w-[420px] px-3 py-2 border border-gray-200 rounded-xl bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
                                    </td>
                                    <td class="py-4 px-6">
                                            <div class="flex items-center gap-3">
                                                <select name="status" class="px-3 py-2 border border-gray-200 rounded-xl bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                                    <option value="1" @if($city->status) selected @endif>{{ __('messages.sync.active') }}</option>
                                                    <option value="0" @if(!$city->status) selected @endif>{{ __('messages.sync.inactive') }}</option>
                                                </select>
                                                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold
                                                    @if($city->status) bg-green-100 text-green-800 @else bg-gray-100 text-gray-700 @endif">
                                                    <span class="material-icons text-[16px] mr-1">@if($city->status) check_circle @else pause_circle @endif</span>
                                                    @if($city->status) {{ __('messages.sync.active') }} @else {{ __('messages.sync.inactive') }} @endif
                                                </span>
                                            </div>
                                    <td class="py-4 px-6">
                                        <div class="flex items-center gap-2">
                                            @if($city->ssh_host)
                                                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                                    <span class="material-icons text-sm mr-1">check_circle</span>
                                                    {{ $city->ssh_host }}
                                                </span>
                                            @else
                                                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-orange-100 text-orange-800">
                                                    <span class="material-icons text-sm mr-1">warning</span>
                                                    Not configured
                                                </span>
                                            @endif
                                            <button type="button" @click="openCity = openCity === '{{ strtoupper($city->code) }}' ? null : '{{ strtoupper($city->code) }}'" class="text-blue-600 hover:text-blue-800">
                                                <span class="material-icons text-sm" x-text="openCity === '{{ strtoupper($city->code) }}' ? 'expand_less' : 'expand_more'"></span>
                                            </button>
                                        </div>
                                    </td>
                                    <td class="py-4 px-6">
                                            <div class="flex items-center gap-2">
                                                <button type="submit" class="inline-flex items-center px-3.5 py-2 bg-blue-600 text-white rounded-xl hover:bg-blue-700 shadow-sm">
                                                    <span class="material-icons text-base mr-1">save</span>
                                                    {{ __('messages.sync.save') }}
                                                </button>
                                        </form>

                                                <form method="post" action="{{ route('sync.cities.destroy', $city) }}" onsubmit="return confirm('{{ __('messages.sync.delete') }} {{ strtoupper($city->code) }}?');">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit"
                                                            class="inline-flex items-center px-3.5 py-2 rounded-xl shadow-sm
                                                                @if($cityHasData) bg-red-200 text-red-700 cursor-not-allowed @else bg-red-600 text-white hover:bg-red-700 @endif"
                                                            @if($cityHasData) disabled title="{{ __('messages.sync.cannot_delete_city_with_data') }}" @endif>
                                                        <span class="material-icons text-base mr-1">delete</span>
                                                        {{ __('messages.sync.delete') }}
                                                    </button>
                                                </form>
                                            </div>
                                    </td>
                                </tr>
                                
                                <!-- SSH Configuration Row (Expandable) -->
                                <tr x-show="openCity === '{{ strtoupper($city->code) }}'" x-transition class="bg-gray-50">
                                    <td colspan="5" class="px-6 py-4">
                                        <form method="post" action="{{ route('sync.cities.update', $city) }}" class="space-y-4" onsubmit="
                                            const form = event.target;
                                            const formData = new FormData(form);
                                            const data = {};
                                            formData.forEach((value, key) => {
                                                if (key === 'ssh_password') {
                                                    data[key] = value ? '***' + value.length + ' chars' : 'empty';
                                                } else {
                                                    data[key] = value;
                                                }
                                            });
                                            fetch('http://127.0.0.1:7242/ingest/7353060f-8dfd-4093-bea2-d61fde616322', {
                                                method: 'POST',
                                                headers: {'Content-Type': 'application/json'},
                                                body: JSON.stringify({
                                                    location: 'sync/index.blade.php:191',
                                                    message: 'SSH Form submitting',
                                                    data: {
                                                        city_code: '{{ $city->code }}',
                                                        form_action: form.action,
                                                        form_method: form.method,
                                                        form_data: data,
                                                        csrf_token: formData.get('_token') ? 'present' : 'missing',
                                                        method_override: formData.get('_method')
                                                    },
                                                    timestamp: Date.now(),
                                                    sessionId: 'debug-session',
                                                    runId: 'run1',
                                                    hypothesisId: 'H4'
                                                })
                                            }).catch(() => {});
                                            console.log('SSH Form submitting for {{ $city->code }}', data);
                                            return true;
                                        ">
                                            @csrf
                                            @method('PATCH')
                                            <input type="hidden" name="name" value="{{ $city->name }}">
                                            <input type="hidden" name="status" value="{{ $city->status }}">
                                            <input type="hidden" name="city_code" value="{{ $city->code }}">
                                            
                                            <div class="flex items-center gap-2 mb-3">
                                                <span class="material-icons text-blue-600">cloud_upload</span>
                                                <h4 class="font-semibold text-gray-900">SSH Configuration for Deployments</h4>
                                            </div>
                                            
                                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                                <div>
                                                    <label class="block text-xs font-semibold text-gray-700 mb-1">SSH Host (IP)</label>
                                                    <input name="ssh_host" value="{{ $city->ssh_host }}" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" placeholder="192.168.64.66">
                                                </div>
                                                <div>
                                                    <label class="block text-xs font-semibold text-gray-700 mb-1">SSH Port</label>
                                                    <input name="ssh_port" type="number" value="{{ $city->ssh_port ?? 22 }}" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" placeholder="22">
                                                </div>
                                                <div>
                                                    <label class="block text-xs font-semibold text-gray-700 mb-1">SSH User</label>
                                                    <input name="ssh_user" value="{{ $city->ssh_user }}" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" placeholder="ahmed">
                                                </div>
                                                <div>
                                                    <label class="block text-xs font-semibold text-gray-700 mb-1">SSH Password</label>
                                                    <input name="ssh_password" type="password" value="" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" placeholder="{{ $city->ssh_password ? 'Leave blank to keep current' : 'Enter SSH password' }}">
                                                </div>
                                                <div class="md:col-span-2">
                                                    <label class="block text-xs font-semibold text-gray-700 mb-1">Remote Path</label>
                                                    <input name="ssh_path" value="{{ $city->ssh_path }}" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" placeholder="/var/www/qflow">
                                                </div>
                                            </div>
                                            
                                            <div class="flex items-center justify-end gap-3">
                                                @if($city->ssh_host)
                                                <div class="flex items-center gap-2 text-green-600 text-sm">
                                                    <span class="material-icons text-base">check_circle</span>
                                                    <span>Configured</span>
                                                </div>
                                                @else
                                                <div class="flex items-center gap-2 text-orange-600 text-sm">
                                                    <span class="material-icons text-base">warning</span>
                                                    <span>Not configured</span>
                                                </div>
                                                @endif
                                                <button type="submit" class="inline-flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 shadow-sm transition-colors" onclick="
                                                    const form = this.closest('form');
                                                    const formData = new FormData(form);
                                                    fetch('http://127.0.0.1:7242/ingest/7353060f-8dfd-4093-bea2-d61fde616322', {
                                                        method: 'POST',
                                                        headers: {'Content-Type': 'application/json'},
                                                        body: JSON.stringify({
                                                            location: 'sync/index.blade.php:238',
                                                            message: 'Save SSH Config button clicked',
                                                            data: {
                                                                city_code: '{{ $city->code }}',
                                                                form_action: form.action,
                                                                button_type: this.type
                                                            },
                                                            timestamp: Date.now(),
                                                            sessionId: 'debug-session',
                                                            runId: 'run1',
                                                            hypothesisId: 'H5'
                                                        })
                                                    }).catch(() => {});
                                                    console.log('Button clicked for {{ $city->code }}');
                                                ">
                                                    <span class="material-icons text-sm mr-1">save</span>
                                                    Save SSH Config
                                                </button>
                                            </div>
                                        </form>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="py-8 text-center text-gray-500">
                                        <span class="material-icons text-4xl mb-2">location_city</span>
                                        <p>No cities found.</p>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Mobile cards -->
            <div class="md:hidden p-4 space-y-3">
                @foreach($cities as $city)
                    @php
                        $cityHasData = ($city->queues_count ?? 0) > 0
                            || ($city->calls_count ?? 0) > 0
                            || ($city->messages_count ?? 0) > 0
                            || ($city->locations_count ?? 0) > 0;
                    @endphp
                    <div class="border border-gray-200 rounded-2xl p-4 shadow-sm bg-white">
                        <div class="flex items-start justify-between">
                            <div>
                                <div class="text-xs text-gray-500">{{ __('messages.sync.city_code') }}</div>
                                <div class="font-mono font-semibold text-gray-900">{{ strtoupper($city->code) }}</div>
                            </div>
                            <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold
                                @if($city->status) bg-green-100 text-green-800 @else bg-gray-100 text-gray-700 @endif">
                                <span class="material-icons text-[16px] mr-1">@if($city->status) check_circle @else pause_circle @endif</span>
                                @if($city->status) {{ __('messages.sync.active') }} @else {{ __('messages.sync.inactive') }} @endif
                            </span>
                        </div>

                        <form method="post" action="{{ route('sync.cities.update', $city) }}" class="mt-4 space-y-3">
                            @csrf
                            @method('PATCH')
                            <div>
                                <label class="block text-xs font-semibold text-gray-500 mb-1">{{ __('messages.sync.city_name') }}</label>
                                <input name="name" value="{{ $city->name }}" class="w-full px-3 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
                            </div>
                            <div>
                                <label class="block text-xs font-semibold text-gray-500 mb-1">{{ __('messages.sync.status') }}</label>
                                <select name="status" class="w-full px-3 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                    <option value="1" @if($city->status) selected @endif>{{ __('messages.sync.active') }}</option>
                                    <option value="0" @if(!$city->status) selected @endif>{{ __('messages.sync.inactive') }}</option>
                                </select>
                            </div>
                            
                            <!-- SSH Configuration for Deployments -->
                            <div class="border-t border-gray-200 pt-3 mt-3">
                                <h4 class="text-xs font-bold text-gray-700 mb-2 flex items-center">
                                    <span class="material-icons text-sm mr-1">cloud_upload</span>
                                    SSH Configuration (for Deployments)
                                </h4>
                                <div class="space-y-2">
                                    <div>
                                        <label class="block text-xs font-semibold text-gray-500 mb-1">SSH Host (IP)</label>
                                        <input name="ssh_host" value="{{ $city->ssh_host }}" class="w-full px-3 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" placeholder="192.168.64.66">
                                    </div>
                                    <div class="grid grid-cols-2 gap-2">
                                        <div>
                                            <label class="block text-xs font-semibold text-gray-500 mb-1">SSH Port</label>
                                            <input name="ssh_port" type="number" value="{{ $city->ssh_port ?? 22 }}" class="w-full px-3 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" placeholder="22">
                                        </div>
                                        <div>
                                            <label class="block text-xs font-semibold text-gray-500 mb-1">SSH User</label>
                                            <input name="ssh_user" value="{{ $city->ssh_user }}" class="w-full px-3 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" placeholder="ahmed">
                                        </div>
                                    </div>
                                    <div>
                                        <label class="block text-xs font-semibold text-gray-500 mb-1">SSH Password</label>
                                        <input name="ssh_password" type="password" value="{{ $city->ssh_password ? '••••••••' : '' }}" class="w-full px-3 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" placeholder="Leave blank to keep current">
                                    </div>
                                    <div>
                                        <label class="block text-xs font-semibold text-gray-500 mb-1">Remote Path</label>
                                        <input name="ssh_path" value="{{ $city->ssh_path }}" class="w-full px-3 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" placeholder="/var/www/qflow">
                                    </div>
                                </div>
                            </div>
                            
                            <div class="flex gap-2">
                                <button type="submit" class="flex-1 inline-flex items-center justify-center px-3.5 py-2 bg-blue-600 text-white rounded-xl hover:bg-blue-700">
                                    <span class="material-icons text-base mr-1">save</span>
                                    {{ __('messages.sync.save') }}
                                </button>
                                <form method="post" action="{{ route('sync.cities.destroy', $city) }}" class="flex-1" onsubmit="return confirm('{{ __('messages.sync.delete') }} {{ strtoupper($city->code) }}?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit"
                                            class="w-full inline-flex items-center justify-center px-3.5 py-2 rounded-xl
                                                @if($cityHasData) bg-red-200 text-red-700 cursor-not-allowed @else bg-red-600 text-white hover:bg-red-700 @endif"
                                            @if($cityHasData) disabled title="{{ __('messages.sync.cannot_delete_city_with_data') }}" @endif>
                                        <span class="material-icons text-base mr-1">delete</span>
                                        {{ __('messages.sync.delete') }}
                                    </button>
                                </form>
                            </div>
                        </form>
                    </div>
                @endforeach
            </div>
        </div>
    @endif

    <!-- EXACT UI copied from Settings (API City Sync Status) -->
    <div class="space-y-6">
        {{-- Info banner intentionally hidden per request --}}

        @if($cities->count() > 0)
            <div class="space-y-4">
                @foreach($cities as $city)
                    @php
                        $details = $citySyncDetails[$city->id] ?? [];
                        $lastSync = $details['last_sync'] ?? null;
                        $isHealthy = $lastSync && $lastSync->isAfter(now()->subDay());
                        $hasData = $city->queues_count > 0 || $city->calls_count > 0 || $city->messages_count > 0 || $city->locations_count > 0;

                        // Determine status color
                        if ($isHealthy && $hasData) {
                            $statusColor = 'green';
                            $statusText = 'Healthy';
                            $statusIcon = 'check_circle';
                        } elseif ($hasData) {
                            $statusColor = 'yellow';
                            $statusText = 'Stale';
                            $statusIcon = 'warning';
                        } else {
                            $statusColor = 'gray';
                            $statusText = 'No Data';
                            $statusIcon = 'info';
                        }
                    @endphp

                    <div class="bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-md transition-shadow" x-data="{ expanded: false }">
                        <!-- City Header -->
                        <div class="px-6 py-4 border-b border-gray-200">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-4">
                                    <div class="flex-shrink-0">
                                        <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                                            <span class="material-icons text-blue-600 text-2xl">location_city</span>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="flex items-center gap-2">
                                            <h4 class="text-lg font-semibold text-gray-900">{{ $city->name }}</h4>
                                            @if(isset($details['app_version']))
                                                <span class="inline-flex items-center px-2 py-1 rounded-md text-xs font-semibold bg-purple-100 text-purple-800">
                                                    v{{ $details['app_version'] }}
                                                </span>
                                            @endif
                                        </div>
                                        <p class="text-sm text-gray-500">Code: {{ strtoupper($city->code) }}</p>
                                    </div>
                                </div>
                                <div class="flex items-center space-x-4">
                                    <div class="text-right">
                                        <p class="text-xs text-gray-500 mb-1">Last Sync</p>
                                        <p class="text-sm font-medium text-gray-900">
                                            @if($lastSync)
                                                {{ $lastSync->diffForHumans() }}
                                            @else
                                                <span class="text-gray-400">Never</span>
                                            @endif
                                        </p>
                                        @if(isset($details['last_success_run']) && $details['last_success_run'])
                                            <p class="text-xs text-green-700 mt-1">
                                                Last success:
                                                {{ \Carbon\Carbon::parse($details['last_success_run']->finished_at)->diffForHumans() }}
                                                @if(!empty($details['last_success_run']->duration_ms))
                                                    ({{ (int)$details['last_success_run']->duration_ms }}ms)
                                                @endif
                                            </p>
                                        @endif
                                        @if(isset($details['last_failed_run']) && $details['last_failed_run'])
                                            <p class="text-xs text-red-700 mt-1">
                                                Last failure:
                                                {{ \Carbon\Carbon::parse($details['last_failed_run']->finished_at)->diffForHumans() }}
                                            </p>
                                        @endif
                                    </div>
                                    <span class="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium @if($statusColor === 'green') bg-green-100 text-green-800 @elseif($statusColor === 'yellow') bg-yellow-100 text-yellow-800 @else bg-gray-100 text-gray-800 @endif">
                                        <span class="material-icons text-sm mr-1.5">{{ $statusIcon }}</span>
                                        {{ $statusText }}
                                    </span>
                                    <button @click="expanded = !expanded" class="p-2 text-gray-400 hover:text-gray-600 transition-colors">
                                        <span class="material-icons transform transition-transform" :class="{ 'rotate-180': expanded }">expand_more</span>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Summary Stats -->
                        <div class="px-6 py-4 bg-gray-50">
                            <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-4">
                                <div class="text-center">
                                    <div class="text-2xl font-bold text-gray-900">{{ number_format($city->queues_count) }}</div>
                                    <div class="text-xs text-gray-500 mt-1">Queues</div>
                                </div>
                                <div class="text-center">
                                    <div class="text-2xl font-bold text-gray-900">{{ number_format($city->calls_count) }}</div>
                                    <div class="text-xs text-gray-500 mt-1">Calls</div>
                                </div>
                                <div class="text-center">
                                    <div class="text-2xl font-bold text-gray-900">{{ number_format($city->messages_count) }}</div>
                                    <div class="text-xs text-gray-500 mt-1">Messages</div>
                                </div>
                                <div class="text-center">
                                    <div class="text-2xl font-bold text-gray-900">{{ number_format($city->locations_count) }}</div>
                                    <div class="text-xs text-gray-500 mt-1">Locations</div>
                                </div>
                                <div class="text-center">
                                    <div class="text-2xl font-bold text-gray-900">{{ number_format($details['counters_count']) }}</div>
                                    <div class="text-xs text-gray-500 mt-1">Counters</div>
                                </div>
                                <div class="text-center">
                                    <div class="text-2xl font-bold text-gray-900">{{ number_format($details['services_count']) }}</div>
                                    <div class="text-xs text-gray-500 mt-1">Services</div>
                                </div>
                                <div class="text-center">
                                    <div class="text-2xl font-bold text-gray-900">{{ number_format($details['users_count']) }}</div>
                                    <div class="text-xs text-gray-500 mt-1">Users</div>
                                </div>
                            </div>
                        </div>

                        <!-- Detailed Information (Expandable) -->
                        <div x-show="expanded" x-collapse class="px-6 py-4 border-t border-gray-200 bg-gray-50">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <!-- Data Type Details -->
                                <div>
                                    <h5 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                                        <span class="material-icons text-base mr-2">data_usage</span>
                                        Data Sync Details
                                    </h5>
                                    <div class="space-y-3">
                                        <div class="p-3 bg-white rounded-lg border border-gray-200">
                                            <div class="flex items-center justify-between">
                                                <div class="flex items-center">
                                                    <span class="material-icons text-blue-500 text-lg mr-2">queue</span>
                                                    <span class="text-sm font-medium text-gray-700">Queues</span>
                                                </div>
                                                <div class="text-right">
                                                    <div class="text-sm font-semibold text-gray-900">{{ number_format($city->queues_count) }}</div>
                                                    <div class="text-xs text-gray-500">
                                                        @if($details['last_queue'])
                                                            Updated {{ $details['last_queue']->diffForHumans() }}
                                                        @else
                                                            <span class="text-gray-400">Never</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                            @if(!empty($details['location_breakdown']))
                                                <div class="mt-2 pt-2 border-t border-gray-100 space-y-1">
                                                    @php $totalQueues = 0; @endphp
                                                    @foreach($details['location_breakdown'] as $location)
                                                        @php $totalQueues += $location['queues']; @endphp
                                                        <div class="flex justify-between text-xs text-gray-600">
                                                            <span>{{ $location['name'] }}</span>
                                                            <span class="font-medium">{{ number_format($location['queues']) }}</span>
                                                        </div>
                                                    @endforeach
                                                    <div class="flex justify-between text-xs font-semibold text-gray-700 pt-1 border-t border-gray-200">
                                                        <span>Total</span>
                                                        <span>{{ number_format($totalQueues) }}</span>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>

                                        <div class="p-3 bg-white rounded-lg border border-gray-200">
                                            <div class="flex items-center justify-between">
                                                <div class="flex items-center">
                                                    <span class="material-icons text-green-500 text-lg mr-2">phone</span>
                                                    <span class="text-sm font-medium text-gray-700">Calls</span>
                                                </div>
                                                <div class="text-right">
                                                    <div class="text-sm font-semibold text-gray-900">{{ number_format($city->calls_count) }}</div>
                                                    <div class="text-xs text-gray-500">
                                                        @if($details['last_call'])
                                                            Updated {{ $details['last_call']->diffForHumans() }}
                                                        @else
                                                            <span class="text-gray-400">Never</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                            @if(!empty($details['location_breakdown']))
                                                <div class="mt-2 pt-2 border-t border-gray-100 space-y-1">
                                                    @php $totalCalls = 0; @endphp
                                                    @foreach($details['location_breakdown'] as $location)
                                                        @php $totalCalls += $location['calls']; @endphp
                                                        <div class="flex justify-between text-xs text-gray-600">
                                                            <span>{{ $location['name'] }}</span>
                                                            <span class="font-medium">{{ number_format($location['calls']) }}</span>
                                                        </div>
                                                    @endforeach
                                                    <div class="flex justify-between text-xs font-semibold text-gray-700 pt-1 border-t border-gray-200">
                                                        <span>Total</span>
                                                        <span>{{ number_format($totalCalls) }}</span>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>

                                        <div class="p-3 bg-white rounded-lg border border-gray-200">
                                            <div class="flex items-center justify-between">
                                                <div class="flex items-center">
                                                    <span class="material-icons text-purple-500 text-lg mr-2">message</span>
                                                    <span class="text-sm font-medium text-gray-700">Messages</span>
                                                </div>
                                                <div class="text-right">
                                                    <div class="text-sm font-semibold text-gray-900">{{ number_format($city->messages_count) }}</div>
                                                    <div class="text-xs text-gray-500">
                                                        @if($details['last_message'])
                                                            Updated {{ $details['last_message']->diffForHumans() }}
                                                        @else
                                                            <span class="text-gray-400">Never</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                            @if(!empty($details['location_breakdown']))
                                                <div class="mt-2 pt-2 border-t border-gray-100 space-y-1">
                                                    @php $totalMessages = 0; @endphp
                                                    @foreach($details['location_breakdown'] as $location)
                                                        @php $totalMessages += $location['messages']; @endphp
                                                        <div class="flex justify-between text-xs text-gray-600">
                                                            <span>{{ $location['name'] }}</span>
                                                            <span class="font-medium">{{ number_format($location['messages']) }}</span>
                                                        </div>
                                                    @endforeach
                                                    <div class="flex justify-between text-xs font-semibold text-gray-700 pt-1 border-t border-gray-200">
                                                        <span>Total</span>
                                                        <span>{{ number_format($totalMessages) }}</span>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>

                                        <div class="p-3 bg-white rounded-lg border border-gray-200">
                                            <div class="flex items-center justify-between">
                                                <div class="flex items-center">
                                                    <span class="material-icons text-orange-500 text-lg mr-2">place</span>
                                                    <span class="text-sm font-medium text-gray-700">Locations</span>
                                                </div>
                                                <div class="text-right">
                                                    <div class="text-sm font-semibold text-gray-900">{{ number_format($city->locations_count) }}</div>
                                                    <div class="text-xs text-gray-500">
                                                        @if($details['last_location'])
                                                            Updated {{ $details['last_location']->diffForHumans() }}
                                                        @else
                                                            <span class="text-gray-400">Never</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                            @if(!empty($details['location_breakdown']))
                                                <div class="mt-2 pt-2 border-t border-gray-100 space-y-1">
                                                    @foreach($details['location_breakdown'] as $location)
                                                        <div class="text-xs text-gray-600">
                                                            <span class="inline-flex items-center">
                                                                <span class="material-icons text-[12px] mr-1 text-orange-400">location_on</span>
                                                                {{ $location['name'] }}
                                                            </span>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                <!-- Additional Information -->
                                <div>
                                    <h5 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                                        <span class="material-icons text-base mr-2">info</span>
                                        Additional Information
                                    </h5>
                                    <div class="space-y-3">
                                        <div class="p-3 bg-white rounded-lg border border-gray-200">
                                            <div class="flex items-center justify-between">
                                                <div class="flex items-center">
                                                    <span class="material-icons text-indigo-500 text-lg mr-2">desktop_windows</span>
                                                    <span class="text-sm font-medium text-gray-700">Counters</span>
                                                </div>
                                                <div class="text-right">
                                                    <div class="text-sm font-semibold text-gray-900">{{ number_format($details['counters_count']) }}</div>
                                                    <div class="text-xs text-gray-500">
                                                        @if($details['last_counter'])
                                                            Updated {{ $details['last_counter']->diffForHumans() }}
                                                        @else
                                                            <span class="text-gray-400">Never</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                            @if(!empty($details['location_breakdown']))
                                                <div class="mt-2 pt-2 border-t border-gray-100 space-y-1">
                                                    @php $totalCounters = 0; @endphp
                                                    @foreach($details['location_breakdown'] as $location)
                                                        @php $totalCounters += $location['counters']; @endphp
                                                        <div class="flex justify-between text-xs text-gray-600">
                                                            <span>{{ $location['name'] }}</span>
                                                            <span class="font-medium">{{ number_format($location['counters']) }}</span>
                                                        </div>
                                                    @endforeach
                                                    <div class="flex justify-between text-xs font-semibold text-gray-700 pt-1 border-t border-gray-200">
                                                        <span>Total</span>
                                                        <span>{{ number_format($totalCounters) }}</span>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>

                                        <div class="p-3 bg-white rounded-lg border border-gray-200">
                                            <div class="flex items-center justify-between">
                                                <div class="flex items-center">
                                                    <span class="material-icons text-teal-500 text-lg mr-2">business_center</span>
                                                    <span class="text-sm font-medium text-gray-700">Services</span>
                                                </div>
                                                <div class="text-right">
                                                    <div class="text-sm font-semibold text-gray-900">{{ number_format($details['services_count']) }}</div>
                                                    <div class="text-xs text-gray-500">
                                                        @if($details['last_service'])
                                                            Updated {{ $details['last_service']->diffForHumans() }}
                                                        @else
                                                            <span class="text-gray-400">Never</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                            @if(!empty($details['location_breakdown']))
                                                <div class="mt-2 pt-2 border-t border-gray-100 space-y-1">
                                                    @php $totalServices = 0; @endphp
                                                    @foreach($details['location_breakdown'] as $location)
                                                        @php $totalServices += $location['services']; @endphp
                                                        <div class="flex justify-between text-xs text-gray-600">
                                                            <span>{{ $location['name'] }}</span>
                                                            <span class="font-medium">{{ number_format($location['services']) }}</span>
                                                        </div>
                                                    @endforeach
                                                    <div class="flex justify-between text-xs font-semibold text-gray-700 pt-1 border-t border-gray-200">
                                                        <span>Total</span>
                                                        <span>{{ number_format($totalServices) }}</span>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>

                                        <div class="p-3 bg-white rounded-lg border border-gray-200">
                                            <div class="flex items-center justify-between">
                                                <div class="flex items-center">
                                                    <span class="material-icons text-pink-500 text-lg mr-2">people</span>
                                                    <span class="text-sm font-medium text-gray-700">Users</span>
                                                </div>
                                                <div class="text-right">
                                                    <div class="text-sm font-semibold text-gray-900">{{ number_format($details['users_count']) }}</div>
                                                    <div class="text-xs text-gray-500">
                                                        @if($details['last_user'])
                                                            Updated {{ $details['last_user']->diffForHumans() }}
                                                        @else
                                                            <span class="text-gray-400">Never</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                            @if(!empty($details['location_breakdown']))
                                                <div class="mt-2 pt-2 border-t border-gray-100 space-y-1">
                                                    @php $totalUsers = 0; @endphp
                                                    @foreach($details['location_breakdown'] as $location)
                                                        @php $totalUsers += $location['users']; @endphp
                                                        <div class="flex justify-between text-xs text-gray-600">
                                                            <span>{{ $location['name'] }}</span>
                                                            <span class="font-medium">{{ number_format($location['users']) }}</span>
                                                        </div>
                                                    @endforeach
                                                    <div class="flex justify-between text-xs font-semibold text-gray-700 pt-1 border-t border-gray-200">
                                                        <span>Total</span>
                                                        <span>{{ number_format($totalUsers) }}</span>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>

                                        <div class="p-3 bg-white rounded-lg border border-gray-200">
                                            <div class="text-xs text-gray-500 mb-1">Overall Status</div>
                                            <div class="flex items-center justify-between">
                                                <span class="text-sm font-medium text-gray-700">Sync Health</span>
                                                <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium @if($statusColor === 'green') bg-green-100 text-green-800 @elseif($statusColor === 'yellow') bg-yellow-100 text-yellow-800 @else bg-gray-100 text-gray-800 @endif">
                                                    {{ $statusText }}
                                                </span>
                                            </div>
                                            @if($lastSync)
                                            <div class="mt-2 text-xs text-gray-500">
                                                Last synchronized: {{ $lastSync->format('M d, Y H:i:s') }}
                                            </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <div class="bg-gray-50 rounded-xl p-8 text-center">
                <span class="material-icons text-gray-400 text-4xl mb-3">location_city</span>
                <p class="text-gray-600">No cities found. Cities will appear here once they start syncing data.</p>
            </div>
        @endif
    </div>
</div>
@endsection