{{-- Protected Event details — reachable ONLY after OTP + eligibility.

     PRIVACY CONTRACT (PLT-EVENTS-001 §13). This page renders exactly one
     investor's own view. It must never show:
       other investors · eligible audience counts · the internal Groups the
       event targets · attendance-management controls · admin notes · audit
       information · internal statuses · anyone else's phone, email or state.

     Only `$investor`'s OWN confirmation state is shown, and `admin_status` is
     deliberately NOT rendered — it is an internal verdict, not investor-facing.

     Mirrors web.demo-attendance.portal for layout and the `.cmt-att-*` surface. --}}
@extends('web.signup.layout')

@section('title', $event->title)
@section('page_title', __('web.event_attendance.details_title'))
@section('page_subtitle', '')
@section('body_class', 'has-sticky-logo')

@php
    // Formatted ONCE here, in business time. The model stores UTC; every
    // investor-facing timestamp on this page is Asia/Riyadh so nobody has to
    // convert in their head.
    $tz      = \App\Support\Time\BookingsTimezone::business();
    $startAt = $event->starts_at?->copy()->setTimezone($tz);
    $endAt   = $event->ends_at?->copy()->setTimezone($tz);
    $sameDay = $startAt && $endAt && $startAt->isSameDay($endAt);
    $isOnline  = $event->event_type === 'online';
    $confirmed = $attendance?->confirmed_at !== null;
@endphp

@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);
        overflow:hidden; max-width:640px; margin:0 auto;
    }
    /* Show the WHOLE poster. `object-fit: cover` with a fixed max-height was
       cropping the artwork — these posters carry the date, venue and agenda
       inside the image, so cropping removes information the investor needs.
       `contain` with width:auto lets the element shrink to the image rather
       than letterboxing it, and the vh cap stops a tall poster eating the
       screen before the details below it. */
    .cmt-att-cover {
        display:block;
        width:auto; max-width:100%;
        height:auto; max-height:58vh;
        margin:0 auto;
        object-fit:contain;
        background:var(--slate-100);
    }
    @media (max-width: 640px) { .cmt-att-cover { max-height:46vh; } }
    .cmt-att-body { padding:28px; }
    @media (max-width: 640px) { .cmt-att-body { padding:20px; } }

    .cmt-att-badge {
        display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px;
        font-size:12px; font-weight:700; letter-spacing:.01em; margin-bottom:12px;
    }
    .cmt-att-badge--online  { background:var(--primary-50); color:var(--primary-700); border:1px solid var(--primary-100); }
    .cmt-att-badge--offline { background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; }
    .cmt-att-badge--over    { background:var(--slate-100); color:var(--slate-600); border:1px solid var(--slate-200); }

    .cmt-att-title { margin:0 0 6px; font-size:25px; font-weight:800; color:var(--slate-900); letter-spacing:-.015em; line-height:1.35; overflow-wrap:anywhere; }
    .cmt-att-greet { margin:0 0 20px; font-size:14px; color:var(--slate-500); }

    .cmt-att-meta { display:grid; gap:12px; margin:20px 0; padding:18px; background:var(--slate-50); border:1px solid var(--slate-100); border-radius:14px; }
    .cmt-att-meta__row { display:flex; align-items:flex-start; gap:12px; }
    .cmt-att-meta__icon { flex:0 0 auto; width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--slate-200); border-radius:10px; color:var(--primary-600); }
    .cmt-att-meta__label { display:block; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--slate-500); margin-bottom:2px; }
    .cmt-att-meta__value { font-size:14.5px; font-weight:600; color:var(--slate-800); line-height:1.6; overflow-wrap:anywhere; }
    .cmt-att-meta__value a { color:var(--primary-600); text-decoration:none; font-weight:700; }
    .cmt-att-meta__value a:hover { text-decoration:underline; }

    .cmt-att-desc { font-size:14.5px; line-height:1.85; color:var(--slate-700); overflow-wrap:anywhere; }
    .cmt-att-desc p { margin:0 0 12px; }

    .cmt-att-cta { margin-top:24px; padding-top:22px; border-top:1px solid var(--slate-100); }
    .cmt-att-btn {
        width:100%; padding:14px 18px; border:0; border-radius:12px; cursor:pointer;
        background:var(--primary-600); color:#fff; font-size:15px; font-weight:700; font-family:inherit;
        display:inline-flex; align-items:center; justify-content:center; gap:9px; transition:background .15s;
    }
    .cmt-att-btn:hover:not(:disabled) { background:var(--primary-700); }
    .cmt-att-btn:disabled { opacity:.6; cursor:not-allowed; }

    .cmt-att-ok {
        display:flex; align-items:flex-start; gap:12px; padding:15px 16px;
        background:#f0fdf4; border:1px solid #bbf7d0; border-radius:13px; color:#14532d;
    }
    .cmt-att-ok__icon { flex:0 0 auto; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; background:#16a34a; color:#fff; border-radius:50%; font-size:14px; font-weight:800; }
    .cmt-att-ok__title { margin:0 0 3px; font-size:14.5px; font-weight:800; }
    .cmt-att-ok__body  { margin:0; font-size:13px; line-height:1.65; color:#166534; }

    .cmt-att-err { margin-top:12px; padding:11px 13px; border:1px solid #fecaca; background:#fef2f2; color:#991b1b; border-radius:11px; font-size:13px; line-height:1.6; }
    .cmt-att-over { padding:15px 16px; background:var(--slate-50); border:1px solid var(--slate-200); border-radius:13px; font-size:13.5px; line-height:1.7; color:var(--slate-600); }
    .cmt-att-spin { width:15px; height:15px; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%; animation:cmt-spin .7s linear infinite; }
    @keyframes cmt-spin { to { transform:rotate(360deg); } }
</style>
@endpush

@section('content')
<div class="cmt-att-card">

    @if ($event->image_path)
        <img class="cmt-att-cover" src="{{ \Illuminate\Support\Facades\Storage::url($event->image_path) }}"
             alt="{{ $event->title }}" loading="lazy">
    @endif

    <div class="cmt-att-body">

        @if ($expired)
            <span class="cmt-att-badge cmt-att-badge--over">{{ __('web.event_attendance.badge.ended') }}</span>
        @elseif ($isOnline)
            <span class="cmt-att-badge cmt-att-badge--online">{{ __('web.event_attendance.badge.online') }}</span>
        @else
            <span class="cmt-att-badge cmt-att-badge--offline">{{ __('web.event_attendance.badge.in_person') }}</span>
        @endif

        <h1 class="cmt-att-title">{{ $event->title }}</h1>

        {{-- The investor's own first name only — no other identity is exposed. --}}
        <p class="cmt-att-greet">
            {{ __('web.event_attendance.greeting', [
                'name' => $investor->first_name
                    ?: ($investor->full_name_en ?: ($investor->full_name_ar ?: $investor->name)),
            ]) }}
        </p>

        <div class="cmt-att-meta">
            @if ($startAt)
                <div class="cmt-att-meta__row">
                    <span class="cmt-att-meta__icon" aria-hidden="true">
                        <svg width="17" height="17" 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="2"/><path d="M16 2v4M8 2v4M3 10h18"/>
                        </svg>
                    </span>
                    <div>
                        <span class="cmt-att-meta__label">{{ __('web.event_attendance.when') }}</span>
                        <span class="cmt-att-meta__value">
                            {{ $startAt->translatedFormat('l, j F Y') }}<br>
                            @if ($endAt)
                                {{ $startAt->translatedFormat('g:i A') }} — {{-- same-day ranges omit the repeated date --}}
                                {{ $sameDay ? $endAt->translatedFormat('g:i A') : $endAt->translatedFormat('j F Y, g:i A') }}
                            @else
                                {{ $startAt->translatedFormat('g:i A') }}
                            @endif
                        </span>
                    </div>
                </div>
            @endif

            {{-- Online → join link; in-person → address. Never both. --}}
            @if ($isOnline)
                @if ($event->event_url)
                    <div class="cmt-att-meta__row">
                        <span class="cmt-att-meta__icon" aria-hidden="true">
                            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.5 1.5"/>
                                <path d="M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.5-1.5"/>
                            </svg>
                        </span>
                        <div>
                            <span class="cmt-att-meta__label">{{ __('web.event_attendance.join_link') }}</span>
                            <span class="cmt-att-meta__value">
                                <a href="{{ $event->event_url }}" target="_blank" rel="noopener noreferrer">
                                    {{ __('web.event_attendance.open_link') }}
                                </a>
                            </span>
                        </div>
                    </div>
                @endif
            @elseif ($event->location)
                <div class="cmt-att-meta__row">
                    <span class="cmt-att-meta__icon" aria-hidden="true">
                        <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/>
                        </svg>
                    </span>
                    <div>
                        <span class="cmt-att-meta__label">{{ __('web.event_attendance.location') }}</span>
                        <span class="cmt-att-meta__value">{{ $event->location }}</span>
                    </div>
                </div>
            @endif
        </div>

        @if (filled($event->description))
            <div class="cmt-att-desc">{!! nl2br(e($event->description)) !!}</div>
        @endif

        <div class="cmt-att-cta">
            @if ($expired)
                {{-- Past event: the record stays readable, but confirming is closed. --}}
                <div class="cmt-att-over">
                    {{ $confirmed
                        ? __('web.event_attendance.ended_confirmed')
                        : __('web.event_attendance.ended_not_confirmed') }}
                </div>
            @else
                <div x-data="eventConfirm({
                        url: @js(route('event-details.confirm', $event)),
                        confirmed: @js($confirmed)
                    })">
                    <div x-show="confirmed" x-cloak>
                        <div class="cmt-att-ok">
                            <span class="cmt-att-ok__icon" aria-hidden="true">✓</span>
                            <div>
                                <p class="cmt-att-ok__title">{{ __('web.event_attendance.confirmed_title') }}</p>
                                <p class="cmt-att-ok__body">{{ __('web.event_attendance.confirmed_body') }}</p>
                            </div>
                        </div>
                    </div>

                    <div x-show="! confirmed">
                        <button type="button" class="cmt-att-btn" @click="submit()" :disabled="busy">
                            <span x-show="busy" class="cmt-att-spin" aria-hidden="true"></span>
                            <span x-text="busy
                                ? @js(__('web.event_attendance.confirming'))
                                : @js(__('web.event_attendance.confirm_attendance'))"></span>
                        </button>
                    </div>

                    <div class="cmt-att-err" x-show="error" x-cloak x-text="error"></div>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('eventConfirm', (cfg) => ({
        confirmed: cfg.confirmed,
        busy: false,
        error: '',

        messages: @js([
            'not_eligible'        => __('web.event_attendance.errors.not_eligible'),
            'event_expired'       => __('web.event_attendance.errors.event_expired'),
            'schedule_incomplete' => __('web.event_attendance.errors.schedule_incomplete'),
            'event_unavailable'   => __('web.event_attendance.errors.event_unavailable'),
            'unauthenticated'     => __('web.event_attendance.errors.session_expired'),
            'generic'             => __('web.event_attendance.errors.generic'),
        ]),

        async submit() {
            if (this.busy || this.confirmed) return;
            this.busy = true; this.error = '';

            const res = await fetch(cfg.url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
                },
                body: JSON.stringify({}),
            });

            let json = {};
            try { json = await res.json(); } catch (e) { /* non-JSON error page */ }
            this.busy = false;

            if (!res.ok || json.ok !== true) {
                this.error = this.messages[json.error_code] || this.messages.generic;
                // A dead session cannot be recovered in place — send them back
                // through the gate rather than leaving a stuck button.
                if (json.error_code === 'unauthenticated') {
                    setTimeout(() => window.location.reload(), 1800);
                }
                return;
            }

            this.confirmed = true;
        },
    }));
});
</script>
@endpush