{{-- Requiert : $pontsDispo (collection PontBascule), $pontsSel (array d'ids sélectionnés) --}}
@php $pontsSel = collect($pontsSel ?? [])->map(fn($v)=>(int)$v); @endphp
<div>
    <label class="mb-1 block text-[11px] text-slate-400">{{ $pontsLabel ?? 'Pont bascule rattaché' }}</label>
    <div class="flex items-center gap-2">
        <select id="pont-select" class="w-full rounded-lg border-slate-200 text-sm">
            <option value="">— Sélectionner un pont bascule —</option>
            @foreach($pontsDispo as $pb)
                <option value="{{ $pb->id }}" data-lib="{{ $pb->nom }}">{{ $pb->nom }}{{ $pb->localite ? ' — '.$pb->localite : '' }}</option>
            @endforeach
        </select>
        <button type="button" id="pont-add" class="inline-flex h-9 shrink-0 items-center rounded-lg border border-slate-200 px-3 text-sm text-slate-700 hover:bg-slate-50">Ajouter</button>
    </div>
    <div id="pont-chips" class="mt-2 flex flex-wrap gap-2"></div>
</div>
@push('scripts')
<script>
(function () {
    var sel = document.getElementById('pont-select');
    var add = document.getElementById('pont-add');
    var chips = document.getElementById('pont-chips');
    if (!sel || !add || !chips) return;

    var libByVal = {};
    Array.prototype.forEach.call(sel.options, function (o) { if (o.value) libByVal[o.value] = o.getAttribute('data-lib') || o.text; });

    function ajoute(val, lib) {
        if (!val || chips.querySelector('[data-val="' + val + '"]')) return;
        var chip = document.createElement('span');
        chip.className = 'inline-flex items-center gap-1.5 rounded-full bg-emerald-50 py-1 pl-3 pr-1 text-xs text-emerald-700';
        chip.setAttribute('data-val', val);
        chip.innerHTML = '<input type="hidden" name="pont_ids[]" value="' + val + '">' +
            '<span></span>' +
            '<button type="button" class="flex h-5 w-5 items-center justify-center rounded-full text-emerald-400 hover:bg-emerald-100 hover:text-red-600">&times;</button>';
        chip.querySelector('span').textContent = lib || libByVal[val] || val;
        chip.querySelector('button').addEventListener('click', function () { chip.remove(); });
        chips.appendChild(chip);
    }

    add.addEventListener('click', function () {
        if (sel.value) { ajoute(sel.value, libByVal[sel.value]); sel.value = ''; }
    });

    // Pré-sélection (édition)
    var init = @json($pontsSel->values());
    init.forEach(function (v) { ajoute(String(v), libByVal[String(v)]); });
})();
</script>
@endpush