{{--
    Floating sticky attendance 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)
      - $committee  : the active committee
      - $attendance : current CommitteeAttendance row, or null
--}}
@php
    use App\Models\CommitteeAttendance;
    $status = $attendance?->status ?? CommitteeAttendance::STATUS_PENDING;
@endphp

@once
@push('styles')
<style>
    /* ── Floating attendance bar ─────────────────────────────────────
       Bundled into the partial (one-time render) so every page that
       includes the partial inherits the same chrome — the portal
       landing page and the startup detail page used to ship divergent
       copies, which is what made the bar look "small and unstyled" on
       the detail view. Single source of truth here. */
    .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); }

    /* On phones the hint + button stack — button becomes a full-width
       primary action so it reads as the page's main CTA. */
    @media (max-width: 640px) {
        .cmt-sticky__inner { flex-direction: column; gap: 10px; align-items: stretch; text-align: center; }
        .cmt-sticky__btn   { width: 100%; }
    }

    /* Floor padding so the sticky bar never covers content. Pages that
       include this partial inherit the spacer too — they don't need to
       ship their own `.cmt-bottom-spacer` rule. */
    .cmt-bottom-spacer { height: 110px; }
</style>
@endpush
@endonce

<div class="cmt-sticky"
     x-data="cmtSticky({
        endpoint:   @js(route('committee-attendance.attendance')),
        csrf:       @js(csrf_token()),
        initial:    @js($status),
     })">
    <div class="cmt-sticky__inner">
        <div class="cmt-sticky__hint">
            <strong>{{ __('web.committee_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 the investor has confirmed, the action button is removed
             entirely — the status pill on the left is enough feedback,
             and there is no longer a "cancel" affordance (confirmation
             is one-way 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.committee_attendance.sticky.confirm') }}</span>
            <span x-show="busy">{{ __('web.committee_attendance.sticky.saving') }}</span>
        </button>
    </div>
</div>

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

        get stateLabel() {
            @php
                $cmtStickyStates = [
                    'confirmed' => __('web.committee_attendance.sticky.state.confirmed'),
                    'cancelled' => __('web.committee_attendance.sticky.state.cancelled'),
                    'pending'   => __('web.committee_attendance.sticky.state.pending'),
                ];
            @endphp
            return (@json($cmtStickyStates))[this.state] || @js(__('web.committee_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('committee-attendance.start'));
                        return;
                    }
                    this.error = @js(__('web.committee_attendance.sticky.save_failed'));
                } else {
                    this.state = body.status || target;
                }
            } catch (e) {
                this.error = @js(__('web.committee_attendance.sticky.save_failed'));
            } finally {
                this.busy = false;
            }
        },
    }));
});
</script>
@endpush
@endonce