@extends('web.signup.layout')

@section('title', 'نمو — حجز موعد الاجتماع')
@section('page_title', 'تم استلام طلبك بنجاح')
@section('page_subtitle', 'الخطوة الأخيرة: احجز موعداً يناسبك مع فريق نمو لاستكمال إجراءات الانضمام.')

@section('content')
    <div class="signup-card scheduling">
        <div class="scheduling__success">
            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
                <polyline points="22 4 12 14.01 9 11.01"/>
            </svg>
            <div>
                <h2>أهلاً {{ $subject->name }} 👋</h2>
                <p>
                    استلمنا بياناتك. اختر التاريخ والوقت المناسبَين لك من
                    التقويم أدناه، وسنُنشئ لك الحجز تلقائياً مع فريق نمو.
                </p>
            </div>
        </div>

        @if ($ready)
            {{--
                Native booking UI — Laravel + Alpine, NO iframe.
                The component below calls our /api/bookings/* endpoints which
                proxy to Microsoft Graph. The user picks a date and a slot
                inside our app; clicking "تأكيد الحجز" creates the booking
                via Graph and persists the meeting locally.
            --}}
            <div
                class="booker"
                x-data="bookingFlow({
                    type: @js($type),
                    signupId: @js($subject->id),
                    customerEmail: @js($subject->email),
                    timezone: @js($timezone),
                    durationMin: @js($durationMinutes),
                    serviceName: @js($serviceName),
                    daysAhead: @js($daysAhead),
                    endpoints: {
                        days:         @js(route('api.bookings.days')),
                        availability: @js(route('api.bookings.availability')),
                        create:       @js(route('api.bookings.create')),
                    },
                })"
                x-init="init()">

                {{-- ─────────────────────── STEP 1: PICK A DATE ──────── --}}
                <template x-if="state === 'pick'">
                    <div class="booker__grid">
                        {{-- Calendar --}}
                        <section class="booker__calendar" aria-labelledby="booker-cal-title">
                            <header class="booker__calendar-head">
                                <button type="button" class="booker__nav-btn"
                                        @click="prevMonth()"
                                        :disabled="!canGoPrev()"
                                        :aria-disabled="!canGoPrev()"
                                        aria-label="الشهر السابق">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
                                        <polyline points="9 18 15 12 9 6"/>
                                    </svg>
                                </button>
                                <h3 id="booker-cal-title" class="booker__month" x-text="monthLabel()"></h3>
                                <button type="button" class="booker__nav-btn"
                                        @click="nextMonth()"
                                        :disabled="!canGoNext()"
                                        :aria-disabled="!canGoNext()"
                                        aria-label="الشهر التالي">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
                                        <polyline points="15 18 9 12 15 6"/>
                                    </svg>
                                </button>
                            </header>

                            <div class="booker__weekdays" aria-hidden="true">
                                <template x-for="d in weekdayLabels()" :key="d">
                                    <span x-text="d"></span>
                                </template>
                            </div>

                            <div class="booker__days" role="grid">
                                <template x-for="(cell, idx) in monthCells()" :key="cell.key + '-' + idx">
                                    <button type="button"
                                            class="booker__day"
                                            :class="{
                                                'is-empty':    cell.empty,
                                                'is-today':    cell.today,
                                                'is-disabled': cell.empty || !cell.available,
                                                'is-available': cell.available,
                                                'is-selected': cell.selected,
                                            }"
                                            :disabled="cell.empty || !cell.available"
                                            :aria-pressed="cell.selected"
                                            @click="cell.available && pickDate(cell.iso)">
                                        <span x-show="!cell.empty" x-text="cell.day"></span>
                                        <span class="booker__day-dot" x-show="cell.available && !cell.selected" aria-hidden="true"></span>
                                    </button>
                                </template>
                            </div>

                            <p class="booker__cal-status" x-show="daysLoading">
                                <span class="booker__spinner"></span>
                                جاري تحميل المواعيد المتاحة…
                            </p>
                            <p class="booker__cal-status booker__cal-status--error" x-show="!daysLoading && daysError" x-text="daysError"></p>
                        </section>

                        {{-- Slot column --}}
                        <section class="booker__slots" aria-labelledby="booker-slots-title">
                            <h3 id="booker-slots-title" class="booker__slots-title">
                                <span x-show="!selectedDate">اختر تاريخاً أولاً</span>
                                <span x-show="selectedDate" x-text="selectedDateLabel()"></span>
                            </h3>

                            <p class="booker__slots-hint" x-show="selectedDate && !slotsLoading && slots.length">
                                المدة: <strong x-text="durationMin + ' دقيقة'"></strong>
                            </p>

                            <div class="booker__slot-list" x-show="selectedDate">
                                <template x-if="slotsLoading">
                                    <div class="booker__slot-status">
                                        <span class="booker__spinner"></span>
                                        جاري تحميل الأوقات…
                                    </div>
                                </template>

                                <template x-if="!slotsLoading && slotsError">
                                    <div class="booker__slot-status booker__slot-status--error" x-text="slotsError"></div>
                                </template>

                                <template x-if="!slotsLoading && !slotsError && slots.length === 0">
                                    <div class="booker__slot-status booker__slot-status--empty">
                                        لا تتوفر مواعيد في هذا اليوم. جرّب يوماً آخر.
                                    </div>
                                </template>

                                <template x-for="slot in slots" :key="slot.start">
                                    <div class="booker__slot-wrap">
                                        <button type="button"
                                                class="booker__slot"
                                                :class="{ 'is-selected': isSelectedSlot(slot) }"
                                                :aria-pressed="isSelectedSlot(slot)"
                                                @click="pickSlot(slot)">
                                            <span class="booker__slot-time" x-text="formatTime(slot.start)"></span>
                                            <span class="booker__slot-range" x-text="formatTime(slot.start) + ' – ' + formatTime(slot.end)"></span>
                                        </button>

                                        {{-- Inline confirm CTA — appears DIRECTLY under the
                                             selected slot so the user never has to scan for
                                             a confirm button at the bottom of the column.
                                             Disabled until a slot is picked (template guards
                                             the entire block on isSelectedSlot). --}}
                                        <template x-if="isSelectedSlot(slot)">
                                            <div class="booker__slot-cta" x-transition.opacity>
                                                <button type="button"
                                                        class="btn btn--primary booker__cta-btn"
                                                        :disabled="creating"
                                                        @click="confirmBooking()">
                                                    <span x-show="!creating">تأكيد الحجز</span>
                                                    <span x-show="creating">
                                                        <span class="booker__spinner booker__spinner--light"></span>
                                                        جاري إنشاء الحجز…
                                                    </span>
                                                </button>
                                                <p class="booker__cta-hint" x-show="createError" x-text="createError"></p>
                                            </div>
                                        </template>
                                    </div>
                                </template>
                            </div>
                        </section>
                    </div>
                </template>

                {{-- ─────────────────────── STEP 2: SUCCESS ──────────── --}}
                <template x-if="state === 'done'">
                    <div class="booker__success">
                        <div class="booker__success-icon" aria-hidden="true">
                            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
                                <polyline points="22 4 12 14.01 9 11.01"/>
                            </svg>
                        </div>
                        <h3>تم تأكيد حجزك!</h3>
                        <p>
                            موعد الاجتماع:
                            <strong x-text="confirmedLabel()"></strong>
                        </p>
                        <p class="booker__success-hint">
                            سيصلك رابط الاجتماع وتفاصيله على بريدك:
                            <strong x-text="customerEmail"></strong>
                        </p>

                        <template x-if="confirmed?.meeting_url">
                            <a :href="confirmed.meeting_url" target="_blank" rel="noopener"
                               class="btn btn--ghost booker__success-link">
                                فتح رابط الاجتماع
                            </a>
                        </template>
                    </div>
                </template>
            </div>
        @else
            {{--
                Graceful fallback when Graph creds or per-flow config is
                missing. The page must NEVER 500 here — signup already
                succeeded; we just couldn't bring the calendar up.
            --}}
            <div class="scheduling__placeholder">
                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
                    <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"/>
                </svg>
                <h3>تقويم الحجز قيد التهيئة</h3>
                <p>
                    سيتواصل معك فريق نمو خلال أيام العمل المقبلة لتحديد موعد
                    الاجتماع. لا حاجة لأي إجراء إضافي من جانبك الآن.
                </p>

                {{-- Inline diagnostic panel — visible ONLY to authenticated
                     admins. Investors / startups never see this block; the
                     controller passes $diagnostics = null for them. This
                     panel surfaces the missing env keys so an ops admin
                     visiting `/create_meeting` directly can fix the gap
                     without grepping `storage/logs/laravel.log`. --}}
                @if (! empty($diagnostics))
                    <details class="scheduling__diagnostics" open>
                        <summary>تشخيص (للأدمن فقط)</summary>
                        <ul>
                            <li>
                                <strong>master toggle:</strong>
                                <span class="diag-{{ $diagnostics['bookings_enabled'] ? 'ok' : 'bad' }}">
                                    {{ $diagnostics['bookings_enabled'] ? 'مفعّل' : 'معطّل' }}
                                </span>
                            </li>
                            <li>
                                <strong>Graph credentials:</strong>
                                <span class="diag-{{ $diagnostics['graph_configured'] ? 'ok' : 'bad' }}">
                                    {{ $diagnostics['graph_configured'] ? 'موجودة' : 'ناقصة' }}
                                </span>
                            </li>
                            <li>
                                <strong>flow ({{ $type }}) configured:</strong>
                                <span class="diag-{{ $diagnostics['flow_configured'] ? 'ok' : 'bad' }}">
                                    {{ $diagnostics['flow_configured'] ? 'صح' : 'ناقص' }}
                                </span>
                                <small>staff active: {{ $diagnostics['staff_count'] }}</small>
                            </li>
                            @if (! empty($diagnostics['missing']))
                                <li>
                                    <strong>env keys to fix:</strong>
                                    <ul class="scheduling__diagnostics-missing">
                                        @foreach ($diagnostics['missing'] as $key)
                                            <li><code>{{ $key }}</code></li>
                                        @endforeach
                                    </ul>
                                </li>
                            @endif
                        </ul>
                        <p class="scheduling__diagnostics-hint">
                            بعد ما تـ set الـ env keys، اعمل
                            <code>php artisan config:clear</code> ثم restart php-fpm.
                        </p>
                    </details>
                @endif
            </div>
        @endif

        {{-- Booking is now MANDATORY — the "I'll book later" escape hatch was
             removed (see SignupSchedulingController::skip removal). The user
             must complete the booking via the native UI above before the flow
             ends. A single quiet link back to the form is kept for the rare
             case where someone hits this page in error — hidden on the
             STARTUP booking flow per product request (2026-06). --}}
        @if ($type !== 'startup')
            <div class="scheduling__actions scheduling__actions--single">
                <a href="{{ route('investor-signup') }}"
                   class="scheduling__home-link">
                    العودة للصفحة الرئيسية
                </a>
            </div>
        @endif
    </div>
@endsection

@push('styles')
<style>
    .scheduling { padding: 28px 32px 24px; }
    .scheduling__success {
        display: flex; gap: 16px; align-items: flex-start;
        padding: 22px; background: var(--success-50);
        border: 1px solid rgba(16,185,129,.28);
        border-radius: var(--radius-lg); color: var(--success-700);
        margin-bottom: 24px;
    }
    .scheduling__success svg { flex-shrink: 0; margin-top: 2px; }
    .scheduling__success h2 { margin: 0 0 6px; font-size: 20px; font-weight: 800; color: var(--slate-900); }
    .scheduling__success p  { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--slate-700); }

    /* ── Booker shell ──────────────────────────────────────────────── */
    .booker { margin-bottom: 22px; }
    .booker__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
        gap: 20px;
        align-items: start;
    }

    /* ── Calendar ──────────────────────────────────────────────────── */
    .booker__calendar {
        background: #fff;
        border: 1px solid var(--slate-200);
        border-radius: var(--radius-lg);
        padding: 18px 20px 22px;
        box-shadow: var(--shadow-sm);
    }
    .booker__calendar-head {
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px; margin-bottom: 14px;
    }
    .booker__month {
        margin: 0; font-size: 16.5px; font-weight: 800; color: var(--slate-900);
        letter-spacing: -.01em; text-align: center; flex: 1;
    }
    .booker__nav-btn {
        width: 36px; height: 36px;
        display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid var(--slate-200); background: #fff;
        border-radius: 10px; color: var(--slate-700); cursor: pointer;
        transition: all .15s;
    }
    .booker__nav-btn:not(:disabled):hover { background: var(--slate-50); border-color: var(--slate-300); }
    .booker__nav-btn:disabled { opacity: .35; cursor: not-allowed; }

    .booker__weekdays {
        display: grid; grid-template-columns: repeat(7, 1fr);
        gap: 4px; margin-bottom: 6px;
        font-size: 11.5px; font-weight: 700; color: var(--slate-500);
        text-align: center; letter-spacing: .04em; text-transform: uppercase;
    }
    .booker__weekdays span { padding: 6px 0; }

    .booker__days {
        display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
    }
    .booker__day {
        position: relative;
        aspect-ratio: 1 / 1;
        display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid transparent; background: transparent;
        border-radius: 10px; color: var(--slate-800);
        font: inherit; font-weight: 600; font-size: 14px;
        cursor: pointer; transition: all .15s;
    }
    .booker__day.is-empty { cursor: default; }
    .booker__day.is-disabled {
        color: var(--slate-300); cursor: not-allowed;
    }
    .booker__day.is-available:not(.is-selected):hover {
        background: var(--primary-50, #eef2ff); border-color: var(--primary-100, #e0e7ff);
    }
    .booker__day.is-today { box-shadow: inset 0 0 0 1px var(--slate-300); }
    .booker__day.is-selected {
        background: var(--primary-600, #4f46e5); color: #fff;
        box-shadow: 0 4px 12px -3px rgba(79,70,229,.45);
    }
    .booker__day-dot {
        position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
        width: 4px; height: 4px; border-radius: 999px;
        background: var(--primary-500, #6366f1);
    }
    .booker__day.is-selected .booker__day-dot { background: #fff; }

    .booker__cal-status {
        margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--slate-500);
        display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .booker__cal-status--error { color: var(--error-600, #dc2626); }

    /* ── Slot column ───────────────────────────────────────────────── */
    .booker__slots {
        background: #fff;
        border: 1px solid var(--slate-200);
        border-radius: var(--radius-lg);
        padding: 18px 18px 20px;
        box-shadow: var(--shadow-sm);
        position: sticky; top: 16px;
        max-height: calc(100vh - 40px); overflow-y: auto;
    }
    .booker__slots-title {
        margin: 0 0 6px; font-size: 15px; font-weight: 800;
        color: var(--slate-900); letter-spacing: -.01em;
    }
    .booker__slots-hint {
        margin: 0 0 14px; font-size: 12.5px; color: var(--slate-500);
    }
    .booker__slots-hint strong { color: var(--slate-700); }

    .booker__slot-list { display: flex; flex-direction: column; gap: 8px; }
    .booker__slot-status {
        padding: 18px 8px; text-align: center; font-size: 13px;
        color: var(--slate-500);
        display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .booker__slot-status--error { color: var(--error-600, #dc2626); }
    .booker__slot-status--empty { color: var(--slate-500); }

    /* Wrapper per slot — holds the slot button AND the inline confirm CTA
       that appears under the slot when it's the selected one. */
    .booker__slot-wrap { display: flex; flex-direction: column; gap: 8px; }

    .booker__slot {
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
        padding: 12px 14px;
        min-height: 48px;          /* touch target */
        background: #fff;
        border: 1px solid var(--slate-200);
        border-radius: 10px;
        color: var(--slate-800);
        font: inherit; font-weight: 600; font-size: 14px;
        cursor: pointer; transition: all .15s;
        text-align: start;
        width: 100%;
    }
    .booker__slot:hover { border-color: var(--primary-300, #a5b4fc); background: var(--primary-50, #eef2ff); }
    .booker__slot.is-selected {
        border-color: var(--primary-600, #4f46e5);
        background: var(--primary-600, #4f46e5);
        color: #fff;
        box-shadow: 0 4px 12px -3px rgba(79,70,229,.45);
    }
    .booker__slot.is-selected .booker__slot-range { color: rgba(255,255,255,.85); }
    .booker__slot-time  { font-weight: 800; }
    .booker__slot-range { font-size: 11.5px; font-weight: 500; color: var(--slate-500); }

    /* Inline confirm CTA — sits inside the selected slot's wrapper, so the
       button is visually attached to the choice the user just made. */
    .booker__slot-cta {
        background: var(--primary-50, #eef2ff);
        border: 1px solid var(--primary-100, #e0e7ff);
        border-radius: 10px;
        padding: 12px;
        margin: -4px 0 4px;        /* tighten visual connection to selected slot above */
    }
    .booker__cta-btn {
        width: 100%; min-height: 48px; font-size: 15px; font-weight: 700;
        display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    }
    .booker__cta-hint {
        margin: 10px 0 0; font-size: 13px; color: var(--error-600, #dc2626);
        text-align: center;
    }

    /* ── Success ───────────────────────────────────────────────────── */
    .booker__success {
        text-align: center; padding: 36px 24px;
        background: var(--success-50, #ecfdf5);
        border: 1px solid rgba(16,185,129,.32);
        border-radius: var(--radius-lg);
    }
    .booker__success-icon {
        display: inline-flex; align-items: center; justify-content: center;
        width: 68px; height: 68px; border-radius: 999px;
        background: #fff; color: var(--success-700, #047857);
        box-shadow: 0 6px 16px -4px rgba(16,185,129,.32);
        margin-bottom: 14px;
    }
    .booker__success h3 {
        margin: 0 0 6px; font-size: 22px; font-weight: 800; color: var(--slate-900);
    }
    .booker__success p {
        margin: 0 auto; max-width: 520px; font-size: 14.5px; line-height: 1.75; color: var(--slate-700);
    }
    .booker__success p strong { color: var(--slate-900); }
    .booker__success-hint { margin-top: 8px !important; font-size: 13.5px; color: var(--slate-600); }
    .booker__success-link { margin-top: 18px; min-height: 44px; padding: 0 24px; }

    /* ── Spinner ───────────────────────────────────────────────────── */
    .booker__spinner {
        display: inline-block; width: 14px; height: 14px;
        border: 2px solid var(--slate-300); border-top-color: var(--primary-600, #4f46e5);
        border-radius: 999px; animation: booker-spin 700ms linear infinite;
    }
    .booker__spinner--light {
        border-color: rgba(255,255,255,.4); border-top-color: #fff;
        margin-inline-end: 6px;
    }
    @keyframes booker-spin { to { transform: rotate(360deg); } }

    /* ── Placeholder (no config) ───────────────────────────────────── */
    .scheduling__placeholder {
        text-align: center; padding: 36px 24px; margin-bottom: 22px;
        background: var(--slate-50); border: 1px dashed var(--slate-300);
        border-radius: var(--radius-lg); color: var(--slate-600);
    }
    .scheduling__placeholder svg { color: var(--slate-400); margin-bottom: 10px; }
    .scheduling__placeholder h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: var(--slate-800); }
    .scheduling__placeholder p  { margin: 0 auto; max-width: 460px; font-size: 14px; line-height: 1.7; }

    /* Admin-only inline diagnostic block (rendered when an admin
       opens /create_meeting and the readiness gate failed). Investors
       never see this because the controller passes diagnostics=null
       unless an admin session is detected. */
    .scheduling__diagnostics {
        margin: 18px auto 0; max-width: 520px;
        padding: 14px 18px; text-align: start;
        background: #fff; border: 1px solid var(--slate-300);
        border-radius: 12px; font-size: 13px;
    }
    .scheduling__diagnostics summary {
        cursor: pointer; font-weight: 700; color: var(--slate-700);
        margin-bottom: 8px;
    }
    .scheduling__diagnostics ul {
        margin: 8px 0 0; padding: 0 16px;
        list-style: disc; color: var(--slate-700);
    }
    .scheduling__diagnostics li { margin: 4px 0; }
    .scheduling__diagnostics code {
        font-family: 'SFMono-Regular', Consolas, monospace;
        font-size: 12px; padding: 1px 6px; border-radius: 4px;
        background: var(--slate-100); color: var(--slate-900);
    }
    .scheduling__diagnostics .diag-ok  { color: var(--success-700); font-weight: 700; }
    .scheduling__diagnostics .diag-bad { color: var(--error-600);   font-weight: 700; }
    .scheduling__diagnostics small {
        color: var(--slate-500); margin-inline-start: 6px;
    }
    .scheduling__diagnostics-missing {
        list-style: square; padding-inline-start: 14px;
    }
    .scheduling__diagnostics-hint {
        margin: 10px 0 0; font-size: 12.5px; color: var(--slate-500);
    }

    /* ── Footer actions ────────────────────────────────────────────── */
    .scheduling__actions {
        display: flex; align-items: center; justify-content: space-between;
        gap: 14px; padding-top: 18px; border-top: 1px solid var(--slate-100);
    }
    .scheduling__actions form { margin: 0; }
    .btn--ghost {
        background: transparent; color: var(--slate-700);
        border: 1px solid var(--slate-300); box-shadow: none;
        padding: 0 22px; min-height: 44px; font-weight: 600;
    }
    .btn--ghost:hover:not(:disabled) {
        background: var(--slate-50); border-color: var(--slate-400);
    }
    .scheduling__home-link {
        color: var(--primary-600); font-weight: 600; font-size: 14px; text-decoration: none;
    }
    .scheduling__home-link:hover { text-decoration: underline; }

    /* ── Responsive ──────────────────────────────────────────────────
       Layout collapses to a single column under 800px. The slot list
       loses its sticky positioning so the inline CTA always stays in
       view next to its slot. */
    @media (max-width: 800px) {
        .booker__grid { grid-template-columns: 1fr; gap: 14px; }
        .booker__slots { position: static; max-height: none; padding: 16px; }
        .booker__calendar { padding: 14px 14px 18px; }
    }

    /* Phones — stack everything, give touch targets enough room. */
    @media (max-width: 720px) {
        .scheduling { padding: 22px 18px 20px; }
        .scheduling__success { flex-direction: column; gap: 10px; padding: 18px; }
        .scheduling__success h2 { font-size: 18px; }
        .scheduling__success p  { font-size: 14px; }
        .scheduling__actions { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
        .scheduling__home-link { text-align: center; }

        /* Calendar */
        .booker__month   { font-size: 15px; }
        .booker__day     { font-size: 13.5px; border-radius: 8px; }
        .booker__weekdays { font-size: 10.5px; }

        /* Slot list — full-width pills with a generous touch height. */
        .booker__slot { padding: 14px; min-height: 52px; font-size: 14.5px; }
        .booker__slot-range { font-size: 12px; }
        .booker__slot-cta { padding: 12px 10px; }
        .booker__cta-btn  { min-height: 50px; font-size: 15.5px; }
    }

    /* Very narrow screens — no horizontal scroll, comfortable spacing. */
    @media (max-width: 380px) {
        .scheduling { padding: 18px 12px 16px; }
        .booker__calendar { padding: 12px 10px 16px; }
        .booker__slots    { padding: 14px 12px; }
        .booker__day-dot  { bottom: 3px; width: 3px; height: 3px; }
    }
</style>
@endpush

@push('scripts')
<script>
/*
 * Native booking flow.
 *
 * Talks to /api/bookings/{days,availability,create} which are session-
 * scoped and CSRF-protected. The component owns three pieces of state:
 *
 *   - the calendar's anchor month (year/month) + per-month "which days
 *     have any availability" set, loaded lazily as the user navigates.
 *   - the currently-selected date + that date's slot list.
 *   - the currently-selected slot.
 *
 * Booking is created via POST /api/bookings/create which calls Microsoft
 * Graph server-side. On 2xx we move to the success view; the meeting
 * webhook will eventually arrive and update DB state, but the user has
 * a confirmed booking the instant Graph returns.
 */
document.addEventListener('alpine:init', () => {
    Alpine.data('bookingFlow', (cfg) => ({
        // ── config (injected from Blade) ───────────────────────────────
        type:          cfg.type,
        signupId:      cfg.signupId,
        customerEmail: cfg.customerEmail || '',
        timezone:      cfg.timezone || 'Asia/Riyadh',
        durationMin:   cfg.durationMin || 30,
        serviceName:   cfg.serviceName || '',
        daysAhead:     cfg.daysAhead || 21,
        endpoints:     cfg.endpoints,

        // ── state machine ──────────────────────────────────────────────
        state: 'pick', // 'pick' | 'done'

        // ── calendar ───────────────────────────────────────────────────
        anchor: null,           // { y, m }  the month currently rendered
        availableByMonth: {},   // { 'YYYY-MM': Set<'YYYY-MM-DD'> }
        daysLoading: false,
        daysError:   '',

        // ── slot list ──────────────────────────────────────────────────
        selectedDate: '',
        slots: [],
        slotsLoading: false,
        slotsError:   '',

        // ── chosen slot + create ───────────────────────────────────────
        selectedSlot: null,
        creating:     false,
        createError:  '',
        confirmed:    null,

        // ── lifecycle ──────────────────────────────────────────────────
        init() {
            const now = new Date();
            this.anchor = { y: now.getFullYear(), m: now.getMonth() };
            this.loadMonth();
        },

        // ── helpers ────────────────────────────────────────────────────
        monthKey(y, m) { return y + '-' + String(m + 1).padStart(2, '0'); },
        pad(n) { return String(n).padStart(2, '0'); },
        todayStr() {
            const d = new Date();
            return d.getFullYear() + '-' + this.pad(d.getMonth() + 1) + '-' + this.pad(d.getDate());
        },
        windowMaxStr() {
            const d = new Date();
            d.setDate(d.getDate() + this.daysAhead);
            return d.getFullYear() + '-' + this.pad(d.getMonth() + 1) + '-' + this.pad(d.getDate());
        },

        monthLabel() {
            const names = ['يناير','فبراير','مارس','أبريل','مايو','يونيو',
                           'يوليو','أغسطس','سبتمبر','أكتوبر','نوفمبر','ديسمبر'];
            return names[this.anchor.m] + ' ' + this.anchor.y;
        },

        weekdayLabels() {
            return ['أحد','إثنين','ثلاثاء','أربعاء','خميس','جمعة','سبت'];
        },

        canGoPrev() {
            const now = new Date();
            // Allow going back only to the current month.
            const minY = now.getFullYear(), minM = now.getMonth();
            return this.anchor.y > minY || (this.anchor.y === minY && this.anchor.m > minM);
        },
        canGoNext() {
            const max = new Date();
            max.setDate(max.getDate() + this.daysAhead);
            const maxY = max.getFullYear(), maxM = max.getMonth();
            return this.anchor.y < maxY || (this.anchor.y === maxY && this.anchor.m < maxM);
        },

        prevMonth() {
            if (!this.canGoPrev()) return;
            const m = this.anchor.m - 1;
            this.anchor = m < 0
                ? { y: this.anchor.y - 1, m: 11 }
                : { y: this.anchor.y, m };
            this.loadMonth();
        },
        nextMonth() {
            if (!this.canGoNext()) return;
            const m = this.anchor.m + 1;
            this.anchor = m > 11
                ? { y: this.anchor.y + 1, m: 0 }
                : { y: this.anchor.y, m };
            this.loadMonth();
        },

        // Render a 6×7 grid; first/last weeks contain "empty" cells where
        // the day doesn't belong to the anchor month.
        monthCells() {
            const y = this.anchor.y, m = this.anchor.m;
            const first = new Date(y, m, 1);
            const startDow = first.getDay(); // 0=Sun
            const daysInMonth = new Date(y, m + 1, 0).getDate();

            const key = this.monthKey(y, m);
            const avail = this.availableByMonth[key] || new Set();
            const today = this.todayStr();
            const windowMax = this.windowMaxStr();

            const cells = [];
            for (let i = 0; i < startDow; i++) {
                cells.push({ empty: true, key: 'pad-' + i });
            }
            for (let d = 1; d <= daysInMonth; d++) {
                const iso = y + '-' + this.pad(m + 1) + '-' + this.pad(d);
                const past = iso < today;
                const beyond = iso > windowMax;
                cells.push({
                    empty: false,
                    key: iso,
                    iso,
                    day: d,
                    today: iso === today,
                    available: !past && !beyond && avail.has(iso),
                    selected: iso === this.selectedDate,
                });
            }
            while (cells.length % 7 !== 0) {
                cells.push({ empty: true, key: 'tail-' + cells.length });
            }
            return cells;
        },

        // ── HTTP ───────────────────────────────────────────────────────
        async loadMonth() {
            const key = this.monthKey(this.anchor.y, this.anchor.m);
            this.daysError = '';
            this.daysLoading = true;
            try {
                const url = this.endpoints.days
                          + '?type=' + encodeURIComponent(this.type)
                          + '&month=' + encodeURIComponent(key);
                const res = await fetch(url, { headers: { 'Accept': 'application/json' } });
                if (!res.ok) throw new Error('HTTP ' + res.status);
                const body = await res.json();
                const list = Array.isArray(body.available_days) ? body.available_days : [];
                this.availableByMonth[key] = new Set(list);
                if (body.error === 'graph_unavailable') {
                    this.daysError = body.message || 'تعذّر تحميل التقويم.';
                }
            } catch (e) {
                console.error('days load failed', e);
                this.daysError = 'تعذّر الاتصال بالخادم. حاول مرة أخرى.';
            } finally {
                this.daysLoading = false;
            }
        },

        async pickDate(iso) {
            this.selectedDate = iso;
            this.selectedSlot = null;
            this.slots = [];
            this.slotsError = '';
            this.slotsLoading = true;
            try {
                const url = this.endpoints.availability
                          + '?type=' + encodeURIComponent(this.type)
                          + '&date=' + encodeURIComponent(iso);
                const res = await fetch(url, { headers: { 'Accept': 'application/json' } });
                if (!res.ok) throw new Error('HTTP ' + res.status);
                const body = await res.json();
                this.slots = Array.isArray(body.slots) ? body.slots : [];
                if (body.error === 'graph_unavailable') {
                    this.slotsError = body.message || 'تعذّر تحميل الأوقات.';
                }
            } catch (e) {
                console.error('slots load failed', e);
                this.slotsError = 'تعذّر تحميل الأوقات. حاول مرة أخرى.';
            } finally {
                this.slotsLoading = false;
            }
        },

        pickSlot(slot) {
            this.selectedSlot = slot;
            this.createError = '';
        },
        isSelectedSlot(slot) {
            return this.selectedSlot && this.selectedSlot.start === slot.start;
        },

        async confirmBooking() {
            // Defense-in-depth #1: idempotency guard on the button itself.
            // `creating` is already set after the first click — `@click`
            // can't re-fire while it's true (button is :disabled), but a
            // keyboard "Enter" could in theory. Explicit guard belt+braces.
            if (!this.selectedSlot || this.creating) return;
            this.creating = true;
            this.createError = '';
            try {
                const csrf = document.querySelector('meta[name="csrf-token"]')?.content || '';
                const res = await fetch(this.endpoints.create, {
                    method: 'POST',
                    headers: {
                        'Content-Type':     'application/json',
                        'Accept':           'application/json',
                        'X-CSRF-TOKEN':     csrf,
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    body: JSON.stringify({
                        type:       this.type,
                        signup_id:  this.signupId,
                        slot_start: this.selectedSlot.start,
                        slot_end:   this.selectedSlot.end,
                        staff_id:   this.selectedSlot.staff_id,
                    }),
                });
                const body = await res.json().catch(() => ({}));

                if (!res.ok) {
                    this.createError = body.message
                        || 'تعذّر إنشاء الحجز. ربما تم حجز هذا الموعد لتوّه — جرّب موعداً آخر.';

                    // 409 = race / slot already taken (cache lock fail, DB
                    // unique violation, or live Graph re-check rejected it).
                    // 502 = Graph create error mid-flight.
                    // For both: drop the local selection, refresh the day's
                    // slots, AND repopulate the month's available days (the
                    // backend nuked both caches on its end).
                    if (res.status === 409 || res.status === 502) {
                        this.selectedSlot = null;
                        // Re-fetch in parallel — slots for the current day,
                        // and the month's available-days set in case this
                        // was the last free slot.
                        await Promise.all([
                            this.pickDate(this.selectedDate),
                            this.loadMonth(),
                        ]);
                    }
                    return;
                }

                // Success.
                this.confirmed = body;
                this.state = 'done';

                // Defense-in-depth #2: even though we're navigating to the
                // success view, scrub the local slot state in case the
                // template ever changes and the user could navigate back.
                this.selectedSlot = null;
                this.slots        = this.slots.filter(s =>
                    s.staff_id !== this.confirmed.staff_id
                    || s.start  !== this.confirmed.start_time?.replace(/[+-].*$/, '').replace('Z','')
                );

                window.scrollTo({ top: 0, behavior: 'smooth' });
            } catch (e) {
                console.error('create booking failed', e);
                this.createError = 'تعذّر الاتصال بالخادم. حاول مرة أخرى.';
            } finally {
                this.creating = false;
            }
        },

        // ── formatting ─────────────────────────────────────────────────
        formatTime(iso) {
            // iso = "YYYY-MM-DDTHH:MM:SS"  (already in the booking timezone)
            const parts = iso.split('T')[1] || '';
            return parts.substring(0, 5);
        },
        selectedDateLabel() {
            if (!this.selectedDate) return '';
            const [y, m, d] = this.selectedDate.split('-').map(Number);
            const date = new Date(y, m - 1, d);
            return date.toLocaleDateString('ar', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
        },
        confirmedLabel() {
            if (!this.confirmed?.start_time) return '';
            const start = this.confirmed.start_time;
            const datePart = start.split('T')[0];
            const timePart = start.split('T')[1]?.substring(0, 5) || '';
            const [y, m, d] = datePart.split('-').map(Number);
            const date = new Date(y, m - 1, d);
            const label = date.toLocaleDateString('ar', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
            return label + ' — ' + timePart;
        },
    }));
});
</script>
@endpush