{{-- Working activation request form. Keep field names, IDs, and submit JS unchanged. --}}
@push('styles')
<style>
.ac-steps {
    display: flex;
    gap: 8px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}
.ac-steps__item {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
    border-radius: 8px;
}
.ac-steps__item.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.ac-steps__item.is-done {
    background: var(--accent-soft);
    border-color: var(--accent-line);
    color: var(--accent);
}
.ac-intro {
    margin-bottom: 1rem;
    color: var(--body);
    font-size: 0.95rem;
    line-height: 1.5;
}
.ac-intro ul { margin: 0.5rem 0 0 1.1rem; padding: 0; }
.ac-section-title {
    margin: 1.25rem 0 0.65rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--line);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
}
.ac-autofill {
    margin-bottom: 0.75rem;
}
</style>
@endpush

<div class="ac-form">
    @php
        $hasErrors = $errors->any();
        $oldType = old('license_type', '');
        $startOnStep2 = $hasErrors && in_array($oldType, ['commercial', 'nfr'], true);
    @endphp

    <ul class="ac-steps" id="ac-steps" aria-label="Request steps">
        <li class="ac-steps__item {{ $startOnStep2 ? 'is-done' : 'is-active' }}" data-step-label="1">Step 1 — License type</li>
        <li class="ac-steps__item {{ $startOnStep2 ? 'is-active' : '' }}" data-step-label="2">Step 2 — Request details</li>
    </ul>

    <form method="POST" action="{{ route('portal.activation-requests.store') }}" class="card" id="ac-request-form">
        @csrf
        <div class="card-body">
            <div id="ac-step-1" @if($startOnStep2) style="display:none" @endif>
                <p class="ac-intro">Select the license type for this Activation Code request.</p>
                <div class="row g-3">
                    <div class="col-md-8">
                        <label class="form-label" for="license_type">License type</label>
                        <select class="form-select @error('license_type') is-invalid @enderror" id="license_type" name="license_type" required>
                            <option value="">Select the license type…</option>
                            @foreach ($licenseTypes as $type)
                                <option value="{{ $type->value }}" @selected($oldType === $type->value)>{{ $type->label() }}</option>
                            @endforeach
                        </select>
                        @error('license_type')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-12">
                        <button type="button" class="btn btn-primary" id="ac-continue">Continue</button>
                        <a href="{{ route('portal.activation-requests.index') }}" class="btn btn-outline-secondary">Cancel</a>
                    </div>
                </div>
            </div>

            <div id="ac-step-2" @unless($startOnStep2) style="display:none" @endunless>
                <div id="intro-commercial" class="ac-intro" style="display:none">
                    <p class="mb-2"><strong id="title-commercial">Commercial License</strong></p>
                    <p>To request an Activation Code for a Commercial License, please fill in the form below. Mandatory fields are marked. The data you provide MUST be EXACTLY the same as entered when activating a SYSTRONICS product.</p>
                    <p><u>The Activation Code will NOT be generated online.</u> End-user confirmation is requested using the company email addresses. The code is emailed within 2 working days after eligibility verification and end-user confirmation. Eligibility includes:</p>
                    <ul>
                        <li>Purchase of a new product, for which payment is made.</li>
                        <li>Valid Software Assurance.</li>
                    </ul>
                </div>
                <div id="intro-nfr" class="ac-intro" style="display:none">
                    <p class="mb-2"><strong>Evaluation - Not For Resale (NFR) - License</strong></p>
                    <p>To request an Activation Code for an Evaluation (NFR) license, please fill in the form below. Mandatory fields are marked. The data you provide MUST be EXACTLY the same as entered when activating a SYSTRONICS product.</p>
                    <p><u>The Activation Code will NOT be generated online.</u> It is emailed within 48 hours after eligibility verification. This form is for SYSTRONICS Business Partners.</p>
                </div>

                <div class="row g-3">
                    <div class="col-md-6" id="licensing-model-wrap">
                        <label class="form-label" for="licensing_model">Licensing model</label>
                        <select class="form-select @error('licensing_model') is-invalid @enderror" id="licensing_model" name="licensing_model">
                            <option value="">Select…</option>
                            @foreach ($licensingModels as $model)
                                <option value="{{ $model->value }}" @selected(old('licensing_model') === $model->value)>{{ $model->label() }}</option>
                            @endforeach
                        </select>
                        @error('licensing_model')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="col-12"><h6 class="ac-section-title">Product information</h6></div>

                    <div class="col-md-6">
                        <label class="form-label" for="product_id">Product</label>
                        <select class="form-select @error('product_id') is-invalid @enderror" id="product_id" name="product_id" required>
                            <option value="">Select…</option>
                            @foreach ($products as $product)
                                <option value="{{ $product->id }}" data-name="{{ $product->name }}" @selected((string) old('product_id') === (string) $product->id)>{{ $product->name }}</option>
                            @endforeach
                        </select>
                        @error('product_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-md-3">
                        <label class="form-label" for="product_version">Product version</label>
                        <input class="form-control @error('product_version') is-invalid @enderror" id="product_version" name="product_version" value="{{ old('product_version') }}" required>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label" for="product_type">Product type</label>
                        <input class="form-control" id="product_type" name="product_type" value="{{ old('product_type') }}">
                    </div>
                    <div class="col-12">
                        <label class="form-label">Modules</label>
                        <div id="submodules-checkboxes" class="border rounded p-3 mb-2" style="display:none"></div>
                        <textarea class="form-control @error('submodules') is-invalid @enderror" id="submodules" name="submodules_text" rows="3" placeholder="One module per line (used when no checklist exists for the product)">{{ is_array(old('submodules')) ? implode("\n", old('submodules')) : old('submodules') }}</textarea>
                        <div id="submodules-hidden"></div>
                        @error('submodules')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                        <small class="text-muted">Checklist products use checkboxes; others use free text. Required unless the product is on the no-modules list. NFR limited to {{ \App\Domain\Licensing\Support\NoModulesProducts::nfrLimit() }} modules (except exempt products).</small>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label" for="sage_version">Sage 300 version</label>
                        <input class="form-control" id="sage_version" name="sage_version" value="{{ old('sage_version') }}" required>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label" for="sage_edition">Sage edition</label>
                        <input class="form-control" id="sage_edition" name="sage_edition" value="{{ old('sage_edition') }}" maxlength="3" required>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label" for="sage_serial">Sage serial</label>
                        <input class="form-control" id="sage_serial" name="sage_serial" value="{{ old('sage_serial') }}" required>
                    </div>

                    <div class="col-12">
                        <h6 class="ac-section-title" id="eu-section-title">End user</h6>
                        @if (! empty($autofill['end_users']))
                            <div class="ac-autofill" id="autofill-eu-wrap" style="display:none">
                                <label class="form-label" for="autofill-eu">Auto complete using data for</label>
                                <select class="form-select" id="autofill-eu">
                                    <option value="">Select prior end user…</option>
                                    @foreach ($autofill['end_users'] as $opt)
                                        <option value="{{ $opt['id'] }}">{{ $opt['label'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                        @endif
                        @if (! empty($autofill['companies']))
                            <div class="ac-autofill" id="autofill-nfr-wrap" style="display:none">
                                <label class="form-label" for="autofill-nfr">Auto complete using data for</label>
                                <select class="form-select" id="autofill-nfr">
                                    <option value="">Select prior company…</option>
                                    @foreach ($autofill['companies'] as $opt)
                                        <option value="{{ $opt['id'] }}">{{ $opt['label'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                        @endif
                    </div>
                    @include('portal.activation-requests._party', ['prefix' => 'eu', 'required' => true])

                    <div class="col-12" id="reseller-block">
                        <h6 class="ac-section-title">Reseller / business partner</h6>
                        @if (! empty($autofill['companies']))
                            <div class="ac-autofill">
                                <label class="form-label" for="autofill-reseller">Auto complete using data for</label>
                                <select class="form-select" id="autofill-reseller">
                                    <option value="">Select prior reseller…</option>
                                    @foreach ($autofill['companies'] as $opt)
                                        <option value="{{ $opt['id'] }}">{{ $opt['label'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                        @endif
                        <div class="row g-3">
                            @include('portal.activation-requests._party', ['prefix' => 'res', 'required' => false])
                            <div class="col-md-6">
                                <label class="form-label" for="distributor_name">Distributor</label>
                                <input class="form-control @error('distributor_name') is-invalid @enderror" id="distributor_name" name="distributor_name" value="{{ old('distributor_name') }}">
                                @error('distributor_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                        </div>
                    </div>

                    <div class="col-12" id="nfr-agreed-wrap" style="display:none">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="1" id="agreed" name="agreed" @checked(old('agreed') == 1)>
                            <label class="form-check-label" for="agreed">I agree to the NFR / evaluation EULA terms</label>
                        </div>
                        @error('agreed')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                    </div>
                </div>
            </div>
        </div>
        <div class="card-footer d-flex gap-2" id="ac-step-2-footer" @unless($startOnStep2) style="display:none" @endunless>
            <button type="button" class="btn btn-outline-secondary" id="ac-back">Back</button>
            <button class="btn btn-primary" type="submit">Submit request</button>
            <a href="{{ route('portal.activation-requests.index') }}" class="btn btn-outline-secondary">Cancel</a>
        </div>
    </form>
</div>

@push('scripts')
<script>
(() => {
    const type = document.getElementById('license_type');
    const step1 = document.getElementById('ac-step-1');
    const step2 = document.getElementById('ac-step-2');
    const step2Footer = document.getElementById('ac-step-2-footer');
    const steps = document.querySelectorAll('#ac-steps .ac-steps__item');
    const reseller = document.getElementById('reseller-block');
    const modelWrap = document.getElementById('licensing-model-wrap');
    const nfrWrap = document.getElementById('nfr-agreed-wrap');
    const introCommercial = document.getElementById('intro-commercial');
    const introNfr = document.getElementById('intro-nfr');
    const euTitle = document.getElementById('eu-section-title');
    const autofillEu = document.getElementById('autofill-eu-wrap');
    const autofillNfr = document.getElementById('autofill-nfr-wrap');
    const product = document.getElementById('product_id');
    const catalog = {!! \App\Domain\Licensing\Support\SubmoduleCatalog::jsonForFrontend() !!};
    const box = document.getElementById('submodules-checkboxes');
    const text = document.getElementById('submodules');
    const hidden = document.getElementById('submodules-hidden');
    const oldMods = @json(old('submodules', []));
    const autofillUrl = @json(route('portal.activation-requests.autofill'));

    const setStep = (n) => {
        const on2 = n === 2;
        step1.style.display = on2 ? 'none' : '';
        step2.style.display = on2 ? '' : 'none';
        step2Footer.style.display = on2 ? '' : 'none';
        steps[0].classList.toggle('is-active', !on2);
        steps[0].classList.toggle('is-done', on2);
        steps[1].classList.toggle('is-active', on2);
    };

    const syncLicense = () => {
        const isNfr = type.value === 'nfr';
        const isCommercial = type.value === 'commercial';
        reseller.style.display = isNfr ? 'none' : '';
        modelWrap.style.display = isNfr ? 'none' : '';
        nfrWrap.style.display = isNfr ? '' : 'none';
        introCommercial.style.display = isCommercial ? '' : 'none';
        introNfr.style.display = isNfr ? '' : 'none';
        if (euTitle) {
            euTitle.textContent = isNfr ? 'Company / business partner' : 'End user';
        }
        if (autofillEu) autofillEu.style.display = isCommercial ? '' : 'none';
        if (autofillNfr) autofillNfr.style.display = isNfr ? '' : 'none';
    };

    const selectedName = () => {
        const opt = product.options[product.selectedIndex];
        return opt ? (opt.dataset.name || '') : '';
    };

    const syncModules = () => {
        const name = selectedName();
        const def = catalog[name] || null;
        hidden.innerHTML = '';
        if (!def) {
            box.style.display = 'none';
            box.innerHTML = '';
            text.style.display = '';
            text.name = 'submodules';
            return;
        }
        text.style.display = 'none';
        text.name = 'submodules_text';
        box.style.display = '';
        box.innerHTML = def.modules.map((mod, i) => {
            const checked = Array.isArray(oldMods) && oldMods.includes(mod)
                ? 'checked'
                : (def.mandatory.includes(i) ? 'checked' : '');
            const mandatory = def.mandatory.includes(i);
            return `<div class="form-check">
                <input class="form-check-input" type="checkbox" name="submodules[]" value="${mod.replace(/"/g, '&quot;')}" id="mod_${i}" ${checked} ${mandatory ? 'data-mandatory="1"' : ''}>
                <label class="form-check-label" for="mod_${i}">${mod}${mandatory ? ' (required)' : ''}</label>
            </div>`;
        }).join('');
    };

    const applyFields = (fields) => {
        Object.entries(fields || {}).forEach(([key, value]) => {
            const el = document.getElementById(key) || document.querySelector(`[name="${key}"]`);
            if (el) el.value = value ?? '';
        });
    };

    const loadAutofill = async (id, target) => {
        if (!id) return;
        const url = new URL(autofillUrl, window.location.origin);
        url.searchParams.set('id', id);
        url.searchParams.set('target', target);
        const res = await fetch(url.toString(), {
            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
            credentials: 'same-origin',
        });
        if (!res.ok) return;
        const data = await res.json();
        applyFields(data.fields || {});
    };

    document.getElementById('ac-continue')?.addEventListener('click', () => {
        if (!type.value) {
            type.focus();
            type.reportValidity?.();
            return;
        }
        syncLicense();
        setStep(2);
    });
    document.getElementById('ac-back')?.addEventListener('click', () => setStep(1));

    document.getElementById('autofill-eu')?.addEventListener('change', (e) => loadAutofill(e.target.value, 'eu'));
    document.getElementById('autofill-nfr')?.addEventListener('change', (e) => loadAutofill(e.target.value, 'nfr'));
    document.getElementById('autofill-reseller')?.addEventListener('change', (e) => loadAutofill(e.target.value, 'reseller'));

    type.addEventListener('change', syncLicense);
    product.addEventListener('change', syncModules);
    syncLicense();
    syncModules();
})();
</script>
@endpush