@php
    $prefill = $prefill ?? [];
    $prefillContactoId = $prefill['contacto_id'] ?? null;
    $prefillUnidades = $prefill['unidades_atencion'] ?? [];
    $prefillFuncionarios = $prefill['funcionarios'] ?? [];
    $prefillTematicas = $prefill['tematicas'] ?? [];
    $prefillObservaciones = $prefill['observaciones'] ?? '';

    // Resolver valores iniciales para unidad y contacto
    $prefillUnidadId = $prefillUnidades[0] ?? null;
    $oldUnidadId = old('unidades_atencion.0', $prefillUnidadId);
    $oldUnidadNombre = '';
    if ($oldUnidadId) {
        $found = $unidades->firstWhere('id', $oldUnidadId);
        $oldUnidadNombre = $found?->nombre_comercial ?? '';
    }
    $oldContactoId = old('contacto_id', $prefillContactoId);
    $prefillAccionId = isset($accionId) ? (int) $accionId : null;
    $oldAccionIds = array_map('intval', old('accion_ids', $prefillAccionId ? [$prefillAccionId] : []));

    // Slots de hora (09:00 – 16:00, cada 15 min)
    $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') ? \Carbon\Carbon::parse(old('hora_inicio'))->format('H:i') : '';
    $oldHoraFin = old('hora_fin') ? \Carbon\Carbon::parse(old('hora_fin'))->format('H:i') : '';
@endphp

{{-- Indicadores de pasos --}}
<div class="d-flex align-items-center gap-3 mb-4">
    <div class="d-flex align-items-center gap-2">
        <span class="badge rounded-pill bg-primary text-white step-pill" data-step="1"
            style="width:28px;height:28px;line-height:18px;font-size:.8rem;">1</span>
        <span class="small fw-semibold step-label-text" data-step-label="1">Participantes</span>
    </div>
    <div class="text-muted small">—</div>
    <div class="d-flex align-items-center gap-2">
        <span class="badge rounded-pill bg-light text-dark border step-pill" data-step="2"
            style="width:28px;height:28px;line-height:18px;font-size:.8rem;">2</span>
        <span class="small text-muted step-label-text" data-step-label="2">Logística</span>
    </div>
    <div class="text-muted small">—</div>
    <div class="d-flex align-items-center gap-2">
        <span class="badge rounded-pill bg-light text-dark border step-pill" data-step="3"
            style="width:28px;height:28px;line-height:18px;font-size:.8rem;">3</span>
        <span class="small text-muted step-label-text" data-step-label="3">Detalles</span>
    </div>
</div>

<hr class="mb-4">

{{-- PASO 1: Participantes --}}
<div class="step-body" data-step-body="1">
    <h6 class="text-primary border-bottom pb-2 mb-3">
        <i class="bi bi-people me-1"></i> Participantes
    </h6>

    <div class="row gy-4">

        {{-- Unidad de atención --}}
        <div class="col-12">
            <label for="unidad_search" class="form-label text-muted small mb-1">
                Unidad de atención <span class="text-danger">*</span>
            </label>
            <input type="hidden" name="unidades_atencion[]" id="unidad_hidden" value="{{ $oldUnidadId }}">
            <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 por nombre de unidad..." autocomplete="off" value="{{ $oldUnidadNombre }}">
                </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="unidad_chip" class="mt-2 {{ $oldUnidadId ? '' : '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-building"></i>
                    <span id="unidad_chip_name">{{ $oldUnidadNombre }}</span>
                    <button type="button" id="unidad_clear" class="btn-close ms-1" style="font-size:.55rem;"
                        aria-label="Quitar"></button>
                </span>
            </div>
        </div>

        {{-- Acciones vinculadas --}}
        <div class="col-12">
            @include('reuniones.partials.buscador-acciones', [
                'acciones' => $acciones,
                'selectedIds' => $oldAccionIds,
                'startDisabled' => !$oldUnidadId,
            ])
        </div>

        {{-- Contacto --}}
        <div class="col-12" id="contacto_section">
            <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="">
                </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 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"></span>
                    <button type="button" id="contacto_clear" class="btn-close ms-1" style="font-size:.55rem;"
                        aria-label="Quitar"></button>
                </span>
            </div>
            <div id="contacto_sin_resultados" class="text-muted small mt-1 d-none">
                No hay contactos asociados a esta unidad.
            </div>
        </div>

        {{-- Funcionarios --}}
        <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"></div>
        </div>

    </div>
</div>

{{-- PASO 2: Logística --}}
<div class="step-body d-none" data-step-body="2">
    <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-12 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') }}"
                min="{{ now()->toDateString() }}" max="{{ now()->addYears(15)->format('Y-m-d') }}" required>
            <div id="fecha_fin_semana_error" class="text-danger small mt-1 d-none">
                Solo se pueden agendar reuniones de lunes a viernes.
            </div>
            <div id="fecha_rango_error" class="text-danger small mt-1 d-none">
                La fecha de reunión no puede superar 15 años desde la fecha actual.
            </div>
            @error('fecha_reunion')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        {{-- Hora inicio (custom dropdown) --}}
        <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-target="hora_inicio" data-value="{{ $slot }}">{{ $slot }}</button>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- Hora fin (custom dropdown) --}}
        <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-target="hora_fin" data-value="{{ $slot }}">{{ $slot }}</button>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- Modalidad --}}
        <div class="col-12 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') == 'Presencial' ? 'selected' : '' }}>Presencial
                </option>
                <option value="Videollamada" {{ old('modalidad') == 'Videollamada' ? 'selected' : '' }}>Videollamada
                </option>
                <option value="Telefonica" {{ old('modalidad') == 'Telefonica' ? 'selected' : '' }}>Telefónica
                </option>
                <option value="Whatsapp" {{ old('modalidad') == 'Whatsapp' ? 'selected' : '' }}>WhatsApp</option>
            </select>
            @error('modalidad')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        {{-- Lugar --}}
        <div class="col-12 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') }}"
                placeholder="Dirección física o enlace de reunión" maxlength="500" required>
            @error('lugar')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>
    </div>
</div>

{{-- PASO 3: Detalles --}}
<div class="step-body d-none" data-step-body="3">
    <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">
        <div class="col-12 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') == 'Primera entrevista' ? 'selected' : '' }}>Primera entrevista</option>
                <option value="Asesoría" {{ old('tipo_reunion') == 'Asesoría' ? 'selected' : '' }}>Asesoría
                </option>
                <option value="Diagnóstico" {{ old('tipo_reunion') == 'Diagnóstico' ? 'selected' : '' }}>
                    Diagnóstico</option>
                <option value="Seguimiento" {{ old('tipo_reunion') == 'Seguimiento' ? 'selected' : '' }}>
                    Seguimiento</option>
                <option value="Cierre" {{ old('tipo_reunion') == 'Cierre' ? 'selected' : '' }}>Cierre
                </option>
            </select>
            @error('tipo_reunion')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="col-12 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', 'Agendada') == 'Agendada' ? 'selected' : '' }}>Agendada
                </option>
                <option value="Realizada" {{ old('estado') == 'Realizada' ? 'selected' : '' }}>Realizada</option>
                <option value="Cancelada" {{ old('estado') == 'Cancelada' ? 'selected' : '' }}>Cancelada</option>
                <option value="Reprogramada" {{ old('estado') == 'Reprogramada' ? 'selected' : '' }}>Reprogramada
                </option>
            </select>
            @error('estado')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <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_paso"
                        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_paso" 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_paso" class="mt-2 d-flex flex-wrap gap-2">
                @php
                    $oldTematicasPaso = old('tematicas', $prefillTematicas);
                @endphp
                @foreach ($oldTematicasPaso 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_paso[]_{{ \Illuminate\Support\Str::slug($tematicaValue) }}" value="{{ $tematicaValue }}">
                @endforeach
            </div>
        </div>

        <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', $prefillObservaciones) }}</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>
    </div>
</div>

{{-- Navegación del wizard --}}
<div class="pt-4 mt-2 border-top d-flex justify-content-between align-items-center">
    <button type="button" class="btn btn-outline-secondary rounded-pill" id="btnPrev" disabled>
        <i class="bi bi-chevron-left"></i> Anterior
    </button>
    <button type="button" class="btn btn-primary rounded-pill" id="btnNext">
        Siguiente <i class="bi bi-chevron-right"></i>
    </button>
    <button type="submit" class="btn btn-dark rounded-pill d-none" id="btnSubmit">
        <i class="bi bi-check-lg me-1"></i> Guardar reunión
    </button>
</div>

@php
    $unidadesJson = $unidades->map(function ($u) {
        return ['id' => $u->id, 'nombre' => $u->nombre_comercial];
    });
    $contactosJson = $contactos->map(function ($c) {
        return [
            'id' => $c->id,
            'nombre' => $c->user->nombre . ' ' . $c->user->apellido,
            'email' => $c->user->email,
            'unidades' => $c->unidadesAtencion->pluck('id')->values()->all(),
        ];
    });
    $funcionariosJson = $funcionarios->map(function ($f) {
        return ['id' => $f->id, 'nombre' => $f->user->nombre . ' ' . $f->user->apellido];
    });
    $prefillFuncsJson = array_map('intval', old('funcionarios', $prefillFuncionarios));
    $prefillContactoJson = (int) $oldContactoId;
    $accionesJson = $acciones->map(function ($a) {
        return [
            'id' => $a->id,
            'nombre' => $a->detalle_accion,
            'unidades' => $a->planes->pluck('unidad_atencion_id')->filter()->unique()->values()->all(),
        ];
    });
    $prefillAccionesJson = $oldAccionIds;

    $tieneErroresPaso2 =
        $errors->has('fecha_reunion') ||
        $errors->has('hora_inicio') ||
        $errors->has('hora_fin') ||
        $errors->has('modalidad') ||
        $errors->has('lugar');

    $tieneErroresPaso3 =
        $errors->has('tipo_reunion') ||
        $errors->has('estado') ||
        $errors->has('tematicas') ||
        $errors->has('observaciones');

    $wizardInitialStep = 1;
    if ($tieneErroresPaso3) {
        $wizardInitialStep = 3;
    } elseif ($tieneErroresPaso2) {
        $wizardInitialStep = 2;
    }
@endphp

@push('scripts')
    <script>
        (function() {

            const unidades = @json($unidadesJson);
            const contactos = @json($contactosJson);
            const funcionariosData = @json($funcionariosJson);
            const accionesData = @json($accionesJson);
            const tematicasData = @json(collect(\App\Enums\TematicaReunionEnum::cases())->map(fn($t) => ['value' => $t->value, 'label' => $t->value]));
            const prefillFuncs = @json($prefillFuncsJson);
            const prefillAcciones = @json($prefillAccionesJson);
            const prefillContactoId = {{ $prefillContactoJson }};
            const prefillTematicasPaso = @json(old('tematicas', $prefillTematicas));


            const totalSteps = 3;
            let current = {{ $wizardInitialStep }};
            const pills = document.querySelectorAll('.step-pill');
            const stepLabels = document.querySelectorAll('[data-step-label]');
            const bodies = document.querySelectorAll('[data-step-body]');
            const btnPrev = document.getElementById('btnPrev');
            const btnNext = document.getElementById('btnNext');
            const btnSubmit = document.getElementById('btnSubmit');

            function renderWizard() {
                document.querySelectorAll('.step-pill').forEach(p => {
                    const s = parseInt(p.dataset.step);
                    const active = s === current,
                        done = s < current;
                    p.classList.toggle('bg-primary', active);
                    p.classList.toggle('text-white', active);
                    p.classList.toggle('bg-success', done);
                    p.classList.toggle('bg-light', !active && !done);
                    p.classList.toggle('text-dark', !active && !done);
                    p.innerHTML = done ? '<i class="bi bi-check-lg"></i>' : s;
                });
                document.querySelectorAll('[data-step-label]').forEach(l => {
                    const s = parseInt(l.dataset.stepLabel);
                    l.classList.toggle('fw-semibold', s === current);
                    l.classList.toggle('text-muted', s !== current);
                });
                document.querySelectorAll('[data-step-body]').forEach(b =>
                    b.classList.toggle('d-none', parseInt(b.dataset.stepBody) !== current)
                );
                document.getElementById('btnPrev').disabled = current === 1;
                document.getElementById('btnNext').classList.toggle('d-none', current === totalSteps);
                document.getElementById('btnSubmit').classList.toggle('d-none', current !== totalSteps);
            }

            function validateStep1() {
                const unidadHidden = document.getElementById('unidad_hidden');
                const unidadSearch = document.getElementById('unidad_search');
                const contactoHidden = document.getElementById('contacto_hidden');
                const contactoSearch = document.getElementById('contacto_search');
                const funcionarioSearch = document.getElementById('funcionario_search');

                const unidadOk = !!unidadHidden.value;
                const contactoOk = !!contactoHidden.value;
                const funcionariosOk = document.querySelectorAll('input[name="funcionarios[]"]').length > 0;

                unidadSearch.classList.toggle('is-invalid', !unidadOk);
                contactoSearch.classList.toggle('is-invalid', !contactoOk);
                funcionarioSearch.classList.toggle('is-invalid', !funcionariosOk);

                return unidadOk && contactoOk && funcionariosOk;
            }

            function validateStep2() {
                const fecha = document.getElementById('fecha_reunion');
                const horaInicioHidden = document.getElementById('hora_inicio_hidden');
                const horaFinHidden = document.getElementById('hora_fin_hidden');
                const horaInicioTrigger = document.getElementById('hora_inicio_trigger');
                const horaFinTrigger = document.getElementById('hora_fin_trigger');
                const modalidad = document.getElementById('modalidad');
                const lugar = document.getElementById('lugar');
                const horaFinError = document.getElementById('hora_fin_error');

                const fechaOk = !!fecha.value && !fecha.classList.contains('is-invalid');
                const horaInicioOk = !!horaInicioHidden.value;
                const horaFinOk = !!horaFinHidden.value && (!horaInicioHidden.value || horaFinHidden.value >
                    horaInicioHidden.value);
                const modalidadOk = !!modalidad.value;
                const lugarOk = lugar.value.trim() !== '';

                fecha.classList.toggle('is-invalid', !fechaOk);
                horaInicioTrigger.classList.toggle('is-invalid', !horaInicioOk);
                horaFinTrigger.classList.toggle('is-invalid', !horaFinOk);
                modalidad.classList.toggle('is-invalid', !modalidadOk);
                lugar.classList.toggle('is-invalid', !lugarOk);
                horaFinError.classList.toggle('d-none', horaFinOk);

                return fechaOk && horaInicioOk && horaFinOk && modalidadOk && lugarOk;
            }

            function validateCurrentStep() {
                if (current === 1) return validateStep1();
                if (current === 2) return validateStep2();
                return true;
            }

            document.getElementById('btnNext').addEventListener('click', () => {
                if (!validateCurrentStep()) {
                    return;
                }
                if (current < totalSteps) {
                    current++;
                    renderWizard();
                }
            });
            document.getElementById('btnPrev').addEventListener('click', () => {
                if (current > 1) {
                    current--;
                    renderWizard();
                }
            });
            renderWizard();

            @include('reuniones.partials.buscadores-js')

            const dropdownIds = ['unidad_dropdown', 'accion_dropdown', 'contacto_dropdown',
                'funcionario_dropdown', 'hora_inicio_dropdown', 'hora_fin_dropdown'
            ];
            const triggerIds = ['unidad_search', 'accion_search', 'contacto_search',
                'funcionario_search', 'hora_inicio_trigger', 'hora_fin_trigger'
            ];

            document.addEventListener('click', e => {
                dropdownIds.forEach((ddId, i) => {
                    const dd = document.getElementById(ddId);
                    const trigger = document.getElementById(triggerIds[i]);
                    if (dd && !dd.contains(e.target) && !trigger?.contains(e.target) && e.target !==
                        trigger) {
                        dd.classList.add('d-none');
                    }
                });
            });

            let accionesFiltradas = [];
            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',
                filterFn: a => accionesFiltradas.some(f => f.id === a.id),
            });
            accionesBuscador.setDisabled(true); // deshabilitado hasta que se elija unidad

            let contactosFiltrados = contactos;
            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: contactos,
                labelFn: c => `${c.nombre} <span class="text-muted small">(${c.email})</span>`,
                iconClass: 'bi bi-person',
                filterFn: c => contactosFiltrados.some(f => f.id === c.id),
            });

            const unidadBuscador = makeSingleBuscador({
                searchEl: document.getElementById('unidad_search'),
                dropdownEl: document.getElementById('unidad_dropdown'),
                hiddenEl: document.getElementById('unidad_hidden'),
                chipEl: document.getElementById('unidad_chip'),
                chipNameEl: document.getElementById('unidad_chip_name'),
                clearEl: document.getElementById('unidad_clear'),
                data: unidades,
                labelFn: u => u.nombre,
                iconClass: 'bi bi-building',
                onSelect: (id) => {
                    const intId = parseInt(id);
                    accionesFiltradas = accionesData.filter(a => a.unidades.includes(intId));
                    accionesBuscador.setDisabled(accionesFiltradas.length === 0);
                    accionesBuscador.pruneStale();
                    document.getElementById('accion_sin_resultados')
                        .classList.toggle('d-none', accionesFiltradas.length > 0);
                    contactosFiltrados = contactos.filter(c => c.unidades.includes(intId));
                    document.getElementById('contacto_sin_resultados')
                        .classList.toggle('d-none', contactosFiltrados.length > 0);
                    if (document.getElementById('contacto_hidden').value &&
                        !contactosFiltrados.some(c => c.id == document.getElementById('contacto_hidden')
                            .value)) {
                        contactoBuscador.clear();
                    }
                },
                onClear: () => {
                    accionesFiltradas = [];
                    accionesBuscador.clearAll();
                    accionesBuscador.setDisabled(true);
                    document.getElementById('accion_sin_resultados').classList.add('d-none');
                    contactosFiltrados = contactos;
                    document.getElementById('contacto_sin_resultados').classList.add('d-none');
                },
            });

            // Funcionarios
            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',
            });

            // Temáticas
            const tematicasBuscadorPaso = makeMultiBuscador({
                searchEl: document.getElementById('tematica_search_paso'),
                dropdownEl: document.getElementById('tematica_dropdown_paso'),
                chipsEl: document.getElementById('tematicas_chips_paso'),
                data: tematicasData,
                inputName: 'tematicas[]',
                labelFn: t => t.label,
                iconClass: 'bi bi-tag',
                idField: 'value',
                nameField: 'label',
            });

            document.getElementById('tematicas_chips_paso').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_paso[]_${slug}`)?.remove();
                    chip.remove();
                });
            });

            const horaInicioHidden = document.getElementById('hora_inicio_hidden');
            const horaFinHidden = document.getElementById('hora_fin_hidden');
            const horaFinLabel = document.getElementById('hora_fin_label');
            const horaFinTrigger = document.getElementById('hora_fin_trigger');
            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');
                        horaFinTrigger.classList.remove('is-invalid');
                        horaFinError.classList.add('d-none');
                    }
                    filtrarSlotsFin();
                });
            setupHoraDropdown('hora_fin_trigger', 'hora_fin_dropdown', 'hora_fin_hidden', 'hora_fin_label');
            filtrarSlotsFin();

            const fechaInput = document.getElementById('fecha_reunion');
            const fechaMaximaPermitida = fechaInput.max;
            fechaInput.addEventListener('change', () => {
                if (!fechaInput.value) return;

                const esFechaMayorAlLimite = !!fechaMaximaPermitida && fechaInput.value > fechaMaximaPermitida;
                if (esFechaMayorAlLimite) {
                    fechaInput.classList.add('is-invalid');
                    document.getElementById('fecha_rango_error').classList.remove('d-none');
                    document.getElementById('fecha_fin_semana_error').classList.add('d-none');
                    fechaInput.value = '';
                    return;
                }

                const esFinDeSemana = [0, 6].includes(new Date(fechaInput.value + 'T00:00:00').getDay());
                fechaInput.classList.toggle('is-invalid', esFinDeSemana);
                document.getElementById('fecha_fin_semana_error').classList.toggle('d-none', !esFinDeSemana);
                document.getElementById('fecha_rango_error').classList.add('d-none');
                if (esFinDeSemana) fechaInput.value = '';
            });

            const unidadHiddenVal = document.getElementById('unidad_hidden').value;
            if (unidadHiddenVal) unidadBuscador.select(unidadHiddenVal);
            prefillAcciones.forEach(id => {
                if (!document.getElementById(`_hidden_accion_ids[]_${id}`)) {
                    accionesBuscador.select(id);
                }
            });
            if (prefillContactoId) setTimeout(() => contactoBuscador.select(prefillContactoId), 0);
            prefillFuncs.forEach(id => funcionariosBuscador.select(id));
            prefillTematicasPaso.forEach(value => {
                const slug = value.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '');
                if (!document.getElementById(`_hidden_tematicas_paso[]_${slug}`)) {
                    tematicasBuscadorPaso.select(value);
                }
            });



        })();
    </script>
@endpush