@extends('web.signup.layout')

@section('title', __('web.committee_attendance.title') . ' — ' . $committee->monthLabel())
@section('page_title', __('web.committee_attendance.portal.meeting_title'))
@section('page_subtitle', '')
@section('body_class', 'has-sticky-logo')

@php
    use App\Models\CommitteeAttendance;
    $status = $attendance?->status ?? CommitteeAttendance::STATUS_PENDING;
@endphp

@push('styles')
<style>
    /* Stretch the signup-shell to full width on the portal so the cards
       can breathe — the OTP card width was deliberately narrow but the
       startup grid wants the full canvas. */
    .signup-shell .signup-content { max-width: 1100px; }

    /* Keep the layout's sticky Numu logo bar visible (body.has-sticky-logo
       pins .signup-header__logo to top of viewport). Hide ONLY the
       duplicated h1 + p underneath it — the in-content `.cmt-portal-hero`
       renders its own "اجتماع اللجنة" title with date + time.
       Also drop the layout's own logo image inside the in-content hero
       (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;
    }
    .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); }

    /* Per-startup investor notes — small inline composer under each
       card. Auto-saves on blur so the investor doesn't lose their
       text if the session hops; an explicit "Save" button also exists
       for visible confirmation. */
    .cmt-card__notes {
        margin-top: 4px;
        padding-top: 12px;
        border-top: 1px dashed var(--slate-200);
        display: flex; flex-direction: column; gap: 8px;
    }
    .cmt-card__notes-label {
        font-size: 12px;
        font-weight: 700;
        color: var(--slate-600);
        display: inline-flex; align-items: center; gap: 6px;
    }
    .cmt-card__notes-label svg { color: var(--primary-500); }
    .cmt-card__notes textarea {
        width: 100%;
        min-height: 72px;
        resize: vertical;
        padding: 9px 11px;
        border: 1px solid var(--slate-200);
        border-radius: 10px;
        background: var(--slate-50);
        color: var(--slate-900);
        font: inherit; font-size: 13.5px; line-height: 1.55;
        outline: none;
        transition: border-color .15s, box-shadow .15s, background-color .15s;
    }
    .cmt-card__notes textarea:focus {
        border-color: var(--primary-500);
        background: #fff;
        box-shadow: 0 0 0 3px rgba(99,102,241,.12);
    }
    .cmt-card__notes-row {
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
    }
    .cmt-card__notes-status {
        font-size: 12px; font-weight: 600;
        display: inline-flex; align-items: center; gap: 6px;
        min-height: 18px;
    }
    .cmt-card__notes-status--saved   { color: var(--success-700); }
    .cmt-card__notes-status--saving  { color: var(--slate-500); }
    .cmt-card__notes-status--error   { color: var(--error-600); }
    .cmt-card__notes-save {
        display: inline-flex; align-items: center; gap: 6px;
        background: var(--slate-100); color: var(--slate-700);
        border: 1px solid var(--slate-200);
        padding: 6px 14px; border-radius: 8px;
        font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
        transition: background-color .12s, color .12s, border-color .12s;
    }
    .cmt-card__notes-save:hover {
        background: var(--primary-50); color: var(--primary-700); border-color: var(--primary-200);
    }
    .cmt-card__notes-save:disabled { opacity: .55; cursor: not-allowed; }

    /* Sticky attendance bar styling lives in the partial itself
       (rendered once via the partial), so it's identical between the
       portal page and the per-startup detail page. Nothing to
       declare here. */

    /* Tiny logout link at the very top-right */
    .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.committee_attendance.portal.welcome', ['name' => '<strong style="color:var(--slate-800);">' . e($investor->display_name) . '</strong>']) !!}
    </span>
    <form method="POST" action="{{ route('committee-attendance.logout') }}">
        @csrf
        <button type="submit">{{ __('web.committee_attendance.portal.logout') }}</button>
    </form>
</div>

<header class="cmt-portal-hero">
    <img src="{{ asset('assets/admin/images/login.png') }}" alt="Numu Angels" class="logo">
    <h1 class="cmt-portal-hero__title">{{ __('web.committee_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($committee->meeting_date)->locale(app()->getLocale())->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>
            {{ $committee->formattedMeetingTime() }}
        </span>
    </div>
</header>

<div class="cmt-section-head">
    <h3>{{ __('web.committee_attendance.portal.startups_heading') }}</h3>
    <span class="count">{{ __('web.committee_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));
            $logo = $startup->files()->where('slot', 'logo')->orderByDesc('id')->first();
            $logoUrl = $logo ? asset('storage/' . $logo->file_path) : null;
            $brief = (string) ($startup->startup_brief ?? '');
            // Localized sector label — Arabic first, English fallback so a
            // half-translated catalog row still renders something.
            $sectorLabel = $startup->sector
                ? (app()->getLocale() === '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;">
                    @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.committee_attendance.portal.no_description') }}</p>
            <a href="{{ route('committee-attendance.startups.show', $startup) }}" class="cmt-card__cta">
                {{ __('web.committee_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>

            {{-- Per-investor note composer. The textarea auto-saves
                 ~700ms after the investor stops typing, plus there is an
                 explicit "Save" button. Server upserts on the unique
                 (committee, investor, startup) triplet so retries are
                 always idempotent. --}}
            @php
                $existingNote = optional($notesByStartup[$startup->id] ?? null)->note ?? '';
            @endphp
            <div class="cmt-card__notes"
                 x-data="cmtStartupNote({
                    endpoint:   @js(route('committee-attendance.startups.note', $startup)),
                    csrf:       @js(csrf_token()),
                    initial:    @js($existingNote),
                 })">
                <span class="cmt-card__notes-label">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <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"/>
                        <line x1="9" y1="13" x2="15" y2="13"/>
                        <line x1="9" y1="17" x2="15" y2="17"/>
                    </svg>
                    {{ __('web.committee_attendance.portal.notes_label') }}
                </span>
                <textarea x-model="note"
                          @input.debounce.700ms="save()"
                          @blur="save()"
                          maxlength="5000"
                          placeholder="{{ __('web.committee_attendance.portal.notes_placeholder') }}"></textarea>
                {{-- Inline save indicator only — the explicit Save button
                     was removed: the textarea auto-saves on debounced
                     input + on blur, so a separate click felt redundant. --}}
                <div class="cmt-card__notes-row">
                    <span class="cmt-card__notes-status"
                          :class="{
                            'cmt-card__notes-status--saved'  : status === 'saved',
                            'cmt-card__notes-status--saving' : status === 'saving',
                            'cmt-card__notes-status--error'  : status === 'error',
                          }"
                          x-text="statusLabel"></span>
                </div>
            </div>
        </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.committee_attendance.portal.empty') }}
        </div>
    @endforelse
</div>

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

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

@push('scripts')
<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('cmtStartupNote', (cfg) => ({
        note: cfg.initial || '',
        last: cfg.initial || '',     // last successfully-saved value
        status: 'idle',              // idle | saving | saved | error
        // Translated status labels — keep in the data closure so each
        // card has its own message strings (avoids global pollution).
        labels: {
            idle:   @js(__('web.committee_attendance.portal.notes_idle')),
            saving: @js(__('web.committee_attendance.portal.notes_saving')),
            saved:  @js(__('web.committee_attendance.portal.notes_saved')),
            error:  @js(__('web.committee_attendance.portal.notes_error')),
        },
        get statusLabel() { return this.labels[this.status] ?? ''; },

        async save(force = false) {
            // No-op on identical content — the explicit Save button still
            // round-trips when the user mashes it (force=true) so they
            // always get the green confirmation feedback.
            const trimmed = (this.note || '').trim();
            if (! force && trimmed === (this.last || '').trim()) return;

            this.status = 'saving';
            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({ note: this.note }),
                });
                if (! res.ok) { this.status = 'error'; return; }
                const body = await res.json().catch(() => ({}));
                if (! (body.ok ?? false)) { this.status = 'error'; return; }
                this.last = this.note;
                this.status = 'saved';
            } catch (e) {
                this.status = 'error';
            }
        },
    }));
});
</script>
@endpush
@endsection