<form wire:submit.prevent="exchange">
    <div class="row text-center">
        <div class="col-lg-3 col-12 mt-2">
            <label for="points">{{ __('Points to convert') }}</label>
            <input id="point"
                   class="form-control @error('point') is-invalid @enderror"
                   wire:model.debounce.500ms="point"
                   type="number"
                   min="{{ settings('minimum-points-allowed-to-convert') }}"
                   max="{{ auth()->user()->point }}"
                   autofocus>
                @error('point')
                    <span class="text-danger" role="alert" style="direction: rtl !important;">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
        </div>
        <div class="col-lg-1 col-12 mt-2">
            <br>
            <span class="fa fa-times"></span>
        </div>
        <div class="col-lg-3 col-12 mt-2">
            <label for="rate">{{ __('Exchange rate') }}</label>
            <input id="rate" value="{{ settings('point-exchange-rate') }}" class="form-control" readonly>
        </div>
        <div class="col-lg-1 col-12 mt-2">
            <br>
            <span class="fa fa-equals"></span>
        </div>
        <div class="col-lg-4 col-12 mt-2">
            <label for="result">{{ __('Amount of credit received') }}</label>
            <input id="result" class="form-control" readonly value="{{ number_format($credit) }}">
        </div>
    </div>
    <div class="row mt-3 mx-lg-5 px-lg-5">
        <button class="btn btn-block btn-warning mx-lg-5" type="submit">{{ __('Convert') }}</button>
    </div>
</form>