{{--<section class="login">--}}
    <div class="container">
        <div class="row justify-content-center align-items-center" style="min-height: 80vh;">
            <div class="col-md-6 col-lg-5">
                <div class="loginstart">
                    <div class="padding20 tmargin20">
                        <img class="logo img-responsive" src="{{ asset('assets/img/ardropshipping-logo.png') }}"
                             style="width:170px;display: block;margin:0px auto 20px auto;"
                             alt="ARdropshipping.com | Reset Password">
                        <h1 class="page-heading">Reset Password</h1>
                        <p>Create a strong new password for your account</p>

                        <!-- Flash messages -->
                        @if (session('success'))
                            <div class="alert alert-success">
                                <i class="fa fa-check-circle"></i> {{ session('success') }}
                            </div>
                        @endif

                        @if (session('error'))
                            <div class="alert alert-danger">
                                <i class="fa fa-exclamation-circle"></i> {{ session('error') }}
                            </div>
                        @endif

                        <!-- Info Alert -->
                        <div class="alert alert-info" style="font-size: 13px;">
                            <i class="fa fa-shield-alt"></i> <strong>Security:</strong> After resetting your password, you'll be redirected to the login page where you can sign in with your new password.
                        </div>

                        <!-- Reset Password Form -->
                        <form wire:submit.prevent="save">
                            <div class="form-group">
                                <label for="email"><span class="tred">*</span>E-Mail</label>
                                <div class="input-group login-field">
                                    <span class="input-group-addon input-icon"><i
                                            class="fa-regular fa-envelope"></i></span>
                                    <input type="email" id="email" wire:model="email"
                                           class="form-control input-lg @error('email') is-invalid @enderror"
                                           placeholder="test@gmail.com" required>
                                </div>
                                @error('email')
                                <span class="text-danger small">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label for="password"><span class="tred">*</span>New Password</label>
                                <div class="input-group login-field position-relative">
                                    <span class="input-group-addon input-icon"><i class="fa fa-lock"></i></span>
                                    <input type="password" id="password" wire:model="password"
                                           class="form-control input-lg @error('password') is-invalid @enderror"
                                           placeholder="Enter a strong password (min 6 characters)" required>
                                    <button type="button" class="show-pass-btn" onclick="togglePassword('password', 'eye-icon-1')"
                                            style="position: absolute; right: 10px; top: 8px; background: none; border: none;">
                                        <i id="eye-icon-1" class="fa-solid fa-eye"></i>
                                    </button>
                                </div>
                                @error('password')
                                <span class="text-danger small">{{ $message }}</span>
                                @else
                                <small class="text-muted">
                                    <i class="fa fa-info-circle"></i> Use at least 6 characters with a mix of letters and numbers
                                </small>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label for="password_confirmation"><span class="tred">*</span>Confirm Password</label>
                                <div class="input-group login-field position-relative">
                                    <span class="input-group-addon input-icon"><i class="fa fa-lock"></i></span>
                                    <input type="password" id="password_confirmation" wire:model="password_confirmation"
                                           class="form-control input-lg @error('password_confirmation') is-invalid @enderror"
                                           placeholder="Confirm Password" required>
                                    <button type="button" class="show-pass-btn" onclick="togglePassword('password_confirmation', 'eye-icon-2')"
                                            style="position: absolute; right: 10px; top: 8px; background: none; border: none;">
                                        <i id="eye-icon-2" class="fa-solid fa-eye"></i>
                                    </button>
                                </div>
                                @error('password_confirmation')
                                <span class="text-danger small">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="row">
                                <div class="col-md-12 col-xs-12">
                                    <div class="form-group">
                                        <button type="submit" class="btn btn-green btn-block pull-right btn-lg">
                                            Reset Password
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>

                        <div class="tmargin10 bmargin10 tcenter">
                            Remember your password?
                            <a wire:navigate href="/login">
                                <span class="pointer bold torange" role="button">Sign in here</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function togglePassword(inputId, iconId) {
            const passwordInput = document.getElementById(inputId);
            const eyeIcon = document.getElementById(iconId);

            if (passwordInput.type === "password") {
                passwordInput.type = "text";
                eyeIcon.classList.remove("fa-eye");
                eyeIcon.classList.add("fa-eye-slash");
            } else {
                passwordInput.type = "password";
                eyeIcon.classList.remove("fa-eye-slash");
                eyeIcon.classList.add("fa-eye");
            }
        }
    </script>
{{--</section>--}}