@extends('admin.layouts.app')

@section('title', ($isEdit ? __('admin.committees.edit') : __('admin.committees.create')) . ' — ' . __('admin.brand.name'))
@section('page_title', $isEdit ? __('admin.committees.edit') : __('admin.committees.create'))

@push('styles')
<style>
    .cmt-form { display: grid; gap: 18px; }
    .cmt-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 14px 16px;
    }
    .cmt-grid > .span-full { grid-column: 1 / -1; }

    .cmt-section-title {
        font-size: 12px; font-weight: 700; color: #64748b;
        text-transform: uppercase; letter-spacing: .06em;
        margin: 6px 0 -2px;
    }
    .cmt-help { font-size: 12.5px; color: #64748b; line-height: 1.5; margin-top: 4px; }

    /* Hard guard against the meeting_url field truncating the value */
    .cmt-url-input {
        width: 100%; box-sizing: border-box;
        font-family: 'SFMono-Regular', Consolas, monospace;
        font-size: 13px; padding: 10px 12px;
        border: 1px solid #cbd5e1; border-radius: 8px;
        background: #fff; color: #0f172a;
        text-overflow: clip; white-space: nowrap; overflow-x: auto;
    }
    .cmt-url-input:focus { outline: 2px solid #c7d2fe; outline-offset: 1px; }

    /* Select2 polish so the multi-selects match the surrounding inputs. */
    .select2-container--default .select2-selection--multiple {
        min-height: 42px; border-color: #cbd5e1; border-radius: 8px;
    }
    .select2-container--default.select2-container--focus .select2-selection--multiple {
        border-color: #6366f1;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background: #eef2ff; border: 1px solid #c7d2fe; color: #3730a3;
        padding: 2px 8px; border-radius: 6px;
    }

    .cmt-errors {
        background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px;
        padding: 12px 14px; color: #7f1d1d;
    }
    .cmt-errors strong { color: #b91c1c; }
    .cmt-errors ul { margin: 6px 0 0 18px; padding: 0; }
    .cmt-errors li { font-size: 13px; }

    .form-actions { display: flex; gap: 10px; justify-content: flex-end; padding-top: 8px; }

    /* ── Slot duration helper ─────────────────────────────────────── */
    .cmt-slot-duration {
        display: flex; flex-direction: column; gap: 6px;
        margin-bottom: 4px;
    }
    .cmt-slot-duration > label {
        font-size: 13px; font-weight: 700; color: var(--slate-700, #334155);
    }
    .cmt-slot-duration__row {
        display: inline-flex; align-items: center; gap: 8px;
        max-width: 220px;
    }
    .cmt-slot-duration__row input[type="number"] {
        width: 110px; padding: 8px 12px;
        border: 1px solid #cbd5e1; border-radius: 8px;
        background: #fff; color: #0f172a;
        font: inherit; font-size: 14px;
    }
    .cmt-slot-duration__row input[type="number"]:focus {
        outline: 2px solid #c7d2fe; outline-offset: 1px; border-color: #6366f1;
    }
    .cmt-slot-duration__unit { color: #64748b; font-size: 13px; font-weight: 600; }

    /* ── Slot manager ───────────────────────────────────────────────── */
    .cmt-slots {
        display: flex; flex-direction: column; gap: 10px;
        padding: 12px;
        border: 1px solid #e2e8f0; border-radius: 12px;
        background: #f8fafc;
    }
    .cmt-slot-row {
        display: grid;
        grid-template-columns: 28px minmax(220px, 1.4fr) 130px 130px 36px;
        gap: 10px; align-items: center;
        padding: 10px 12px;
        background: #fff;
        border: 1px solid #e2e8f0; border-radius: 10px;
        transition: box-shadow .15s, border-color .15s, transform .15s;
    }
    .cmt-slot-row.sortable-ghost { opacity: .4; }
    .cmt-slot-row.sortable-chosen { box-shadow: 0 6px 18px -10px rgba(15,23,42,.35); }
    .cmt-slot-handle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 28px; height: 28px; border-radius: 6px;
        color: #94a3b8; cursor: grab; user-select: none;
        background: transparent;
    }
    .cmt-slot-handle:hover { color: #475569; background: #f1f5f9; }
    .cmt-slot-handle:active { cursor: grabbing; }
    .cmt-slot-row select,
    .cmt-slot-row input[type="time"] {
        width: 100%; box-sizing: border-box;
        border: 1px solid #cbd5e1; border-radius: 8px;
        padding: 8px 10px; font-size: 13.5px;
        background: #fff; color: #0f172a;
    }
    .cmt-slot-row select:focus,
    .cmt-slot-row input[type="time"]:focus { outline: 2px solid #c7d2fe; outline-offset: 1px; border-color: #6366f1; }
    .cmt-slot-row .cmt-slot-remove {
        display: inline-flex; align-items: center; justify-content: center;
        width: 30px; height: 30px; border-radius: 8px;
        background: #fff1f2; color: #b91c1c; border: 0; cursor: pointer;
    }
    .cmt-slot-row .cmt-slot-remove:hover { background: #fee2e2; }

    .cmt-slot-add {
        align-self: flex-start;
        display: inline-flex; align-items: center; gap: 6px;
        padding: 7px 14px;
        background: #eef2ff; color: #4338ca;
        border: 1px dashed #c7d2fe; border-radius: 8px;
        cursor: pointer; font-size: 13px; font-weight: 700;
    }
    .cmt-slot-add:hover { background: #e0e7ff; }

    .cmt-slot-empty {
        text-align: center; padding: 18px;
        color: #94a3b8; font-size: 13px;
    }

    .cmt-slot-error {
        grid-column: 2 / -2;
        margin-top: 2px;
        font-size: 12px; color: #b91c1c;
    }

    @media (max-width: 720px) {
        .cmt-slot-row {
            grid-template-columns: 28px 1fr 36px;
            grid-template-rows: auto auto;
        }
        .cmt-slot-row select { grid-column: 2 / 3; }
        .cmt-slot-row input[type="time"]:nth-of-type(1) { grid-column: 2 / 3; grid-row: 2; }
        .cmt-slot-row input[type="time"]:nth-of-type(2) { grid-column: 2 / 3; grid-row: 3; }
        .cmt-slot-row .cmt-slot-remove { grid-column: 3; grid-row: 1; }
        .cmt-slot-handle { grid-column: 1; grid-row: 1 / 4; }
    }
</style>
@endpush

@section('content')
    <x-admin.page-header
        :title="$isEdit ? __('admin.committees.edit_title', ['month' => $committee->monthLabel()]) : __('admin.committees.create_title')">
        <x-slot:actions>
            <a href="{{ route('admin.committees.index') }}" class="btn-secondary">
                {{ __('admin.committees.back_to_list') }}
            </a>
        </x-slot:actions>
    </x-admin.page-header>

    @include('admin.partials.flash')

    <div class="card form-card">
        @if (isset($errors) && $errors->any())
            <div class="cmt-errors" role="alert">
                <strong>{{ __('admin.validation.summary_title') ?? 'Please fix the following:' }}</strong>
                <ul>
                    @foreach ($errors->all() as $err)
                        <li>{{ $err }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form id="cmt-form"
              method="POST"
              action="{{ $isEdit ? route('admin.committees.update', $committee) : route('admin.committees.store') }}"
              class="cmt-form"
              novalidate>
            @csrf
            @if ($isEdit) @method('PUT') @endif

            {{-- 1. Meeting Date + Time --}}
            <div class="cmt-section-title">{{ __('admin.committees.sections.general') }}</div>
            <div class="cmt-grid">
                <div>
                    @php
                        $dateVal = old(
                            'meeting_date',
                            $committee->meeting_date instanceof \Carbon\Carbon
                                ? $committee->meeting_date->format('Y-m-d')
                                : (string) $committee->meeting_date
                        );
                    @endphp
                    <x-admin.form-input
                        type="date"
                        name="meeting_date"
                        :label="__('admin.committees.fields.meeting_date')"
                        :value="$dateVal"
                        required />
                    <p class="cmt-help">{{ __('admin.committees.help.meeting_date') }}</p>
                </div>

                <div>
                    @php
                        $timeRaw = (string) old('meeting_time', $committee->meeting_time ?? '13:00:00');
                        $timeVal = strlen($timeRaw) >= 5 ? substr($timeRaw, 0, 5) : '13:00';
                    @endphp
                    <x-admin.form-input
                        type="time"
                        name="meeting_time"
                        :label="__('admin.committees.fields.meeting_time')"
                        :value="$timeVal"
                        required />
                    <p class="cmt-help">{{ __('admin.committees.help.meeting_time') }}</p>
                </div>
            </div>

            {{-- 2. Slot manager — Alpine.js + SortableJS.
                 Each row carries startup_id + start_time + end_time. The
                 array order = slot_order (controller's prepareForValidation
                 re-stamps it on submit). end_time auto-suggests start +
                 SLOT_DEFAULT_DURATION_MINUTES on first edit but stops as
                 soon as the admin types an explicit end. --}}
            <div class="cmt-section-title">{{ __('admin.committees.sections.slots') }}</div>

            @php
                $startupsForJs = $startups->map(fn ($s) => [
                    'id'    => (int) $s->id,
                    'label' => $s->name . ($s->email ? ' — ' . $s->email : ''),
                ])->values()->all();
                $initialSlots = old('slots', $slots);
            @endphp

            <div x-data="committeeSlotManager({
                    initialSlots:      @js($initialSlots),
                    startups:          @js($startupsForJs),
                    defaultDuration:   @js(\App\Models\Committee::SLOT_DEFAULT_DURATION_MINUTES),
                    placeholderStartup:@js(__('admin.committees.placeholders.pick_startup')),
                    addLabel:          @js(__('admin.committees.actions.add_slot')),
                 })"
                 x-init="init()"
                 x-cloak>

                {{-- Default slot duration — Alpine-local control. NOT a
                     submitted field (no `name=` attribute) since the
                     duration only drives the client-side auto-suggest /
                     cascade logic. Server stores explicit start/end per
                     slot, so duration is purely a UX helper. --}}
                <div class="cmt-slot-duration">
                    <label for="cmt-slot-duration-input">{{ __('admin.committees.fields.slot_duration') }}</label>
                    <div class="cmt-slot-duration__row">
                        <input id="cmt-slot-duration-input"
                               type="number"
                               min="5" max="240" step="5"
                               x-model.number="defaultDuration"
                               @change="onDurationChange()">
                        <span class="cmt-slot-duration__unit">{{ __('admin.committees.help.minutes') }}</span>
                    </div>
                    <p class="cmt-help">{{ __('admin.committees.help.slot_duration') }}</p>
                </div>

                <div class="cmt-slots">
                    <div class="cmt-slot-list" x-ref="list">
                        <template x-for="(row, idx) in rows" :key="row.uid">
                            <div class="cmt-slot-row" :data-uid="row.uid">
                                <span class="cmt-slot-handle" data-cmt-slot-handle aria-hidden="true" title="{{ __('admin.committees.actions.drag_to_reorder') }}">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="16" y2="6"/><line x1="8" y1="12" x2="16" y2="12"/><line x1="8" y1="18" x2="16" y2="18"/></svg>
                                </span>

                                <select :name="`slots[${idx}][startup_id]`"
                                        x-model="row.startup_id"
                                        @change="onStartupChange(idx, $event)"
                                        required>
                                    <option value="">— <span x-text="placeholderStartup"></span> —</option>
                                    {{-- The list filters out startups picked in OTHER rows,
                                         so each dropdown shows only (a) THIS row's current
                                         pick + (b) startups not yet used elsewhere. The
                                         change handler additionally refuses an accidental
                                         duplicate pick and surfaces an inline alert. --}}
                                    <template x-for="s in availableStartupsFor(idx)" :key="s.id">
                                        <option :value="s.id" x-text="s.label" :selected="String(s.id) === String(row.startup_id)"></option>
                                    </template>
                                </select>

                                <input type="time"
                                       :name="`slots[${idx}][start_time]`"
                                       x-model="row.start_time"
                                       @input="onStartTimeInput(idx)"
                                       :required="row.startup_id !== '' && row.startup_id !== null">

                                <input type="time"
                                       :name="`slots[${idx}][end_time]`"
                                       x-model="row.end_time"
                                       @input="onEndTimeInput(idx)"
                                       :required="row.startup_id !== '' && row.startup_id !== null">

                                <button type="button"
                                        class="cmt-slot-remove"
                                        :aria-label="`{{ __('admin.committees.actions.remove_slot') }}`"
                                        @click="removeRow(idx)">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                                </button>
                            </div>
                        </template>

                        <div x-show="rows.length === 0" class="cmt-slot-empty">
                            {{ __('admin.committees.help.slots_empty') }}
                        </div>
                    </div>

                    <button type="button" class="cmt-slot-add" @click="addRow()">
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                        <span x-text="addLabel"></span>
                    </button>
                </div>
                <p class="cmt-help">{{ __('admin.committees.help.slots') }}</p>
            </div>

            {{-- 3. Investors --}}
            <div class="cmt-grid">
                <div class="span-full">
                    <label for="cmt-investors">{{ __('admin.committees.fields.investors') }}</label>
                    <select id="cmt-investors"
                            name="investor_ids[]"
                            class="cmt-select2"
                            multiple
                            data-placeholder="{{ __('admin.committees.placeholders.pick_investors') }}">
                        @foreach ($investors as $i)
                            <option value="{{ $i->id }}"
                                @selected(in_array($i->id, old('investor_ids', $selectedInvestorIds), true))>
                                {{-- `investors.name` was dropped 2026-06-09 — use
                                     the locale-aware `display_name` accessor that
                                     falls back through full_name_<locale> → other
                                     locale → first+last → email. --}}
                                {{ $i->display_name }}
                                @if (!empty($i->email)) — {{ $i->email }} @endif
                            </option>
                        @endforeach
                    </select>
                    <p class="cmt-help">{{ __('admin.committees.help.investors_filter') }}</p>
                </div>
            </div>

            {{-- 4. Meeting URL --}}
            <div class="cmt-grid">
                <div class="span-full">
                    <label for="cmt-meeting-url">{{ __('admin.committees.fields.meeting_url') }}</label>
                    <input id="cmt-meeting-url"
                           type="url"
                           name="meeting_url"
                           class="cmt-url-input"
                           value="{{ old('meeting_url', $committee->meeting_url) }}"
                           placeholder="{{ __('admin.committees.placeholders.meeting_url') }}"
                           maxlength="2048"
                           autocomplete="off"
                           spellcheck="false">
                    @error('meeting_url')<span class="field-error">{{ $message }}</span>@enderror
                    <p class="cmt-help">{{ __('admin.committees.help.meeting_url') }}</p>
                </div>
            </div>

            <div class="form-actions">
                <a href="{{ route('admin.committees.index') }}" class="btn-secondary">{{ __('admin.actions.cancel') }}</a>
                <button type="submit" class="btn-primary">
                    {{ $isEdit ? __('admin.actions.save') : __('admin.actions.create') }}
                </button>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
{{-- SortableJS for drag-and-drop slot reordering. CDN-loaded same as
     Alpine + Select2 — no Vite build needed. --}}
<script defer src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script>
<script>
    // ── Select2 init (jQuery already loaded by the admin layout) ─────
    document.addEventListener('DOMContentLoaded', function () {
        if (window.jQuery && jQuery.fn.select2) {
            jQuery('.cmt-select2').select2({
                width: '100%',
                placeholder: function () { return this.getAttribute('data-placeholder') || ''; },
                allowClear: true,
                closeOnSelect: false,
            });
        }
    });

    // ── Alpine slot-manager component ────────────────────────────────
    document.addEventListener('alpine:init', () => {
        Alpine.data('committeeSlotManager', (cfg) => ({
            rows: [],
            startups: cfg.startups || [],
            defaultDuration: parseInt(cfg.defaultDuration, 10) || 30,
            placeholderStartup: cfg.placeholderStartup || 'Pick a startup',
            addLabel: cfg.addLabel || 'Add slot',
            _nextUid: 1,

            init() {
                const initial = Array.isArray(cfg.initialSlots) ? cfg.initialSlots : [];
                this.rows = initial.map((r) => ({
                    uid: this._nextUid++,
                    startup_id: r.startup_id != null ? String(r.startup_id) : '',
                    start_time: r.start_time || '',
                    end_time: r.end_time || '',
                    // Rows seeded from server data are treated as
                    // explicit — the duration cascade + meeting-time
                    // sync both leave them alone. All three flags only
                    // flip true when THIS session's auto-suggest /
                    // cascade logic wrote the value.
                    endTimeIsAutoSuggested: false,
                    startTimeIsAutoSuggested: false,
                    startTimeFromMeeting: false,
                }));

                // Reactive anchor: the FIRST slot's start_time follows
                // the committee's meeting_time field. When the admin
                // changes meeting_time, we re-seed row 0 (if it was
                // anchored) and re-flow every cascaded row beneath it.
                // The input fires `input` on every nudge of a <input
                // type="time">, so we get live updates as the admin
                // types — no Save needed.
                const meetingInput = document.querySelector('input[name="meeting_time"]');
                if (meetingInput) {
                    meetingInput.addEventListener('input', () => this.onMeetingTimeChange());
                    meetingInput.addEventListener('change', () => this.onMeetingTimeChange());
                }

                this.$nextTick(() => this.bindSortable());
            },

            /** Live meeting_time read from the form's <input name="meeting_time">.
             *  Falls back to '' when the input is absent (defensive only;
             *  the form always renders it). Reading it on demand means the
             *  first slot's seed start ALWAYS matches whatever the admin
             *  has typed in the meeting time field — even after edits. */
            committeeMeetingTime() {
                const input = document.querySelector('input[name="meeting_time"]');
                return input ? String(input.value || '') : '';
            },

            /**
             * Re-flow the slot chain from the top:
             *   - Row 0's start_time, if anchored to meeting_time, gets
             *     pulled to the current meeting_time value.
             *   - Subsequent cascaded start_times get pulled to the
             *     previous row's CURRENT end_time.
             *   - Auto-suggested end_times get recomputed.
             *
             * Manually-edited values act as anchors and stay put — the
             * cascade resumes from each anchor's actual end_time onto
             * the next row. The shared body of onMeetingTimeChange and
             * onDurationChange.
             */
            reflowCascade() {
                const meetingTime = this.committeeMeetingTime();
                let prevEnd = null;
                for (let i = 0; i < this.rows.length; i++) {
                    const row = this.rows[i];
                    if (i === 0 && row.startTimeFromMeeting && meetingTime) {
                        row.start_time = meetingTime;
                    } else if (i > 0 && row.startTimeIsAutoSuggested && prevEnd) {
                        row.start_time = prevEnd;
                    }
                    if (row.start_time && row.endTimeIsAutoSuggested) {
                        row.end_time = this.addMinutes(row.start_time, this.defaultDuration);
                    }
                    prevEnd = row.end_time || prevEnd;
                }
            },

            onMeetingTimeChange() {
                this.reflowCascade();
            },

            bindSortable() {
                if (!window.Sortable) {
                    // SortableJS not loaded yet (defer attribute) — retry.
                    setTimeout(() => this.bindSortable(), 100);
                    return;
                }
                const list = this.$refs.list;
                if (!list || list._cmtSortableBound) return;
                list._cmtSortableBound = true;
                Sortable.create(list, {
                    animation: 150,
                    handle: '[data-cmt-slot-handle]',
                    ghostClass: 'sortable-ghost',
                    chosenClass: 'sortable-chosen',
                    onEnd: (evt) => {
                        if (evt.oldIndex === evt.newIndex) return;
                        const moved = this.rows.splice(evt.oldIndex, 1)[0];
                        this.rows.splice(evt.newIndex, 0, moved);
                    },
                });
            },

            addRow() {
                // Auto-cascade:
                //   - FIRST row → start_time = committee's meeting_time
                //                 (live-read from the form input so the
                //                 admin's edits to the meeting time field
                //                 always reflect here).
                //   - SUBSEQUENT rows → start_time = previous row's end_time
                //                 so the schedule fills itself as the
                //                 admin keeps clicking "+ Add slot".
                // Admin can still manually override either field; doing
                // so flips the per-row auto-suggested flags off so the
                // value sticks across future duration changes.
                const last = this.rows.length > 0 ? this.rows[this.rows.length - 1] : null;
                let seedStart;
                if (last && last.end_time) {
                    seedStart = last.end_time;
                } else if (! last) {
                    seedStart = this.committeeMeetingTime();
                } else {
                    seedStart = '';
                }
                const seedEnd = seedStart ? this.addMinutes(seedStart, this.defaultDuration) : '';
                this.rows.push({
                    uid: this._nextUid++,
                    startup_id: '',
                    start_time: seedStart,
                    end_time: seedEnd,
                    // Cascade flags:
                    //   - startTimeIsAutoSuggested  → follow-on row's
                    //     start came from previous row's end. Pulled
                    //     by the cascade re-flow on duration change.
                    //   - startTimeFromMeeting      → the FIRST row's
                    //     start came from the committee's meeting_time.
                    //     Pulled by reflowCascade() when meeting_time
                    //     changes.
                    // Editing start_time manually flips BOTH off so the
                    // value sticks across subsequent changes.
                    startTimeIsAutoSuggested: !!(last && seedStart),
                    startTimeFromMeeting:     !last && seedStart !== '',
                    endTimeIsAutoSuggested:   seedEnd !== '',
                });
            },

            removeRow(idx) {
                this.rows.splice(idx, 1);
            },

            onStartTimeInput(idx) {
                const row = this.rows[idx];
                if (!row || !row.start_time) return;
                // The admin typed in start_time — it's no longer a
                // cascade value, so it shouldn't move on subsequent
                // duration re-flows OR meeting-time changes.
                row.startTimeIsAutoSuggested = false;
                row.startTimeFromMeeting     = false;
                // Auto-suggest end_time when it is empty OR still wearing
                // the auto-suggested flag (admin hasn't manually edited).
                if (row.end_time && !row.endTimeIsAutoSuggested) return;
                row.end_time = this.addMinutes(row.start_time, this.defaultDuration);
                row.endTimeIsAutoSuggested = true;
            },

            onEndTimeInput(idx) {
                const row = this.rows[idx];
                if (!row) return;
                // Any explicit edit makes the value stick — even if the
                // admin happens to type the same string we suggested.
                row.endTimeIsAutoSuggested = false;
            },

            /**
             * Clamp the duration into a sensible range, then defer to
             * the shared cascade re-flow — same logic the meeting-time
             * sync uses, since both ultimately propagate the same chain.
             */
            onDurationChange() {
                let dur = parseInt(this.defaultDuration, 10);
                if (!isFinite(dur) || dur < 5) dur = 5;
                if (dur > 240) dur = 240;
                this.defaultDuration = dur;
                this.reflowCascade();
            },

            /**
             * Visible to the per-row dropdown: returns startups not taken
             * in OTHER rows, plus the one this row currently has selected
             * (so the field can render its own value). Picking a startup
             * already used elsewhere becomes impossible — the option is
             * filtered out before it ever lands in the menu.
             */
            availableStartupsFor(idx) {
                const usedElsewhere = new Set();
                for (let i = 0; i < this.rows.length; i++) {
                    if (i === idx) continue;
                    const sid = this.rows[i].startup_id;
                    if (sid !== '' && sid !== null && sid !== undefined) {
                        usedElsewhere.add(String(sid));
                    }
                }
                const current = String(this.rows[idx]?.startup_id ?? '');
                return this.startups.filter(s => current === String(s.id) || !usedElsewhere.has(String(s.id)));
            },

            /**
             * Defence in depth: if the admin manages to pick a startup
             * already in another row (race / scripting / browser autofill),
             * snap the value back and surface a native alert. The dropdown
             * filter normally hides duplicates, so this only ever fires
             * on a programmatic edge case.
             */
            onStartupChange(idx, ev) {
                const value = String(this.rows[idx].startup_id ?? '');
                if (value === '') return;
                for (let i = 0; i < this.rows.length; i++) {
                    if (i === idx) continue;
                    if (String(this.rows[i].startup_id) === value) {
                        const label = (this.startups.find(s => String(s.id) === value) || {}).label || value;
                        alert(@js(__('admin.committees.help.slot_duplicate_alert')).replace(':startup', label));
                        this.rows[idx].startup_id = '';
                        if (ev && ev.target) ev.target.value = '';
                        return;
                    }
                }
            },

            addMinutes(hhmm, minutes) {
                const parts = String(hhmm).split(':');
                if (parts.length < 2) return '';
                const total = (parseInt(parts[0], 10) * 60 + parseInt(parts[1], 10) + minutes) % (24 * 60);
                const h = Math.floor(total / 60);
                const m = total % 60;
                return String(h).padStart(2, '0') + ':' + String(m).padStart(2, '0');
            },
        }));
    });
</script>
@endpush