{{--
    Floating sticky attendance bar for the Demo portal.
    MIRROR OF: web.committee-attendance.partials.sticky-bar.

    Rendered on BOTH the portal landing page AND the per-startup
    detail page so the investor can confirm / cancel from anywhere.
    State syncs in-place via fetch (no full reload).

    Props:
      - $investor   : current session investor (for the greeting text)
      - $demo       : the active demo
      - $attendance : current DemoAttendance row, or null
--}}
@php
    use App\Models\DemoAttendance;
    $status = $attendance?->status ?? DemoAttendance::STATUS_PENDING;
@endphp

@once
@push('styles')
<style>
    /* CSS chrome bundled into the partial (one-time render) so every
       page that includes it inherits the same surface. Class names are
       intentionally shared with the committee equivalent — both
       portals never co-render, and forking the prefix would mean
       diverging upkeep. */
    .cmt-sticky {
        position: fixed; left: 0; right: 0; bottom: 0;
        background: rgba(255,255,255,.94);
        backdrop-filter: blur(10px);
        border-top: 1px solid var(--slate-200);
        padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
        z-index: 50;
        display: flex; justify-content: center;
        box-shadow: 0 -8px 24px -16px rgba(15,23,42,.18);
    }
    .cmt-sticky__inner {
        width: 100%; max-width: 920px;
        display: flex; align-items: center; gap: 12px;
    }
    .cmt-sticky__hint  { flex: 1; color: var(--slate-600); font-size: 13px; line-height: 1.5; }
    .cmt-sticky__hint strong { color: var(--slate-900); }
    .cmt-sticky__btn {
        display: inline-flex; align-items: center; justify-content: center; gap: 8px;
        padding: 12px 22px;
        border-radius: 12px;
        font: inherit; font-weight: 800; font-size: 15px;
        cursor: pointer; border: 0;
        transition: transform .12s, background-color .15s, box-shadow .15s;
        white-space: nowrap;
        min-width: 180px;
    }
    .cmt-sticky__btn:active { transform: scale(.97); }
    .cmt-sticky__btn:disabled { opacity: .65; cursor: not-allowed; }
    .cmt-sticky__btn--confirm {
        background: var(--success-500); color: #fff;
        box-shadow: 0 4px 12px -4px rgba(16,185,129,.45);
    }
    .cmt-sticky__btn--confirm:hover { background: var(--success-700); }
    .cmt-sticky__btn--cancel {
        background: var(--error-600); color: #fff;
        box-shadow: 0 4px 12px -4px rgba(220,38,38,.45);
    }
    .cmt-sticky__btn--cancel:hover  { background: var(--error-700); }

    .cmt-sticky__status {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 6px 10px; border-radius: 999px;
        font-size: 12px; font-weight: 800; letter-spacing: .02em;
    }
    .cmt-sticky__status--confirmed { background: var(--success-50); color: var(--success-700); }
    .cmt-sticky__status--cancelled { background: var(--error-50);  color: var(--error-700); }
    .cmt-sticky__status--pending   { background: var(--slate-100); color: var(--slate-700); }

    @media (max-width: 640px) {
        .cmt-sticky__inner { flex-direction: column; gap: 10px; align-items: stretch; text-align: center; }
        .cmt-sticky__btn   { width: 100%; }
    }

    .cmt-bottom-spacer { height: 110px; }
</style>
@endpush
@endonce

<div class="cmt-sticky"
     x-data="demoSticky({
        endpoint:   @js(route('demo-attendance.attendance')),
        csrf:       @js(csrf_token()),
        initial:    @js($status),
     })">
    <div class="cmt-sticky__inner">
        <div class="cmt-sticky__hint">
            <strong>{{ __('web.demo_attendance.sticky.your_attendance') }}</strong>
            <span class="cmt-sticky__status"
                  :class="{
                    'cmt-sticky__status--confirmed': state === 'confirmed',
                    'cmt-sticky__status--cancelled': state === 'cancelled',
                    'cmt-sticky__status--pending'  : state === 'pending',
                  }">
                <span x-text="stateLabel"></span>
            </span>
            <span x-show="error" x-cloak style="color: var(--error-600); font-weight:700; margin-inline-start:8px;" x-text="error"></span>
        </div>

        {{-- "Confirm Attendance" when state is pending or cancelled.
             Once confirmed, the action button is removed — the status
             pill on the left is enough feedback. Same one-way contract
             as the committee equivalent per the latest spec. --}}
        <button type="button"
                class="cmt-sticky__btn cmt-sticky__btn--confirm"
                x-show="state !== 'confirmed'"
                :disabled="busy"
                @click="toggle('confirmed')">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            <span x-show="!busy">{{ __('web.demo_attendance.sticky.confirm') }}</span>
            <span x-show="busy">{{ __('web.demo_attendance.sticky.saving') }}</span>
        </button>
    </div>
</div>

@once
@push('scripts')
<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('demoSticky', (cfg) => ({
        state: cfg.initial || 'pending',
        busy: false,
        error: '',

        get stateLabel() {
            @php
                $demoStickyStates = [
                    'confirmed' => __('web.demo_attendance.sticky.state.confirmed'),
                    'cancelled' => __('web.demo_attendance.sticky.state.cancelled'),
                    'pending'   => __('web.demo_attendance.sticky.state.pending'),
                ];
            @endphp
            return (@json($demoStickyStates))[this.state] || @js(__('web.demo_attendance.sticky.state.pending'));
        },

        async toggle(target) {
            if (this.busy) return;
            this.busy = true; this.error = '';
            try {
                const res = await fetch(cfg.endpoint, {
                    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({ status: target }),
                });
                const body = await res.json().catch(() => ({}));
                if (! res.ok || ! body.ok) {
                    if (body.error === 'session_expired') {
                        window.location.href = @js(route('demo-attendance.start'));
                        return;
                    }
                    this.error = @js(__('web.demo_attendance.sticky.save_failed'));
                } else {
                    this.state = body.status || target;
                }
            } catch (e) {
                this.error = @js(__('web.demo_attendance.sticky.save_failed'));
            } finally {
                this.busy = false;
            }
        },
    }));
});
</script>
@endpush
@endonce