<div class="col-lg-6">

    <div class="mb30">
        <h2 class="fw-bold">Signup</h2>
    </div>

    <form wire:submit.prevent="updateRegister">
        <div>
            <div class="mb25">
                <div wire:ignore class="form-style1">
                    <label class="heading-color ff-heading fw500 mb10">Select your 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="<span class='flag-wrapper'><img src='{{ $country['flag_url'] }}' alt='{{ $country['name'] }} flag' class='flag' /> {{ $country['name'] }}</span>">
                                {{ $country['name'] }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                    @error('nationality_id')
                    <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>

                <div class="form-style1 mt-4">
                    <label class="heading-color ff-heading fw500 mb10">Select your user type</label>
                    <div class="d-flex flex-column">
                        <div class="form-check">
                            <input type="radio" id="buyer" name="role" class="form-check-input" wire:model.live="role"
                                value="buyer" @change="document.getElementById('nationalityDropdown').value = ''">
                            <label class="form-check-label" for="buyer">Sign up as user</label>
                        </div>
                        <div class="form-check mt-2">
                            <input type="radio" id="seller" name="role" class="form-check-input" wire:model.live="role"
                                value="seller" @change="document.getElementById('nationalityDropdown').value = ''">
                            <label class="form-check-label" for="seller">Sign up as service provider</label>
                        </div>
                    </div>
                    @error('role')
                    <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
            </div>
            @if($role == 'seller')
            <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" required maxlength="11" :type="showNin ? 'text' : 'password'"
                        class="form-control" placeholder="Enter 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>
                </div>
                @error('nin')
                <span class="text-danger">{{ $message }}</span>
                @enderror
            </div>
            @endif

            <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="updateRegister" class="spinner-border spinner-border-sm"></span>
                    <span wire:loading wire:target="updateRegister">Please wait...</span>
                    <span wire:loading.remove>Signup</span>
                </button>
            </div>

        </div>
    </form>

    <style>
        .country-dropdown .flag-wrapper {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .country-dropdown .flag {
            width: 20px;
            height: 15px;
            border: 1px solid #ddd;
            border-radius: 3px;
            object-fit: cover;
        }
    </style>

</div>