@use(Illuminate\Support\Number)

<div>
    <div class="grid grid-cols-[auto,minmax(0,1fr)] gap-4 items-baseline">
        <x-label>$20.000</x-label>
        <x-input type="number" wire:model.blur="veinte_mil"/>
        <x-label>$10.000</x-label>
        <x-input type="number" wire:model.blur="diez_mil"/>
        <x-label>$5.000</x-label>
        <x-input type="number" wire:model.blur="cinco_mil"/>
        <x-label>$2.000</x-label>
        <x-input type="number" wire:model.blur="dos_mil"/>
        <x-label>$1.000</x-label>
        <x-input type="number" wire:model.blur="mil"/>
        <x-label>$500</x-label>
        <x-input type="number" wire:model.blur="quinientos"/>
        <x-label>$100</x-label>
        <x-input type="number" wire:model.blur="cien"/>
        <x-label>$50</x-label>
        <x-input type="number" wire:model.blur="cincuenta"/>
        <x-label>$10</x-label>
        <x-input type="number" wire:model.blur="diez"/>
        <hr class="border-b my-4 col-span-full"/>
        <x-label>Total</x-label>
        <x-input value="{{Number::currency($this->totalEfectivo)}}" readonly/>
    </div>
</div>