@extends(getTemplate() . '.layouts.app')

@push('styles_top')
    <link rel="stylesheet" href="/assets/default/vendors/select2/select2.min.css">
@endpush

@section('content')
    <div class="d-flex flex-column flex-md-row w-100 h-100">
        <!-- Left Side (Form) -->
        <div class="d-flex flex-column flex-lg-row-fluid order-2 p-10 mx-md-20 order-lg-1 border-end border-gray d-none d-md-flex"
            style="flex-shrink: 1; flex-grow: 0;">
            <!-- Form Container -->
            <div class="d-flex flex-center flex-column flex-lg-row-fluid">
                <!-- Form Wrapper -->
                <div class="w-auto p-10">
                    <!-- Forgot Password Form -->
                    <form method="post" action="/forget-password"
                        class="form w-100 fv-plugins-bootstrap5 fv-plugins-framework" novalidate="novalidate"
                        id="kt_forgot_password_form">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <!-- Form Heading -->
                        <div class="text-center mb-11">
                            <!-- Title -->
                            <h1 class="text-gray-900 fw-bolder mb-3">{{ trans('auth.forget_password') }}</h1>
                            <!-- Blurb -->
                            <p class="text-gray-500 fw-semibold fs-6">Please enter your email address, and a link <br/>to reset
                                your password will be sent to you.</p>
                        </div>
                        <!-- Separator -->
                        <div class="separator separator-content my-14">
                            <span class="w-125px text-gray-500 fw-semibold fs-7"></span>
                        </div>
                        <!-- Email Input Group -->
                        <div class="fv-row mb-8 fv-plugins-icon-container">
                            <input type="text" placeholder="Email" name="email" autocomplete="off"
                                class="form-control bg-transparent @error('email') is-invalid @enderror">
                            @error('email')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>

                        @if (!empty(getGeneralSecuritySettings('captcha_for_forgot_pass')))
                            @include('web.default.includes.captcha_input')
                        @endif

                        <!-- Submit Button -->
                        <div class="d-grid mb-10">
                            <button type="submit" id="kt_forgot_password_submit" class="btn btn-primary">
                                <span class="indicator-label">{{ trans('auth.reset_password') }}</span>
                                <span class="indicator-progress">Please wait... <span
                                        class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                            </button>
                        </div>
                        <!-- Sign In Link -->
                        <div class="text-gray-500 text-center fw-semibold fs-6">
                            <a href="/login" class="link-primary">{{ trans('auth.login') }}</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Right Side (Image) -->
        <div class="d-none d-md-flex flex-column flex-lg-row-fluid order-1 order-lg-2" style="flex-grow: 1;">
            <div class="d-flex flex-center justify-content-center flex-column flex-lg-row-fluid flex-grow-1">
                <div class="w-100 h-100"
                    style="background-image: url('/assets/media/auth/auth-logo.png'); max-width: 800px; background-size: contain; background-repeat:no-repeat; background-position: center;">
                </div>
            </div>
        </div>

        <!-- Mobile View -->
        <div class="d-flex flex-column flex-lg-row-fluid order-2 order-lg-1 d-md-none">
            <!-- Mobile Logo -->
            <div class="p-5">
                <div class="w-100"
                    style="background-image: url('/assets/media/auth/auth-logo.png'); background-size: contain; background-repeat: no-repeat; background-position: center; height: 150px;">
                </div>
            </div>
            <!-- Mobile Form -->
            <div class="flex-grow-1 p-10">
                <div class="d-flex flex-center flex-column">
                    <div class="w-100">
                        <!-- Forgot Password Form (Mobile) -->
                        <form method="post" action="/forget-password"
                            class="form w-100 fv-plugins-bootstrap5 fv-plugins-framework" novalidate="novalidate"
                            id="kt_forgot_password_form_mobile">
                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                            <!-- Form Heading -->
                            <div class="text-center mb-11">
                                <!-- Title -->
                                <h1 class="text-gray-900 fw-bolder mb-3">{{ trans('auth.forget_password') }}</h1>
                                <!-- Blurb -->
                                <p class="text-gray-500 fw-semibold fs-6">Please enter your email address, <br/>and a link to
                                    reset your password will be sent to you.</p>
                            </div>
                            <!-- Separator -->
                            <div class="separator separator-content my-14">
                                <span class="w-125px text-gray-500 fw-semibold fs-7"></span>
                            </div>
                            <!-- Email Input Group -->
                            <div class="fv-row mb-8 fv-plugins-icon-container">
                                <input type="text" placeholder="Email" name="email" autocomplete="off"
                                    class="form-control bg-transparent @error('email') is-invalid @enderror">
                                @error('email')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            @if (!empty(getGeneralSecuritySettings('captcha_for_forgot_pass')))
                                @include('web.default.includes.captcha_input')
                            @endif

                            <!-- Submit Button -->
                            <div class="d-grid mb-10">
                                <button type="submit" id="kt_forgot_password_submit_mobile" class="btn btn-primary">
                                    <span class="indicator-label">{{ trans('auth.reset_password') }}</span>
                                    <span class="indicator-progress">Please wait... <span
                                            class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                                </button>
                            </div>
                            <!-- Sign In Link -->
                            <div class="text-gray-500 text-center fw-semibold fs-6">
                                <a href="/login" class="link-primary">{{ trans('auth.login') }}</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts_bottom')
    <script src="/assets/default/vendors/select2/select2.min.js"></script>
    <script src="/assets/default/js/parts/forgot_password.min.js"></script>
@endpush