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

@section('content')
@php
    $userRole = auth()->user()->roles->first();
    $isAdminRole = $userRole && method_exists($userRole, 'isAdminRole') ? $userRole->isAdminRole() : ($userRole && ($userRole->is_admin_role == 1 || $userRole->is_admin_role === true));
    $isSuperAdmin = isset($isSuperAdmin) ? $isSuperAdmin : (auth()->user()->hasRole('Super-Admin') || auth()->user()->id === 1);
@endphp
<div x-data="licenseData()" 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')}}</h2>
            <p class="text-gray-600">{{__('messages.license.manage_license_description')}}</p>
        </div>
    </div>


    <!-- License Status Card -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6 hover:shadow-md transition-shadow duration-200">
        <div class="flex items-center justify-between mb-6 pb-4 border-b border-gray-200">
            <h3 class="text-xl font-semibold text-gray-900">{{__('messages.license.current_license_status')}}</h3>
            @php
                $statusClass = 'bg-gray-100 text-gray-600';
                $statusIcon = 'info';
                $statusText = '';
                if ($licenseStatus['status'] === 'valid') {
                    $statusClass = 'bg-green-50 text-green-700 ring-1 ring-inset ring-green-600/20';
                    $statusIcon = 'check_circle';
                    $statusText = __('messages.settings.license_active');
                } elseif ($licenseStatus['status'] === 'expired') {
                    $statusClass = 'bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/20';
                    $statusIcon = 'error';
                    $statusText = __('messages.settings.license_expired');
                } elseif ($licenseStatus['status'] === 'invalid') {
                    $statusClass = 'bg-orange-50 text-orange-700 ring-1 ring-inset ring-orange-600/20';
                    $statusIcon = 'warning';
                    $statusText = __('messages.errors.license_server_mismatch');
                } else {
                    $statusText = __('messages.license.no_license_configured');
                }
            @endphp
            @if($licenseStatus['status'] !== 'not_configured')
            <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>
                {{ $statusText }}
            </span>
            @endif
        </div>
        
        @if($licenseStatus['status'] !== 'not_configured')
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
            <div class="bg-gray-50 rounded-xl p-4 border border-gray-200">
                <div class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">{{__('messages.license.license_key')}}</div>
                <div class="text-sm font-mono text-gray-900 bg-white border border-gray-200 rounded-lg px-3 py-2 break-all">{{ $settings->license_key ?? 'N/A' }}</div>
            </div>
            
            <div class="bg-gray-50 rounded-xl p-4 border border-gray-200">
                <div class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">{{__('messages.license.server_fingerprint')}}</div>
                <div class="text-xs font-mono text-gray-900 bg-white border border-gray-200 rounded-lg px-3 py-2 break-all">{{ substr($serverFingerprint, 0, 32) }}...</div>
            </div>
            
            @if($licenseStatus['expires_at'])
            <div class="bg-gray-50 rounded-xl p-4 border border-gray-200">
                <div class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">{{__('messages.license.expires_at')}}</div>
                <div class="text-sm font-medium text-gray-900">{{ \Carbon\Carbon::parse($licenseStatus['expires_at'])->format('Y-m-d H:i:s') }}</div>
            </div>
            
            @if($licenseStatus['days_remaining'] !== null)
            <div class="bg-gray-50 rounded-xl p-4 border border-gray-200">
                <div class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">{{__('messages.license.days_remaining')}}</div>
                <div>
                    <span class="inline-flex items-center rounded-md px-3 py-1.5 text-sm font-semibold {{ $licenseStatus['days_remaining'] < 7 ? 'bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/20' : ($licenseStatus['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') }}">
                        {{ $licenseStatus['days_remaining'] }} {{__('messages.settings.days')}}
                    </span>
                </div>
            </div>
            @endif
            @endif
        </div>
        
        @if($isSuperAdmin)
        <div class="pt-6 border-t border-gray-200">
            <button 
                @click="showRemoveConfirm = true"
                type="button"
                class="inline-flex items-center gap-2 px-4 py-2.5 bg-red-600 text-white font-semibold rounded-xl hover:bg-red-700 transition-all duration-200 shadow-sm hover:shadow-md"
            >
                <span class="material-icons text-lg">delete</span>
                {{__('messages.license.remove_license')}}
            </button>
        </div>
        @endif
        
        <!-- Remove License Confirmation Modal -->
        <div x-show="showRemoveConfirm" 
             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="showRemoveConfirm = false"
             @keydown.escape.window="showRemoveConfirm = false">
            <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
                <!-- Background overlay -->
                <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" @click="showRemoveConfirm = false"></div>
                
                <!-- Modal panel -->
                <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">
                            {{__('messages.license.remove_license')}}
                        </h3>
                        <p class="text-sm text-gray-600 text-center mb-6">
                            {{__('messages.license.remove_license_confirm')}}
                        </p>
                    </div>
                    <div class="bg-gray-50 px-6 py-4 flex flex-col sm:flex-row gap-3 sm:justify-end">
                        <button 
                            @click="showRemoveConfirm = false"
                            type="button"
                            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 transition-colors"
                        >
                            {{__('messages.common.cancel')}}
                        </button>
                        <button 
                            @click="showRemoveConfirm = false; removeLicense();"
                            type="button"
                            class="w-full sm:w-auto px-6 py-2.5 bg-red-600 text-white font-medium rounded-xl hover:bg-red-700 transition-colors"
                        >
                            {{__('messages.license.remove_license')}}
                        </button>
                    </div>
                </div>
            </div>
        </div>
        @else
        <div class="text-center py-12">
            <div class="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mx-auto mb-4">
                <span class="material-icons text-4xl text-gray-400">info_outline</span>
            </div>
            <p class="text-gray-600">{{__('messages.license.no_license_configured')}}</p>
        </div>
        @endif
    </div>

    <!-- License Forms -->
    <div class="grid grid-cols-1 {{ !\App\Helpers\ServerHelper::isApiServer() ? 'lg:grid-cols-1' : 'lg:grid-cols-2' }} gap-6">
        @if(!\App\Helpers\ServerHelper::isApiServer())
        <!-- Note: Local servers cannot generate licenses - only stage/prod can -->
        <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-lg mb-6">
            <div class="flex items-center">
                <span class="material-icons text-blue-600 mr-3">info</span>
                <div>
                    <h5 class="text-blue-800 font-semibold">License Management</h5>
                    <p class="text-blue-600 text-sm mt-1">Licenses are managed from the api server. Contact your administrator to request a license or extension.</p>
                </div>
            </div>
        </div>
        @else
        @if($isSuperAdmin)
        <!-- Generate License Form (Stage/Prod only - Super-Admin only) -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow duration-200">
            <h4 class="text-lg font-semibold text-gray-900 mb-2">{{__('messages.license.generate_new_license')}}</h4>
            <p class="text-sm text-gray-600 mb-6">{{__('messages.license.generate_description')}}</p>
            
            <form id="generate_license_form" class="space-y-4">
                @csrf
                <div>
                    <label for="generate_license_days" class="block text-sm font-medium text-gray-700 mb-2">{{__('messages.settings.license_validity_days')}}</label>
                    <input 
                        id="generate_license_days" 
                        name="license_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
                    >
                    @if ($errors->has('license_days'))
                    <p class="mt-1 text-sm text-red-600">{{ $errors->first('license_days') }}</p>
                    @endif
                </div>
                <button 
                    type="submit" 
                    class="inline-flex items-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 transform hover:scale-105 active:scale-95 border border-green-400/20"
                    :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 ? '{{__('messages.common.saving')}}' : '{{__('messages.license.generate_license')}}'"></span>
                </button>
            </form>
        </div>
        @endif
        @endif

        @if(\App\Helpers\ServerHelper::isApiServer() && $isSuperAdmin)
        <!-- Update License Form (Stage/Prod only - Super-Admin only) -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow duration-200">
            <h4 class="text-lg font-semibold text-gray-900 mb-2">{{__('messages.license.add_existing_license')}}</h4>
            <p class="text-sm text-gray-600 mb-6">{{__('messages.license.add_description')}}</p>
            
            <form id="update_license_form" class="space-y-4">
                @csrf
                <div>
                    <label for="update_license_key" class="block text-sm font-medium text-gray-700 mb-2">{{__('messages.settings.license_key')}}</label>
                    <input 
                        id="update_license_key" 
                        name="license_key" 
                        type="text" 
                        value="{{ $settings->license_key ?? '' }}" 
                        placeholder="ICT-XXXX-XXXX-XXXX-XXXX" 
                        pattern="^ICT-[A-Z0-9]{4}-[A-Z0-9]{4}-[A-Z0-9]{4}-[A-Z0-9]{4}$"
                        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
                    >
                    @if ($errors->has('license_key'))
                    <p class="mt-1 text-sm text-red-600">{{ $errors->first('license_key') }}</p>
                    @endif
                </div>
                <button 
                    type="submit" 
                    class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-500 text-white font-semibold rounded-xl hover:from-blue-700 hover:to-blue-600 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105 active:scale-95 border border-blue-400/20"
                    :disabled="loading"
                >
                    <span x-show="!loading" class="material-icons">save</span>
                    <span x-show="loading" class="animate-spin material-icons">sync</span>
                    <span x-text="loading ? '{{__('messages.common.saving')}}' : '{{__('messages.common.update')}}'"></span>
                </button>
            </form>
        </div>
        @endif
    </div>
</div>

@push('scripts')
<script>
function licenseData() {
    return {
        loading: false,
        showSuccess: false,
        successMessage: '',
        showError: false,
        errorMessage: '',
        showRemoveConfirm: false,
        init() {
            // Generate License Form
            const generateForm = document.getElementById('generate_license_form');
            if (generateForm) {
                generateForm.addEventListener('submit', (e) => {
                    e.preventDefault();
                    this.submitGenerateLicense(generateForm);
                });
            }

            // Update License Form (only on stage/prod)
            const updateForm = document.getElementById('update_license_form');
            if (updateForm) {
                updateForm.addEventListener('submit', (e) => {
                    e.preventDefault();
                    this.submitUpdateLicense(updateForm);
                });
            }

            // Remove License Button is now handled by Alpine.js @click
        },
        async submitGenerateLicense(form) {
            this.loading = true;
            const formData = new FormData(form);
            
            try {
                const response = await fetch('{{ route("license.generate") }}', {
                    method: 'POST',
                    body: formData
                });
                
                const data = await response.json();
                
                if (data.status_code == 200) {
                    this.showSuccessMessage(data.message || '{{__("messages.success.license_generated")}}');
                    setTimeout(() => {
                        window.location.reload();
                    }, 1500);
                } else {
                    this.showErrorMessage(data.error || '{{__("messages.errors.something_went_wrong")}}');
                }
            } catch (error) {
                console.error('Error:', error);
                this.showErrorMessage('{{__("messages.errors.something_went_wrong")}}');
            } finally {
                this.loading = false;
            }
        },
        async submitUpdateLicense(form) {
            this.loading = true;
            const formData = new FormData(form);
            
            // Validate license key format
            const licenseKey = formData.get('license_key');
            const pattern = /^ICT-[A-Z0-9]{4}-[A-Z0-9]{4}-[A-Z0-9]{4}-[A-Z0-9]{4}$/;
            if (!pattern.test(licenseKey)) {
                this.showErrorMessage('{{__("messages.errors.invalid_license_format")}}');
                this.loading = false;
                return;
            }
            
            try {
                const response = await fetch('{{ route("license.update") }}', {
                    method: 'POST',
                    body: formData
                });
                
                const data = await response.json();
                
                if (data.status_code == 200) {
                    this.showSuccessMessage(data.message || '{{__("messages.success.settings_updated")}}');
                    setTimeout(() => {
                        window.location.reload();
                    }, 1500);
                } else {
                    this.showErrorMessage(data.error || '{{__("messages.errors.something_went_wrong")}}');
                }
            } catch (error) {
                console.error('Error:', error);
                this.showErrorMessage('{{__("messages.errors.something_went_wrong")}}');
            } finally {
                this.loading = false;
            }
        },
        async removeLicense() {
            this.loading = true;
            const formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');
            
            try {
                const response = await fetch('{{ route("license.remove") }}', {
                    method: 'POST',
                    body: formData
                });
                
                const data = await response.json();
                
                if (data.status_code == 200) {
                    this.showSuccessMessage(data.message || '{{__("messages.success.license_removed")}}');
                    setTimeout(() => {
                        window.location.reload();
                    }, 1500);
                } else {
                    this.showErrorMessage(data.error || data.message || '{{__("messages.errors.something_went_wrong")}}');
                }
            } catch (error) {
                console.error('Error:', error);
                this.showErrorMessage('{{__("messages.errors.something_went_wrong")}}');
            } finally {
                this.loading = false;
            }
        },
        showSuccessMessage(message) {
            if (typeof showGlobalSuccessNotification === 'function') {
                showGlobalSuccessNotification(message);
            }
        },
        showErrorMessage(message) {
            if (typeof showGlobalErrorNotification === 'function') {
                showGlobalErrorNotification(message);
            }
        }
    }
}

</script>
@endpush
@endsection