@php
    $oldContactoId = old('contacto_id', $reunion->contacto_id ?? null);
    $oldUnidadIds = old('unidades_atencion', $reunion->unidadesAtencion->pluck('id')->toArray());
    $oldFuncIds = old('funcionarios', $reunion->funcionarios->pluck('id')->toArray());

    $contactoNombre = '';
    if ($oldContactoId) {
        $c = $contactos->firstWhere('id', $oldContactoId);
        $contactoNombre = $c ? $c->user->nombre . ' ' . $c->user->apellido : '';
    }

    $unidadesById = $unidades->keyBy('id');
    $funcionariosById = $funcionarios->keyBy('id');
@endphp

<div class="row gy-4">

    {{-- SECCIÓN: PARTICIPANTES --}}
    <div class="col-12">
        <h6 class="text-primary border-bottom pb-2 mb-3">
            <i class="bi bi-people me-1"></i> Participantes
        </h6>
        <div class="row gy-3">

            {{-- UNIDADES DE ATENCIÓN (multi-chip) --}}
            <div class="col-12">
                <label class="form-label text-muted small mb-1">
                    Unidades de atención <span class="text-danger">*</span>
                </label>
                <div class="position-relative">
                    <div class="input-group">
                        <span class="input-group-text bg-white border-end-0">
                            <i class="bi bi-search text-muted"></i>
                        </span>
                        <input type="text" id="unidad_search"
                            class="form-control border-start-0 @error('unidades_atencion') is-invalid @enderror"
                            placeholder="Buscar unidad..." autocomplete="off">
                    </div>
                    @error('unidades_atencion')
                        <div class="text-danger small mt-1">{{ $message }}</div>
                    @enderror
                    <div id="unidad_dropdown" class="list-group position-absolute w-100 d-none shadow"
                        style="z-index:200; max-height:220px; overflow-y:auto; top:calc(100% + 4px); left:0;"></div>
                </div>
                <div id="unidades_chips" class="mt-2 d-flex flex-wrap gap-2">
                    @foreach ($oldUnidadIds as $uid)
                        @php $u = $unidadesById->get($uid) @endphp
                        @if ($u)
                            <span
                                class="badge bg-primary-subtle text-primary border border-primary-subtle px-3 py-2 rounded-pill fw-normal d-inline-flex align-items-center gap-2"
                                data-id="{{ $u->id }}">
                                <i class="bi bi-building"></i> {{ $u->nombre_comercial }}
                                <button type="button" class="btn-close ms-1" style="font-size:.55rem;"
                                    aria-label="Quitar"></button>
                            </span>
                            <input type="hidden" name="unidades_atencion[]"
                                id="_hidden_unidades_atencion[]_{{ $u->id }}" value="{{ $u->id }}">
                        @endif
                    @endforeach
                </div>
            </div>

            {{-- CONTACTO (single-chip) --}}
            <div class="col-12">
                <label class="form-label text-muted small mb-1">
                    Contacto principal <span class="text-danger">*</span>
                </label>
                <input type="hidden" name="contacto_id" id="contacto_hidden" value="{{ $oldContactoId }}">
                <div class="position-relative">
                    <div class="input-group">
                        <span class="input-group-text bg-white border-end-0">
                            <i class="bi bi-search text-muted"></i>
                        </span>
                        <input type="text" id="contacto_search"
                            class="form-control border-start-0 @error('contacto_id') is-invalid @enderror"
                            placeholder="Buscar contacto..." autocomplete="off"
                            value="{{ $oldContactoId ? $contactoNombre : '' }}">
                    </div>
                    @error('contacto_id')
                        <div class="text-danger small mt-1">{{ $message }}</div>
                    @enderror
                    <div id="contacto_dropdown" class="list-group position-absolute w-100 d-none shadow"
                        style="z-index:200; max-height:220px; overflow-y:auto; top:calc(100% + 4px); left:0;"></div>
                </div>
                <div id="contacto_chip" class="mt-2 {{ $oldContactoId ? '' : 'd-none' }}">
                    <span
                        class="badge bg-primary-subtle text-primary border border-primary-subtle px-3 py-2 rounded-pill fw-normal d-inline-flex align-items-center gap-2">
                        <i class="bi bi-person"></i>
                        <span id="contacto_chip_name">{{ $contactoNombre }}</span>
                        <button type="button" id="contacto_clear" class="btn-close ms-1" style="font-size:.55rem;"
                            aria-label="Quitar"></button>
                    </span>
                </div>
            </div>

            {{-- FUNCIONARIOS (multi-chip) --}}
            <div class="col-12">
                <label class="form-label text-muted small mb-1">
                    Funcionarios asignados <span class="text-danger">*</span>
                </label>
                <div class="position-relative">
                    <div class="input-group">
                        <span class="input-group-text bg-white border-end-0">
                            <i class="bi bi-search text-muted"></i>
                        </span>
                        <input type="text" id="funcionario_search"
                            class="form-control border-start-0 @error('funcionarios') is-invalid @enderror"
                            placeholder="Buscar funcionario..." autocomplete="off">
                    </div>
                    @error('funcionarios')
                        <div class="text-danger small mt-1">{{ $message }}</div>
                    @enderror
                    <div id="funcionario_dropdown" class="list-group position-absolute w-100 d-none shadow"
                        style="z-index:200; max-height:220px; overflow-y:auto; top:calc(100% + 4px); left:0;"></div>
                </div>
                <div id="funcionarios_chips" class="mt-2 d-flex flex-wrap gap-2">
                    @foreach ($oldFuncIds as $fid)
                        @php $f = $funcionariosById->get($fid) @endphp
                        @if ($f)
                            <span
                                class="badge bg-primary-subtle text-primary border border-primary-subtle px-3 py-2 rounded-pill fw-normal d-inline-flex align-items-center gap-2"
                                data-id="{{ $f->id }}">
                                <i class="bi bi-person-badge"></i> {{ $f->user->nombre }} {{ $f->user->apellido }}
                                <button type="button" class="btn-close ms-1" style="font-size:.55rem;"
                                    aria-label="Quitar"></button>
                            </span>
                            <input type="hidden" name="funcionarios[]" id="_hidden_funcionarios[]_{{ $f->id }}"
                                value="{{ $f->id }}">
                        @endif
                    @endforeach
                </div>
            </div>

        </div>
    </div>

    {{-- SECCIÓN: LOGÍSTICA --}}
    <div class="col-12">
        <h6 class="text-primary border-bottom pb-2 mb-3">
            <i class="bi bi-calendar-event me-1"></i> Logística y Tiempo
        </h6>
        <div class="row gy-3">
            {{-- FECHA --}}
            <div class="col-md-4">
                <label for="fecha_reunion" class="form-label text-muted small mb-1">Fecha <span
                        class="text-danger">*</span></label>
                <input type="date" name="fecha_reunion" id="fecha_reunion"
                    class="form-control @error('fecha_reunion') is-invalid @enderror"
                    value="{{ old('fecha_reunion', isset($reunion->fecha_reunion) && $reunion->fecha_reunion instanceof \Carbon\Carbon ? $reunion->fecha_reunion->format('Y-m-d') : (isset($reunion->fecha_reunion) ? $reunion->fecha_reunion : '')) }}"
                    min="{{ now()->toDateString() }}" max="{{ now()->addYears(15)->format('Y-m-d') }}" required>
                @error('fecha_reunion')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            @php
                $slots = [];
                for ($h = 9; $h <= 16; $h++) {
                    foreach ([0, 15, 30, 45] as $m) {
                        if ($h === 16 && $m > 0) {
                            break;
                        }
                        $slots[] = sprintf('%02d:%02d', $h, $m);
                    }
                }
                $oldHoraInicio = old(
                    'hora_inicio',
                    $reunion->hora_inicio ? \Carbon\Carbon::parse($reunion->hora_inicio)->format('H:i') : '',
                );
                $oldHoraFin = old(
                    'hora_fin',
                    $reunion->hora_fin ? \Carbon\Carbon::parse($reunion->hora_fin)->format('H:i') : '',
                );
            @endphp

            {{-- HORA INICIO --}}
            <div class="col-6 col-md-4">
                <label class="form-label text-muted small mb-1">
                    Hora inicio <span class="text-danger">*</span>
                </label>
                <input type="hidden" name="hora_inicio" id="hora_inicio_hidden" value="{{ $oldHoraInicio }}">
                <div class="position-relative">
                    <div id="hora_inicio_trigger"
                        class="form-control d-flex align-items-center justify-content-between @error('hora_inicio') is-invalid @enderror"
                        style="cursor:pointer; user-select:none;">
                        <span id="hora_inicio_label" class="{{ $oldHoraInicio ? '' : 'text-muted' }}">
                            {{ $oldHoraInicio ?: '--:--' }}
                        </span>
                        <i class="bi bi-clock text-muted small"></i>
                    </div>
                    @error('hora_inicio')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                    <div id="hora_inicio_dropdown" class="list-group position-absolute w-100 d-none shadow"
                        style="z-index:300; max-height:200px; overflow-y:auto; top:calc(100% + 4px); left:0;">
                        @foreach ($slots as $slot)
                            <button type="button" class="list-group-item list-group-item-action hora-slot"
                                data-value="{{ $slot }}">{{ $slot }}</button>
                        @endforeach
                    </div>
                </div>
            </div>

            {{-- HORA FIN --}}
            <div class="col-6 col-md-4">
                <label class="form-label text-muted small mb-1">
                    Hora fin <span class="text-danger">*</span>
                </label>
                <input type="hidden" name="hora_fin" id="hora_fin_hidden" value="{{ $oldHoraFin }}">
                <div class="position-relative">
                    <div id="hora_fin_trigger"
                        class="form-control d-flex align-items-center justify-content-between @error('hora_fin') is-invalid @enderror"
                        style="cursor:pointer; user-select:none;">
                        <span id="hora_fin_label" class="{{ $oldHoraFin ? '' : 'text-muted' }}">
                            {{ $oldHoraFin ?: '--:--' }}
                        </span>
                        <i class="bi bi-clock text-muted small"></i>
                    </div>
                    <div id="hora_fin_error" class="text-danger small mt-1 d-none">
                        La hora de fin debe ser posterior a la hora de inicio.
                    </div>
                    @error('hora_fin')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                    <div id="hora_fin_dropdown" class="list-group position-absolute w-100 d-none shadow"
                        style="z-index:300; max-height:200px; overflow-y:auto; top:calc(100% + 4px); left:0;">
                        @foreach ($slots as $slot)
                            <button type="button" class="list-group-item list-group-item-action hora-slot"
                                data-value="{{ $slot }}">{{ $slot }}</button>
                        @endforeach
                    </div>
                </div>
            </div>

            {{-- MODALIDAD / LUGAR --}}
            <div class="col-md-4">
                <label for="modalidad" class="form-label text-muted small mb-1">Modalidad <span
                        class="text-danger">*</span></label>
                <select name="modalidad" id="modalidad" class="form-select @error('modalidad') is-invalid @enderror"
                    required>
                    <option value="">Seleccione modalidad</option>
                    <option value="Presencial"
                        {{ old('modalidad', $reunion->modalidad ?? '') == 'Presencial' ? 'selected' : '' }}>
                        Presencial
                    </option>
                    <option value="Videollamada"
                        {{ old('modalidad', $reunion->modalidad ?? '') == 'Videollamada' ? 'selected' : '' }}>
                        Videollamada
                    </option>
                    <option value="Telefonica"
                        {{ old('modalidad', $reunion->modalidad ?? '') == 'Telefonica' ? 'selected' : '' }}>
                        Telefónica
                    </option>
                    <option value="Whatsapp"
                        {{ old('modalidad', $reunion->modalidad ?? '') == 'Whatsapp' ? 'selected' : '' }}>
                        WhatsApp
                    </option>
                </select>
                @error('modalidad')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="col-md-8">
                <label for="lugar" class="form-label text-muted small mb-1">Lugar / Link <span
                        class="text-danger">*</span></label>
                <input type="text" name="lugar" id="lugar"
                    class="form-control @error('lugar') is-invalid @enderror"
                    value="{{ old('lugar', $reunion->lugar ?? '') }}"
                    placeholder="Dirección física o enlace de reunión" required>
                @error('lugar')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
        </div>
    </div>

    {{-- SECCIÓN: ACCIONES VINCULADAS --}}
    <div class="col-12">
        <h6 class="text-primary border-bottom pb-2 mb-3">
            <i class="bi bi-list-task me-1"></i> Acciones vinculadas
        </h6>
        @php
            $selectedAccionIds = old('accion_ids', $reunion->acciones->pluck('id')->toArray());
            $unidadIds = $reunion->unidadesAtencion->pluck('id')->toArray();
        @endphp
        @include('reuniones.partials.buscador-acciones', [
            'acciones' => $acciones,
            'selectedIds' => $selectedAccionIds,
            'startDisabled' => false,
        ])
    </div>

    {{-- SECCIÓN: DETALLES --}}
    <div class="col-12">
        <h6 class="text-primary border-bottom pb-2 mb-3">
            <i class="bi bi-info-circle me-1"></i> Detalles de la Reunión
        </h6>
        <div class="row gy-3">
            {{-- TIPO / ESTADO --}}
            <div class="col-md-6">
                <label for="tipo_reunion" class="form-label text-muted small mb-1">Tipo de reunión <span
                        class="text-danger">*</span></label>
                <select name="tipo_reunion" id="tipo_reunion"
                    class="form-select @error('tipo_reunion') is-invalid @enderror" required>
                    <option value="">Seleccione tipo</option>
                    <option value="Primera entrevista"
                        {{ old('tipo_reunion', $reunion->tipo_reunion ?? '') == 'Primera entrevista' ? 'selected' : '' }}>
                        Primera entrevista
                    </option>
                    <option value="Asesoría"
                        {{ old('tipo_reunion', $reunion->tipo_reunion ?? '') == 'Asesoría' ? 'selected' : '' }}>
                        Asesoría
                    </option>
                    <option value="Diagnóstico"
                        {{ old('tipo_reunion', $reunion->tipo_reunion ?? '') == 'Diagnóstico' ? 'selected' : '' }}>
                        Diagnóstico
                    </option>
                    <option value="Seguimiento"
                        {{ old('tipo_reunion', $reunion->tipo_reunion ?? '') == 'Seguimiento' ? 'selected' : '' }}>
                        Seguimiento
                    </option>
                    <option value="Cierre"
                        {{ old('tipo_reunion', $reunion->tipo_reunion ?? '') == 'Cierre' ? 'selected' : '' }}>
                        Cierre
                    </option>
                </select>
                @error('tipo_reunion')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="col-md-6">
                <label for="estado" class="form-label text-muted small mb-1">Estado <span
                        class="text-danger">*</span></label>
                <select name="estado" id="estado" class="form-select @error('estado') is-invalid @enderror"
                    required>
                    <option value="Agendada"
                        {{ old('estado', $reunion->estado ?? '') == 'Agendada' ? 'selected' : '' }}>
                        Agendada
                    </option>
                    <option value="Realizada"
                        {{ old('estado', $reunion->estado ?? '') == 'Realizada' ? 'selected' : '' }}>
                        Realizada
                    </option>
                    <option value="Cancelada"
                        {{ old('estado', $reunion->estado ?? '') == 'Cancelada' ? 'selected' : '' }}>
                        Cancelada
                    </option>
                    <option value="Reprogramada"
                        {{ old('estado', $reunion->estado ?? '') == 'Reprogramada' ? 'selected' : '' }}>
                        Reprogramada
                    </option>
                </select>
                @error('estado')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            {{-- TEMÁTICAS (multi-chip) --}}
            <div class="col-12">
                <label class="form-label text-muted small mb-1">
                    Temáticas <span class="text-danger">*</span>
                </label>
                <div class="position-relative">
                    <div class="input-group">
                        <span class="input-group-text bg-white border-end-0">
                            <i class="bi bi-search text-muted"></i>
                        </span>
                        <input type="text" id="tematica_search"
                            class="form-control border-start-0 @error('tematicas') is-invalid @enderror"
                            placeholder="Buscar temática..." autocomplete="off">
                    </div>
                    @error('tematicas')
                        <div class="text-danger small mt-1">{{ $message }}</div>
                    @enderror
                    <div id="tematica_dropdown" class="list-group position-absolute w-100 d-none shadow"
                        style="z-index:200; max-height:220px; overflow-y:auto; top:calc(100% + 4px); left:0;"></div>
                </div>
                <div id="tematicas_chips" class="mt-2 d-flex flex-wrap gap-2">
                    @php
                        $oldTematicas = old('tematicas', $reunion->tematicas ?? []);
                    @endphp
                    @foreach ($oldTematicas as $tematicaValue)
                        <span
                            class="badge bg-primary-subtle text-primary border border-primary-subtle px-3 py-2 rounded-pill fw-normal d-inline-flex align-items-center gap-2"
                            data-value="{{ $tematicaValue }}">
                            <i class="bi bi-tag"></i> {{ $tematicaValue }}
                            <button type="button" class="btn-close ms-1" style="font-size:.55rem;"
                                aria-label="Quitar"></button>
                        </span>
                        <input type="hidden" name="tematicas[]"
                            id="_hidden_tematicas[]_{{ \Illuminate\Support\Str::slug($tematicaValue) }}" value="{{ $tematicaValue }}">
                    @endforeach
                </div>
            </div>

            {{-- OBSERVACIONES --}}
            <div class="col-12">
                <label for="observaciones" class="form-label text-muted small mb-1">Observaciones <span
                        class="text-danger">*</span></label>
                <textarea name="observaciones" id="observaciones" class="form-control @error('observaciones') is-invalid @enderror"
                    maxlength="1000" rows="3" required>{{ old('observaciones', $reunion->observaciones ?? '') }}</textarea>
                <div class="form-text">Máximo 1000 caracteres. Evite caracteres especiales o emojis.</div>
                @error('observaciones')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            {{-- OBSERVACIONES INTERNAS (solo para funcionarios) --}}
            @if(auth()->user()->funcionario)
                <div class="col-12">
                    <label for="observaciones_internas" class="form-label text-muted small mb-1">
                        <i class="bi bi-shield-lock me-1"></i> Devolución interna (solo visible para funcionarios)
                        @if(request('iniciar') === '1')
                            <span class="text-danger">*</span>
                        @endif
                    </label>
                    <textarea name="observaciones_internas" id="observaciones_internas"
                        class="form-control @error('observaciones_internas') is-invalid @enderror"
                        maxlength="3000" rows="4" {{ request('iniciar') === '1' ? 'required' : '' }}>{{ old('observaciones_internas', $reunion->observaciones_internas ?? '') }}</textarea>
                    <div class="form-text">
                        @if(request('iniciar') === '1')
                            <strong>Obligatorio</strong> al iniciar la reunión.
                        @endif
                        Máximo 3000 caracteres. Este campo no es visible para contactos.
                    </div>
                    @error('observaciones_internas')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            @endif
        </div>
    </div>
</div>

@php
    $contactosJson2 = $contactos->map(
        fn($c) => [
            'id' => $c->id,
            'nombre' => $c->user->nombre . ' ' . $c->user->apellido,
            'email' => $c->user->email,
        ],
    );
    $unidadesJson2 = $unidades->map(
        fn($u) => [
            'id' => $u->id,
            'nombre' => $u->nombre_comercial,
        ],
    );
    $funcionariosJson2 = $funcionarios->map(
        fn($f) => [
            'id' => $f->id,
            'nombre' => $f->user->nombre . ' ' . $f->user->apellido,
        ],
    );
    $accionesJson = $acciones->map(
        fn($a) => [
            'id' => $a->id,
            'nombre' => $a->detalle_accion,
            'unidades' => $a->planes->pluck('unidad_atencion_id')->filter()->unique()->values()->all(),
        ],
    );
    $oldContactoId2 = (int) old('contacto_id', $reunion->contacto_id ?? 0);
    $oldUnidadIds2 = array_map('intval', old('unidades_atencion', $reunion->unidadesAtencion->pluck('id')->toArray()));
    $oldFuncIds2 = array_map('intval', old('funcionarios', $reunion->funcionarios->pluck('id')->toArray()));
    $selectedAccionIdsJson = array_map('intval', old('accion_ids', $reunion->acciones->pluck('id')->toArray()));
    $tematicasData = collect(\App\Enums\TematicaReunionEnum::cases())->map(fn($t) => ['value' => $t->value, 'label' => $t->value]);
    $oldTematicasArray = old('tematicas', $reunion->tematicas ?? []);
@endphp

@push('scripts')
    <script>
        (function() {
            @include('reuniones.partials.buscadores-js')

            // ─── Datos desde el servidor ──────────────────────────────────────
            const contactosData = @json($contactosJson2);
            const unidadesData = @json($unidadesJson2);
            const funcionariosData = @json($funcionariosJson2);
            const accionesData = @json($accionesJson);
            const tematicasData = @json($tematicasData);
            const preselUnidades = @json($oldUnidadIds2);
            const preselFuncs = @json($oldFuncIds2);
            const preselContacto = {{ $oldContactoId2 }};
            const preselAcciones = @json($selectedAccionIdsJson);
            const preselTematicas = @json($oldTematicasArray);

            // ─── Buscador: Unidades (multi) ───────────────────────────────────
            const unidadesBuscador = makeMultiBuscador({
                searchEl: document.getElementById('unidad_search'),
                dropdownEl: document.getElementById('unidad_dropdown'),
                chipsEl: document.getElementById('unidades_chips'),
                data: unidadesData,
                inputName: 'unidades_atencion[]',
                labelFn: u => u.nombre,
                iconClass: 'bi bi-building',
            });

            // ─── Buscador: Contacto (single) ──────────────────────────────────
            const contactoBuscador = makeSingleBuscador({
                searchEl: document.getElementById('contacto_search'),
                dropdownEl: document.getElementById('contacto_dropdown'),
                hiddenEl: document.getElementById('contacto_hidden'),
                chipEl: document.getElementById('contacto_chip'),
                chipNameEl: document.getElementById('contacto_chip_name'),
                clearEl: document.getElementById('contacto_clear'),
                data: contactosData,
                labelFn: c => `${c.nombre} <span class="text-muted small">(${c.email})</span>`,
                iconClass: 'bi bi-person',
            });

            // ─── Buscador: Funcionarios (multi) ───────────────────────────────
            const funcionariosBuscador = makeMultiBuscador({
                searchEl: document.getElementById('funcionario_search'),
                dropdownEl: document.getElementById('funcionario_dropdown'),
                chipsEl: document.getElementById('funcionarios_chips'),
                data: funcionariosData,
                inputName: 'funcionarios[]',
                labelFn: f => f.nombre,
                iconClass: 'bi bi-person-badge',
            });

            // ─── Buscador: Acciones (multi) ───────────────────────────────────
            const accionesBuscador = makeMultiBuscador({
                searchEl: document.getElementById('accion_search'),
                dropdownEl: document.getElementById('accion_dropdown'),
                chipsEl: document.getElementById('acciones_chips'),
                sinResultadosEl: document.getElementById('accion_sin_resultados'),
                data: accionesData,
                inputName: 'accion_ids[]',
                labelFn: a => a.nombre,
                iconClass: 'bi bi-list-task',
            });

            // Conectar btn-close de chips pre-renderizados por el partial de acciones
            document.getElementById('acciones_chips').querySelectorAll('[data-id]').forEach(chip => {
                const id = chip.dataset.id;
                chip.querySelector('.btn-close')?.addEventListener('click', () => {
                    document.getElementById(`_hidden_accion_ids[]_${id}`)?.remove();
                    chip.remove();
                });
            });

            // ─── Buscador: Temáticas (multi) ──────────────────────────────────
            const tematicasBuscador = makeMultiBuscador({
                searchEl: document.getElementById('tematica_search'),
                dropdownEl: document.getElementById('tematica_dropdown'),
                chipsEl: document.getElementById('tematicas_chips'),
                data: tematicasData,
                inputName: 'tematicas[]',
                labelFn: t => t.label,
                iconClass: 'bi bi-tag',
                idField: 'value',
                nameField: 'label',
            });

            // Conectar btn-close de chips pre-renderizados de temáticas
            document.getElementById('tematicas_chips').querySelectorAll('[data-value]').forEach(chip => {
                const value = chip.dataset.value;
                chip.querySelector('.btn-close')?.addEventListener('click', () => {
                    const slug = value.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '');
                    document.getElementById(`_hidden_tematicas[]_${slug}`)?.remove();
                    chip.remove();
                });
            });

            // ─── Dropdowns de hora ────────────────────────────────────────────
            const horaInicioHidden = document.getElementById('hora_inicio_hidden');
            const horaFinHidden = document.getElementById('hora_fin_hidden');
            const horaFinLabel = document.getElementById('hora_fin_label');
            const horaFinError = document.getElementById('hora_fin_error');
            const horaFinDropdown = document.getElementById('hora_fin_dropdown');

            function filtrarSlotsFin() {
                const inicio = horaInicioHidden.value;
                horaFinDropdown.querySelectorAll('.hora-slot').forEach(btn =>
                    btn.classList.toggle('d-none', !!inicio && btn.dataset.value <= inicio)
                );
            }

            setupHoraDropdown('hora_inicio_trigger', 'hora_inicio_dropdown', 'hora_inicio_hidden', 'hora_inicio_label',
                () => {
                    if (horaFinHidden.value && horaFinHidden.value <= horaInicioHidden.value) {
                        horaFinHidden.value = '';
                        horaFinLabel.textContent = '--:--';
                        horaFinLabel.classList.add('text-muted');
                        horaFinError.classList.add('d-none');
                    }
                    filtrarSlotsFin();
                });
            setupHoraDropdown('hora_fin_trigger', 'hora_fin_dropdown', 'hora_fin_hidden', 'hora_fin_label');
            filtrarSlotsFin();

            // ─── Cierre global de dropdowns ───────────────────────────────────
            const _dropdowns = ['unidad_dropdown', 'contacto_dropdown', 'funcionario_dropdown',
                'accion_dropdown', 'tematica_dropdown', 'hora_inicio_dropdown', 'hora_fin_dropdown'
            ];
            const _triggers = ['unidad_search', 'contacto_search', 'funcionario_search',
                'accion_search', 'tematica_search', 'hora_inicio_trigger', 'hora_fin_trigger'
            ];
            document.addEventListener('click', e => {
                _dropdowns.forEach((ddId, i) => {
                    const dd = document.getElementById(ddId);
                    const trigger = document.getElementById(_triggers[i]);
                    if (dd && !dd.contains(e.target) && !trigger?.contains(e.target) && e.target !==
                        trigger) {
                        dd.classList.add('d-none');
                    }
                });
            });

            // ─── Prefill inicial ──────────────────────────────────────────────
            // Unidades y funcionarios: chips ya renderizados en PHP, solo registrar en el Map
            // Agregamos los que no fueron pre-renderizados (por si old() difiere)
            preselUnidades.forEach(id => {
                if (!document.getElementById(`_hidden_unidades_atencion[]_${id}`)) {
                    unidadesBuscador.select(id);
                }
            });
            preselFuncs.forEach(id => {
                if (!document.getElementById(`_hidden_funcionarios[]_${id}`)) {
                    funcionariosBuscador.select(id);
                }
            });
            if (preselContacto) contactoBuscador.select(preselContacto);
            preselAcciones.forEach(id => {
                if (!document.getElementById(`_hidden_accion_ids[]_${id}`)) {
                    accionesBuscador.select(id);
                }
            });
            preselTematicas.forEach(value => {
                const slug = value.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '');
                if (!document.getElementById(`_hidden_tematicas[]_${slug}`)) {
                    tematicasBuscador.select(value);
                }
            });

        })();
    </script>
@endpush