@extends('admin.layouts.app')

@section('title', __('admin.meetings_admin.list_title') . ' — ' . __('admin.brand.name'))
@section('page_title', __('admin.meetings_admin.list_title'))

@php
    use App\Models\Meeting;

    $dash = '—';

    // Status palette — Green=Confirmed, Yellow=Pending, Red=Cancelled,
    // Blue=Completed, Slate=No-show. Matches the spec for the new column.
    $statusColors = [
        Meeting::STATUS_CONFIRMED => '#10b981',
        Meeting::STATUS_PENDING   => '#f59e0b',
        Meeting::STATUS_CANCELLED => '#ef4444',
        Meeting::STATUS_COMPLETED => '#0ea5e9',
        Meeting::STATUS_NO_SHOW   => '#64748b',
    ];

    $typeOptions = collect(Meeting::types())
        ->mapWithKeys(fn ($k) => [$k => __('admin.meetings_admin.types.' . $k)])
        ->all();
    $statusOptions = collect(Meeting::statuses())
        ->mapWithKeys(fn ($k) => [$k => __('admin.meetings_admin.statuses.' . $k)])
        ->all();
    $attendanceOptions = collect(Meeting::attendanceOptions())
        ->mapWithKeys(fn ($k) => [$k => __('admin.meetings_admin.attendances.' . $k)])
        ->all();

    // Build href helpers for the chip strip — preserve everything EXCEPT
    // date_from / date_to / date_preset / page, so a chip click cleanly
    // overrides the date scope.
    $chipBase = collect(request()->query())
        ->except(['date_from', 'date_to', 'date_preset', 'page'])
        ->all();
    $hrefForPreset = function (?string $preset) use ($chipBase) {
        $qs = $preset === null ? $chipBase : array_merge($chipBase, ['date_preset' => $preset]);
        return url()->current() . ($qs === [] ? '' : '?' . http_build_query($qs));
    };
@endphp

@push('styles')
<style>
    /* Quick-filter chip strip. Same visual language as the group chips
       on the investor index — pill, hover lift, active state highlights
       in the brand violet so the eye finds it. */
    .mtg-chips {
        display: flex; flex-wrap: wrap; gap: 8px;
        margin: 0 0 14px;
    }
    .mtg-chip {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 7px 14px;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 999px;
        color: #475569;
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        transition: background-color .12s, border-color .12s, color .12s, transform .12s;
    }
    .mtg-chip:hover {
        background: #f8fafc;
        border-color: #cbd5e1;
        color: #0f172a;
    }
    .mtg-chip[aria-current="true"] {
        background: #eef2ff;
        border-color: #6366f1;
        color: #4338ca;
        box-shadow: 0 1px 2px rgba(99,102,241,.18);
    }
    .mtg-chip__icon {
        display: inline-flex; align-items: center; justify-content: center;
        width: 16px; height: 16px;
        color: currentColor;
    }
    .mtg-chip__icon svg { width: 16px; height: 16px; }

    /* ── Row action buttons (attendance + view) ────────────────────────
       Two round-square icons in the rightmost cell. The attendance one
       wears the brand violet because it's the action admins reach for on
       this screen; the view one stays neutral so the eye doesn't pick it
       first. Hover lifts the surface a hair so the click target reads as
       interactive even on dense tables. */
    .actions { white-space: nowrap; }
    .actions .att-action-btn + .att-action-btn { margin-inline-start: 6px; }

    .att-action-btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 32px; height: 32px;
        padding: 0;
        background: #eef2ff;
        color: #4338ca;
        border: 1px solid #c7d2fe;
        border-radius: 9px;
        text-decoration: none;
        cursor: pointer;
        line-height: 0;
        transition: background-color .14s ease, border-color .14s ease,
                    color .14s ease, transform .08s ease, box-shadow .14s ease;
    }
    .att-action-btn svg { display: block; }
    .att-action-btn:hover {
        background: #4f46e5;
        border-color: #4338ca;
        color: #fff;
        box-shadow: 0 6px 14px -6px rgba(79, 70, 229, .55),
                    0 1px 2px rgba(79, 70, 229, .35);
        transform: translateY(-1px);
    }
    .att-action-btn:active { transform: translateY(0); }
    .att-action-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, .35);
    }

    /* View icon — neutral palette so the violet attendance button stands
       out as the primary row action. */
    .att-action-btn--view {
        background: #f8fafc;
        color: #475569;
        border-color: #e2e8f0;
    }
    .att-action-btn--view:hover {
        background: #0f172a;
        border-color: #0f172a;
        color: #fff;
        box-shadow: 0 6px 14px -6px rgba(15, 23, 42, .45);
    }
</style>
@endpush

@section('content')
    <x-admin.page-header
        :title="__('admin.meetings_admin.list_title')"
        :subtitle="__('admin.meetings_admin.list_subtitle', ['count' => $meetings->total()])" />

    @include('admin.partials.flash')

    {{-- ────────────── Quick date preset chips ──────────────
         Today / Tomorrow / This Week / This Month. Clicking a chip
         filters server-side via ?date_preset=... which overrides any
         manual date_from / date_to set in the panel below. --}}
    <div class="mtg-chips" role="group" aria-label="{{ __('admin.meetings_admin.date_presets.aria') }}">
        <a class="mtg-chip"
           href="{{ $hrefForPreset(null) }}"
           @if (! $activePreset && ! request('date_from') && ! request('date_to')) aria-current="true" @endif>
            <span class="mtg-chip__icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/>
                </svg>
            </span>
            {{ __('admin.meetings_admin.date_presets.all') }}
        </a>
        <a class="mtg-chip"
           href="{{ $hrefForPreset('today') }}"
           @if ($activePreset === 'today') aria-current="true" @endif>
            <span class="mtg-chip__icon" aria-hidden="true">
                <svg 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"/><circle cx="12" cy="15" r="1.5" fill="currentColor"/>
                </svg>
            </span>
            {{ __('admin.meetings_admin.date_presets.today') }}
        </a>
        <a class="mtg-chip"
           href="{{ $hrefForPreset('tomorrow') }}"
           @if ($activePreset === 'tomorrow') aria-current="true" @endif>
            <span class="mtg-chip__icon" aria-hidden="true">
                <svg 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"/><polyline points="10 14 13 16 10 18"/>
                </svg>
            </span>
            {{ __('admin.meetings_admin.date_presets.tomorrow') }}
        </a>
        <a class="mtg-chip"
           href="{{ $hrefForPreset('week') }}"
           @if ($activePreset === 'week') aria-current="true" @endif>
            <span class="mtg-chip__icon" aria-hidden="true">
                <svg 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>
            </span>
            {{ __('admin.meetings_admin.date_presets.week') }}
        </a>
        <a class="mtg-chip"
           href="{{ $hrefForPreset('month') }}"
           @if ($activePreset === 'month') aria-current="true" @endif>
            <span class="mtg-chip__icon" aria-hidden="true">
                <svg 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"/><circle cx="8" cy="14" r="1" fill="currentColor"/><circle cx="12" cy="14" r="1" fill="currentColor"/><circle cx="16" cy="14" r="1" fill="currentColor"/><circle cx="8" cy="18" r="1" fill="currentColor"/><circle cx="12" cy="18" r="1" fill="currentColor"/>
                </svg>
            </span>
            {{ __('admin.meetings_admin.date_presets.month') }}
        </a>
    </div>

    <x-admin.list-toolbar
        :searchPlaceholder="__('admin.meetings_admin.search_placeholder')"
        :activeFilters="$activeFilters"
        filterTargetId="meetings-filter-bar" />

    <x-admin.filter-bar id="meetings-filter-bar">
        @foreach (request()->only(['q', 'sort', 'dir', 'date_preset']) as $key => $value)
            <input type="hidden" name="{{ $key }}" value="{{ $value }}">
        @endforeach

        <x-admin.form-select name="type"
            :label="__('admin.meetings_admin.fields.type')"
            :options="$typeOptions"
            :selected="request('type')"
            :placeholder="__('admin.filters.all')" />

        <x-admin.form-select name="status"
            :label="__('admin.meetings_admin.fields.status')"
            :options="$statusOptions"
            :selected="request('status')"
            :placeholder="__('admin.filters.all')" />

        <x-admin.form-select name="attendance_status"
            :label="__('admin.meetings_admin.fields.attendance_status')"
            :options="$attendanceOptions"
            :selected="request('attendance_status')"
            :placeholder="__('admin.filters.all')" />

        <x-admin.form-input type="date" name="date_from"
            :label="__('admin.meetings_admin.fields.date_from')"
            :value="request('date_from')" />

        <x-admin.form-input type="date" name="date_to"
            :label="__('admin.meetings_admin.fields.date_to')"
            :value="request('date_to')" />
    </x-admin.filter-bar>

    <div class="card card-table">
        @if ($meetings->isEmpty())
            <x-admin.empty-state
                :title="__('admin.meetings_admin.empty_title')"
                :hint="__('admin.meetings_admin.empty_hint')" />
        @else
            <div class="card-table-wrap">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th><x-admin.sortable column="meeting_date" :label="__('admin.meetings_admin.fields.meeting_date')" /></th>
                            <th>{{ __('admin.meetings_admin.fields.customer_name') }}</th>
                            <th>{{ __('admin.meetings_admin.fields.customer_email') }}</th>
                            {{-- Replaces the old "type" badge — attendance is the
                                 column admins glance at when triaging meetings. --}}
                            <th>{{ __('admin.meetings_admin.fields.attendance_status') }}</th>
                            <th>{{ __('admin.meetings_admin.fields.status') }}</th>
                            <th>{{ __('admin.meetings_admin.fields.title') }}</th>
                            <th><x-admin.sortable column="created_at" :label="__('admin.meetings_admin.fields.created_at')" /></th>
                            <th class="actions">{{ __('admin.fields.actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($meetings as $meeting)
                            <tr>
                                <td>
                                    <strong>{{ $meeting->meeting_date?->format('Y-m-d') ?: $dash }}</strong>
                                    @if ($meeting->start_time)
                                        <div class="muted" style="font-size:11px; margin-top:2px;">
                                            {{ $meeting->localStart?->format('H:i') }}@if ($meeting->end_time) – {{ $meeting->localEnd?->format('H:i') }}@endif
                                        </div>
                                    @endif
                                </td>
                                <td>
                                    <a href="{{ route('admin.meetings.show', $meeting) }}" class="row-link">
                                        {{-- Locale-aware owner name (AR/EN with cross-locale
                                             fallback) → Bookings snapshot → dash. The investor
                                             `name` column was dropped in the 2026-06-09 refactor;
                                             Meeting::ownerDisplayName() is the single source. --}}
                                        {{ $meeting->ownerDisplayName() ?: $dash }}
                                    </a>
                                </td>
                                <td>
                                    @if ($meeting->customer_email)
                                        <a href="mailto:{{ $meeting->customer_email }}">{{ $meeting->customer_email }}</a>
                                    @else
                                        {{ $dash }}
                                    @endif
                                </td>
                                <td>
                                    @include('admin.partials.attendance-badge', ['status' => $meeting->attendance_status])
                                </td>
                                <td>
                                    <x-admin.badge
                                        :label="__('admin.meetings_admin.statuses.' . $meeting->status)"
                                        :color="$statusColors[$meeting->status] ?? '#9aa0b4'" />
                                </td>
                                <td>{{ $meeting->title ?: $dash }}</td>
                                <td class="muted" style="white-space:nowrap;">
                                    @if ($meeting->created_at)
                                        {{ $meeting->created_at->format('Y-m-d') }}
                                        <small style="display:block; font-size:11px; color:#94a3b8;">
                                            {{ $meeting->created_at->format('H:i') }}
                                        </small>
                                    @else
                                        {{ $dash }}
                                    @endif
                                </td>
                                <td class="actions">
                                    {{-- Edit attendance + notes inline (opens the
                                         shared attendance modal). Sits BEFORE the
                                         view icon because it's the more common
                                         action — admins look at meetings to mark
                                         attendance, then occasionally drill in.
                                         The subject type/name pair tells the
                                         modal whether to label its row "Investor"
                                         or "Startup". For a startup meeting we
                                         prefer the linked startup's official
                                         name; for an investor meeting we use
                                         `customer_name` (already the investor's
                                         display name in the Bookings webhook). --}}
                                    @php
                                        $isStartupMeeting = $meeting->meetingable_type === \App\Models\Startup::class;
                                        $subjectType      = $isStartupMeeting ? 'startup' : 'investor';
                                        // Locale-aware owner name with cross-locale fallback,
                                        // then the Bookings snapshot — same single source as the
                                        // name column above. (Legacy `name` column was dropped.)
                                        $subjectName      = $meeting->ownerDisplayName() ?: $meeting->customer_name;
                                    @endphp
                                    <button type="button"
                                            class="att-action-btn"
                                            aria-label="{{ __('admin.attendance_modal.title') }}"
                                            title="{{ __('admin.attendance_modal.title') }}"
                                            data-att-row
                                            data-meeting-id="{{ $meeting->id }}"
                                            data-update-url="{{ route('admin.meetings.update', $meeting) }}"
                                            data-subject-type="{{ $subjectType }}"
                                            data-subject-name="{{ $subjectName }}"
                                            data-current-status="{{ $meeting->attendance_status ?: 'coming' }}"
                                            data-current-notes="{{ $meeting->meeting_notes }}">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
                                            <circle cx="9" cy="7" r="4"/>
                                            <polyline points="17 11 19 13 23 9"/>
                                        </svg>
                                    </button>
                                    <a href="{{ route('admin.meetings.show', $meeting) }}"
                                       class="att-action-btn att-action-btn--view"
                                       aria-label="{{ __('admin.actions.view') }}"
                                       title="{{ __('admin.actions.view') }}">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>
                                        </svg>
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="pagination-wrap">{{ $meetings->links() }}</div>
        @endif
    </div>

    {{-- Shared attendance + notes modal (used by the attendance icon
         on every row). One DOM instance for the whole index page. --}}
    @include('admin.partials.attendance-modal')

    @push('scripts')
    <script>
    (function () {
        // Wire every row's attendance icon to the shared modal. The icon
        // carries the meeting's identity + current state as data-* attrs
        // so we don't need a per-row JS object literal.
        document.querySelectorAll('[data-att-row]').forEach((btn) => {
            btn.addEventListener('click', () => {
                window.openAttendanceModal({
                    meetingId:     btn.dataset.meetingId,
                    updateUrl:     btn.dataset.updateUrl,
                    // New subject-aware API: one row + correct label.
                    subjectType:   btn.dataset.subjectType || 'investor',
                    subjectName:   btn.dataset.subjectName || '',
                    currentStatus: btn.dataset.currentStatus || 'coming',
                    currentNotes:  btn.dataset.currentNotes  || '',
                    onSaved:       () => setTimeout(() => window.location.reload(), 350),
                });
            });
        });
    })();
    </script>
    @endpush
@endsection