@props(['value' => null, 'required' => false, 'name' => 'phone'])

{{-- Kolom nomor HP dengan kode negara "+62" dipatri di kiri — bentuknya sama
     dengan kolom nomor di aplikasi (layar masuk & daftar), jadi admin dan
     pengguna melihat aturan penulisan yang sama.

     Yang diketik hanya sisa nomornya; nilai yang dikirim ke server tetap
     lengkap "+62…" lewat input tersembunyi di bawah, supaya format yang
     tersimpan di DB tidak berubah. Awalan "0" dan "62" yang terlanjur diketik
     atau ditempel dibuang saat mengetik. --}}
@php
    // Nilai lama dari DB / old() masih berbentuk "+62812…" — yang ditampilkan
    // di kolom cuma bagian lokalnya.
    $digits = preg_replace('/\D/', '', (string) $value);
    $local = substr(preg_replace('/^0+/', '', preg_replace('/^62/', '', $digits)), 0, 12);

    // Tampilannya dikelompokkan 3-4-4 seperti saat diketik.
    $shown = strlen($local) <= 3
        ? $local
        : rtrim(substr($local, 0, 3) . ' ' . trim(chunk_split(substr($local, 3), 4, ' ')));
@endphp

<div data-phone-input
     class="flex items-center w-full rounded-xl border border-line bg-white px-3.5 py-2.5 text-sm
            focus-within:border-brand focus-within:ring-2 focus-within:ring-brand/20">
    <span class="font-extrabold text-brand select-none">+62</span>
    <span class="w-px h-5 bg-line mx-3"></span>
    <input type="tel"
           inputmode="numeric"
           autocomplete="tel-national"
           maxlength="15"
           placeholder="812 3456 7890"
           value="{{ $shown }}"
           @required($required)
           data-phone-visible
           class="flex-1 min-w-0 outline-none bg-transparent">
    <input type="hidden" name="{{ $name }}" value="{{ $local === '' ? '' : '+62' . $local }}" data-phone-value>
</div>

@once
    <script>
        // Rapikan ketikan jadi kelompok 3-4-4 (sama seperti di aplikasi),
        // lalu simpan bentuk E.164-nya di input tersembunyi.
        document.addEventListener('input', (e) => {
            const field = e.target.closest('[data-phone-input]');
            if (!field || !e.target.matches('[data-phone-visible]')) return;

            const digits = e.target.value
                .replace(/\D/g, '')
                .replace(/^62/, '')
                .replace(/^0+/, '')
                .slice(0, 12);

            const groups = digits.length <= 3 ? [digits] : [digits.slice(0, 3)];
            for (let i = 3; i < digits.length; i += 4) groups.push(digits.slice(i, i + 4));

            e.target.value = groups.join(' ');
            field.querySelector('[data-phone-value]').value = digits ? '+62' + digits : '';
        });
    </script>
@endonce