@extends('layouts.frontlayout')
@section('content')
    <!-- Breadcrumbs -->
    {{-- <div class="breadcrumb_bg_img">
    <div class="page_heading">Reset Password</div>
</div> --}}

    <section class="login_section">
        <div class="container">
            <div class="row">
                <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                    <div class="login_area">
                        <div class="row align-items-center">
                            <div class="col-xxl-7 col-xl-7 col-lg-7 col-md-6 col-sm-12 col-12">
                                <div class="login_left">
                                    <div class="bg_icon">
                                        <img src="{{ url('frontend/images/auth/bg_icon.png') }}" alt="bg-icon" />
                                    </div>
                                    <div class="bg_icon">
                                        <img src="{{ url('frontend/images/auth/bg_icon.png') }}" alt="bg-icon" />
                                    </div>
                                    <div class="login_img reset_img">
                                        <img src="{{ url('frontend/images/auth/reset_pswd_img.png') }}"
                                            alt="reset-img-img" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-xxl-5 col-xl-5 col-lg-5 col-md-6 col-sm-12 col-12">
                                <div class="login_right">
                                    <div class="form_head">
                                        Reset Password
                                    </div>
                                    <form method="post" id="recover_password">
                                        <!--!! CSRF FIELD !!-->
                                        {{ csrf_field() }}
                                        <div class="inputs_fields mt-0">
                                            <div class="form-group">
                                                <div class="form_input">
                                                    <input
                                                        type="password"
                                                        class="form-control"
                                                        name="new_password"
                                                        placeholder="Enter new password"
                                                        autocomplete="off"
                                                        required
                                                    />
                                                    <div class="icon change-icon" data-type="close">
                                                        <i class="fa-solid fa-lock-open d-none"></i>
                                                        <i class="fa-solid fa-lock"></i>
                                                    </div>
                                                </div>
                                                <label
                                                    id="new_password-error"
                                                    class="error"
                                                    for="new_password"
                                                >
                                                    @error('new_password')
                                                        {{ $message }}
                                                    @enderror
                                                </label>
                                            </div>

                                            <div class="form-group">
                                                <div class="form_input">
                                                    <input
                                                        type="password"
                                                        class="form-control"
                                                        name="confirm_password"
                                                        placeholder="Confirm new password"
                                                        autocomplete="off"
                                                        required
                                                    />
                                                    <div class="icon change-icon" data-type="close">
                                                        <i class="fa-solid fa-lock-open d-none"></i>
                                                        <i class="fa-solid fa-lock"></i>
                                                    </div>
                                                </div>
                                                <label
                                                    id="confirm_password-error"
                                                    class="error"
                                                    for="confirm_password"
                                                >
                                                    @error('confirm_password')
                                                        {{ $message }}
                                                    @enderror
                                                </label>
                                            </div>
                                        </div>

                                        <div class="btn_area">
                                            <a href="javascript:;" class="btn btn-primary cancel_btn">Cancel</a>
                                            <button
                                                type="submit"
                                                href="javascript:;"
                                                class="btn btn-primary cancel_btn"
                                            >Reset</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection