@props(['name', 'label', 'value' => '', 'placeholder' => '0.00', 'required' => false])

<div x-data="{
    value: '{{ $value }}',
    get formatted() {
        if (!this.value) return '';
        return new Intl.NumberFormat('en-NG', { maximumFractionDigits: 2 }).format(this.value);
    },
    handleInput(e) {
        // Remove non-numeric characters except dot
        let raw = e.target.value.replace(/[^0-9.]/g, '');
        // Ensure only one dot
        let parts = raw.split('.');
        if (parts.length > 2) raw = parts[0] + '.' + parts.slice(1).join('');
        this.value = raw;
    }
}">
    <label class="block text-xs font-semibold text-slate-700 mb-1">
        {{ $label }} @if ($required)
            <span class="text-red-500">*</span>
        @endif
    </label>
    <div class="relative">
        <span class="absolute left-3 top-2.5 text-slate-500 text-xs font-bold">₦</span>
        <!-- Hidden input for form submission -->
        <input type="hidden" name="{{ $name }}" :value="value">

        <!-- Visible formatted input -->
        <input type="text" :value="formatted" @input="handleInput($event)"
            class="w-full text-sm border-slate-200 rounded-lg bg-slate-50 focus:bg-white focus:border-green-500 pl-7"
            placeholder="{{ $placeholder }}">
    </div>
    @error($name)
        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
    @enderror
</div>