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

@section('content')
<div x-data="extensionLicenseManagementData()" x-init="init()" x-cloak>
    <!-- Page Header -->
    <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.extension_licenses')}} - Management</h2>
                <p class="text-gray-600">Monitor and manage extension licenses for all connected local servers</p>
            </div>
            <!-- Enable/Disable Toggle -->
            <div class="flex items-center gap-4 bg-white rounded-xl shadow-sm border border-gray-200 p-4">
                <div>
                    <h4 class="text-sm font-semibold text-gray-900">Extension License</h4>
                    <p class="text-xs text-gray-500">Enable license enforcement</p>
                </div>
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" 
                           x-model="extensionLicenseEnabled"
                           @change="toggleLicenseEnabled()" 
                           class="sr-only peer">
                    <div class="w-14 h-7 bg-gray-300 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 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-6 after:w-6 after:transition-all peer-checked:bg-blue-600"></div>
                </label>
            </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="flex items-center justify-between mb-4">
                <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">
                    <span class="material-icons text-white text-2xl">extension</span>
                </div>
            </div>
            <div class="text-3xl font-bold text-gray-900 mb-1">{{ $totalLicenses }}</div>
            <div class="text-sm text-gray-600">Total Extension 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="flex items-center justify-between mb-4">
                <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">
                    <span class="material-icons text-white text-2xl">check_circle</span>
                </div>
            </div>
            <div class="text-3xl font-bold text-gray-900 mb-1">{{ $activeLicenses }}</div>
            <div class="text-sm text-gray-600">Active Extension 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="flex items-center justify-between mb-4">
                <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">
                    <span class="material-icons text-white text-2xl">error</span>
                </div>
            </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="flex items-center justify-between mb-4">
                <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">
                    <span class="material-icons text-white text-2xl">event_available</span>
                </div>
            </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>

    <!-- Connected Sites Status Table -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
        <div class="flex items-center justify-between mb-6">
            <h3 class="text-xl font-semibold text-gray-900">Connected Sites Status</h3>
            <div class="flex gap-2">
                <button 
                    @click="syncAllStatus()"
                    type="button"
                    class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white font-semibold rounded-xl hover:bg-blue-700 transition-all duration-200"
                    :disabled="loading"
                >
                    <span x-show="!loading" class="material-icons text-lg">sync</span>
                    <span x-show="loading" class="animate-spin material-icons text-lg">sync</span>
                    <span x-text="loading ? 'Syncing...' : 'Sync All'"></span>
                </button>
            </div>
        </div>

        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">City</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Max Sessions</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Current Sessions</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Available Slots</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @foreach($sitesStatus as $site)
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-gray-900">{{ $site['city_name'] }}</div>
                            <div class="text-sm text-gray-500">{{ $site['city_code'] }}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            @if($site['has_license'])
                                @php
                                    $statusClass = 'bg-gray-100 text-gray-600';
                                    $statusIcon = 'info';
                                    if ($site['status'] === 'active') {
                                        $statusClass = 'bg-green-50 text-green-700 ring-1 ring-inset ring-green-600/20';
                                        $statusIcon = 'check_circle';
                                    } elseif ($site['status'] === 'inactive') {
                                        $statusClass = 'bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/20';
                                        $statusIcon = 'error';
                                    }
                                @endphp
                                <span class="inline-flex items-center gap-x-1.5 rounded-md px-3 py-1.5 text-sm font-semibold {{ $statusClass }}">
                                    <span class="material-icons text-base">{{ $statusIcon }}</span>
                                    {{ ucfirst($site['status']) }}
                                </span>
                            @else
                                <span class="inline-flex items-center gap-x-1.5 rounded-md px-3 py-1.5 text-sm font-semibold bg-gray-100 text-gray-600">
                                    <span class="material-icons text-base">info</span>
                                    No License
                                </span>
                            @endif
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-900">{{ $site['max_sessions'] ?? '-' }}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-900">{{ $site['current_sessions'] ?? '-' }}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            @if($site['available_slots'] !== null)
                                @php
                                    $usageRatio = $site['max_sessions'] > 0 ? ($site['current_sessions'] / $site['max_sessions']) : 0;
                                    $slotClass = $usageRatio >= 0.95 ? 'bg-red-50 text-red-700' : ($usageRatio >= 0.8 ? 'bg-orange-50 text-orange-700' : 'bg-green-50 text-green-700');
                                @endphp
                                <span class="inline-flex items-center rounded-md px-3 py-1.5 text-sm font-semibold {{ $slotClass }}">
                                    {{ $site['available_slots'] }}
                                </span>
                            @else
                                <div class="text-sm text-gray-400">-</div>
                            @endif
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <div class="flex gap-2">
                                @if(!$site['has_license'])
                                    <button 
                                        @click="showGenerateModal('{{ $site['city_code'] }}', '{{ addslashes($site['city_name']) }}')"
                                        type="button"
                                        class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-green-600 text-white text-sm font-semibold rounded-lg hover:bg-green-700 transition-all duration-200 shadow-sm hover:shadow disabled:opacity-50 disabled:cursor-not-allowed"
                                        :disabled="loading && generatingCityCode === '{{ $site['city_code'] }}'"
                                    >
                                        <span x-show="!(loading && generatingCityCode === '{{ $site['city_code'] }}')" class="material-icons text-base">vpn_key</span>
                                        <span x-show="loading && generatingCityCode === '{{ $site['city_code'] }}'" class="animate-spin material-icons text-base">sync</span>
                                        <span x-text="(loading && generatingCityCode === '{{ $site['city_code'] }}') ? 'Generating...' : 'Generate'"></span>
                                    </button>
                                @else
                                    @if($site['license_id'])
                                        <button 
                                            @click="showExtendModal({{ $site['license_id'] }}, '{{ addslashes($site['city_name']) }}', {{ $site['max_sessions'] ?? 0 }}, {{ $site['current_sessions'] ?? 0 }})"
                                            type="button"
                                            class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-green-600 text-white text-sm font-semibold rounded-lg hover:bg-green-700 transition-all duration-200 shadow-sm hover:shadow"
                                        >
                                            <span class="material-icons text-base">add</span>
                                            Extend
                                        </button>
                                        <button 
                                            @click="showViewSessionsModal('{{ $site['city_code'] }}', '{{ addslashes($site['city_name']) }}')"
                                            type="button"
                                            class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-blue-600 text-white text-sm font-semibold rounded-lg hover:bg-blue-700 transition-all duration-200 shadow-sm hover:shadow"
                                        >
                                            <span class="material-icons text-base">visibility</span>
                                            View Sessions
                                        </button>
                                        <button 
                                            @click="showEndAllSessionsModal('{{ $site['city_code'] }}', '{{ addslashes($site['city_name']) }}')"
                                            type="button"
                                            class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-red-600 text-white text-sm font-semibold rounded-lg hover:bg-red-700 transition-all duration-200 shadow-sm hover:shadow"
                                        >
                                            <span class="material-icons text-base">stop</span>
                                            End All
                                        </button>
                                    @endif
                                @endif
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <!-- Generate Modal -->
    <div x-show="generateModalOpen" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" 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">Generate Extension License</h3>
            <p class="text-gray-600 mb-4">City: <span x-text="generateCityName"></span></p>
            <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="generateModalOpen = false" class="px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200">Cancel</button>
                <button @click="generateLicense()" :disabled="loading" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50">Generate</button>
            </div>
        </div>
    </div>

    <!-- Extend Modal -->
    <div x-show="extendModalOpen" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" 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">Extend Extension License</h3>
            <p class="text-gray-600 mb-4">City: <span x-text="extendCityName"></span></p>
            <div class="mb-4">
                <p class="text-sm text-gray-600 mb-2">Current: <span x-text="extendCurrentSessions"></span> / <span x-text="extendMaxSessions"></span> sessions</p>
                <label class="block text-sm font-medium text-gray-700 mb-2">Additional Sessions</label>
                <input type="number" x-model="additionalSessions" 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="10">
            </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">Cancel</button>
                <button @click="extendLicense()" :disabled="loading" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50">Extend</button>
            </div>
        </div>
    </div>

    <!-- View Sessions Modal -->
    <div x-show="viewSessionsModalOpen" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" x-cloak>
        <div class="bg-white rounded-2xl shadow-xl max-w-4xl w-full mx-4">
            <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100">
                <div>
                    <h3 class="text-xl font-bold text-gray-900">
                        Active Sessions - <span x-text="viewSessionsCityName"></span>
                    </h3>
                    <p class="text-sm text-gray-500">Live sessions from the extension clients</p>
                </div>
                <div class="flex items-center gap-3">
                    <span class="inline-flex items-center gap-1 rounded-full bg-blue-50 text-blue-700 px-3 py-1 text-sm font-semibold">
                        <span x-text="sessions.length"></span>
                        <span>Active</span>
                    </span>
                    <button @click="viewSessionsModalOpen = false" class="p-2 rounded-lg text-gray-500 hover:bg-gray-100 hover:text-gray-700" aria-label="Close">
                        <span class="material-icons text-lg">close</span>
                    </button>
                </div>
            </div>
            <div class="p-6">
            <div x-show="loadingSessions" class="text-center py-8">
                <span class="animate-spin material-icons text-4xl text-gray-400">sync</span>
            </div>
            <div x-show="!loadingSessions && sessions.length === 0" class="text-center py-10 text-gray-500">
                <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-gray-100 mb-3">
                    <span class="material-icons text-gray-400">schedule</span>
                </div>
                <div class="text-sm font-medium text-gray-600">No active sessions</div>
                <div class="text-xs text-gray-400 mt-1">Sessions will appear here when users login</div>
            </div>
            <div x-show="!loadingSessions && sessions.length > 0" class="border border-gray-100 rounded-xl">
                <div>
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Username</th>
                                <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Extension ID</th>
                                <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase">IP Address</th>
                                <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Last Activity</th>
                                <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Duration</th>
                                <th class="px-5 py-3 text-right text-xs font-semibold text-gray-500 uppercase">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <template x-for="session in sessions" :key="session.id">
                                <tr class="hover:bg-gray-50 transition-colors">
                                    <td class="px-5 py-4 whitespace-nowrap text-sm font-medium text-gray-900" x-text="session.username || '-'"></td>
                                    <td class="px-5 py-4 whitespace-nowrap text-sm text-gray-700" x-text="session.extension_id"></td>
                                    <td class="px-5 py-4 whitespace-nowrap text-sm text-gray-700" x-text="session.ip_address || '-'"></td>
                                    <td class="px-5 py-4 whitespace-nowrap text-sm text-gray-700" x-text="session.last_activity_at || '-'"></td>
                                    <td class="px-5 py-4 whitespace-nowrap text-sm text-gray-700" x-text="session.duration_minutes + ' min'"></td>
                                    <td class="px-5 py-4 whitespace-nowrap text-right">
                                        <button @click="revokeSession(session.id, session.uuid, viewSessionsCityCode)" class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-red-600 text-white text-sm rounded-lg hover:bg-red-700">
                                            <span class="material-icons text-base">block</span>
                                            Revoke
                                        </button>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="mt-5 flex justify-end">
                <button @click="viewSessionsModalOpen = false" class="px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200">Close</button>
            </div>
            </div>
        </div>
    </div>

    <!-- End All Sessions Modal -->
    <div x-show="endAllSessionsModalOpen" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" 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">End All Sessions</h3>
            <p class="text-gray-600 mb-4">City: <span x-text="endAllSessionsCityName"></span></p>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">Reason (optional)</label>
                <input type="text" x-model="endAllSessionsReason" 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="Admin action">
            </div>
            <div class="flex gap-3 justify-end">
                <button @click="endAllSessionsModalOpen = false" class="px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200">Cancel</button>
                <button @click="endAllSessions()" :disabled="loading" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50">End All Sessions</button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function extensionLicenseManagementData() {
    return {
        loading: false,
        generatingCityCode: null,
        extensionLicenseEnabled: {{ $extensionLicenseEnabled ? 'true' : 'false' }},
        generateModalOpen: false,
        generateCityCode: '',
        generateCityName: '',
        maxSessions: 30,
        extendModalOpen: false,
        extendLicenseId: null,
        extendCityName: '',
        extendMaxSessions: 0,
        extendCurrentSessions: 0,
        additionalSessions: 10,
        viewSessionsModalOpen: false,
        viewSessionsCityCode: '',
        viewSessionsCityName: '',
        sessions: [],
        loadingSessions: false,
        endAllSessionsModalOpen: false,
        endAllSessionsCityCode: '',
        endAllSessionsCityName: '',
        endAllSessionsReason: '',
        init() {
            // Auto-refresh every 30 seconds
            setInterval(() => {
                this.refreshStatus();
            }, 30000);
        },
        showGenerateModal(cityCode, cityName) {
            this.generateCityCode = cityCode;
            this.generateCityName = cityName;
            this.maxSessions = 30;
            this.generateModalOpen = true;
        },
        async toggleLicenseEnabled() {
            if (this.loading) return;
            this.loading = true;
            const newValue = this.extensionLicenseEnabled;
            const formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');
            formData.append('enabled', newValue ? '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) {
                    // Show message that includes sync status
                    this.showSuccessMessage(data.message || (newValue ? 'Extension license enabled and syncing...' : 'Extension license disabled and syncing...'));
                    
                    // Auto-refresh after 3 seconds to show updated status
                    if (data.sync_in_progress) {
                        setTimeout(() => {
                            window.location.reload();
                        }, 3000);
                    }
                } else {
                    this.showErrorMessage(data.error || 'Failed to toggle license status');
                    // Revert toggle on error
                    this.extensionLicenseEnabled = !newValue;
                }
            } catch (error) {
                this.showErrorMessage('Failed to toggle license status: ' + error.message);
                // Revert toggle on error
                this.extensionLicenseEnabled = !newValue;
            } finally {
                // Remove loading state immediately (sync continues in background)
                this.loading = false;
            }
        },
        async generateLicense() {
            if (this.loading) return;
            if (!this.maxSessions || this.maxSessions < 1) {
                this.showErrorMessage('Please enter valid number of sessions');
                return;
            }
            this.loading = true;
            this.generatingCityCode = this.generateCityCode;
            const formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');
            formData.append('city_code', this.generateCityCode);
            formData.append('max_sessions', this.maxSessions);
            try {
                const response = await fetch('{{ route("extension-licenses.management.generate") }}', {
                    method: 'POST',
                    headers: { 'X-Requested-With': 'XMLHttpRequest' },
                    body: formData
                });
                const data = await response.json();
                if (data.status_code == 200) {
                    this.showSuccessMessage(data.message || 'Extension license generated successfully');
                    this.generateModalOpen = false;
                    setTimeout(() => window.location.reload(), 1500);
                } else {
                    this.showErrorMessage(data.error || 'Failed to generate license');
                }
            } catch (error) {
                this.showErrorMessage('Failed to generate license: ' + error.message);
            } finally {
                this.loading = false;
                this.generatingCityCode = null;
            }
        },
        showExtendModal(licenseId, cityName, maxSessions, currentSessions) {
            this.extendLicenseId = licenseId;
            this.extendCityName = cityName;
            this.extendMaxSessions = maxSessions;
            this.extendCurrentSessions = currentSessions;
            this.additionalSessions = 10;
            this.extendModalOpen = true;
        },
        async extendLicense() {
            if (this.loading) return;
            if (!this.extendLicenseId) {
                this.showErrorMessage('No license selected');
                return;
            }
            if (!this.additionalSessions || this.additionalSessions < 1) {
                this.showErrorMessage('Please enter valid number of sessions');
                return;
            }
            this.loading = true;
            const formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');
            formData.append('license_id', this.extendLicenseId);
            formData.append('additional_sessions', this.additionalSessions);
            try {
                const response = await fetch('{{ route("extension-licenses.management.extend") }}', {
                    method: 'POST',
                    headers: { 'X-Requested-With': 'XMLHttpRequest' },
                    body: formData
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const data = await response.json();
                if (data.status_code == 200) {
                    this.showSuccessMessage(data.message || 'License extended successfully');
                    this.extendModalOpen = false;
                    setTimeout(() => window.location.reload(), 1500);
                } else {
                    this.showErrorMessage(data.error || data.message || 'Failed to extend license');
                }
            } catch (error) {
                console.error('Error extending license:', error);
                this.showErrorMessage('Failed to extend license: ' + error.message);
            } finally {
                this.loading = false;
            }
        },
        async showViewSessionsModal(cityCode, cityName) {
            this.viewSessionsCityCode = cityCode;
            this.viewSessionsCityName = cityName;
            this.viewSessionsModalOpen = true;
            this.loadingSessions = true;
            this.sessions = [];
            try {
                const response = await fetch('{{ route("extension-licenses.management.sessions-status") }}?city_code=' + cityCode);
                const data = await response.json();
                if (data.status_code == 200) {
                    this.sessions = data.data || [];
                }
            } catch (error) {
                this.showErrorMessage('Failed to load sessions');
            } finally {
                this.loadingSessions = false;
            }
        },
        async revokeSession(sessionId, uuid, cityCode) {
            if (this.loading) return;
            this.loading = true;
            const formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');
            formData.append('session_id', sessionId);
            formData.append('uuid', uuid);
            formData.append('city_code', cityCode);
            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.showViewSessionsModal(cityCode, this.viewSessionsCityName);
                } else {
                    this.showErrorMessage(data.error || 'Failed to revoke session');
                }
            } catch (error) {
                this.showErrorMessage('Failed to revoke session: ' + error.message);
            } finally {
                this.loading = false;
            }
        },
        showEndAllSessionsModal(cityCode, cityName) {
            this.endAllSessionsCityCode = cityCode;
            this.endAllSessionsCityName = cityName;
            this.endAllSessionsReason = '';
            this.endAllSessionsModalOpen = true;
        },
        async endAllSessions() {
            if (this.loading) return;
            this.loading = true;
            const formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');
            formData.append('city_code', this.endAllSessionsCityCode);
            formData.append('reason', this.endAllSessionsReason);
            try {
                const response = await fetch('{{ route("extension-licenses.management.end-all-sessions") }}', {
                    method: 'POST',
                    headers: { 'X-Requested-With': 'XMLHttpRequest' },
                    body: formData
                });
                const data = await response.json();
                if (data.status_code == 200) {
                    this.showSuccessMessage(data.message || 'All sessions ended successfully');
                    this.endAllSessionsModalOpen = false;
                    setTimeout(() => window.location.reload(), 1500);
                } else {
                    this.showErrorMessage(data.error || 'Failed to end all sessions');
                }
            } catch (error) {
                this.showErrorMessage('Failed to end all sessions: ' + error.message);
            } finally {
                this.loading = false;
            }
        },
        async syncAllStatus() {
            if (this.loading) return;
            this.loading = true;
            const formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');
            try {
                const response = await fetch('{{ route("extension-licenses.management.sync-status") }}', {
                    method: 'POST',
                    headers: { 'X-Requested-With': 'XMLHttpRequest' },
                    body: formData
                });
                const data = await response.json();
                if (data.status_code == 200) {
                    this.showSuccessMessage(data.message || 'Status synced successfully');
                    setTimeout(() => window.location.reload(), 1500);
                } else {
                    this.showErrorMessage(data.error || 'Failed to sync status');
                }
            } catch (error) {
                this.showErrorMessage('Failed to sync status: ' + error.message);
            } finally {
                this.loading = false;
            }
        },
        async refreshStatus() {
            // Silent refresh
        },
        showSuccessMessage(message) {
            if (typeof showGlobalSuccessNotification === 'function') {
                showGlobalSuccessNotification(message);
            } else {
                console.log('Success:', message);
            }
        },
        showErrorMessage(message) {
            if (typeof showGlobalErrorNotification === 'function') {
                showGlobalErrorNotification(message);
            } else {
                console.error('Error:', message);
            }
        }
    }
}
</script>
@endpush
@endsection