@extends('web.signup.layout')

@section('title', __('application_portal.new_startup_application'))
@section('page_title', __('application_portal.new_startup_application'))
@section('page_subtitle', __('web.portal.startup_app'))

@push('styles')
    @include('web.apps.partials.styles')
    <style>
        .round-team__head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
        .round-team__empty { padding:20px; border:1px dashed var(--slate-200); border-radius:10px; color:var(--slate-500); background:var(--slate-50); text-align:center; }
        .round-team__list { display:grid; gap:10px; list-style:none; padding:0; margin:0; }
        .round-team__card { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--slate-200); border-radius:10px; background:#fff; }
        .round-team__avatar { width:38px; height:38px; display:grid; place-items:center; flex:0 0 38px; border-radius:999px; color:#fff; background:var(--primary-600); font-size:13px; font-weight:800; }
        .round-team__body { flex:1; min-width:0; }
        .round-team__name { display:flex; flex-wrap:wrap; align-items:center; gap:8px; color:var(--slate-900); font-weight:700; }
        .round-team__meta { margin-top:3px; color:var(--slate-500); font-size:13px; }
        .round-team__badge { padding:2px 8px; border-radius:999px; background:#fef3c7; color:#92400e; font-size:11px; font-weight:800; }
        .round-team__actions { display:flex; gap:6px; }
        .round-team__icon { min-width:34px; height:34px; padding:0 9px; border:1px solid var(--slate-200); border-radius:8px; background:#fff; color:var(--slate-600); cursor:pointer; font:inherit; font-weight:700; }
        .round-team__icon:hover { color:var(--primary-700); border-color:var(--primary-200); background:var(--primary-50); }
        .round-team__icon--danger:hover { color:var(--error-700); border-color:var(--error-300); background:var(--error-50); }
        .round-team__backdrop { position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(15,23,42,.55); backdrop-filter:blur(2px); }
        .round-team__modal { width:min(100%,560px); max-height:calc(100vh - 40px); overflow:auto; border-radius:20px; background:#fff; box-shadow:0 30px 60px -20px rgba(15,23,42,.35); }
        .round-team__modal-head, .round-team__modal-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px; border-bottom:1px solid var(--slate-100); }
        .round-team__modal-head h4 { margin:0; color:var(--slate-900); }
        .round-team__modal-body { padding:18px 22px; }
        .round-team__modal-foot { justify-content:flex-end; border-top:1px solid var(--slate-100); border-bottom:0; background:var(--slate-50); }
        .round-team__commitments { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding:4px; border:1px solid var(--slate-200); border-radius:12px; background:var(--slate-100); }
        .round-team__commitments label { position:relative; display:flex; align-items:center; justify-content:center; min-height:40px; margin:0; padding:8px; border-radius:8px; color:var(--slate-600); cursor:pointer; }
        .round-team__commitments input { position:absolute; inset:0; opacity:0; cursor:pointer; }
        .round-team__commitments label:has(input:checked) { background:#fff; color:var(--primary-700); box-shadow:0 0 0 1px var(--primary-300); }
        @media (max-width:720px) { .round-team__head { align-items:stretch; flex-direction:column; } .round-team__modal-head,.round-team__modal-body,.round-team__modal-foot { padding-inline:16px; } }
    </style>
@endpush

@push('scripts')
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('roundMemberManager', (initial = [], commitmentLabels = {}) => ({
                rows: Array.isArray(initial) ? initial.filter(row => row && String(row.name || '').trim() !== '').map(row => ({
                    name: row.name || '', position: row.position || '', commitment: row.commitment || '',
                    country_id: row.country_id ? Number(row.country_id) : null, linkedin: row.linkedin || '', is_founder: !!row.is_founder,
                })) : [],
                commitmentLabels,
                open: false,
                editingIndex: null,
                draft: { name: '', position: '', commitment: '', country_id: null, linkedin: '', is_founder: false },
                blank() { return { name: '', position: '', commitment: '', country_id: null, linkedin: '', is_founder: false }; },
                initials(name) { const parts = String(name || '').trim().split(/\s+/).filter(Boolean).slice(0, 2); return parts.length ? parts.map(part => part[0].toUpperCase()).join('') : '—'; },
                validLinkedin() { return /^https?:\/\/([a-z0-9-]+\.)?linkedin\.com\/.+/i.test(String(this.draft.linkedin || '').trim()); },
                canSave() { return String(this.draft.name || '').trim() !== '' && String(this.draft.position || '').trim() !== '' && !!this.draft.commitment && !!this.draft.country_id && this.validLinkedin(); },
                add() { this.editingIndex = null; this.draft = this.blank(); this.open = true; },
                edit(index) { this.editingIndex = index; this.draft = { ...this.rows[index] }; this.open = true; },
                cancel() { this.open = false; this.editingIndex = null; this.draft = this.blank(); },
                save() {
                    if (!this.canSave()) return;
                    const row = { name: String(this.draft.name).trim(), position: String(this.draft.position).trim(), commitment: this.draft.commitment, country_id: Number(this.draft.country_id), linkedin: String(this.draft.linkedin).trim(), is_founder: !!this.draft.is_founder };
                    this.editingIndex === null ? this.rows.push(row) : this.rows.splice(this.editingIndex, 1, row);
                    this.cancel();
                },
                remove(index) { this.rows.splice(index, 1); },
            }));
        });
    </script>
@endpush

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

    @php($commitmentLabels = collect($commitmentTypes)->mapWithKeys(fn ($commitment) => [$commitment['code'] => $commitment['name']])->all())

    <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.company') }}</p>
                <h2>{{ $startup->display_name }}</h2>
                <p class="app-muted">{{ __('application_portal.form_intro') }}</p>
            </div>
            @if ($current)
                <span class="app-status">{{ __('web.portal.previous') }} #{{ $current->round_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('startup_app.investment_rounds.store') }}" enctype="multipart/form-data">
            @csrf

            <section class="app-form__section">
                <h3>{{ __('web.signup.startup.sections.files') }}</h3>
                <div class="app-form-grid">
                    <div class="field">
                        <label class="label" for="pitch_deck">{{ __('web.signup.startup.fields.pitch_deck') }} <span class="required">*</span></label>
                        <input id="pitch_deck" name="pitch_deck" type="file" required accept=".pdf,.ppt,.pptx" class="input @error('pitch_deck') input--error @enderror">
                        <span class="hint">{{ __('web.signup.startup.hints.pitch_deck') }}</span>
                        @error('pitch_deck')<p class="help--error">{{ $message }}</p>@enderror
                    </div>
                    <div class="field">
                        <label class="label" for="other_files">{{ __('web.signup.startup.fields.other_files') }}</label>
                        <input id="other_files" name="other_files[]" type="file" multiple accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png" class="input @error('other_files.*') input--error @enderror">
                        <span class="hint">{{ __('web.signup.startup.hints.other_files') }}</span>
                        @error('other_files.*')<p class="help--error">{{ $message }}</p>@enderror
                    </div>
                </div>
            </section>

            <section class="app-form__section">
                <h3>{{ __('web.signup.startup.sections.team') }}</h3>
                <div class="round-team" x-data="roundMemberManager(@js(old('members', [])), @js($commitmentLabels))">
                    <div class="round-team__head">
                        <div><label class="label" style="margin:0">{{ __('web.signup.startup.fields.team_members') }}</label><p class="hint" style="margin:3px 0 0">{{ __('web.signup.startup.hints.team') }}</p></div>
                        <button type="button" class="app-btn app-btn--ghost" @click="add()">{{ __('web.signup.startup.buttons.add_member') }}</button>
                    </div>

                    <div class="round-team__empty" x-show="rows.length === 0">{{ __('web.signup.startup.team.empty') }}</div>
                    <ul class="round-team__list" x-show="rows.length > 0">
                        <template x-for="(member, index) in rows" :key="index">
                            <li class="round-team__card">
                                <span class="round-team__avatar" x-text="initials(member.name)"></span>
                                <span class="round-team__body"><span class="round-team__name"><span x-text="member.name"></span><span class="round-team__badge" x-show="member.is_founder">{{ __('web.signup.startup.team.founder_badge') }}</span></span><span class="round-team__meta"><span x-text="member.position"></span> · <span x-text="commitmentLabels[member.commitment] || ''"></span></span></span>
                                <span class="round-team__actions"><button type="button" class="round-team__icon" @click="edit(index)" aria-label="{{ __('web.signup.startup.team.edit_aria') }}">{{ __('web.signup.startup.team.edit_aria') }}</button><button type="button" class="round-team__icon round-team__icon--danger" @click="remove(index)" aria-label="{{ __('web.signup.startup.team.delete_aria') }}">×</button></span>
                            </li>
                        </template>
                    </ul>

                    <template x-for="(member, index) in rows" :key="'hidden-'+index">
                        <span>
                            <input type="hidden" :name="'members['+index+'][name]'" :value="member.name">
                            <input type="hidden" :name="'members['+index+'][position]'" :value="member.position">
                            <input type="hidden" :name="'members['+index+'][commitment]'" :value="member.commitment">
                            <input type="hidden" :name="'members['+index+'][country_id]'" :value="member.country_id">
                            <input type="hidden" :name="'members['+index+'][linkedin]'" :value="member.linkedin">
                            <input type="hidden" :name="'members['+index+'][is_founder]'" :value="member.is_founder ? 1 : 0">
                        </span>
                    </template>

                    <div class="round-team__backdrop" x-show="open" x-cloak @keydown.escape.window="cancel()">
                        <div class="round-team__modal" role="dialog" aria-modal="true" @click.outside="cancel()">
                            <div class="round-team__modal-head"><h4 x-text="editingIndex === null ? @js(__('web.signup.startup.team.modal_add_title')) : @js(__('web.signup.startup.team.modal_edit_title'))"></h4><button type="button" class="round-team__icon" @click="cancel()" aria-label="{{ __('web.signup.startup.team.close_aria') }}">×</button></div>
                            <div class="round-team__modal-body">
                                <div class="app-form-grid">
                                    <div class="field"><label class="label">{{ __('web.signup.startup.team.fields.name') }} <span class="required">*</span></label><input type="text" class="input" x-model="draft.name" maxlength="255" placeholder="{{ __('web.signup.startup.team.placeholders.name') }}"></div>
                                    <div class="field"><label class="label">{{ __('web.signup.startup.team.fields.position_option_id') }} <span class="required">*</span></label><input type="text" class="input" x-model="draft.position" maxlength="255" placeholder="{{ __('web.signup.startup.team.placeholders.position') }}"></div>
                                    <div class="field"><label class="label">{{ __('web.signup.startup.team.fields.commitment') }} <span class="required">*</span></label><div class="round-team__commitments">@foreach ($commitmentTypes as $commitment)<label><input type="radio" value="{{ $commitment['code'] }}" x-model="draft.commitment"><span>{{ $commitment['name'] }}</span></label>@endforeach</div></div>
                                    <div class="field"><label class="label">{{ __('web.signup.startup.team.fields.country_id') }} <span class="required">*</span></label><select class="select" x-model.number="draft.country_id"><option value="">{{ __('web.signup.startup.team.placeholders.country_id') }}</option>@foreach ($countryOptions as $id => $name)<option value="{{ $id }}">{{ $name }}</option>@endforeach</select></div>
                                    <div class="field field--wide"><label class="label">{{ __('web.signup.startup.team.fields.linkedin') }} <span class="required">*</span></label><input type="url" class="input" x-model="draft.linkedin" placeholder="{{ __('web.signup.startup.team.placeholders.linkedin') }}"><p class="hint">{{ __('web.signup.startup.team.linkedin_hint') }}</p></div>
                                    <div class="field field--wide"><label class="choice"><input type="checkbox" x-model="draft.is_founder"><span class="choice__indicator"></span><span class="choice__label">{{ __('web.signup.startup.team.fields.is_founder') }}</span></label></div>
                                </div>
                            </div>
                            <div class="round-team__modal-foot"><button type="button" class="app-btn app-btn--ghost" @click="cancel()">{{ __('web.signup.startup.team.modal_cancel') }}</button><button type="button" class="app-btn" @click="save()" :disabled="!canSave()"><span x-text="editingIndex === null ? @js(__('web.signup.startup.team.modal_save_add')) : @js(__('web.signup.startup.team.modal_save_edit'))"></span></button></div>
                        </div>
                    </div>
                </div>
                @error('members')<p class="help--error">{{ $message }}</p>@enderror
                @error('members.*.name')<p class="help--error">{{ $message }}</p>@enderror
                @error('members.*.position')<p class="help--error">{{ $message }}</p>@enderror
                @error('members.*.commitment')<p class="help--error">{{ $message }}</p>@enderror
                @error('members.*.country_id')<p class="help--error">{{ $message }}</p>@enderror
                @error('members.*.linkedin')<p class="help--error">{{ $message }}</p>@enderror
            </section>

            <section class="app-form__section">
                <h3>{{ __('web.signup.startup.sections.idea') }}</h3>
                <div class="app-form-grid">
                    <div class="field field--wide"><label class="label" for="company_brief">{{ __('web.signup.startup.fields.company_brief') }} <span class="required">*</span></label><textarea id="company_brief" name="company_brief" required maxlength="4000" class="textarea @error('company_brief') textarea--error @enderror" placeholder="{{ __('web.signup.startup.placeholders.company_brief') }}">{{ old('company_brief') }}</textarea>@error('company_brief')<p class="help--error">{{ $message }}</p>@enderror</div>
                    <div class="field"><label class="label" for="problem">{{ __('web.signup.startup.fields.problem') }} <span class="required">*</span></label><textarea id="problem" name="problem" required maxlength="4000" class="textarea @error('problem') textarea--error @enderror" placeholder="{{ __('web.signup.startup.placeholders.problem') }}">{{ old('problem') }}</textarea>@error('problem')<p class="help--error">{{ $message }}</p>@enderror</div>
                    <div class="field"><label class="label" for="solution">{{ __('web.signup.startup.fields.solution') }} <span class="required">*</span></label><textarea id="solution" name="solution" required maxlength="4000" class="textarea @error('solution') textarea--error @enderror" placeholder="{{ __('web.signup.startup.placeholders.solution') }}">{{ old('solution') }}</textarea>@error('solution')<p class="help--error">{{ $message }}</p>@enderror</div>
                    <div class="field field--wide"><label class="label" for="compelling_factors">{{ __('web.signup.startup.fields.compelling_factors') }}</label><textarea id="compelling_factors" name="compelling_factors" maxlength="4000" class="textarea @error('compelling_factors') textarea--error @enderror" placeholder="{{ __('web.signup.startup.placeholders.compelling_factors') }}">{{ old('compelling_factors') }}</textarea>@error('compelling_factors')<p class="help--error">{{ $message }}</p>@enderror</div>
                </div>
            </section>

            <section class="app-form__section">
                <h3>{{ __('web.signup.startup.sections.sector') }}</h3>
                <div class="app-form-grid">
                    <div class="field"><label class="label" for="sector_option_id">{{ __('web.signup.startup.fields.sector_option_id') }} <span class="required">*</span></label><select id="sector_option_id" name="sector_option_id" required class="select @error('sector_option_id') select--error @enderror"><option value="">{{ __('web.signup.startup.placeholders.sector_option_id') }}</option>@foreach ($sectorOptions as $id => $label)<option value="{{ $id }}" @selected((string) old('sector_option_id') === (string) $id)>{{ $label }}</option>@endforeach</select>@error('sector_option_id')<p class="help--error">{{ $message }}</p>@enderror</div>
                    <div class="field"><label class="label" for="product_stage_option_id">{{ __('web.signup.startup.fields.product_stage_option_id') }} <span class="required">*</span></label><select id="product_stage_option_id" name="product_stage_option_id" required class="select @error('product_stage_option_id') select--error @enderror"><option value="">{{ __('web.signup.startup.placeholders.product_stage_option_id') }}</option>@foreach ($productStages as $id => $label)<option value="{{ $id }}" @selected((string) old('product_stage_option_id') === (string) $id)>{{ $label }}</option>@endforeach</select>@error('product_stage_option_id')<p class="help--error">{{ $message }}</p>@enderror</div>
                    <div class="field"><label class="label" for="traction_option_id">{{ __('web.signup.startup.fields.traction_option_id') }} <span class="required">*</span></label><select id="traction_option_id" name="traction_option_id" required class="select @error('traction_option_id') select--error @enderror"><option value="">{{ __('web.signup.startup.placeholders.traction_option_id') }}</option>@foreach ($tractions as $id => $label)<option value="{{ $id }}" @selected((string) old('traction_option_id') === (string) $id)>{{ $label }}</option>@endforeach</select>@error('traction_option_id')<p class="help--error">{{ $message }}</p>@enderror</div>
                    <div class="field"><label class="label" for="revenue_model_option_id">{{ __('web.signup.startup.fields.revenue_model_option_id') }} <span class="required">*</span></label><select id="revenue_model_option_id" name="revenue_model_option_id" required class="select @error('revenue_model_option_id') select--error @enderror"><option value="">{{ __('web.signup.startup.placeholders.revenue_model_option_id') }}</option>@foreach ($revenueModels as $id => $label)<option value="{{ $id }}" @selected((string) old('revenue_model_option_id') === (string) $id)>{{ $label }}</option>@endforeach</select>@error('revenue_model_option_id')<p class="help--error">{{ $message }}</p>@enderror</div>
                    <div class="field"><label class="label" for="customer_focus_option_id">{{ __('web.signup.startup.fields.customer_focus_option_id') }}</label><select id="customer_focus_option_id" name="customer_focus_option_id" class="select @error('customer_focus_option_id') select--error @enderror"><option value="">{{ __('web.signup.startup.placeholders.customer_focus_option_id') }}</option>@foreach ($customerFocuses as $id => $label)<option value="{{ $id }}" @selected((string) old('customer_focus_option_id') === (string) $id)>{{ $label }}</option>@endforeach</select>@error('customer_focus_option_id')<p class="help--error">{{ $message }}</p>@enderror</div>
                </div>
            </section>

            <section class="app-form__section">
                <h3>{{ __('web.signup.startup.sections.round') }}</h3>
                <div class="app-form-grid">
                    <div class="field"><label class="label" for="round_type_option_id">{{ __('web.signup.startup.fields.round_type_option_id') }}</label><select id="round_type_option_id" name="round_type_option_id" class="select @error('round_type_option_id') select--error @enderror"><option value="">{{ __('web.signup.startup.placeholders.round_type_option_id') }}</option>@foreach ($roundTypes as $id => $label)<option value="{{ $id }}" @selected((string) old('round_type_option_id') === (string) $id)>{{ $label }}</option>@endforeach</select>@error('round_type_option_id')<p class="help--error">{{ $message }}</p>@enderror</div>
                    <div class="field"><label class="label" for="investment_stage_option_id">{{ __('web.signup.startup.fields.investment_stage_option_id') }}</label><select id="investment_stage_option_id" name="investment_stage_option_id" class="select @error('investment_stage_option_id') select--error @enderror"><option value="">{{ __('web.signup.startup.placeholders.investment_stage_option_id') }}</option>@foreach ($investmentStages as $id => $label)<option value="{{ $id }}" @selected((string) old('investment_stage_option_id') === (string) $id)>{{ $label }}</option>@endforeach</select>@error('investment_stage_option_id')<p class="help--error">{{ $message }}</p>@enderror</div>
                    <div class="field"><label class="label" for="asking_fund_sar">{{ __('web.signup.startup.fields.asking_fund_sar') }}</label><input id="asking_fund_sar" name="asking_fund_sar" type="number" min="0" step="0.01" class="input @error('asking_fund_sar') input--error @enderror" value="{{ old('asking_fund_sar') }}" placeholder="{{ __('web.signup.startup.placeholders.asking_fund_sar') }}">@error('asking_fund_sar')<p class="help--error">{{ $message }}</p>@enderror</div>
                    <div class="field"><label class="label" for="min_ticket_size_sar">{{ __('web.signup.startup.fields.min_ticket_size_sar') }}</label><input id="min_ticket_size_sar" name="min_ticket_size_sar" type="number" min="0" step="0.01" class="input @error('min_ticket_size_sar') input--error @enderror" value="{{ old('min_ticket_size_sar') }}" placeholder="{{ __('web.signup.startup.placeholders.min_ticket_size_sar') }}">@error('min_ticket_size_sar')<p class="help--error">{{ $message }}</p>@enderror</div>
                    <div class="field"><label class="label" for="offered_equity_pct">{{ __('web.signup.startup.fields.offered_equity_pct') }}</label><input id="offered_equity_pct" name="offered_equity_pct" type="number" min="0" max="100" step="0.01" class="input @error('offered_equity_pct') input--error @enderror" value="{{ old('offered_equity_pct') }}" placeholder="{{ __('web.signup.startup.placeholders.offered_equity_pct') }}">@error('offered_equity_pct')<p class="help--error">{{ $message }}</p>@enderror</div>
                    <div class="field"><label class="label" for="total_raised_sar">{{ __('web.signup.startup.fields.total_raised_sar') }}</label><input id="total_raised_sar" name="total_raised_sar" type="number" min="0" step="0.01" class="input @error('total_raised_sar') input--error @enderror" value="{{ old('total_raised_sar') }}" placeholder="{{ __('web.signup.startup.placeholders.total_raised_sar') }}">@error('total_raised_sar')<p class="help--error">{{ $message }}</p>@enderror</div>
                    <div class="field"><label class="label" for="runway_months">{{ __('web.signup.startup.fields.runway_months') }}</label><input id="runway_months" name="runway_months" type="number" min="0" max="240" step="1" class="input @error('runway_months') input--error @enderror" value="{{ old('runway_months') }}"></div>
                </div>
            </section>

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