{{--
    Investors attendance table — props:
      $committee           : Committee
      $investorAttendances : Collection keyed by investor_id (may be empty)
      $hideOwnTitle?       : true → no <h3>, the consumer renders its own
                              header (committee show page does this so
                              all sub-tables share the parent's header).

    Four visible columns per row:
      - Avatar (DB column `avatar_path` on the investor; initials fallback)
      - Name (links to admin investor page)
      - SELF status — investor's confirmation via the public portal
      - ADMIN status — manual verification by the dashboard admin (select)
    Phone + email were dropped from this table in 2026-06; the row's
    name link still leads to the investor show page where the contact
    info is one click away.

    The admin verification dropdown PATCHes
    `admin.committees.investors.attendance` and updates the row in-place
    via fetch — no full-page reload required.
--}}
@php
    use App\Models\CommitteeAttendance;

    $selfLabels = [
        CommitteeAttendance::STATUS_PENDING   => __('admin.committees.attendance.self.pending'),
        CommitteeAttendance::STATUS_CONFIRMED => __('admin.committees.attendance.self.confirmed'),
        CommitteeAttendance::STATUS_CANCELLED => __('admin.committees.attendance.self.cancelled'),
    ];

    $adminLabels = [
        CommitteeAttendance::ADMIN_PENDING        => __('admin.committees.attendance.admin.pending'),
        CommitteeAttendance::ADMIN_ATTENDED       => __('admin.committees.attendance.admin.attended'),
        CommitteeAttendance::ADMIN_DID_NOT_ATTEND => __('admin.committees.attendance.admin.did_not_attend'),
    ];

    $initialsOfInv = function (?string $name): string {
        $name = trim((string) $name);
        if ($name === '') return '—';
        $parts = preg_split('/\s+/u', $name);
        return mb_strtoupper(mb_substr($parts[0] ?? '', 0, 1) . mb_substr($parts[1] ?? '', 0, 1));
    };
@endphp

@php $hideOwnTitle = $hideOwnTitle ?? false; @endphp
<section class="cmt-att-card" @if ($hideOwnTitle) style="border:0; background:transparent;" @endif>
    @if (! $hideOwnTitle)
        <header class="cmt-att-card__head">
            <h3>{{ __('admin.committees.actions_tabs.members') }}
                <span class="cmt-att-card__count">({{ $committee->investors->count() }})</span>
            </h3>
        </header>
    @endif
    <div class="cmt-att-card__body">
        @if ($committee->investors->isEmpty())
            <div class="cmt-att-empty">—</div>
        @else
            <div class="cmt-att-scroll">
                <table class="cmt-att-table cmt-att-table--members">
                    <thead>
                        <tr>
                            <th class="cmt-att-table__th cmt-att-table__th--avatar">&nbsp;</th>
                            <th class="cmt-att-table__th">{{ __('admin.committees.attendance.columns.member') }}</th>
                            <th class="cmt-att-table__th">{{ __('admin.committees.attendance.columns.self_status') }}</th>
                            <th class="cmt-att-table__th">{{ __('admin.committees.attendance.columns.admin_status') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($committee->investors as $investor)
                            @php
                                $row       = $investorAttendances->get($investor->id);
                                $self      = $row?->status        ?? CommitteeAttendance::STATUS_PENDING;
                                $adminVal  = $row?->admin_status  ?? CommitteeAttendance::ADMIN_PENDING;
                                $avatarUrl = ! empty($investor->avatar_path)
                                    ? \Illuminate\Support\Facades\Storage::disk('public')->url($investor->avatar_path)
                                    : null;
                            @endphp
                            <tr class="cmt-att-table__tr"
                                data-cmt-att-row
                                data-update-url="{{ route('admin.committees.investors.attendance', [$committee, $investor]) }}">
                                <td class="cmt-att-table__td">
                                    <span class="cmt-att-avatar">
                                        @if ($avatarUrl)
                                            <img src="{{ $avatarUrl }}" alt="">
                                        @else
                                            {{ $initialsOfInv($investor->display_name) }}
                                        @endif
                                    </span>
                                </td>
                                <td class="cmt-att-table__td">
                                    <a href="{{ route('admin.investors.show', $investor) }}"
                                       class="cmt-att-name">
                                        {{ $investor->display_name }}
                                    </a>
                                </td>
                                <td class="cmt-att-table__td">
                                    @php
                                        $chipClass = match ($self) {
                                            CommitteeAttendance::STATUS_CONFIRMED => 'cmt-att-chip cmt-att-chip--ok',
                                            CommitteeAttendance::STATUS_CANCELLED => 'cmt-att-chip cmt-att-chip--danger',
                                            default                                => 'cmt-att-chip cmt-att-chip--neutral',
                                        };
                                    @endphp
                                    <span class="{{ $chipClass }}">{{ $selfLabels[$self] ?? $self }}</span>
                                </td>
                                <td class="cmt-att-table__td">
                                    <select data-admin-status class="cmt-att-select">
                                        @foreach ($adminLabels as $val => $label)
                                            <option value="{{ $val }}" @selected($adminVal === $val)>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                    <span data-admin-saved class="cmt-att-flag cmt-att-flag--ok">✓ {{ __('admin.committees.attendance.saved') }}</span>
                                    <span data-admin-error class="cmt-att-flag cmt-att-flag--err">! {{ __('admin.committees.attendance.save_failed') }}</span>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>
</section>

@once
@push('scripts')
<script>
(function () {
    function csrf() {
        var m = document.querySelector('meta[name="csrf-token"]');
        return m ? m.getAttribute('content') : '';
    }
    document.querySelectorAll('[data-cmt-att-row]').forEach(function (row) {
        var url    = row.getAttribute('data-update-url');
        var select = row.querySelector('[data-admin-status]');
        var ok     = row.querySelector('[data-admin-saved]');
        var err    = row.querySelector('[data-admin-error]');
        if (!select || !url) return;
        select.addEventListener('change', async function () {
            ok.style.display = 'none'; err.style.display = 'none';
            select.disabled = true;
            try {
                var res = await fetch(url, {
                    method: 'PATCH',
                    credentials: 'same-origin',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrf(),
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    body: JSON.stringify({ admin_status: select.value }),
                });
                var body = await res.json().catch(() => ({}));
                if (res.ok && body.ok) {
                    ok.style.display = 'inline';
                    setTimeout(function () { ok.style.display = 'none'; }, 1800);
                } else {
                    err.style.display = 'inline';
                }
            } catch (e) {
                err.style.display = 'inline';
            } finally {
                select.disabled = false;
            }
        });
    });
})();
</script>
@endpush
@endonce