{{--
    Prefixed currency amount input (visual prefix only; numeric value is submitted).
    Used wherever forms need a currency symbol beside the field (e.g. plan price).
--}}
@props([
    'name' => 'amount',
    'value' => null,
    'placeholder' => '0.00',
    'prefix' => null,
    'required' => false,
    'disabled' => false,
    'step' => '0.01',
    'min' => '0',
])

@php
    $prefixSymbol = $prefix ?? \App\Support\PriceFormatter::SYMBOL;
@endphp

@php
    $control = 'block w-full rounded-lg border border-input bg-card py-2.5 pl-7 pr-3 text-sm text-card-foreground shadow-sm transition-colors duration-200 placeholder:text-muted-foreground focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20 dark:focus:border-primary-400 disabled:opacity-60 disabled:cursor-not-allowed';
    $err = $errors->has($name) ? ' border-red-400 focus:border-red-500 focus:ring-red-500/20' : '';
@endphp

<div data-amount-field>
    <div class="relative">
        <span
            class="pointer-events-none absolute inset-y-0 left-0 z-10 flex w-7 items-center justify-center text-sm font-medium text-muted-foreground"
            aria-hidden="true">
            {{ $prefixSymbol }}
        </span>
        <input
            type="number"
            id="{{ $name }}"
            name="{{ $name }}"
            value="{{ old($name, $value) }}"
            placeholder="{{ $placeholder }}"
            step="{{ $step }}"
            min="{{ $min }}"
            {{ $required ? 'required' : '' }}
            {{ $disabled ? 'disabled' : '' }}
            {{ $attributes->merge(['class' => trim($control.$err)]) }}
        />
    </div>
    <x-forms.error :name="$name" />
</div>