{{--
    Country-coded mobile number control (E.164) — the caller renders its own
    <label>; this partial renders the dial-code select + national-number input,
    the per-country hint line, and the validation errors. Server-side rules
    live in App\Support\PhoneCountries (the widget is UX, not the gate).

    Include with:
        $phoneValue    stored/prefill phone ("+63 9171234567", legacy "0917…", or null)
        $phoneRequired input required (default false)
        $phonePad      vertical padding class to match sibling inputs (default 'py-2.5')
        $phoneName     input name (default 'phone'); the country select is "{$phoneName}_country"
--}}
@php
    $pfName    = $phoneName ?? 'phone';
    $pfCountry = $pfName . '_country';
    [$pfIso, $pfNational] = \App\Support\PhoneCountries::split($phoneValue ?? null);
    $pfIso      = old($pfCountry, $pfIso);
    $pfNational = old($pfName, $pfNational);
    $pfPad      = $phonePad ?? 'py-2.5';
@endphp
<div x-data="phoneField(@js($pfIso), @js($pfNational))" x-init="clean()">
    <div class="flex">
        <select name="{{ $pfCountry }}" x-model="iso" @change="clean()" aria-label="Country code"
                class="w-28 flex-none text-sm border-[0.5px] border-r-0 border-gray-200 rounded-l-lg pl-2 pr-1 {{ $pfPad }} bg-gray-50 text-gray-600
                       focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
            @foreach(\App\Support\PhoneCountries::LIST as $c)
            <option value="{{ $c['iso'] }}" @selected($pfIso === $c['iso']) title="{{ $c['name'] }}">{{ \App\Support\PhoneCountries::flag($c['iso']) }} +{{ $c['dial'] }}</option>
            @endforeach
        </select>
        <input type="tel" name="{{ $pfName }}" x-model="national" @input="clean()"
               :maxlength="country.max" :placeholder="placeholder" inputmode="numeric"
               @required(!empty($phoneRequired))
               class="flex-1 min-w-0 text-sm border-[0.5px] border-gray-200 rounded-r-lg px-3 {{ $pfPad }} text-gray-700 placeholder-gray-300
                      focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
    </div>
    <p class="mt-1 text-[11px] text-gray-400" x-text="hint"></p>
</div>
@error($pfName)<p class="mt-1 text-xs text-red-500">{{ $message }}</p>@enderror
@error($pfCountry)<p class="mt-1 text-xs text-red-500">{{ $message }}</p>@enderror

@once
<script>
// Digits only, trunk zero stripped, pasted dial codes de-duplicated, length
// capped per country. Mirrors the server rules in App\Support\PhoneCountries.
function phoneField(initIso, initNational) {
    const countries = @json(\App\Support\PhoneCountries::LIST);
    return {
        iso: initIso,
        national: String(initNational || ''),
        get country() { return countries.find(c => c.iso === this.iso) || countries[0]; },
        get placeholder() { return this.iso === 'PH' ? '917 123 4567' : 'Mobile number'; },
        get hint() {
            const c = this.country;
            const rule = c.min === c.max ? c.max + ' digits' : c.min + '–' + c.max + ' digits';
            return c.name + ' — ' + rule;
        },
        clean() {
            let d = this.national.replace(/\D+/g, '');
            if (d.startsWith(this.country.dial) && d.length > this.country.max) {
                d = d.slice(this.country.dial.length);
            }
            d = d.replace(/^0+/, '');
            this.national = d.slice(0, this.country.max);
        },
    };
}
</script>
@endonce