<?php $__env->startSection('content'); ?>
 <div class="account-pages py-5 pt-sm-5 dark-theme">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8 col-lg-6 col-xl-5">
                
                <div class="card overflow-hidden">
                    <div class="account-form-header">
                        <div class="row">
                            <div class="col-5">
                                <div class="">
                                    <a href="<?php echo e(route('bloxby.home')); ?>" class="auth-logo-dark">
                                    <div class="">
                                            <img src="assets/images/bloxby.svg" alt="logo" height="40">
                                    </div>
                                </div>
                            </a>
                            </div>
                            <div class="col-7 text-end">
                                <div class="">
                                    <h5 class="">Register</h5>
                                    <p class="mb-0">Sign up to continue to Bloxby.</p>
                                </div>
                            </div>
                           
                        </div>
                    </div>
                    <div class="card-body pt-0">
                        <div class="auth-logo">
                            <a href="<?php echo e(route('bloxby.home')); ?>" class="auth-logo-light">
                                <div class="avatar-xl profile-user-wid mb-4">
                                    <span class="avatar-title rounded-circle bg-light">
                                        <img src="assets/images/logo-light.svg" alt="" class="rounded-circle"
                                            height="46">
                                    </span>
                                </div>
                            </a>

                            <!-- <a href="<?php echo e(route('bloxby.home')); ?>" class="auth-logo-dark">
                                <div class="avatar-xl profile-user-wid mb-4">
                                    <span class="avatar-title rounded-circle bg-light">
                                        <img src="assets/images/bloxby.svg" alt="" class="rounded-circle" height="46">
                                    </span>
                                </div>
                            </a> -->
                        </div>
                        <div class="p-2">
                            <form id="register-form" method="POST" action="<?php echo e(route('register')); ?>">
                                <?php echo csrf_field(); ?>
                                <div class="mb-3">
                                    <label class="form-label">Full Name <span class="required-text">*</span></label>
                                    <input class="form-control" type="text" name="name" placeholder="Enter your name" value="<?php echo e(old('name')); ?>" required />
                                    <?php $__errorArgs = ['name'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> <div class="text-danger mt-2"><?php echo e($message); ?></div> <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                </div>
                                <div class="row mb-3">
                                    

                                    <div class="col-md-12">
                                        <label class="form-label">Email <span class="required-text">*</span></label>
                                        <input id="email" class="form-control" type="email" name="email" placeholder="Enter your email"  value="<?php echo e(old('email')); ?>"  required/>
                                        <?php $__errorArgs = ['email'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> <div class="text-danger mt-2"><?php echo e($message); ?></div> <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                    </div>
                                    <?php /*<div  class="col-md-6">
                                        <label class="form-label">Phone <span class="required-text">*</span></label><br/>
                                        <input class="form-control" type="text" maxlength="20" name="phone" id="phone" placeholder="Enter phone" value="{{ old('phone_full','+1') }}" required>
                                        <input class="form-control" type="hidden" name="phone_full" id="phone_full"  value="{{ old('phone_full','+1') }}" >
                                        <div id="phone-error-container">
                                            @error('phone') <div class="text-danger mt-2">{{ $message }}</div> @enderror
                                        </div>
                                    </div>*/ ?>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Password <span class="required-text">*</span></label>
                                    <div class="form-group position-relative pass_field">
                                        <input class="form-control" type="password" name="password" id="password" placeholder="Enter password" required />
                                        <button  type="button"  class="btn btn-light position-absolute end-0 top-0 toggle-password btn-border" tabindex="-1"><i
                                                    class="mdi mdi-eye-outline"></i></button>
                                    </div>
                                    <?php $__errorArgs = ['password'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> <div class="text-danger mt-2"><?php echo e($message); ?></div> <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                </div>
                                <div>
                                    <label class="form-label">Confirm Password <span class="required-text">*</span></label>
                                    <div class="form-group position-relative pass_field">
                                        <input class="form-control" type="password" name="password_confirmation" placeholder="Confirm password" required>
                                        <button  type="button"  class="btn btn-light position-absolute end-0 top-0 toggle-password btn-border" tabindex="-1"><i
                                                    class="mdi mdi-eye-outline"></i></button>
                                    </div>
                                    <?php $__errorArgs = ['password_confirmation'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> <div class="text-danger mt-2"><?php echo e($message); ?></div> <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                </div>
                                <div class="d-grid gap-2 mt-3">
                                    <button type="submit" id="submitBtn" class="btn btn-primary button-text">Sign up</button>
                                </div>
                                <div class="text-center mt-3 text-white">
                                    By clicking Sign up, you agree to our <a target="_blank" href="/terms-of-service" class="text-ps">terms of service</a>
                                </div>
                            </form>
                        </div>
                        <div class="text-center mt-3 text-white">
                            Already have an account? <a href="/login" class="text-ps">Login</a>
                        </div>
                    </div>
                </div>
                <?php echo $__env->make("layouts.partials.auth_footer", \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
            </div>
        </div>
    </div>
</div>
<?php $__env->stopSection(); ?>
<?php $__env->startPush('topcss'); ?>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@25.3.1/build/css/intlTelInput.css"/>
<?php $__env->stopPush(); ?>
<?php $__env->startPush('scripts'); ?>
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@25.3.1/build/js/intlTelInput.min.js"></script>
<script>
    var input = document.querySelector("#phone");
    var iti = window.intlTelInput(input, {
        separateDialCode: true,
        strictMode: true,
        countryOrder: ["us", "in", "gb"], // USA, India, UK
        loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.3.1/build/js/utils.js"),
    });

    // On submit, get the full international number
    $('form').on('submit', function(e) {
        //e.preventDefault();
        let phoneNumber = iti.getNumber(); // e.g., +919812345678
       
        $('#phone_full').val(phoneNumber); // overwrite input value with full number

        //document.getElementById('submitBtn').disabled = true;
    });

</script>
<script>
    $(document).ready(function() {
        $(".toggle-password").click(function() {
            let input = $(this).closest(".pass_field").find("input");
            let icon =  $(this).closest(".pass_field").find("i");

            if (input.attr("type") === "password") {
                input.attr("type", "text");
                
                icon.removeClass("mdi-eye-outline").addClass("mdi-eye-off-outline");
            } else {
                input.attr("type", "password");
                icon.removeClass("mdi-eye-off-outline").addClass("mdi-eye-outline");
            }
        });
    });
</script>
<script src="<?php echo e(asset('assets/validate/jquery.validate.min.js')); ?>"></script>
<script type="text/javascript">
    $(function() {
		
        jQuery.validator.addMethod("fullname", function(value, element) {
            return this.optional(element) || /^[A-Za-z]+(?:\s[A-Za-z]+)?$/.test(value);
        }, "Please enter a valid name.");

		$("#register-form").validate({
            submitHandler: function(form) {
                // Disable button to prevent duplicate submissions
                $("#submitBtn").prop("disabled", true);
                
                form.submit(); // submit the form after disabling
            },
            rules: {
                name: {
                    required: true,
                    fullname: true,
                    minlength: 3
                },
                email: {
                    required: true,
                    email: true,
                    remote: {
                        url: "/check-email",   // your backend route
                        type: "post",
                        data: {
                            email: function() {
                                return $("#email").val();
                            },
                            _token: function() {
                                return $('meta[name="csrf-token"]').attr('content');
                            }
                        }
                    }
                },
                phone: {
                    required: true,
                    /*remote: {
                        url: "/check-phone",   // your backend route
                        type: "post",
                        data: {
                            phone: function() {
                                return iti.getNumber();;
                            },
                            _token: function() {
                                return $('meta[name="csrf-token"]').attr('content');
                            }
                        }
                    }*/
                },
                password: {
                    required: true,
                    minlength: 6
                },
                password_confirmation: {
                    required: true,
                    minlength: 6,
                    equalTo: "#password"   // must match password
                }

            },
            messages: {
                name: {
                    required: "This field is required.",
                    minlength: "Full Name must be at least 3 characters."
                },
                email:{
                    remote: function(response) {
                        return response; // server message is used directly
                    }
                },
                phone:{
                    remote:"Please provide a unqiue phone number."
                },
                password: {
                    required: "This field is required.",
                    minlength: "Password must be at least 6 characters long."
                },
                password_confirmation: {
                    required: "This field is required.",
                    minlength: "Password must be at least 6 characters long.",
                    equalTo: "New password and confirm password do not match."
                }
            },
            errorPlacement: function(error, element) {
                if (element.attr("name") === "phone") {
                    error.appendTo("#phone-error-container");  // Custom container for fullname
                } else {
                    error.insertAfter(element); // Default placement
                }
            }
        })
	});
</script>
<?php $__env->stopPush(); ?>
<?php echo $__env->make('layouts.auth',["title"=>"Register"], \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /var/www/bloxby/resources/views/auth/register.blade.php ENDPATH**/ ?>