{{--
    Input Rupiah: tampilan bermask "3.600.000", nilai tersimpan integer murni.
    Pakai seperti input biasa: <x-ui.money wire:model="max_price" placeholder="0" />
--}}
@php($model = $attributes->wire('model'))

<div x-data="{
        value: @entangle($model),
        format(n) { return (n === '' || n === null || isNaN(n)) ? '' : new Intl.NumberFormat('id-ID').format(n); },
        onInput(e) {
            const digits = e.target.value.replace(/\D/g, '');
            this.value = digits === '' ? '' : parseInt(digits, 10);
            e.target.value = this.format(this.value);
        }
     }"
     x-effect="if (document.activeElement !== $refs.inp) $refs.inp.value = format(value)"
     class="relative">
    <span class="absolute left-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground pointer-events-none">Rp</span>
    <input x-ref="inp" type="text" inputmode="numeric" autocomplete="off" x-on:input="onInput($event)"
        {{ $attributes->whereDoesntStartWith('wire:model')->merge(['class' => 'w-full pl-9 pr-4 py-2 bg-white dark:bg-background border border-gray-200 dark:border-border rounded-lg text-sm text-foreground text-right focus:ring-1 focus:ring-emerald-500 focus:border-emerald-500 outline-none transition']) }} />
</div>