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

@section('content')
<div x-data="licenseManagementData()" x-init="init()" x-cloak>
    <!-- Page Header -->
    <div class="mb-8">
        <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.license')}} - Management</h2>
            <p class="text-gray-600">Monitor and manage licenses for all connected local servers</p>
        </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">vpn_key</span>
                </div>
            </div>
            <div class="text-3xl font-bold text-gray-900 mb-1">{{ $totalLicenses }}</div>
            <div class="text-sm text-gray-600">Total 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 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">{{ $expiredLicenses }}</div>
            <div class="text-sm text-gray-600">Expired 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">schedule</span>
                </div>
            </div>
            <div class="text-3xl font-bold text-gray-900 mb-1">{{ $pendingLicenses }}</div>
            <div class="text-sm text-gray-600">Pending Licenses</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">License Key</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Expires At</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Days Remaining</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['license_status'] === 'active') {
                                        $statusClass = 'bg-green-50 text-green-700 ring-1 ring-inset ring-green-600/20';
                                        $statusIcon = 'check_circle';
                                    } elseif ($site['license_status'] === 'expired') {
                                        $statusClass = 'bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/20';
                                        $statusIcon = 'error';
                                    } elseif ($site['license_status'] === 'pending') {
                                        $statusClass = 'bg-yellow-50 text-yellow-700 ring-1 ring-inset ring-yellow-600/20';
                                        $statusIcon = 'schedule';
                                    } elseif ($site['license_status'] === 'revoked') {
                                        $statusClass = 'bg-red-100 text-red-800 ring-1 ring-inset ring-red-600/30';
                                        $statusIcon = 'block';
                                    }
                                @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['license_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">
                            @if($site['license_key'])
                                <div class="text-sm font-mono text-gray-900" title="Full Key: {{ $site['license_key'] }}">
                                    <span class="font-semibold">{{ $site['license_key'] }}</span>
                                </div>
                                @if($site['license_status'] === 'revoked')
                                    <div class="text-xs text-red-600 mt-1">
                                        @if($site['revoked_at'])
                                            Revoked: {{ \Carbon\Carbon::parse($site['revoked_at'])->format('Y-m-d H:i') }}
                                        @else
                                            Revoked
                                        @endif
                                        @if($site['revoked_reason'])
                                            - {{ Str::limit($site['revoked_reason'], 40) }}
                                        @endif
                                    </div>
                                @endif
                            @else
                                <div class="text-sm text-gray-400">-</div>
                            @endif
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            @if($site['expires_at'])
                                <div class="text-sm text-gray-900">{{ \Carbon\Carbon::parse($site['expires_at'])->format('Y-m-d') }}</div>
                            @else
                                <div class="text-sm text-gray-400">-</div>
                            @endif
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            @if($site['days_remaining'] !== null)
                                <span class="inline-flex items-center rounded-md px-3 py-1.5 text-sm font-semibold {{ $site['days_remaining'] < 7 ? 'bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/20' : ($site['days_remaining'] < 30 ? 'bg-orange-50 text-orange-700 ring-1 ring-inset ring-orange-600/20' : 'bg-green-50 text-green-700 ring-1 ring-inset ring-green-600/20') }}">
                                    {{ $site['days_remaining'] }} days
                                </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_status'] === 'revoked')
                                        {{-- Show Generate button for revoked licenses so user can generate a new one --}}
                                        <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 New'"></span>
                                        </button>
                                    @elseif($site['license_id'])
                                        {{-- Show Extend and Revoke for active licenses --}}
                                        <button 
                                            @click="showExtendModal({{ $site['license_id'] }}, '{{ addslashes($site['city_name']) }}', {{ $site['days_remaining'] ?? 0 }}, $event)"
                                            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">schedule</span>
                                            Extend
                                        </button>
                                        <button 
                                            @click="showRevokeModal({{ $site['license_id'] }}, '{{ addslashes($site['city_name']) }}', $event)"
                                            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">block</span>
                                            Revoke
                                        </button>
                                    @else
                                        <span class="text-sm text-gray-400">No license ID</span>
                                    @endif
                                @endif
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <!-- License Generation Form -->
    @if($activeLicenses == 0)
    <!-- Generate New License Section (only show when no active licenses exist) -->
    <div id="generate_license_form_container" class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
        <div class="flex items-center justify-between mb-4">
            <div>
                <h4 class="text-lg font-semibold text-gray-900">Generate New License</h4>
                <p class="text-sm text-gray-500 mt-1">Create a new license that can be assigned to local servers</p>
            </div>
        </div>
        <form id="generate_license_form" class="space-y-4">
            @csrf
            <input type="hidden" name="city_code" id="generate_license_city_code" value="">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label for="validity_days" class="block text-sm font-medium text-gray-700 mb-2">Validity Days</label>
                    <input 
                        id="validity_days" 
                        name="validity_days" 
                        type="number" 
                        min="1" 
                        value="30" 
                        class="w-full px-4 py-2.5 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-300 transition-all duration-200"
                        required
                    >
                </div>
                <div class="flex items-end">
                    <button 
                        type="submit" 
                        class="w-full inline-flex items-center justify-center gap-2 px-6 py-3 bg-gradient-to-r from-green-600 to-green-500 text-white font-semibold rounded-xl hover:from-green-700 hover:to-green-600 transition-all duration-300 shadow-lg hover:shadow-xl"
                        :disabled="loading"
                    >
                        <span x-show="!loading" class="material-icons">vpn_key</span>
                        <span x-show="loading" class="animate-spin material-icons">sync</span>
                        <span x-text="loading ? 'Generating...' : 'Generate License'"></span>
                    </button>
                </div>
            </div>
        </form>
    </div>
    @endif

    <!-- Assign License Modal -->
    <div x-show="assignModalOpen" 
         x-cloak
         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"
         class="fixed inset-0 z-50 overflow-y-auto" 
         @click.away="assignModalOpen = false"
         @keydown.escape.window="assignModalOpen = false">
        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" @click="assignModalOpen = false"></div>
            <div class="inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full" @click.stop>
                <div class="bg-white px-6 pt-6 pb-4">
                    <h3 class="text-xl font-semibold text-gray-900 mb-4">Assign License to <span x-text="assignCityName"></span></h3>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Select License</label>
                            <select x-model="selectedLicenseId" class="w-full px-4 py-2.5 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-300">
                                <option value="">-- Select License --</option>
                                @foreach($unassignedLicenses as $license)
                                <option value="{{ $license->id }}">{{ $license->license_key }} ({{ $license->validity_days }} days)</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 px-6 py-4 flex flex-col sm:flex-row gap-3 sm:justify-end">
                    <button @click="assignModalOpen = false" class="w-full sm:w-auto px-6 py-2.5 border border-gray-300 rounded-xl text-gray-700 font-medium hover:bg-gray-100">Cancel</button>
                    <button @click="assignLicense()" class="w-full sm:w-auto px-6 py-2.5 bg-blue-600 text-white font-medium rounded-xl hover:bg-blue-700">Assign</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Extend License Modal -->
    <div x-show="extendModalOpen" 
         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"
         class="fixed inset-0 z-50 overflow-y-auto" 
         style="display: none;"
         @click.away="extendModalOpen = false"
         @keydown.escape.window="extendModalOpen = false">
        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" @click="extendModalOpen = false"></div>
            <div class="inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full" @click.stop>
                <div class="bg-white px-6 pt-6 pb-4">
                    <h3 class="text-xl font-semibold text-gray-900 mb-4">Extend License for <span x-text="extendCityName"></span></h3>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Additional Days</label>
                            <input x-model="additionalDays" type="number" min="1" value="30" class="w-full px-4 py-2.5 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-300">
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 px-6 py-4 flex flex-col sm:flex-row gap-3 sm:justify-end">
                    <button @click="extendModalOpen = false" class="w-full sm:w-auto px-6 py-2.5 border border-gray-300 rounded-xl text-gray-700 font-medium hover:bg-gray-100">Cancel</button>
                    <button @click="extendLicense()" class="w-full sm:w-auto px-6 py-2.5 bg-green-600 text-white font-medium rounded-xl hover:bg-green-700">Extend</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Revoke License Modal -->
    <div x-show="revokeModalOpen" 
         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"
         class="fixed inset-0 z-50 overflow-y-auto" 
         style="display: none;"
         @click.away="revokeModalOpen = false"
         @keydown.escape.window="revokeModalOpen = false">
        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" @click="revokeModalOpen = false"></div>
            <div class="inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full" @click.stop>
                <div class="bg-white px-6 pt-6 pb-4">
                    <div class="flex items-center justify-center w-12 h-12 mx-auto mb-4 rounded-full bg-red-100">
                        <span class="material-icons text-red-600 text-3xl">warning</span>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-900 text-center mb-2">Revoke License</h3>
                    <p class="text-sm text-gray-600 text-center mb-4">Are you sure you want to revoke the license for <span x-text="revokeCityName"></span>?</p>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Reason (optional)</label>
                        <textarea x-model="revokeReason" rows="3" class="w-full px-4 py-2.5 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-red-300"></textarea>
                    </div>
                </div>
                <div class="bg-gray-50 px-6 py-4 flex flex-col sm:flex-row gap-3 sm:justify-end">
                    <button @click="revokeModalOpen = false" class="w-full sm:w-auto px-6 py-2.5 border border-gray-300 rounded-xl text-gray-700 font-medium hover:bg-gray-100">Cancel</button>
                    <button @click="revokeLicense()" class="w-full sm:w-auto px-6 py-2.5 bg-red-600 text-white font-medium rounded-xl hover:bg-red-700">Revoke</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Generate License Modal -->
    <div x-show="generateModalOpen" 
         x-cloak
         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"
         class="fixed inset-0 z-50 overflow-y-auto" 
         style="display: none;"
         @click.away="generateModalOpen = false"
         @keydown.escape.window="generateModalOpen = false">
        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" @click="generateModalOpen = false"></div>
            <div class="inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full" @click.stop>
                <div class="bg-white px-6 pt-6 pb-4">
                    <h3 class="text-xl font-semibold text-gray-900 mb-4">Generate License for <span x-text="generateCityName"></span></h3>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Validity Days</label>
                            <input x-model="generateValidityDays" type="number" min="1" value="365" class="w-full px-4 py-2.5 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-300">
                        </div>
                        <div class="bg-blue-50 border border-blue-200 rounded-lg p-3">
                            <p class="text-sm text-blue-800">
                                <strong>City:</strong> <span x-text="generateCityName"></span> (<span x-text="generateCityCode"></span>)
                            </p>
                            <p class="text-sm text-blue-800 mt-1">
                                The license will be automatically assigned and synced to the local server after generation.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 px-6 py-4 flex flex-col sm:flex-row gap-3 sm:justify-end">
                    <button @click="generateModalOpen = false" class="w-full sm:w-auto px-6 py-2.5 border border-gray-300 rounded-xl text-gray-700 font-medium hover:bg-gray-100">Cancel</button>
                    <button @click="generateLicenseForCity()" class="w-full sm:w-auto px-6 py-2.5 bg-green-600 text-white font-medium rounded-xl hover:bg-green-700" :disabled="loading">
                        <span x-show="!loading">Generate License</span>
                        <span x-show="loading" class="flex items-center gap-2">
                            <span class="animate-spin material-icons text-base">sync</span>
                            Generating...
                        </span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function licenseManagementData() {
    return {
        loading: false,
        generatingCityCode: null,
        assignModalOpen: false,
        extendModalOpen: false,
        revokeModalOpen: false,
        generateModalOpen: false,
        assignCityId: null,
        assignCityCode: null,
        assignCityName: '',
        selectedLicenseId: null,
        extendLicenseId: null,
        extendCityName: '',
        additionalDays: 30,
        revokeLicenseId: null,
        revokeCityName: '',
        revokeReason: '',
        generateCityCode: '',
        generateCityName: '',
        generateValidityDays: 30,
        generateLicenseType: 'subscription',
        init() {
            this.assignModalOpen = false;
            this.extendModalOpen = false;
            this.revokeModalOpen = false;
            this.generateModalOpen = false;

            const generateForm = document.getElementById('generate_license_form');
            if (generateForm) {
                generateForm.addEventListener('submit', (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    this.generateLicense(e.target);
                });
            }

            setInterval(() => {
                this.refreshStatus();
            }, 30000);
        },
        showGenerateModal(cityCode, cityName) {
            this.generateCityCode = cityCode;
            this.generateCityName = cityName || '';
            this.generateLicenseType = 'subscription';
            this.generateValidityDays = 30;
            this.generateModalOpen = true;
        },
        updateDefaultValidityDays() {
            // Update validity days based on license type if not manually set
            const defaultDays = this.getDefaultDays();
            if (!this.generateValidityDays || this.generateValidityDays === this.getPreviousDefaultDays()) {
                this.generateValidityDays = defaultDays;
            }
        },
        getDefaultDays() {
            switch(this.generateLicenseType) {
                case 'trial':
                    return 30;
                case 'subscription':
                    return 365;
                case 'perpetual':
                    return 999999;
                default:
                    return 30;
            }
        },
        getPreviousDefaultDays() {
            // Helper to track previous default (simplified)
            return this.getDefaultDays();
        },
        async generateLicenseForCity() {
            if (this.loading || !this.generateCityCode) {
                this.showErrorMessage('Invalid city code');
                return;
            }

            this.loading = true;
            this.generatingCityCode = this.generateCityCode;
            this.showSuccessMessage(`Generating license for ${this.generateCityName}...`);

            try {
                const licenseType = 'subscription'; // Always subscription, no UI choice
                const validityDays = this.generateValidityDays || 365;
                
                const formData = new FormData();
                formData.append('_token', '{{ csrf_token() }}');
                formData.append('license_type', licenseType);
                formData.append('validity_days', validityDays);
                formData.append('city_code', this.generateCityCode);

                const response = await fetch('{{ route("license.management.generate") }}', {
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json',
                    },
                    body: formData
                });

                let data;
                try {
                    data = await response.json();
                } catch (e) {
                    const text = await response.text();
                    console.error('Failed to parse JSON response:', text);
                    const errorMsg = `Server returned invalid response: ${response.status} ${response.statusText}`;
                    this.showErrorMessage(errorMsg);
                    throw new Error(errorMsg);
                }

                if (!response.ok) {
                    const errorMsg = data.error || data.message || `HTTP error! status: ${response.status}`;
                    this.showErrorMessage(errorMsg);
                    throw new Error(errorMsg);
                }

                if (data.status_code == 200) {
                    const successMsg = data.message || `License generated successfully for ${this.generateCityName} (${this.generateCityCode})`;
                    this.showSuccessMessage(successMsg);
                    this.generateModalOpen = false;
                    setTimeout(() => {
                        window.location.reload();
                    }, 1500);
                } else {
                    const errorMsg = data.error || data.message || 'Failed to generate license';
                    this.showErrorMessage(errorMsg);
                }
            } catch (error) {
                console.error('Error generating license:', error);
                if (!error.message || (!error.message.includes('Server returned') && !error.message.includes('HTTP error'))) {
                    this.showErrorMessage('Failed to generate license: ' + (error.message || 'Unknown error'));
                }
            } finally {
                this.loading = false;
                this.generatingCityCode = null;
            }
        },
        scrollToGenerateForm(cityCode, cityName) {
            const cityCodeInput = document.getElementById('generate_license_city_code');
            if (cityCodeInput) {
                cityCodeInput.value = cityCode;
            }
            
            const formContainer = document.getElementById('generate_license_form_container');
            if (formContainer) {
                formContainer.scrollIntoView({ behavior: 'smooth', block: 'center' });
                formContainer.style.transition = 'box-shadow 0.3s';
                formContainer.style.boxShadow = '0 0 0 4px rgba(34, 197, 94, 0.3)';
                setTimeout(() => {
                    formContainer.style.boxShadow = '';
                }, 2000);
                
                this.showSuccessMessage(`Generate a license for ${cityName} (${cityCode}). It will be automatically assigned after generation.`);
            }
        },
        async generateLicense(form) {
            if (this.loading) {
                return;
            }

            this.loading = true;
            
            try {
                const formData = new FormData(form);
                
                const cityCodeInput = document.getElementById('generate_license_city_code');
                if (cityCodeInput && cityCodeInput.value) {
                    formData.append('city_code', cityCodeInput.value);
                }
                
                const response = await fetch('{{ route("license.management.generate") }}', {
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json',
                    },
                    body: formData
                });
                
                let data;
                try {
                    data = await response.json();
                } catch (e) {
                    const text = await response.text();
                    console.error('Failed to parse JSON response:', text);
                    const errorMsg = `Server returned invalid response: ${response.status} ${response.statusText}`;
                    this.showErrorMessage(errorMsg);
                    throw new Error(errorMsg);
                }
                
                if (!response.ok) {
                    const errorMsg = data.error || data.message || `HTTP error! status: ${response.status}`;
                    this.showErrorMessage(errorMsg);
                    throw new Error(errorMsg);
                }
                
                if (data.status_code == 200) {
                    const successMsg = data.message || 'License generated successfully';
                    this.showSuccessMessage(successMsg);
                    if (cityCodeInput) {
                        cityCodeInput.value = '';
                    }
                    setTimeout(() => {
                        window.location.reload();
                    }, 1500);
                } else {
                    const errorMsg = data.error || data.message || 'Failed to generate license';
                    this.showErrorMessage(errorMsg);
                }
            } catch (error) {
                console.error('Error generating license:', error);
                if (!error.message || (!error.message.includes('Server returned') && !error.message.includes('HTTP error'))) {
                    this.showErrorMessage('Failed to generate license: ' + (error.message || 'Unknown error'));
                }
            } finally {
                this.loading = false;
            }
        },
        showAssignModal(cityId, cityCode, cityName) {
            try {
                if (!cityId || !cityCode) {
                    console.error('Invalid parameters for showAssignModal:', { cityId, cityCode });
                    return;
                }

                this.assignCityId = cityId;
                this.assignCityCode = cityCode;
                this.assignCityName = cityName || '';
                this.selectedLicenseId = null;
                this.assignModalOpen = true;
            } catch (error) {
                console.error('Error in showAssignModal:', error);
                this.showErrorMessage('Failed to open assign modal. Please try again.');
            }
        },
        async assignLicense() {
            if (this.loading) {
                return;
            }

            if (!this.selectedLicenseId) {
                this.showErrorMessage('Please select a license');
                return;
            }

            if (!this.assignCityCode) {
                this.showErrorMessage('Invalid city code');
                return;
            }

            this.loading = true;
            const formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');
            formData.append('license_id', this.selectedLicenseId);
            formData.append('city_code', this.assignCityCode);

            try {
                const response = await fetch('{{ route("license.management.assign") }}', {
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json',
                    },
                    body: formData
                });
                
                let data;
                try {
                    data = await response.json();
                } catch (e) {
                    const text = await response.text();
                    console.error('Failed to parse JSON response:', text);
                    throw new Error(`Server returned invalid response: ${response.status} ${response.statusText}`);
                }
                
                if (!response.ok) {
                    throw new Error(data.error || data.message || `HTTP error! status: ${response.status}`);
                }
                
                if (data.status_code == 200) {
                    this.showSuccessMessage(data.message || 'License assigned successfully');
                    this.assignModalOpen = false;
                    setTimeout(() => {
                        window.location.reload();
                    }, 1500);
                } else {
                    this.showErrorMessage(data.error || data.message || 'Failed to assign license');
                }
            } catch (error) {
                console.error('Error assigning license:', error);
                this.showErrorMessage('Failed to assign license: ' + (error.message || 'Unknown error'));
            } finally {
                this.loading = false;
            }
        },
        showExtendModal(licenseId, cityName, daysRemaining, event = null) {
            if (event && (!licenseId || licenseId === null || licenseId === 'null' || licenseId === 0)) {
                console.error('No license ID provided for extend');
                this.showErrorMessage('No license found for this site');
                return;
            }
            
            if (!licenseId || licenseId === null || licenseId === 'null' || licenseId === 0) {
                return;
            }
            
            this.extendLicenseId = licenseId;
            this.extendCityName = cityName || 'Unknown';
            this.additionalDays = 30;
            this.extendModalOpen = true;
        },
        async extendLicense() {
            if (this.loading) {
                return;
            }

            if (!this.extendLicenseId) {
                this.showErrorMessage('No license selected');
                return;
            }
            
            if (!this.additionalDays || this.additionalDays < 1) {
                this.showErrorMessage('Please enter valid number of days');
                return;
            }

            this.loading = true;
            const formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');
            formData.append('license_id', this.extendLicenseId);
            formData.append('additional_days', this.additionalDays);

            try {
                const response = await fetch('{{ route("license.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;
            }
        },
        showRevokeModal(licenseId, cityName, event = null) {
            if (event && (!licenseId || licenseId === null || licenseId === 'null' || licenseId === 0)) {
                console.error('No license ID provided for revoke');
                this.showErrorMessage('No license found for this site');
                return;
            }
            
            if (!licenseId || licenseId === null || licenseId === 'null' || licenseId === 0) {
                return;
            }
            
            this.revokeLicenseId = licenseId;
            this.revokeCityName = cityName || 'Unknown';
            this.revokeReason = '';
            this.revokeModalOpen = true;
        },
        async revokeLicense() {
            if (this.loading) {
                return;
            }

            if (!this.revokeLicenseId) {
                this.showErrorMessage('No license selected');
                return;
            }
            
            this.loading = true;
            const formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');
            formData.append('license_id', this.revokeLicenseId);
            if (this.revokeReason) {
                formData.append('reason', this.revokeReason);
            }

            try {
                const response = await fetch('{{ route("license.management.revoke") }}', {
                    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 revoked successfully');
                    this.revokeModalOpen = false;
                    setTimeout(() => {
                        window.location.reload();
                    }, 1500);
                } else {
                    this.showErrorMessage(data.error || data.message || 'Failed to revoke license');
                }
            } catch (error) {
                console.error('Error revoking license:', error);
                this.showErrorMessage('Failed to revoke license: ' + error.message);
            } finally {
                this.loading = false;
            }
        },
        async syncAllStatus() {
            this.loading = true;
            const formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');

            try {
                const response = await fetch('{{ route("license.management.sync-status") }}', {
                    method: 'POST',
                    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) {
                console.error('Error:', error);
                this.showErrorMessage('Failed to sync status');
            } finally {
                this.loading = false;
            }
        },
        async refreshStatus() {
            try {
                const response = await fetch('{{ route("license.management.sites-status") }}');
                const data = await response.json();
                if (data.status_code == 200) {
                    // Status refreshed
                }
            } catch (error) {
                // Silent fail
            }
        },
        showSuccessMessage(message) {
            if (typeof showGlobalSuccessNotification === 'function') {
                showGlobalSuccessNotification(message);
            } else {
                console.log('Success:', message);
                if (typeof alert !== 'undefined') {
                    alert(message);
                }
            }
        },
        showErrorMessage(message) {
            if (typeof showGlobalErrorNotification === 'function') {
                showGlobalErrorNotification(message);
            } else {
                console.error('Error:', message);
                if (typeof alert !== 'undefined') {
                    alert('Error: ' + message);
                }
            }
        }
    }
}
</script>
@endpush
@endsection