@extends('layouts.master-without-nav')
@section('title')
Recover Password
@endsection
@section('content')

<div class="auth-maintenance d-flex align-items-center min-vh-100">
    <div class="bg-overlay bg-light"></div>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-10">
                <div class="auth-full-page-content d-flex min-vh-100 py-sm-5 py-4">
                    <div class="w-100">
                        <div class="d-flex flex-column h-100 py-0 py-xl-3">
                            <div class="text-center mb-4">
                                <a href="index" class="">
                                    <span style="font-size: 30px;">{{env('APP_NAME')}}</span>
<!--                                        <img src="{{ URL::asset('build/images/logo-dark.png') }}" alt=""
                                        height="22" class="auth-logo logo-dark mx-auto">
                                    <img src="{{ URL::asset('build/images/logo-light.png') }}" alt=""
                                        height="22" class="auth-logo logo-light mx-auto">-->
                                </a>
                                <p class="text-muted mt-2">User Experience & Interface Design Strategy Saas Solution</p>
                            </div>

                            <div class="card my-auto overflow-hidden">
                                <div class="row g-0">
                                    <div class="col-lg-6">
                                        <div class="bg-overlay bg-primary"></div>
                                        <div class="h-100 bg-auth align-items-end">
                                        </div>
                                    </div>

                                    <div class="col-lg-6">
                                        <div class="p-lg-5 p-4">
                                            <div>
                                                <div class="text-center mt-1">
                                                    <h4 class="font-size-18">Reset Password</h4>
                                                    <p class="text-muted">Reset your password to {{env('APP_NAME')}}.</p>
                                                </div>

                                                <div class="alert alert-success mt-4 pt-2" role="alert">
                                                    Enter your Email and instructions will be sent to you!
                                                </div>

                                                @if (session('status'))
                                                <div class="alert alert-success mt-4 pt-2 alert-dismissible"
                                                     role="alert">
                                                    {{ session('status') }}
                                                    <button type="button" class="btn-close" data-bs-dismiss="alert"
                                                            aria-label="Close"></button>
                                                </div>
                                                @endif

                                                <form method="POST" action="javascript:;" class="auth-input" id="formData">
                                                    @csrf
                                                    <div class="mb-2">
                                                        <!--value="{{ old('email') }}"-->
                                                        <label for="email" class="form-label">Email</label>
                                                        <input id="email" type="email"
                                                               class="form-control @error('email') is-invalid @enderror"
                                                               name="email"  required value=""
                                                               autocomplete="email" autofocus placeholder="Enter Email">

                                                        <div style="margin-top:10px;">
                                                            <div id="responseMessage"></div>
                                                        </div>
                                                    </div>

                                                    <div class="mt-4">
                                                        <button class="btn btn-primary w-100" type="submit" id='submit_button' name='submit_button'>Reset</button>
                                                    </div>
                                                </form>
                                            </div>
                                            <div class="mt-4 text-center">
                                                <p class="mb-0">Don't have an account ? <a href="{{ route('login') }}" class="fw-medium text-primary"> Log in </a> </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- end card -->

                            <div class="mt-5 text-center">
                                <p class="mb-0">©
                                    <script>
                                        document.write(new Date().getFullYear())
                                    </script>Crafted with <i
                                        class="mdi mdi-heart text-danger"></i> by {{env('APP_NAME')}}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end col -->
        </div>
        <!-- end row -->
    </div>
</div>
@endsection
@section('scripts')
<!-- App js -->
<script src="{{ URL::asset('build/js/app.js') }}"></script>


<script>

                                        $('body').on('click', '#submit_button', function () {

                                            var siteurl = "{{route('sent_forgot_email')}}";
                                            $('#responseMessage').html('');
                                            var email = $('#email').val();

                                            if (!email) {
                                                $('#responseMessage').html("<span class='text-danger'>Please enter required email!</span>");
                                                return false;
                                            }
                                            $('#submit_button').html('<center><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span></center>');
                                            $.ajax({
                                                url: siteurl,
                                                type: "POST",
                                                data: $("#formData").serialize(),
                                                dataType: "json",
                                                success: function (response) {
                                                    console.log("----");
                                                    console.log(response.message);
                                                    $('#submit_button').html('Reset');
                                                    if (response.response_code == 400) {
                                                        $('#responseMessage').html("<span class='text-danger'>" + response.message + "</span>");
                                                        return false;
                                                    }

                                                    if (response.response_code == 200) {
                                                        $('#responseMessage').html("<span class='text-success'>" + response.message + "</span>");
                                                        setTimeout(function () {
                                                          //  window.location.href = "{{url('/')}}/";
                                                        }, 1000);

                                                    }
                                                }, error: function (response) {
                                                    $('#submit_button').html('Reset');
                                                    $('#responseMessage').html('');
                                                    if (response.status === 422) {
                                                        var errors = $.parseJSON(response.responseText);
                                                        $('#responseMessage').html(errors.message)

                                                    }

                                                }
                                            });
                                        });



</script>

@endsection