@extends('sellers.layout.mainlayout')
    @section('content')

        <!-- Login Section -->
        <div class="login-content">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 my-auto">
                        <div class="login-wrap">

                            <div class="login-header">
                                <a href="{{ route('home') }}">
                                    <img class="logo-blk" src="{{ asset('sellers/assets/img/logo.svg') }}" alt="">
                                </a>
                                <h4>Reset Password</h4>
                                <p>Change New password for your account</p>
                            </div>

                            <!-- Login Form -->
                            <form action="{{ route('seller.reset_password', ['seller']) }}" method="POST" id="reset_password">
                                @csrf
                                <input id="token" name="token" type="text" value="{{ $token }}" hidden>
                                <div class="form-set">
                                    <input class="form-control" name="email" type="text" value="{{ $email }}" placeholder="Email Address" readonly>
                                    @error('email')
                                        <p class='text-danger ms-1'>{{ $message }}</p>
                                    @enderror
                                </div>
                                <div class="form-set">
                                    {{-- <div class="pass-group position-relative">
                                        <input class="form-control pass-input" name="newpassword" type="password" placeholder="New Password">
                                        <span class="toggle-password feather-eye"></span>
                                    </div> --}}



                                    <div class="pass-group position-relative">
                                        <input class="form-control pass-input" id="newpassword" name="newpassword" type="password" placeholder="New Password">
                                        <span class="toggle-password feather-eye" data-toggle="newpassword" style="cursor: pointer;"></span>
                                    </div>
                                    @error('newpassword')
                                        <p class='text-danger ms-1'>{{ $message }}</p>
                                    @enderror
                                </div>
                                <div class="form-set">
                                    {{-- <div class="pass-group position-relative">
                                        <input class="form-control pass-input" name="confirmpassword" type="password" placeholder="Confirm Password">
                                        <span class="toggle-password feather-eye"></span>
                                    </div> --}}
                                    <div class="pass-group position-relative">
                                        <input class="form-control pass-input" id="confirmpassword" name="confirmpassword" type="password" placeholder="Confirm Password">
                                        <span class="toggle-password feather-eye" data-toggle="confirmpassword" style="cursor: pointer;"></span>
                                    </div>
                                    @error('confirmpassword')
                                        <p class='text-danger ms-1'>{{ $message }}</p>
                                    @enderror
                                </div>
                                @if (session()->has('error'))
                                    <p class='text-danger ms-1'>{{ session('error') }}</p>
                                @endif


                                <button class="btn btn-primary w-100 login-btn" type="submit">Change Password</button>
                                <br>
                                <br>
                                <div class="register-link text-center">
                                    <p>No issues return to <a class="forgot-link" href="{{ route('admin.login') }}">Login</a></p>
                                </div>
                            </form>
                            <!-- /Login Form -->

                        </div>
                    </div>
                </div>

            </div>
        </div>
        <!-- /Login Section -->
        <!-- Login image -->
        <div class="login-img-wrapper">
            <div class="login-img">
                <img class="shape-icon1-blk" src="{{ asset('sellers/assets/img/shape1.svg') }}" alt="">
                <img class="shape-icon2-blk" src="{{ asset('sellers/assets/img/shape2.svg') }}" alt="">
                <div class="content-info">
                    <h3>The <span class="text-highlight">1st</span> place to look for <span class="text-highlight">2nd</span> Amendment deals!</h3>
                    <div class="text-end">
                        <img class="img-fluid" src="{{ asset('sellers/assets/img/ad-card-1.svg') }}" alt="">
                    </div>
                    <div class="text-start">
                        <img class="img-fluid" src="{{ asset('sellers/assets/img/ad-card-2.svg') }}" alt="">
                    </div>
                </div>
            </div>
        </div>
        <!-- /Login Section -->
        <style>
            .error {
                color: red;
                font-size: 14px;
            }

            .pass-group {
                position: relative;
                width: 100%; /* Adjust the width as needed */
                margin-bottom: 10px; /* Space between input fields */
            }

            .pass-input {
                width: 100%;
                padding-right: 30px; /* Space for the eye icon */
                height: 30px; /* Adjust the height as needed */
                font-size: 14px; /* Adjust the font size as needed */
            }

            .toggle-password {
                position: absolute;
                right: 10px;
                top: 50%;
                transform: translateY(-50%);
                cursor: pointer;
                z-index: 1;
            }
        </style>
    @endsection

@section('customScript')
<script type="text/javascript">
    $(document).ready(function() {

        $.validator.addMethod("strong_password", function (value, element) {
                let password = value;
                if (!(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[@#$%&])(.{8,20}$)/.test(password))) {
                    return false;
                }
                return true;
            }, function (value, element) {
                let password = $(element).val();
                if (!(/^(?=.*[A-Z])/.test(password))) {
                    return 'Password must contain at least one uppercase.';
                } else if (!(/^(?=.*[a-z])/.test(password))) {
                    return 'Password must contain at least one lowercase.';
                } else if (!(/^(?=.*[@#$%&])/.test(password))) {
                    return "Password must contain special characters from @#$%&.";
                } else if (!(/^(?=.*[0-9])/.test(password))) {
                    return 'Password must contain at least one digit.';
                } else if (!(/^(.{8,20}$)/.test(password))) {
                    return 'Password must be between 8 to 20 characters long.';
                }
                return false;
            });

        $("#reset_password").validate({
            rules: {
                newpassword: {
                    required: true,
                    strong_password: true,
                },
                confirmpassword: {
                    required: true,
                    equalTo: '#newpassword'
                },
            },
            messages: {
                
                newpassword: {
                    required: "Please enter your password",
                },
                confirmpassword: {
                    required: "Please enter your confirm password",
                },
            },
             errorPlacement: function(error, element) {
                if (element.is("ul")) {
                    error.appendTo(element.closest('.form-set'));
                } else {
                    error.appendTo(element.closest('.form-set'));
                }
            },
            submitHandler: function(form) {
                $('#reset_password button').prop('disabled', true);
                $('#reset_password button').html('<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>');
                form.submit();
            }
        });
    });
</script>


@endsection