@extends('layouts.app')

@section('content')
<div class="d-flex flex-column flex-root" id="kt_app_root">
    <style>
        body {
            background-image: url({{asset("assets/images/auth/bg10.jpeg")}});
        }

        [data-theme="dark"] body {
            background-image: url({{asset("assets/media/auth/bg10-dark.jpeg")}});
        }
    </style>
    <div class="d-flex flex-column flex-lg-row flex-column-fluid">
        <div class="d-flex flex-lg-row-fluid">
            <div class="d-flex flex-column flex-center pb-0 pb-lg-10 p-10 w-100">
            <a href="{{url('/')}}">
                <img class="theme-light-show mx-auto mw-100 w-150px w-lg-300px mb-10 mb-lg-20"
                        src="{{ asset('assets/images/auth/agency-dark.png') }}" alt="images" />
                </a>
                <img class="theme-dark-show mx-auto mw-100 w-150px w-lg-300px mb-10 mb-lg-20"
                    src="{{asset("assets/images/auth/agency-dark.png")}}" alt="images" />
                <h1 class="text-gray-800 fs-2qx fw-bold text-center mb-7">Stay ahead in the game of Gymnastics. </h1>
                <div class="text-gray-600 fs-base tzzext-center fw-semibold">Where precision, performance, and
                    excellence meet.!</div>
            </div>
        </div>
        <div class="d-flex flex-column-fluid flex-lg-row-auto justify-content-center justify-content-lg-end p-12">
            <div class="bg-body d-flex flex-center rounded-4 w-md-600px p-10" style="background-color: var(--kt-body-bg)!important;">
                <div class="w-md-400px">

                    <form class="form w-100" method="POST" action="{{ route('password.email') }}" id="resetForm">
                        <div class="text-center mb-10">
                            <h1 class="text-dark fw-bolder mb-3">Forgot Password ?</h1>
                            <div class="text-gray-500 fw-semibold fs-6">Enter your email address to reset your password.</div>
                        </div>
                        @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                        @endif
                        @if (session('error_message'))
                        <div class="clearfix"></div>
                        <div class="alert alert-danger alert-dismissible"><i class="ti-flag-alt"></i>&nbsp; {{ session('error_message') }}

                        </div>
                        @endif
                        <div class="fv-row mb-8">
                            @csrf
                            <input type="text" placeholder="Email" name="email" onkeyup="removeError('email_class')" id="email_class" autocomplete="off" autofocus class="form-control stop_first_space bg-transparent @error('email') is-invalid @enderror" value="{{ old('email') }}" />
                            @error('email')
                            <span class="invalid-feedback red email_class" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div class="d-flex flex-wrap justify-content-center pb-lg-0">
                            <button type="submit" id="kt_password_reset_submit" class="btn btn-primary me-4">
                                <span class="indicator-label">Submit</span>
                                <span class="indicator-progress">Please wait...
                                    <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                            </button>
                            <a href="{{url('/admin/login')}}" class="btn btn-light">Cancel</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection


@push("script")
<script>
    function removeError(i) {
        $("." + i).hide();
        $("#" + i).removeClass('is-invalid');
    }

    $(document).ready(function() {
        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="resetForm"]').validate({
            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_password_reset_submit').disabled = true;
                setTimeout(() => {
                    form.submit();
                }, 200);
            }
        });
    });
</script>
@endpush