@extends('backend.auth.layouts.auth-template')
@section('title', 'Forgot Password')
@section('content')
    <section>
        <div class="row">
            @include('backend.auth.left-banner')
            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 p-0 right-content-wrapper">
                <div class="login-form-section">
                    <div class="row justify-content-center">
                        <div class="col-md-12 col-lg-12 contact-right-align">
                            <div class="login-form-title text-center">
                                <div class="logo-wrapper position-relative">
                                    <img src="{{ asset('backend/template/images/logo/logo.gif') }}" alt="Logo" />
                                </div>
                                <h2>Need help with your account?</h2>
                                <p>Enter your email address associated with your account and we will <br> send you a link to
                                    reset your password.</p>
                            </div>

                            @if ($errors->has('errors'))
                                <div class="alert alert-danger">
                                    {{ $errors->first('errors') }}
                                </div>
                            @endif
                            @if (Session::has('message'))
                                <div class="alert alert-success">
                                    {{ Session::get('message') }}
                                </div>
                            @endif
                            <form action="{{ route('backend.auth.forgot-password.send') }}" method="POST"
                                id="reset-password">
                                @csrf
                                <div class="flex-column">
                                    <label>Email Address <span class="text-danger">*</span> </label>
                                </div>
                                <div class="inputForm position-relative">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                        viewBox="0 0 20 20" fill="none">
                                        <g clip-path="url(#clip0_218_617)">
                                            <mask id="mask0_218_617" style="mask-type:luminance" maskUnits="userSpaceOnUse"
                                                x="0" y="0" width="20" height="20">
                                                <path d="M20 0H0V20H20V0Z" fill="white" />
                                            </mask>
                                            <g mask="url(#mask0_218_617)">
                                                <path
                                                    d="M14.1667 17.0834H5.83341C3.33341 17.0834 1.66675 15.8334 1.66675 12.9167V7.08341C1.66675 4.16675 3.33341 2.91675 5.83341 2.91675H14.1667C16.6667 2.91675 18.3334 4.16675 18.3334 7.08341V12.9167C18.3334 15.8334 16.6667 17.0834 14.1667 17.0834Z"
                                                    stroke="#9CA3AF" stroke-width="1.5" stroke-miterlimit="10"
                                                    stroke-linecap="round" stroke-linejoin="round" />
                                                <path
                                                    d="M14.1668 7.5L11.5585 9.58333C10.7002 10.2667 9.29183 10.2667 8.4335 9.58333L5.8335 7.5"
                                                    stroke="#9CA3AF" stroke-width="1.5" stroke-miterlimit="10"
                                                    stroke-linecap="round" stroke-linejoin="round" />
                                            </g>
                                        </g>
                                        <defs>
                                            <clipPath id="clip0_218_617">
                                                <rect width="20" height="20" fill="white" />
                                            </clipPath>
                                        </defs>
                                    </svg>
                                    <input type="text" name="email" id="login-email" class="input-field"
                                        placeholder="Enter your email address" value="{{ old('email') }}">
                                </div>
                                @error('email')
                                    <span class="error">{{ $message }}</span>
                                @enderror
                                <button class="btn reset-password-btn">Send Reset Link</button>
                                <a class="stroke-btn" href="{{ route('backend.auth.index') }}">Back to
                                    Login</a>
                            </form>
                        </div>
                    </div>
                    {{-- @include('backend.auth.layouts.patterns') --}}
                </div>
            </div>
        </div>
    </section>
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            // Initialize form validation
            $("#reset-password").validate({
                rules: {
                    email: {
                        required: true,
                        email: true
                    }
                },
                messages: {
                    email: {
                        required: "Please enter your email address.",
                        email: "Please enter a valid email address."
                    }
                },
                errorPlacement: function(error, element) {
                    error.insertAfter(element.closest('.inputForm'));
                },
                submitHandler: function(form) {
                    form.submit(); // Submit the form if validation passes
                }
            });
        });
    </script>
@endsection