@extends('admin.layouts.app')

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

@php
    $dash = '—';
@endphp

@push('styles')
<style>
    /* ── Toolbar: row 1 = search + Filters + Columns + per-page;
         row 2 = full-width filter panel spanning all three columns.
         Layout uses `display: contents` on .st-filters and .ff so the
         filter component's children (.ff-row, .ff-chips, .ff-panel)
         flatten into THIS grid instead of being trapped in column 1.
         This lets the panel use `grid-column: 1 / -1` to spread across
         the entire toolbar — covering the area under Columns +
         per-page that was previously empty. */
    .st-toolbar {
        display: grid;
        grid-template-columns: 1fr auto auto;
        grid-template-rows: auto auto auto;
        gap: 10px;
        margin: 0 0 12px;
        align-items: start;
    }
    /* Flatten the wrappers so the filter sub-elements participate
       directly in the .st-toolbar grid. */
    .st-toolbar > .st-filters,
    .st-toolbar .ff { display: contents; }

    /* Row 1 — top row buttons + search */
    .st-toolbar .ff-row    { grid-column: 1; grid-row: 1; min-width: 0; }
    .st-toolbar > .cp-wrap { grid-column: 2; grid-row: 1; }
    .st-toolbar > .pp-wrap { grid-column: 3; grid-row: 1; }
    /* Row 2 — active-filter chip strip when filters are selected. */
    .st-toolbar .ff-chips  { grid-column: 1 / -1; grid-row: 2; }
    /* Row 3 — the panel itself; spans the full toolbar width so the
       inputs get all the horizontal real-estate to use. */
    .st-toolbar .ff-panel  { grid-column: 1 / -1; grid-row: 3; }

    @media (max-width: 640px) {
        .st-toolbar {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto auto auto auto;
        }
        .st-toolbar .ff-row    { grid-column: 1 / -1; grid-row: 1; }
        .st-toolbar > .cp-wrap { grid-column: 1;     grid-row: 2; }
        .st-toolbar > .pp-wrap { grid-column: 2;     grid-row: 2; }
        .st-toolbar .ff-chips  { grid-column: 1 / -1; grid-row: 3; }
        .st-toolbar .ff-panel  { grid-column: 1 / -1; grid-row: 4; }
    }

    /* Rows-per-page selector — same height/padding/radius/font as
       the Filters and Columns buttons. */
    .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--number-only { padding: 0 10px; gap: 0; }
    .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; }

    /* ── Group chips: single horizontal row, no wrap, scroll on overflow ── */
    .gchips {
        display: flex; flex-wrap: nowrap;
        gap: 8px;
        margin: 12px 0 16px;
        padding: 10px 12px;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        overflow-x: auto;
        scroll-behavior: smooth;
    }
    .gchips::-webkit-scrollbar { height: 6px; }
    .gchips::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
    .gchips::-webkit-scrollbar-track { background: transparent; }

    .gchip {
        display: inline-flex; align-items: center; gap: 8px;
        flex: 0 0 auto;
        padding: 6px 12px 6px 14px;
        border-radius: 999px;
        background: #f1f5f9;
        color: #334155;
        font-size: 13px; font-weight: 600;
        text-decoration: none;
        border: 1px solid transparent;
        white-space: nowrap;
        transition: all .15s;
    }
    .gchip:hover { background: #e2e8f0; color: #0f172a; }
    .gchip__dot {
        width: 8px; height: 8px; border-radius: 999px;
        background: var(--gc, #94a3b8);
        flex-shrink: 0;
    }
    .gchip__count {
        background: #fff; color: #64748b;
        font-size: 11.5px; font-weight: 700;
        min-width: 22px; height: 20px; padding: 0 6px;
        border-radius: 999px;
        display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid #e2e8f0;
    }
    .gchip--active {
        background: var(--gc, #0ea5e9); color: #fff; border-color: transparent;
        box-shadow: 0 2px 6px -2px rgba(15,23,42,.25);
    }
    .gchip--active .gchip__count { background: rgba(255,255,255,.18); color: #fff; border-color: transparent; }
    .gchip--active .gchip__dot { background: #fff; }
    .gchip--all  { background: #fff; border-color: #e2e8f0; }
    .gchip--all.gchip--active { background: #0f172a; border-color: #0f172a; color: #fff; }

    /* Favorites chip — yellow accent, sits at the far end of the strip. */
    .gchip--fav {
        background: #fffbeb;
        border-color: #fde68a;
        color: #b45309;
        margin-inline-start: 8px;
    }
    .gchip--fav:hover { background: #fef3c7; color: #92400e; }
    .gchip--fav.gchip--active {
        background: #f59e0b;
        border-color: #f59e0b;
        color: #fff;
    }
    .gchip--fav svg { flex-shrink: 0; }

    /* ── Sticky name column ─────────────────────────────────────────
       Same approach as the investor table — first column pinned to the
       inline-start edge so the entity name is always visible while the
       rest of the table scrolls horizontally. */
    .card-table-wrap { position: relative; }
    .data-table th:first-child,
    .data-table td:first-child {
        position: sticky;
        inset-inline-start: 0;
        background: #fff;
        z-index: 2;
        box-shadow: 1px 0 0 0 #e2e8f0;
    }
    .data-table thead th:first-child {
        background: #f8fafc;
        z-index: 3;
    }
    .data-table tbody tr:hover td:first-child { background: #f8fafc; }

    /* ── Inline action dropdown (matches investor index) ───────────── */
    .row-actions { position: relative; display: inline-flex; gap: 4px; }
    .row-action-btn {
        width: 30px; height: 30px;
        display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid #e2e8f0; background: #fff;
        border-radius: 7px; color: #475569; cursor: pointer;
        transition: all .12s;
    }
    .row-action-btn:hover { background: #ecfeff; color: #0e7490; border-color: #a5f3fc; }
    .row-action-btn[aria-expanded="true"] { background: #ecfeff; color: #0e7490; border-color: #a5f3fc; }
    .row-action-menu {
        position: absolute; top: calc(100% + 4px); inset-inline-end: 0;
        min-width: 200px;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        box-shadow: 0 10px 24px -8px rgba(15,23,42,.18);
        padding: 4px;
        z-index: 20;
        display: none;
    }
    .row-action-menu[data-open="true"] { display: block; }
    .row-action-menu__title {
        font-size: 11px; font-weight: 700; color: #94a3b8;
        text-transform: uppercase; letter-spacing: .05em;
        padding: 6px 10px 4px;
    }
    .row-action-menu button {
        display: flex; align-items: center; width: 100%;
        gap: 8px;
        padding: 7px 10px;
        background: transparent; border: 0;
        border-radius: 6px;
        font: inherit; font-size: 13px;
        color: #0f172a;
        text-align: start;
        cursor: pointer;
        transition: background-color .1s;
    }
    .row-action-menu button:hover { background: #f1f5f9; }
    .row-action-menu button[data-current="true"] {
        background: #ecfeff; color: #0e7490; font-weight: 700;
    }
    .row-action-menu button[data-current="true"]::after {
        content: "✓"; margin-inline-start: auto; color: #0ea5e9;
    }
    .row-action-menu__sep { height: 1px; background: #f1f5f9; margin: 4px 2px; }

    /* ── Column picker — visually identical to the Filters button. ─── */
    .cp-wrap { position: relative; display: inline-flex; }
    .cp-btn {
        display: inline-flex; align-items: center; gap: 8px;
        height: 42px; padding: 0 16px;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        font: inherit; font-size: 13.5px; font-weight: 600;
        color: #334155;
        cursor: pointer;
        box-shadow: 0 1px 2px rgba(15,23,42,.04);
        transition: all .15s;
        white-space: nowrap;
    }
    .cp-btn:hover { border-color: #a5f3fc; color: #0e7490; }
    .cp-btn[aria-expanded="true"] { background: #ecfeff; border-color: #0ea5e9; color: #0e7490; }
    .cp-menu {
        position: absolute; top: calc(100% + 6px); inset-inline-end: 0;
        width: 300px;
        max-height: 420px;
        overflow-y: auto;
        background: #fff; border: 1px solid #e2e8f0;
        border-radius: 10px;
        box-shadow: 0 12px 28px -8px rgba(15,23,42,.18);
        padding: 8px;
        z-index: 30; display: none;
    }
    .cp-menu[data-open="true"] { display: block; }
    .cp-menu__title {
        font-size: 11px; font-weight: 700; color: #94a3b8;
        text-transform: uppercase; letter-spacing: .05em;
        padding: 4px 8px 0;
    }
    .cp-menu__hint {
        font-size: 11px; color: #94a3b8;
        padding: 0 8px 6px;
    }
    .cp-list { display: flex; flex-direction: column; gap: 1px; }
    .cp-row {
        display: flex; align-items: center; gap: 8px;
        padding: 6px 8px; border-radius: 6px;
        background: transparent;
        transition: background-color .12s, opacity .15s;
    }
    .cp-row:hover { background: #f8fafc; }
    .cp-row[data-dragging="true"] { opacity: .4; background: #ecfeff; }
    .cp-row[data-drag-over="true"] { box-shadow: inset 0 2px 0 0 #0ea5e9; }
    .cp-row[data-drag-over="below"] { box-shadow: inset 0 -2px 0 0 #0ea5e9; }
    .cp-row__label {
        display: flex; align-items: center; gap: 10px;
        flex: 1 1 auto;
        cursor: pointer;
        min-width: 0;
    }
    .cp-row input { width: 16px; height: 16px; margin: 0; accent-color: #0ea5e9; flex-shrink: 0; }
    .cp-row__label > span,
    .cp-row span:not(.cp-handle) { font-size: 13px; color: #0f172a; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .cp-handle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 18px; height: 22px;
        color: #94a3b8;
        cursor: grab;
        flex-shrink: 0;
        border-radius: 4px;
        transition: color .12s, background-color .12s;
    }
    .cp-handle:hover, .cp-row:hover .cp-handle { color: #475569; background: #e2e8f0; }
    .cp-handle:active { cursor: grabbing; }
    .cp-actions { display: flex; gap: 6px; margin-top: 6px; padding: 6px 0 0; border-top: 1px solid #f1f5f9; position: sticky; bottom: 0; background: #fff; }
    .cp-actions button {
        flex: 1; padding: 6px 8px; font-size: 11.5px; font-weight: 600;
        background: #fff; border: 1px solid #e2e8f0; border-radius: 6px;
        color: #475569; cursor: pointer;
    }
    .cp-actions button:hover { background: #f8fafc; color: #0f172a; }

    .data-table th[data-hidden="true"], .data-table td[data-hidden="true"] { display: none; }
    .row-name { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
    .row-name strong { font-weight: 700; color: #0f172a; }
</style>
@endpush

@section('content')
    <x-admin.page-header
        :title="__('admin.startups_admin.list_title')" />

    @include('admin.partials.flash')

    {{-- ── Group chips (single horizontal scrollable row) ─────────── --}}
    @if (! empty($groupChips))
        @php
            $preserve = collect(request()->query())->except(['group_id', 'page'])->all();
            $chipUrl = fn ($groupId = null) => $groupId === null
                ? url()->current() . (count($preserve) ? '?' . http_build_query($preserve) : '')
                : url()->current() . '?' . http_build_query(array_merge($preserve, ['group_id' => $groupId]));

            // Favorites chip — toggles ?favorites=1 while preserving the
            // rest of the query string. See investor index for parity.
            $favsActive  = request()->boolean('favorites');
            $favsBase    = collect(request()->query())->except(['favorites', 'page'])->all();
            $favsChipUrl = $favsActive
                ? url()->current() . (count($favsBase) ? '?' . http_build_query($favsBase) : '')
                : url()->current() . '?' . http_build_query(array_merge($favsBase, ['favorites' => 1]));
        @endphp
        <div class="gchips" role="group" aria-label="{{ __('admin.startups_admin.groups') }}">
            <a href="{{ $chipUrl(null) }}"
               class="gchip gchip--all {{ $selectedGroupId === null && ! $favsActive ? 'gchip--active' : '' }}">
                {{ __('admin.startups_admin.all_groups') }}
                <span class="gchip__count">{{ $startups->total() }}</span>
            </a>
            @foreach ($groupChips as $g)
                <a href="{{ $chipUrl($g['id']) }}"
                   class="gchip {{ $selectedGroupId === $g['id'] ? 'gchip--active' : '' }}"
                   style="--gc: {{ $g['color'] }};">
                    <span class="gchip__dot" aria-hidden="true"></span>
                    {{ $g['name'] }}
                    <span class="gchip__count">{{ $g['count'] }}</span>
                </a>
            @endforeach
            {{-- Favorites chip on the far end of the strip. --}}
            <a href="{{ $favsChipUrl }}"
               class="gchip gchip--fav {{ $favsActive ? 'gchip--active' : '' }}"
               style="--gc: #f59e0b;">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="{{ $favsActive ? 'currentColor' : 'none' }}" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
                </svg>
                {{ __('admin.favorites.chip') }}
            </a>
        </div>
    @endif

    {{-- ── Toolbar: Filters + Columns aligned ──────────────────────── --}}
    <div class="st-toolbar">
        <div class="st-filters">
            <x-admin.dynamic-filters
                id="startups-filters"
                :catalog="$filterCatalog"
                :searchPlaceholder="__('admin.filters.search_placeholder')" />
        </div>

        <div class="cp-wrap" data-column-picker data-storage-key="startups:columns:v3">
            <button type="button" class="cp-btn"
                    data-cp-toggle aria-expanded="false" aria-haspopup="true"
                    title="{{ __('admin.startups_admin.columns_title') }}">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/>
                    <rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>
                </svg>
                {{ __('admin.startups_admin.columns_title') }}
            </button>
            <div class="cp-menu" data-cp-menu role="menu">
                <div class="cp-menu__title">{{ __('admin.startups_admin.columns_hint') }}</div>
                <div class="cp-menu__hint">{{ __('admin.fields.columns_drag_hint') }}</div>
                <div class="cp-list" data-cp-list>
                    @foreach ($columnCatalog as $key => $col)
                        <div class="cp-row" data-cp-item="{{ $key }}" draggable="true">
                            <span class="cp-handle" aria-hidden="true" title="{{ __('admin.fields.drag_to_reorder') }}">
                                <svg width="12" height="14" viewBox="0 0 8 14" fill="currentColor" aria-hidden="true">
                                    <circle cx="2" cy="2" r="1"/><circle cx="6" cy="2" r="1"/>
                                    <circle cx="2" cy="7" r="1"/><circle cx="6" cy="7" r="1"/>
                                    <circle cx="2" cy="12" r="1"/><circle cx="6" cy="12" r="1"/>
                                </svg>
                            </span>
                            <label class="cp-row__label">
                                <input type="checkbox"
                                       data-cp-col="{{ $key }}"
                                       data-cp-default="{{ $col['default'] ? '1' : '0' }}"
                                       @checked($col['default'])>
                                <span>{{ $col['label'] }}</span>
                            </label>
                        </div>
                    @endforeach
                </div>
                <div class="cp-actions">
                    <button type="button" data-cp-all>{{ __('admin.startups_admin.columns_all') }}</button>
                    <button type="button" data-cp-reset>{{ __('admin.startups_admin.columns_reset') }}</button>
                </div>
            </div>
        </div>

        {{-- Rows-per-page selector. Number-only (no label) and ordered
             AFTER the Columns button per UX spec. --}}
        <form method="GET" action="{{ url()->current() }}" class="pp-wrap pp-wrap--number-only" id="startups-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
            <select name="per_page"
                    id="startups-per-page"
                    aria-label="{{ __('admin.pagination.per_page') }}"
                    title="{{ __('admin.pagination.per_page') }}"
                    onchange="document.getElementById('startups-per-page-form').submit()">
                @foreach ($perPageOptions as $opt)
                    <option value="{{ $opt }}" @selected($perPage === $opt)>{{ $opt }}</option>
                @endforeach
            </select>
        </form>
    </div>

    <div class="card card-table">
        @if ($startups->isEmpty())
            <x-admin.empty-state
                :title="__('admin.startups_admin.empty_title')"
                :hint="__('admin.startups_admin.empty_hint')" />
        @else
            <div class="card-table-wrap">
                <table class="data-table"
                       data-startups-table
                       data-update-url="{{ url('admin/startups') }}"
                       data-csrf="{{ csrf_token() }}">
                    <thead>
                        <tr>
                            <th><x-admin.sortable column="name" :label="__('admin.startups_admin.fields.name')" /></th>
                            @foreach ($columnCatalog as $key => $col)
                                <th data-col="{{ $key }}" data-hidden="{{ $col['default'] ? 'false' : 'true' }}">
                                    @if (isset($sortableColumns[$key]))
                                        <x-admin.sortable :column="$sortableColumns[$key]" :label="$col['label']" />
                                    @else
                                        {{ $col['label'] }}
                                    @endif
                                </th>
                            @endforeach
                            <th class="actions">{{ __('admin.fields.actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($startups as $startup)
                            @php
                                $currentActionId   = (int) ($startup->action_option_id ?? 0);
                                $currentActionName = $currentActionId && isset($actionOptions[$currentActionId])
                                    ? $actionOptions[$currentActionId]
                                    : '';
                            @endphp
                            <tr data-startup-row="{{ $startup->id }}"
                                data-current-action-name="{{ $currentActionName }}">
                                <td>
                                    <a href="{{ route('admin.startups.show', $startup) }}" class="row-link row-name">
                                        <strong>{{ $startup->display_name }}</strong>
                                    </a>
                                </td>
                                @foreach ($columnCatalog as $key => $col)
                                    <td data-col="{{ $key }}" data-hidden="{{ $col['default'] ? 'false' : 'true' }}">{!! ($col['value'])($startup) !!}</td>
                                @endforeach
                                <td class="actions">
                                    <div class="row-actions" data-row-actions="{{ $startup->id }}">
                                        @if (! empty($actionOptions))
                                            <button type="button"
                                                    class="row-action-btn"
                                                    data-action-toggle
                                                    aria-haspopup="true"
                                                    aria-expanded="false"
                                                    title="{{ __('admin.startups_admin.row_action_title') ?? __('admin.investors_admin.row_action_title') }}"
                                                    aria-label="{{ __('admin.startups_admin.row_action_title') ?? __('admin.investors_admin.row_action_title') }}">
                                                {{-- "Edit action" icon: pen-on-clipboard, signals
                                                     "change workflow / status" much more clearly
                                                     than a 3-dot kebab. --}}
                                                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                                    <path d="M9 2h6a2 2 0 0 1 2 2v0a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2v0a2 2 0 0 1 2-2z"/>
                                                    <path d="M4 7a2 2 0 0 1 2-2h2"/>
                                                    <path d="M16 5h2a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-5"/>
                                                    <path d="M8 14l-3 3v3h3l8.5-8.5a1.41 1.41 0 0 0-2-2L6 17"/>
                                                </svg>
                                            </button>
                                            <div class="row-action-menu" data-action-menu role="menu">
                                                <div class="row-action-menu__title">{{ __('admin.startups_admin.row_action_title') ?? __('admin.investors_admin.row_action_title') }}</div>
                                                @foreach ($actionOptions as $optId => $optLabel)
                                                    <button type="button"
                                                            data-action-pick="{{ $optId }}"
                                                            data-current="{{ $currentActionId === (int) $optId ? 'true' : 'false' }}">
                                                        {{ $optLabel }}
                                                    </button>
                                                @endforeach
                                                @if ($currentActionId)
                                                    <div class="row-action-menu__sep"></div>
                                                    <button type="button" data-action-pick="0">
                                                        {{ __('admin.startups_admin.row_action_clear') ?? __('admin.investors_admin.row_action_clear') }}
                                                    </button>
                                                @endif
                                            </div>
                                        @endif
                                        <a href="{{ route('admin.startups.show', $startup) }}" class="row-action-btn" aria-label="{{ __('admin.actions.view') }}">
                                            <svg xmlns="http://www.w3.org/2000/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="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>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="pagination-wrap">{{ $startups->links() }}</div>
        @endif
    </div>

    {{-- Rejection confirmation modal (shared with the startup show page). --}}
    @include('admin.partials.rejection-modal')
@endsection

@push('scripts')
<script>
(function () {
    // ── Column picker with drag-and-drop reordering ──────────────────────
    // Identical contract to the investors page — see that file for the
    // commented walkthrough of the storage shape and reorder algorithm.
    initColumnPicker(document.querySelector('[data-column-picker]'));

    function initColumnPicker(picker) {
        if (!picker) return;
        const storageKey = picker.dataset.storageKey || 'columns:v1';
        const btn  = picker.querySelector('[data-cp-toggle]');
        const menu = picker.querySelector('[data-cp-menu]');
        const list = picker.querySelector('[data-cp-list]');
        if (!list) return;

        btn.addEventListener('click', (e) => {
            e.stopPropagation();
            const open = menu.dataset.open === 'true';
            menu.dataset.open = open ? 'false' : 'true';
            btn.setAttribute('aria-expanded', String(!open));
        });
        document.addEventListener('click', (e) => {
            if (!picker.contains(e.target)) {
                menu.dataset.open = 'false';
                btn.setAttribute('aria-expanded', 'false');
            }
        });

        const allItems = () => Array.from(list.querySelectorAll('[data-cp-item]'));
        const itemFor  = (key) => list.querySelector('[data-cp-item="' + cssEscape(key) + '"]');

        const persist = () => {
            const state = allItems().map(it => ({
                key:     it.dataset.cpItem,
                visible: !!it.querySelector('[data-cp-col]')?.checked,
            }));
            try { localStorage.setItem(storageKey, JSON.stringify(state)); } catch (_) {}
        };

        const applyState = () => {
            allItems().forEach(it => {
                const key = it.dataset.cpItem;
                const visible = !!it.querySelector('[data-cp-col]')?.checked;
                document.querySelectorAll('[data-col="' + cssEscape(key) + '"]').forEach(el => {
                    el.dataset.hidden = visible ? 'false' : 'true';
                });
            });
            const order = allItems().map(it => it.dataset.cpItem);
            const table = findOwnTable(picker);
            if (! table) return;
            table.querySelectorAll('thead tr, tbody tr').forEach(tr => reorderRowCells(tr, order));
        };

        let stored = null;
        try { stored = JSON.parse(localStorage.getItem(storageKey) || 'null'); } catch (_) {}
        if (Array.isArray(stored)) {
            const seen = new Set();
            stored.forEach(entry => {
                if (! entry || typeof entry.key !== 'string') return;
                const node = itemFor(entry.key);
                if (! node) return;
                seen.add(entry.key);
                list.appendChild(node);
                const cb = node.querySelector('[data-cp-col]');
                if (cb) cb.checked = !!entry.visible;
            });
            allItems().forEach(it => {
                if (! seen.has(it.dataset.cpItem)) list.appendChild(it);
            });
        }

        applyState();

        list.addEventListener('change', (e) => {
            if (! e.target.matches('[data-cp-col]')) return;
            applyState();
            persist();
        });
        picker.querySelector('[data-cp-all]')?.addEventListener('click', () => {
            allItems().forEach(it => {
                const cb = it.querySelector('[data-cp-col]');
                if (cb) cb.checked = true;
            });
            applyState(); persist();
        });
        picker.querySelector('[data-cp-reset]')?.addEventListener('click', () => {
            try { localStorage.removeItem(storageKey); } catch (_) {}
            const originalOrder = (picker.dataset.cpDefaultOrder || '').split(',').filter(Boolean);
            if (originalOrder.length > 0) {
                originalOrder.forEach(key => {
                    const node = itemFor(key);
                    if (node) list.appendChild(node);
                });
            }
            allItems().forEach(it => {
                const cb = it.querySelector('[data-cp-col]');
                if (cb) cb.checked = cb.dataset.cpDefault === '1';
            });
            applyState();
        });
        if (! picker.dataset.cpDefaultOrder) {
            picker.dataset.cpDefaultOrder = allItems().map(it => it.dataset.cpItem).join(',');
        }

        let dragKey = null;
        list.addEventListener('dragstart', (e) => {
            const row = e.target.closest('[data-cp-item]');
            if (! row) return;
            dragKey = row.dataset.cpItem;
            row.dataset.dragging = 'true';
            try { e.dataTransfer.setData('text/plain', dragKey); } catch (_) {}
            e.dataTransfer.effectAllowed = 'move';
        });
        list.addEventListener('dragend', (e) => {
            const row = e.target.closest('[data-cp-item]');
            if (row) row.dataset.dragging = 'false';
            allItems().forEach(it => {
                it.removeAttribute('data-drag-over');
                it.removeAttribute('data-dragging');
            });
            dragKey = null;
        });
        list.addEventListener('dragover', (e) => {
            if (! dragKey) return;
            const row = e.target.closest('[data-cp-item]');
            if (! row || row.dataset.cpItem === dragKey) return;
            e.preventDefault();
            e.dataTransfer.dropEffect = 'move';
            allItems().forEach(it => { if (it !== row) it.removeAttribute('data-drag-over'); });
            const rect = row.getBoundingClientRect();
            const after = (e.clientY - rect.top) > rect.height / 2;
            row.setAttribute('data-drag-over', after ? 'below' : 'true');
        });
        list.addEventListener('dragleave', (e) => {
            const row = e.target.closest('[data-cp-item]');
            if (row && ! row.contains(e.relatedTarget)) row.removeAttribute('data-drag-over');
        });
        list.addEventListener('drop', (e) => {
            if (! dragKey) return;
            e.preventDefault();
            const target = e.target.closest('[data-cp-item]');
            const moving = itemFor(dragKey);
            if (! target || ! moving || target.dataset.cpItem === dragKey) { dragKey = null; return; }
            const rect = target.getBoundingClientRect();
            const after = (e.clientY - rect.top) > rect.height / 2;
            if (after) target.after(moving); else target.before(moving);
            allItems().forEach(it => it.removeAttribute('data-drag-over'));
            applyState(); persist();
            dragKey = null;
        });
    }

    function findOwnTable(picker) {
        const scope = picker.closest('section, main, body') || document;
        return scope.querySelector('[data-startups-table], [data-investors-table], .data-table');
    }

    function reorderRowCells(tr, order) {
        const cells = Array.from(tr.children);
        if (cells.length < 3) return;
        const first = cells[0];
        const last  = cells[cells.length - 1];
        const middle = cells.slice(1, -1);
        const byKey = new Map();
        middle.forEach(c => {
            const k = c.getAttribute('data-col');
            if (k) byKey.set(k, c);
        });
        const frag = document.createDocumentFragment();
        frag.appendChild(first);
        order.forEach(k => {
            const c = byKey.get(k);
            if (c) { frag.appendChild(c); byKey.delete(k); }
        });
        byKey.forEach(c => frag.appendChild(c));
        frag.appendChild(last);
        tr.appendChild(frag);
    }

    function cssEscape(s) {
        if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') return CSS.escape(s);
        return String(s).replace(/(["'\\\[\]])/g, '\\$1');
    }

    // ── Inline action dropdown (AJAX, same contract as investors) ──────
    const tableEl = document.querySelector('[data-startups-table]');
    if (!tableEl) return;

    const baseUrl = tableEl.dataset.updateUrl;
    const csrf    = tableEl.dataset.csrf;

    document.querySelectorAll('[data-action-toggle]').forEach((btn) => {
        const row = btn.closest('[data-row-actions]');
        const menu = row.querySelector('[data-action-menu]');
        btn.addEventListener('click', (e) => {
            e.stopPropagation();
            document.querySelectorAll('[data-action-menu][data-open="true"]').forEach(m => {
                if (m !== menu) {
                    m.dataset.open = 'false';
                    m.closest('[data-row-actions]').querySelector('[data-action-toggle]')
                        .setAttribute('aria-expanded', 'false');
                }
            });
            const open = menu.dataset.open === 'true';
            menu.dataset.open = open ? 'false' : 'true';
            btn.setAttribute('aria-expanded', String(!open));
        });
    });
    document.addEventListener('click', () => {
        document.querySelectorAll('[data-action-menu][data-open="true"]').forEach(m => {
            m.dataset.open = 'false';
            m.closest('[data-row-actions]').querySelector('[data-action-toggle]')
                .setAttribute('aria-expanded', 'false');
        });
    });

    // Option-ids that trigger the dedicated Rejection modal instead of
    // a plain confirm(). Config-driven — see config/notifications.php.
    const rejectionIds = @json(array_values((array) config('notifications.rejection_option_ids', []))).map(Number);

    document.querySelectorAll('[data-action-pick]').forEach((opt) => {
        opt.addEventListener('click', async (e) => {
            e.stopPropagation();
            const row = opt.closest('[data-startup-row]');
            const id  = row.dataset.startupRow;
            const optionId = parseInt(opt.dataset.actionPick, 10) || null;
            const startupName = (row.querySelector('a, strong')?.textContent || '#' + id).trim();
            const optionLabel = (opt.textContent || '').trim() || '—';
            const currentActionName = (row.dataset.currentActionName || '').trim();

            row.querySelector('[data-action-menu]').dataset.open = 'false';

            // Rejection path: open the dedicated modal that captures an
            // OPTIONAL reason, then fire the same PATCH with the reason
            // attached. Non-rejection picks keep the lightweight confirm.
            if (optionId && rejectionIds.includes(optionId)) {
                window.openRejectionModal({
                    subjectName:   startupName,
                    currentAction: currentActionName || null,
                    statusName:    optionLabel,
                    onSubmit: (reason) => doStartupUpdate(id, optionId, optionLabel, startupName, reason),
                });
                return;
            }

            const confirmMsg = optionId
                ? `تأكيد تغيير حالة "${startupName}" إلى "${optionLabel}"؟`
                : `تأكيد إزالة الحالة من "${startupName}"؟`;
            if (! window.confirm(confirmMsg)) return;
            doStartupUpdate(id, optionId, optionLabel, startupName, null);
        });
    });

    async function doStartupUpdate(id, optionId, optionLabel, startupName, rejectionReason) {
        try {
            const body = { field: 'action_option_id', value: optionId || null };
            if (rejectionReason !== null) body.rejection_reason = rejectionReason;
            const res = await fetch(baseUrl + '/' + id + '/label', {
                method: 'PATCH',
                headers: {
                    'Content-Type':     'application/json',
                    'Accept':           'application/json',
                    'X-CSRF-TOKEN':     csrf,
                    'X-Requested-With': 'XMLHttpRequest',
                },
                body: JSON.stringify(body),
            });
            const payload = await res.json().catch(() => ({}));
            if (!res.ok || payload.ok === false) {
                console.warn('Startup action update failed', payload);
                window.alert(`تعذّر تحديث الحالة: ${payload.message || payload.error || res.statusText || 'حدث خطأ'}`);
                return;
            }
            if (rejectionReason !== null && typeof window.showRejectionSuccessToast === 'function') {
                window.showRejectionSuccessToast();
            } else {
                window.alert(optionId
                    ? `تم تحديث "${startupName}" إلى "${optionLabel}" بنجاح.`
                    : `تمت إزالة الحالة من "${startupName}" بنجاح.`);
            }
            setTimeout(() => window.location.reload(), 350);
        } catch (err) {
            console.error('Startup action update threw', err);
            window.alert(`تعذّر الاتصال بالخادم: ${err.message || err}`);
        }
    }
})();
</script>
@endpush