@once
    @push('script')
        <script>
        $(document).on('keyup',".voucher_usage-input",function (e) {
            if(e.which == 8) {
                index = $(this).data('index');
                newIndex = index-1;
                $(this).parents('form').find('.voucher_usage-input[data-index='+newIndex+']').focus().val('');
                return false;
            }

            if (this.value.length >= this.maxLength) {
                this.value = this.value.slice(0, this.maxLength);
                index = $(this).data('index');
                newIndex = index+1;
                $(this).parents('form').find('.voucher_usage-input[data-index='+newIndex+']').focus();

                // if(newIndex == 7){
                //     $('#transaction_amount').focus();
                // }
            }
        });


        function getSixDigitPinVal(form_id){
            let data= {
                success:true,
                passcode:'',
            };
            $("#"+form_id+" input[name='digit[]']").map(function(){
                if( $(this).val() === ''){
                    data.success = false;
                } else {
                    data.passcode += $(this).val();
                }
            }).get();
            return data;
        }

    </script>

    @endpush
@endonce


<form class="form-group" id="{{$id}}">

    <div class="form-row my-4 justify-content-center">
        <div class="form-group">
            <input class="form-control voucher_usage-input codebox" name="digit[]" data-index='1' type="number" inputmode="numeric" pattern="\d*" maxlength="1">
        </div>
        <div class="form-group">
            <input class="form-control voucher_usage-input codebox" name="digit[]" data-index='2' type="number" inputmode="numeric" pattern="\d*" maxlength="1">
        </div>
        <div class="form-group">
            <input class="form-control voucher_usage-input codebox" name="digit[]" data-index='3' type="number" inputmode="numeric" pattern="\d*" maxlength="1">
        </div>
        <div class="form-group">
            <input class="form-control voucher_usage-input codebox" name="digit[]" data-index='4' type="number" inputmode="numeric" pattern="\d*" maxlength="1">
        </div>
        <div class="form-group">
            <input class="form-control voucher_usage-input codebox" name="digit[]" data-index='5' type="number" inputmode="numeric" pattern="\d*" maxlength="1">
        </div>
        <div class="form-group">
            <input class="form-control voucher_usage-input codebox" name="digit[]" data-index='6' type="number" inputmode="numeric" pattern="\d*" maxlength="1">
        </div>

    </div>

</form>