@extends('layouts/blankLayout')

@section('title', 'Forgot Password - MDM ADMIN PORTAL')

@section('page-style')
    <!-- Page -->
    <link rel="stylesheet" href="{{asset('assets/vendor/css/pages/page-auth.css')}}">
@endsection

@section('content')
    <div class="container-xxl">
        <div class="authentication-wrapper authentication-basic container-p-y">
            <div class="authentication-inner py-4">

                <!-- Forgot Password -->
                <div class="card">
                    <div class="card-body">
                        <!-- Logo -->
                        <div class="app-brand justify-content-center">
                            <a href="{{url('/')}}" class="app-brand-link gap-2">
                                <h3 class="mb-1">{{config('variables.templateName')}}!</h3>
                            </a>
                        </div>
                        <!-- /Logo -->
                        <h4 class="mb-2">Forgot Password? 🔒</h4>
                        <p class="mb-4">Enter your email and we'll send you link to reset your password</p>
                        <form id="reset-password-link-form" name="reset-password-link-form" class="mb-3"
                              action="{{url('forgot-password')}}" method="POST" autocomplete="off">
                            <div class="mb-3">
                                @if(session()->has('message'))
                                    <p class="alert alert-info">
                                        {{ session()->get('message') }}
                                    </p>
                                @endif
                            </div>
                            <div class="mb-3">
                                <label for="email" class="form-label">Email</label>
                                <input type="text" class="form-control" id="email" name="email"
                                       placeholder="Enter your email" autofocus>
                            </div>
                            @if(isset($errors) && !empty($errors))
                                <p class="error">{{ $errors->first('email') }}</p>
                            @endif
                            <button class="btn btn-primary d-grid w-100">Send Reset Link</button>
                        </form>
                        <div class="text-center">
                            <a href="{{url('login')}}" class="d-flex align-items-center justify-content-center">
                                <i class="bx bx-chevron-left scaleX-n1-rtl bx-sm"></i>
                                Back to login
                            </a>
                        </div>
                    </div>
                </div>
                <!-- /Forgot Password -->
            </div>
        </div>
    </div>

    @push('scripts')
        <script src="{{ asset('assets/js/sweet-alert/sweetalert.min.js') }}"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
        <script>
            $(document).ready(function () {
                $("#reset-password-link-form").validate({
                    rules: {
                        email: {
                            required: true,
                            email: true,
                        }
                    },
                    messages: {
                        email: {
                            required: "Email is required",
                            email: "Email must be a valid email address"
                        }
                    },
                    errorClass: 'is-invalid',
                    errorPlacement: function (error, element) {
                        var name = $(element).attr("name");
                        $("#error-" + name).html("<strong>" + error[0].outerText + "</strong")
                    },
                });
            });
        </script>
    @endpush
@endsection