<div class="col-lg-6">
    <div class="log-reg-form search-modal form-style1 bgc-white p50 p30-sm default-box-shadow1 bdrs12">
        <div class="mb30">
            <h3>NIN Verification</h3>
        </div>

        <form wire:submit.prevent="verifyNINOnly">
   
            <div class="mb25" x-data="{ showNin: false }">
                <label class="form-label fw500 dark-color" title="National Identity Number">Enter NIN</label>
                <div class="input-group">
                    <div class="input-group-text">
                        <i class="flaticon-security mr8"></i>
                    </div>
                     <input autocomplete="off" wire:model="nin"  maxlength="11" :type="showNin ? 'text' : 'password'" class="form-control" placeholder="National Identification Number" />
                    <button type="button" @click="showNin = !showNin" class="input-group-text">
                        <i :class="showNin ? 'fas fa-eye' : 'fas fa-eye-slash'"></i>
                    </button>
                </div>
                
                @error('nin')
                <span class="text-danger">{{ $message }}</span>
                @enderror
                @error('success')
                <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="verifyNINOnly" class="spinner-border spinner-border-sm"> </span>
                    <span wire:loading wire:target="verifyNINOnly"> Please wait ...</span>
                    <span wire:loading.remove> Continue</span>
                </button>
            </div> 
        </form>
    </div>
</div>