@props([
    'name',
    'label' => null,
    'value' => null,
    'symbol' => 'Rs.',
    'locale' => 'en-NP',
    'help' => null,
    'error' => null,
])

@php
    $resolvedError = $error ?? $errors->first($name);
@endphp

<x-forms.field :name="$name" :label="$label" :help="$help" :error="$resolvedError">
    <div x-data="currencyInput({ value: @js($value), locale: @js($locale) })" class="relative">
        <span class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-slate-400">{{ $symbol }}</span>
        <input type="hidden" name="{{ $name }}" :value="raw">
        <input type="text" id="{{ $name }}" inputmode="decimal" x-model="display" @input="onInput($event)" @focus="onFocus()" @blur="onBlur()"
               class="w-full rounded-xl border border-slate-300 bg-white py-2.5 pl-10 pr-4 text-sm text-slate-900 shadow-sm transition focus:border-primary focus:outline-none focus:ring-4 focus:ring-primary/15">
    </div>
</x-forms.field>