@extends('web.signup.layout')

@section('title', __('web.portal.new_application'))
@section('page_title', __('web.portal.new_application'))
@section('page_subtitle', __('web.portal.investor_app'))

@push('styles') @include('web.apps.partials.styles') @endpush

@section('content')
    @include('web.apps.partials.nav', ['audience' => 'investor'])

    @php($previousInvestmentCompanies = array_values((array) old('previous_investments_companies', [])))

    <section class="app-card app-form">
        <div class="app-hero" style="padding:0;border:0;box-shadow:none">
            <div>
                <p class="app-muted">{{ __('web.portal.account') }}</p>
                <h2>{{ $investor->display_name }}</h2>
                <p class="app-muted">{{ __('web.portal.application_form_intro') }}</p>
            </div>
            @if ($current)
                <span class="app-status">{{ __('web.portal.previous') }} #{{ $current->application_number }}</span>
            @endif
        </div>

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

        <form method="post" action="{{ route('investor_app.applications.store') }}">
            @csrf

            {{-- This child form records application-specific answers only. Account
                 identity, contact details, LinkedIn and referral data stay on the
                 permanent investor account and are intentionally absent. --}}
            <section class="app-form__section">
                <h3>{{ __('web.signup.investor.sections.background') }}</h3>
                <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">{{ $message }}</p>@enderror
                </div>
            </section>

            <section class="app-form__section">
                <h3>{{ __('web.signup.investor.sections.preferences') }}</h3>
                <div class="app-form-grid">
                    <div class="field" x-data="multiSelect()" x-init="init()" :class="{ 'has-error': 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', []))
                        <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') }}">×</button></span></template>
                                </span>
                                <span class="ms__chevron">⌄</span>
                            </button>
                            <div x-show="open" x-transition.opacity class="ms__panel" role="listbox" aria-multiselectable="true">
                                <template x-for="option in options" :key="option.value"><button type="button" class="ms__option" role="option" :aria-selected="isSelected(option.value)" @click="toggleOption(option.value)"><span class="ms__check" x-text="isSelected(option.value) ? '✓' : ''"></span><span x-text="option.label"></span></button></template>
                            </div>
                        </div>
                        @error('stage_option_ids')<p class="help--error">{{ $message }}</p>@enderror
                    </div>

                    <div class="field" x-data="multiSelect()" x-init="init()" :class="{ 'has-error': 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', []))
                        <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') }}">×</button></span></template>
                                </span>
                                <span class="ms__chevron">⌄</span>
                            </button>
                            <div x-show="open" x-transition.opacity class="ms__panel" role="listbox" aria-multiselectable="true">
                                <template x-for="option in options" :key="option.value"><button type="button" class="ms__option" role="option" :aria-selected="isSelected(option.value)" @click="toggleOption(option.value)"><span class="ms__check" x-text="isSelected(option.value) ? '✓' : ''"></span><span x-text="option.label"></span></button></template>
                            </div>
                        </div>
                        @error('sector_option_ids')<p class="help--error">{{ $message }}</p>@enderror
                    </div>

                    <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">{{ $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">{{ $message }}</p>@enderror
                    </div>
                </div>
            </section>

            <section class="app-form__section"
                     x-data="{ angelChoice: '{{ old('has_angel_invested_option_id') }}', yesId: '{{ $yesAngelOptionId ?? '' }}', companies: @js($previousInvestmentCompanies ?: ['']), get showYesOnly() { return this.yesId !== '' && this.angelChoice === this.yesId; }, addCompany() { this.companies.push(''); }, removeCompany(index) { this.companies.length === 1 ? this.companies[0] = '' : this.companies.splice(index, 1); } }">
                <h3>{{ __('web.signup.investor.sections.experience') }}</h3>

                <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">{{ $message }}</p>@enderror
                </fieldset>

                <div x-show="showYesOnly" x-transition.opacity class="app-form-grid" style="margin-bottom:16px">
                    <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') }}">
                        @error('previous_investments_count')<p class="help--error">{{ $message }}</p>@enderror
                    </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', []))
                        <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') }}">×</button></span></template></span><span class="ms__chevron">⌄</span></button><div x-show="open" x-transition.opacity class="ms__panel" role="listbox" aria-multiselectable="true"><template x-for="option in options" :key="option.value"><button type="button" class="ms__option" role="option" :aria-selected="isSelected(option.value)" @click="toggleOption(option.value)"><span class="ms__check" x-text="isSelected(option.value) ? '✓' : ''"></span><span x-text="option.label"></span></button></template></div></div>
                    </div>

                    <div class="field field--wide">
                        <label class="label">{{ __('web.signup.investor.fields.previous_investments_companies') }} <span class="required">*</span></label>
                        <template x-for="(_, index) in companies" :key="index"><div class="app-repeater"><input type="text" name="previous_investments_companies[]" class="input" maxlength="255" placeholder="{{ __('web.signup.investor.placeholders.previous_investments_companies') }}" :value="companies[index]" @input="companies[index] = $event.target.value"><button type="button" class="app-btn app-btn--ghost" @click="removeCompany(index)" aria-label="{{ __('web.signup.investor.buttons.remove_aria') }}">×</button></div></template>
                        <button type="button" class="app-btn app-btn--ghost" style="margin-top:8px" @click="addCompany()">{{ __('web.signup.investor.buttons.add_company') }}</button>
                        @error('previous_investments_companies')<p class="help--error">{{ $message }}</p>@enderror
                        @error('previous_investments_companies.*')<p class="help--error">{{ $message }}</p>@enderror
                    </div>
                </div>

                <div class="app-form__experience-stack">
                    <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">{{ $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">{{ $message }}</p>@enderror</fieldset>
                    @endif
                </div>

                <div class="app-form-grid" style="margin-top:16px">
                    <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">{{ $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">{{ $message }}</p>@enderror</fieldset>
                    @endif
                </div>
            </section>

            <button class="app-btn" type="submit">{{ __('web.portal.submit_application') }}</button>
        </form>
    </section>
@endsection