@extends('web.signup.layout')

@section('title', __('web.signup.investor.page_title'))
@section('page_title', __('web.signup.investor.page_title'))
@section('page_subtitle', __('web.signup.investor.page_subtitle'))

@push('styles')
<style>
    /* Dynamic repeater for the "companies invested in" list. Self-contained
       — only this signup screen uses it today; lift to the shared layout
       when other forms need the same component. */
    .repeater { display: grid; gap: 8px; }
    .repeater__row {
        display: grid;
        grid-template-columns: 40px 1fr 36px;
        gap: 8px;
        align-items: center;
    }
    .repeater__chip {
        display: inline-flex; align-items: center; justify-content: center;
        height: 38px; padding: 0 10px;
        background: var(--primary-100);
        color: var(--primary-700);
        border-radius: 10px;
        font-weight: 700; font-size: 13px;
        font-family: ui-monospace, monospace;
    }
    .repeater__remove {
        width: 36px; height: 38px;
        display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid #fecaca;
        background: #fff;
        color: #b91c1c;
        border-radius: 10px;
        cursor: pointer;
        transition: background-color .15s, transform .08s;
    }
    .repeater__remove:hover  { background: #fef2f2; }
    .repeater__remove:active { transform: translateY(1px); }
    .repeater__add {
        display: inline-flex; align-items: center; gap: 6px;
        align-self: start; justify-self: start;
        padding: 8px 14px;
        border: 1px dashed var(--primary-200);
        background: var(--primary-50);
        color: var(--primary-700);
        border-radius: 10px;
        font-size: 13px; font-weight: 700;
        cursor: pointer;
        transition: background-color .12s, border-color .12s;
    }
    .repeater__add:hover {
        background: var(--primary-100);
        border-color: var(--primary-500);
        border-style: solid;
    }
    /* Add/remove animation: rows ease in vertically and fade out on remove. */
    .repeater__row--enter, .repeater__row--leave {
        transition: opacity .18s ease, transform .18s ease;
    }
    .repeater__row--enter-from { opacity: 0; transform: translateY(-4px); }
    .repeater__row--enter-to   { opacity: 1; transform: translateY(0); }
    .repeater__row--leave-from { opacity: 1; transform: translateY(0); }
    .repeater__row--leave-to   { opacity: 0; transform: translateY(-4px); }

    @media (max-width: 540px) {
        .repeater__row { grid-template-columns: 32px 1fr 32px; gap: 6px; }
        .repeater__chip { padding: 0 6px; font-size: 12px; }
        .repeater__remove { width: 32px; height: 36px; }
    }

    /* Avatar (optional profile photo) picker. The native <input> stays in
       the DOM for submission but is visually hidden; the styled label acts
       as the click target so the widget matches the rest of the form's
       visual language. */
    .avatar-pick {
        display: grid;
        grid-template-columns: 88px 1fr;
        gap: 14px;
        align-items: center;
    }
    .avatar-pick__thumb {
        width: 88px; height: 88px;
        border-radius: 50%;
        background: var(--primary-50);
        border: 1px dashed var(--primary-200);
        display: inline-flex; align-items: center; justify-content: center;
        color: var(--primary-500);
        overflow: hidden;
    }
    .avatar-pick__thumb img { width: 100%; height: 100%; object-fit: cover; }
    .avatar-pick__thumb--empty { background: var(--primary-50); }
    .avatar-pick__body {
        display: flex; flex-direction: column;
        gap: 6px; min-width: 0;
    }
    .avatar-pick__input {
        position: absolute !important;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0 0 0 0);
        white-space: nowrap; border: 0;
    }
    .avatar-pick__btn {
        display: inline-flex; align-items: center; gap: 8px;
        align-self: start;
        padding: 9px 14px;
        background: var(--primary-50);
        color: var(--primary-700);
        border: 1px solid var(--primary-200);
        border-radius: 10px;
        font-size: 13px; font-weight: 700;
        cursor: pointer;
        transition: background-color .12s, border-color .12s;
        max-width: 100%;
    }
    .avatar-pick__btn:hover {
        background: var(--primary-100);
        border-color: var(--primary-500);
    }
    .avatar-pick__btn span {
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        max-width: 220px;
    }
    .avatar-pick__clear {
        align-self: start;
        background: transparent;
        border: 0;
        color: #b91c1c;
        font-size: 12px; font-weight: 700;
        padding: 2px 4px;
        cursor: pointer;
    }
    .avatar-pick__clear:hover { text-decoration: underline; }

    @media (max-width: 540px) {
        .avatar-pick { grid-template-columns: 72px 1fr; gap: 10px; }
        .avatar-pick__thumb { width: 72px; height: 72px; }
        .avatar-pick__btn span { max-width: 150px; }
    }
</style>
@endpush

@section('content')

@php
    // Section -> required field names (used to drive the progress pills).
    $sections = [
        ['id' => 'personal',    'fields' => ['first_name', 'last_name', 'country_id', 'phone_number', 'email']],
        ['id' => 'background',  'fields' => ['about', 'linkedin_url']],
        ['id' => 'preferences', 'fields' => ['stage_option_ids', 'sector_option_ids', 'expected_yearly_investments_option_id', 'average_ticket_option_id']],
        ['id' => 'experience',  'fields' => ['has_angel_invested_option_id', 'investment_knowledge_option_id', 'is_in_other_angel_group_option_id']],
        ['id' => 'source',      'fields' => ['how_heard_option_id']],
    ];
@endphp

<div
    x-data='signupForm(@json(["sections" => $sections]))'
    x-cloak
    class="signup-card"
>
    @if (session('status'))
        <div class="alert alert--success" role="status">
            <svg width="20" height="20"><use href="#icon-check-circle"/></svg>
            <div>{{ session('status') }}</div>
        </div>
    @endif

    @if ($errors->any())
        <div class="alert alert--error" role="alert">
            <svg width="20" height="20"><use href="#icon-alert"/></svg>
            <div>
                <strong>{{ __('web.signup.common.errors_heading') }}</strong>
                <ul>
                    @foreach ($errors->all() as $err)
                        <li>{{ $err }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endif

    <form method="post" action="{{ route('investor-signup.submit') }}" class="signup-card__body" enctype="multipart/form-data" novalidate x-ref="form">
        @csrf

        {{-- ════════════════════════════════════════════════════════ --}}
        {{-- Section 1 — Personal info                                 --}}
        {{-- ════════════════════════════════════════════════════════ --}}
        <section class="section" :data-open="isOpen('personal')" :data-active="isActive('personal')" :data-state="isComplete('personal') ? 'complete' : 'idle'">
            <div class="section__header">
                <span class="section__icon"><svg width="22" height="22"><use href="#icon-user"/></svg></span>
                <span class="section__heading">
                    <h2 class="section__title">{{ __('web.signup.investor.sections.identity') }}</h2>
                    <p class="section__subtitle">{{ __('web.signup.investor.subtitles.personal') }}</p>
                </span>
            </div>
            <div class="collapse"><div>
                <div class="section__body">
                    <div class="grid-2">
                        <div class="field">
                            <label class="label" for="first_name">{{ __('web.signup.investor.fields.first_name') }} <span class="required">*</span></label>
                            <input id="first_name" name="first_name" type="text" required autocomplete="given-name" maxlength="255"
                                   class="input @error('first_name') input--error @enderror"
                                   value="{{ old('first_name') }}" placeholder="{{ __('web.signup.investor.placeholders.first_name') }}">
                            @error('first_name')<p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>@enderror
                        </div>

                        <div class="field">
                            <label class="label" for="last_name">{{ __('web.signup.investor.fields.last_name') }} <span class="required">*</span></label>
                            <input id="last_name" name="last_name" type="text" required autocomplete="family-name" maxlength="255"
                                   class="input @error('last_name') input--error @enderror"
                                   value="{{ old('last_name') }}" placeholder="{{ __('web.signup.investor.placeholders.last_name') }}">
                            @error('last_name')<p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>@enderror
                        </div>
                    </div>

                    <div class="grid-2">
                        <div class="field">
                            <label class="label" for="country_id">{{ __('web.signup.investor.fields.country_id') }} <span class="required">*</span></label>
                            {{-- Each option carries `data-phone-code` so the
                                 phone-code <select> below can be auto-synced
                                 when the user changes country. The cities
                                 <select> uses the option's value (=country
                                 id) to filter its own options. --}}
                            <select id="country_id" name="country_id" required
                                    class="select @error('country_id') select--error @enderror"
                                    data-signup-country>
                                <option value="">{{ __('web.signup.investor.placeholders.country_id') }}</option>
                                @foreach ($countries as $c)
                                    <option value="{{ $c['id'] }}"
                                            data-phone-code="{{ $c['code'] }}"
                                            @selected((string) old('country_id') === (string) $c['id'])>{{ $c['name'] }}</option>
                                @endforeach
                            </select>
                            @error('country_id')<p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>@enderror
                        </div>

                        <div class="field">
                            <label class="label" for="city_id">{{ __('web.signup.investor.fields.city_id') }} <span class="required">*</span></label>
                            {{-- Cities carry `data-country-id` so the JS can
                                 hide rows that don't belong to the currently
                                 selected country. Hidden options are
                                 disabled too so a `<form>` submit can't sneak
                                 the wrong row in via dev-tools. --}}
                            <select id="city_id" name="city_id" required
                                    class="select @error('city_id') select--error @enderror"
                                    data-signup-city>
                                <option value="">{{ __('web.signup.investor.placeholders.city_id') }}</option>
                                @foreach ($citiesByCountry as $city)
                                    <option value="{{ $city['id'] }}"
                                            data-country-id="{{ $city['country_id'] }}"
                                            @selected((string) old('city_id') === (string) $city['id'])>{{ $city['name'] }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="field">
                        <label class="label" for="phone_number">{{ __('web.signup.investor.fields.phone_number') }} <span class="required">*</span></label>
                        <div class="phone-row">
                            @php
                                // Default to the first DB-seeded country. If the table is
                                // empty (shouldn't happen — seeder runs in migration), the
                                // <select> simply renders no options and `old()` falls
                                // through with a null current selection. No literal phone
                                // codes anywhere in this Blade.
                                $defaultCode = $countries[0]['code'] ?? '';
                                $oldCode     = old('country_code', $defaultCode);
                            @endphp
                            <select id="country_code" name="country_code" aria-label="{{ __('web.signup.common.phone.country_aria') }}" class="select"
                                    data-signup-phone-code>
                                @foreach ($countries as $c)
                                    <option value="{{ $c['code'] }}" @selected($oldCode === $c['code'])>{{ $c['code'] }}</option>
                                @endforeach
                            </select>
                            <input id="phone_number" name="phone_number" type="tel" required autocomplete="tel" inputmode="tel" maxlength="32"
                                   class="input @error('phone_number') input--error @enderror"
                                   value="{{ old('phone_number') }}" placeholder="{{ __('web.signup.investor.placeholders.phone_number') }}">
                        </div>
                        @error('phone_number')<p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>@enderror
                    </div>

                    <div class="field">
                        <label class="label" for="email">{{ __('web.signup.investor.fields.email') }} <span class="required">*</span></label>
                        <input id="email" name="email" type="email" required autocomplete="email" maxlength="255"
                               class="input @error('email') input--error @enderror"
                               value="{{ old('email') }}" placeholder="{{ __('web.signup.investor.placeholders.email') }}">
                        @error('email')<p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>@enderror
                    </div>

                    {{-- ── Optional profile photo ──────────────────────────
                         The user can skip this — server-side rule is
                         `nullable|image|mimes:jpg,jpeg,png,webp|max:5120`.
                         A small client-side preview reassures the user the
                         right file got picked before they submit (no upload
                         happens client-side — it just renders the chosen
                         File via `URL.createObjectURL`). The chosen file
                         survives a server-side validation error only on the
                         server's terms; we don't try to round-trip it
                         through `old()`. --}}
                    <div class="field" x-data="{
                            preview: null,
                            fileName: '',
                            onPick(e) {
                                const f = e.target.files && e.target.files[0];
                                if (! f) { this.preview = null; this.fileName = ''; return; }
                                this.fileName = f.name;
                                if (this.preview) URL.revokeObjectURL(this.preview);
                                this.preview = URL.createObjectURL(f);
                            },
                            clearPick() {
                                if (this.preview) URL.revokeObjectURL(this.preview);
                                this.preview = null; this.fileName = '';
                                this.$refs.avatarInput.value = '';
                            }
                        }">
                        <label class="label" for="avatar">{{ __('web.signup.investor.fields.avatar') }}</label>
                        <div class="avatar-pick">
                            <div class="avatar-pick__thumb" :class="{ 'avatar-pick__thumb--empty': ! preview }">
                                <template x-if="preview">
                                    <img :src="preview" alt="{{ __('web.signup.investor.buttons.avatar_preview') }}">
                                </template>
                                <template x-if="! preview">
                                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
                                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                                        <circle cx="12" cy="7" r="4"/>
                                    </svg>
                                </template>
                            </div>
                            <div class="avatar-pick__body">
                                <label class="avatar-pick__btn" for="avatar">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
                                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                                        <polyline points="17 8 12 3 7 8"/>
                                        <line x1="12" y1="3" x2="12" y2="15"/>
                                    </svg>
                                    <span x-text="fileName ? fileName : @js(__('web.signup.investor.placeholders.avatar_pick'))"></span>
                                </label>
                                <input id="avatar" name="avatar" type="file"
                                       accept="image/jpeg,image/jpg,image/png,image/webp"
                                       class="avatar-pick__input @error('avatar') input--error @enderror"
                                       x-ref="avatarInput"
                                       @change="onPick($event)">
                                <template x-if="preview">
                                    <button type="button" class="avatar-pick__clear" @click="clearPick()">{{ __('web.signup.investor.buttons.remove_image') }}</button>
                                </template>
                                <p class="help">{{ __('web.signup.investor.hints.avatar') }}</p>
                            </div>
                        </div>
                        @error('avatar')<p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>@enderror
                    </div>
                </div>
            </div></div>
        </section>

        {{-- ════════════════════════════════════════════════════════ --}}
        {{-- Section 2 — Background                                    --}}
        {{-- ════════════════════════════════════════════════════════ --}}
        <section class="section" :data-open="isOpen('background')" :data-active="isActive('background')" :data-state="isComplete('background') ? 'complete' : 'idle'">
            <div class="section__header">
                <span class="section__icon"><svg width="22" height="22"><use href="#icon-briefcase"/></svg></span>
                <span class="section__heading">
                    <h2 class="section__title">{{ __('web.signup.investor.sections.background') }}</h2>
                    <p class="section__subtitle">{{ __('web.signup.investor.subtitles.background') }}</p>
                </span>
            </div>
            <div class="collapse"><div>
                <div class="section__body">
                    <div class="field">
                        <label class="label" for="about">{{ __('web.signup.investor.fields.about') }} <span class="required">*</span></label>
                        <textarea id="about" name="about" required minlength="30" maxlength="4000"
                                  class="textarea @error('about') textarea--error @enderror"
                                  placeholder="{{ __('web.signup.investor.placeholders.about') }}">{{ old('about') }}</textarea>
                        @error('about')<p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>@enderror
                    </div>

                    <div class="field">
                        <label class="label" for="linkedin_url">{{ __('web.signup.investor.fields.linkedin_url') }} <span class="required">*</span></label>
                        <input id="linkedin_url" name="linkedin_url" type="url" required inputmode="url" maxlength="500"
                               placeholder="{{ __('web.signup.investor.placeholders.linkedin_url') }}"
                               class="input @error('linkedin_url') input--error @enderror"
                               value="{{ old('linkedin_url') }}">
                        @error('linkedin_url')<p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>@enderror
                    </div>
                </div>
            </div></div>
        </section>

        {{-- ════════════════════════════════════════════════════════ --}}
        {{-- Section 3 — Investment preferences                        --}}
        {{-- ════════════════════════════════════════════════════════ --}}
        <section class="section" :data-open="isOpen('preferences')" :data-active="isActive('preferences')" :data-state="isComplete('preferences') ? 'complete' : 'idle'">
            <div class="section__header">
                <span class="section__icon"><svg width="22" height="22"><use href="#icon-coins"/></svg></span>
                <span class="section__heading">
                    <h2 class="section__title">{{ __('web.signup.investor.sections.preferences') }}</h2>
                    <p class="section__subtitle">{{ __('web.signup.investor.subtitles.preferences') }}</p>
                </span>
            </div>
            <div class="collapse"><div>
                <div class="section__body">
                    {{-- Investment stages (multi) --}}
                    <div class="field" x-data="multiSelect()" x-init="init()" :class="{ 'has-error': isMissing() }" :data-ms-missing="isMissing()">
                        <label class="label" for="stage_option_ids">{{ __('web.signup.investor.fields.stage_option_ids') }} <span class="required">*</span></label>
                        @php $oldStages = (array) old('stage_option_ids', []); @endphp
                        <select id="stage_option_ids" name="stage_option_ids[]" multiple required class="ms__native" x-ref="select" data-placeholder="{{ __('web.signup.investor.placeholders.stage_option_ids') }}">
                            @foreach ($stageOptions as $id => $label)
                                <option value="{{ $id }}" @selected(in_array((string) $id, array_map('strval', $oldStages), true))>{{ $label }}</option>
                            @endforeach
                        </select>
                        <div class="ms" :class="{ 'is-open': open }">
                            <button type="button" class="ms__button" @click="open = !open" :aria-expanded="open">
                                <span class="ms__values">
                                    <template x-if="selected.length === 0">
                                        <span class="ms__placeholder" x-text="placeholder"></span>
                                    </template>
                                    <template x-for="value in selected" :key="value">
                                        <span class="ms__chip">
                                            <span x-text="labelFor(value)"></span>
                                            <button type="button" @click.stop="removeChip(value)" aria-label="{{ __('web.signup.investor.buttons.remove_aria') }}">
                                                <svg width="12" height="12"><use href="#icon-x"/></svg>
                                            </button>
                                        </span>
                                    </template>
                                </span>
                                <span class="ms__chevron"><svg width="18" height="18"><use href="#icon-chevron-down"/></svg></span>
                            </button>
                            <div x-show="open" x-transition.opacity class="ms__panel" role="listbox" aria-multiselectable="true">
                                <template x-for="o in options" :key="o.value">
                                    <button type="button" class="ms__option" role="option" :aria-selected="isSelected(o.value)" @click="toggleOption(o.value)">
                                        <span class="ms__check"><svg width="12" height="12" x-show="isSelected(o.value)"><use href="#icon-check"/></svg></span>
                                        <span x-text="o.label"></span>
                                    </button>
                                </template>
                            </div>
                        </div>
                        @error('stage_option_ids')<p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>@enderror
                    </div>

                    {{-- Sectors (multi) --}}
                    <div class="field" x-data="multiSelect()" x-init="init()" :class="{ 'has-error': isMissing() }" :data-ms-missing="isMissing()">
                        <label class="label" for="sector_option_ids">{{ __('web.signup.investor.fields.sector_option_ids') }} <span class="required">*</span></label>
                        @php $oldSectors = (array) old('sector_option_ids', []); @endphp
                        <select id="sector_option_ids" name="sector_option_ids[]" multiple required class="ms__native" x-ref="select" data-placeholder="{{ __('web.signup.investor.placeholders.sector_option_ids') }}">
                            @foreach ($sectorOptions as $id => $label)
                                <option value="{{ $id }}" @selected(in_array((string) $id, array_map('strval', $oldSectors), true))>{{ $label }}</option>
                            @endforeach
                        </select>
                        <div class="ms" :class="{ 'is-open': open }">
                            <button type="button" class="ms__button" @click="open = !open" :aria-expanded="open">
                                <span class="ms__values">
                                    <template x-if="selected.length === 0">
                                        <span class="ms__placeholder" x-text="placeholder"></span>
                                    </template>
                                    <template x-for="value in selected" :key="value">
                                        <span class="ms__chip">
                                            <span x-text="labelFor(value)"></span>
                                            <button type="button" @click.stop="removeChip(value)" aria-label="{{ __('web.signup.investor.buttons.remove_aria') }}">
                                                <svg width="12" height="12"><use href="#icon-x"/></svg>
                                            </button>
                                        </span>
                                    </template>
                                </span>
                                <span class="ms__chevron"><svg width="18" height="18"><use href="#icon-chevron-down"/></svg></span>
                            </button>
                            <div x-show="open" x-transition.opacity class="ms__panel" role="listbox" aria-multiselectable="true">
                                <template x-for="o in options" :key="o.value">
                                    <button type="button" class="ms__option" role="option" :aria-selected="isSelected(o.value)" @click="toggleOption(o.value)">
                                        <span class="ms__check"><svg width="12" height="12" x-show="isSelected(o.value)"><use href="#icon-check"/></svg></span>
                                        <span x-text="o.label"></span>
                                    </button>
                                </template>
                            </div>
                        </div>
                        @error('sector_option_ids')<p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>@enderror
                    </div>

                    <div class="grid-2">
                        <div class="field">
                            <label class="label" for="expected_yearly_investments_option_id">{{ __('web.signup.investor.fields.expected_yearly_option_id') }} <span class="required">*</span></label>
                            <select id="expected_yearly_investments_option_id" name="expected_yearly_investments_option_id" required
                                    class="select @error('expected_yearly_investments_option_id') select--error @enderror">
                                <option value="">{{ __('web.signup.investor.placeholders.expected_yearly_option_id') }}</option>
                                @foreach ($yearlyOptions as $id => $label)
                                    <option value="{{ $id }}" @selected((string) old('expected_yearly_investments_option_id') === (string) $id)>{{ $label }}</option>
                                @endforeach
                            </select>
                            @error('expected_yearly_investments_option_id')<p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>@enderror
                        </div>

                        <div class="field">
                            <label class="label" for="average_ticket_option_id">{{ __('web.signup.investor.fields.ticket_option_id') }} <span class="required">*</span></label>
                            <select id="average_ticket_option_id" name="average_ticket_option_id" required
                                    class="select @error('average_ticket_option_id') select--error @enderror">
                                <option value="">{{ __('web.signup.investor.placeholders.ticket_option_id') }}</option>
                                @foreach ($ticketOptions as $id => $label)
                                    <option value="{{ $id }}" @selected((string) old('average_ticket_option_id') === (string) $id)>{{ $label }}</option>
                                @endforeach
                            </select>
                            @error('average_ticket_option_id')<p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>@enderror
                        </div>
                    </div>
                </div>
            </div></div>
        </section>

        {{-- ════════════════════════════════════════════════════════ --}}
        {{-- Section 4 — Experience                                    --}}
        {{-- ════════════════════════════════════════════════════════ --}}
        <section class="section" :data-open="isOpen('experience')" :data-active="isActive('experience')" :data-state="isComplete('experience') ? 'complete' : 'idle'"
                 x-data="{
                     angelChoice: '{{ old('has_angel_invested_option_id') }}',
                     yesId: '{{ $yesAngelOptionId ?? '' }}',
                     companies: (() => {
                         const old = @json(array_values((array) old('previous_investments_companies', [])));
                         return old.length ? old.slice() : [''];
                     })(),
                     addCompany() { this.companies.push(''); this.$nextTick(() => this.focusLastCompany()); },
                     removeCompany(i) {
                         if (this.companies.length === 1) { this.companies[0] = ''; return; }
                         this.companies.splice(i, 1);
                     },
                     focusLastCompany() {
                         const inputs = this.$el.querySelectorAll('[data-company-input]');
                         const last = inputs[inputs.length - 1];
                         if (last) last.focus();
                     },
                     get showYesOnly() { return this.yesId !== '' && this.angelChoice === this.yesId; }
                 }">
            <div class="section__header">
                <span class="section__icon"><svg width="22" height="22"><use href="#icon-sparkles"/></svg></span>
                <span class="section__heading">
                    <h2 class="section__title">{{ __('web.signup.investor.sections.experience') }}</h2>
                    <p class="section__subtitle">{{ __('web.signup.investor.subtitles.experience') }}</p>
                </span>
            </div>
            <div class="collapse"><div>
                <div class="section__body">
                    <fieldset class="field">
                        <legend class="legend">{{ __('web.signup.investor.fields.has_angel_invested') }} <span class="required">*</span></legend>
                        <div class="choice-list">
                            @foreach ($angelInvestedOptions as $id => $label)
                                <label class="choice">
                                    <input type="radio" name="has_angel_invested_option_id" value="{{ $id }}" required
                                           x-model="angelChoice"
                                           @checked((string) old('has_angel_invested_option_id') === (string) $id)>
                                    <span class="choice__indicator"></span> {{ $label }}
                                </label>
                            @endforeach
                        </div>
                        @error('has_angel_invested_option_id')<p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>@enderror
                    </fieldset>

                    {{-- Conditional reveal: shown ONLY when the user picked the
                         "Yes" option for has_angel_invested. The "Yes" option id
                         is resolved server-side at render time (see
                         InvestorSignupController::create) so we never hardcode
                         label_options.id values in JS. --}}
                    <div x-show="showYesOnly" x-transition.opacity>
                        <div class="grid-2">
                            <div class="field">
                                <label class="label" for="previous_investments_count">{{ __('web.signup.investor.fields.previous_investments_count') }}</label>
                                <input id="previous_investments_count" name="previous_investments_count" type="number" min="0" max="1000"
                                       class="input @error('previous_investments_count') input--error @enderror"
                                       value="{{ old('previous_investments_count') }}">
                            </div>

                            <div class="field" x-data="multiSelect()" x-init="init()">
                                <label class="label" for="investment_method_option_ids">{{ __('web.signup.investor.fields.method_option_ids') }}</label>
                                @php $oldMethods = (array) old('investment_method_option_ids', []); @endphp
                                <select id="investment_method_option_ids" name="investment_method_option_ids[]" multiple class="ms__native" x-ref="select" data-placeholder="{{ __('web.signup.investor.placeholders.method_option_ids') }}">
                                    @foreach ($methodOptions as $id => $label)
                                        <option value="{{ $id }}" @selected(in_array((string) $id, array_map('strval', $oldMethods), true))>{{ $label }}</option>
                                    @endforeach
                                </select>
                                <div class="ms" :class="{ 'is-open': open }">
                                    <button type="button" class="ms__button" @click="open = !open" :aria-expanded="open">
                                        <span class="ms__values">
                                            <template x-if="selected.length === 0">
                                                <span class="ms__placeholder" x-text="placeholder"></span>
                                            </template>
                                            <template x-for="value in selected" :key="value">
                                                <span class="ms__chip">
                                                    <span x-text="labelFor(value)"></span>
                                                    <button type="button" @click.stop="removeChip(value)" aria-label="{{ __('web.signup.investor.buttons.remove_aria') }}">
                                                        <svg width="12" height="12"><use href="#icon-x"/></svg>
                                                    </button>
                                                </span>
                                            </template>
                                        </span>
                                        <span class="ms__chevron"><svg width="18" height="18"><use href="#icon-chevron-down"/></svg></span>
                                    </button>
                                    <div x-show="open" x-transition.opacity class="ms__panel" role="listbox" aria-multiselectable="true">
                                        <template x-for="o in options" :key="o.value">
                                            <button type="button" class="ms__option" role="option" :aria-selected="isSelected(o.value)" @click="toggleOption(o.value)">
                                                <span class="ms__check"><svg width="12" height="12" x-show="isSelected(o.value)"><use href="#icon-check"/></svg></span>
                                                <span x-text="o.label"></span>
                                            </button>
                                        </template>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- ── Companies repeater ──────────────────────────
                             Names of startups the investor previously
                             backed. Bound to the Alpine `companies` array;
                             each row submits `previous_investments_companies[]`.
                             Validation: required + min:1 when this branch is
                             visible (handled server-side by
                             InvestorSignupRequest). --}}
                        <div class="field">
                            <label class="label">{{ __('web.signup.investor.fields.previous_investments_companies') }} <span class="required">*</span></label>
                            <div class="repeater">
                                <template x-for="(_, idx) in companies" :key="'company-row-' + idx">
                                    <div class="repeater__row"
                                         x-transition:enter="repeater__row--enter"
                                         x-transition:enter-start="repeater__row--enter-from"
                                         x-transition:enter-end="repeater__row--enter-to"
                                         x-transition:leave="repeater__row--leave"
                                         x-transition:leave-start="repeater__row--leave-from"
                                         x-transition:leave-end="repeater__row--leave-to">
                                        <span class="repeater__chip" x-text="(idx + 1)"></span>
                                        <input type="text"
                                               name="previous_investments_companies[]"
                                               data-company-input
                                               class="input"
                                               maxlength="255"
                                               placeholder="{{ __('web.signup.investor.placeholders.previous_investments_companies') }}"
                                               :value="companies[idx]"
                                               @input="companies[idx] = $event.target.value"
                                               @keydown.enter.prevent="addCompany()">
                                        <button type="button"
                                                class="repeater__remove"
                                                @click="removeCompany(idx)"
                                                aria-label="{{ __('web.signup.investor.buttons.remove_aria') }}">
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
                                                <line x1="18" y1="6" x2="6" y2="18"/>
                                                <line x1="6" y1="6" x2="18" y2="18"/>
                                            </svg>
                                        </button>
                                    </div>
                                </template>
                                <button type="button" class="repeater__add" @click="addCompany()">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
                                        <line x1="12" y1="5" x2="12" y2="19"/>
                                        <line x1="5" y1="12" x2="19" y2="12"/>
                                    </svg>
                                    <span>{{ __('web.signup.investor.buttons.add_company') }}</span>
                                </button>
                            </div>
                            @error('previous_investments_companies')
                                <p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>
                            @enderror
                            @error('previous_investments_companies.*')
                                <p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div class="field">
                        <label class="label" for="investment_knowledge_option_id">{{ __('web.signup.investor.fields.knowledge_option_id') }} <span class="required">*</span></label>
                        <select id="investment_knowledge_option_id" name="investment_knowledge_option_id" required
                                class="select @error('investment_knowledge_option_id') select--error @enderror">
                            <option value="">{{ __('web.signup.investor.placeholders.knowledge_option_id') }}</option>
                            @foreach ($knowledgeOptions as $id => $label)
                                <option value="{{ $id }}" @selected((string) old('investment_knowledge_option_id') === (string) $id)>{{ $label }}</option>
                            @endforeach
                        </select>
                        @error('investment_knowledge_option_id')<p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>@enderror
                    </div>

                    @if (! empty($hasExitOptions))
                        <fieldset class="field">
                            <legend class="legend">{{ __('web.signup.investor.fields.has_exit_option_id') }} <span class="required">*</span></legend>
                            <div class="choice-list">
                                @foreach ($hasExitOptions as $id => $label)
                                    <label class="choice">
                                        <input type="radio" name="has_exit_option_id" value="{{ $id }}" required
                                               @checked((string) old('has_exit_option_id') === (string) $id)>
                                        <span class="choice__indicator"></span> {{ $label }}
                                    </label>
                                @endforeach
                            </div>
                            @error('has_exit_option_id')<p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>@enderror
                        </fieldset>
                    @endif

                    <fieldset class="field">
                        <legend class="legend">{{ __('web.signup.investor.fields.in_other_group_option_id') }} <span class="required">*</span></legend>
                        <div class="choice-list">
                            @foreach ($otherGroupOptions as $id => $label)
                                <label class="choice">
                                    <input type="radio" name="is_in_other_angel_group_option_id" value="{{ $id }}" required
                                           @checked((string) old('is_in_other_angel_group_option_id') === (string) $id)>
                                    <span class="choice__indicator"></span> {{ $label }}
                                </label>
                            @endforeach
                        </div>
                        @error('is_in_other_angel_group_option_id')<p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>@enderror
                    </fieldset>

                    @if (! empty($attendWorkshopsOptions))
                        <fieldset class="field">
                            <legend class="legend">{{ __('web.signup.investor.fields.attend_workshops_option_id') }} <span class="required">*</span></legend>
                            <div class="choice-list">
                                @foreach ($attendWorkshopsOptions as $id => $label)
                                    <label class="choice">
                                        <input type="radio" name="attend_workshops_option_id" value="{{ $id }}" required
                                               @checked((string) old('attend_workshops_option_id') === (string) $id)>
                                        <span class="choice__indicator"></span> {{ $label }}
                                    </label>
                                @endforeach
                            </div>
                            @error('attend_workshops_option_id')<p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>@enderror
                        </fieldset>
                    @endif
                </div>
            </div></div>
        </section>

        {{-- ════════════════════════════════════════════════════════ --}}
        {{-- Section 5 — How heard + consent                           --}}
        {{-- ════════════════════════════════════════════════════════ --}}
        <section class="section" :data-open="isOpen('source')" :data-active="isActive('source')" :data-state="isComplete('source') ? 'complete' : 'idle'">
            <div class="section__header">
                <span class="section__icon"><svg width="22" height="22"><use href="#icon-heart"/></svg></span>
                <span class="section__heading">
                    <h2 class="section__title">{{ __('web.signup.investor.sections.extra') }}</h2>
                    <p class="section__subtitle">{{ __('web.signup.investor.subtitles.source') }}</p>
                </span>
            </div>
            <div class="collapse"><div>
                <div class="section__body">
                    <div class="field">
                        <label class="label" for="how_heard_option_id">{{ __('web.signup.investor.fields.how_heard_option_id') }} <span class="required">*</span></label>
                        <select id="how_heard_option_id" name="how_heard_option_id" required
                                class="select @error('how_heard_option_id') select--error @enderror">
                            <option value="">{{ __('web.signup.investor.placeholders.how_heard_option_id') }}</option>
                            @foreach ($howHeardOptions as $id => $label)
                                <option value="{{ $id }}" @selected((string) old('how_heard_option_id') === (string) $id)>{{ $label }}</option>
                            @endforeach
                        </select>
                        @error('how_heard_option_id')<p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>@enderror
                    </div>
                </div>
            </div></div>
        </section>

        {{-- Privacy-policy consent --}}
        <div style="padding: 0 8px;">
            @include('web.signup.partials.privacy-consent')
        </div>

        {{-- Consent Mode v2 and pseudonymous GA identifiers. Populated by
             the shared signup layout; no contact data is written here. --}}
        <input type="hidden" name="marketing_analytics_storage" value="denied" data-marketing-consent="analytics_storage">
        <input type="hidden" name="marketing_ad_storage" value="denied" data-marketing-consent="ad_storage">
        <input type="hidden" name="marketing_ad_user_data" value="denied" data-marketing-consent="ad_user_data">
        <input type="hidden" name="marketing_ad_personalization" value="denied" data-marketing-consent="ad_personalization">
        <input type="hidden" name="marketing_consent_version" value="" data-marketing-consent-version>
        <input type="hidden" name="marketing_ga_client_id" value="" data-marketing-ga-client-id>
        <input type="hidden" name="marketing_ga_session_id" value="" data-marketing-ga-session-id>

        {{-- Submit --}}
        <div class="actions">
            <span class="actions__hint">
                <svg width="16" height="16"><use href="#icon-shield"/></svg>
                {{ __('web.signup.common.secure_data') }}
            </span>
            <button type="submit" class="btn btn--primary" :disabled="submitting">
                <template x-if="!submitting"><span>{{ __('web.signup.investor.buttons.submit') }}</span></template>
                <template x-if="submitting">
                    <span style="display:inline-flex;align-items:center;gap:8px">
                        <span class="spinner"></span> {{ __('web.signup.investor.buttons.submitting') }}
                    </span>
                </template>
            </button>
        </div>
    </form>
</div>

@endsection

@push('scripts')
<script>
/**
 * Cascading geography + auto phone-code on the investor signup form.
 *
 *   1. When the user changes the "country" (nationality) <select>:
 *        a. Filter the "city" <select> so only cities whose
 *           `data-country-id` matches the chosen country are visible.
 *           Non-matching options are hidden AND disabled so a crafted
 *           submit can't sneak the wrong row through.
 *        b. Reset the city selection if the previously-picked city now
 *           belongs to a different country.
 *        c. Pull `data-phone-code` from the chosen country and set the
 *           phone country-code <select> to match.
 *
 *   2. Runs once on page load to apply the same filter to any `old()`
 *      values surviving a server-side validation error.
 *
 * No external deps — plain DOM. Wrapped in a guard so it's a no-op if
 * either select is missing (e.g. on a different page that includes this
 * partial in the future).
 */
(function () {
    'use strict';
    const countrySel = document.querySelector('[data-signup-country]');
    const citySel    = document.querySelector('[data-signup-city]');
    const phoneCode  = document.querySelector('[data-signup-phone-code]');
    if (! countrySel) return;

    const applyCityFilter = function () {
        if (! citySel) return;
        const cid = countrySel.value;
        let kept  = 0;
        Array.from(citySel.options).forEach(function (opt) {
            // The placeholder ("اختر المدينة") has no value — keep it visible.
            if (! opt.value) return;
            const ownCid = opt.getAttribute('data-country-id');
            const matches = cid !== '' && ownCid === cid;
            opt.hidden   = ! matches;
            opt.disabled = ! matches;
            if (matches) kept++;
        });
        // If the currently-selected city is now hidden, clear it so the
        // form doesn't submit a stale value.
        if (citySel.selectedOptions[0] && citySel.selectedOptions[0].hidden) {
            citySel.value = '';
        }
        // If no cities exist for the chosen country, leave the placeholder
        // selected — UX-friendly empty state.
        if (kept === 0) citySel.value = '';
    };

    const syncPhoneCode = function () {
        if (! phoneCode) return;
        const opt = countrySel.selectedOptions[0];
        if (! opt) return;
        const code = opt.getAttribute('data-phone-code') || '';
        if (code === '') return;
        // Only update if a matching <option> exists in the phone-code select.
        const match = Array.from(phoneCode.options).find(function (o) {
            return o.value === code;
        });
        if (match) phoneCode.value = code;
    };

    countrySel.addEventListener('change', function () {
        applyCityFilter();
        syncPhoneCode();
    });

    // Initial pass — keeps `old()` redraws consistent after server-side
    // validation failures.
    applyCityFilter();
})();
</script>
@endpush