{{-- Выбор номера для объявления + добавление нового в модалке (без перезагрузки формы).
     Параметры: $verifiedPhones (коллекция UserPhone), $selectedPhoneId (int|null). --}}
<div x-data="adPhoneField(
        @js($verifiedPhones->map(fn ($p) => ['id' => $p->id, 'phone' => $p->phone, 'is_primary' => (bool) $p->is_primary])->values()->all()),
        {{ $selectedPhoneId ?: 'null' }}
     )">
    <label class="mb-1 block text-sm font-medium text-gray-700">📞 Телефон в объявлении</label>

    <div class="flex gap-2">
        <select name="phone_id" class="input flex-1" x-model.number="selectedId" x-show="phones.length" x-cloak>
            <template x-for="p in phones" :key="p.id">
                <option :value="p.id" x-text="p.phone + (p.is_primary ? ' — основной' : '')"></option>
            </template>
        </select>
        <button type="button" @click="openModal()" class="btn-secondary shrink-0 whitespace-nowrap">+ Номер</button>
    </div>

    <p x-show="phones.length" x-cloak class="mt-1 text-xs text-muted">Только подтверждённый номер. Все номера — в <a href="{{ route('cabinet.profile') }}" class="text-brand-600 hover:underline">профиле</a>.</p>
    <p x-show="!phones.length" class="mt-1 text-sm text-amber-700">Нет подтверждённого номера — добавьте его, иначе покупатели не смогут позвонить.</p>

    {{-- Модалка добавления номера --}}
    <div x-show="open" x-cloak class="fixed inset-0 z-[80] flex items-center justify-center bg-black/50 p-4"
         @keydown.escape.window="closeModal()" @click.self="closeModal()">
        <div class="w-full max-w-md rounded-2xl bg-white p-5 shadow-2xl">
            <div class="mb-3 flex items-center justify-between">
                <h3 class="text-lg font-bold text-gray-900">Новый номер</h3>
                <button type="button" @click="closeModal()" class="rounded-lg p-1 text-gray-400 hover:bg-gray-100">
                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
                </button>
            </div>
            @include('cabinet.partials.phone-verify-fields')
        </div>
    </div>
</div>