@props(['id' => null, 'name' => null, 'value' => '0.00', 'required' => false])
<div
    class="currency-input usd"
    x-data="{
        amount: '{{ $value }}',
        get decimalValue() {
            return parseFloat(this.amount.replace(/[^0-9.-]+/g, '')) || 0;
        }
    }"
>
{{-- {{ $value }} --}}
    <input
        type="text"
        x-model="amount"
        x-mask:dynamic="$money($input)"
        pattern="[0-9,.]{0,10}"
        placeholder="0.00" class="input-style "
        id="{{ $id }}"
        @if($required) required @endif
        >

        <input
            type="hidden"
            x-model="decimalValue"
            name="{{ $name }}"
            @if($required) required @endif
        >
</div>

{{-- @props(['id' => null, 'name' => null, 'value' => '0.00', 'required' => false])
<div x-data="{ amount: '{{ $value }}', decimalValue: parseFloat('{{ $value }}') }" class="currency-input usd">

    <input
        type="text"
        x-model="amount"
        x-on:input="decimalValue = parseFloat(amount.replace(/[^0-9.-]+/g,'')) || 0"
        x-mask:dynamic="$money(amount)"
        placeholder="0.00"
        class="input-style"
        id="{{ $id }}"
        @if($required) required @endif
    >

    <input
        type="hidden"
        :value="decimalValue"
        name="{{ $name }}"
    >
</div> --}}