{{-- UM CAMPO DE HORA do formulário de reserva, com DOIS controles.

     Parâmetros: $side ('start' ou 'end'), $label, $times (a grade padrão) e
     $margin (a classe de espaçamento, opcional).

     POR QUE DOIS CONTROLES E NÃO UM: a grade de meia em meia hora cobre o dia a
     dia da arena, mas não cobre o jogo que começou 07:13 ou o horário
     combinado por fora. O select resolve o caso comum em um clique; o input
     resolve o excepcional sem obrigar ninguém a rolar uma lista de 48 itens.

     SÓ UM ESTÁ ATIVO POR VEZ, e o ativo carrega o id e o name — o outro fica
     escondido, desabilitado e SEM identidade. Essa troca de identidade é o
     coração do desenho: o restante do JavaScript lê a hora em quinze lugares
     por #reservation-start-time, e nenhum deles precisa saber que existe um
     modo manual. Continuam lendo o valor de quem estiver valendo.

     A opção "Inserir hora" é a ÚLTIMA da lista de propósito: ela não é um
     horário, é uma saída da lista. No meio das marcas, seria lida como se
     fosse mais uma delas. O JS a recria a cada vez que reconstrói a grade
     (ver fillOptions em resources/js/calendar.js) — se ela sumisse ao trocar
     de quadra, o modo manual desapareceria sem explicação. --}}
<div class="{{ $margin ?? 'mb-2' }}" data-time-field>
    <label for="reservation-{{ $side }}-time" class="form-label">{{ $label }}</label>

    <div class="input-group">
        <select class="form-select"
                id="reservation-{{ $side }}-time"
                name="{{ $side }}_time"
                data-time-role="{{ $side }}"
                data-time-control="select">
            <option value="">--:--</option>
            @foreach ($times as $time)
                <option value="{{ $time }}">{{ $time }}</option>
            @endforeach
            <option value="__manual__">Inserir hora…</option>
        </select>

        {{-- Começa sem id e sem name: quem não está ativo não existe para o
             resto do formulário. `disabled` completa o isolamento — um campo
             desabilitado não entra em validação nem em envio nativo. --}}
        <input type="time"
               class="form-control d-none"
               step="60"
               disabled
               aria-label="{{ $label }} (digitada)"
               data-time-role="{{ $side }}"
               data-time-control="input">

        {{-- A VOLTA PARA A GRADE. Sem ela o modo manual é uma porta de mão
             única: escolher "Inserir hora" por engano deixaria o usuário
             preso digitando, sem nada na tela oferecendo a lista de novo. --}}
        <button type="button"
                class="btn btn-outline-secondary d-none"
                data-time-back="{{ $side }}"
                title="Escolher na lista de horários">
            <i class="bi bi-list-ul"></i>
        </button>
    </div>
</div>