{{-- Admin Demos index. MIRROR OF: admin.committees.index — same
     layout components, CSS shape, badge / count chip patterns.
     Differences from committee:
       - Title column shows the bilingual demo title (locale-aware)
       - Extra "Type" + "Mode" columns from label_options
       - Cover image thumbnail in the title cell when present
       - No status-toggle confirmation dialog (Demo status is lifecycle-
         managed only by `demos:expire-past`, same as committee post-2026-06) --}}
@extends('admin.layouts.app')

@section('title', __('admin.demos.index.title') . ' — ' . __('admin.brand.name'))
@section('page_title', __('admin.demos.index.title'))

@push('styles')
<style>
    /* CSS prefix kept as `.cmt-*` so demo + committee share the same
       polished surface (toolbars, chips, badges). Adding a parallel
       `.demo-*` set would diverge over time. The classes are visual
       only — no semantic coupling to Committee data. */
    .cmt-toolbar { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
    .cmt-toolbar > .cmt-toolbar__search { flex: 1 1 320px; min-width: 220px; }

    .cmt-status-chip {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 4px 10px; border-radius: 999px;
        font-size: 12px; font-weight: 700; letter-spacing: .02em;
    }
    .cmt-status-chip--active   { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
    .cmt-status-chip--inactive { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
    .cmt-status-chip .dot { width: 8px; height: 8px; border-radius: 999px; background: currentColor; }

    .cmt-count-badge {
        display: inline-block; padding: 2px 9px;
        background: #eef2ff; color: #4338ca;
        border-radius: 999px; font-weight: 700; font-size: 12px;
    }

    /* Title cell — bilingual demo title + optional cover thumb. */
    .demo-title-cell {
        display: inline-flex; align-items: center; gap: 10px;
        text-decoration: none; color: inherit;
    }
    .demo-title-cell__thumb {
        flex: 0 0 auto;
        width: 44px; height: 32px; border-radius: 6px;
        object-fit: cover;
        background: #f1f5f9;
        border: 1px solid #e2e8f0;
    }
    .demo-title-cell__text { display: flex; flex-direction: column; line-height: 1.25; }
    .demo-title-cell__text strong { color: #1e293b; font-size: 14px; font-weight: 700; }
    .demo-title-cell__text small  { color: #64748b; font-size: 12px; font-weight: 500; }

    /* Type / mode pills — neutral, lighter than status chips. */
    .demo-meta-pill {
        display: inline-block; padding: 2px 8px;
        background: #f8fafc; color: #475569;
        border: 1px solid #e2e8f0;
        border-radius: 6px; font-size: 12px; font-weight: 600;
    }

    .pp-wrap {
        display: inline-flex; align-items: center; gap: 8px;
        height: 42px; padding: 0 14px 0 16px;
        background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
        box-shadow: 0 1px 2px rgba(15,23,42,.04);
        color: #475569; font: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap;
    }
    .pp-wrap select {
        appearance: auto; background: transparent; border: 0;
        font: inherit; font-size: 13.5px; font-weight: 700; color: #0f172a;
        cursor: pointer; padding: 0 4px;
    }
    .pp-wrap select:focus { outline: none; }
</style>
@endpush

@section('content')
    {{-- Subtitle uses trans_choice to resolve the pluralization
         template — calling __() leaked the raw template
         `{0} No demos yet|{1} :count demo|[2,*] :count demos`
         onto the page. trans_choice picks the right branch based
         on the demo count. Same fix the Tags index page applied
         earlier. (2026-06-15) --}}
    <x-admin.page-header
        :title="__('admin.demos.index.title')"
        :subtitle="trans_choice('admin.demos.index.subtitle', $demos->total(), ['count' => $demos->total()])">
        <x-slot:actions>
            <x-admin.btn-create :href="route('admin.demos.create')" :label="__('admin.demos.actions.create')" />
        </x-slot:actions>
    </x-admin.page-header>

    @include('admin.partials.flash')

    <div class="cmt-toolbar">
        <div class="cmt-toolbar__search">
            <x-admin.list-toolbar
                :searchPlaceholder="__('admin.demos.search_placeholder')"
                :activeFilters="$activeFilters"
                filterTargetId="demos-filter-bar" />
        </div>

        <form method="GET" action="{{ url()->current() }}" class="pp-wrap" id="demos-per-page-form">
            @foreach (request()->except(['per_page', 'page']) as $k => $v)
                @if (is_array($v))
                    @foreach ($v as $vv)
                        <input type="hidden" name="{{ $k }}[]" value="{{ $vv }}">
                    @endforeach
                @else
                    <input type="hidden" name="{{ $k }}" value="{{ $v }}">
                @endif
            @endforeach
            <label for="demos-per-page">{{ __('admin.pagination.per_page') }}</label>
            <select name="per_page" id="demos-per-page"
                    onchange="document.getElementById('demos-per-page-form').submit()">
                @foreach ($perPageOptions as $opt)
                    <option value="{{ $opt }}" @selected($perPage === $opt)>{{ $opt }}</option>
                @endforeach
            </select>
        </form>
    </div>

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

        <x-admin.form-select name="status"
            :label="__('admin.fields.status')"
            :options="['active' => __('admin.demos.status.active'), 'expired' => __('admin.demos.status.expired')]"
            :selected="request('status')"
            :placeholder="__('admin.filters.all')" />

        @php
            $typeFilterOptions = $typeOptions->mapWithKeys(fn ($o) => [
                (int) $o->id => app()->getLocale() === 'ar' ? $o->name_ar : $o->name_en,
            ])->all();
        @endphp
        <x-admin.form-select name="type_option_id"
            :label="__('admin.demos.fields.type')"
            :options="$typeFilterOptions"
            :selected="request('type_option_id')"
            :placeholder="__('admin.filters.all')" />

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

    <div class="card card-table">
        @if ($demos->isEmpty())
            <x-admin.empty-state
                :title="__('admin.demos.empty_title')"
                :subtitle="__('admin.demos.empty_hint')" />
        @else
            <div class="card-table-wrap">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th><x-admin.sortable column="title_en" :label="__('admin.demos.fields.title')" /></th>
                            <th>{{ __('admin.demos.fields.type') }}</th>
                            <th>{{ __('admin.demos.fields.mode') }}</th>
                            <th><x-admin.sortable column="meeting_date" :label="__('admin.demos.fields.meeting_date')" /></th>
                            <th>{{ __('admin.demos.fields.meeting_time') }}</th>
                            <th>{{ __('admin.demos.fields.startups') }}</th>
                            <th>{{ __('admin.demos.fields.investors') }}</th>
                            <th><x-admin.sortable column="status" :label="__('admin.fields.status')" /></th>
                            <th>{{ __('admin.demos.fields.created_by') }}</th>
                            <th class="actions" style="width:140px;text-align:end;">{{ __('admin.fields.actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($demos as $demo)
                            <tr>
                                <td>
                                    <a href="{{ route('admin.demos.show', $demo) }}" class="demo-title-cell">
                                        @if ($demo->cover_image_url)
                                            <img class="demo-title-cell__thumb"
                                                 src="{{ $demo->cover_image_url }}"
                                                 alt="">
                                        @endif
                                        <span class="demo-title-cell__text">
                                            <strong>{{ $demo->localizedTitle() }}</strong>
                                            <small>{{ $demo->monthLabel() }}</small>
                                        </span>
                                    </a>
                                </td>
                                <td>
                                    @if ($demo->type)
                                        <span class="demo-meta-pill">
                                            {{ app()->getLocale() === 'ar' ? $demo->type->name_ar : $demo->type->name_en }}
                                        </span>
                                    @else — @endif
                                </td>
                                <td>
                                    @if ($demo->mode)
                                        <span class="demo-meta-pill">
                                            {{ app()->getLocale() === 'ar' ? $demo->mode->name_ar : $demo->mode->name_en }}
                                        </span>
                                    @else — @endif
                                </td>
                                <td>{{ optional($demo->meeting_date)->format('Y-m-d') }}</td>
                                <td>{{ $demo->formattedMeetingTime() }}</td>
                                <td><span class="cmt-count-badge">{{ $demo->startups_count ?? $demo->startups->count() }}</span></td>
                                <td><span class="cmt-count-badge">{{ $demo->investors_count ?? $demo->investors->count() }}</span></td>
                                <td>
                                    @if ($demo->status === \App\Models\Demo::STATUS_ACTIVE)
                                        <span class="cmt-status-chip cmt-status-chip--active" aria-label="{{ __('admin.demos.status.active') }}">
                                            <span class="dot"></span>{{ __('admin.demos.status.active') }}
                                        </span>
                                    @else
                                        <span class="cmt-status-chip cmt-status-chip--inactive" aria-label="{{ __('admin.demos.status.expired') }}">
                                            <span class="dot"></span>{{ __('admin.demos.status.expired') }}
                                        </span>
                                    @endif
                                </td>
                                <td>{{ $demo->creator?->name ?? '—' }}</td>
                                <td class="actions" style="text-align:end;white-space:nowrap;">
                                    <x-admin.row-actions
                                        :editUrl="route('admin.demos.edit', $demo)"
                                        :deleteUrl="route('admin.demos.destroy', $demo)" />
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="pagination-wrap">{{ $demos->links() }}</div>
        @endif
    </div>
@endsection