@php
    $typeLabels = [
        'extension'      => 'Extension',
        'ivr'            => 'IVR',
        'ring_group'     => 'Ring Group',
        'queue'          => 'Queue',
        'speed_dial'     => 'Speed Dial',
        'time_condition' => 'Time Condition (Chained)',
        'voicemail'      => 'Voicemail',
        'external'       => 'External Number',
        'hangup'         => 'Hangup',
    ];
    $current = strtolower(trim((string) $currentType));
    $pickerId = 'sel_' . md5($typeName . ($label ?? '') . rand());
    $inputId  = 'txt_' . md5($typeName . ($label ?? '') . rand());
    $isRequired = $required ?? false;

    // Types that need a text input instead of dropdown
    $freeTextTypes = ['external', 'hangup'];
    $showTextInput = in_array($current, $freeTextTypes);
    // If current type is empty (new form), default to 'extension' (first real option)
    if ($current === '') $current = 'extension';
@endphp

<div class="col-12 mb-3">
    <label class="form-label fw-semibold">{{ $label }}</label>
    @if(!empty($help))
        <div class="form-text mb-2" style="margin-top:-4px;">{{ $help }}</div>
    @endif
    <div class="row g-2">
        <div class="col-12 col-md-4">
            <select name="{{ $typeName }}" class="form-select form-select-sm tc-dest-type" data-select-id="{{ $pickerId }}" data-input-id="{{ $inputId }}">
                @foreach($typeLabels as $tk => $tl)
                    <option value="{{ $tk }}" @selected($current === $tk)>{{ $tl }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-12 col-md-8">
            {{-- Dropdown for selecting from known destinations --}}
            <select name="{{ $showTextInput ? '' : $idName }}" id="{{ $pickerId }}" class="form-select form-select-sm tc-dest-select" {!! $showTextInput ? 'style="display:none"' : '' !!}>
                <option value="">— select —</option>
                @foreach($destinations as $dt => $opts)
                    @if(!in_array($dt, $freeTextTypes))
                        <optgroup label="{{ $typeLabels[$dt] ?? ucfirst(str_replace('_',' ',$dt)) }}" data-type="{{ $dt }}">
                            @foreach($opts as $o)
                                <option value="{{ $o['id'] }}" data-type="{{ $dt }}" @selected(!$showTextInput && $current === $dt && (string)$currentId === (string)$o['id'])>{{ $o['label'] }}</option>
                            @endforeach
                        </optgroup>
                    @endif
                @endforeach
            </select>
            {{-- Text input for external numbers --}}
            <input type="text" name="{{ $showTextInput ? $idName : '' }}" id="{{ $inputId }}" class="form-control form-control-sm tc-dest-text"
                   placeholder="Enter phone number (e.g. 0824989396)"
                   value="{{ $showTextInput ? ($current === 'hangup' ? 'hangup' : $currentId) : '' }}"
                   {!! $showTextInput ? '' : 'style="display:none"' !!}>
        </div>
    </div>
</div>

@once
@push('plugin-scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const freeTextTypes = ['external', 'hangup'];

    document.querySelectorAll('.tc-dest-type').forEach(function(typeSel) {
        const selectEl = document.getElementById(typeSel.dataset.selectId);
        const inputEl = document.getElementById(typeSel.dataset.inputId);
        if (!selectEl || !inputEl) return;

        // Get the base name from whichever element currently has it
        const baseName = selectEl.name || inputEl.name;

        function update() {
            const type = typeSel.value;
            const isFreeText = freeTextTypes.indexOf(type) !== -1;

            if (isFreeText) {
                // Show text input, hide select
                selectEl.style.display = 'none';
                selectEl.name = '';
                inputEl.style.display = '';
                inputEl.name = baseName;
                if (type === 'hangup') inputEl.value = 'hangup';
            } else {
                // Show select, hide text input
                selectEl.style.display = '';
                selectEl.name = baseName;
                inputEl.style.display = 'none';
                inputEl.name = '';

                // Filter select options by type
                Array.from(selectEl.querySelectorAll('option, optgroup')).forEach(function(el) {
                    if (el.tagName === 'OPTGROUP') {
                        el.style.display = (!type || el.dataset.type === type) ? '' : 'none';
                    } else if (el.value === '') {
                        el.style.display = '';
                    } else {
                        el.style.display = (!type || el.dataset.type === type) ? '' : 'none';
                    }
                });

                // Reset if current selection is hidden
                var cur = selectEl.options[selectEl.selectedIndex];
                if (cur && cur.style && cur.style.display === 'none') selectEl.value = '';
            }
        }

        typeSel.addEventListener('change', update);
        update();
    });
});
</script>
@endpush
@endonce