<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>Let's create your service provider!</h3>
            <p class="text mt20">
                Got an account?
                <!-- <a wire:navigate href="{{ route('login') }}" class="text-thm">Log In!</a> -->
            </p>
        </div>

        <form wire:submit.prevent="verifyNIN">

            <div wire:ignore.self class="mb25">
                <div class="form-style1">
                    <label class="heading-color ff-heading fw500 mb10">Country</label>
                    <div class="bootselect-multiselect">
                        <select wire:model="nationality_id" class="selectpicker">
                            <option selected hidden>Select</option>
                            @foreach ($countries as $country)
                            <option value="{{ $country['id'] }}" data-content="<img src='{{ $country['flag_url'] }}' alt='{{ $country['name'] }} flag' width='20' height='15' /> {{ $country['name'] }}">
                                {{ $country['name'] }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                    @error('category_id') <span class="text-danger">{{ $message }}</span>@enderror
                </div>
            </div>

            <div class="mb25">
                <label class="form-label fw500 dark-color">Firstname</label>
                <div class="input-group">
                    <div class="input-group-text">
                        <i class="flaticon-photo mr8"></i>
                    </div>
                    <input autocomplete="name" wire:model="name" type="text" class="form-control" placeholder="Enter your first name" />
                </div>
                @error('name')
                <span class="text-danger">{{ $message }}</span>
                @enderror
            </div>

            <div class="mb25">
                <label class="form-label fw500 dark-color">Email</label>
                <div class="input-group">
                    <div class="input-group-text">
                        <i class="flaticon-mail mr8"></i>
                    </div>
                    <input autocomplete="email" wire:model="email" type="email" class="form-control" placeholder="Enter your email address" />
                </div>
                @error('email')
                <span class="text-danger">{{ $message }}</span>
                @enderror
            </div> 

            <div class="mb25" x-data="{ showPassword: false }">
                <label class="form-label fw500 dark-color">Password</label>
                <div class="input-group">
                    <div class="input-group-text">
                        <i class="flaticon-website mr8"></i>
                    </div>
                    <input autocomplete="new-password" wire:model.blur="password" :type="showPassword ? 'text' : 'password'" class="form-control" placeholder="Choose your new password" />
                    <button type="button" @click="showPassword = !showPassword" class="input-group-text">
                        <i :class="showPassword ? 'fas fa-eye' : 'fas fa-eye-slash'"></i>
                    </button>
                </div>
                @error('password')
                <span class="text-danger">{{ $message }}</span>
                @enderror
            </div> 

            <div class="mb25" x-data="{ showNin: false }">
                <label class="form-label fw500 dark-color" title="National Identity Number">NIN number</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="Choose your NIN number" />
                    <button type="button" @click="showNin = !showNin" class="input-group-text">
                        <i :class="showNin ? 'fas fa-eye' : 'fas fa-eye-slash'"></i>
                    </button>
                    {{-- <input wire:model="nin" type="tel" maxlength="11" class="form-control" placeholder="Enter your NIN number" /> --}}
                </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="verifyNIN" class="spinner-border spinner-border-sm"> </span>
                    <span wire:loading wire:target="verifyNIN"> Please wait ...</span>
                    <span wire:loading.remove> Become a Service Provider</span>
                </button>
            </div>
            <label class="form-label fw500 dark-color text-center"><a wire:navigate href="{{ route('forget-password') }}">Forget Password</a></label>
            <div class="hr_content mb20 text-center"> Register as Customer? <a wire:navigate href="{{ route('register') }}" class="text-thm">Sign up</a></span> </div>
    </div>
</div>