@extends('layouts.installer')

@section('title', 'Welcome to ' . config('app.name', 'the Installer'))
@section('subtitle', 'Get started by verifying your license purchase.')

@section('content')
<div class="prose prose-invert max-w-none text-text-dim mb-8 text-sm">
    <p>
        Thank you for purchasing our product. This installation wizard will guide you through the process of setting up the application.
        Before we begin, please verify your Envato purchase code.
    </p>
</div>

<form action="{{ route('install.verify_license') }}" method="POST" class="space-y-6">
    @csrf
    
    <div>
        <label for="x_activation_key" class="block text-sm font-medium text-text-dim mb-2">
            <span>Purchase</span> <span>Code</span>
        </label>
        <input type="text" 
               name="x_activation_key" 
               id="x_activation_key" 
               required
               autocomplete="one-time-code"
               spellcheck="false"
               autocorrect="off"
               autocapitalize="off"
               data-lpignore="true"
               placeholder="Enter your 36-character purchase code"
               class="form-input"
               value="{{ old('x_activation_key') }}">
        @error('x_activation_key')
            <p class="mt-2 text-sm text-red-400">{{ $message }}</p>
        @enderror
        @error('license_token')
            <p class="mt-2 text-sm text-red-400">{{ $message }}</p>
        @enderror
        @error('purchase_code')
            <p class="mt-2 text-sm text-red-400">{{ $message }}</p>
        @enderror
        <p class="mt-2 text-xs text-text-dim">You can find your purchase code in your Envato account downloads section.</p>
    </div>

    @push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const input = document.getElementById('x_activation_key');
            // Kill aggressive autofill of "2222..."
            if (input.value.includes('22222222')) {
                input.value = '';
            }
            // Double check after a short delay for extensions that inject later
            setTimeout(() => {
                if (input.value.includes('22222222')) {
                    input.value = '';
                }
            }, 500);
        });
    </script>
    @endpush

    <div class="flex items-center gap-3">
        <input type="checkbox" name="terms" id="terms" required class="w-4 h-4 rounded border-slate-700 bg-slate-800 text-blue-500 focus:ring-blue-500 focus:ring-offset-slate-900">
        <label for="terms" class="text-sm text-text-dim">
            I agree to the Terms of Service and Privacy Policy.
        </label>
    </div>
    @error('terms')
        <p class="mt-1 text-sm text-red-400">{{ $message }}</p>
    @enderror

    <div class="pt-6 border-t border-white/5 flex justify-end">
        <button type="submit" class="btn-primary">
            Verify License & Continue
            <i data-lucide="arrow-right" class="w-4 h-4"></i>
        </button>
    </div>
</form>
@endsection