@extends('installer.layout')

@section('title', 'Installer: License Activation')

@section('content')
<div class="relative flex flex-col min-h-screen w-full">
    <!-- Content Area -->
    <main class="flex-grow flex items-center justify-center p-4 md:p-8">
        <div class="w-full max-w-[800px] flex flex-col gap-8">
            <!-- Stepper Navigation -->
            <nav class="w-full flex justify-center py-2">
                <div class="flex items-center gap-3 md:gap-4 text-sm font-medium">
                    <!-- Step 1: Completed -->
                    <div class="flex items-center gap-2 text-green-600 dark:text-green-500 opacity-80">
                        <span class="material-symbols-outlined text-[20px] font-bold">check</span>
                        <span class="hidden sm:inline">Requirements</span>
                    </div>
                    <div class="h-px w-6 sm:w-12 bg-slate-300 dark:bg-slate-700"></div>
                    <!-- Step 2: Completed -->
                    <div class="flex items-center gap-2 text-green-600 dark:text-green-500 opacity-80">
                        <span class="material-symbols-outlined text-[20px] font-bold">check</span>
                        <span class="hidden sm:inline">Database</span>
                    </div>
                    <div class="h-px w-6 sm:w-12 bg-slate-300 dark:bg-slate-700"></div>
                    <!-- Step 3: Active -->
                    <div class="flex items-center gap-2 text-primary">
                        <span class="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-white text-xs font-bold shadow-sm shadow-primary/30">3</span>
                        <span class="font-bold">License</span>
                    </div>
                    <div class="h-px w-6 sm:w-12 bg-slate-200 dark:bg-slate-700"></div>
                    <!-- Step 4: Pending -->
                    <div class="flex items-center gap-2 text-slate-400 dark:text-slate-600">
                        <span class="flex items-center justify-center w-6 h-6 rounded-full border border-slate-300 dark:border-slate-600 text-xs font-medium">4</span>
                        <span class="hidden sm:inline">Finish</span>
                    </div>
                </div>
            </nav>
            
            <!-- Main Card -->
            <div class="bg-white dark:bg-[#1E293B] rounded-xl shadow-lg border border-slate-200 dark:border-slate-700 overflow-hidden flex flex-col">
                <!-- Header Section -->
                <div class="p-8 pb-6 border-b border-slate-100 dark:border-slate-700/50">
                    <div class="flex items-start justify-between gap-4">
                        <div>
                            <h1 class="text-2xl md:text-3xl font-bold tracking-tight text-[#111418] dark:text-white mb-2">License Activation</h1>
                            <p class="text-[#617589] dark:text-slate-400 text-base leading-normal">
                                Verify your purchase to unlock the full features of the application.
                            </p>
                        </div>
                        <div class="hidden sm:flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary">
                            <span class="material-symbols-outlined text-3xl">verified_user</span>
                        </div>
                    </div>
                </div>
                
                <!-- Form Body -->
                <div class="p-8 flex flex-col gap-6">
                    <!-- Auto-detected Domain Field -->
                    <div class="flex flex-col gap-2">
                        <label class="text-[#111418] dark:text-slate-200 text-base font-medium leading-normal">Installation Domain</label>
                        <div class="flex w-full items-stretch rounded-lg opacity-75">
                            <input class="flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-l-lg bg-[#f0f2f4] dark:bg-slate-800 text-[#617589] dark:text-slate-400 border-none h-12 px-4 text-base font-normal leading-normal cursor-not-allowed focus:ring-0" readonly value="{{ $domain }}"/>
                            <div class="flex items-center justify-center px-4 bg-[#f0f2f4] dark:bg-slate-800 rounded-r-lg text-[#617589] dark:text-slate-500">
                                <span class="material-symbols-outlined">lock</span>
                            </div>
                        </div>
                        <p class="text-xs text-[#617589] dark:text-slate-500 flex items-center gap-1">
                            <span class="material-symbols-outlined text-[14px]">info</span>
                            Auto-detected from server environment
                        </p>
                    </div>
                    
                    <!-- Input Grid -->
                    <form id="licenseForm" class="flex flex-col gap-6">
                        @csrf
                        <!-- License Key Input -->
                        <div class="flex flex-col gap-2">
                            <div class="flex justify-between items-baseline">
                                <label class="text-[#111418] dark:text-slate-200 text-base font-medium leading-normal">License Key</label>
                                <button type="button" id="showLicenseHelpBtn" class="text-xs text-primary font-medium hover:text-blue-600 hover:underline transition-colors flex items-center gap-1">
                                    <span class="material-symbols-outlined text-sm">help</span>
                                    How To Get My License Key?
                                </button>
                            </div>
                            <div class="relative">
                                <input name="license_code" id="license_code" class="form-input flex w-full rounded-lg border border-[#dbe0e6] dark:border-slate-600 bg-white dark:bg-[#151e29] h-12 px-4 pr-12 text-base text-[#111418] dark:text-white placeholder:text-[#617589] focus:border-primary focus:ring-1 focus:ring-primary transition-all shadow-sm" placeholder="Enter your license key" required/>
                                <span class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 text-[#617589] pointer-events-none">key</span>
                            </div>
                            <p class="text-xs text-[#617589] dark:text-slate-500 flex items-start gap-1">
                                <span class="material-symbols-outlined text-[14px] mt-0.5">info</span>
                                <span>This key is required to activate and use the application.  <a href="https://help.market.envato.com/hc/en-us/articles/202822600-Where-Is-My-Purchase-Code" target="_blank" class="text-primary font-medium hover:underline">Where to get Envato Purchase Code?</a></span>
                            </p>
                        </div>
                        
                        <!-- Envato Username Input -->
                        <div class="flex flex-col gap-2">
                            <label class="text-[#111418] dark:text-slate-200 text-base font-medium leading-normal">Envato Username</label>
                            <div class="relative">
                                <input name="email" type="text" id="envato_username" class="form-input flex w-full rounded-lg border border-[#dbe0e6] dark:border-slate-600 bg-white dark:bg-[#151e29] h-12 px-4 pr-12 text-base text-[#111418] dark:text-white placeholder:text-[#617589] focus:border-primary focus:ring-1 focus:ring-primary transition-all shadow-sm" placeholder="YourEnvatoUsername" required/>
                                <span class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 text-[#617589] pointer-events-none">person</span>
                            </div>
                            <p class="text-xs text-[#617589] dark:text-slate-500 flex items-start gap-1">
                                <span class="material-symbols-outlined text-[14px] mt-0.5">info</span>
                                <span>Enter your Envato username (not email) associated with your license purchase.</span>
                            </p>
                        </div>
                    </form>
                    
                    <!-- Verification Status Area -->
                    <div class="mt-2 rounded-lg border border-dashed border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-800/50 p-4 flex flex-col sm:flex-row items-center justify-between gap-4">
                        <div class="flex items-center gap-3">
                            <div class="h-10 w-10 shrink-0 rounded-full bg-slate-200 dark:bg-slate-700 flex items-center justify-center text-slate-500 dark:text-slate-400">
                                <span class="material-symbols-outlined">shield</span>
                            </div>
                            <div class="text-center sm:text-left">
                                <p class="text-sm font-semibold text-[#111418] dark:text-white">Verification Required</p>
                                <p class="text-xs text-[#617589] dark:text-slate-400">Validate your license to continue installation.</p>
                            </div>
                        </div>
                        <button type="button" id="verifyLicenseBtn" class="group flex items-center gap-2 rounded-lg bg-white dark:bg-slate-700 border border-slate-300 dark:border-slate-500 px-4 py-2 text-sm font-medium text-slate-700 dark:text-white hover:bg-slate-50 dark:hover:bg-slate-600 hover:text-primary dark:hover:text-primary transition-all shadow-sm w-full sm:w-auto justify-center">
                            <span class="material-symbols-outlined text-[18px] group-hover:animate-spin">sync</span>
                            Verify License
                        </button>
                    </div>
                    
                    <div id="licenseStatus" class="hidden"></div>
                </div>
                
                <!-- Footer Actions -->
                <div class="bg-slate-50 dark:bg-[#151e29] p-6 border-t border-slate-200 dark:border-slate-700 flex flex-col-reverse sm:flex-row justify-between items-center gap-4">
                    <a href="{{ route('installer.step2') }}" class="w-full sm:w-auto flex items-center justify-center gap-2 rounded-lg px-6 py-3 text-base font-medium text-[#617589] dark:text-slate-400 hover:text-[#111418] dark:hover:text-white transition-colors hover:bg-slate-200/50 dark:hover:bg-slate-800">
                        <span class="material-symbols-outlined text-[20px]">arrow_back</span>
                        Previous
                    </a>
                    <button id="nextStepBtn" class="w-full sm:w-auto flex items-center justify-center gap-2 rounded-lg bg-primary px-8 py-3 text-base font-bold text-white shadow-md hover:bg-blue-600 transition-all opacity-50 cursor-not-allowed group" disabled title="Please verify license first">
                        Next Step
                        <span class="material-symbols-outlined text-[20px] group-hover:translate-x-1 transition-transform">arrow_forward</span>
                    </button>
                </div>
            </div>
            
            <!-- Footer Copyright -->
            <div class="text-center">
                <p class="text-sm text-[#617589] dark:text-slate-500">
                    Protected by License API. © 2024 ProInvoice.
                </p>
            </div>
        </div>
    </main>
</div>

<!-- License Help Modal -->
<div id="licenseHelpModal" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <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 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true" onclick="closeLicenseHelp()"></div>
        
        <!-- Modal panel -->
        <div class="inline-block align-bottom bg-white dark:bg-[#1E293B] rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <div class="bg-white dark:bg-[#1E293B] px-6 pt-6 pb-4">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-bold text-[#111418] dark:text-white flex items-center gap-2">
                        <span class="material-symbols-outlined text-primary">help</span>
                        How To Get Your License Key
                    </h3>
                    <button type="button" onclick="closeLicenseHelp()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
                        <span class="material-symbols-outlined">close</span>
                    </button>
                </div>
                
                <div class="space-y-4 text-sm text-[#617589] dark:text-slate-400">
                    <div class="flex gap-3">
                        <div class="flex-shrink-0 w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center font-bold text-xs mt-0.5">1</div>
                        <div>
                            <p class="font-semibold text-[#111418] dark:text-white mb-1">Visit License Verification Page</p>
                            <p>Go to <a href="https://api.matheme.dev" target="_blank" class="text-primary hover:underline font-medium">api.matheme.dev</a>.</p>
                        </div>
                    </div>
                    
                    <div class="flex gap-3">
                        <div class="flex-shrink-0 w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center font-bold text-xs mt-0.5">2</div>
                        <div>
                            <p class="font-semibold text-[#111418] dark:text-white mb-1">Select Products</p>
                            <p>Find or Select "Proinvoice Product" and input your "Envato Purchase Code" in fields required with your Envato Username and Domain.</p>
                        </div>
                    </div>
                    
                    <div class="flex gap-3">
                        <div class="flex-shrink-0 w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center font-bold text-xs mt-0.5">3</div>
                        <div>
                            <p class="font-semibold text-[#111418] dark:text-white mb-1">Copy Your License Key</p>
                            <p>Verify Your Purchase Code and License key will autmatically generate for you.</p>
                        </div>
                    </div>
                    
                    <div class="flex gap-3">
                        <div class="flex-shrink-0 w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center font-bold text-xs mt-0.5">4</div>
                        <div>
                            <p class="font-semibold text-[#111418] dark:text-white mb-1">Paste and Verify</p>
                            <p>Paste the license key in the field above and enter your envato username associate with the products, then click "Verify License".</p>
                        </div>
                    </div>
                </div>
                
                <div class="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
                    <p class="text-xs text-blue-800 dark:text-blue-300 flex items-start gap-2">
                        <span class="material-symbols-outlined text-sm">lightbulb</span>
                        <span><strong>Tip:</strong> If you don't have a envato purchase code yet, you can purchase one from <a href="https://codecanyon.net/" target="_blank" class="text-primary hover:underline font-medium">Envato Market</a>.</span>
                    </p>
                </div>
            </div>
            
            <div class="bg-gray-50 dark:bg-[#151e29] px-6 py-4 flex justify-end">
                <button type="button" onclick="closeLicenseHelp()" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium">
                    Got it
                </button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
// License Help Modal Functions
function showLicenseHelp() {
    document.getElementById('licenseHelpModal').classList.remove('hidden');
    document.body.style.overflow = 'hidden';
}

function closeLicenseHelp() {
    document.getElementById('licenseHelpModal').classList.add('hidden');
    document.body.style.overflow = 'auto';
}

// Open modal when help button is clicked
document.getElementById('showLicenseHelpBtn').addEventListener('click', showLicenseHelp);

// Close modal when clicking outside
document.getElementById('licenseHelpModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeLicenseHelp();
    }
});

// Close modal with Escape key
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && !document.getElementById('licenseHelpModal').classList.contains('hidden')) {
        closeLicenseHelp();
    }
});

let licenseVerified = false;

document.getElementById('verifyLicenseBtn').addEventListener('click', async function() {
    const form = document.getElementById('licenseForm');
    const licenseCode = document.getElementById('license_code').value.trim();
    const envatoUsername = document.getElementById('envato_username').value.trim();
    
    // Client-side validation
    if (!licenseCode || licenseCode.length < 10) {
        alert('Please enter a valid license key (minimum 10 characters)');
        return;
    }
    
    if (!envatoUsername || envatoUsername.length < 3) {
        alert('Please enter your Envato username (minimum 3 characters)');
        return;
    }
    
    const formData = new FormData(form);
    const btn = this;
    const statusDiv = document.getElementById('licenseStatus');
    const nextBtn = document.getElementById('nextStepBtn');
    
    btn.disabled = true;
    btn.innerHTML = '<span class="material-symbols-outlined animate-spin">sync</span> Verifying...';
    
    // Show loading status
    statusDiv.classList.remove('hidden');
    statusDiv.className = 'rounded-lg border border-blue-300 dark:border-blue-600 bg-blue-50 dark:bg-blue-900/20 p-4 flex items-center gap-3';
    statusDiv.innerHTML = '<span class="material-symbols-outlined animate-spin text-blue-600 dark:text-blue-400">sync</span><div><p class="text-sm font-semibold text-blue-800 dark:text-blue-300">Verifying License...</p><p class="text-xs text-blue-700 dark:text-blue-400">Please wait while we verify your license key.</p></div>';
    
    try {
        const response = await fetch('{{ route("installer.license.verify") }}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
            }
        });
        
        const data = await response.json();
        
        statusDiv.classList.remove('hidden');
        
        if (data.success) {
            statusDiv.className = 'rounded-lg border border-emerald-300 dark:border-emerald-600 bg-emerald-50 dark:bg-emerald-900/20 p-4 flex items-center gap-3';
            statusDiv.innerHTML = '<span class="material-symbols-outlined text-emerald-600 dark:text-emerald-400">check_circle</span><div><p class="text-sm font-semibold text-emerald-800 dark:text-emerald-300">License Verified</p><p class="text-xs text-emerald-700 dark:text-emerald-400">' + data.message + '</p></div>';
            licenseVerified = true;
            nextBtn.disabled = false;
            nextBtn.classList.remove('opacity-50', 'cursor-not-allowed');
            nextBtn.title = '';
        } else {
            // Show detailed error message
            let errorMessage = data.message || 'Verification failed';
            
            // If there are validation errors, show them
            if (data.errors) {
                const errorList = Object.values(data.errors).flat().join(', ');
                errorMessage = errorMessage + (errorList ? ': ' + errorList : '');
            }
            
            statusDiv.className = 'rounded-lg border border-red-300 dark:border-red-600 bg-red-50 dark:bg-red-900/20 p-4 flex items-start gap-3';
            statusDiv.innerHTML = '<span class="material-symbols-outlined text-red-600 dark:text-red-400 mt-0.5">error</span><div class="flex-1"><p class="text-sm font-semibold text-red-800 dark:text-red-300">Verification Failed</p><p class="text-xs text-red-700 dark:text-red-400 mt-1">' + errorMessage + '</p></div>';
            btn.disabled = false;
            btn.innerHTML = '<span class="material-symbols-outlined text-[18px] group-hover:animate-spin">sync</span> Verify License';
        }
    } catch (error) {
        statusDiv.className = 'rounded-lg border border-red-300 dark:border-red-600 bg-red-50 dark:bg-red-900/20 p-4 flex items-center gap-3';
        statusDiv.innerHTML = '<span class="material-symbols-outlined text-red-600 dark:text-red-400">error</span><div><p class="text-sm font-semibold text-red-800 dark:text-red-300">Error</p><p class="text-xs text-red-700 dark:text-red-400">' + error.message + '</p></div>';
        btn.disabled = false;
        btn.innerHTML = '<span class="material-symbols-outlined text-[18px] group-hover:animate-spin">sync</span> Verify License';
    }
});

document.getElementById('nextStepBtn').addEventListener('click', function() {
    if (licenseVerified) {
        window.location.href = '{{ route("installer.step4") }}';
    }
});
</script>
@endpush
@endsection