{{-- Public Event attendance — phone + OTP gate.

     MIRROR OF: web.demo-attendance.start. Same layout, same `.cmt-att-*` CSS
     surface and the same Alpine flow, so investors meet one consistent
     identity gate across every public portal. Differences are only:
       - routes are event-scoped (the event id is in every endpoint)
       - copy comes from `web.event_attendance.*`
       - closed states (expired / schedule incomplete / unavailable) are
         rendered instead of the form, because an Event can be closed in ways
         a demo cannot.

     NOTHING protected is shown here — only the title and a closed-state
     message. Description, schedule, location and join details appear solely
     on the post-OTP page. --}}
@extends('web.signup.layout')

@section('title', __('web.event_attendance.title'))
@section('page_title', __('web.event_attendance.page_title'))
@section('page_subtitle', '')
@section('body_class', 'has-sticky-logo')

@push('styles')
<style>
    /* `.cmt-att-*` is deliberately reused, not forked: the committee, demo
       and event gates present identical visuals to investors, and a separate
       prefix would mean three copies to keep in step. */
    .cmt-att-card {
        background:#fff; border:1px solid var(--slate-200); border-radius:18px;
        box-shadow:0 1px 2px rgba(15,23,42,.04), 0 12px 32px -16px rgba(15,23,42,.12);
        padding:28px; max-width:480px; margin:0 auto;
    }
    @media (max-width: 640px) { .cmt-att-card { padding:22px; border-radius:14px; } }

    .cmt-att-hero { text-align:center; padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid var(--slate-100); }
    .cmt-att-hero__icon {
        display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px;
        background:var(--primary-50); color:var(--primary-600); border-radius:16px;
        border:1px solid var(--primary-100); margin-bottom:14px;
    }
    .cmt-att-hero__title { margin:0 0 6px; font-size:26px; font-weight:800; color:var(--slate-900); letter-spacing:-.015em; overflow-wrap:anywhere; }
    .cmt-att-hero__sub { margin:0; font-size:14px; line-height:1.7; color:var(--slate-500); max-width:420px; margin-inline:auto; }

    .cmt-att-field { margin-bottom:16px; }
    .cmt-att-field label { display:block; margin-bottom:6px; font-size:13px; font-weight:600; color:var(--slate-700); }

    /* Same country-code control as the demo portal, copied deliberately so the
       two gates ask for a phone number the same way.
       `direction: ltr` keeps the country select on the LEFT in Arabic too —
       without it the page's RTL flips the flex order and the select drifts. */
    .cmt-att-phone {
        display:flex; gap:8px; align-items:stretch;
        border:1px solid var(--slate-200); border-radius:12px; padding:6px;
        direction:ltr; background:#fff; transition:border-color .15s, box-shadow .15s;
    }
    .cmt-att-phone:focus-within { border-color:var(--primary-500); box-shadow:0 0 0 3px rgba(99,102,241,.15); }
    .cmt-att-phone select { border:0; background:transparent; padding:0 8px; font:inherit; font-weight:700; color:var(--slate-700); outline:none; cursor:pointer; }
    .cmt-att-phone input  { flex:1; min-width:0; border:0; background:transparent; padding:10px 8px; font:inherit; font-size:15px; outline:none; direction:ltr; text-align:left; }

    .cmt-att-btn {
        width:100%; padding:13px 18px; border:0; border-radius:12px; cursor:pointer;
        background:var(--primary-600); color:#fff; font-size:15px; font-weight:700; font-family:inherit;
        display:inline-flex; align-items:center; justify-content:center; gap:9px; transition:background .15s;
    }
    .cmt-att-btn:hover:not(:disabled) { background:var(--primary-700); }
    .cmt-att-btn:disabled { opacity:.6; cursor:not-allowed; }
    .cmt-att-btn--ghost { background:transparent; color:var(--primary-600); font-weight:600; font-size:13.5px; width:auto; padding:6px 4px; }

    .cmt-att-err { margin-top:10px; padding:11px 13px; border:1px solid #fecaca; background:#fef2f2; color:#991b1b; border-radius:11px; font-size:13px; line-height:1.6; }
    .cmt-att-note { margin-top:14px; font-size:12.5px; color:var(--slate-500); text-align:center; line-height:1.7; }

    /* Closed states — expired / incomplete / unavailable */
    .cmt-att-state { text-align:center; padding:8px 0 4px; }
    .cmt-att-state__icon {
        display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px;
        border-radius:16px; margin-bottom:14px; font-size:26px;
        background:#fff7ed; color:#c2410c; border:1px solid #fed7aa;
    }
    .cmt-att-state__title { margin:0 0 8px; font-size:19px; font-weight:800; color:var(--slate-900); }
    .cmt-att-state__body { margin:0; font-size:14px; line-height:1.8; color:var(--slate-600); }

    .cmt-att-otp { display:flex; gap:8px; justify-content:center; direction:ltr; }
    .cmt-att-otp input {
        width:52px; height:58px; text-align:center; font-size:22px; font-weight:700;
        border:1px solid var(--slate-200); border-radius:12px; font-family:inherit; color:var(--slate-900);
    }
    .cmt-att-otp input:focus { outline:none; border-color:var(--primary-500); box-shadow:0 0 0 3px rgba(99,102,241,.15); }
    @media (max-width: 400px) { .cmt-att-otp input { width:44px; height:52px; font-size:19px; } }

    .cmt-att-spin { width:15px; height:15px; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%; animation:cmt-spin .7s linear infinite; }
    @keyframes cmt-spin { to { transform:rotate(360deg); } }
</style>
@endpush

@section('content')
<div class="cmt-att-card">

    <div class="cmt-att-hero">
        <span class="cmt-att-hero__icon" aria-hidden="true">
            <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/>
            </svg>
        </span>
        {{-- The title is the ONLY event detail shown before verification. --}}
        <h1 class="cmt-att-hero__title">{{ $event->title }}</h1>
        <p class="cmt-att-hero__sub">{{ __('web.event_attendance.subtitle') }}</p>
    </div>

    @if ($closedReason)
        {{-- Closed: expired, schedule not finalised, or withdrawn. Each says
             which, because "we never set an end" and "it is over" are
             different facts to the investor. --}}
        <div class="cmt-att-state">
            <span class="cmt-att-state__icon" aria-hidden="true">
                {{ $closedReason === 'event_expired' ? '⏱' : '⚠' }}
            </span>
            <h2 class="cmt-att-state__title">{{ __('web.event_attendance.closed.' . $closedReason . '.title') }}</h2>
            <p class="cmt-att-state__body">{{ __('web.event_attendance.closed.' . $closedReason . '.body') }}</p>
        </div>

    @elseif ($verified)
        {{-- Already through the gate in this session — go straight in. --}}
        <div class="cmt-att-state">
            <p class="cmt-att-state__body">{{ __('web.event_attendance.already_verified') }}</p>
            <p style="margin-top:16px;">
                <a class="cmt-att-btn" href="{{ route('event-details.show', $event) }}">
                    {{ __('web.event_attendance.continue') }}
                </a>
            </p>
        </div>

    @else
        <div x-data="eventAttendanceGate({
                sendUrl:   @js(route('event-details.send-otp', $event)),
                resendUrl: @js(route('event-details.resend-otp', $event)),
                verifyUrl: @js(route('event-details.verify-otp', $event)),
                otpLength: @js($otpLength),
                defaultCountry: @js($defaultCountryCode),
                ttl:       @js($otpLengthSeconds)
            })">

            {{-- STEP 1 — phone --}}
            <div x-show="step === 'phone'">
                <div class="cmt-att-field">
                    <label for="phone">{{ __('web.event_attendance.phone_label') }}</label>
                    <div class="cmt-att-phone">
                        <select x-model="country" :disabled="busy"
                                aria-label="{{ __('web.event_attendance.country_aria') }}">
                            <option value="966">🇸🇦 +966</option>
                            <option value="20">🇪🇬 +20</option>
                            <option value="971">🇦🇪 +971</option>
                            <option value="965">🇰🇼 +965</option>
                            <option value="973">🇧🇭 +973</option>
                            <option value="974">🇶🇦 +974</option>
                            <option value="968">🇴🇲 +968</option>
                            <option value="962">🇯🇴 +962</option>
                        </select>
                        <input id="phone" type="tel" inputmode="numeric"
                               autocomplete="tel" x-model="phone"
                               :disabled="busy"
                               @keydown.enter.prevent="send()"
                               placeholder="{{ __('web.event_attendance.phone_placeholder') }}">
                    </div>
                </div>

                <button type="button" class="cmt-att-btn" @click="send()" :disabled="busy || phone.replace(/\D/g, '').length < 6">
                    <span x-show="busy" class="cmt-att-spin" aria-hidden="true"></span>
                    <span x-text="busy ? @js(__('web.event_attendance.sending')) : @js(__('web.event_attendance.send_code'))"></span>
                </button>

                <p class="cmt-att-note">{{ __('web.event_attendance.phone_hint') }}</p>
            </div>

            {{-- STEP 2 — OTP --}}
            <div x-show="step === 'otp'" x-cloak>
                <div class="cmt-att-field">
                    <label>{{ __('web.event_attendance.otp_label') }}</label>
                    <p class="cmt-att-note" style="text-align:start; margin:0 0 12px;"
                       x-text="@js(__('web.event_attendance.otp_sent_to', ['phone' => ':p'])).replace(':p', masked)"></p>

                    {{-- Each box renders from `digits[]` in component state and
                         never gets read back out of the DOM — see onDigit(). --}}
                    <div class="cmt-att-otp" x-ref="otpBoxes">
                        <template x-for="i in otpLength" :key="i">
                            <input type="text" inputmode="numeric" maxlength="1"
                                   :aria-label="@js(__('web.event_attendance.otp_digit')) + ' ' + i"
                                   :value="digits[i - 1]"
                                   @input="onDigit($event, i - 1)"
                                   @keydown.backspace="onBackspace($event, i - 1)"
                                   @paste.prevent="onPaste($event)"
                                   :disabled="busy">
                        </template>
                    </div>
                </div>

                <button type="button" class="cmt-att-btn" @click="verify()" :disabled="busy || code.length < otpLength">
                    <span x-show="busy" class="cmt-att-spin" aria-hidden="true"></span>
                    <span x-text="busy ? @js(__('web.event_attendance.verifying')) : @js(__('web.event_attendance.verify'))"></span>
                </button>

                <p class="cmt-att-note">
                    <button type="button" class="cmt-att-btn--ghost cmt-att-btn" @click="resend()"
                            :disabled="busy || cooldown > 0"
                            x-text="cooldown > 0
                                ? @js(__('web.event_attendance.resend_in', ['s' => ':s'])).replace(':s', cooldown)
                                : @js(__('web.event_attendance.resend'))"></button>
                </p>
            </div>

            <div class="cmt-att-err" x-show="error" x-cloak x-text="error"></div>
        </div>
    @endif
</div>
@endsection

{{-- Emitted ONLY when the gate is actually on screen. A closed or
     already-verified page has no form to drive, and shipping the error
     dictionary regardless put copy like "This event has ended" into the source
     of a page that is deliberately saying something else. --}}
@if (! $closedReason && ! $verified)
@push('scripts')
<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('eventAttendanceGate', (cfg) => ({
        step: 'phone',
        phone: '',
        // National part only; the dial code lives in `country` and the two
        // are joined into E.164 at send time, exactly as the demo portal does.
        country: cfg.defaultCountry,
        // One entry per box. `code` is a getter over this array.
        digits: Array(cfg.otpLength).fill(''),
        masked: '',
        error: '',
        busy: false,
        cooldown: 0,
        otpLength: cfg.otpLength,

        // Error codes are mapped to localized copy HERE; the server returns
        // stable codes only, so it never leaks phrasing or investor detail.
        messages: @js([
            'investor_not_found'  => __('web.event_attendance.errors.investor_not_found'),
            'not_eligible'        => __('web.event_attendance.errors.not_eligible'),
            'event_expired'       => __('web.event_attendance.errors.event_expired'),
            'schedule_incomplete' => __('web.event_attendance.errors.schedule_incomplete'),
            'event_unavailable'   => __('web.event_attendance.errors.event_unavailable'),
            'no_pending_otp'      => __('web.event_attendance.errors.no_pending_otp'),
            'mismatch'            => __('web.event_attendance.errors.mismatch'),
            'expired'             => __('web.event_attendance.errors.otp_expired'),
            'too_many_attempts'   => __('web.event_attendance.errors.too_many_attempts'),
            'rate_limited'        => __('web.event_attendance.errors.rate_limited'),
            'send_failed'         => __('web.event_attendance.errors.send_failed'),
            'generic'             => __('web.event_attendance.errors.generic'),
        ]),

        message(code) { return this.messages[code] || this.messages.generic; },

        async post(url, body) {
            const res = await fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
                },
                body: JSON.stringify(body || {}),
            });
            let json = {};
            try { json = await res.json(); } catch (e) { /* non-JSON error page */ }
            return { ok: res.ok && json.ok === true, json };
        },

        async send() {
            if (this.busy) return;
            this.busy = true; this.error = '';
            // Strip separators and any leading zero before prefixing the dial
            // code, so "05x…" and "5x…" both resolve to the same E.164 number.
            const full = '+' + this.country + this.phone.replace(/\D/g, '').replace(/^0+/, '');
            const { ok, json } = await this.post(cfg.sendUrl, { phone: full });
            this.busy = false;

            if (!ok) { this.error = this.message(json.error_code); return; }

            this.masked = json.masked_phone || '';
            this.step = 'otp';
            this.startCooldown();
            this.$nextTick(() => this.boxes()[0]?.focus());
        },

        async resend() {
            if (this.busy || this.cooldown > 0) return;
            this.busy = true; this.error = '';
            const { ok, json } = await this.post(cfg.resendUrl, {});
            this.busy = false;
            if (!ok) { this.error = this.message(json.error_code); return; }
            this.masked = json.masked_phone || this.masked;
            this.startCooldown();
        },

        async verify() {
            if (this.busy) return;
            this.busy = true; this.error = '';
            const { ok, json } = await this.post(cfg.verifyUrl, { code: this.code });

            if (!ok) {
                this.busy = false;
                this.error = this.message(json.error_code);
                this.clearDigits();
                return;
            }
            // Full page navigation — the details page is server-rendered.
            window.location.href = json.redirect;
        },

        // ── OTP box behaviour ───────────────────────────────────────────
        //
        // The digits live in STATE and the boxes render from it. An earlier
        // version read the values back out with
        // `this.$el.querySelectorAll('.cmt-att-otp input')`, which silently
        // never worked: inside a method invoked from an input's @input handler,
        // Alpine resolves `$el` to THAT INPUT, not the component root. The
        // query therefore searched inside a single <input>, found nothing, and
        // left `code` empty — so the four boxes filled in on screen while
        // "Verify and continue" stayed disabled forever.
        //
        // Keeping the value in `digits[]` removes the DOM round-trip entirely,
        // so the bug cannot come back through a different element scope. Where
        // the DOM is genuinely needed (moving focus) it comes from $refs, which
        // does resolve against the component.

        get code() {
            return this.digits.join('');
        },

        boxes() {
            return [...(this.$refs.otpBoxes?.querySelectorAll('input') ?? [])];
        },

        setDigit(index, value) {
            // Splice rather than index-assign: Alpine's reactivity tracks the
            // array, and a bare `digits[i] = v` does not always notify it.
            this.digits.splice(index, 1, value);
        },

        onDigit(e, index) {
            const digit = e.target.value.replace(/\D/g, '').slice(-1);

            this.setDigit(index, digit);
            // Keep the element in step when the sanitiser rejected the keypress
            // (a letter), since :value alone will not re-render an unchanged
            // state value.
            e.target.value = digit;

            if (digit && index < this.otpLength - 1) {
                this.boxes()[index + 1]?.focus();
            }
        },

        onBackspace(e, index) {
            if (e.target.value) {
                this.setDigit(index, '');
                return;
            }
            if (index > 0) {
                this.setDigit(index - 1, '');
                this.boxes()[index - 1]?.focus();
            }
        },

        // Pasting the whole code is how most people use an SMS OTP.
        onPaste(e) {
            const text = (e.clipboardData?.getData('text') ?? '').replace(/\D/g, '');
            if (!text) return;

            for (let i = 0; i < this.otpLength; i++) {
                this.setDigit(i, text[i] ?? '');
            }
            this.$nextTick(() => {
                const boxes = this.boxes();
                boxes.forEach((b, i) => (b.value = this.digits[i] ?? ''));
                boxes[Math.min(text.length, this.otpLength) - 1]?.focus();
            });
        },

        clearDigits() {
            this.digits = Array(this.otpLength).fill('');
            this.$nextTick(() => {
                const boxes = this.boxes();
                boxes.forEach(b => (b.value = ''));
                boxes[0]?.focus();
            });
        },

        startCooldown() {
            this.cooldown = 60;
            const tick = setInterval(() => {
                if (--this.cooldown <= 0) clearInterval(tick);
            }, 1000);
        },
    }));
});
</script>
@endpush
@endif