@extends('web.signup.layout')

@section('title', 'نمو — احجز اجتماعك')
@section('page_title', 'أهلاً بك في مجتمع نمو الاستثماري')
{{-- The "احجز اجتماعك" call-to-action is the in-card hero below — the
     layout subtitle slot is left empty so the welcome line stays clean
     above the card. --}}
@section('page_subtitle', '')

@push('styles')
<style>
    .cm-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;
    }
    @media (max-width: 640px) { .cm-card { padding: 22px; border-radius: 14px; } }

    /* ── In-card hero — the prominent "احجز اجتماعك" call-to-action
       block at the top of the form card. Tighter, calmer header above
       (the welcome line) keeps the welcome friendly while the CTA gets
       its own visual weight. ─────────────────────────────────────── */
    .cm-hero {
        text-align: center;
        padding-bottom: 22px;
        margin-bottom: 22px;
        border-bottom: 1px solid var(--slate-100);
    }
    .cm-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;
    }
    .cm-hero__icon svg { width: 26px; height: 26px; }
    .cm-hero__title {
        margin: 0 0 6px;
        font-size: 26px;
        font-weight: 800;
        color: var(--slate-900);
        letter-spacing: -.015em;
    }
    @media (max-width: 640px) { .cm-hero__title { font-size: 22px; } }
    .cm-hero__sub {
        margin: 0;
        font-size: 14px;
        line-height: 1.7;
        color: var(--slate-500);
        max-width: 420px;
        margin-inline: auto;
    }

    /* Pull the welcome line above the card a touch closer + soften its
       weight so the in-card "احجز اجتماعك" reads as the headline. The
       logo's transparent background lives in the shared signup layout
       now — nothing to override here. */
    .signup-header { margin-bottom: 18px; }

    /* ── Step indicator ── */
    .cm-steps {
        display: flex; align-items: center; justify-content: center;
        gap: 8px; margin-bottom: 22px;
    }
    .cm-step {
        display: inline-flex; align-items: center; justify-content: center;
        width: 28px; height: 28px;
        border-radius: 999px;
        background: var(--slate-100); color: var(--slate-500);
        font-weight: 800; font-size: 12.5px;
        border: 2px solid transparent;
        transition: all .2s;
    }
    .cm-step--active { background: var(--primary-600); color: #fff; box-shadow: 0 0 0 4px var(--primary-100); }
    .cm-step--done   { background: var(--success-500); color: #fff; }
    .cm-step-line { width: 28px; height: 2px; background: var(--slate-200); border-radius: 2px; }
    .cm-step-line--done { background: var(--success-500); }

    .cm-field { display: grid; gap: 7px; }
    .cm-field > label {
        font-size: 13px; font-weight: 700; color: var(--slate-700);
    }
    .cm-field input {
        width: 100%;
        padding: 12px 14px;
        background: #fff;
        border: 1px solid var(--slate-200);
        border-radius: 11px;
        font: inherit; font-size: 15px; color: var(--slate-900);
        transition: border-color .15s, box-shadow .15s;
    }
    .cm-field input:focus {
        outline: none;
        border-color: var(--primary-600);
        box-shadow: 0 0 0 4px var(--primary-100);
    }
    .cm-field input:disabled { background: var(--slate-50); opacity: .7; }

    /* ── Phone row: country select + number input ──
       `direction: ltr` keeps the country-code column on the LEFT in
       BOTH Arabic and English. CSS Grid reverses column-track order
       by default under RTL, which would drift the select to the right
       — matched the other 3 OTP screens (committee / demo / startup-
       initial-dd) on 2026-06-15 for cross-screen consistency. */
    .cm-phone {
        display: grid;
        grid-template-columns: 130px 1fr;
        gap: 8px;
        direction: ltr;
    }
    .cm-phone select {
        padding: 12px 10px;
        border: 1px solid var(--slate-200);
        border-radius: 11px;
        background: #fff;
        font: inherit; font-size: 14px; font-weight: 700;
        color: var(--slate-900);
        cursor: pointer;
    }
    .cm-phone input { text-align: left; direction: ltr; }

    /* ── OTP boxes: 6 separate single-digit inputs ──
       The grid lays the six inputs in a single row up to 360 px wide
       and centres them. Two non-obvious rules carry the layout:
         - `min-width: 0` on the inputs lets each cell shrink below the
           input's intrinsic content width. Without it, browsers honour
           the default `size="20"` (~150 px) and the row overflows the
           card to the left.
         - `width: 100%` + `box-sizing: border-box` so padding stays
           inside the cell instead of widening it.
       The inputs need their own border / background too because the
       shared layout's `.input` class isn't applied — these are bare
       `<input>` elements driven by Alpine's keystroke handlers. */
    /* Grid keeps the 4 digit cells on a SINGLE row at every viewport.
       `minmax(0, 1fr)` is the critical bit — default `1fr` resolves to
       `minmax(auto, 1fr)`, and a bare <input>'s min-content width pushes
       past the 1fr cap (which is what made the cells overflow / wrap to
       their own rows). Capping the row width at ~320px keeps the cells
       comfortably-square on a wide card; on a narrow phone the grid
       shrinks proportionally because the cap is honored as a max, not
       a fixed width.

       The inputs themselves get `width:100% + min-width:0` so they fill
       the grid cell exactly, and the shared layout's default input
       widths can't push them past the cap.
       The card has no .input class on these — Alpine drives them as
       bare elements, hence the explicit border / background here. */
    .cm-otp {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
        max-width: 320px;
        margin: 0 auto;
    }
    .cm-otp input {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        height: 56px;
        padding: 0;
        text-align: center;
        font-size: 22px;
        font-weight: 800;
        letter-spacing: 0;
        direction: ltr;
        background: #fff;
        color: var(--slate-900);
        border: 1px solid var(--slate-300);
        border-radius: var(--radius-md);
        outline: none;
        transition: border-color var(--transition), box-shadow var(--transition);
    }
    .cm-otp input:hover { border-color: var(--slate-400); }
    .cm-otp input:focus {
        border-color: var(--primary-600);
        box-shadow: 0 0 0 4px var(--primary-100);
    }
    .cm-otp input:disabled {
        background: var(--slate-50);
        color: var(--slate-500);
        cursor: not-allowed;
    }
    .cm-otp--error input {
        border-color: #f87171;
        box-shadow: 0 0 0 3px rgba(248,113,113,.16);
    }

    /* On narrow phones drop the cell height a touch so the row doesn't
       feel overweight on a 360 px viewport. The grid columns still
       shrink with the parent — no separate breakpoint math needed. */
    @media (max-width: 420px) {
        .cm-otp { gap: 6px; max-width: 280px; }
        .cm-otp input { height: 48px; font-size: 19px; }
    }
    @media (max-width: 340px) {
        .cm-otp { gap: 5px; max-width: 100%; }
        .cm-otp input { height: 44px; font-size: 18px; }
    }

    .cm-resend {
        margin-top: 14px;
        text-align: center;
        font-size: 13px;
        color: var(--slate-500);
    }
    .cm-resend button {
        background: none; border: 0; padding: 0;
        font: inherit; font-weight: 700;
        color: var(--primary-600); cursor: pointer;
    }
    .cm-resend button:disabled { color: var(--slate-400); cursor: not-allowed; }
    .cm-countdown { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--slate-700); }

    .cm-submit {
        width: 100%;
        padding: 14px 22px;
        background: var(--primary-600); color: #fff;
        border: 0; border-radius: 11px;
        font: inherit; font-size: 15px; font-weight: 800;
        cursor: pointer;
        box-shadow: 0 1px 2px rgba(79,70,229,.2), 0 10px 22px -8px rgba(79,70,229,.4);
        transition: all .15s;
        display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    }
    .cm-submit:hover:not(:disabled) { background: var(--primary-700); transform: translateY(-1px); }
    .cm-submit:disabled { opacity: .55; cursor: wait; transform: none; box-shadow: none; }
    .cm-spinner {
        width: 16px; height: 16px;
        border: 2px solid rgba(255,255,255,.4);
        border-top-color: #fff;
        border-radius: 999px;
        animation: cm-spin .8s linear infinite;
    }
    @keyframes cm-spin { to { transform: rotate(360deg); } }

    .cm-alert {
        margin-top: 14px; padding: 12px 14px;
        border-radius: 11px;
        font-size: 13.5px; line-height: 1.6;
        display: flex; align-items: flex-start; gap: 10px;
    }
    .cm-alert--error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
    .cm-alert--info  { background: var(--primary-50); color: var(--primary-700); border: 1px solid var(--primary-200); }
    .cm-alert__icon { flex: 0 0 auto; font-size: 18px; line-height: 1; }

    /* Eligibility-blocked card */
    .cm-block {
        text-align: center;
        padding: 12px 4px 8px;
    }
    .cm-block__icon {
        width: 56px; height: 56px;
        border-radius: 16px;
        background: #fef3c7; color: #92400e;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 28px;
        margin-bottom: 12px;
    }
    .cm-block__title {
        font-size: 17px; font-weight: 800; color: var(--slate-900);
        margin-bottom: 6px;
    }
    .cm-block__sub {
        font-size: 13.5px; color: var(--slate-600); line-height: 1.7;
        margin-bottom: 16px;
    }
    .cm-block__meta {
        display: inline-flex; align-items: center; gap: 12px;
        padding: 12px 16px;
        background: var(--slate-50);
        border: 1px solid var(--slate-200);
        border-radius: 12px;
        font-size: 13.5px; color: var(--slate-700);
    }
    .cm-block__meta strong { color: var(--slate-900); font-weight: 800; }

    .cm-back {
        margin-top: 18px; text-align: center;
        font-size: 13px; color: var(--slate-500);
    }
    .cm-back button {
        background: none; border: 0; padding: 0;
        font: inherit; font-weight: 700;
        color: var(--primary-600); cursor: pointer;
    }

    .cm-phone-display {
        font-variant-numeric: tabular-nums;
        direction: ltr; display: inline-block;
        font-weight: 700; color: var(--slate-800);
    }
</style>
@endpush

@section('content')
<div class="cm-card"
     x-data="createMeeting({
        defaultCountry: @js($defaultCountryCode),
        sendOtpUrl:     @js(route('create-meeting.send-otp')),
        verifyOtpUrl:   @js(route('create-meeting.verify-otp')),
        resendOtpUrl:   @js(route('create-meeting.resend-otp')),
        otpSeconds:     @js($otpLengthSeconds),
        {{-- Digit count for the OTP code grid. Sourced from the OTP
             service so the input boxes + hint text stay in lock-step
             with the generator/validator. --}}
        otpLength:      @js((int) \App\Services\Booking\MeetingBookingOtpService::OTP_LENGTH),
        csrf:           @js(csrf_token()),
     })"
     x-cloak>

    {{-- ── In-card hero (action headline) ──────────────────────────── --}}
    <div class="cm-hero">
        <span class="cm-hero__icon" aria-hidden="true">
            <svg 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="3"/>
                <line x1="16" y1="2" x2="16" y2="6"/>
                <line x1="8"  y1="2" x2="8"  y2="6"/>
                <line x1="3"  y1="10" x2="21" y2="10"/>
                <path d="m9 16 2 2 4-4"/>
            </svg>
        </span>
        <h2 class="cm-hero__title">احجز اجتماعك</h2>
        <p class="cm-hero__sub">
            أدخل رقم الهاتف المسجّل لدينا، وسنرسل لك كود تحقق لبدء الحجز.
        </p>
    </div>

    {{-- ── Step indicator ───────────────────────────────────────────── --}}
    <div class="cm-steps" aria-hidden="true">
        <span class="cm-step" :class="step === 'phone' ? 'cm-step--active' : 'cm-step--done'">1</span>
        <span class="cm-step-line" :class="step !== 'phone' ? 'cm-step-line--done' : ''"></span>
        <span class="cm-step"
              :class="step === 'otp' ? 'cm-step--active' : (step === 'blocked' || step === 'redirecting' ? 'cm-step--done' : '')">2</span>
        <span class="cm-step-line" :class="step === 'redirecting' || step === 'blocked' ? 'cm-step-line--done' : ''"></span>
        <span class="cm-step"
              :class="step === 'redirecting' ? 'cm-step--active' : (step === 'blocked' ? 'cm-step--done' : '')">3</span>
    </div>

    {{-- ══ STEP 1: phone entry ══ --}}
    <form @submit.prevent="sendOtp()" x-show="step === 'phone'">
        <div class="cm-field">
            <label for="cm-phone">رقم الهاتف المسجل لدينا</label>
            <div class="cm-phone">
                <select x-model="country" :disabled="busy" aria-label="مفتاح الدولة">
                    <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="cm-phone" type="tel" inputmode="numeric"
                       x-model="phone" :disabled="busy"
                       placeholder="5XXXXXXXX"
                       autocomplete="tel-national" required>
            </div>
        </div>

        <button type="submit" class="cm-submit" :disabled="busy || !phone" style="margin-top:18px;">
            <span x-show="!busy">إرسال كود التحقق</span>
            <span x-show="busy" class="cm-spinner" aria-hidden="true"></span>
            <span x-show="busy">جارٍ الإرسال…</span>
        </button>

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

    {{-- ══ STEP 2: OTP entry ══
         OTP length comes from the server config (window.__cmOtpLength,
         injected in the page-data block below). The hint text + the
         number of input boxes are bound to the same value so admins
         can change the length in one place without re-touching the UI. --}}
    <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;">
                <span x-text="otpHint"></span>
                <span class="cm-phone-display" x-text="maskedPhone"></span>
            </div>
        </div>

        {{-- Reusable OTP component. Hard-pins LTR on the grid so digits
             read 1→2→3→4 left-to-right regardless of page direction.
             Updates `code` on every keystroke; resets by dispatching
             `otp-reset` from the parent Alpine scope. --}}
        <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="cm-submit" :disabled="busy || code.length < otpLength" style="margin-top:20px;">
            <span x-show="!busy">تحقّق ومتابعة</span>
            <span x-show="busy" class="cm-spinner" aria-hidden="true"></span>
            <span x-show="busy">جارٍ التحقق…</span>
        </button>

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

        <div class="cm-resend">
            <template x-if="countdown > 0">
                <span>
                    يمكنك إعادة الإرسال بعد
                    <span class="cm-countdown" x-text="formatCountdown(countdown)"></span>
                </span>
            </template>
            <template x-if="countdown === 0">
                <button type="button" @click="resendOtp()" :disabled="busy">إعادة إرسال الكود</button>
            </template>
        </div>

        <div class="cm-back">
            <button type="button" @click="backToPhone()">تغيير رقم الهاتف</button>
        </div>
    </form>

    {{-- ══ STEP: redirecting to calendar ══ --}}
    <div x-show="step === 'redirecting'" x-cloak style="text-align:center; padding:24px 0;">
        <div class="cm-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;">جارٍ فتح شاشة حجز الاجتماع…</p>
    </div>

    {{-- ══ STEP: blocked by existing meeting ══
         Two variants of the same screen, gated on `blockedReason`:
           - 'attended' → permanent block (already completed a meeting)
           - 'upcoming' → transient block (a future meeting is on hold)
         Only the heading + helper text differ; the date/time chip and
         "use another number" CTA are shared. --}}
    <div x-show="step === 'blocked'" x-cloak class="cm-block">
        <div class="cm-block__icon" aria-hidden="true">
            <template x-if="blockedReason === 'attended'"><span>✅</span></template>
            <template x-if="blockedReason !== 'attended'"><span>📅</span></template>
        </div>

        <template x-if="blockedReason === 'attended'">
            <div>
                <div class="cm-block__title">لقد أتممت اجتماعك بالفعل</div>
                <p class="cm-block__sub">
                    سجلاتنا تشير إلى أنك قد حضرت اجتماعاً سابقاً، ولا يمكنك حجز اجتماع جديد. لو احتجت متابعة معنا، تواصل مع فريقنا.
                </p>
            </div>
        </template>

        <template x-if="blockedReason !== 'attended'">
            <div>
                <div class="cm-block__title">لديك اجتماع قادم بالفعل</div>
                <p class="cm-block__sub">
                    لا يمكنك حجز اجتماع جديد قبل اكتمال أو إلغاء اجتماعك القادم. تواصل مع فريقنا لو احتجت تعديل الموعد.
                </p>
            </div>
        </template>

        <div class="cm-block__meta" x-show="blockedMeeting">
            <span>📆 <strong x-text="blockedMeeting?.date || '—'"></strong></span>
            <span>🕒 <strong x-text="blockedMeeting?.time || '—'"></strong></span>
            <span x-show="blockedReason !== 'attended'">· <strong x-text="blockedStatusLabel"></strong></span>
        </div>
        <div class="cm-back">
            <button type="button" @click="backToPhone()">رقم آخر</button>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('createMeeting', (cfg) => ({
        // ── state ────────────────────────────────────────────────────
        step: 'phone',                  // phone | otp | redirecting | blocked
        country: cfg.defaultCountry,
        phone: '',
        code: '',                       // joined OTP code (live)
        otpLength: Math.max(2, Math.min(10, parseInt(cfg.otpLength, 10) || 4)),
        busy: false,
        error: '',
        maskedPhone: '',
        countdown: 0,
        countdownTimer: null,
        blockedMeeting: null,
        // Distinguishes the two block paths returned by the server:
        //   'attended' → investor already attended a meeting (permanent
        //                block under product policy)
        //   'upcoming' → investor has a pending/confirmed future meeting
        //                (transient block — clears once that meeting is
        //                resolved)
        // Drives which title + subtitle the block screen renders.
        blockedReason: 'upcoming',

        /** Hint string in front of the masked phone number. */
        get otpHint() {
            return 'أرسلنا كوداً مكوّناً من ' + this.otpLength + ' أرقام إلى';
        },

        get blockedStatusLabel() {
            const s = this.blockedMeeting?.status;
            return ({
                pending:   'قيد الانتظار',
                confirmed: 'مؤكَّد',
            })[s] || (s || '');
        },

        // ── step 1: request OTP ──────────────────────────────────────
        async sendOtp() {
            this.error = '';
            if (! this.phone) { this.error = 'برجاء إدخال رقم الهاتف.'; 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 = '';
                // The OTP component auto-focuses its first cell via x-init.
            } catch (e) {
                this.error = 'تعذّر الإرسال، حاول مرة أخرى.';
                this.busy = false;
            }
        },

        // ── step 2: OTP entry ────────────────────────────────────────
        // All input / paste / focus / arrow-key logic now lives inside
        // the OTP component. The component dispatches `otp-input` on
        // every change; the wrapper @otp-input listener in the markup
        // mirrors the assembled code into `this.code`. To reset the
        // boxes (clearOtpInputs replacement), we dispatch `otp-reset`
        // on the window — the component listens for it.
        clearOtpInputs() {
            this.code = '';
            window.dispatchEvent(new CustomEvent('otp-reset'));
        },

        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;
                    // Both eligibility blocks land on the same screen,
                    // but with different titles + copy. `blockedReason`
                    // drives that branching; the server returns one of
                    // two distinct error codes so a typo in either side
                    // never silently degrades into the other state.
                    if (res.body?.error === 'has_attended_meeting' ||
                        res.body?.error === 'has_upcoming_meeting') {
                        this.blockedMeeting = res.body.blocked_meeting || null;
                        this.blockedReason  = res.body.error === 'has_attended_meeting'
                            ? 'attended'
                            : 'upcoming';
                        this.step = 'blocked';
                        this.stopCountdown();
                        return;
                    }
                    this.error = this.errorLabel(res.body?.error);
                    this.clearOtpInputs();
                    return;
                }
                this.step = 'redirecting';
                this.stopCountdown();
                // Tiny delay so the spinner registers visually before nav.
                setTimeout(() => { window.location.href = res.body.redirect; }, 250);
            } catch (e) {
                this.error = 'حدث خطأ غير متوقع.';
                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.code = '';
            this.error = '';
            this.blockedMeeting = null;
            this.blockedReason  = 'upcoming';
            this.clearOtpInputs();
            this.stopCountdown();
        },

        // ── countdown ────────────────────────────────────────────────
        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');
        },

        // ── plumbing ─────────────────────────────────────────────────
        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) {
            return ({
                phone_not_found:      'هذا الرقم غير مسجل لدينا.',
                rate_limited:         'تم إرسال عدد كبير من الأكواد. حاول مرة أخرى لاحقاً.',
                sms_failed:           'تعذّر إرسال الرسالة. حاول مرة أخرى.',
                no_active_code:       'انتهت صلاحية الكود. أعد طلبه.',
                expired:              'انتهت صلاحية الكود. أعد طلبه.',
                too_many_attempts:    'حاولت كثيراً. اطلب كود جديد.',
                mismatch:             'الكود غير صحيح. حاول مرة أخرى.',
                no_pending_otp:       'لم نُرسل كوداً بعد. ابدأ من جديد.',
                send_failed:          'تعذّر الإرسال. حاول مرة أخرى.',
                has_upcoming_meeting: 'لديك اجتماع قادم بالفعل.',
                has_attended_meeting: 'لقد أتممت اجتماعك بالفعل ولا يمكنك حجز اجتماع جديد.',
            })[code] || 'حدث خطأ. حاول مرة أخرى.';
        },
    }));
});
</script>
@endpush