@extends('examples.modern-layout-v2')
@section('title', __('messages.menu.extension_licenses') . ' - Location Management')
@section('extension-licenses', 'bg-blue-50 text-blue-700')

@section('content')
<div x-data="extensionLicenseLocationManagement()" x-init="init()" x-cloak>
    <!-- Success/Error Messages -->
    <div x-show="successMessage" 
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0 transform -translate-y-2"
         x-transition:enter-end="opacity-100 transform translate-y-0"
         class="fixed top-4 right-4 z-50 max-w-md">
        <div class="bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-lg shadow-lg flex items-center gap-3">
            <span class="material-icons">check_circle</span>
            <span x-text="successMessage"></span>
        </div>
    </div>

    <div x-show="errorMessage" 
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0 transform -translate-y-2"
         x-transition:enter-end="opacity-100 transform translate-y-0"
         class="fixed top-4 right-4 z-50 max-w-md">
        <div class="bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-lg shadow-lg flex items-center gap-3">
            <span class="material-icons">error</span>
            <span x-text="errorMessage"></span>
        </div>
    </div>

    <!-- Page Header -->
    <div class="mb-8">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="text-3xl font-bold text-gray-900 mb-2">Extension Licenses - Location Management</h2>
                <p class="text-gray-600">Manage extension licenses per location within each city</p>
            </div>
            <!-- Info Badge -->
            <div class="flex items-center gap-2 bg-blue-50 rounded-xl border border-blue-200 px-4 py-2">
                <span class="material-icons text-blue-600">info</span>
                <span class="text-sm text-blue-700">Each city has its own enable/disable toggle</span>
            </div>
        </div>
    </div>

    <!-- Overview Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow duration-200">
            <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center shadow-md mb-4">
                <span class="material-icons text-white text-2xl">location_on</span>
            </div>
            <div class="text-3xl font-bold text-gray-900 mb-1">{{ $totalLicenses }}</div>
            <div class="text-sm text-gray-600">Total Location Licenses</div>
        </div>

        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow duration-200">
            <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center shadow-md mb-4">
                <span class="material-icons text-white text-2xl">check_circle</span>
            </div>
            <div class="text-3xl font-bold text-gray-900 mb-1">{{ $activeLicenses }}</div>
            <div class="text-sm text-gray-600">Active Licenses</div>
        </div>

        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow duration-200">
            <div class="w-12 h-12 bg-gradient-to-br from-red-500 to-red-600 rounded-xl flex items-center justify-center shadow-md mb-4">
                <span class="material-icons text-white text-2xl">warning</span>
            </div>
            <div class="text-3xl font-bold text-gray-900 mb-1">{{ $fullLicenses }}</div>
            <div class="text-sm text-gray-600">Full Licenses</div>
        </div>

        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow duration-200">
            <div class="w-12 h-12 bg-gradient-to-br from-yellow-500 to-yellow-600 rounded-xl flex items-center justify-center shadow-md mb-4">
                <span class="material-icons text-white text-2xl">event_available</span>
            </div>
            <div class="text-3xl font-bold text-gray-900 mb-1">{{ $totalAvailableSlots }}</div>
            <div class="text-sm text-gray-600">Available Slots</div>
        </div>
    </div>

    <!-- Cities Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        @foreach($citiesData as $city)
        <div class="bg-white rounded-2xl shadow-md border border-gray-200 overflow-hidden hover:shadow-xl transition-shadow duration-300">
            <!-- City Header -->
            <div class="bg-gradient-to-r from-blue-500 to-indigo-600 p-6">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-4">
                        <div class="w-12 h-12 bg-white bg-opacity-20 backdrop-blur-sm rounded-xl flex items-center justify-center">
                            <span class="material-icons text-white text-2xl">location_city</span>
                        </div>
                        <div>
                            <h3 class="text-2xl font-bold text-white">{{ $city['name'] }}</h3>
                            <p class="text-blue-100 text-sm mt-1">
                                Code: {{ $city['code'] }} | {{ $city['locations']->count() }} location(s)
                            </p>
                        </div>
                    </div>
                    <!-- Per-City Enable/Disable Toggle + Windows VM Config -->
                    <div class="flex items-center gap-2">
                        <!-- Windows VM Config Button -->
                        <button @click="openWindowsVMConfigModal('{{ $city['code'] }}', '{{ $city['name'] }}', '{{ $city['windows_license_server_url'] ?? '' }}', '{{ $city['windows_license_sync_token'] ?? '' }}')"
                                class="p-2 bg-white bg-opacity-20 backdrop-blur-sm rounded-lg hover:bg-opacity-30 transition-all duration-200"
                                title="Windows VM License Server">
                            <span class="material-icons text-white text-lg">computer</span>
                        </button>
                        
                        <div class="flex items-center gap-3 bg-white bg-opacity-20 backdrop-blur-sm rounded-xl px-4 py-2">
                            <span class="text-white text-sm font-medium">License</span>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" 
                                       x-model="cityLicenseEnabled['{{ $city['code'] }}']"
                                       @change="toggleCityLicenseEnabled('{{ $city['code'] }}')" 
                                       class="sr-only peer"
                                       {{ $city['extension_license_enabled'] ? 'checked' : '' }}>
                                <div class="w-11 h-6 bg-white bg-opacity-30 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-white rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-500"></div>
                            </label>
                            <span class="text-white text-xs" x-text="cityLicenseEnabled['{{ $city['code'] }}'] ? 'ON' : 'OFF'"></span>
                        </div>
                    </div>
                </div>
                <!-- City Stats -->
                <div class="mt-4 grid grid-cols-3 gap-4">
                    <div class="bg-white bg-opacity-10 backdrop-blur-sm rounded-lg p-3 text-center">
                        <div class="text-2xl font-bold text-white">{{ $city['total_max'] }}</div>
                        <div class="text-xs text-blue-100 mt-1">Total Limit</div>
                    </div>
                    <div class="bg-white bg-opacity-10 backdrop-blur-sm rounded-lg p-3 text-center">
                        <div class="text-2xl font-bold text-white">{{ $city['total_current'] }}</div>
                        <div class="text-xs text-blue-100 mt-1">Active</div>
                    </div>
                    <div class="bg-white bg-opacity-10 backdrop-blur-sm rounded-lg p-3 text-center">
                        <div class="text-2xl font-bold text-white">{{ $city['total_max'] - $city['total_current'] }}</div>
                        <div class="text-xs text-blue-100 mt-1">Available</div>
                    </div>
                </div>
            </div>

            <!-- Locations List -->
            <div class="p-6 space-y-3">
                @foreach($city['locations'] as $location)
                <div class="border-2 border-gray-200 rounded-xl p-4 hover:border-blue-300 hover:shadow-md transition-all duration-200 {{ $location['is_full'] ? 'bg-red-50 border-red-300' : 'bg-gray-50' }}">
                    <div class="flex items-center justify-between mb-3">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 {{ $location['is_full'] ? 'bg-red-500' : 'bg-blue-500' }} bg-opacity-10 rounded-lg flex items-center justify-center">
                                <span class="material-icons {{ $location['is_full'] ? 'text-red-600' : 'text-blue-600' }} text-xl">place</span>
                            </div>
                            <div>
                                <h4 class="text-base font-bold text-gray-900">{{ $location['name'] }}</h4>
                                <p class="text-xs text-gray-500">UUID: {{ substr($location['uuid'], 0, 8) }}...</p>
                            </div>
                        </div>
                        <!-- Status Badges -->
                        <div class="flex gap-2">
                            @if($location['status'] === 'disabled')
                            <span class="px-2 py-1 bg-gray-200 text-gray-700 text-xs font-semibold rounded-full">Disabled</span>
                            @endif
                            @if($location['is_full'])
                            <span class="px-2 py-1 bg-red-500 text-white text-xs font-semibold rounded-full flex items-center gap-1">
                                <span class="material-icons text-xs">warning</span>
                                FULL
                            </span>
                            @endif
                        </div>
                    </div>
                    
                    <!-- Progress Bar -->
                    <div class="mb-3">
                        <div class="flex items-center justify-between text-sm mb-1">
                            <span class="text-gray-600 font-medium">Session Usage</span>
                            <span class="font-bold {{ $location['is_full'] ? 'text-red-600' : 'text-gray-900' }}">
                                {{ $location['current_sessions'] }}/{{ $location['max_sessions'] }}
                            </span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2.5 overflow-hidden">
                            <div class="bg-gradient-to-r {{ $location['is_full'] ? 'from-red-500 to-red-600' : 'from-blue-500 to-blue-600' }} h-2.5 rounded-full transition-all duration-500"
                                 style="width: {{ $location['max_sessions'] > 0 ? ($location['current_sessions'] / $location['max_sessions'] * 100) : 0 }}%"></div>
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="flex gap-2">
                        <button @click="viewLocationSessions('{{ $city['code'] }}', '{{ $location['uuid'] }}', '{{ $location['name'] }}')"
                                class="flex-1 px-3 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-semibold flex items-center justify-center gap-2 transition-all duration-200 shadow-sm hover:shadow">
                            <span class="material-icons text-sm">visibility</span>
                            View
                        </button>
                        <button @click="openExtendModal('{{ $city['code'] }}', '{{ $location['uuid'] }}', '{{ $location['name'] }}', {{ $location['max_sessions'] }})"
                                class="flex-1 px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 text-sm font-semibold flex items-center justify-center gap-2 transition-all duration-200 shadow-sm hover:shadow">
                            <span class="material-icons text-sm">edit</span>
                            Adjust
                        </button>
                        <button @click="openEndAllModal('{{ $city['code'] }}', '{{ $location['uuid'] }}', '{{ $location['name'] }}')"
                                class="flex-1 px-3 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm font-semibold flex items-center justify-center gap-2 transition-all duration-200 shadow-sm hover:shadow">
                            <span class="material-icons text-sm">stop_circle</span>
                            End All
                        </button>
                    </div>
                </div>
                @endforeach

                @if($city['locations']->isEmpty())
                <div class="text-center py-12 text-gray-500">
                    <span class="material-icons text-6xl mb-3 text-gray-300">location_off</span>
                    <p class="text-lg font-semibold">No location licenses configured</p>
                    <p class="text-sm mt-1">Click "Add Location" to get started</p>
                </div>
                @endif

                <!-- Add Location Button -->
                <button @click="openAddLocationModal('{{ $city['code'] }}', '{{ $city['name'] }}')" 
                        class="w-full mt-3 px-4 py-3 bg-gradient-to-r from-green-500 to-green-600 text-white rounded-lg hover:from-green-600 hover:to-green-700 flex items-center justify-center gap-2 font-semibold shadow-md hover:shadow-lg transition-all duration-200">
                    <span class="material-icons">add</span>
                    Add Location License
                </button>
            </div>
        </div>
        @endforeach
    </div>

    <!-- Add Location License Modal -->
    <div x-show="addLocationModalOpen" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" @click.self="addLocationModalOpen = false" x-cloak>
        <div class="bg-white rounded-2xl shadow-xl p-6 max-w-md w-full mx-4">
            <h3 class="text-xl font-bold text-gray-900 mb-4">Add Location License</h3>
            <p class="text-gray-600 mb-4">City: <span class="font-semibold" x-text="selectedCityName"></span></p>
            
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">Select Location</label>
                <select x-model="selectedLocationForAdd" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    <option value="">-- Select Location --</option>
                    <template x-for="location in availableLocations" :key="location.sync_uuid">
                        <option :value="location.sync_uuid" x-text="location.name"></option>
                    </template>
                </select>
            </div>
            
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">Max Sessions</label>
                <input type="number" x-model="maxSessions" min="1" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="30">
            </div>
            
            <div class="flex gap-3 justify-end">
                <button @click="addLocationModalOpen = false" class="px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 font-semibold">Cancel</button>
                <button @click="generateLocationLicense()" :disabled="loading" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 font-semibold flex items-center gap-2">
                    <span x-show="loading" class="material-icons text-sm animate-spin">sync</span>
                    <span x-text="loading ? 'Generating...' : 'Generate'"></span>
                </button>
            </div>
        </div>
    </div>

    <!-- Adjust (Extend/Reduce) Modal -->
    <div x-show="extendModalOpen" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" @click.self="extendModalOpen = false" x-cloak>
        <div class="bg-white rounded-2xl shadow-xl p-6 max-w-md w-full mx-4">
            <h3 class="text-xl font-bold text-gray-900 mb-4">Adjust Location License</h3>
            <p class="text-gray-600 mb-2">Location: <span class="font-semibold" x-text="extendLocationName"></span></p>
            <p class="text-sm text-gray-600 mb-4">Current max sessions: <span class="font-bold text-blue-600" x-text="extendCurrentMax"></span></p>
            
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">New Max Sessions</label>
                <input type="number" x-model="newMaxSessions" min="0" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="10">
                <p class="text-xs text-gray-500 mt-1">
                    Change: <span class="font-semibold" :class="(newMaxSessions - extendCurrentMax) >= 0 ? 'text-green-600' : 'text-red-600'" x-text="(newMaxSessions - extendCurrentMax >= 0 ? '+' : '') + (newMaxSessions - extendCurrentMax)"></span> sessions
                </p>
            </div>
            
            <div class="flex gap-3 justify-end">
                <button @click="extendModalOpen = false" class="px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 font-semibold">Cancel</button>
                <button @click="adjustLocationLicense()" :disabled="loading" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 font-semibold flex items-center gap-2">
                    <span x-show="loading" class="material-icons text-sm animate-spin">sync</span>
                    <span x-text="loading ? 'Adjusting...' : 'Adjust'"></span>
                </button>
            </div>
        </div>
    </div>

    <!-- End All Sessions Confirmation Modal -->
    <div x-show="endAllModalOpen" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" @click.self="endAllModalOpen = false" x-cloak>
        <div class="bg-white rounded-2xl shadow-xl p-6 max-w-md w-full mx-4">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
                    <span class="material-icons text-red-600 text-2xl">warning</span>
                </div>
                <div>
                    <h3 class="text-xl font-bold text-gray-900">End All Sessions?</h3>
                    <p class="text-sm text-gray-600">This action cannot be undone</p>
                </div>
            </div>
            
            <p class="text-gray-700 mb-2">Location: <span class="font-semibold" x-text="endAllLocationName"></span></p>
            <p class="text-sm text-gray-600 mb-4">All active sessions for this location will be terminated immediately.</p>
            
            <div class="flex gap-3 justify-end">
                <button @click="endAllModalOpen = false" class="px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 font-semibold">Cancel</button>
                <button @click="endLocationSessions()" :disabled="loading" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50 font-semibold flex items-center gap-2">
                    <span x-show="loading" class="material-icons text-sm animate-spin">sync</span>
                    <span x-text="loading ? 'Ending...' : 'End All Sessions'"></span>
                </button>
            </div>
        </div>
    </div>

    <!-- Sessions View Modal -->
    <div x-show="viewSessionsModalOpen" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" @click.self="viewSessionsModalOpen = false" x-cloak>
        <div class="bg-white rounded-2xl shadow-xl max-w-4xl w-full mx-4 max-h-[80vh] flex flex-col">
            <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-indigo-50">
                <h3 class="text-xl font-bold text-gray-900">Active Sessions</h3>
                <p class="text-sm text-gray-600 mt-1"><span class="font-semibold" x-text="viewSessionsLocationName"></span></p>
            </div>
            <div class="flex-1 overflow-y-auto p-6">
                <div x-show="loadingSessions" class="text-center py-8">
                    <span class="material-icons text-4xl text-blue-500 animate-spin">sync</span>
                    <p class="text-gray-600 mt-2">Loading sessions...</p>
                </div>
                <template x-if="!loadingSessions && sessions.length === 0">
                    <div class="text-center py-12 text-gray-500">
                        <span class="material-icons text-6xl text-gray-300 mb-3">info</span>
                        <p class="text-lg font-semibold">No active sessions</p>
                    </div>
                </template>
                <template x-if="!loadingSessions && sessions.length > 0">
                    <div class="space-y-3">
                        <template x-for="session in sessions" :key="session.id">
                            <div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-3">
                                        <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                                            <span class="material-icons text-blue-600">person</span>
                                        </div>
                                        <div>
                                            <p class="font-semibold text-gray-900" x-text="session.username"></p>
                                            <p class="text-sm text-gray-600" x-text="'Started: ' + new Date(session.created_at).toLocaleString()"></p>
                                            <p class="text-xs text-gray-500" x-text="'IP: ' + (session.ip_address || 'N/A')"></p>
                                        </div>
                                    </div>
                                    <button @click="revokeSession(session.id, session.uuid)" class="px-3 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm font-semibold">
                                        Revoke
                                    </button>
                                </div>
                            </div>
                        </template>
                    </div>
                </template>
            </div>
            <div class="px-6 py-4 border-t border-gray-200">
                <button @click="viewSessionsModalOpen = false" class="px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 font-semibold">Close</button>
            </div>
        </div>
    </div>

    <!-- Windows VM License Server Configuration Modal -->
    <div x-show="windowsVMModalOpen" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" @click.self="windowsVMModalOpen = false" x-cloak>
        <div class="bg-white rounded-2xl shadow-xl p-6 max-w-lg w-full mx-4">
            <div class="flex items-center gap-3 mb-6">
                <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-xl flex items-center justify-center">
                    <span class="material-icons text-white text-2xl">computer</span>
                </div>
                <div>
                    <h3 class="text-xl font-bold text-gray-900">Windows VM License Server</h3>
                    <p class="text-sm text-gray-600">City: <span class="font-semibold" x-text="windowsVMCityName"></span></p>
                </div>
            </div>
            
            <!-- Connection Status -->
            <div class="mb-4 p-3 rounded-lg" :class="windowsVMConnectionStatus === 'connected' ? 'bg-green-50 border border-green-200' : windowsVMConnectionStatus === 'error' ? 'bg-red-50 border border-red-200' : 'bg-gray-50 border border-gray-200'">
                <div class="flex items-center gap-2">
                    <span class="material-icons text-lg" :class="windowsVMConnectionStatus === 'connected' ? 'text-green-600' : windowsVMConnectionStatus === 'error' ? 'text-red-600' : 'text-gray-400'">
                        <template x-if="windowsVMConnectionStatus === 'connected'">check_circle</template>
                        <template x-if="windowsVMConnectionStatus === 'error'">error</template>
                        <template x-if="windowsVMConnectionStatus === 'unknown'">help</template>
                    </span>
                    <span class="text-sm font-medium" :class="windowsVMConnectionStatus === 'connected' ? 'text-green-700' : windowsVMConnectionStatus === 'error' ? 'text-red-700' : 'text-gray-600'" x-text="windowsVMStatusMessage"></span>
                </div>
            </div>
            
            <div class="space-y-4">
                <!-- Server URL -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">License Server URL</label>
                    <input type="text" x-model="windowsVMUrl" 
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500" 
                           placeholder="http://192.168.64.100:5100">
                    <p class="text-xs text-gray-500 mt-1">The URL of the Windows VM License Server</p>
                </div>
                
                <!-- Sync Token -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Sync Token</label>
                    <div class="flex gap-2">
                        <input :type="showSyncToken ? 'text' : 'password'" x-model="windowsVMSyncToken" 
                               class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500" 
                               placeholder="Paste token from Windows VM setup">
                        <button @click="showSyncToken = !showSyncToken" type="button" class="px-3 py-2 bg-gray-100 rounded-lg hover:bg-gray-200">
                            <span class="material-icons text-gray-600" x-text="showSyncToken ? 'visibility_off' : 'visibility'"></span>
                        </button>
                    </div>
                    <p class="text-xs text-gray-500 mt-1">Token generated during Windows VM License Server setup</p>
                </div>
            </div>
            
            <div class="flex gap-3 mt-6">
                <button @click="testWindowsVMConnection()" 
                        :disabled="loadingWindowsVM || !windowsVMUrl" 
                        class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 font-semibold flex items-center gap-2">
                    <span x-show="loadingWindowsVM" class="material-icons text-sm animate-spin">sync</span>
                    <span x-text="loadingWindowsVM ? 'Testing...' : 'Test Connection'"></span>
                </button>
                <button @click="syncToWindowsVM()" 
                        :disabled="loadingWindowsVM || !windowsVMUrl || !windowsVMSyncToken" 
                        class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 font-semibold flex items-center gap-2">
                    <span class="material-icons text-sm">cloud_upload</span>
                    Sync Licenses
                </button>
            </div>
            
            <div class="flex gap-3 justify-end mt-4 pt-4 border-t border-gray-200">
                <button @click="windowsVMModalOpen = false" class="px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 font-semibold">Cancel</button>
                <button @click="saveWindowsVMConfig()" 
                        :disabled="loadingWindowsVM" 
                        class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 font-semibold flex items-center gap-2">
                    <span x-show="loadingWindowsVM" class="material-icons text-sm animate-spin">sync</span>
                    <span x-text="loadingWindowsVM ? 'Saving...' : 'Save Configuration'"></span>
                </button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function extensionLicenseLocationManagement() {
    return {
        loading: false,
        loadingSessions: false,
        extensionLicenseEnabled: {{ $extensionLicenseEnabled ? 'true' : 'false' }},
        // Per-city license enabled status
        cityLicenseEnabled: {
            @foreach($citiesData as $city)
            '{{ $city['code'] }}': {{ $city['extension_license_enabled'] ? 'true' : 'false' }},
            @endforeach
        },
        successMessage: '',
        errorMessage: '',
        
        // Add Location Modal
        addLocationModalOpen: false,
        selectedCityCode: '',
        selectedCityName: '',
        selectedLocationForAdd: '',
        maxSessions: 30,
        availableLocations: [],
        
        // Adjust Modal
        extendModalOpen: false,
        extendCityCode: '',
        extendLocationUuid: '',
        extendLocationName: '',
        extendCurrentMax: 0,
        newMaxSessions: 10,
        
        // End All Modal
        endAllModalOpen: false,
        endAllCityCode: '',
        endAllLocationUuid: '',
        endAllLocationName: '',
        
        // View Sessions Modal
        viewSessionsModalOpen: false,
        viewSessionsCityCode: '',
        viewSessionsLocationUuid: '',
        viewSessionsLocationName: '',
        sessions: [],
        
        // Windows VM Configuration Modal
        windowsVMModalOpen: false,
        windowsVMCityCode: '',
        windowsVMCityName: '',
        windowsVMUrl: '',
        windowsVMSyncToken: '',
        showSyncToken: false,
        loadingWindowsVM: false,
        windowsVMConnectionStatus: 'unknown', // 'unknown', 'connected', 'error'
        windowsVMStatusMessage: 'Not tested',

        init() {
            console.log('Extension License Location Management initialized');
        },

        showSuccessMessage(message) {
            this.successMessage = message;
            setTimeout(() => { this.successMessage = ''; }, 5000);
        },

        showErrorMessage(message) {
            this.errorMessage = message;
            setTimeout(() => { this.errorMessage = ''; }, 5000);
        },

        async toggleLicenseEnabled() {
            if (this.loading) return;
            this.loading = true;
            const formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');
            formData.append('enabled', this.extensionLicenseEnabled ? '1' : '0');
            try {
                const response = await fetch('{{ route("extension-licenses.management.toggle-enabled") }}', {
                    method: 'POST',
                    headers: { 'X-Requested-With': 'XMLHttpRequest' },
                    body: formData
                });
                const data = await response.json();
                if (data.success) {
                    this.showSuccessMessage(data.message || 'License system updated');
                } else {
                    this.showErrorMessage(data.error || 'Failed to update');
                    this.extensionLicenseEnabled = !this.extensionLicenseEnabled;
                }
            } catch (error) {
                this.showErrorMessage('Failed: ' + error.message);
                this.extensionLicenseEnabled = !this.extensionLicenseEnabled;
            } finally {
                this.loading = false;
            }
        },
        
        // Toggle per-city extension license
        async toggleCityLicenseEnabled(cityCode) {
            if (this.loading) return;
            this.loading = true;
            const enabled = this.cityLicenseEnabled[cityCode];
            const formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');
            formData.append('enabled', enabled ? '1' : '0');
            formData.append('city_code', cityCode);
            try {
                const response = await fetch('{{ route("extension-licenses.management.toggle-enabled") }}', {
                    method: 'POST',
                    headers: { 'X-Requested-With': 'XMLHttpRequest' },
                    body: formData
                });
                const data = await response.json();
                if (data.success) {
                    this.showSuccessMessage(data.message || `License ${enabled ? 'enabled' : 'disabled'} for ${cityCode}`);
                } else {
                    this.showErrorMessage(data.error || 'Failed to update');
                    this.cityLicenseEnabled[cityCode] = !enabled; // Revert on error
                }
            } catch (error) {
                this.showErrorMessage('Failed: ' + error.message);
                this.cityLicenseEnabled[cityCode] = !enabled; // Revert on error
            } finally {
                this.loading = false;
            }
        },

        async openAddLocationModal(cityCode, cityName) {
            this.selectedCityCode = cityCode;
            this.selectedCityName = cityName;
            this.addLocationModalOpen = true;
            
            // Fetch available locations
            try {
                const response = await fetch(`/api/extension/license/locations-for-city?city_code=${cityCode}`);
                const data = await response.json();
                this.availableLocations = data.locations || [];
            } catch (error) {
                console.error('Failed to fetch locations:', error);
                this.showErrorMessage('Failed to fetch locations');
            }
        },

        async generateLocationLicense() {
            if (this.loading) return;
            if (!this.selectedLocationForAdd) {
                this.showErrorMessage('Please select a location');
                return;
            }
            if (!this.maxSessions || this.maxSessions < 1) {
                this.showErrorMessage('Please enter valid max sessions');
                return;
            }
            
            this.loading = true;
            const formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');
            formData.append('city_code', this.selectedCityCode);
            formData.append('location_uuid', this.selectedLocationForAdd);
            formData.append('max_sessions', this.maxSessions);
            
            try {
                const response = await fetch('{{ route("extension-licenses.management.generate-location") }}', {
                    method: 'POST',
                    headers: { 'X-Requested-With': 'XMLHttpRequest' },
                    body: formData
                });
                const data = await response.json();
                if (data.status_code == 200 || data.success) {
                    this.showSuccessMessage(data.message || 'Location license generated successfully');
                    this.addLocationModalOpen = false;
                    setTimeout(() => window.location.reload(), 1500);
                } else {
                    this.showErrorMessage(data.error || 'Failed to generate license');
                }
            } catch (error) {
                this.showErrorMessage('Failed: ' + error.message);
            } finally {
                this.loading = false;
            }
        },

        openExtendModal(cityCode, locationUuid, locationName, currentMax) {
            this.extendCityCode = cityCode;
            this.extendLocationUuid = locationUuid;
            this.extendLocationName = locationName;
            this.extendCurrentMax = currentMax;
            this.newMaxSessions = currentMax;
            this.extendModalOpen = true;
        },

        async adjustLocationLicense() {
            if (this.loading) return;
            if (!this.newMaxSessions || this.newMaxSessions < 0) {
                this.showErrorMessage('Please enter valid max sessions');
                return;
            }
            
            this.loading = true;
            const formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');
            formData.append('city_code', this.extendCityCode);
            formData.append('location_uuid', this.extendLocationUuid);
            formData.append('new_max_sessions', this.newMaxSessions);
            
            try {
                const response = await fetch('{{ route("extension-licenses.management.adjust-location") }}', {
                    method: 'POST',
                    headers: { 'X-Requested-With': 'XMLHttpRequest' },
                    body: formData
                });
                const data = await response.json();
                if (data.status_code == 200 || data.success) {
                    this.showSuccessMessage(data.message || 'Location license adjusted successfully');
                    this.extendModalOpen = false;
                    setTimeout(() => window.location.reload(), 1500);
                } else {
                    this.showErrorMessage(data.error || 'Failed to adjust license');
                }
            } catch (error) {
                this.showErrorMessage('Failed: ' + error.message);
            } finally {
                this.loading = false;
            }
        },

        async viewLocationSessions(cityCode, locationUuid, locationName) {
            this.viewSessionsCityCode = cityCode;
            this.viewSessionsLocationUuid = locationUuid;
            this.viewSessionsLocationName = locationName;
            this.viewSessionsModalOpen = true;
            this.loadLocationSessions();
        },

        async loadLocationSessions() {
            this.loadingSessions = true;
            this.sessions = [];
            try {
                const response = await fetch(`{{ route("extension-licenses.management.location-sessions") }}?city_code=${this.viewSessionsCityCode}&location_uuid=${this.viewSessionsLocationUuid}`, {
                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
                });
                const data = await response.json();
                if (data.status_code == 200 || data.success) {
                    this.sessions = data.data || data.sessions || [];
                } else {
                    this.showErrorMessage('Failed to load sessions');
                }
            } catch (error) {
                this.showErrorMessage('Failed: ' + error.message);
            } finally {
                this.loadingSessions = false;
            }
        },

        async revokeSession(sessionId, sessionUuid) {
            if (this.loading) return;
            
            this.loading = true;
            const formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');
            formData.append('session_id', sessionId);
            formData.append('uuid', sessionUuid);
            formData.append('city_code', this.viewSessionsCityCode);
            
            try {
                const response = await fetch('{{ route("extension-licenses.management.revoke-session") }}', {
                    method: 'POST',
                    headers: { 'X-Requested-With': 'XMLHttpRequest' },
                    body: formData
                });
                const data = await response.json();
                if (data.status_code == 200) {
                    this.showSuccessMessage('Session revoked successfully');
                    this.loadLocationSessions();
                } else {
                    this.showErrorMessage(data.error || 'Failed to revoke session');
                }
            } catch (error) {
                this.showErrorMessage('Failed: ' + error.message);
            } finally {
                this.loading = false;
            }
        },

        openEndAllModal(cityCode, locationUuid, locationName) {
            this.endAllCityCode = cityCode;
            this.endAllLocationUuid = locationUuid;
            this.endAllLocationName = locationName;
            this.endAllModalOpen = true;
        },

        async endLocationSessions() {
            if (this.loading) return;
            
            this.loading = true;
            const formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');
            formData.append('city_code', this.endAllCityCode);
            formData.append('location_uuid', this.endAllLocationUuid);
            
            try {
                const response = await fetch('{{ route("extension-licenses.management.end-location-sessions") }}', {
                    method: 'POST',
                    headers: { 'X-Requested-With': 'XMLHttpRequest' },
                    body: formData
                });
                const data = await response.json();
                if (data.status_code == 200 || data.success) {
                    this.showSuccessMessage(data.message || 'All sessions ended successfully');
                    this.endAllModalOpen = false;
                    setTimeout(() => window.location.reload(), 1500);
                } else {
                    this.showErrorMessage(data.error || 'Failed to end sessions');
                }
            } catch (error) {
                this.showErrorMessage('Failed: ' + error.message);
            } finally {
                this.loading = false;
            }
        },
        
        // Windows VM Configuration Methods
        openWindowsVMConfigModal(cityCode, cityName, url, token) {
            this.windowsVMCityCode = cityCode;
            this.windowsVMCityName = cityName;
            this.windowsVMUrl = url || '';
            this.windowsVMSyncToken = token || '';
            this.windowsVMConnectionStatus = 'unknown';
            this.windowsVMStatusMessage = url ? 'Not tested' : 'No server configured';
            this.showSyncToken = false;
            this.windowsVMModalOpen = true;
        },
        
        async testWindowsVMConnection() {
            if (this.loadingWindowsVM || !this.windowsVMUrl) return;
            
            this.loadingWindowsVM = true;
            this.windowsVMStatusMessage = 'Testing connection...';
            
            const formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');
            formData.append('url', this.windowsVMUrl);
            formData.append('sync_token', this.windowsVMSyncToken);
            
            try {
                const response = await fetch('{{ route("extension-licenses.management.test-windows-vm") }}', {
                    method: 'POST',
                    headers: { 'X-Requested-With': 'XMLHttpRequest' },
                    body: formData
                });
                const data = await response.json();
                
                if (data.success) {
                    this.windowsVMConnectionStatus = 'connected';
                    this.windowsVMStatusMessage = `Connected - v${data.version || 'unknown'}` + (data.token_valid ? ' (Token valid)' : '');
                } else {
                    this.windowsVMConnectionStatus = 'error';
                    this.windowsVMStatusMessage = data.error || 'Connection failed';
                }
            } catch (error) {
                this.windowsVMConnectionStatus = 'error';
                this.windowsVMStatusMessage = 'Failed: ' + error.message;
            } finally {
                this.loadingWindowsVM = false;
            }
        },
        
        async saveWindowsVMConfig() {
            if (this.loadingWindowsVM) return;
            
            this.loadingWindowsVM = true;
            
            const formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');
            formData.append('city_code', this.windowsVMCityCode);
            formData.append('windows_license_server_url', this.windowsVMUrl);
            formData.append('windows_license_sync_token', this.windowsVMSyncToken);
            
            try {
                const response = await fetch('{{ route("extension-licenses.management.save-windows-vm-config") }}', {
                    method: 'POST',
                    headers: { 'X-Requested-With': 'XMLHttpRequest' },
                    body: formData
                });
                const data = await response.json();
                
                if (data.success) {
                    this.showSuccessMessage('Windows VM configuration saved successfully');
                    this.windowsVMModalOpen = false;
                    setTimeout(() => window.location.reload(), 1000);
                } else {
                    this.showErrorMessage(data.error || 'Failed to save configuration');
                }
            } catch (error) {
                this.showErrorMessage('Failed: ' + error.message);
            } finally {
                this.loadingWindowsVM = false;
            }
        },
        
        async syncToWindowsVM() {
            if (this.loadingWindowsVM || !this.windowsVMUrl || !this.windowsVMSyncToken) return;
            
            this.loadingWindowsVM = true;
            
            const formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');
            formData.append('city_code', this.windowsVMCityCode);
            
            try {
                const response = await fetch('{{ route("extension-licenses.management.sync-to-windows-vm") }}', {
                    method: 'POST',
                    headers: { 'X-Requested-With': 'XMLHttpRequest' },
                    body: formData
                });
                const data = await response.json();
                
                if (data.success) {
                    this.showSuccessMessage(`Synced ${data.synced || 0} licenses to Windows VM`);
                } else {
                    this.showErrorMessage(data.error || 'Sync failed');
                }
            } catch (error) {
                this.showErrorMessage('Failed: ' + error.message);
            } finally {
                this.loadingWindowsVM = false;
            }
        }
    }
}
</script>
@endpush

<style>
[x-cloak] { display: none !important; }
</style>
@endsection