@extends('auth.layouts.auth-template')
@section('title', 'Reset Password')
@section('content')
    <section>
        <div class="row reset-page">
            @include('auth.left-banner')
            <div class="col-xl-5 col-lg-5 col-md-10 col-sm-12 p-0">
                <div class="login-form-section">
                    <div class="row justify-content-center">
                        <div class="col-md-10 col-lg-8 col-sm-10">
                            <div class="login-form-title text-center">
                                <img src="{{ asset('assets/template/images/logo/main-logo.jpg') }}" alt="" />
                                <h3><span class="blue-text">Set</span> New Password</h3>
                                <p>Your password must be 8+ characters with an uppercase letter, a number, and a special character.</p>
                            </div>
                            @if ($errors->has('errors'))
                                <div class="alert alert-danger text-center" role="alert">
                                    {{ $errors->first('errors') }}
                                </div>
                            @endif
                            @if (Session::has('message'))
                                <div class="alert alert-success" role="alert">
                                    {{ Session::get('message') }}
                                </div>
                            @endif

                            <form action="{{ route('backend.auth.reset-password.update', $token) }}" method="POST"
                                id="reset-password">
                                @csrf
                                <div class="row field-container">
                                    <!-- Password Input with Eye Icon -->
                                    <div class="password-field-wrapper">
                                        <div class="password-field">
                                            <label for="new_password">New Password<span class="red-text">*</span> </label>
                                            <input type="password" name="new_password" id="new-password" class="input-field"
                                                placeholder="New Password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
                                                onpaste="return false" value="{{ old('new_password') }}" />
                                            <i class="toggle-password-icon fa-regular fa-eye-slash disabled"
                                                data-target="new-password"></i>
                                        </div>
                                        @error('new_password')
                                            <span class="error">{{ $message }}</span>
                                        @enderror

                                        <div class="password-field">
                                            <label for="confirm_password">Confirm Password<span class="red-text">*</span> </label>
                                            <input type="password" name="confirm_password" id="confirm-password"
                                                class="input-field" placeholder="Confirm Password"
                                                pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" onpaste="return false"
                                                value="{{ old('confirm_password') }}" />
                                            <i class="toggle-password-icon fa-regular fa-eye-slash disabled"
                                                data-target="confirm-password"></i>
                                        </div>
                                        @error('confirm_password')
                                            <span class="error">{{ $message }}</span>
                                        @enderror
                                    </div>

                                    <!-- General Errors -->
                                    @if (session('error'))
                                        <span class="error">{{ session('error') }}</span>
                                    @endif

                                    <!-- Submit Button -->
                                    <button type="submit" class="btn reset-password-btn show-toast"  data-toast-target="#setPasswordToast">Submit <i class="fas fa-arrow-right"></i></button>
                                     <a href="{{ route('backend.auth.index') }}"  class="account-desc"><i class="fas fa-arrow-left"></i>Back to log in</a>
                                </div>

                            </form>

                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>
            <div class="position-fixed top-0 start-50 translate-middle-x p-4" style="z-index: 1090">
                          <div id="setPasswordToast" class="toast login-success-toast" role="alert" aria-live="assertive"
                            aria-atomic="true">

                            <div class="toast-body d-flex align-items-center gap-3">
                           <div class="toast-left">
                                            <div class="check-circle">
                                                    ✓
                                            </div>
                                            </div>
                                <div class="toast-right">
                                    <h6>Password Set Successfully</h6>
                                    <p>Your password has been set successfully. You can now log in using your new password.</p>
                                </div>

                        </div>
                    </div>
               <div class="position-fixed top-0 start-50 translate-middle-x p-4" style="z-index: 1090">
                          <div id="weakpswdToast" class="toast login-success-toast" role="alert" aria-live="assertive"
                            aria-atomic="true">

                            <div class="toast-body d-flex align-items-center gap-3">
                           <div class="toast-left">
                                            <div class="check-circle">
                                                    <i class="fa-solid fa-xmark cross-fa"></i>
                                            </div>
                                            </div>
                                <div class="toast-right">
                                    <h6>Weak Password</h6>
                                    <p>The OTP you entered is incorrect or has expired. Please try again.</p>
                            </div>

                        </div>
                    </div>
               <div class="position-fixed top-0 start-50 translate-middle-x p-4" style="z-index: 1090">
                          <div id="pswdNotMatchToast" class="toast login-success-toast" role="alert" aria-live="assertive"
                            aria-atomic="true">

                            <div class="toast-body d-flex align-items-center gap-3">
                           <div class="toast-left">
                                            <div class="check-circle">
                                                    <i class="fa-solid fa-xmark cross-fa"></i>
                                            </div>
                                            </div>
                                <div class="toast-right">
                                    <h6>Passwords Do Not Match</h6>
                                    <p>The passwords you entered do not match. Please try again.</p>
                            </div>

                        </div>
                    </div>
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            $("#reset-password").validate({
                rules: {
                    new_password: {
                        required: true,
                        checklower: true,
                        checkupper: true,
                        checkdigit: true,
                        checkspecial: true,
                        minlength: 8
                    },
                    confirm_password: {
                        required: true,
                        equalTo: "#new-password"
                    },
                },
                messages: {
                    new_password: {
                        checklower: "The password must contain at least 1 lowercase letter.",
                        checkupper: "The password must contain at least 1 uppercase letter.",
                        checkdigit: "The password must contain at least 1 numeric character.",
                        checkspecial: "The password must contain at least 1 special character.",
                    }
                },
                submitHandler: function(form, e) {
                    form.submit();
                },
                highlight: function(element) {
                    $(element).closest('.form-group').addClass('has-error');
                },
                unhighlight: function(element) {
                    $(element).closest('.form-group').removeClass('has-error');
                }
            });
            $.validator.addMethod("checklower", function(value) {
                return /[a-z]/.test(value);
            });
            $.validator.addMethod("checkupper", function(value) {
                return /[A-Z]/.test(value);
            });
            $.validator.addMethod("checkdigit", function(value) {
                return /[0-9]/.test(value);
            });
            $.validator.addMethod("checkspecial", function(value) {
                return /[\'.?!@#$%^&*()_-]/.test(value);
            });
        });

        // Function to handle password toggle for any field
        function setupPasswordToggle(passwordInputId, toggleIcon) {
            const passwordInput = document.getElementById(passwordInputId);

            // Enable/Disable Eye Icon Based on Password Input
            passwordInput.addEventListener('input', function() {
                if (passwordInput.value.trim() !== "") {
                    toggleIcon.classList.remove('disabled');
                } else {
                    toggleIcon.classList.add('disabled');
                }
            });

            // Toggle Password Visibility on Icon Click
            toggleIcon.addEventListener('click', function() {
                if (!toggleIcon.classList.contains('disabled')) {
                    const isPassword = passwordInput.getAttribute('type') === 'password';
                    passwordInput.setAttribute('type', isPassword ? 'text' : 'password');

                    // Toggle Icon State
                    this.classList.toggle('fa-eye');
                    this.classList.toggle('fa-eye-slash');
                }
            });
        }

        // Set up toggle for both password fields
        document.querySelectorAll('.toggle-password-icon').forEach(icon => {
            const targetId = icon.getAttribute('data-target');
            setupPasswordToggle(targetId, icon);
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {

            document.body.addEventListener('click', function(e) {
                const btn = e.target.closest('.show-toast');
                if (!btn) return;

                const toastSelector = btn.getAttribute('data-toast-target');
                const toastEl = document.querySelector(toastSelector);

                if (!toastEl) return;

                const toast = new bootstrap.Toast(toastEl, {
                    delay: 3000,
                    autohide: true
                });

                toast.show();
            });

        });
    </script>
@endsection