<div class="col-xl-12 mb-4">
    <div class="log-reg-form search-modal form-style1 bgc-white p50 p30-sm default-box-shadow1 bdrs12">
        <div class="mb30">
            <h3>Update PIN</h3>
        </div>
        <div class="col-lg-12">
            <div class="row">
                <form wire:submit.prevent="setPin" class="form-style1">

                    <div class="mb15" x-data="{ showPin: false }">
                        <label class="form-label fw500 dark-color">PIN</label>
                        <div class="input-group">
                            <div class="input-group-text">
                                <i class="flaticon-website mr8"></i>
                            </div>
                            <input x-bind:type="showPin ? 'text' : 'password'" maxlength="4" class="form-control" placeholder="Enter 4 digit pin" wire:model="pin" />
                            <button type="button" class="input-group-text" x-on:click="showPin = !showPin">
                                <template x-if="showPin">
                                    <i class="fas fa-eye-slash"></i>
                                </template>
                                <template x-if="!showPin">
                                    <i class="fas fa-eye"></i>
                                </template>
                            </button>
                        </div>
                        @error('pin') <span class="text-danger">{{ $message }}</span> @enderror
                        @error('response') <span class="text-success">{{ $message }}</span> @enderror
                    </div>

                    <div class="d-grid mb20">
                        <button type="submit" wire:loading.attr="disabled" class="ud-btn btn-thm default-box-shadow2">
                            <span wire:loading wire:target="setPin" class="spinner-border spinner-border-sm"> </span>
                            <span wire:loading wire:target="setPin"> Please wait ... </span>
                            <span wire:loading.remove> Confirm Pin</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>