@extends('user.layout.master')
@section('title', env('APP_NAME'))
@section('content')

    <div class="user-account-section">
        <div class="container">
            <!--login block Start-->
            <div class="account-sec d-md-flex">
                <div class="account-left-side d-none d-md-block ">
                    <div class="user-account-img">
                         <img src="{{ asset('frontend/images/signup.jpg') }}" alt="img">
                    </div>
                </div>
                <div class="account-right-side">
                    <!--sign up form-->
                    <div class="user-form">
                        <h1>Sign Up</h1>

                        <form class="form w-100" method="Post" id="signupForm" action="{{ route('user.store') }}">
                            @csrf
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>First Name</label>
                                        <div class="icon-field">
                                            <input type="text" placeholder="Enter First Name"
                                                onkeyup="removeError('first_name')" id="first_name" name="first_name"
                                                value="{{ old('first_name') }}" data-error="#first_name_error"
                                                autocomplete="off"
                                                class="form-control stop_first_space @error('first_name') is-invalid @enderror"
                                                autofocus />
                                            <i class="fas fa-user"></i>
                                        </div>
                                        <span class="error" id="first_name_error"></span>
                                        @error('first_name')
                                            <br /> <span class="invalid-feedback red first_name" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Last Name</label>
                                        <div class="icon-field">
                                            <input type="text" placeholder="Enter Last Name"
                                                onkeyup="removeError('last_name')" id="last_name" name="last_name"
                                                value="{{ old('last_name') }}" data-error="#last_name_error"
                                                autocomplete="off"
                                                class="form-control stop_first_space @error('last_name') is-invalid @enderror"
                                                autofocus />
                                            <i class="fas fa-user"></i>
                                        </div>
                                        <span class="error" id="last_name_error"></span>
                                        @error('last_name')
                                            <br /> <span class="invalid-feedback red last_name" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>E-mail Address</label>
                                        <div class="icon-field">
                                            <input type="text" placeholder="Enter E-mail Address"
                                                onkeyup="removeError('email_class')" id="email_class" name="email"
                                                value="{{ old('email') }}" autocomplete="off" data-error="#email_error"
                                                class="form-control stop_first_space @if (session('email_error')) is-invalid @endif @error('email') is-invalid @enderror" />
                                            <i class="fas fa-envelope"></i>
                                        </div>
                                        <span class="error" id="email_error"></span>
                                        @error('email')
                                            <br /> <span class="invalid-feedback red email_class" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Password</label>
                                        <div class="icon-field">
                                            <input type="password" name="password" id="password"
                                                class="form-control password_feild1 @error('password') is-invalid @enderror"
                                                data-iconType="open" placeholder="Password" data-error="#password_error" />
                                            <i class="fas fa-eye" id="togglePassword"></i>
                                        </div>
                                        <span class="error" id="password_error"></span>
                                        @error('password')
                                            <br /> <span class="invalid-feedback red mobile_class" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>

                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Confirm Password</label>
                                        <div class="icon-field">
                                            <input type="password" name="confirm_password"
                                                class="form-control password_feild2 @error('confirm_password') is-invalid @enderror"
                                                placeholder="Confirm Password" data-iconType="open"
                                                data-error="#confirm_password_error" />
                                        </div>
                                        <span class="error" id="confirm_password_error"></span>
                                        @error('confirm_password')
                                            <br /><span class="invalid-feedback red mobile_class" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Country Code</label>
                                            <select name="code" id="tel"  class="form-control">
                                                @foreach ($countryCode as $country)
                                                <option value="{{$country->phonecode}}">{{$country->name.' (+'.$country->phonecode.')'}}</option>
                                                @endforeach
                                            </select>
                                            <span class="error" id="code_error"></span>
                                            @error('code')
                                                <br /><span class="invalid-feedback red" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Phone Number</label>
                                        <div class="icon-field">
                                            <span class="flag-icon">
                                            </span>
                                            <input type="text" placeholder="Enter Phone Number"
                                                onkeyup="removeError('mobile_class')" id="mobile_class" name="mobile"
                                                data-error="#mobile_error"
                                                oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');"
                                                value="{{ old('mobile') }}" autocomplete="off"
                                                class="form-control stop_first_space @error('mobile') is-invalid @enderror" />
                                            <i>
                                                <img src="{{ asset('frontend/images/phone-icon.png') }}"
                                                    alt="icon" />
                                            </i>
                                        </div>
                                        <span class="error" id="mobile_error"></span>
                                        @error('mobile')
                                            <br /><span class="invalid-feedback red mobile_class" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>

                            </div>
                            <button type="submit" name="button" class="btn btn-custom full signup-btn"
                                id="kt_sign_up_submit">Sign Up</button>
                        </form>
                        <div class="form-section mt-3">
                            <!--login type block-->
                            <div class="signup-option">
                                {{-- <div class="signin-btn-group d-sm-flex flex-wrap justify-content-between mt-3">
                  <a href="{{route('login.google')}}" class="btn blue-bdr-btn d-flex align-items-center"><i
                      class="fab fa-facebook-f fb-icon d-flex align-items-center justify-content-center"></i>
                    Sign in with Facebook</a> <a href="{{route('login.facebook')}}" class="btn orange-bdr-btn d-flex align-items-center"><i
                      class="fab fa-google-plus-g google-icon d-flex align-items-center justify-content-center"></i>Sign
                    in with Google</a>
                </div> --}}
                                <span class="seprator d-flex justify-content-between align-items-center font600">Or</span>
                                <p class="text-center font300">Don’t have an account ? <a
                                        href="{{ route('user.login') }}" class="text-link orange-color">Login </a></p>
                            </div>
                            <!--login type block-->
                        </div>
                    </div>
                    <!--sign up-->
                </div>
            </div>
        </div>
    </div>
    <!--login block End-->
@endsection
@push('js')
    <script>
        function removeError(i) {
            $("." + i).hide();
            $("#" + i).removeClass('is-invalid');
        }


        
      $("#tel").select2({
          placeholder: "Select Code",
          allowClear: true
      });

        $(document).ready(function() {
            jQuery.validator.addMethod("alphanumeric", function(value, element) {
                    return this.optional(element) ||
                        /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$?%^&*])[a-zA-Z0-9!?@#<>."':;,-/_~`$^%&*]+$/i
                        .test(value);
                },
                "Must contain at least one number and one uppercase and lowercase letter, and one symbol and  at least 8 or more characters"
            );

            jQuery.validator.addMethod("email_verify", function(value, element) {
                return this.optional(element) || /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(
                    value);
            }, "Enter a valid email");

            $('form[id="signupForm"]').validate({
                errorPlacement: function(error, element) {
                    var placement = $(element).data("error");
                    if (placement) {
                        $(placement).append(error)
                    } else {
                        error.insertAfter(element);
                    }
                },
                rules: {
                    first_name: {
                        required: true,
                        maxlength: 15,
                    },
                    last_name: {
                        required: true,
                        maxlength: 15,
                    },
                    email: {
                        required: true,
                        email_verify: true,
                        maxlength: 100,
                    },
                    mobile: {
                        required: true,
                        minlength: 8,
                        maxlength: 11,
                    },
                    password: {
                        required: true,
                        maxlength: 50,
                        minlength: 8,
                        alphanumeric: true,
                    },
                    confirm_password: {
                        required: true,
                        minlength: 8,
                        equalTo: "#password",
                    },

                },
                messages: {
                    first_name: {
                        required: 'First name field is required.',
                        maxlength: 'First name not be more than 15 characters.',
                    },
                    last_name: {
                        required: 'Last name field is required.',
                        maxlength: 'Last name not be more than 15 characters.',
                    },

                    email: {
                        email: 'Enter a valid email address.',
                        required: 'Email address field is required.',
                        maxlength: 'Email not be more than 100 characters.',
                    },
                    mobile: {
                        minlength: 'Phone Number must be at least 8 digits.',
                        maxlength: 'Phone Number not be more than 11 digits.',
                        required: 'Phone Number field is required.'
                    },
                    // address: {
                    //     required: 'Street Address field is required.',
                    //     maxlength: 'Street Address not be more than 200 characters.',
                    // },
                    // city: {
                    //     required: 'City field is required.',
                    //     maxlength: 'City not be more than 50 characters.',
                    // },
                    // state: {
                    //     required: 'State field is required.',
                    //     maxlength: 'State not be more than 50 characters.',
                    // },
                    // zipcode: {
                    //     required: 'Zipcode field is required.',
                    //     minlength: 'Zipcode must be at least 5 characters.',
                    //     maxlength: 'Zipcode not be more than 10 characters.',
                    // },
                    password: {
                        minlength: 'Password must be at least 8 characters long.',
                        maxlength: 'Password name not be more than 50 character.',
                        required: 'Password field is required.'
                    },

                    confirm_password: {
                        minlength: 'Password must be at least 8 characters long.',
                        required: 'Confirm Password field is required.',
                        equalTo: "Password does not match."
                    },

                },
                submitHandler: function(form) {
                    document.getElementById('kt_sign_up_submit').disabled = true;
                    $("#loader-screen").show();
                    setTimeout(() => {
                        form.submit();
                    }, 200);
                },
                showErrors: function(errorMap, errorList) {
                    this.defaultShowErrors();
                    $('input').removeClass('error');
                },
            });
        });
        $(document).ready(function() {
            $('#togglePassword').click(function() {
                const passwordInput = $('input[name="password"]');
                const eyeIcon = $(this);

                if (passwordInput.attr('type') === 'password') {
                    passwordInput.attr('type', 'text');
                    eyeIcon.removeClass('fa-eye').addClass('fa-eye-slash');
                } else {
                    passwordInput.attr('type', 'password');
                    eyeIcon.removeClass('fa-eye-slash').addClass('fa-eye');
                }
            });
        });
    </script>
@endpush