@props([
    'linhas',
    'linhaAtivaIdx' => null,
    'label' => __('Selecione a linha desejada para consultar os horários de saída.'),
    'placeholder' => __('Buscar por nº ou nome da linha...'),
])

@php
    $linhaAtiva = $linhaAtivaIdx !== null ? $linhas[$linhaAtivaIdx] ?? null : null;
    $valorInicial = $linhaAtiva
        ? $linhaAtiva->codigo . ' - ' . $linhaAtiva->nome
        : '';
@endphp

<div class="mb-4 horarios-linha-select-wrap horarios-linha-combobox"
     id="horarios-linha-combobox"
     data-msg-sem-resultados="{{ __('Nenhuma linha encontrada.') }}">

    <label for="horarios-linha-search" class="form-label fw-semibold">
        {{ $label }}
    </label>

    <div class="horarios-linha-combobox__control"
         role="combobox"
         aria-expanded="false"
         aria-haspopup="listbox"
         aria-owns="horarios-linha-listbox">

        <div class="horarios-linha-combobox__busca">
            <i class="fa-solid fa-magnifying-glass horarios-linha-combobox__icone" aria-hidden="true"></i>
            <input type="search"
                   id="horarios-linha-search"
                   class="form-control horarios-linha-combobox__input {{ $linhaAtiva ? 'horarios-linha-combobox__input--ativo' : '' }}"
                   value="{{ $valorInicial }}"
                   placeholder="{{ $placeholder }}"
                   autocomplete="off"
                   aria-autocomplete="list"
                   aria-controls="horarios-linha-listbox"
                   aria-label="{{ __('Buscar linha') }}" />
        </div>

        <ul id="horarios-linha-listbox"
            class="horarios-linha-combobox__list d-none"
            role="listbox"
            aria-label="{{ __('Linhas') }}"
            tabindex="-1"></ul>
    </div>

    <select id="horarios-linha-combobox-source"
            class="d-none"
            aria-hidden="true"
            tabindex="-1">
        @foreach ($linhas as $linha)
            <option value="{{ $linha->codigo }}"
                    data-linha-id="{{ $linha->id }}"
                    data-codigo="{{ $linha->codigo }}"
                    data-nome="{{ $linha->nome }}"
                    data-label="{{ $linha->codigo }} - {{ $linha->nome }}">
                {{ $linha->codigo }} - {{ $linha->nome }}
            </option>
        @endforeach
    </select>
</div>