@props([
    'name', 
    'label', 
    'value' => null, 
    'symbol' => '$', 
    'required' => false
])

<div class="form-group">
    {{-- Label Estilizado (Consistente con los otros inputs) --}}
    <label for="{{ $name }}" class="font-weight-bold text-dark small text-uppercase" style="letter-spacing: 0.5px;">
        {{ $label }} 
        @if($required) <span class="text-danger" title="Campo obligatorio">*</span> @endif
    </label>
    
    <div class="input-group shadow-sm">
        {{-- Símbolo de Moneda (Integrado visualmente: fondo blanco y sin borde derecho) --}}
        <div class="input-group-prepend">
            <span class="input-group-text bg-white text-dark font-weight-bold border-right-0">
                {{ $symbol }}
            </span>
        </div>

        {{-- Input Numérico --}}
        <input 
            type="number" 
            name="{{ $name }}" 
            id="{{ $name }}" 
            value="{{ old($name, $value) }}"
            placeholder="0.00"
            {{-- Merge de clases y atributos: step por defecto 0.01 pero sobreescribible --}}
            {{ $attributes->merge([
                'step' => '0.01',
                'class' => 'form-control border-left-0 text-right font-weight-bold ' . ($errors->has($name) ? ' is-invalid' : '')
            ]) }}
        >

        {{-- Mensaje de Error con Ícono --}}
        @error($name)
            <span class="invalid-feedback d-block text-right" role="alert">
                <i class="fas fa-exclamation-circle mr-1"></i> <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div>
</div>


{{-- <div class="row">
    <div class="col-md-6">
        <x-form.money 
            name="precio_usd" 
            label="Precio Venta (Base)" 
            symbol="$" 
            required="true" 
        />
    </div>
    <div class="col-md-6">
        <x-form.money 
            name="precio_bs" 
            label="Equivalente en Bolívares" 
            symbol="Bs" 
            readonly 
            style="background-color: #f8f9fa;" 
        />
    </div>
</div> --}}