@extends('user.layout.master')
@section('title', env('APP_NAME'))
@section('content')
    <style>
        .invalid-feedback {
            display: block !important;
        }
    </style>
    <!-- breadecumb section -->
    <div class="breadcrumbs-sec">

        <div class="container">
            <ul class="breadcrumbs-list">
                <li>
                    <a href="{{url('/')}}">Home</a>
                </li>
                <li class="active">
                    Forgot password
                </li>
            </ul>
        </div>
    </div>
    <!-- breadecumb section -->

    <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/login.jpg') }}" alt="img"> </div>
                </div>
                <div class="account-right-side">
                    <!--sign up form-->
                    <div class="user-form">
                        <h1>Forgot Password</h1>
                        @if (session('error_message'))
                            <div class="clearfix"></div>
                            <div class="alert alert-danger alert-dismissible"> {{ session('error_message') }}
                                
                            </div>
                        @endif
                        @if (session('success_message'))
                            <div class="clearfix"></div>
                            <div class="alert alert-success alert-dismissible"> {{ session('success_message') }}
                                
                            </div>
                        @endif
                        <form class="login-frm" id="loginForm" action="{{ route('forget-password-store') }}" method="POST">
                            @csrf
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Email Address</label>
                                        <div class="icon-field">
                                            <input type="text" placeholder="Enter Email" name="email"
                                                onkeyup="removeError('email')" id="email" value="{{ old('email') }}"
                                                autocomplete="off" autofocus
                                                class="form-control stop_first_space @error('email') is-invalid @enderror"
                                                data-error="#email_error" />
                                            <i class="fas fa-envelope"></i>
                                        </div>
                                        <label id="email-error" class="error" style="display: none" for="email">Email
                                            field is required.</label>
                                        @error('email')
                                            <span class="invalid-feedback red email" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <button type="submit" name="button" class="btn btn-custom full">Submit</button>
                        </form>
                        <div class="form-section mt-3">
                            <!--login type block-->
                            <div class="signup-option">

                                <span class="seprator d-flex justify-content-between align-items-center font600">Or</span>
                                <p class="text-center font300">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');
        }
        $(document).ready(function() {
            setTimeout(() => {
                $(".alert-dismissible").hide();
            }, 4500);
            jQuery.validator.addMethod("alphanumeric", function(value, element) {
                    return this.optional(element) ||
                        /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$?%^&*])[a-zA-Z0-9!?@#<>."':;,-/_~`$^%&*]+$/i
                        .test(value);
                },
                "The password must include at least one number, one uppercase and lowercase letter, and one symbol."
            );
            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="loginForm"]').validate({
                errorPlacement: function(error, element) {
                    var placement = $(element).data("error");
                    if (placement) {
                        $(placement).append(error)
                    } else {
                        error.insertAfter(element);
                    }
                },
                rules: {
                    email: {
                        required: true,
                        email_verify: true,
                    }
                },
                messages: {
                    email: {
                        email: 'Enter a valid email',
                        required: 'Email field is required.'
                    }
                },
                submitHandler: function(form) {
                    document.getElementById('kt_sign_in_submit').disabled = true;
                    $("#loader-screen").show();
                    setTimeout(() => {
                        form.submit();
                    }, 200);
                },
                showErrors: function(errorMap, errorList) {
                    this.defaultShowErrors();
                    $('input').removeClass('error');
                },
            });
        });
    </script>
@endpush