@extends('web.layouts.layout')

@section('content')

    <main class="mt-100">
        <!-- contact section-->
        <section class="section_padding contact-section">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12 wow slow fadeInUp">
                        <h3 class="d-flex fw-bold orange-color mb-2">
                            {{ __('main.welcome_message') }}
                            <img
                                data-src="{{ asset('assets/web/images/icons/welcome.svg') }}"
                                src="{{ asset('assets/web/images/icons/welcome.svg') }}"
                                width="20px"
                                height="25px"
                                class="img_contain lazyloaded ms-1 mt-1 slide_left_right"
                                alt="{{ $title ?? "" }}"/>
                        </h3>
                        <p class="fs-4">{{ __('users::users.reset_your_password') }}</p>
                        <form method="POST" action="{{ route('web.post.changePassword') }}" class="ajax-form">
                            @csrf
                            <div class="row mt-3">
                                <div class="col-md-12 col-lg-12 col-sm-12 col-x-12">
                                    <div class="input-group mb-3">
                                        <input type="password"
                                               class="form-control @error('password') is-invalid @enderror"
                                               name="password"
                                               value="{{ old('password') }}"
                                               required
                                               autocomplete="off"
                                               id="newPassword"
                                               placeholder="{{ __('users::users.password') }}"
                                               aria-label="{{ __('users::users.password') }}"/>
                                        <span
                                            class="input-group-text orange-color"
                                            id="toggleNewPassword"
                                            style="cursor: pointer">
                                            <i class="fa-light fa-eye-slash" id="newPasswordIcon"></i>
                                        </span>
                                    </div>
                                </div>
                                <div class="col-md-12 col-lg-12 col-sm-12 col-x-12">
                                    <div class="input-group mb-3">
                                        <input type="password"
                                               class="form-control @error('password_confirmation') is-invalid @enderror"
                                               name="password_confirmation"
                                               value="{{ old('password_confirmation') }}"
                                               required
                                               autocomplete="off"
                                               id="confirmPassword"
                                               placeholder="{{ __('users::users.password_confirmation') }}"
                                               aria-label="{{ __('users::users.password_confirmation') }}"/>
                                        <span class="input-group-text orange-color"
                                              id="toggleConfirmPassword"
                                              style="cursor: pointer">
                                            <i class="fa-light fa-eye-slash" id="confirmPasswordIcon"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="nav_btns d-inline mt-4">
                                <button type="submit" class="btn btn-primary half-rounded hvr-txt-trans">
                                    <div class="txt" data-text="{{__('general.confirmation')}}">
                                        <span class="fs-7">
                                           {{__('general.confirmation')}}
                                          <img data-src="{{ asset('assets/web/images/icons/arrows.svg') }}"
                                               src="{{ asset('assets/web/images/icons/arrows.svg') }}"
                                               alt="arrows"
                                               class="lazyload img_contain ms-2"/>
                                        </span>
                                    </div>
                                </button>
                            </div>
                        </form>
                    </div>
                    <div
                        class="col-md-6 col-lg-6 col-sm-12 col-xs-12 wow slow fadeInUp"
                    >
                        <img
                            data-src="{{ asset('assets/web/images/login/reset.png') }}"
                            src="{{ asset('assets/web/images/login/reset.png') }}"
                            width="594px"
                            height="500px"
                            class="img_contain lazyloaded slide_up_down"
                            alt="..."
                        />
                    </div>
                </div>
            </div>
        </section>
    </main>

@endsection