@extends('web.signup.layout')

@section('title', __('web.signup.account_access.access_heading'))
@section('body_class', 'account-access-page')
@section('page_title', __('web.signup.account_access.access_heading'))
@section('page_subtitle', __('web.signup.account_access.access_description'))

@section('content')
@php
    $defaultCode = $countries[0]['code'] ?? '';
    $audiences = ['investor' => __('web.signup.account_access.investor'), 'startup' => __('web.signup.account_access.startup')];
    $isCodeStep = is_array($challenge ?? null);
    $delivery = $challenge['delivery'] ?? [];
@endphp
<div class="signup-card signup-card--compact account-access-card"
     data-account-access data-audience="{{ $audience }}" data-available-audiences='@json($availableAudiences)'
     data-send-url="{{ $sendUrl }}" data-verify-url="{{ $verifyUrl }}" data-return-urls='@json($returnUrls)'
     data-errors='@json(__('web.signup.account_access.errors'))'
     data-copy='@json(["both" => __("web.signup.account_access.code_sent_both"), "available" => __("web.signup.account_access.code_sent_available")])'
     data-delivery='@json($delivery)' data-sending-label="{{ __('web.signup.account_access.sending_code') }}"
     data-resending-label="{{ __('web.signup.account_access.resending_code') }}" data-verifying-label="{{ __('web.signup.account_access.verifying') }}">
    <div class="account-access-card__hero" aria-hidden="true"><span class="account-access-card__hero-icon"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9"><rect x="4" y="10" width="16" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3M12 14v2"/></svg></span><span>{{ __('web.signup.account_access.access_badge') }}</span></div>
    <div class="signup-card__body account-access-card__body">
        <div class="account-access-card__step" data-step="phone" @if($isCodeStep) hidden @endif>
            <fieldset class="account-access-card__audiences"><legend class="label">{{ __('web.signup.account_access.account_type') }}</legend><div class="account-access-card__audience-options" role="radiogroup">
                @foreach ($audiences as $key => $label)
                    @php $available = in_array($key, $availableAudiences, true); @endphp
                    <label class="account-access-card__audience @if($key === $audience) is-selected @endif @if(! $available) is-locked @endif"><input type="radio" name="audience" value="{{ $key }}" @checked($key === $audience) @disabled(! $available) data-account-audience><span class="account-access-card__audience-dot" aria-hidden="true"></span><span>{{ $label }}</span></label>
                @endforeach
            </div><p class="hint account-access-card__audience-help">{{ __('web.signup.account_access.account_type_locked') }}</p></fieldset>
            <div class="field account-access-card__phone-field"><label class="label" for="registered_phone">{{ __('web.signup.account_access.phone') }}</label><div class="phone-row account-access-card__phone-row"><select id="registered_country_code" class="select" aria-label="{{ __('web.signup.common.phone.country_aria') }}" data-country-code>@foreach ($countries as $country)<option value="{{ $country['code'] }}" @selected($country['code'] === $defaultCode)>{{ $country['code'] }}</option>@endforeach</select><input id="registered_phone" type="tel" inputmode="numeric" autocomplete="tel-national" pattern="[0-9]*" maxlength="32" class="input" required data-phone></div><p class="hint">{{ __('web.signup.account_access.phone_helper') }}</p></div>
            <button type="button" class="btn btn--primary account-access-card__primary" data-send><span data-send-label>{{ __('web.signup.account_access.send_code') }}</span><span class="spinner" data-send-spinner hidden aria-hidden="true"></span></button>
        </div>
        <div class="account-access-card__step" data-step="code" @unless($isCodeStep) hidden @endunless>
            <div class="account-access-card__code-intro"><span class="account-access-card__code-icon" aria-hidden="true">#</span><div><h2 class="section__title">{{ __('web.signup.account_access.code_heading') }}</h2><p data-code-message></p></div></div>
            <dl class="account-access-card__destinations" data-destinations><div data-phone-destination @if(empty($delivery['phone_masked'])) hidden @endif><dt>{{ __('web.signup.account_access.phone') }}</dt><dd data-phone-destination-value>{{ $delivery['phone_masked'] ?? '' }}</dd></div><div data-email-destination @if(empty($delivery['email_masked'])) hidden @endif><dt>{{ __('web.signup.account_access.email') }}</dt><dd data-email-destination-value>{{ $delivery['email_masked'] ?? '' }}</dd></div></dl>
            <span id="verification_code_label" class="label">{{ __('web.signup.account_access.code') }}</span>
            <div class="account-access-card__otp-boxes" role="group" aria-labelledby="verification_code_label" data-code-boxes>
                @for ($digit = 0; $digit < $otpLength; $digit++)
                    <input id="verification_code_{{ $digit }}" type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1"
                           autocomplete="{{ $digit === 0 ? 'one-time-code' : 'off' }}" class="input account-access-card__otp-digit"
                           aria-label="{{ __('web.signup.account_access.code') }} {{ $digit + 1 }}" data-code-digit>
                @endfor
            </div>
            <input id="verification_code" type="text" inputmode="numeric" autocomplete="one-time-code" pattern="[0-9]*" maxlength="{{ $otpLength }}" class="account-access-card__code-proxy" required data-code tabindex="-1" aria-hidden="true" @if($isCodeStep) autofocus @endif>
            <button type="button" class="btn btn--primary account-access-card__primary" data-verify><span data-verify-label>{{ __('web.signup.account_access.verify_continue') }}</span><span class="spinner" data-verify-spinner hidden aria-hidden="true"></span></button>
            <button type="button" class="account-access-card__resend" data-resend><span data-resend-label>{{ __('web.signup.account_access.resend_code') }}</span><span class="spinner account-access-card__resend-spinner" data-resend-spinner hidden aria-hidden="true"></span></button>
        </div>
        <p class="account-access-card__error" role="alert" data-error hidden></p><a class="account-access-card__back" href="{{ $returnUrls[$audience] }}" data-return-link>{{ __('web.signup.account_access.back_to_signup') }}</a>
    </div>
</div>
@endsection

@push('styles')
<style>
.account-access-card{width:min(100%,560px);margin:0 auto;overflow:hidden}.account-access-card__hero{min-height:76px;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--primary-700);background:linear-gradient(135deg,var(--primary-50),#faf5ff);border-bottom:1px solid var(--primary-100);font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.account-access-card__hero-icon{width:42px;height:42px;display:grid;place-items:center;color:var(--primary-600);background:#fff;border:1px solid var(--primary-100);border-radius:14px}.account-access-card__body{padding:24px 30px 20px}.account-access-card__step{display:grid;gap:14px}.account-access-card__step[hidden],.account-access-card__destinations [hidden]{display:none}.account-access-card__audiences{margin:0;padding:0;border:0}.account-access-card__audience-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.account-access-card__audience{position:relative;min-height:50px;display:flex;align-items:center;gap:10px;padding:10px 14px;color:var(--slate-700);background:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--radius-md);font-size:14px;font-weight:700;cursor:pointer}.account-access-card__audience.is-selected{color:var(--primary-800);background:var(--primary-50);border-color:var(--primary-500);box-shadow:0 0 0 3px rgba(99,102,241,.12)}.account-access-card__audience.is-locked{color:var(--slate-400);cursor:not-allowed}.account-access-card__audience input{position:absolute;opacity:0}.account-access-card__audience-dot{width:18px;height:18px;flex:0 0 18px;border:2px solid var(--slate-300);border-radius:50%;background:#fff}.account-access-card__audience.is-selected .account-access-card__audience-dot{border-color:var(--primary-600);box-shadow:inset 0 0 0 4px #fff;background:var(--primary-600)}.account-access-card__audience-help{margin:0}.account-access-card__phone-row{grid-template-columns:minmax(112px,132px) 1fr;direction:ltr}.account-access-card__phone-row .select,.account-access-card__phone-row .input{direction:ltr;text-align:left}.account-access-card__primary{width:100%;min-height:48px;justify-content:center;gap:9px}.account-access-card__code-intro{display:flex;align-items:center;gap:12px}.account-access-card__code-intro p{margin:3px 0 0;color:var(--slate-500);font-size:13px}.account-access-card__code-icon{width:38px;height:38px;display:grid;place-items:center;color:var(--primary-700);background:var(--primary-50);border-radius:12px;font-weight:800}.account-access-card__code{font-size:22px;font-weight:800;letter-spacing:.42em;text-align:center;direction:ltr}.account-access-card__destinations{display:grid;gap:8px;margin:0;padding:12px 14px;border:1px solid var(--primary-100);border-radius:var(--radius-md);background:var(--primary-50)}.account-access-card__destinations div{display:grid;grid-template-columns:minmax(88px,auto) minmax(0,1fr);gap:10px}.account-access-card__destinations dt{color:var(--slate-500);font-size:12px;font-weight:700}.account-access-card__destinations dd{margin:0;color:var(--slate-800);font-size:13px;font-weight:800;direction:ltr;text-align:start}.account-access-card__resend{justify-self:center;padding:0;border:0;background:transparent;color:var(--primary-700);font-size:13px;font-weight:800;cursor:pointer}.account-access-card__resend:disabled{color:var(--slate-400);cursor:wait}.account-access-card__resend-spinner{width:12px;height:12px;border-color:rgba(79,70,229,.2);border-top-color:var(--primary-600);vertical-align:-2px}.account-access-card__error{margin:16px 0 0;padding:10px 12px;color:var(--error-700);background:var(--error-50);border:1px solid var(--error-300);border-radius:var(--radius-md);font-size:13px;font-weight:600}.account-access-card__back{display:inline-flex;margin-top:16px;color:var(--slate-600);font-size:13px;font-weight:700;text-decoration:none}.account-access-card__back:hover{color:var(--primary-700)}body.account-access-page .signup-header{position:relative;width:100%}body.account-access-page .signup-header__logo{position:static}body.account-access-page .signup-header__logo .nav-lang{position:fixed;inset-inline-end:16px;inset-block-start:18px;z-index:10;min-height:38px;margin:0;padding:8px 16px;background:#fff}@media (min-width:541px) and (min-height:600px){html:has(body.account-access-page),body.account-access-page{height:100%;overflow:hidden}body.account-access-page .signup-shell{box-sizing:border-box;min-height:100dvh;height:100dvh;padding:10px 16px;display:grid;place-items:center;overflow:hidden}body.account-access-page .signup-container{width:min(100%,700px);display:grid;justify-items:center}body.account-access-page .signup-header{margin-bottom:10px}body.account-access-page .signup-header__logo{margin-bottom:5px}body.account-access-page .signup-header__logo img{max-height:38px}body.account-access-page .signup-header h1{margin-bottom:3px;font-size:clamp(23px,2.2vw,29px);line-height:1.25}body.account-access-page .signup-header p{max-width:620px;margin-inline:auto;font-size:13px;line-height:1.45}body.account-access-page .signup-footer{margin-top:9px;font-size:12px}}@media(max-width:540px){.account-access-card__body{padding:22px 18px 20px}.account-access-card__phone-row{grid-template-columns:1fr}}
.account-access-card__otp-boxes{display:grid;grid-template-columns:repeat({{ $otpLength }},minmax(0,1fr));gap:10px;direction:ltr}.account-access-card__otp-digit{min-width:0;height:58px;padding:0;text-align:center;font-size:24px;font-weight:800;line-height:1;letter-spacing:0;direction:ltr}.account-access-card__otp-digit:focus{position:relative;z-index:1}.account-access-card__code-proxy{position:fixed;inline-size:1px;block-size:1px;opacity:0;pointer-events:none;inset-inline-start:-9999px;inset-block-start:-9999px}@media(max-width:400px){.account-access-card__otp-boxes{gap:7px}.account-access-card__otp-digit{height:52px;font-size:21px}}
</style>
@endpush

@push('scripts')
<script>
(()=>{'use strict';const root=document.querySelector('[data-account-access]');if(!root)return;const token=document.querySelector('meta[name="csrf-token"]')?.content||'',errors=JSON.parse(root.dataset.errors||'{}'),copy=JSON.parse(root.dataset.copy||'{}'),available=new Set(JSON.parse(root.dataset.availableAudiences||'[]')),returnUrls=JSON.parse(root.dataset.returnUrls||'{}'),error=root.querySelector('[data-error]'),phone=root.querySelector('[data-phone]'),countryCode=root.querySelector('[data-country-code]'),code=root.querySelector('[data-code]'),phoneStep=root.querySelector('[data-step="phone"]'),codeStep=root.querySelector('[data-step="code"]'),returnLink=root.querySelector('[data-return-link]'),codeMessage=root.querySelector('[data-code-message]'),phoneDestination=root.querySelector('[data-phone-destination]'),emailDestination=root.querySelector('[data-email-destination]'),phoneDestinationValue=root.querySelector('[data-phone-destination-value]'),emailDestinationValue=root.querySelector('[data-email-destination-value]'),selected=()=>root.querySelector('[data-account-audience]:checked')?.value||root.dataset.audience,clear=()=>{error.hidden=true;error.textContent=''},show=(key)=>{error.textContent=errors[key]||errors.generic||'';error.hidden=false},busy=(button,on,labelSelector,spinnerSelector,text)=>{const label=button.querySelector(labelSelector),spinner=button.querySelector(spinnerSelector);if(on)button.dataset.label=label.textContent;button.disabled=on;button.setAttribute('aria-busy',on?'true':'false');label.textContent=on?text:(button.dataset.label||label.textContent);spinner.hidden=!on},renderDelivery=(delivery={})=>{codeMessage.textContent=delivery.available_channel==='both'?(copy.both||''):(copy.available||'');phoneDestinationValue.textContent=delivery.phone_masked||'';emailDestinationValue.textContent=delivery.email_masked||'';phoneDestination.hidden=!delivery.phone_masked;emailDestination.hidden=!delivery.email_masked},request=async(url,payload)=>{const response=await fetch(url,{method:'POST',headers:{'Accept':'application/json','Content-Type':'application/json','X-CSRF-TOKEN':token},body:JSON.stringify({...payload,audience:selected()})}),data=await response.json().catch(()=>({}));if(!response.ok)throw new Error(data.error||'generic');return data};renderDelivery(JSON.parse(root.dataset.delivery||'{}'));root.querySelectorAll('[data-account-audience]').forEach(radio=>radio.addEventListener('change',()=>{if(!radio.checked||!available.has(radio.value))return;root.dataset.audience=radio.value;root.querySelectorAll('.account-access-card__audience').forEach(item=>item.classList.toggle('is-selected',item.contains(radio)));if(returnUrls[radio.value])returnLink.href=returnUrls[radio.value];clear()}));phone?.addEventListener('input',()=>phone.value=phone.value.replace(/\D/g,''));code.addEventListener('input',()=>code.value=code.value.replace(/\D/g,''));const send=root.querySelector('[data-send]');send?.addEventListener('click',async()=>{clear();busy(send,true,'[data-send-label]','[data-send-spinner]',root.dataset.sendingLabel);try{const data=await request(root.dataset.sendUrl,{phone:`${countryCode?.value||''}${phone?.value||''}`});renderDelivery(data.delivery||{});phoneStep.hidden=true;codeStep.hidden=false;code.focus()}catch(e){show(e.message)}finally{busy(send,false,'[data-send-label]','[data-send-spinner]',root.dataset.sendingLabel)}});const resend=root.querySelector('[data-resend]');resend?.addEventListener('click',async()=>{clear();busy(resend,true,'[data-resend-label]','[data-resend-spinner]',root.dataset.resendingLabel);try{const data=await request(root.dataset.sendUrl,{});renderDelivery(data.delivery||{});code.focus()}catch(e){show(e.message)}finally{busy(resend,false,'[data-resend-label]','[data-resend-spinner]',root.dataset.resendingLabel)}});const verify=root.querySelector('[data-verify]');verify.addEventListener('click',async()=>{clear();busy(verify,true,'[data-verify-label]','[data-verify-spinner]',root.dataset.verifyingLabel);try{const data=await request(root.dataset.verifyUrl,{code:code.value});window.location.assign(data.redirect)}catch(e){show(e.message)}finally{busy(verify,false,'[data-verify-label]','[data-verify-spinner]',root.dataset.verifyingLabel)}})})();
/*
 * Resend recovery: the primary handler uses the server-bound challenge and
 * intentionally sends no phone. If a local session cookie was lost between
 * the initial send and resend, retain the original input as a normal-login
 * fallback. The server ignores this value whenever a valid challenge exists.
 */
(() => {
    'use strict';

    const root = document.querySelector('[data-account-access]');
    if (!root) return;

    document.addEventListener('click', async (event) => {
        const button = event.target.closest('[data-account-access] [data-resend]');
        if (!button || !root.contains(button)) return;

        // Replace only the original bubble-phase resend listener.
        event.preventDefault();
        event.stopImmediatePropagation();

        const error = root.querySelector('[data-error]');
        const label = button.querySelector('[data-resend-label]');
        const spinner = button.querySelector('[data-resend-spinner]');
        const selected = root.querySelector('[data-account-audience]:checked')?.value || root.dataset.audience;
        const phone = root.querySelector('[data-phone]');
        const countryCode = root.querySelector('[data-country-code]');
        const csrf = document.querySelector('meta[name="csrf-token"]')?.content || '';
        const errors = JSON.parse(root.dataset.errors || '{}');
        const copy = JSON.parse(root.dataset.copy || '{}');
        const code = root.querySelector('[data-code]');

        if (error) {
            error.hidden = true;
            error.textContent = '';
        }
        if (label) button.dataset.label = label.textContent;
        button.disabled = true;
        button.setAttribute('aria-busy', 'true');
        if (label) label.textContent = root.dataset.resendingLabel;
        if (spinner) spinner.hidden = false;

        try {
            const rawPhone = String(phone?.value || '').replace(/\D/g, '');
            const payload = { audience: selected };
            if (rawPhone !== '') {
                payload.phone = `${countryCode?.value || ''}${rawPhone}`;
            }

            const response = await fetch(root.dataset.sendUrl, {
                method: 'POST',
                credentials: 'same-origin',
                headers: {
                    Accept: 'application/json',
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrf,
                },
                body: JSON.stringify(payload),
            });
            const data = await response.json().catch(() => ({}));
            if (!response.ok) throw new Error(data.error || 'generic');

            const delivery = data.delivery || {};
            const message = root.querySelector('[data-code-message]');
            const phoneDestination = root.querySelector('[data-phone-destination]');
            const emailDestination = root.querySelector('[data-email-destination]');
            const phoneValue = root.querySelector('[data-phone-destination-value]');
            const emailValue = root.querySelector('[data-email-destination-value]');
            if (message) message.textContent = delivery.available_channel === 'both' ? (copy.both || '') : (copy.available || '');
            if (phoneValue) phoneValue.textContent = delivery.phone_masked || '';
            if (emailValue) emailValue.textContent = delivery.email_masked || '';
            if (phoneDestination) phoneDestination.hidden = !delivery.phone_masked;
            if (emailDestination) emailDestination.hidden = !delivery.email_masked;
            code?.focus();
        } catch (exception) {
            if (error) {
                error.textContent = errors[exception.message] || errors.generic || '';
                error.hidden = false;
            }
        } finally {
            button.disabled = false;
            button.setAttribute('aria-busy', 'false');
            if (label) label.textContent = button.dataset.label || label.textContent;
            if (spinner) spinner.hidden = true;
        }
    }, true);
})();

(() => {
    'use strict';
    const root = document.querySelector('[data-account-access]');
    if (!root) return;

    const proxy = root.querySelector('[data-code]');
    const digits = [...root.querySelectorAll('[data-code-digit]')];
    if (!proxy || digits.length === 0) return;

    const clean = (value) => String(value || '').replace(/\D/g, '');
    const value = () => digits.map((input) => input.value).join('');
    const sync = () => {
        proxy.value = value();
        proxy.dispatchEvent(new Event('input', {bubbles: true}));
    };
    const focus = (index) => digits[Math.max(0, Math.min(index, digits.length - 1))]?.focus();
    const fillFrom = (start, incoming) => {
        const characters = clean(incoming).slice(0, digits.length - start).split('');
        characters.forEach((character, offset) => { digits[start + offset].value = character; });
        sync();
        focus(Math.min(start + characters.length, digits.length - 1));
    };

    digits.forEach((input, index) => {
        input.addEventListener('input', () => {
            const incoming = clean(input.value);
            if (incoming.length > 1) {
                fillFrom(index, incoming);
                return;
            }
            input.value = incoming;
            sync();
            if (incoming !== '' && index < digits.length - 1) focus(index + 1);
        });
        input.addEventListener('keydown', (event) => {
            if (event.key === 'Backspace' && input.value === '' && index > 0) {
                event.preventDefault();
                digits[index - 1].value = '';
                sync();
                focus(index - 1);
            }
            if (event.key === 'ArrowLeft') { event.preventDefault(); focus(index - 1); }
            if (event.key === 'ArrowRight') { event.preventDefault(); focus(index + 1); }
        });
        input.addEventListener('paste', (event) => {
            event.preventDefault();
            fillFrom(index, event.clipboardData?.getData('text') || '');
        });
    });

    // The existing transport script focuses the hidden canonical field after
    // a send/resend; hand that focus straight to the visible first box.
    proxy.addEventListener('focus', () => window.requestAnimationFrame(() => {
        focus(digits.findIndex((input) => input.value === '') || 0);
    }));
    if (!root.querySelector('[data-step="code"]')?.hidden) {
        window.requestAnimationFrame(() => focus(0));
    }
})();
</script>
@endpush