@extends('install.layout')

@section('content')
<h1>Step 4 — License activation</h1>
<p>Enter your purchase code to activate the application, or use a temporary license for testing.</p>

@if($errors->any())
    <ul class="install-errors">
        @foreach($errors->all() as $err)
            <li>{{ $err }}</li>
        @endforeach
    </ul>
@endif

<form method="post" action="{{ route('install.process', ['step' => 4]) }}" id="license-form">
    @csrf
    <div class="license-option">
        <label>
            <input type="radio" name="license_type" value="purchase" {{ old('license_type', $license['license_type'] ?? 'purchase') === 'purchase' ? 'checked' : '' }} id="license-type-purchase">
            I have a purchase code
        </label>
    </div>
    <div id="purchase-code-wrap">
        <label for="purchase_code">Purchase code</label>
        <input type="text" name="purchase_code" id="purchase_code" value="{{ old('purchase_code', $license['purchase_code'] ?? '') }}" placeholder="Enter your purchase code">
    </div>

    <div class="license-option temp-license">
        <label>
            <input type="radio" name="license_type" value="temporary" {{ old('license_type', $license['license_type'] ?? '') === 'temporary' ? 'checked' : '' }} id="license-type-temporary">
            Use temporary license (testing only — remove before production)
        </label>
    </div>

    <div class="actions">
        <a href="{{ route('install.step', ['step' => 3]) }}" class="btn btn-secondary">Back</a>
        <button type="submit" class="btn btn-primary">Continue</button>
    </div>
</form>

<style>
.install-errors { color: #c62828; background: #ffebee; padding: 12px; border-radius: 4px; margin-bottom: 16px; }
.license-option { margin: 16px 0 8px; }
.license-option label { display: flex; align-items: center; gap: 8px; font-weight: normal; }
.license-option input[type="radio"] { margin: 0; }
.temp-license { margin-top: 20px; padding-top: 16px; border-top: 1px solid #e0e0e0; }
#purchase-code-wrap { margin-top: 8px; }
</style>
<script>
document.getElementById('license-form').addEventListener('change', function() {
    var usePurchase = document.getElementById('license-type-purchase').checked;
    document.getElementById('purchase_code').required = usePurchase;
    document.getElementById('purchase-code-wrap').style.display = usePurchase ? 'block' : 'none';
});
document.getElementById('license-form').dispatchEvent(new Event('change'));
</script>
@endsection