@extends('auth.layouts.master')

@section('title', 'Forget Password')

@section('content')
<div class="card-inner">
    <div class="nk-block-head text-center">
        <div class="nk-block-head-content">
            <div style="margin-bottom: 16px;">
                <svg width="64" height="64" viewBox="0 0 64 64" fill="none">
                    <rect x="16" y="28" width="32" height="24" rx="4" stroke="#0047ba" stroke-width="2.2" fill="none"/>
                    <path d="M22 28v-6a10 10 0 0120 0v6" stroke="#0047ba" stroke-width="2.2" stroke-linecap="round" fill="none"/>
                    <circle cx="32" cy="38" r="3" stroke="#0047ba" stroke-width="2" fill="none"/>
                    <line x1="32" y1="41" x2="32" y2="46" stroke="#0047ba" stroke-width="2" stroke-linecap="round"/>
                    <path d="M16 34h32" stroke="#0047ba" stroke-width="1.2" opacity="0.15"/>
                    <circle cx="32" cy="16" r="3" stroke="#0047ba" stroke-width="1.5" fill="rgba(0,71,186,0.08)"/>
                    <path d="M29 16h-4l2-3" stroke="#0047ba" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M35 16h4l-2-3" stroke="#0047ba" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
            <h4 class="nk-block-title">{{ __('Reset Password') }}</h4>
            <div class="nk-block-des">
                <p>{{ __("Enter your email and we'll send you instructions to reset your password.") }}</p>
            </div>
        </div>
    </div>
    @include('auth.partials.error')
    <form action="{{ route('auth.forget') }}" method="POST" id="forgotPassword" class="form-validate is-alter">
        @csrf
        <div class="form-group">
            <div class="form-label-group">
                <label class="form-label" for="user-email">{{ __('Email Address') }}</label>
            </div>
            <div class="form-control-wrap">
                <div class="form-icon form-icon-left">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" style="color:#8094ae"><rect x="2" y="4" width="20" height="16" rx="3" stroke="currentColor" stroke-width="1.8" fill="none"/><path d="M2 7l10 6 10-6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </div>
                <input name="email" value="{{ old('email') }}" type="text" class="form-control form-control-lg" id="user-email" placeholder="{{ __('Enter your email address') }}" style="padding-left: 44px;" required>
            </div>
        </div>
        @if(has_recaptcha())
            <input type="hidden" id="recaptcha" value="" name="recaptcha">
        @endif
        <div class="form-group">
            <button class="btn btn-lg btn-primary btn-block">{{ __('Send Reset Link') }}</button>
        </div>
    </form>
    <div class="form-note-s2 text-center pt-4">
        <a href="{{ route('auth.login') }}">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style="vertical-align: -2px; margin-right: 4px;"><path d="M19 12H5M5 12l7 7M5 12l7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
            <strong>{{ __('Return to login') }}</strong>
        </a>
    </div>
</div>
@endsection

@if (has_recaptcha())
@push('scripts')
<script>
    grecaptcha.ready(function() {
        grecaptcha.execute('{{recaptcha_key("site")}}', {action: 'password'}).then(function(token) {
            document.getElementById('recaptcha').value=token;
        });
    });
</script>
@endpush
@endif