{{-- Public Demo Attendance — portal landing.
     MIRROR OF: web.committee-attendance.portal. Same .cmt-portal-hero,
     same .cmt-card grid, same per-startup notes composer, same
     floating sticky attendance bar.

     Demo-specific additions:
       - Hero shows the demo's localized title (not "Committee Meeting")
       - Type + Mode label_option pills next to the date/time row
       - Optional cover image as the hero background when uploaded --}}
@extends('web.signup.layout')

@section('title', __('web.demo_attendance.title') . ' — ' . $demo->localizedTitle())
@section('page_title', __('web.demo_attendance.portal.meeting_title'))
@section('page_subtitle', '')
@section('body_class', 'has-sticky-logo')

@php
    use App\Models\DemoAttendance;
    $status    = $attendance?->status ?? DemoAttendance::STATUS_PENDING;
    $locale    = app()->getLocale();
    // Localized type / mode labels — null when the option wasn't set.
    $typeLabel = $demo->type?->{$locale === 'ar' ? 'name_ar' : 'name_en'};
    $modeLabel = $demo->mode?->{$locale === 'ar' ? 'name_ar' : 'name_en'};
@endphp

@push('styles')
<style>
    /* Stretch the signup-shell to full width — same exception the
       committee portal needs for the startup grid. */
    .signup-shell .signup-content { max-width: 1100px; }

    /* Sticky Numu logo bar stays visible (body.has-sticky-logo pins
       .signup-header__logo). Hide only the duplicated h1 + p underneath
       — the in-content `.cmt-portal-hero` renders its own title with
       date + time. Drop the layout's logo inside the in-content hero
       too (we already have the sticky one up top). */
    .signup-shell .signup-header h1,
    .signup-shell .signup-header p { display: none; }
    .cmt-portal-hero img.logo { display: none; }

    .cmt-portal-hero {
        background: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-500) 100%);
        color: #fff;
        border-radius: 22px;
        padding: 28px 28px 32px;
        margin: 0 auto 28px;
        max-width: 920px;
        box-shadow: var(--shadow-lg);
        text-align: center;
        position: relative;
        overflow: hidden;
    }
    /* Optional cover image — sits behind the gradient overlay so the
       hero stays legible even when an image is set. The decorative
       circle of the original hero remains visible on top. */
    .cmt-portal-hero--with-cover {
        background:
            linear-gradient(135deg, rgba(67,56,202,.78) 0%, rgba(99,102,241,.62) 100%),
            var(--demo-cover-url) center/cover no-repeat,
            var(--primary-600);
    }
    .cmt-portal-hero::before {
        content: ''; position: absolute; inset: -50% -10% auto auto;
        width: 320px; height: 320px; border-radius: 999px;
        background: rgba(252,211,77,.18); filter: blur(20px);
    }
    .cmt-portal-hero img.logo { height: 44px; width: auto; margin-bottom: 14px; opacity:.95; }
    .cmt-portal-hero__title { margin: 0 0 8px; font-size: 26px; font-weight: 800; letter-spacing:-.02em; position:relative; }
    .cmt-portal-hero__meta {
        display:flex; flex-wrap:wrap; justify-content:center; gap:14px 22px;
        font-size:15px; font-weight:600; position:relative;
    }
    .cmt-portal-hero__meta .item {
        display:inline-flex; align-items:center; gap:8px;
        background: rgba(255,255,255,.14);
        padding: 8px 14px; border-radius: 999px;
        backdrop-filter: blur(6px);
        border: 1px solid rgba(255,255,255,.18);
    }
    .cmt-portal-hero__investor {
        margin-top: 14px; font-size: 13.5px; color: rgba(255,255,255,.85); position:relative;
    }

    .cmt-section-head {
        display:flex; align-items:center; justify-content:space-between;
        margin: 0 auto 16px; max-width: 920px; padding: 0 4px;
    }
    .cmt-section-head h3 { margin:0; font-size: 18px; font-weight:800; color: var(--slate-900); }
    .cmt-section-head .count { color: var(--slate-500); font-weight:600; font-size:13px; }

    .cmt-cards {
        display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 16px;
        margin: 0 auto 80px;
        max-width: 920px;
    }
    .cmt-card {
        background:#fff; border:1px solid var(--slate-200); border-radius:16px;
        padding: 18px; display:flex; flex-direction:column; gap:12px;
        box-shadow: 0 1px 2px rgba(15,23,42,.04);
        transition: transform .15s, box-shadow .15s, border-color .15s;
    }
    .cmt-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--primary-200); }
    .cmt-card__head { display:flex; align-items:center; gap:12px; }
    .cmt-card__logo {
        width:54px; height:54px; border-radius:12px;
        background: var(--primary-50); color: var(--primary-700);
        display:flex; align-items:center; justify-content:center;
        font-weight:800; font-size:18px;
        border:1px solid var(--primary-100);
        overflow: hidden; flex-shrink:0;
    }
    .cmt-card__logo img { width:100%; height:100%; object-fit:cover; }
    .cmt-card__name { font-size:15.5px; font-weight:800; color: var(--slate-900); margin:0; line-height:1.3; }
    .cmt-card__sub  { font-size:12.5px; color: var(--slate-500); margin:2px 0 0; }
    .cmt-card__sector {
        display: inline-flex; align-items: center; gap: 4px;
        margin-top: 6px;
        padding: 3px 9px;
        background: var(--primary-50);
        color: var(--primary-700);
        border: 1px solid var(--primary-100);
        border-radius: 999px;
        font-size: 11.5px; font-weight: 700; line-height: 1.3;
    }
    .cmt-card__sector svg { flex-shrink: 0; }
    .cmt-card__desc {
        font-size:13.5px; color: var(--slate-600); line-height:1.6;
        display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
        min-height: 65px;
    }
    .cmt-card__cta {
        display:inline-flex; align-items:center; justify-content:center; gap:6px;
        background: var(--primary-600); color:#fff;
        padding: 10px 14px; border-radius: 10px;
        font-weight:700; font-size:14px;
        text-decoration: none;
        transition: background .15s;
        margin-top: 4px;
    }
    .cmt-card__cta:hover { background: var(--primary-700); }

    /* Action row — pitch-deck (secondary) + view-details (primary). */
    .cmt-card__actions { display:flex; gap:8px; margin-top:4px; }
    .cmt-card__actions .cmt-card__cta { margin-top:0; flex:1; }
    .cmt-card__pitch {
        display:inline-flex; align-items:center; justify-content:center; gap:6px;
        flex:1;
        background:#fff; color: var(--primary-700);
        border:1.5px solid var(--primary-200);
        padding: 10px 14px; border-radius: 10px;
        font-weight:700; font-size:14px;
        text-decoration: none;
        transition: background .15s, border-color .15s;
    }
    .cmt-card__pitch:hover { background:#f6f5ff; border-color: var(--primary-300, var(--primary-200)); }
    .cmt-card__pitch svg { flex-shrink:0; }

    /* `.cmt-card__notes*` CSS removed on 2026-06-11 alongside the
       per-startup notes composer markup. See the comment in the card
       template below for the rationale. */

    .cmt-portal-topbar {
        max-width: 920px; margin: 0 auto 14px;
        display: flex; justify-content: flex-end; align-items: center; gap: 12px;
        font-size: 13px;
    }
    .cmt-portal-topbar form { margin:0; }
    .cmt-portal-topbar button {
        background: 0; border: 0; color: var(--slate-500); cursor: pointer; font: inherit;
    }
    .cmt-portal-topbar button:hover { color: var(--error-600); }
</style>
@endpush

@section('content')
<div class="cmt-portal-topbar">
    <span style="color:var(--slate-500);">
        {!! __('web.demo_attendance.portal.welcome', ['name' => '<strong style="color:var(--slate-800);">' . e($investor->display_name) . '</strong>']) !!}
    </span>
    <form method="POST" action="{{ route('demo-attendance.logout') }}">
        @csrf
        <button type="submit">{{ __('web.demo_attendance.portal.logout') }}</button>
    </form>
</div>

<header class="cmt-portal-hero @if ($demo->cover_image_url) cmt-portal-hero--with-cover @endif"
        @if ($demo->cover_image_url) style="--demo-cover-url: url('{{ $demo->cover_image_url }}');" @endif>
    <img src="{{ asset('assets/admin/images/login.png') }}" alt="Numu Angels" class="logo">
    <h1 class="cmt-portal-hero__title">{{ $demo->localizedTitle() ?: __('web.demo_attendance.portal.meeting_title') }}</h1>
    <div class="cmt-portal-hero__meta">
        <span class="item">
            <svg width="16" height="16" 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"/><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>
            {{ optional($demo->meeting_date)->locale($locale)->isoFormat('D MMMM Y') }}
        </span>
        <span class="item">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
            {{ $demo->formattedMeetingTime() }}
        </span>
        @if ($typeLabel)
            <span class="item">{{ $typeLabel }}</span>
        @endif
        @if ($modeLabel)
            <span class="item">{{ $modeLabel }}</span>
        @endif
    </div>
</header>

<div class="cmt-section-head">
    <h3>{{ __('web.demo_attendance.portal.startups_heading') }}</h3>
    <span class="count">{{ __('web.demo_attendance.portal.startups_count', ['count' => $startups->count()]) }}</span>
</div>

<div class="cmt-cards">
    @forelse ($startups as $startup)
        @php
            $initial = mb_strtoupper(mb_substr(trim($startup->display_name ?? '?'), 0, 1));
            // Read off the eager-loaded `files` collection (no per-card query).
            $logo = $startup->files->where('slot', 'logo')->sortByDesc('id')->first();
            $logoUrl = $logo ? $logo->url() : null;
            // Pitch deck — shown when the file is serveable: either bytes
            // are on disk, OR it's a Monday asset we can lazy-download on
            // first click. Served THROUGH the app (symlink-independent).
            $applicationId = (int) $startup->pivot->startup_investment_round_id;
            $slot = $demo->slots->firstWhere('startup_investment_round_id', $applicationId);
            $pitch = $slot?->application?->files?->where('slot', 'pitch_deck')->sortByDesc('id')->first();
            $pitchServeable = $pitch && ($pitch->isAvailable() || $pitch->monday_asset_id);
            $brief = (string) ($startup->startup_brief ?? '');
            $sectorLabel = $startup->sector
                ? ($locale === 'ar'
                    ? ($startup->sector->name_ar ?: $startup->sector->name_en)
                    : ($startup->sector->name_en ?: $startup->sector->name_ar))
                : null;
        @endphp
        <article class="cmt-card">
            <div class="cmt-card__head">
                <div class="cmt-card__logo">
                    @if ($logoUrl)
                        <img src="{{ $logoUrl }}" alt="">
                    @else
                        {{ $initial ?: '?' }}
                    @endif
                </div>
                <div style="flex:1; min-width:0;">
                    {{-- 2026-06-17: locale-aware primary + secondary.
                         display_name resolves to the AR name in AR
                         locale, EN name in EN locale (with fallback).
                         The OTHER locale's name surfaces as a small
                         subtitle ONLY when it actually differs from
                         the primary — so a row with only one locale
                         filled doesn't render an empty <p>. --}}
                    @php $secondaryName = app()->getLocale() === 'ar' ? $startup->name_en : $startup->name; @endphp
                    <h4 class="cmt-card__name">{{ $startup->display_name }}</h4>
                    @if ($secondaryName && $secondaryName !== $startup->display_name)
                        <p class="cmt-card__sub">{{ $secondaryName }}</p>
                    @endif
                    @if ($sectorLabel)
                        <span class="cmt-card__sector">
                            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                <path d="M20.59 13.41 13 21a2 2 0 0 1-2.83 0L3 13.83V4a1 1 0 0 1 1-1h9.83l6.76 6.76a2 2 0 0 1 0 2.83z"/>
                                <circle cx="7.5" cy="7.5" r="1.5"/>
                            </svg>
                            {{ $sectorLabel }}
                        </span>
                    @endif
                </div>
            </div>
            <p class="cmt-card__desc">{{ $brief !== '' ? $brief : __('web.demo_attendance.portal.no_description') }}</p>
            <div class="cmt-card__actions">
                {{-- Pitch deck — opens the PDF directly from the card when a
                     ready pitch deck exists. Keeps the portal focused on the
                     two presentation materials (logo + pitch deck). --}}
                @if ($pitchServeable)
                    <a href="{{ route('demo-attendance.startups.pitch-deck', [$startup, 'startup_investment_round_id' => $applicationId]) }}" target="_blank" rel="noopener" class="cmt-card__pitch">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                            <polyline points="14 2 14 8 20 8"/>
                        </svg>
                        {{ __('web.demo_attendance.portal.pitch_deck') }}
                    </a>
                @endif
                <a href="{{ route('demo-attendance.startups.show', [$startup, 'startup_investment_round_id' => $startup->pivot->startup_investment_round_id]) }}" class="cmt-card__cta">
                    {{ __('web.demo_attendance.portal.view_details') }}
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                        <polyline points="15 18 9 12 15 6"/>
                    </svg>
                </a>
                <div class="cmt-card__meta">Application #{{ optional($demo->slots->firstWhere('startup_investment_round_id', $startup->pivot->startup_investment_round_id)?->application)->round_number ?? '—' }}</div>
            </div>

            {{-- The per-startup notes composer was removed on
                 2026-06-11 per ops decision: the demo attendance
                 portal must focus only on startup presentation
                 materials (logo + pitch deck). The
                 `demo-attendance.startups.note` route still exists
                 server-side but no UI element calls it. --}}
        </article>
    @empty
        <div style="grid-column:1/-1; text-align:center; padding:32px; color:var(--slate-500); background:#fff; border:1px dashed var(--slate-300); border-radius:14px;">
            {{ __('web.demo_attendance.portal.empty') }}
        </div>
    @endforelse
</div>

<div class="cmt-bottom-spacer"></div>

@include('web.demo-attendance.partials.sticky-bar', [
    'investor'   => $investor,
    'demo'       => $demo,
    'attendance' => $attendance,
])

{{-- The `demoStartupNote` Alpine component was removed on
     2026-06-11 — see the inline comment where the composer used to
     sit. No JS is pushed from this view now. --}}
@endsection