@extends('web.signup.layout')

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

@push('styles')
<style>
    .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; }
    .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 label { display:block; margin-bottom:6px; font-size:13px; font-weight:600; color: var(--slate-700); }
    /* `direction: ltr` keeps the country-code select on the LEFT in
       BOTH Arabic and English. Without it, the page's RTL direction
       flips the flex order and the select drifts to the right
       (operator-reported inconsistency across OTP screens, 2026-06-15). */
    .cmt-att-phone {
        display:flex; gap:8px; align-items:stretch;
        border:1px solid var(--slate-300); border-radius:12px; padding:6px;
        direction: ltr;
    }
    .cmt-att-phone:focus-within { border-color: var(--primary-500); box-shadow: var(--ring); }
    .cmt-att-phone select { border:0; background:transparent; padding:0 8px; font:inherit; font-weight:700; color: var(--slate-700); outline: none; }
    .cmt-att-phone input  { flex:1; border:0; background:transparent; padding:10px 8px; font:inherit; font-size:15px; outline: none; direction:ltr; text-align:left; }

    .cmt-att-submit {
        display:flex; align-items:center; justify-content:center; gap:10px;
        width:100%;
        background: var(--primary-600); color:#fff; border:0;
        padding:14px 18px; border-radius:12px;
        font: inherit; font-size:15px; font-weight:700;
        cursor:pointer; transition: background .15s;
    }
    .cmt-att-submit:disabled { opacity:.55; cursor: not-allowed; }
    .cmt-att-submit:hover:not(:disabled) { background: var(--primary-700); }

    .cmt-att-alert { display:flex; gap:10px; padding:12px 14px; border-radius:10px; margin-top:14px; font-size:13.5px; }
    .cmt-att-alert--error { background: var(--error-50); color: var(--error-700); border:1px solid var(--error-300); }

    /* `minmax(0, 1fr)` is critical: default `1fr` is `minmax(auto, 1fr)`,
       and an unsized <input>'s min-content width (~20 char baseline) blows
       past the 1fr cap, which is what made the boxes overflow the card.
       Setting the min to 0 plus an explicit width:100% on each input keeps
       all four cells locked inside the card on every viewport. */
    .cmt-att-otp {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
        max-width: 100%;
    }
    .cmt-att-otp input {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        text-align: center;
        font: inherit; font-size: 22px; font-weight: 800;
        padding: 14px 8px;
        border: 1px solid var(--slate-300); border-radius: 12px;
        background: #fff; outline: none; direction: ltr;
    }
    .cmt-att-otp input:focus { border-color: var(--primary-500); box-shadow: var(--ring); }
    .cmt-att-otp--error input { border-color: var(--error-500); }

    .cmt-att-resend { text-align:center; margin-top:14px; color: var(--slate-500); font-size:13px; }
    .cmt-att-resend button { background:0; border:0; color: var(--primary-600); font-weight:700; cursor:pointer; }
    .cmt-att-resend .cd { font-variant-numeric: tabular-nums; direction:ltr; display:inline-block; font-weight:700; color: var(--slate-800); }

    .cmt-att-spinner {
        width:18px; height:18px; border-radius:999px;
        border:2px solid rgba(255,255,255,.3); border-top-color:#fff;
        display:inline-block; animation: cmt-att-spin 1s linear infinite;
    }
    @keyframes cmt-att-spin { to { transform: rotate(360deg); } }

    .cmt-att-back { text-align:center; margin-top:12px; }
    .cmt-att-back button { background:0; border:0; color: var(--slate-500); font-size:13px; cursor:pointer; }
    .cmt-att-back button:hover { color: var(--slate-800); }
</style>
@endpush

@section('content')
<div class="cmt-att-card"
     x-data="cmtAttendance({
        defaultCountry: @js($defaultCountryCode),
        sendOtpUrl:     @js(route('committee-attendance.send-otp')),
        verifyOtpUrl:   @js(route('committee-attendance.verify-otp')),
        resendOtpUrl:   @js(route('committee-attendance.resend-otp')),
        otpSeconds:     @js($otpLengthSeconds),
        otpLength:      @js((int) \App\Services\Booking\MeetingBookingOtpService::OTP_LENGTH),
        csrf:           @js(csrf_token()),
     })"
     x-cloak>

    <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">
                <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
                <circle cx="9" cy="7" r="4"/>
                <path d="M22 11l-3 3-2-2"/>
            </svg>
        </span>
        <h2 class="cmt-att-hero__title">{{ __('web.committee_attendance.hero.title') }}</h2>
        <p class="cmt-att-hero__sub">{{ __('web.committee_attendance.hero.sub') }}</p>
    </div>

    {{-- STEP 1: phone --}}
    <form @submit.prevent="sendOtp()" x-show="step === 'phone'">
        <div class="cmt-att-field">
            <label for="cmt-att-phone">{{ __('web.committee_attendance.phone.label') }}</label>
            <div class="cmt-att-phone">
                <select x-model="country" :disabled="busy" aria-label="{{ __('web.committee_attendance.phone.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="cmt-att-phone" type="tel" inputmode="numeric"
                       x-model="phone" :disabled="busy"
                       placeholder="{{ __('web.committee_attendance.phone.placeholder') }}"
                       autocomplete="tel-national" required>
            </div>
        </div>

        <button type="submit" class="cmt-att-submit" :disabled="busy || !phone" style="margin-top:18px;">
            <span x-show="!busy">{{ __('web.committee_attendance.phone.submit') }}</span>
            <span x-show="busy" class="cmt-att-spinner" aria-hidden="true"></span>
            <span x-show="busy">{{ __('web.committee_attendance.phone.sending') }}</span>
        </button>

        <div class="cmt-att-alert cmt-att-alert--error" x-show="error" x-cloak>
            <span aria-hidden="true">⚠</span>
            <span x-text="error"></span>
        </div>
    </form>

    {{-- STEP 2: OTP --}}
    <form @submit.prevent="verifyOtp()" x-show="step === 'otp'" x-cloak>
        <div style="text-align:center; margin-bottom:18px;">
            <div style="font-size:14px; color:var(--slate-600); line-height:1.7;">
                {{ __('web.committee_attendance.otp.hint_prefix') }} <span x-text="otpLength"></span> {{ __('web.committee_attendance.otp.hint_suffix') }}
                <span style="font-weight:700; color:var(--slate-800); direction:ltr; display:inline-block;" x-text="maskedPhone"></span>
            </div>
        </div>

        {{-- Reusable OTP grid. LTR-pinned so digits read 1→2→3→4 left to
             right even though the page direction is RTL. Mirrors the
             assembled code into `this.code` via the `otp-input` event;
             clearOtpInputs() below dispatches `otp-reset` to clear the
             cells without touching the DOM directly. --}}
        <div @otp-input="code = $event.detail.code">
            <x-web.otp-input
                :length="(int) \App\Services\Booking\MeetingBookingOtpService::OTP_LENGTH"
                disabled="busy"
                error="error.length > 0"
            ></x-web.otp-input>
        </div>

        <button type="submit" class="cmt-att-submit" :disabled="busy || code.length < otpLength" style="margin-top:20px;">
            <span x-show="!busy">{{ __('web.committee_attendance.otp.submit') }}</span>
            <span x-show="busy" class="cmt-att-spinner" aria-hidden="true"></span>
            <span x-show="busy">{{ __('web.committee_attendance.otp.verifying') }}</span>
        </button>

        <div class="cmt-att-alert cmt-att-alert--error" x-show="error" x-cloak>
            <span aria-hidden="true">⚠</span>
            <span x-text="error"></span>
        </div>

        <div class="cmt-att-resend">
            <template x-if="countdown > 0">
                <span x-html="@js(__('web.committee_attendance.otp.countdown', ['time' => '__CD__'])).replace('__CD__', '<span class=&quot;cd&quot;>' + formatCountdown(countdown) + '</span>')"></span>
            </template>
            <template x-if="countdown === 0">
                <button type="button" @click="resendOtp()" :disabled="busy">{{ __('web.committee_attendance.otp.resend') }}</button>
            </template>
        </div>

        <div class="cmt-att-back">
            <button type="button" @click="backToPhone()">{{ __('web.committee_attendance.otp.change_phone') }}</button>
        </div>
    </form>

    {{-- STEP: redirecting --}}
    <div x-show="step === 'redirecting'" x-cloak style="text-align:center; padding:24px 0;">
        <div class="cmt-att-spinner" style="margin:0 auto 14px; border-color:var(--primary-200); border-top-color:var(--primary-600); width:32px; height:32px;"></div>
        <p style="color:var(--slate-700); font-weight:600;">{{ __('web.committee_attendance.redirecting') }}</p>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('cmtAttendance', (cfg) => ({
        step: 'phone',
        country: cfg.defaultCountry,
        phone: '',
        // `code` is the joined OTP — kept in sync by the @otp-input
        // listener on the wrapper around the OTP component. The
        // component owns all input/paste/focus/key logic; we just
        // mirror the assembled string here so the button :disabled
        // and verifyOtp() can read it without reaching into the DOM.
        code: '',
        otpLength: Math.max(2, Math.min(10, parseInt(cfg.otpLength, 10) || 4)),
        busy: false,
        error: '',
        maskedPhone: '',
        countdown: 0,
        countdownTimer: null,

        async sendOtp() {
            this.error = '';
            if (! this.phone) { this.error = @js(__('web.committee_attendance.phone.missing')); return; }
            this.busy = true;
            try {
                const full = '+' + this.country + this.phone.replace(/\D/g, '').replace(/^0+/, '');
                const res = await this.post(cfg.sendOtpUrl, { phone: full });
                if (! res.ok) {
                    this.error = this.errorLabel(res.body?.error);
                    this.busy = false;
                    return;
                }
                this.maskedPhone = res.body.masked_phone || '';
                this.countdown   = Math.max(30, Math.min(res.body.expires_in || cfg.otpSeconds, cfg.otpSeconds));
                this.startCountdown();
                this.step = 'otp';
                this.busy = false;
                this.error = '';
                // OTP component auto-focuses its first cell via x-init.
            } catch (e) { this.error = @js(__('web.committee_attendance.errors.invalid_phone')); this.busy = false; }
        },

        async verifyOtp() {
            this.error = '';
            if (this.code.length < this.otpLength) return;
            this.busy = true;
            try {
                const res = await this.post(cfg.verifyOtpUrl, { code: this.code });
                if (! res.ok) {
                    this.busy = false;
                    this.error = this.errorLabel(res.body?.error);
                    this.clearOtpInputs();
                    return;
                }
                this.step = 'redirecting';
                this.stopCountdown();
                setTimeout(() => { window.location.href = res.body.redirect; }, 250);
            } catch (e) { this.error = @js(__('web.committee_attendance.errors.unexpected')); this.busy = false; }
        },

        async resendOtp() {
            if (this.busy) return;
            this.busy = true; this.error = '';
            try {
                const res = await this.post(cfg.resendOtpUrl, {});
                if (! res.ok) { this.error = this.errorLabel(res.body?.error); }
                else {
                    this.countdown = Math.max(30, Math.min(res.body.expires_in || cfg.otpSeconds, cfg.otpSeconds));
                    this.startCountdown();
                    this.clearOtpInputs();
                }
            } finally { this.busy = false; }
        },

        backToPhone() {
            this.step = 'phone'; this.error = '';
            this.clearOtpInputs(); this.stopCountdown();
        },

        // Dispatches `otp-reset` on the window — the OTP component
        // listens for it and clears its own digits + re-focuses cell 0.
        clearOtpInputs() {
            this.code = '';
            window.dispatchEvent(new CustomEvent('otp-reset'));
        },

        startCountdown() {
            this.stopCountdown();
            this.countdownTimer = setInterval(() => {
                this.countdown = Math.max(0, this.countdown - 1);
                if (this.countdown === 0) this.stopCountdown();
            }, 1000);
        },
        stopCountdown() { if (this.countdownTimer) clearInterval(this.countdownTimer); this.countdownTimer = null; },
        formatCountdown(s) { const m = Math.floor(s / 60); const r = s % 60; return m + ':' + String(r).padStart(2, '0'); },

        async post(url, body) {
            const res = await fetch(url, {
                method: 'POST', credentials: 'same-origin',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': cfg.csrf,
                    'X-Requested-With': 'XMLHttpRequest',
                },
                body: JSON.stringify(body || {}),
            });
            let data = null;
            try { data = await res.json(); } catch (_) {}
            return { ok: res.ok, body: data || {} };
        },

        errorLabel(code) {
            // Pre-computed in PHP scope so Blade compiles the map once
            // at render time and the JS reads the localized strings.
            @php
                $cmtErrors = [
                    'investor_not_found'  => __('web.committee_attendance.errors.investor_not_found'),
                    'not_in_c_committee'  => __('web.committee_attendance.errors.not_eligible'),
                    'no_active_committee' => __('web.committee_attendance.errors.not_eligible'),
                    'not_assigned'        => __('web.committee_attendance.errors.not_eligible'),
                    'phone_not_found'     => __('web.committee_attendance.errors.investor_not_found'),
                    'rate_limited'        => __('web.committee_attendance.errors.rate_limited'),
                    'sms_failed'          => __('web.committee_attendance.errors.sms_failed'),
                    'no_active_code'      => __('web.committee_attendance.errors.no_active_code'),
                    'expired'             => __('web.committee_attendance.errors.expired'),
                    'too_many_attempts'   => __('web.committee_attendance.errors.too_many_attempts'),
                    'mismatch'            => __('web.committee_attendance.errors.mismatch'),
                    'no_pending_otp'      => __('web.committee_attendance.errors.no_pending_otp'),
                    'send_failed'         => __('web.committee_attendance.errors.send_failed'),
                    'session_expired'    => __('web.committee_attendance.errors.no_pending_otp'),
                ];
            @endphp
            return (@json($cmtErrors))[code] || @js(__('web.committee_attendance.errors.unexpected'));
        },
    }));
});
</script>
@endpush