@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 x-data="syncData()" x-cloak>
<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->tunnel_url)
                                                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                                    <span class="material-icons text-sm mr-1">cloud</span>
                                                    {{ $city->tunnel_url }}
                                                </span>
                                            @elseif($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>

                                                <button type="button" @click="$root.confirmDelete('{{ strtoupper($city->code) }}', '{{ route('sync.cities.destroy', $city) }}')"
                                                            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>
                                            </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">
                                            @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</span>
                                                <h4 class="font-semibold text-gray-900">Connection Configuration</h4>
                                            </div>
                                            
                                            <!-- Cloudflare Tunnel URL (Primary) -->
                                            <div class="mb-4 p-3 bg-blue-50 rounded-lg border border-blue-200">
                                                <label class="block text-xs font-semibold text-blue-800 mb-1">
                                                    <span class="material-icons text-sm align-middle mr-1">cloud_queue</span>
                                                    Cloudflare Tunnel URL (Primary)
                                                </label>
                                                <input name="tunnel_url" value="{{ $city->tunnel_url }}" class="w-full px-3 py-2 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm bg-white" placeholder="vr-duh-api.alho.cloud">
                                                <p class="text-xs text-blue-600 mt-1">Cloudflare tunnel domain (without https://)</p>
                                            </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) - Fallback</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.100">
                                                </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>
                                            
                                            <!-- Sync Token (New Field) -->
                                            <div class="mt-4 pt-4 border-t border-gray-200">
                                                <div class="flex items-center justify-between gap-2 mb-3">
                                                    <div class="flex items-center gap-2">
                                                        <span class="material-icons text-amber-600">vpn_key</span>
                                                        <h4 class="font-semibold text-gray-900">API Authentication Token</h4>
                                                    </div>
                                                    @if($city->sync_token)
                                                    <div class="flex items-center gap-1 text-green-600 text-xs">
                                                        <span class="material-icons text-sm">check_circle</span>
                                                        <span>Configured</span>
                                                    </div>
                                                    @else
                                                    <div class="flex items-center gap-1 text-orange-600 text-xs">
                                                        <span class="material-icons text-sm">warning</span>
                                                        <span>Not configured</span>
                                                    </div>
                                                    @endif
                                                </div>
                                                <div>
                                                    <label class="block text-xs font-semibold text-gray-700 mb-1">
                                                        Sync Token
                                                        <span class="text-gray-500 font-normal">(128-character token from city server)</span>
                                                    </label>
                                                    <input type="text" name="sync_token" value="{{ $city->sync_token }}" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500 text-sm font-mono" placeholder="Paste 128-character sync token from city server .env file">
                                                    <p class="mt-1 text-xs text-gray-500">
                                                        <span class="material-icons text-xs align-middle">info</span>
                                                        Find this token in the city server's .env file (SYNC_TOKEN=...) or settings table
                                                    </p>
                                                </div>
                                            </div>
                                            
                                            <div class="flex items-center justify-end gap-3">
                                                @if($city->tunnel_url)
                                                <div class="flex items-center gap-2 text-blue-600 text-sm">
                                                    <span class="material-icons text-base">cloud_done</span>
                                                    <span>Tunnel Configured</span>
                                                </div>
                                                @elseif($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>SSH 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>SSH 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">
                                                    <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>
                                <button type="button" @click="$root.confirmDelete('{{ strtoupper($city->code) }}', '{{ route('sync.cities.destroy', $city) }}')"
                                        class="flex-1 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>
                            </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>

    <!-- Sync Activity Monitoring -->
    <div class="bg-white border border-gray-200 rounded-xl shadow-sm mt-8">
        <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-slate-50 to-white">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                        <span class="material-icons text-blue-600 mr-2">monitoring</span>
                        Sync Activity Monitor
                    </h3>
                    <p class="text-sm text-gray-500 mt-1">Recent sync operations and status</p>
                </div>
            </div>
        </div>

        <div class="p-6">
            <!-- Failed Syncs Section -->
            @if(isset($failedSyncs) && $failedSyncs->count() > 0)
                <div class="mb-6">
                    <div class="flex items-center justify-between mb-3">
                        <h4 class="text-sm font-semibold text-red-600 flex items-center">
                            <span class="material-icons text-red-500 text-sm mr-1">error</span>
                            Failed Syncs ({{ $failedSyncs->count() }})
                        </h4>
                        <div class="flex items-center gap-2">
                            @if(\App\Helpers\ServerHelper::isApiServer())
                            <button type="button" 
                                    @click="
                                        deleteSyncFormAction = '{{ route('sync.delete-all-failed') }}';
                                        deleteSyncMessage = 'Are you sure you want to delete all failed syncs?';
                                        showDeleteSyncModal = true;
                                    " 
                                    class="px-3 py-1.5 bg-red-600 text-white text-sm font-medium rounded-lg hover:bg-red-700 transition-colors flex items-center">
                                <span class="material-icons text-sm mr-1">delete</span>
                                Delete All Failed
                            </button>
                            @endif
                            <form method="POST" action="{{ route('sync.retry-all') }}">
                                @csrf
                                <button type="submit" class="px-3 py-1.5 bg-orange-600 text-white text-sm font-medium rounded-lg hover:bg-orange-700 transition-colors flex items-center">
                                    <span class="material-icons text-sm mr-1">replay</span>
                                    Retry All Failed
                                </button>
                            </form>
                        </div>
                    </div>
                    <div class="space-y-2 max-h-64 overflow-y-auto">
                        @foreach($failedSyncs as $sync)
                            <div class="flex items-center justify-between p-3 bg-red-50 border border-red-200 rounded-lg">
                                <div class="flex-1 min-w-0 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @endif">
                                    <div class="flex items-center gap-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                                        <span class="font-medium text-gray-900">{{ $sync->entity_type }}:{{ $sync->action }}</span>
                                        @if($sync->city_code)
                                            <span class="text-xs bg-gray-200 text-gray-600 px-1.5 py-0.5 rounded">{{ $sync->city_code }}</span>
                                        @endif
                                    </div>
                                    @if($sync->error_message)
                                        <p class="text-sm text-red-600 truncate mt-1" title="{{ $sync->error_message }}">{{ Str::limit($sync->error_message, 100) }}</p>
                                    @endif
                                    <p class="text-xs text-gray-500 mt-1">
                                        Attempts: {{ $sync->attempts }} | 
                                        @if($sync->last_attempt_at)
                                            Last: {{ $sync->last_attempt_at->diffForHumans() }}
                                        @else
                                            Created: {{ $sync->created_at->diffForHumans() }}
                                        @endif
                                    </p>
                                </div>
                                <div class="flex items-center gap-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') mr-3 @else ml-3 @endif">
                                    @if(\App\Helpers\ServerHelper::isApiServer())
                                    <button type="button" 
                                            @click="
                                                deleteSyncFormAction = '{{ route('sync.delete', $sync->id) }}';
                                                deleteSyncMessage = 'Are you sure you want to delete this failed sync?';
                                                showDeleteSyncModal = true;
                                            " 
                                            class="px-3 py-1.5 bg-red-600 text-white text-sm font-medium rounded-lg hover:bg-red-700 transition-colors flex items-center">
                                        <span class="material-icons text-sm mr-1">delete</span>
                                        Delete
                                    </button>
                                    @endif
                                    <form method="POST" action="{{ route('sync.retry', $sync->id) }}">
                                        @csrf
                                        <button type="submit" class="px-3 py-1.5 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors flex items-center">
                                            <span class="material-icons text-sm mr-1">refresh</span>
                                            Retry
                                        </button>
                                    </form>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

            <!-- Pending Syncs Section -->
            @if(isset($pendingSyncs) && $pendingSyncs->count() > 0)
                <div class="mb-6">
                    <h4 class="text-sm font-semibold text-blue-600 mb-3 flex items-center">
                        <span class="material-icons text-blue-500 text-sm mr-1">schedule</span>
                        Pending Syncs ({{ $pendingSyncs->count() }})
                    </h4>
                    <div class="space-y-2 max-h-48 overflow-y-auto">
                        @foreach($pendingSyncs as $sync)
                            <div class="p-3 bg-blue-50 border border-blue-200 rounded-lg @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @endif">
                                <div class="flex items-center justify-between @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                                    <div class="flex items-center gap-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                                        <span class="font-medium text-gray-900">{{ $sync->entity_type }}:{{ $sync->action }}</span>
                                        @if($sync->city_code)
                                            <span class="text-xs bg-gray-200 text-gray-600 px-1.5 py-0.5 rounded">{{ $sync->city_code }}</span>
                                        @endif
                                    </div>
                                    <span class="text-xs text-gray-500">{{ $sync->created_at->diffForHumans() }}</span>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

            <!-- Recent Activity Logs -->
            @if(!empty($recentSyncLogs))
                <div>
                    <h4 class="text-sm font-semibold text-gray-600 mb-3 flex items-center">
                        <span class="material-icons text-gray-500 text-sm mr-1">history</span>
                        Recent Activity
                    </h4>
                    <div class="space-y-2 max-h-64 overflow-y-auto">
                        @foreach($recentSyncLogs as $log)
                            @php
                                $logTime = \Carbon\Carbon::parse($log['timestamp']);
                                $isRecent = $logTime->isAfter(now()->subMinutes(5));
                                $isError = $log['level'] === 'error' || strpos($log['message'], '?') !== false;
                                $isSuccess = strpos($log['message'], '?') !== false;
                            @endphp
                            <div class="flex items-start gap-3 p-3 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors
                                @if($isError) bg-red-50 border-red-200 @elseif($isSuccess) bg-green-50 border-green-200 @elseif($isRecent) bg-blue-50 border-blue-200 @endif">
                                <div class="flex-shrink-0 mt-0.5">
                                    @if($isError)
                                        <span class="material-icons text-red-500 text-sm">error</span>
                                    @elseif($isSuccess)
                                        <span class="material-icons text-green-500 text-sm">check_circle</span>
                                    @elseif($isRecent)
                                        <span class="material-icons text-blue-500 text-sm">sync</span>
                                    @else
                                        <span class="material-icons text-gray-400 text-sm">info</span>
                                    @endif
                                </div>
                                <div class="flex-1 min-w-0">
                                    <div class="flex items-center justify-between gap-2">
                                        <p class="text-sm font-medium text-gray-900 break-words">{{ $log['message'] }}</p>
                                        <span class="text-xs text-gray-500 whitespace-nowrap">{{ $logTime->diffForHumans() }}</span>
                                    </div>
                                    <p class="text-xs text-gray-400 mt-1">{{ $logTime->format('M d, H:i:s') }}</p>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @elseif((!isset($failedSyncs) || $failedSyncs->count() === 0) && (!isset($pendingSyncs) || $pendingSyncs->count() === 0))
                <div class="text-center py-8 text-gray-500">
                    <span class="material-icons text-4xl mb-2 text-gray-300">check_circle</span>
                    <p>All syncs are up to date</p>
                </div>
            @endif
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div x-show="showDeleteModal" x-cloak class="fixed inset-0 z-50 overflow-y-auto" style="display: none;" @keydown.escape.window="showDeleteModal = false">
        <div class="fixed inset-0 bg-gray-900 bg-opacity-50 transition-opacity" @click="showDeleteModal = false"></div>
        <div class="flex items-center justify-center min-h-screen px-4 py-4">
            <div class="relative bg-white rounded-2xl overflow-hidden shadow-xl transform transition-all w-full max-w-lg" @click.stop>
                <div class="bg-white px-6 pt-6 pb-4">
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center">
                            <div class="flex-shrink-0 w-12 h-12 rounded-full bg-red-100 flex items-center justify-center">
                                <span class="material-icons text-red-600 text-2xl">warning</span>
                            </div>
                            <h3 class="text-xl font-bold text-gray-900 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') mr-3 @else ml-3 @endif">
                                {{__('messages.common.confirm_delete')}}
                            </h3>
                        </div>
                        <button type="button" @click="showDeleteModal = false" class="text-gray-400 hover:text-gray-600">
                            <span class="material-icons text-2xl">close</span>
                        </button>
                    </div>
                    <div class="mt-4">
                        <p class="text-sm text-gray-600 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                            {{__('messages.sync.delete')}} <span x-text="deleteCityCode"></span>?
                        </p>
                    </div>
                    <div class="mt-6 flex items-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') justify-start flex-row-reverse space-x-reverse @else justify-end @endif space-x-3">
                        <button type="button" @click="showDeleteModal = false" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">
                            {{__('messages.common.cancel')}}
                        </button>
                        <button type="button" @click="executeDelete()" class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700">
                            {{__('messages.common.delete')}}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Delete Failed Sync Confirmation Modal -->
    <div 
        x-show="showDeleteSyncModal"
        x-cloak
        class="fixed inset-0 z-50 overflow-y-auto"
        style="display: none;"
        @keydown.escape.window="showDeleteSyncModal = false"
    >
        <!-- Backdrop -->
        <div 
            class="fixed inset-0 bg-gray-900 bg-opacity-50 transition-opacity"
            @click="showDeleteSyncModal = false"
            x-show="showDeleteSyncModal"
            x-transition:enter="ease-out duration-300"
            x-transition:enter-start="opacity-0"
            x-transition:enter-end="opacity-100"
            x-transition:leave="ease-in duration-200"
            x-transition:leave-start="opacity-100"
            x-transition:leave-end="opacity-0"
        ></div>
        
        <!-- Modal -->
        <div class="flex items-center justify-center min-h-screen px-4 py-4">
            <div 
                class="relative bg-white rounded-2xl overflow-hidden shadow-xl transform transition-all w-full max-w-lg"
                @click.stop
                x-show="showDeleteSyncModal"
                x-transition:enter="ease-out duration-300"
                x-transition:enter-start="opacity-0 scale-95"
                x-transition:enter-end="opacity-100 scale-100"
                x-transition:leave="ease-in duration-200"
                x-transition:leave-start="opacity-100 scale-100"
                x-transition:leave-end="opacity-0 scale-95"
            >
                <div class="bg-white px-6 pt-6 pb-4">
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center">
                            <div class="flex-shrink-0 w-12 h-12 rounded-full bg-red-100 flex items-center justify-center">
                                <span class="material-icons text-red-600 text-2xl">warning</span>
                            </div>
                            <h3 class="text-xl font-bold text-gray-900 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') mr-3 @else ml-3 @endif">
                                {{__('messages.common.confirm_delete')}}
                            </h3>
                        </div>
                        <button type="button" @click="showDeleteSyncModal = false" class="text-gray-400 hover:text-gray-600">
                            <span class="material-icons text-2xl">close</span>
                        </button>
                    </div>
                    <div class="mt-4">
                        <p class="text-sm text-gray-600 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif" x-text="deleteSyncMessage">
                        </p>
                    </div>
                    <div class="mt-6 flex items-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') justify-start flex-row-reverse space-x-reverse @else justify-end @endif space-x-3">
                        <button type="button" @click="showDeleteSyncModal = false" class="px-4 py-2.5 text-sm font-semibold text-gray-700 bg-white border-2 border-gray-200 rounded-xl hover:bg-gray-50 hover:border-gray-300 transition-all duration-200">
                            {{__('messages.common.cancel')}}
                        </button>
                        <form 
                            method="POST" 
                            x-bind:action="deleteSyncFormAction"
                            class="inline"
                            @submit="showDeleteSyncModal = false"
                        >
                            @csrf
                            @method('DELETE')
                            <button
                                type="submit"
                                class="px-4 py-2.5 text-sm font-semibold text-white bg-gradient-to-r from-red-600 to-red-500 rounded-xl hover:from-red-700 hover:to-red-600 transition-all duration-200 shadow-sm hover:shadow-md"
                            >
                                {{__('messages.common.delete')}}
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

@push('scripts')
<script>
function syncData() {
    return {
        showDeleteModal: false, 
        showDeleteSyncModal: false,
        cityToDelete: null,
        deleteFormAction: '',
        deleteCityCode: '',
        deleteSyncFormAction: '',
        deleteSyncMessage: '',
        confirmDelete(cityCode, formAction) {
            this.cityToDelete = cityCode;
            this.deleteCityCode = cityCode;
            this.deleteFormAction = formAction;
            this.showDeleteModal = true;
        },
        executeDelete() {
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = this.deleteFormAction;
            
            // Add CSRF token
            const csrfInput = document.createElement('input');
            csrfInput.type = 'hidden';
            csrfInput.name = '_token';
            csrfInput.value = '{{ csrf_token() }}';
            form.appendChild(csrfInput);
            
            // Add method override
            const methodInput = document.createElement('input');
            methodInput.type = 'hidden';
            methodInput.name = '_method';
            methodInput.value = 'DELETE';
            form.appendChild(methodInput);
            
            document.body.appendChild(form);
            form.submit();
        }
    }
}
</script>
@endpush
@endsection