<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>SURPLUS-HR</title>
    <link rel="stylesheet" href="{{ asset('frontend/css/font-awesome.min.css') }}">
    <link href="{{ asset('frontend/css/bootstrap.min.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('frontend/css/style.css') }}">
    <link rel="stylesheet" href="{{ asset('frontend/css/owl.carousel.css') }}">
    <link rel="stylesheet" href="{{ asset('frontend/css/responsive.css') }}">
    <script src="{{ asset('frontend/js/jquery-3.5.1.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
    <style>
        /* Hide the number input spinner in most browsers */
        input[type="number"]::-webkit-outer-spin-button,
        input[type="number"]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        input[type="number"] {
            -moz-appearance: textfield;
            /* Firefox */
            appearance: none;
            /* Standard syntax */
        }
    </style>
</head>

<body>
    <div class="login-layout d-flex">
        <div class="login-layout-lt">
            <div class="caption-card">
                <img src="{{ asset('frontend/images/logoFt.png') }}" style="width: 19rem;" alt="logo">
                <h1>
                    Create An <br>
                    Account
                </h1>
                <p>
                    Lorem Ipsum is simply dummy text of the printing
                    and typesetting industry
                </p>
            </div>
        </div>

        <div class="login-layout-rt">
            <div class="login-layout-rt-content">
                <div class="title">
                    <h2>Sign Up</h2>
                    <p>Creating your account</p>
                </div>
                @include('frontend.layouts.flash_message')
                <form id="signupForm" action="{{ route('serviceProvider.register.submit') }}" method="POST">
                    @csrf <!-- CSRF protection -->
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label class="required">First Name</label>
                                <input type="text" name="first_name" class="form-control" placeholder="First Name"
                                    required maxlength="150">
                                @if ($errors->has('first_name'))
                                    <span class="text-danger">{{ $errors->first('first_name') }}</span>
                                @endif
                            </div>
                        </div>
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label class="required">Last Name</label>
                                <input type="text" name="last_name" class="form-control" placeholder="Last Name"
                                    required maxlength="150">
                                @if ($errors->has('last_name'))
                                    <span class="text-danger">{{ $errors->first('last_name') }}</span>
                                @endif
                            </div>
                        </div>
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label class="required">Business Name</label>
                                <input type="text" name="business_name" class="form-control"
                                    placeholder="Business Name" required maxlength="150">
                                @if ($errors->has('business_name'))
                                    <span class="text-danger">{{ $errors->first('business_name') }}</span>
                                @endif
                            </div>
                        </div>
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label class="required">Email</label>
                                <input type="email" name="email" class="form-control" placeholder="Email" required>
                                @if ($errors->has('email'))
                                    <span class="text-danger">{{ $errors->first('email') }}</span>
                                @endif
                            </div>
                        </div>
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label class="required">Mobile Number</label>
                                <input type="number" name="mobile" class="form-control" placeholder="Mobile Number"
                                    required pattern="\d{10}">
                                @if ($errors->has('mobile'))
                                    <span class="text-danger">{{ $errors->first('mobile') }}</span>
                                @endif
                            </div>
                        </div>
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label class="required">Date of Birth</label>
                                <input type="date" name="dob" class="form-control" required max="{{ Carbon::yesterday()->format('Y-m-d') }}">
                                @if ($errors->has('dob'))
                                    <span class="text-danger">{{ $errors->first('dob') }}</span>
                                @endif
                            </div>
                        </div>

                        <!-- Password Field -->
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label class="required">Password</label>
                                <div class="input-group">
                                    <input type="password" name="password" class="form-control"
                                        placeholder="............" required>
                                    <div class="input-group-append">
                                        <span class="input-group-text toggle-password" style="cursor: pointer;">
                                            <i class="fas fa-eye-slash" id="eye-password"></i>
                                        </span>
                                    </div>
                                </div>
                                <div class="text-danger password-error"></div> <!-- Error message container -->
                            </div>
                        </div>

                        <div class="col-sm-12">
                            <div class="form-group">
                                <label class="required">Confirm Password</label>
                                <div class="input-group">
                                    <input type="password" name="password_confirmation" class="form-control"
                                        placeholder="............" required>
                                    <div class="input-group-append">
                                        <span class="input-group-text toggle-password" style="cursor: pointer;">
                                            <i class="fas fa-eye-slash" id="eye-confirm-password"></i>
                                        </span>
                                    </div>
                                </div>
                                <div class="text-danger confirm-password-error"></div> <!-- Error message container -->
                            </div>
                        </div>

                        <div class="col-sm-12 text-right my-4">
                            <button type="submit" class="btn-custom">Sign Up</button>
                        </div>
                        <div class="col-sm-12 text-center">
                            Already have an account? <a href="{{ route('users.login') }}">Sign In</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="{{ asset('frontend/js/popper.min.js') }}"></script>
    <script src="{{ asset('frontend/js/bootstrap.min.js') }}"></script>
    <script src="{{ asset('frontend/js/iphone-menu.js') }}"></script>
    <script src="{{ asset('frontend/js/owl.carousel-min.js') }}"></script>
    <script src="{{ asset('frontend/js/custom.js') }}"></script>

    <!-- jQuery Validation Script -->
    <script>
        $(document).ready(function() {
            $.validator.addMethod("validEmail", function(value, element) {
                return this.optional(element) || /^[\w.-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value);
            }, "Please enter a valid email address with an extension.");

            $.validator.addMethod("strongPassword", function(value, element) {
            return this.optional(element) ||
                   /[A-Z]/.test(value) &&  // Check for uppercase letter
                   /[a-z]/.test(value) &&  // Check for lowercase letter
                   /[0-9]/.test(value) &&  // Check for number
                   /[@$!%*?&]/.test(value) && // Check for special character
                   value.length >= 8;     // Minimum length
        }, "Password must be at least 8 characters long and include one uppercase letter, one lowercase letter, one number, and one special character.");


            // Custom validation for passwords matching
            $.validator.addMethod("passwordMatch", function(value, element) {
                return this.optional(element) || $('[name="password"]').val() === value;
            }, "Passwords do not match");

            // Apply jQuery validation rules to the form
            $("#signupForm").validate({
                rules: {
                    first_name: {
                        required: true,
                        maxlength: 150
                    },
                    last_name: {
                        required: true,
                        maxlength: 150
                    },
                    business_name: {
                        required: true,
                        minlength: 2,
                        maxlength: 150
                    },
                    email: {
                        required: true,
                        validEmail: true
                    },
                    mobile: {
                        required: true,
                        minlength: 7,
                        maxlength: 15,
                        digits: true
                    },
                    dob: {
                        required: true
                    },
                    password: {
                        required: true,
                        minlength: 8,
                        strongPassword:true
                    },
                    password_confirmation: {
                        required: true,
                        passwordMatch: true
                    }
                },
                messages: {
                    first_name: {
                        required: "Please enter your first name",
                        minlength: "First name must be at least 2 characters long",
                        maxlength: "First name cannot be more than 150 characters"
                    },
                    last_name: {
                        required: "Please enter your last name",
                        minlength: "Last name must be at least 2 characters long",
                        maxlength: "Last name cannot be more than 150 characters"
                    },
                    business_name: {
                        required: "Please enter your business name",
                        minlength: "Business name must be at least 2 characters long",
                        maxlength: "Business name cannot be more than 150 characters"
                    },
                    email: {
                        required: "Please enter your email",
                        email: "Please enter a valid email address"
                    },
                    mobile: {
                        required: "Please enter your mobile number",
                        minlength: "Mobile number must be 10 digits",
                        maxlength: "Mobile number cannot exceed 10 digits",
                        digits: "Please enter a valid mobile number"
                    },
                    dob: {
                        required: "Please select your date of birth"
                    },
                    password: {
                        required: "Please enter your password",
                        minlength: "Password must be at least 6 characters long"
                    },
                    password_confirmation: {
                        required: "Please confirm your password",
                        passwordMatch: "Passwords do not match"
                    }
                },

                errorClass: "text-danger",
                highlight: function(element) {
                    $(element).addClass("error");
                },
                unhighlight: function(element) {
                    $(element).removeClass("error");
                },
                errorPlacement: function(error, element) {
                    // Place error message after the input group
                    if (element.attr("name") === "password") {
                        error.appendTo(
                        ".password-error"); // Place error message in the specific container
                    } else if (element.attr("name") === "password_confirmation") {
                        error.appendTo(
                        ".confirm-password-error"); // Place error message in the specific container
                    } else {
                        error.insertAfter(element); // Default behavior
                    }
                },
                submitHandler: function(form) {
                    // Handle the form submission
                    form.submit();
                }
            });



            $('.toggle-password').click(function() {
                const input = $(this).closest('.input-group').find('input');
                const type = input.attr('type') === 'password' ? 'text' : 'password';
                input.attr('type', type);
                const icon = $(this).find('i');
                icon.toggleClass('fa-eye fa-eye-slash');
            });

            // Trim leading spaces on input
            const inputs = document.querySelectorAll('input');
            inputs.forEach(input => {
                input.addEventListener('input', function() {
                    this.value = this.value.replace(/^\s+/, '');
                });
            });


        });
    </script>
</body>

</html>
