{{--
    Seletor de Unidades Organizacionais com busca e chips removíveis.

    Variáveis esperadas:
      $unidades          → Collection de UnidadeOrganizacional (com secretaria eager-loaded)
      $selectedUnidades  → array de IDs já selecionados
--}}
@php
    $selectedUnidades = $selectedUnidades ?? [];
    $selectedItems    = $unidades->whereIn('id', $selectedUnidades);

    $datasetJson = json_encode(
        $unidades->map(fn($u) => [
            'id'               => $u->id,
            'abbreviation'     => $u->abbreviation,
            'name'             => $u->name,
            'secretaria_abbrev'=> optional($u->secretaria)->abbreviation ?? '',
            'secretaria_name'  => optional($u->secretaria)->name ?? '',
        ])->values()
    );
@endphp

<div class="mb-3" id="unidades-selector">

    <label class="form-label fw-semibold">
        {{ __('Unidades Organizacionais') }}
        <small class="fw-normal text-muted ms-1">
            ({{ __('opcional') }})
        </small>
    </label>

    {{-- ===== Chips: unidades já selecionadas ===== --}}
    <div class="border rounded p-2 mb-2 bg-light"
         aria-label="{{ __('Unidades selecionadas') }}">
        <small class="text-muted d-block mb-1 fw-semibold">
            {{ __('Selecionadas:') }}
        </small>
        <div id="unidades-chips" class="d-flex flex-wrap gap-1">
            @foreach($selectedItems as $u)
                <span class="badge bg-primary d-inline-flex align-items-center gap-1 py-2 px-2 fs-6"
                      data-unidade-id="{{ $u->id }}"
                      title="{{ optional($u->secretaria)->abbreviation }} — {{ optional($u->secretaria)->name }}">
                    <span>{{ $u->abbreviation }} — {{ $u->name }}</span>
                    <button type="button"
                            class="btn-close btn-close-white ms-1"
                            style="font-size:0.55rem"
                            data-action="remove-unidade"
                            data-id="{{ $u->id }}"
                            aria-label="{{ __('Remover') }}"></button>
                </span>
            @endforeach
        </div>
        <span id="unidades-empty-msg"
              class="text-muted fst-italic small {{ $selectedItems->isNotEmpty() ? 'd-none' : '' }}">
            {{ __('Nenhuma unidade selecionada.') }}
        </span>
    </div>

    {{-- ===== Busca ===== --}}
    <div class="input-group mb-1">
        <span class="input-group-text" aria-hidden="true">
            <i class="fa-solid fa-magnifying-glass"></i>
        </span>
        <input type="text"
               id="unidades-search"
               class="form-control"
               placeholder="{{ __('Pesquisar unidade por sigla ou nome... (mínimo 2 letras)') }}"
               autocomplete="off"
               aria-label="{{ __('Pesquisar unidade organizacional') }}">
    </div>

    {{-- ===== Resultados da busca ===== --}}
    <div id="unidades-resultados"
         class="list-group d-none"
         style="max-height: 260px; overflow-y: auto;"
         aria-live="polite"
         aria-label="{{ __('Resultados da busca') }}">
    </div>

    @error('unidades')
        <div class="text-danger small mt-1">{{ $message }}</div>
    @enderror
    @error('unidades.*')
        <div class="text-danger small mt-1">{{ $message }}</div>
    @enderror

    {{-- ===== Hidden inputs enviados no formulário ===== --}}
    <div id="unidades-hidden-inputs" aria-hidden="true">
        @foreach($selectedUnidades as $id)
            <input type="hidden" name="unidades[]" value="{{ $id }}" data-id="{{ $id }}">
        @endforeach
    </div>

    {{-- ===== Dataset completo para o JS (não renderizado visualmente) ===== --}}
    <script type="application/json" id="unidades-dataset">{!! $datasetJson !!}</script>

</div>