<div class="col-lg-6">
    <div x-data="{
            showDefault: true,
            name: '',
            email: '',
            password: '',
            canContinue() {
                return this.name.trim() && this.email.trim() && this.password.trim();
            }
        }" class="log-reg-form search-modal form-style1 bgc-white p50 p30-sm default-box-shadow1 bdrs12">
        <div class="mb30">
            <h2 class="fw-bold">Signup</h2>
        </div>

        <form wire:submit.prevent="register">
            <!-- Default View -->
            <div x-show="showDefault" x-cloak>
                <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" autofocus wire:model.blur="name" x-model="name" type="text"
                            class="form-control" placeholder="Enter your first name" />
                    </div>
                    <!--[if BLOCK]><![endif]--><?php $__errorArgs = ['name'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                    <span class="text-danger"><?php echo e($message); ?></span>
                    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><!--[if ENDBLOCK]><![endif]-->
                </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.blur="email" x-model="email" type="email"
                            class="form-control" placeholder="Enter your email address" />
                    </div>
                    <!--[if BLOCK]><![endif]--><?php $__errorArgs = ['email'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                    <span class="text-danger"><?php echo e($message); ?></span>
                    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><!--[if ENDBLOCK]><![endif]-->
                </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.live="password" x-model="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>
                    <!--[if BLOCK]><![endif]--><?php $__errorArgs = ['password'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                    <span class="text-danger"><?php echo e($message); ?></span>
                    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><!--[if ENDBLOCK]><![endif]-->
                </div>

                <p>By Signing up, you agreed to <a href="<?php echo e(route('privacy.policy')); ?>">Our Privacy Policy</a> and <a
                        href="<?php echo e(route('terms.condition')); ?>">Use of Service</a></p>

                <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="register" class="spinner-border spinner-border-sm"></span>
                        <span wire:loading wire:target="register">Please wait...</span>
                        <span wire:loading.remove>Continue</span>
                    </button>
                </div> 
                <?php
$__split = function ($name, $params = []) {
    return [$name, $params];
};
[$__name, $__params] = $__split('auth.google');

$__html = app('livewire')->mount($__name, $__params, 'lw-3466032250-0', $__slots ?? [], get_defined_vars());

echo $__html;

unset($__html);
unset($__name);
unset($__params);
unset($__split);
if (isset($__slots)) unset($__slots);
?>

                <!-- <div class="hr_content mb20 text-center"> Already have an account? <a href="<?php echo e(route('login')); ?>"
                        class="text-thm fw-bold">Login</a></span> </div> -->
            </div>

            <!-- Continue View -->
            <div wire:ignore x-show="!showDefault" x-cloak>
                <div class="mb25">
                    <div 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>
                                <!--[if BLOCK]><![endif]--><?php $__currentLoopData = $countries; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $country): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <option value="<?php echo e($country['id']); ?>"
                                    data-content="<span class='flag-wrapper'><img src='<?php echo e($country['flag_url']); ?>' alt='<?php echo e($country['name']); ?> flag' class='flag' /> <?php echo e($country['name']); ?></span>">
                                    <?php echo e($country['name']); ?>

                                </option>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><!--[if ENDBLOCK]><![endif]-->
                            </select>
                        </div>
                        <!--[if BLOCK]><![endif]--><?php $__errorArgs = ['nationality_id'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> <span class="text-danger"><?php echo e($message); ?></span> <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><!--[if ENDBLOCK]><![endif]-->
                    </div>
                    
                <div x-data="{ role: <?php if ((object) ('role') instanceof \Livewire\WireDirective) : ?>window.Livewire.find('<?php echo e($__livewire->getId()); ?>').entangle('<?php echo e('role'->value()); ?>')<?php echo e('role'->hasModifier('live') ? '.live' : ''); ?><?php else : ?>window.Livewire.find('<?php echo e($__livewire->getId()); ?>').entangle('<?php echo e('role'); ?>')<?php endif; ?> }" class="form-style1 mt-4">
                    <!-- Role Selection -->
                    <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" x-model="role"
                                value="buyer">
                            <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" x-model="role"
                                value="seller">
                            <label class="form-check-label" for="seller">Sign up as service provider</label>
                        </div>
                    </div>
                    <!--[if BLOCK]><![endif]--><?php $__errorArgs = ['role'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> <span class="text-danger"><?php echo e($message); ?></span> <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><!--[if ENDBLOCK]><![endif]-->

                    <!-- NIN Input (Visible Only for 'seller') -->
                    <div class="mb25 mt-3" x-show="role === 'seller'" x-data="{ showNin: false }" x-cloak>
                        <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.live="nin" 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>
                        <!--[if BLOCK]><![endif]--><?php $__errorArgs = ['nin'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> <span class="text-danger"><?php echo e($message); ?></span> <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><!--[if ENDBLOCK]><![endif]-->
                    </div>
                </div>
                <!--[if BLOCK]><![endif]--><?php if($errorMessage): ?>
                <span class="text-danger"><?php echo e($errorMessage); ?></span>
                <?php endif; ?><!--[if ENDBLOCK]><![endif]-->

                <br>
                <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="register" class="spinner-border spinner-border-sm"></span>
                        <span wire:loading wire:target="register">Please wait...</span>
                        <span wire:loading.remove>Signup</span>
                    </button>
                </div>
            </div>
    </div>
    </form>
</div>
<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>
<?php /**PATH /var/www/html/resources/views/livewire/auth/register.blade.php ENDPATH**/ ?>