@props([
    'name',
    'id' => null,
    'model',
])

@php $inputId = $id ?? $name; @endphp

<input type="hidden" name="{{ $name }}" x-bind:value="{{ $model }}">
<input
    type="text"
    id="{{ $inputId }}"
    data-money-field
    inputmode="decimal"
    autocomplete="off"
    x-init="window.applyMoneyDisplay($el, {{ $model }})"
    x-effect="window.applyMoneyDisplay($el, {{ $model }})"
    x-on:focus="window.applyMoneyDisplay($event.target, {{ $model }}, { force: true })"
    x-on:input="window.syncMoneyFieldInput($event, (value) => { {{ $model }} = value; })"
    x-on:blur="
        const _p = window.parseRandInput($event.target.value);
        {{ $model }} = _p;
        window.applyMoneyDisplay($event.target, _p);
    "
    {{ $attributes->merge(['class' => 'mt-1 block w-full rounded-xl border-gray-300 shadow-sm focus:border-[var(--dealer-accent-color)] focus:ring-[var(--dealer-accent-color)] text-sm']) }}
>